test(#2): add placeholder example

IGNF · Jan 23, 2025 · 175d27a · 175d27a
1 parent dc09407
commit 175d27a
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 12 deletions.
diff --git a/examples/package.json b/examples/package.json
@@ -20,6 +20,7 @@
         "@tiptap/extension-highlight": "^2.10.4",
         "@tiptap/extension-image": "^2.10.4",
         "@tiptap/extension-link": "^2.10.4",
+        "@tiptap/extension-placeholder": "^2.11.3",
         "@tiptap/extension-subscript": "^2.10.4",
         "@tiptap/extension-superscript": "^2.10.4",
         "@tiptap/extension-text-align": "^2.10.4",

diff --git a/examples/src/Custom.tsx b/examples/src/Custom.tsx
@@ -3,19 +3,27 @@ import { RichTextEditor } from "react-dsfr-tiptap";
 import { ControlImage, ControlLink, ControlUnlink, ControlYoutube } from "react-dsfr-tiptap/dialog";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
 
 import { CustomControl1, CustomControl2, CustomControl3 } from "./TiptapCustomButtons";
+import "./custom.css";
 
 const Custom = () => {
-    const [content, setContent] = useState(`
-<p>
-this is a basic example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor?
-</p>
-`);
+    const [content, setContent] = useState("");
 
     return (
         <>
-            <RichTextEditor.Provider content={content} extensions={[StarterKit, Link]} onUpdate={({ editor }) => setContent(editor.getHTML())}>
+            <RichTextEditor.Provider
+                content={content}
+                extensions={[
+                    StarterKit,
+                    Link,
+                    Placeholder.configure({
+                        placeholder: "Write something …",
+                    }),
+                ]}
+                onUpdate={({ editor }) => setContent(editor.getHTML())}
+            >
                 <RichTextEditor.Menu first>
                     <RichTextEditor.Group>
                         <RichTextEditor.Bold />

diff --git a/examples/src/custom.css b/examples/src/custom.css
@@ -0,0 +1,7 @@
+.tiptap p.is-editor-empty:first-child::before {
+    color: #adb5bd;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-dsfr-tiptap/README.md b/packages/react-dsfr-tiptap/README.md
@@ -292,6 +292,7 @@ Les 2 composants `RichTextEditor` et `MarkdownEditor` fonctionne de la même man
 | Props             | Type                                                                                  | Valeur par défaut   | Description                                                       |
 | ----------------- | ------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------- |
 | `content`         | `string`                                                                              | `""`                | Contenu de la zone de texte riche                                 |
+| `contentProps`    | `IContentProps`                                                                       | `{}`                | Props pour le composant du contenu                                |
 | `controlMap`      | `Partial<Record<Control, (() => ReactNode) \| LazyExoticComponent<() => ReactNode>>>` | `{}`                | Permet de configurer les composants des boutons préconfigurés     |
 | `controls`        | `(Control \| (() => ReactNode) \| LazyExoticComponent<() => ReactNode>)[][]`          | `defaultControls`   | Permet de configurer les boutons du menu                          |
 | `extensionLoader` | `Partial<Record<Extension, () => Promise<AnyExtension \| AnyExtension[]>>>`           | `{}`                | Permet de charger dynamiquement des extensions                    |

diff --git a/packages/react-dsfr-tiptap/src/components/Content.tsx b/packages/react-dsfr-tiptap/src/components/Content.tsx
@@ -1,14 +1,19 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import { EditorContent } from "@tiptap/react";
+import { EditorContent, EditorContentProps } from "@tiptap/react";
 import { tss } from "tss-react";
 
 import { useEditor } from "../contexts/editor";
+import { ForwardedRef } from "react";
 
-function Content() {
+export interface IContentProps extends Omit<EditorContentProps, "editor" | "innerRef" | "ref"> {
+    ref?: ForwardedRef<HTMLDivElement | null>;
+}
+
+function Content(props: IContentProps) {
     const editor = useEditor();
     const { classes } = useStyles();
 
-    return <EditorContent className={classes.root} editor={editor} />;
+    return <EditorContent className={classes.root} editor={editor} {...props} />;
 }
 
 const useStyles = tss.withName(Content.name).create(() => ({

diff --git a/packages/react-dsfr-tiptap/src/components/Loader.tsx b/packages/react-dsfr-tiptap/src/components/Loader.tsx
@@ -5,7 +5,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { Control } from "../types/controls";
 import { ControlComponent, richTextEditorControls } from "../utils/controls";
 
-import RichTextEditorContent from "./Content";
+import RichTextEditorContent, { IContentProps } from "./Content";
 import RichTextEditorMenu from "./Menu";
 import RichTextEditorProvider, { IProviderProps } from "./Provider";
 import RichTextEditorGroup from "./Group";
@@ -24,6 +24,7 @@ export type Extension =
     | "youtube";
 
 export interface ILoaderProps extends Omit<IProviderProps, "children"> {
+    contentProps?: IContentProps;
     controlMap?: Partial<Record<Control, ControlComponent>>;
     controls: (Control | ControlComponent)[][];
     extensionLoader?: Partial<Record<Extension, () => Promise<AnyExtension | AnyExtension[]>>>;
@@ -80,7 +81,7 @@ const extensionDefaultConfiguration = {
 };
 
 function Loader(props: ILoaderProps) {
-    const { controlMap = {}, controls, extensionLoader = {}, menu = "top", ...rest } = props;
+    const { contentProps = {}, controlMap = {}, controls, extensionLoader = {}, menu = "top", ...rest } = props;
     const [extensions, setExtensions] = useState<Partial<Record<Extension, AnyExtension>>>(() =>
         Object.fromEntries(props.extensions?.map((extension) => [extension.name, extension]) ?? [["starterKit", StarterKit]])
     );
@@ -152,7 +153,7 @@ function Loader(props: ILoaderProps) {
                         <RichTextEditorGroup key={i}>{components}</RichTextEditorGroup>
                     ))}
             </RichTextEditorMenu>
-            {menu === "top" && <RichTextEditorContent />}
+            {menu === "top" && <RichTextEditorContent {...contentProps} />}
         </RichTextEditorProvider>
     );
 }