Testen Sie unseren neuen Editor!

Wir haben an einem neuen Rich-Text-Editor-Modus für unseren Komponisten gearbeitet, um das Schreiben in Discourse zu erleichtern. Wir sind nun bereit, ihn zu testen und mehr Feedback von unserer Community zu diesem Feature zu erhalten!

Unsere Implementierung baut auf dem exzellenten ProseMirror und seinem nicht-kernigen Markdown-Modul auf. Wir verwenden die Schema-, Parsing- und Serialisierungsdefinitionen des Moduls als Basis für weitere Discourse-spezifische Funktionen.

Dieses Thema dient sowohl als Anleitung zum Testen des neuen Komponisten als auch als Drehscheibe für das Sammeln von Feedback. Vielen Dank im Voraus für Ihre Hilfe! :sparkling_heart:

:gear: Den neuen Komponisten in Ihrer Community verwenden

Wir betrachten den Komponisten immer noch als experimentell, aber Sie können ihn in Ihrer Community verwenden, indem Sie die Einstellung rich editor aktivieren:

:writing_hand: Den neuen Komponisten kennenlernen

Der neue Komponist ist ein Rich-Text-Editor, der die Schreiberfahrung vereinfacht, insbesondere für technisch nicht versierte Benutzer, die sich mit Markdown nicht wohlfühlen. Dieser Editor unterstützt weiterhin Markdown, aber die Formatierung wird sofort gerendert, um eine WYSIWYG-Erfahrung (“What You See Is What You Get”) zu bieten, die sich ähnlich wie bei anderen modernen Web-Kompositionswerkzeugen (wie Notion oder Google Docs) anfühlt.

Um auf den neuen Komponisten zuzugreifen, klicken Sie auf den Schalter in der Symbolleiste. Dadurch können Sie vom aktuellen reinen Markdown-Modus zum neuen Rich-Text-Editor wechseln. Sie können erneut auf den Schalter klicken, um bei Bedarf zurückzuwechseln.

toggle

Was Sie heute testen, ist die erste Version des neuen Komponisten. Er ist noch nicht als vollständiger Ersatz für den aktuellen reinen Markdown-Komponisten gedacht. Wir haben uns zunächst auf die Grundlagen konzentriert, die die Bedürfnisse der meisten Benutzer abdecken sollten.

Bitte lesen Sie die folgenden Abschnitte, um zu verstehen, was derzeit möglich ist und was im neuen Komponisten noch nicht bereit ist. Wir werden diese Bereiche im Laufe der Zeit aktualisieren, wenn die Unterstützung erweitert wird!

:green_circle: Unterstützte Funktionen

Die folgenden Funktionen werden im neuen Komponisten unterstützt:

  • Möglichkeit, einen Titel hinzuzufügen und Kategorien und Tags festzulegen
  • Einzelfenster-Editor im Rich-Text-Editor-Modus (d. h. kein Vorschaufenster)
  • Umschalter zum Wechseln zwischen reinem Markdown- und Rich-Text-Editor-Modus
  • Grundlegende Formatierung [1] unterstützt in Markdown, Tastenkombinationen und Symbolleistenschaltflächen
  • Emoji-Unterstützung
  • Automatische Konvertierung von Markdown in Rich Text beim Einfügen von einfachem Text (z. B. **fett**fett)
  • Automatische Konvertierung von Emoticons (z. B. :):slight_smile: )
  • Bild-UI zum Ändern der Größe, Beschriften oder Gitteranordnen von hinzugefügten Bildern
  • Link-UI zum Besuchen, Bearbeiten, Kopieren oder Entfernen hinzugefügter Links und Ändern ihrer Titel
  • Tabellen-Builder-UI
  • Umfrage-Builder-UI
  • Fußnoten
  • Unterstützung für Erwähnungen und Hashtags
  • Inline-HTML <html>-Tags [2]
  • Typografische Ersetzungen (z. B. ™ , → , ± )
  • Bild-Uploads
  • Dateianhänge
  • Themen- und Chat-Zitate
  • Details ausblenden
  • Spoiler ausblenden (mit Einschränkungen, siehe Abschnitt Fehlende Funktionen)
  • Oneboxes
  • Horizontale Regel-Autokonvertierung (d. h. die Eingabe von --- wird in eine horizontale Regel konvertiert)

:red_circle: Fehlende Funktionen

Die folgenden Funktionen, von denen wir wissen, dass sie derzeit fehlen oder im neuen Komponisten noch nicht vollständig unterstützt werden:

  • Tabellen-UI zum Hinzufügen oder Entfernen von Spalten und Zeilen nach dem Erstellen der Tabelle
  • Umfrage-UI zum Bearbeiten von zuvor erstellten Umfragen
  • Symbolleistenunterstützung zum Hinzufügen von Überschriften
  • Verbesserte Unterstützung für das Ausblenden von Spoilern, um Text auszublenden, Inline-Ausblendung zu unterstützen und das Entfernen von Ausblendungen zu erleichtern.
  • Alles andere, was nicht ausdrücklich im Abschnitt Unterstützte Funktionen aufgeführt ist (z. B. Unterstützung für Mermaid-Diagramme)

:mega: Testen und Feedback teilen

Während Sie testen, können Probleme auftreten, bei denen sich der Komponist nicht wie erwartet verhält. Wenn das passiert, lassen Sie es uns bitte wissen! Ihr Feedback ist ein unschätzbares Gut, das uns hilft, den neuen Komponisten zu verbessern, damit er in Ihrer Community verfügbar gemacht werden kann.

Bitte geben Sie spezifische Schritte zur Reproduktion, Informationen zu Ihrem Browser/Gerät und relevante Screenshots oder Aufzeichnungen an! Sie können auch unsere bekannte Problemverfolgung unten einsehen, um zu sehen, ob jemand bereits das von Ihnen beobachtete Problem gemeldet hat. Wir werden diese Abschnitte auf dem neuesten Stand halten, sobald wir Probleme identifizieren und beheben.

Denken Sie daran, dass Sie mit dem Schalter jederzeit zum reinen Markdown-Modus zurückkehren können, wenn Sie Probleme mit dem neuen Komponisten haben.

:bug: Fehler

  • Unter Firefox scheint es nicht möglich zu sein, den Cursor vor eine Erwähnung zu positionieren, wenn diese den Beitrag beginnt (es ist tatsächlich möglich, aber visuell unklar).

:art: UX-Probleme

  • Verhindern Sie bestimmte Teilformatierungen bei Links, um unerwartete Stile zu vermeiden.
  • Wenden Sie die erwartete visuelle Darstellung/Validierung auf Hashtags für Kategorien, Tags und Chat-Kanäle an.
  • Wenden Sie die erwartete visuelle Darstellung/Validierung auf Erwähnungen von Benutzern und Gruppen an.
  • Der Cursor wird innerhalb des Zitats (statt in der Zeile darunter) fokussiert, wenn ein Beitrag mit einem Zitat beginnt oder wenn Zitate kopiert/eingefügt werden.

:wrench: Entwicklerverbesserungen

  • Verbessern Sie das Parsen von Inline-HTML (z. B. für <a>).

  1. Fett, Kursiv, Unterstrichen (keine Symbolleistenunterstützung), Durchgestrichen (nur Markdown über ~~), Links, Blockzitate, Code, Kontrollkästchen (nur Markdown über [ ]; Symbolleistenunterstützung folgt in Kürze), Aufzählungslisten, nummerierte Listen ↩︎

  2. Einige werden in das nächstgelegene Markdown konvertiert (z. B. s, strike, strong, b, em, i, code; u wird speziell nicht unterstützt, da es nicht zu einer tatsächlichen Unterstreichung wird); andere werden als „html_inline“-Knoten zugelassen (z. B. kbd, sup, sub, small, big, del, ins, mark) ↩︎

71 „Gefällt mir“

Sieht gut aus!

Es gibt einige Probleme mit Spoiler-Tags:

  1. Wenn Sie Text markieren und „Spoiler ausblenden“ auswählen, wird der Text durch „Dieser Text wird ausgeblendet“ ersetzt, wobei der markierte Text verloren geht.

  2. Inline-Spoiler funktionieren nicht, sie werden in eine neue Zeile gesetzt.

  3. Es gibt keine Möglichkeit, einen Spoiler wieder auszuschalten.

11 „Gefällt mir“

Danke Shaun, ich habe im OP vermerkt, dass wir noch mehr Arbeit an Spoilern zu erledigen haben.

9 „Gefällt mir“

Ich habe auf dieses Feature gewartet und es ist großartig, dass Discourse diesen Schritt endlich gemacht hat :clap:

Nur eine Sache vorerst: Es sieht bizarr aus, ein so schmales Textfeld zum Schreiben unserer Beiträge zu haben.

Offensichtlich war ich sehr an die Seitenansicht von Komponist und Vorschau gewöhnt, aber das sieht jetzt… seltsam aus. Vielleicht brauche ich aber auch nur Zeit. Ja, wahrscheinlich. :smile:

18 „Gefällt mir“

Fantastisch Fortschritt! :heart:
Das zweite, was mir aufgefallen ist, ist, dass der aktuelle Stil in der Symbolleiste nicht visuell umschaltet (und aus), obwohl er in Kraft bleibt. Es wäre wirklich schön, wenn der aktuelle Stil hervorgehoben würde, bis er ausgeschaltet wird.
Das ist alles für jetzt!
(Basiert auf meinem Feedback zum grauen Bernstein-Thema)

15 „Gefällt mir“

Das sind gute Anmerkungen – im Moment haben wir uns hauptsächlich auf den Editor selbst konzentriert (wo Sie tatsächlich tippen), aber wir planen Verbesserungen am Composer-Container und der Symbolleiste, die diese Probleme beheben sollten.

10 „Gefällt mir“

Ein seltsamer Fehler, aber wenn der Komponist geöffnet ist, passiert dies mit der Antwortanzeige.

Ich werde es später am Desktop vollständig testen, aber es sieht vielversprechend aus.

4 „Gefällt mir“

Endlich da! :heart_eyes: Das ist viel Arbeit, die entfaltet wurde; fantastische Arbeit! Das wird ein erheblicher Vorteil für Benutzer sein, die mit Markdown nicht vertraut sind.

Kritische Upload-Probleme:

Wenn Sie ein Bild hochladen und zu Markdown wechseln, ist der Upload-Markdown nicht vorhanden und löst einen Fehler aus:
image

Umgekehrt, wenn Sie von Markdown hochladen und dann zum neuen Editor wechseln, tritt kein Fehler auf, aber das Bild wird nicht angezeigt.

12 „Gefällt mir“

Ich frage mich, ob wir das Wechseln blockieren sollten, bis der Upload abgeschlossen ist… wir können Platzhalter potenziell zwischen Editoren konvertieren, aber es scheint nicht so nützlich zu sein.

11 „Gefällt mir“

Ja, meine Gedanken sind die gleichen. Blockieren klingt nach einer guten Idee!
Beim Hochladen eines großen Bildes mit einer langsamen Verbindung konnte ich nicht anders, als den Schalter zu testen, bis er fertig ist. :grinning_face_with_smiling_eyes:

11 „Gefällt mir“

Neues Design sieht großartig aus. Ich finde es toll, wie Discourse sich im Laufe der Zeit weiterentwickelt, neue Ideen ausprobiert und die Community einbezieht.

Einige subjektive Beobachtungen, falls Sie Feedback suchen:

  • Der Ausrichtungsbutton (links/rechts) ist ein unkonventionelles Symbol und eine Funktion, die sehr nischenhaft erscheint. Da sich die Symbole auf Mobilgeräten über zwei Zeilen erstrecken, würde ich diese Funktion einfach entfernen. Ebenso ist die Funktion „Datum einfügen“ fortgeschritten/nischenhaft und könnte im :gear: Menü versteckt werden. Auf diese Weise würden alle verbleibenden Symbole in eine einzige Zeile passen.
  • Die Video-Upload-Funktion war für mich selbst als technischer Benutzer verwirrend. Was würde ich in das Feld „Videoquelle“ eingeben? Außerdem sind die Buttons visuell etwas durcheinander (siehe unten).
  • Der „M“-Button (Umschalten zwischen Rohtext und Vorschau) offenbart seinen Zweck erst, wenn man darauf klickt. Es gibt etwas freien Platz am unteren Rand des Komponisten zwischen den :wastebasket: und GIF-Buttons, und ich denke, ein Vorschau-Button wäre hier sinnvoller. Und Sie hätten Platz für das Wort „Vorschau“.

8 „Gefällt mir“

Dies sind Funktionen, die wir irgendwann auf Meta aktiviert haben, wahrscheinlich für ein Experiment. Sie sind nicht standardmäßig verfügbar und wir könnten sie deaktivieren oder hinter das :gear: Symbol stellen.

Dem stimme ich zu. Ich bin mir nicht sicher, warum wir diese Funktion immer so prominent im Menü anzeigen. Ich selbst benutze sie ständig, aber ich benutze auch viele Funktionen hinter dem :gear:-Menü häufig!

Ich stimme zu, dass zumindest ein Mouseover-Hilfetext hier die Auffindbarkeit verbessern würde.

Ich vermute, dass wir in Zukunft standardmäßig den neuen Composer verwenden und das Umschalten zu Markdown zum „Power Move“ machen wollen, den Power-User dann kennen oder entdecken können.

9 „Gefällt mir“

: Megafon: Diese Menüpunkte haben nicht wirklich etwas mit dem neuen Composer zu tun, daher müssen wir uns hier nicht darauf konzentrieren. Wenn Leute weiteres Feedback zu den Menüpunkten haben, starten Sie bitte neue #feature-Themen oder suchen Sie.

Das gesagt:

  • Ich habe hier auf Meta die Schaltfläche „Video einfügen“ entfernt, die über die Theme-Komponente Insert Video bereitgestellt wird.

  • Die Schaltfläche „Richtung umschalten“ hängt von der Website-Einstellung support mixed text direction ab, die wir auf Meta aktiviert lassen, da wir derzeit aktiv mehrsprachige Funktionalität testen.

  • Auf Meta haben wir auch GIF und Ask AI, denen wir einen prominenten Zugang ermöglichen wollen.

6 „Gefällt mir“

Glückwunsch an das Team! Mir ist eine Diskrepanz beim Oneboxing aufgefallen. Das Einfügen einer URL aus dem Browser erzeugt eine Onebox, das Tippen jedoch nicht. Bis Sie zurückwechseln, um die Markdown-Vorschau zu sehen, die sie auslöst.

Test: Einfügen aus der Browserleiste hier: https://google.com/ Tippen hier: https://google.com

6 „Gefällt mir“

Das Drücken von Enter im neuen WYSIWYG-Editor erzeugt einen doppelten Zeilenumbruch (einen Absatzumbruch). Das gefällt mir nicht (obwohl ich vermute, dass dies subjektiv ist), aber besonders gefällt es mir nicht bei Aufzählungs-/Nummerierungslisten, wo viel Platz zwischen den Listenelementen ist.

  • das
  • ist
  • zu
  • viel
13 „Gefällt mir“

Sie können Umschalttaste + Eingabetaste drücken, um den doppelten Zeilenumbruch zu vermeiden, obwohl dies bei Listen nicht funktioniert.
Ich stimme zu, dass diese Verhaltensänderung nicht zum Standard werden sollte.

7 „Gefällt mir“

Großartige Arbeit, das ist ein Schritt in die richtige Richtung! Ich habe jedoch immer noch einige grundlegende UX-Probleme, die ich gerne gelöst hätte, aber dazu komme ich später.

Das Gute:
Ich liebe den neuen Single-Editor-Modus, er ist wirklich cool und Inline-Bilder im Composer funktionieren großartig.
Obwohl dies eine Vorschau ist, funktioniert sie immer noch so, wie ich es erwarten würde. Ich persönlich habe nichts vermisst (außer ---, das ich viel benutze).

Das Schlechte:
Die Buttons, die hier überall verstreut sind, sind verwirrend, es sollte einen Ort für alle geben. Ersetze das doppelte Abwärtspfeilsymbol durch ein X. Außerdem, anstatt \u003c\u003c, könnte es vielleicht einfach eine Y-Achse sein, die man ziehen kann, damit wir ihre Größe steuern können, anstatt nur eine oder geschlossen?

Ich mag die Reihe von Symbolen oben und das “Mehr”-Zahnradmenü immer noch überhaupt nicht, es ist unübersichtlich und verwirrend zu bedienen. Ich erinnere mich, dass es dazu ein Thema gab, aber ich kann es nicht finden.

Auf meinem Arbeitscomputer (Windows Firefox) ist der Markdown-Button versetzt.
image

Immer noch großartig, ich wünschte nur, diese Dinge wären behoben :+1:

Hinzugefügt zu unserem :art: UX-Probleme Abschnitt in OP zur Behebung.

Dies ist eine bekannte fehlende Funktion und etwas, das wir zu unterstützen beabsichtigen:

Wir planen Verbesserungen am Composer-Container und der Symbolleiste, aber im Moment sind die Änderungen auf den Editor selbst beschränkt. Wir können dies jedoch für zukünftige Änderungen berücksichtigen.

Ich kann anhand dieser Beschreibung oder dieses Screenshots nicht genau erkennen, was hier schiefgelaufen ist – könnten Sie bitte ein paar weitere Details mitteilen, damit ich es mir ansehen kann?

5 „Gefällt mir“

Es könnte nur visuell sein, aber zumindest für mich sieht es so aus, als wäre es ein kleines bisschen zu weit oben.

1 „Gefällt mir“