Fokussiere den Editor, wenn der Titel vorab ausgefüllt ist

[Onlyanegg]

Ich habe eine URL, die dieser ähnelt:

https://forum.example.com/new-message?groupname=moderators&title=Help+me+with+some+task+please

Zu der ich auf meiner Website verlinke, um Benutzer zum Forum zu bringen, damit sie eine Frage stellen können. Ich verwende verschiedene Werte für den Titel, um den Titel mit dem Thema vorab auszufüllen, über das sie sich wundern, und ich möchte, dass der Editor im Fokus steht.

Ich habe versucht herauszufinden, wie ich das ändern kann, und die Datei composer.js mit der focusTarget-Definition gefunden, die ziemlich einfach zu ändern wäre, um dieses Verhalten zu unterstützen, wenn der Titel übergeben würde.

Das Problem, das ich habe, ist, dass ich nicht sehen kann, wo focusTarget tatsächlich aufgerufen wird. Ich programmiere seit vielen Jahren, bin aber neu in Ember und habe relativ wenig JavaScript-Programmierung betrieben.

Jeder Tipp, wie ich das angehen kann, wäre sehr willkommen (ein rtfm mit einem Hinweis auf ein vernünftiges Handbuch wäre sogar willkommen)

Prost

[Arkshine]

Ich glaube, das ist es, wonach Sie suchen:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/composer-editor.js#L159-L164

Jedes Mal, wenn sich der Wert von focusTarget ändert, wird diese Funktion setFocus aufgerufen.

[Onlyanegg]

Okay, dieser Code ist das, was ihn zum Laufen bringt. Ich bin mir nicht sicher, welchen Code ich ändern muss, damit diese Methode den Titel erhält, damit ich den Fokus dort entsprechend auf den Editor setzen kann…

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/services/composer.js#L218-L243

[Arkshine]

Ich glaube, Sie können so etwas tun. Das sollte funktionieren.

import putCursorAtEnd from "discourse/lib/put-cursor-at-end";

api.onAppEvent("composer:open", ({ model }) => {
  if (model.title !== "") {
    scheduleOnce("afterRender", () => {
      putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
    });
  }
});

[Onlyanegg]

Ich habe das fast zum Laufen gebracht – wenn der Code ausgeführt wird, erhalte ich einen Fehler, dass scheduleOnce nicht definiert ist – ich habe api.scheduleOnce versucht, aber es sieht so aus, als wäre scheduleOnce eine Ember-Sache. Ich habe versucht, diesen Import zu meiner Komponente hinzuzufügen, aber ich habe einen Fehler erhalten, dass Imports nur auf oberster Ebene zulässig sind.
import { scheduleOnce } from "@ember/runloop";

Ich vermute, dass mir etwas Kleines fehlt und werde weiter daran herumprobieren, aber ich dachte, ich frage mal, ob es für Sie offensichtlich ist.

Danke nochmals

[Arkshine]

Ja, der Import ist korrekt. Setzen Sie beide Importe an den Anfang der Datei, dann sollte alles funktionieren.

[Onlyanegg]

In welche Datei soll ich sie einfügen? Was ich versucht habe, war, es einfach in – als Komponente – zu verwenden. Das ist, was ich getan habe, was zu dem Log “scheduling afterRender” führt, dann zu einem Fehler, dass scheduleOnce nicht existiert. Ich habe versucht, den Import auf verschiedene Arten zu verwenden, aber es funktioniert nicht. Ich vermute, meine Unerfahrenheit mit Modulen in JavaScript bereitet mir Probleme. Vielleicht kann ich es nicht über eine Komponente machen und benötige ein umfassenderes Plugin. Ich werde mir das ansehen – nochmals vielen Dank für Ihre Hilfe

<script type="text/discourse-plugin" version="1.8.0">
    api.onAppEvent("composer:open", ({ model }) => {
      console.log("composer open happened, model is: ", model);
      if (model.title !== "") {
        console.log("scheduling afterRender");
        scheduleOnce("afterRender", () => {
          console.log("after render happening");
          api.putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
        });
      }
    });
</script>

[Arkshine]

Ach so. Ich ging davon aus, dass Sie JS in seinen Dateien verwenden.

Über die Admin-Oberfläche würden Sie dann Folgendes schreiben:

<script type="text/discourse-plugin" version="1.8.0">
    const putCursorAtEnd = require("discourse/lib/put-cursor-at-end").default;
    const { scheduleOnce } = require("@ember/runloop");

    api.onAppEvent("composer:open", ({ model }) => {
      if (model.title !== "") {
        scheduleOnce("afterRender", () => {
          putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
        });
      }
    });
</script>

Nebenbei bemerkt, empfehle ich Ihnen dringend die Verwendung der Theme CLI. Sie können eine Theme-Komponente aus einer Vorlage erstellen, sie mit einem Discourse synchronisieren, wobei Änderungen live aktualisiert werden, und alle Änderungen mit Ihrem Editor aktualisieren. Es ist viel einfacher als die Verwendung der Benutzeroberfläche!

[Onlyanegg]

Vielen Dank – ich wusste, dass mir etwas fehlte – ich werde es auf jeden Fall so einrichten, dass ich das Theme CLI verwende und sie auf diese Weise bearbeite

[Onlyanegg]

Vielen Dank nochmals, Arkshine, ich habe gerade meine erste Komponente mit discourse_theme erstellt
Für alle, die diesen Thread finden: Ich musste im Grunde nur ein paar Befehle ausführen:

gem install discourse_theme
npm install -g yarn
discourse_theme new <component-name>

dann die Datei bearbeiten: javascripts/discourse/api-initializers/.js
Auf GitHub hochladen, und du kannst es installieren / teilen.
Meine ist hier.
Es scheint eine Funktion zu geben, mit der du die Version auf deinem Server automatisch aktualisieren kannst, während du Dateien bearbeitest. Klingt gut und nützlich, wenn ich mich mit komplexeren Komponenten beschäftige.

Prost