Rich text editor for the description field

[virgile-dev]

Is your feature request related to a problem? Please describe. As we are thinking about support for image upload #1849 we need to think about the interface for the users and thus adding a rich text editor to the description field with an image field

Describe the solution you'd like As a user I'd like to have a menu at the top of the field that shows icons to help me format the text for the field (bold, italic, add an image, add a table etc.) Being able to view the html source might be interesting for users who want to be able to do advance formating. Several open source libraries (ex : https://quilljs.com/) are focused on bringing rich text editor capabilities, we'd have to check which one fits our needs.

Describe alternatives you've considered User currently rely on the umap syntax to format their content and also input html directy in the field.

[davidbgk]

• ~~Draft.js (From Facebook, in React) [:warning: plus maintenu]~~
• Draftail (based on Draft, used by Wagtail)
• Lexical (Draft replacement)
• Quill
• ProseMirror
• TipTap (proprietary, based on ProseMirror)
• Slate
• Yoopta (recent, based on Slate)
• CKEditor (overkill?)
• Github writer
• TinyMCE
• Trix
• SimpleMDE
• Editor.js
• Froala
• dokieli

(extracted from internal communication)

[davidbgk]

See also: https://web.archive.org/web/20170703064833/https://romy.tetue.net/barre-outils-edition-raccourcis

[yohanboniface]

Quelques remarques:

• est-ce qu'on est sûr de vouloir faire de l'éditeur un point bloquant pour l'ajout de l'upload d'images ? La question est celle de la découvrabilité de la fonctionnalité, mais par exemple sur Github ici on a une barre sous le textarea qui dit "Paste, drop, or click to add files", on pourrait s'en inspirer
• il faudrait distinguer les éditeurs wysiwyg et les éditeurs de type markdown ou texte structuré: aujourd'hui dans uMap, on est pas en wysiwyg, mais en texte structuré; essentiellement parce qu'on peut mettre des variables
• cela étant dit, on pourrait avoir deux modes de popups à l'avenir, un en texte structuré pour les geeks et ceux qui savent ce qu'ils ont ou qui ont besoin de mettre des variables, et un en wysiwyg pour les cas plus génériques et plus grand public, qui pourrait être celui par défaut
• il se trouve que certains nous demandent justement plus de fonctions logiques pour par exemple avoir des if afin de texte l'existence d'une variable avant d'afficher du texte
• on peut peut-être être radical et dire qu'on n'autorise plus aucune variable dans les descriptions (que ce soit de la carte, d'un calque ou d'un élément), et dans ce cas on peut y mettre un outil wysiwyg, et on utilise le umapdown™ seulement pour le template de popup (la question de basculer celui-ci un jour en un mardown plus conventionnel ou un de ces cousins étant gardée pour plus tard); pour ça, faudrait voir à quel point des variables ont été utilisées dans les descriptions, possiblement aucune côté carte ou calque, et très peu dans les descriptions d'éléments, mais ce dernier point n'est pas simple à vérifier
• y a aussi des utilisateurs qui ont mis directement du HTML dans les descriptions et les templates, mais peut-être qu'on peut garder un mode "raw" même avec un éditeur

[yohanboniface]

Github writer

Je sais pas en termes de codes/légèreté, mais en termes UX, perso, c'est ce genre de truc que je viserais (mais basé sur CKEditor 5, donc potentiellement gazogène)

(Mais là on serait pas un wysiwyg, et donc se pose la question du umapdown™…)

[virgile-dev]

"Paste, drop, or click to add files"

Je n'y avais pas fait attention mais c'est vrai que dans un premier temps ça répond très bien à ma problématique initiale de découvrabilité de la fonctionnalité d'upload d'image

Donc pas nécessairement obligé de lier les deux problématiques ce qui est toujours bien pour éviter de la complexité :clap: