feat: add props to remove the empty paragraph

Author: tonai

examples/src/Tiptap.tsx

@@ -71,6 +71,7 @@ const Tiptap = () => {
                 ]}
                 extensionLoader={extensionLoader}
                 onContentUpdate={setContent}
+                removeEmptyParagraph
             />
             <div className="fr-tiptap" dangerouslySetInnerHTML={{ __html: content }}></div>
         </>

packages/react-dsfr-tiptap/README.md

@@ -63,7 +63,7 @@ Et utilisez la classe `fr-tiptap sur le conteneur qui va afficher le code HTML:
 
 ### Texte Riche
 
-Une fois installée vous pouvez utilisé le composant `RichTextEditor` de cette manière:
+Vous pouvez utiliser le composant `RichTextEditor` de cette manière:
 
 ```tsx
 import { RichTextEditor } from "react-dsfr-tiptap";
@@ -307,7 +307,9 @@ Vous pouvez aussi réutiliser la configuration via cette variable `extensionLoad
 
 ### Props
 
-Les 2 composants `RichTextEditor` et `MarkdownEditor` fonctionne de la même manière et ont les mêmes props:
+#### Props communes
+
+Les 2 composants `RichTextEditor` et `MarkdownEditor` fonctionne globalement de la même manière et les props suivantes en commun:
 
 | Props             | Type                                                                                  | Valeur par défaut   | Description                                                       |
 | ----------------- | ------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------- |
@@ -348,6 +350,14 @@ Pour le composant `RichTextEditor`:
     ```
 - `defaultExtensions` est égal à: `[require("@tiptap/starter-kit"), require("tiptap-markdown")]`
 
+#### Props `RichTextEditor`
+
+Le composant `RichTextEditor` possède en plus les props suivantes:
+
+| Props                  | Type      | Valeur par défaut | Description                                                                                                       |
+| ---------------------- | --------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `removeEmptyParagraph` | `boolean` | `false`           | Supprime le parapgraph vide `"<p></p>"` quand l'éditeur est complètement vide (via le callback `onContentUpdate`) |
+
 ### Ajout de boutons personnalisés
 
 Vous pouvez développer et ajouter vos propres boutons dans le composant de texte riche.

packages/react-dsfr-tiptap/src/components/Content.css

@@ -4,3 +4,7 @@
 .fr-tiptap li > p {
     margin: 0;
 }
+.fr-tiptap p:empty:before {
+    content: " ";
+    white-space: pre;
+}

packages/react-dsfr-tiptap/src/components/RichTextEditor.tsx

@@ -14,6 +14,7 @@ import RichTextEditorGroup from "./Group";
 export interface IRichTextEditorProps extends Omit<ILoaderProps, "controls"> {
     controls?: (Control | ControlComponent)[][];
     onContentUpdate?: (content: string) => void;
+    removeEmptyParagraph?: boolean;
 }
 
 type RichTextEditorControls = {
@@ -28,11 +29,15 @@ interface IRichTextEditor extends RichTextEditorControls {
     Provider: typeof RichTextEditorProvider;
 }
 const RichTextEditor = ((props: IRichTextEditorProps) => {
-    const { onContentUpdate, onUpdate, ...rest } = props;
+    const { onContentUpdate, onUpdate, removeEmptyParagraph = false, ...rest } = props;
 
     function handleUpdate(props: EditorEvents["update"]) {
         onUpdate?.(props);
-        onContentUpdate?.(props.editor.getHTML());
+        let content = props.editor.getHTML();
+        if (removeEmptyParagraph && content === "<p></p>") {
+            content = "";
+        }
+        onContentUpdate?.(content);
     }
 
     return <RichTextEditorLoader controls={richTextEditorDefaultControls} extensions={richTextEditorDefaultExtensions} onUpdate={handleUpdate} {...rest} />;