fix: fixed regression

Author: ocruze

examples/src/Custom.tsx

@@ -27,9 +27,7 @@ const Custom = () => {
             <RichTextEditor.Provider
                 content={content}
                 extensions={[
-                    StarterKit.configure({
-                        link: false, // Disable link from StarterKit to avoid conflicts with our custom one
-                    }),
+                    StarterKit,
                     Link,
                     Placeholder.configure({
                         placeholder: "Write something …",

examples/src/Markdown.tsx

@@ -11,6 +11,7 @@ const extensionLoader = {
 
 const initialContent = `
 # Tiptap Editor
+
 The Tiptap Editor is a headless, framework-agnostic rich text editor that's customizable and extendable through extensions. Its headless nature means it comes without a set user interface, offering full design freedom (for a jumpstart, see linked [UI templates](#examples-codesandbox-and-ui-templates) below). Tiptap is based on the highly reliable [ProseMirror](https://github.com/ProseMirror/prosemirror) library.
 
 Tiptap Editor is complemented by the collaboration open-source backend [Hocuspocus](https://github.com/ueberdosis/hocuspocus). Both the Editor and Hocuspocus form the foundation of the [Tiptap Suite](https://tiptap.dev/).

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

@@ -1,6 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { useEditor, UseEditorOptions } from "@tiptap/react";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useMemo } from "react";
 import { tss } from "tss-react";
 
 import { editorContext } from "../contexts/editor";
@@ -10,13 +10,25 @@ export interface IProviderProps extends UseEditorOptions {
 }
 
 function Provider(props: IProviderProps) {
-    const { children, ...rest } = props;
+    const { children, contentType, content, ...rest } = props;
     const editor = useEditor(rest);
     const { classes } = useStyles();
 
+    useEffect(() => {
+        if (content != null && editor != null) {
+            const oldContent = contentType === "markdown" ? editor.getMarkdown() : editor.getHTML();
+
+            if (oldContent !== content) {
+                editor.commands.setContent(content, { contentType });
+            }
+        }
+    }, [content, editor, contentType]);
+
+    const contextValue = useMemo(() => editor, [editor]);
+
     return (
         <div className={classes.root}>
-            <editorContext.Provider value={editor}>{children}</editorContext.Provider>
+            <editorContext.Provider value={contextValue}>{children}</editorContext.Provider>
         </div>
     );
 }

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

@@ -12,4 +12,15 @@ describe("RichTextEditor component", () => {
         expect(title).toBeInTheDocument();
         expect(title instanceof HTMLHeadingElement).toBe(true);
     });
+
+    test("updates editor when content prop changes", async () => {
+        const { rerender } = render(<RichTextEditor content="<p>First</p>" />);
+        await waitFor(() => expect(screen.queryAllByRole("button").length).toBeGreaterThan(0));
+        expect(screen.getByText("First")).toBeInTheDocument();
+
+        // Change content prop simulating a reset
+        rerender(<RichTextEditor content="<h2>Second</h2>" />);
+        // The new heading should appear, old text should be gone
+        await waitFor(() => expect(screen.getByText("Second")).toBeInTheDocument());
+    });
 });

packages/react-dsfr-tiptap/src/constants/richTextEditor.ts

@@ -10,10 +10,4 @@ export const richTextEditorDefaultControls: Control[][] = [
     ["Undo", "Redo"],
 ];
 
-export const richTextEditorDefaultExtensions: AnyExtension[] = [
-    StarterKit.configure({
-        // Disable extensions from StarterKit to avoid conflicts with our custom ones
-        link: false,
-        underline: false,
-    }),
-];
+export const richTextEditorDefaultExtensions: AnyExtension[] = [StarterKit];

packages/react-dsfr-tiptap/src/global.d.ts

@@ -2,3 +2,4 @@ import "@tiptap/extension-color";
 import "@tiptap/extension-image";
 import "@tiptap/extension-link";
 import "@tiptap/extension-youtube";
+import "@tiptap/markdown";