Tiptap Editor - éditeur WYSIWYG headless

• Framework headless qui ne fournit pas d’interface utilisateur, ce qui facilite le stylisme
• Fonctionne très bien avec React, Vue, Svelte, Alpine.js, Next.js, Nuxt.js et JavaScript vanilla
• Basé sur ProseMirror

[bbulbum]

Personnellement, c’est l’éditeur que j’ai trouvé le plus confortable à utiliser et le plus facile à étendre.
Beaucoup des frustrations que j’avais ressenties en créant un éditeur avec Slate ont vraiment été résolues ici.

[gomjellie]

Pourriez-vous partager ce qui vous a posé problème lorsque vous avez utilisé l’éditeur Slate ?
De mon côté, je n’ai utilisé que Tiptap, mais comme j’ai entendu dire que Slate était bien, ça a éveillé mon intérêt !!

[firea32]

La création de composants externes est bien plus pratique. Surtout avec React, où l’on utilise son propre DOM, il faut un rendu sous forme de composants plutôt qu’en HTML, et comme Tiptap a été conçu dès le départ en pensant à la modularisation, j’ai trouvé qu’il était plus facile à modifier.

[bbulbum]

Globalement, j’ai trouvé la documentation de Slate difficile, et comme c’était très brut, j’ai eu l’impression qu’il y avait encore plus de choses à apprendre pour implémenter les fonctionnalités que je voulais.

Ça remonte à environ 2 ans, donc mes souvenirs peuvent être un peu différents, mais j’ai rencontré ce genre de problèmes.

• Problème de saisie en coréen sur mobile : c’était très difficile d’identifier d’où cela venait, mais comme c’est apparu pendant une personnalisation, je ne m’en souviens pas exactement.
• Difficulté avec les contrôles liés à la sélection : ajouter une fonctionnalité pour appliquer des attributs aux caractères sélectionnés était très délicat. (l’objet lui-même est complexe)
• Difficulté de développement des plugins : j’ai essayé de développer moi-même des plugins comme une carte, etc., mais tiptap était pratique parce qu’il est conçu pour faciliter l’ajout et le développement de plugins.

[gomjellie]

Oh.... merci~ !

[nemorize]

On peut voir un exemple d’éditeur fonctionnel sur https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup.

Personnellement, je trouve que la documentation est plutôt bien faite, mais il y a des éléments nécessitant un abonnement payant qui se glissent au milieu.
Ça ne va pas jusqu’à rendre la lecture de la documentation inconfortable, mais c’est assez fort et un peu agaçant à la fois de réussir à donner envie de choses dont on n’a même pas besoin… c’est un sentiment assez complexe.

[savvykang]

J’ai du mal à être d’accord avec l’idée que la documentation est plutôt bien faite. À mes yeux, l’écart entre la documentation de démarrage et la documentation de l’API est trop important, ce qui rend la courbe d’apprentissage élevée. Dans notre projet React, nous avons jugé que le style de documentation de Prosemirror et de react-prosemirror était plus convivial et plus abouti pour les utilisateurs ; nous avons donc choisi react-prosemirror et non tiptap.

Pendant que nous essayions de comprendre les exemples React afin de créer un exemple de code de POC pour nos besoins, nous avons rencontré les problèmes suivants.

1. Quels sont les éléments disponibles quand on ajoute StarterKit ? Il faut aller chercher une documentation séparée à partir du nom du package. Cela nous fait sortir de notre concentration alors qu’on est en train d’exécuter les exemples tiptap.
2. ListItem est inclus dans StarterKit, alors pourquoi l’exemple ajoute-t-il encore ListItem au projet ? C’est pour configurer l’extension.
3. Pourquoi faut-il utiliser une syntaxe comme editor().chain().focus() ? Il n’y a aucune explication sur les principes de conception ou le fonctionnement du method chaining.
4. Bubble menu et Floating menu sont absents de l’exemple React. Comme le comportement diffère de la fonctionnalité vue sur la page Try it live (https://templates.tiptap.dev/pjrwkQtNpq), il faut aller lire la documentation pour comprendre pourquoi ces fonctions manquent.
5. Il n’y a pas de fonctionnalité de tableau, donc on cherche le mot-clé table sur la page Extensions. Table, TableCell, TableHeader et TableRow apparaissent dans les résultats. Faut-il tous les ajouter ?
6. Nous avons tant bien que mal ajouté Table et diverses extensions. Pour vérifier que cela fonctionne correctement, il faut d’abord insérer un tableau. Comment faut-il écrire la commande de la barre d’outils ? À quel endroit de la toolbar de l’éditeur faut-il ajouter les fonctions correspondant à ces commandes ? Il n’y a absolument aucun indice.
7. Nous avons une exigence : il ne doit pas être possible d’imbriquer un autre tableau dans un tableau. Comment implémenter la logique permettant de déterminer si le curseur se trouve à l’intérieur d’un tableau ? Là encore, il n’y a absolument aucun indice.
8. Je me souviens que Color était packagé comme une extension, ce qui m’a rendu curieux, alors j’ai ouvert le code source. Quand j’ai vu qu’il n’y avait que deux fichiers dans le répertoire src, j’ai poussé un soupir. Je ne comprends pas l’intention derrière la création de modules aussi minuscules. Si même des fonctionnalités aussi petites deviennent des packages, cela ne risque-t-il pas de faire peser davantage la gestion des versions des dépendances que d’améliorer la réutilisabilité ?

[nemorize]

J’ai du mal à être d’accord sur les points 1-3, 4-6 et 8, parce que je n’y ressens absolument ni doute ni inconfort.

1-2
StarterKit, comme son nom l’indique, est un kit pour démarrer, donc au moment d’une utilisation réelle il ne me semble pas avoir beaucoup d’importance.
Dans le cas de ListItem, c’est bien comme vous l’avez dit. C’est un élément destiné à la configuration de l’extension Color. Là encore, je pense qu’il suffit simplement de ne pas utiliser StarterKit.

3
chain().something().run() n’est qu’une forme de sucre syntaxique, mais je pense que cela fournit une fonctionnalité adaptée au concept d’une bibliothèque batteries incluses.
Je l’utilise de façon très pratique dans les environnements mobiles, où des actions comme mettre en gras puis redonner le focus sont en pratique indispensables.

4
Je ne connais pas bien ce point, car je n’utilise pas cette fonctionnalité.
(Je pense que c’est aussi un avantage en contrepartie du défaut que vous avez mentionné au point 1, à savoir sortir de l’état de concentration, dans la mesure où l’on n’a pas besoin de voir des informations sur des fonctionnalités que l’on n’utilisera pas.)

5-6
C’est bien documenté dans la documentation de chaque extension, et cela ne diffère en rien de l’implémentation d’un éditeur en général.
Honnêtement, pour le point 6, je ne suis même pas sûr d’avoir bien compris ce que voulait dire savvykang... Je continue à me dire : « Pourquoi est-ce une interrogation...? De quel indice peut-on bien avoir besoin...? » haha...

7
« Comme pour les autres nœuds », on peut vérifier le focus avec editor.isActive('table').
Cela dit, je ne pense pas que ce soit un problème qui se résolve simplement en identifiant le nœud actuellement focalisé. Cela ressemble à une exigence qui demande de prendre en compte beaucoup d’aspects, comme le filtrage du collage ou encore l’insertion via les outils de développement.

8
Je suis d’accord sur le fait que cela alourdit la gestion des versions des dépendances, mais je pense qu’il y a aussi l’avantage de ne pas embarquer du code pour des fonctionnalités dont on n’a pas besoin.
Dans notre cas précisément, nous étions justement dans une situation où nous n’avions pas besoin d’utiliser l’extension Color que vous avez mentionnée. J’ai l’impression que chaque approche a ses avantages et ses inconvénients.

.
Je pense que react-prosemirror et tiptap que vous avez mentionnés relèvent de concepts complètement différents.

un outil qui permet d’utiliser prosemirror de manière idiomatique avec React
vs
un outil qui, qu’il soit ou non basé sur prosemirror, n’a pas cela pour point central, mais rassemble en tout cas tout ce qu’il faut pour implémenter un éditeur adapté à mon service

[nemorize]

Comme il est déjà populaire dans l’écosystème Vue, j’hésitais à en parler ou non,
mais après l’avoir utilisé cette fois en l’intégrant à Sveltekit, j’en ai été assez satisfait pour le partager.

Dans l’écosystème Svelte, je cherchais un éditeur WYSIWYG vraiment convaincant sans trouver mon bonheur,
et si certains d’entre vous se posent la même question, cela peut valoir le coup de l’essayer au moins une fois.