5.4 KiB
Introduction
Cette documentation est destinée à décrire le fonctionnement de l'input Wysiwyg ainsi que ses extensions (natives et custom).
Table des matières
Configuration
- resources/ts/back/Components/Inputs/Wysiwyg/
- Extensions/
- SimpleWysiwyg.tsx
- Toolbar.tsx
- tiptap.d.ts
Toolbar
En utilisant l'instance de l'éditeur @tiptap, on peut activer/désactiver les options qui sont appliquées de manière manuelle via une barre d'outils personnalisée. De plus, nous pouvons organiser la structure comme nous le souhaitons, en utilisant des groupes de boutons ou des listes.
Extensions
Tiptap propose de base quelques extensions (disponibles ici) que l'on utilise dans notre configuration via le StarterKit ou tout simplement unitairement.
On peut donc retrouver, dans notre fichier SimpleWysiwyg.tsx, la liste des extensions que l'on utilise comme le gras, l'italique, le soulignement, les listes etc... mais dans certains cas, nous avons besoin d'une action spécifique qui est le résultat d'une extension personnalisée.
À savoir que chaque extension personnalisée est différente dans son implémentation et dans son utilité.
Table
Nous avons une extension qui nous permet d'insérer un tableau dans les dimensions voulues en affichant ou non l'en-tête. La sélection du nombre de lignes/colonnes peut se faire de 2 manières différentes, via les inputs prédéfinis ou via un hover des carrés visuellement disponibles. Une limite maximale du nombre de lignes/colonnes a quand même été mise en place et s'élève au nombre de 12.
À savoir que cette extension est une surcharge visuelle de celle de base par @tiptap mais le fonctionnement derrière reste le même.
Image
Étant donné que nous avons tout un système spécifique de sauvegarde de fichiers ainsi que des règles de validation à appliquer, nous avons dû modifier l'extension image pour utiliser nos outils.
Au clic du bouton image, une modale apparaît afin d'insérer une nouvelle image à notre contenu. Afin d'y arriver, vous devez choisir un type de format pour votre future image qui, en changeant, modifiera les dimensions appliquées dans le champ image juste en dessous (consulter la documentation officielle du composant image by Karl). Par la suite, des champs texte sont disponibles afin de définir un attribut alternatif de l'image, un titre ou encore une légende.
Une fois votre image et ses champs validés, l'image sera insérée dans votre contenu.
Plus précisément un nouveau nœud html <figure> le sera avec comme enfant l'élément <img>, avec ses attribut alt et title, et sa légende <figcaption> si définie.
Cette insertion n'est pas définitive. En effet, vous avez toujours la possibilité de modifier la position de votre image insérée (à gauche, au centre, à droite, en flottaison à gauche ou à droite), les champs textes précédemment cités ainsi que ses dimensions, tout en respectant son ratio de base.
Link
Une autre extension que nous avons dû modifier est celle des liens.
Nous avons déjà eu, par le passé, des clients qui renseignaient des liens de re7 dans des wysiwyg de prod ce qui provoquait des erreurs 404 en voulant accéder à la ressource.
Pour résoudre ce problème, vous avons développé cette extension qui nous permet de cibler soit un lien externe, comme https://google.com (donc un domaine différent du projet courant), soit une ressource interne via un modèle.
Par exemple, si vous souhaitez insérer une actualité, il vous suffit de cliquer sur lien interne, puis sélectionner actualité dans la première liste et enfin votre ressource parmi toutes les actualités publiées.
Dans les deux cas (externe/interne), vous devez renseigner un libellé qui se verra attribuer votre lien avec la possibilité de l'ouvrir dans un nouvel onglet ou non.
À savoir que des règles zod ont été mises en place afin de valider les informations qui ont été saisies que ce soit les liens ou bien les champs textuels.
Replace
Petite extension assez simple qui permet de remplacer une suite spécifique de caractères par une autre avec la possibilité de respecter la casse ou non.
Shortcuts
Cette extension n'est pas visuelle mais permet simplement de stopper la propagation des évènements au clavier lorsque l'éditeur wysiwyg est sélectionné.
À titre d'exemple, le raccourci pour mettre une sélection de caractères en gras est ctrl + b mais cette même combinaison de touches est aussi utilisée pour rouler/dérouler la navigation du layout back-end.
Grâce à cette extension, on scope les raccourcis seulement à l'éditeur si sélectionné et permet d'éviter des effets de bord non désirés.