Tiptap Editor - Headless-WYSIWYG-Editor

 (github.com/ueberdosis)
20 Punkte von nemorize 2024-02-29 | 9 Kommentare | Auf WhatsApp teilen
  • Ein Headless-Framework ohne eigenes UI, daher vorteilhaft für das Styling
  • Funktioniert sehr gut mit React, Vue, Svelte, Alpine.js, Next.js, Nuxt.js und Vanilla JS
  • Basiert auf ProseMirror

Verwandte Beiträge

9 Kommentare

 
bbulbum 2024-03-04

Persönlich fand ich ihn von allem, was ich bisher verwendet habe, am angenehmsten in der Nutzung und am einfachsten zu erweitern.
Viele der Unannehmlichkeiten, die ich beim Erstellen eines Editors mit Slate empfunden habe, wurden hier wirklich in großem Umfang gelöst.
 
gomjellie 2024-03-04

Könnten Sie vielleicht mitteilen, welche Unannehmlichkeiten Sie bei der Nutzung des Slate-Editors erlebt haben?
Ich habe bisher nur Tiptap verwendet, aber da ich gehört habe, dass Slate ziemlich gut sein soll, bin ich neugierig geworden!!
 
firea32 2024-03-04

Der Teil zum Erstellen externer Komponenten ist deutlich komfortabler. Besonders wenn wie bei React ein eigenes DOM verwendet wird, braucht man Rendering als Komponente statt als HTML, und tiptap, das von Anfang an mit Blick auf Modularisierung entwickelt wurde, lässt sich dadurch leichter anpassen.
 
bbulbum 2024-03-04

Insgesamt hatte ich das Gefühl, dass die Slate-Dokumentation schwer zugänglich ist, und weil alles so raw ist, hatte ich den Eindruck, dass ich noch deutlich mehr lernen müsste, um die Funktionen umzusetzen, die ich wollte.

Es ist eine Erinnerung von vor etwa 2 Jahren, daher kann es leicht anders gewesen sein, aber ich hatte mit solchen Problemen zu tun.

  • Problem bei der koreanischen Eingabe in mobilen Umgebungen: Es war sehr schwer herauszufinden, wo das Problem entstand; es trat beim Customizing auf, daher erinnere ich mich nicht mehr genau.
  • Schwierige Kontrolle rund um select: Es war äußerst knifflig, eine Funktion hinzuzufügen, die Eigenschaften für ausgewählte Zeichen verarbeitet. (Das Objekt selbst ist komplex.)
  • Schwierige Plugin-Entwicklung: Ich wollte Plugins wie etwa für Karten selbst entwickeln, aber tiptap war so aufgebaut, dass sich zusätzliche Plugins gut entwickeln ließen, was angenehm war.
 
gomjellie 2024-03-04

Oh ... vielen Dank~!
 
nemorize 2024-02-29

Unter https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup kann man sich ein funktionierendes Editor-Beispiel ansehen.

Ich persönlich finde, dass die Dokumentation ziemlich gut gemacht ist, allerdings sind zwischendurch Elemente eingestreut, für die ein kostenpflichtiges Abo nötig ist.
Es ist nicht so störend, dass das Lesen der Doku unangenehm wird, aber obwohl man es gar nicht braucht, bekommt man trotzdem Lust darauf — irgendwie beeindruckend und gleichzeitig ein bisschen unerquicklich … ein ziemlich zwiespältiges Gefühl.
 
savvykang 2024-03-02

Es fällt mir schwer, der Aussage zuzustimmen, dass die Dokumentation einigermaßen gut ist. Meiner Einschätzung nach ist die Lücke zwischen der Getting-Started-Dokumentation und der API-Dokumentation zu groß, wodurch die Lernkurve steil ausfällt. In unserem React-Projekt kamen wir zu dem Schluss, dass der Dokumentationsstil von Prosemirror und react-prosemirror benutzerfreundlicher und ausgereifter ist, daher haben wir uns für react-prosemirror und gegen tiptap entschieden.

Während wir versucht haben, Beispielcode für einen PoC zu unseren Anforderungen zu erstellen und dabei die React-Beispiele nachvollzogen haben, sind wir auf folgende Probleme gestoßen.

  1. Welche nutzbaren Elemente stehen zur Verfügung, wenn man StarterKit hinzufügt? Dafür muss man in einer separaten Dokumentation zum Paketnamen nachsehen. Das reißt einen aus dem konzentrierten Ausprobieren der tiptap-Beispiele heraus.
  2. ListItem ist im StarterKit enthalten, warum wurde ListItem im Beispiel dann noch einmal ins Projekt aufgenommen? Um Konfigurationen für die Extension vorzunehmen.
  3. Warum muss man eine Syntax wie editor().chain().focus() verwenden? Es gibt keine Erklärung oder Designbegründung für das Method Chaining.
  4. Bubble menu und Floating menu fehlen im React-Beispiel. Da sie sich anders verhalten als auf der Try-it-live-Seite (https://templates.tiptap.dev/pjrwkQtNpq), muss man die Dokumentation durchsuchen, um herauszufinden, warum diese Funktionalität fehlt.
  5. Es gibt keine Tabellenfunktion, also sucht man auf der Extensions-Seite nach dem Stichwort table. In den Suchergebnissen erscheinen Table, TableCell, TableHeader und TableRow. Muss man all diese Elemente hinzufügen?
  6. Table und verschiedene Extensions habe ich irgendwie hinzugefügt. Um zu prüfen, ob die Funktion korrekt arbeitet, muss man zunächst eine Tabelle einfügen. Wie schreibt man dafür die Toolbar-Commands? An welcher Stelle der editor-Toolbar werden die Funktionen für diese Commands ergänzt? Es gibt überhaupt keinen Hinweis darauf.
  7. Es gibt die Anforderung, dass Tabellen nicht innerhalb anderer Tabellen verschachtelt werden dürfen. Wie implementiert man die Logik, um festzustellen, ob sich der Cursor innerhalb einer Tabelle befindet? Es gibt überhaupt keinen Hinweis darauf.
  8. Ich erinnere mich daran, dass Color als Extension paketiert war, werde neugierig und öffne den Quellcode. Als ich sehe, dass im Verzeichnis src nur zwei Dateien liegen, kann ich nur seufzen. Ich verstehe die Absicht hinter einem derart kleinteiligen Modul nicht. Wenn selbst so eine kleine Funktion als Paket ausgeliefert wird, ist dann der Aufwand für die Verwaltung von Abhängigkeitsversionen nicht größer als der Gewinn an Wiederverwendbarkeit?
 
nemorize 2024-03-03

Bei 1–3, 4–6 und 8 empfinde ich persönlich überhaupt keine Zweifel oder Unannehmlichkeiten, deshalb fällt es mir schwer, dem zuzustimmen.

1–2
StarterKit ist, wie der Name schon sagt, ein Kit für den Einstieg und scheint zum Zeitpunkt der tatsächlichen Nutzung nicht besonders bedeutungsvoll zu sein.
Bei ListItem ist es, wie Sie gesagt haben. Es ist ein Element für die Konfiguration der Color-Extension. Ich denke ebenfalls, dass das einfach ein Punkt ist, der entfällt, wenn man StarterKit nicht verwendet.

3
chain().something().run() ist zwar so etwas wie bloßer Syntax Sugar, bietet aber meiner Meinung nach eine Funktion, die gut zum Konzept einer Batteries-included-Bibliothek passt.
In mobilen Umgebungen, in denen Aktionen wie etwa nach dem Fettsetzen wieder den Fokus zu setzen, praktisch unverzichtbar sind, nutze ich das sehr hilfreich.

4
Da ich diese Funktion nicht nutze, kenne ich mich damit nicht gut aus.
(Ich denke aber, dass darin auch ein Vorteil als Kehrseite des bei Punkt 1 erwähnten Nachteils liegt, aus dem Konzentrationszustand gerissen zu werden: Man muss Informationen zu Funktionen, die man selbst nicht verwenden will, nicht extra ansehen.)

5–6
Es ist nicht nur in der Dokumentation der jeweiligen Extensions gut beschrieben, sondern unterscheidet sich im Allgemeinen auch überhaupt nicht von der gewöhnlichen Implementierung eines Editors.
Ehrlich gesagt bin ich mir bei dem unter Punkt 6 Gesagten nicht einmal sicher, ob ich savvykangs Aussage richtig verstanden habe ... Ich denke die ganze Zeit nur: „Warum ist das überhaupt ein Fragezeichen ...? Was für ein Hinweis wird denn da bitteschön benötigt ...?“ haha ...

7
„Wie bei den anderen Nodes auch“ kann man den Fokus mit editor.isActive('table') prüfen.
Allerdings scheint mir das kein Problem zu sein, das sich allein dadurch lösen lässt, dass man einfach nur den fokussierten Node bestimmt. Es wirkt eher wie eine Anforderung, bei der viele Aspekte berücksichtigt werden müssen, etwa Filterung beim Einfügen oder das Einfügen über die Entwicklertools.

8
Dem Punkt, dass die Verwaltung von Abhängigkeitsversionen zur Belastung werden kann, stimme ich zu, aber ich denke auch, dass es ein Vorteil ist, keinen Code für Funktionen mitführen zu müssen, die man gar nicht benötigt.
Genau in unserem Fall war es nämlich so, dass wir die von Ihnen erwähnte Color-Extension nicht verwenden würden. Es scheint, als hätten beide Seiten ihre jeweiligen Vor- und Nachteile.

.
Ich denke, react-prosemirror und tiptap, die Sie erwähnt haben, sind konzeptionell völlig unterschiedliche Kandidaten.

Eines, mit dem man prosemirror auf React-artige Weise verwenden kann
vs
Eines, bei dem es gar nicht wichtig ist, ob es auf prosemirror basiert oder nicht, sondern das einfach alles zusammenbringt, was man braucht, um einen Editor zu implementieren, der zum eigenen Service passt
 
nemorize 2024-02-29

Da das Teil im Vue-Umfeld schon ziemlich beliebt ist, habe ich überlegt, ob ich überhaupt etwas dazu schreiben soll,
aber nachdem ich es diesmal in SvelteKit eingesetzt habe, war ich so zufrieden, dass ich es hier teile.

Im Svelte-Ökosystem habe ich bislang keinen wirklich überzeugenden WYSIWYG-Editor gefunden, daher war ich etwas am Grübeln.
Falls es anderen ähnlich geht, ist es auf jeden Fall einen Versuch wert.