fix: controlled component for markdown editor

Author: tonai

examples/src/Custom.tsx

@@ -4,15 +4,26 @@ import { ControlImage, ControlLink, ControlUnlink, ControlYoutube } from "react-
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
+import Button from "@codegouvfr/react-dsfr/Button";
+import { fr } from "@codegouvfr/react-dsfr";
 
 import { CustomControl1, CustomControl2, CustomControl3 } from "./TiptapCustomButtons";
 import "./custom.css";
 
+const initialContent = `<p>Hello, <strong>World!</strong></p>`;
+
 const Custom = () => {
-    const [content, setContent] = useState("");
+    const [content, setContent] = useState(initialContent);
+
+    function reset() {
+        setContent(initialContent);
+    }
 
     return (
         <>
+            <Button className={fr.cx("fr-mt-2w")} type="button" onClick={reset}>
+                Reset content
+            </Button>
             <RichTextEditor.Provider
                 content={content}
                 extensions={[

examples/src/Markdown.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { ControlImage, ControlLink, ControlUnlink } from "react-dsfr-tiptap/dialog";
 import { MarkdownEditor } from "react-dsfr-tiptap/markdown";
+import Button from "@codegouvfr/react-dsfr/Button";
+import { fr } from "@codegouvfr/react-dsfr";
 
 const extensionLoader = {
     image: () => import("@tiptap/extension-image").then((module) => module.default),
@@ -25,8 +27,15 @@ Tiptap Editor is complemented by the collaboration open-source backend [Hocuspoc
 const Markdown = () => {
     const [content, setContent] = useState(initialContent);
 
+    function reset() {
+        setContent(initialContent);
+    }
+
     return (
         <>
+            <Button className={fr.cx("fr-mt-2w")} type="button" onClick={reset}>
+                Reset content
+            </Button>
             <MarkdownEditor
                 controlMap={{ Link: ControlLink, Unlink: ControlUnlink, Image: ControlImage }}
                 content={content}

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

@@ -35,7 +35,15 @@ const MarkdownEditor = ((props: IMarkdownEditorProps) => {
         onContentUpdate?.(props.editor.storage.markdown.getMarkdown());
     }
 
-    return <RichTextEditorLoader controls={markdownEditorDefaultControls} extensions={markdownEditorDefaultExtensions} onUpdate={handleUpdate} {...rest} />;
+    return (
+        <RichTextEditorLoader
+            controls={markdownEditorDefaultControls}
+            extensions={markdownEditorDefaultExtensions}
+            markdown
+            onUpdate={handleUpdate}
+            {...rest}
+        />
+    );
 }) as IMarkdownEditor;
 
 Object.entries(markdownControls).forEach(([key, component]) => {

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

@@ -7,22 +7,23 @@ import { editorContext } from "../contexts/editor";
 
 export interface IProviderProps extends UseEditorOptions {
     children?: ReactNode;
+    markdown?: boolean;
 }
 
 function Provider(props: IProviderProps) {
-    const { children, ...rest } = props;
+    const { children, markdown, ...rest } = props;
     const { content } = rest;
     const editor = useEditor(rest);
     const { classes } = useStyles();
 
     useEffect(() => {
         if (content != null && editor != null) {
-            const html = editor.getHTML();
-            if (html !== content) {
+            const oldContent = markdown ? editor.storage.markdown.getMarkdown() : editor.getHTML();
+            if (oldContent !== content) {
                 editor.commands.setContent(content);
             }
         }
-    }, [content, editor]);
+    }, [content, editor, markdown]);
 
     return (
         <div className={classes.root}>