refactor(#625): replace markdown editor

IGNF · Jan 27, 2025 · e190264 · e190264
1 parent f065dfb
commit e190264
Show file tree

Hide file tree

Showing 8 changed files with 1,624 additions and 2,476 deletions.
diff --git a/assets/components/Input/MarkdownEditor.tsx b/assets/components/Input/MarkdownEditor.tsx
@@ -1,9 +1,15 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
-import MDEditor from "@uiw/react-md-editor";
-import { CSSProperties, FC } from "react";
+import { FC } from "react";
+import { MarkdownEditor as TiptapEditor } from "react-dsfr-tiptap/markdown";
+import { ControlImage, ControlLink, ControlUnlink } from "react-dsfr-tiptap/dialog";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
 
-import getLocaleCommands from "../../modules/react-md/react-md-commands";
+import "../../sass/components/tiptap.scss";
 
 type MarkdownEditorProps = {
     label?: string;
@@ -16,17 +22,9 @@ type MarkdownEditorProps = {
 };
 
 const MarkdownEditor: FC<MarkdownEditorProps> = (props) => {
-    const { label, hintText, value, state, stateRelatedMessage, placeholder, onChange } = props;
+    const { label, hintText, value, state, stateRelatedMessage, placeholder = "", onChange } = props;
     const { isDark } = useIsDark();
 
-    const customStyle: CSSProperties = {
-        backgroundColor: fr.colors.decisions.background.contrast.grey.default,
-        borderRadius: `${fr.spacing("1v")} ${fr.spacing("1v")} 0 0`,
-        boxShadow: `inset 0 -2px 0 0 var(${fr.colors.decisions.border.plain.grey.default})`,
-        marginTop: fr.spacing("1v"),
-        fontFamily: "Marianne, arial, sans-serif",
-    };
-
     return (
         <div className={fr.cx("fr-input-group", state === "error" && "fr-input-group--error")} data-color-mode={isDark ? "dark" : "light"}>
             {label && (
@@ -35,17 +33,25 @@ const MarkdownEditor: FC<MarkdownEditorProps> = (props) => {
                     {hintText && <span className="fr-hint-text">{hintText}</span>}
                 </label>
             )}
-            <MDEditor
-                value={value}
-                height={200}
-                commands={getLocaleCommands("fr")}
-                extraCommands={[]}
-                textareaProps={{
-                    placeholder: placeholder,
-                }}
-                onChange={(newValue = "") => onChange(newValue)}
-                style={customStyle}
-                previewOptions={{ style: customStyle }}
+            <TiptapEditor
+                content={value}
+                controls={[
+                    ["Bold", "Italic", "Strike", "Code", "ClearFormatting"],
+                    ["H1", "H2", "H3", "H4", "H5", "H6", "Paragraph"],
+                    ["BulletList", "OrderedList", "CodeBlock", "Blockquote", "HorizontalRule"],
+                    [ControlLink, ControlUnlink, ControlImage],
+                    ["Undo", "Redo"],
+                ]}
+                extensions={[
+                    StarterKit,
+                    Image,
+                    Link,
+                    Placeholder.configure({
+                        placeholder,
+                    }),
+                    Markdown,
+                ]}
+                onContentUpdate={onChange}
             />
             {state === "error" && stateRelatedMessage !== undefined && <p className={fr.cx("fr-error-text")}>{stateRelatedMessage}</p>}
         </div>

diff --git a/assets/components/Utils/MarkdownRenderer.tsx b/assets/components/Utils/MarkdownRenderer.tsx
@@ -0,0 +1,30 @@
+import { FC, HTMLAttributes } from "react";
+import { symToStr } from "tsafe/symToStr";
+import markdownit from "markdown-it";
+
+import "../../sass/components/tiptap.scss";
+
+const md = markdownit({
+    breaks: true,
+    html: false,
+    linkify: true,
+    quotes: ["«\xA0", "\xA0»", "‹\xA0", "\xA0›"],
+    typographer: true,
+});
+
+interface MarkdownRendererProps extends HTMLAttributes<HTMLDivElement> {
+    content: string;
+}
+
+const MarkdownRenderer: FC<MarkdownRendererProps> = (props) => {
+    const { className, content, ...rest } = props;
+    const result = md.render(content);
+    const classNames = ["fr-tiptap"];
+    if (className) {
+        classNames.push(className);
+    }
+    return <div {...rest} className={classNames.join(" ")} dangerouslySetInnerHTML={{ __html: result }} />;
+};
+MarkdownRenderer.displayName = symToStr({ MarkdownRenderer });
+
+export default MarkdownRenderer;
diff --git a/assets/entrepot/pages/datasheet/DatasheetView/MetadataTab/MetadataField.tsx b/assets/entrepot/pages/datasheet/DatasheetView/MetadataTab/MetadataField.tsx
@@ -1,6 +1,8 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import MDEditor from "@uiw/react-md-editor";
 import { CSSProperties, FC, ReactNode } from "react";
+import "react-dsfr-tiptap/index.css";
+
+import MarkdownRenderer from "../../../../../components/Utils/MarkdownRenderer";
 
 type MetadataFieldProps = {
     title?: ReactNode;
@@ -32,14 +34,7 @@ const MetadataField: FC<MetadataFieldProps> = ({ title, content, hintText, markd
             )}
 
             {markdown && typeof content === "string" ? (
-                <MDEditor.Markdown
-                    className={fr.cx()}
-                    source={content}
-                    style={customStyle}
-                    components={{
-                        a: (props) => <a target="_blank" rel="noreferrer" {...props} />,
-                    }}
-                />
+                <MarkdownRenderer content={content} style={customStyle} />
             ) : typeof content === "string" ? (
                 <p className={fr.cx("fr-m-0")}>{content}</p>
             ) : (

diff --git a/assets/modules/react-md/react-md-commands.ts b/assets/modules/react-md/react-md-commands.ts
diff --git a/assets/modules/react-md/react-md-locales.ts b/assets/modules/react-md/react-md-locales.ts
diff --git a/assets/sass/components/tiptap.scss b/assets/sass/components/tiptap.scss
@@ -0,0 +1,11 @@
+.fr-tiptap > :last-child {
+    margin-bottom: 0 !important;
+}
+
+.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.json b/package.json
@@ -15,7 +15,9 @@
         "@tanstack/react-query": "^5.0.0",
         "@tanstack/react-query-devtools": "^5.0.0",
         "@tanstack/react-query-persist-client": "^5.51.15",
-        "@uiw/react-md-editor": "^4.0.0",
+        "@tiptap/extension-image": "^2.11.3",
+        "@tiptap/extension-link": "^2.11.3",
+        "@tiptap/extension-placeholder": "^2.11.3",
         "autoprefixer": "^10.0.0",
         "buffer": "^6.0.3",
         "copy-webpack-plugin": "^12.0.2",
@@ -30,14 +32,17 @@
         "geostyler-sld-parser": "^5.4.0",
         "geostyler-style": "^8.0.0",
         "i18nifty": "^3.0.0",
+        "markdown-it": "^14.1.0",
         "ol": "8.2.0",
         "postcss": "^8.0.0",
         "postcss-loader": "^8.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-dsfr-tiptap": "^1.0.3",
         "react-error-boundary": "^4.0.10",
         "react-hook-form": "^7.45.1",
         "simple-zustand-devtools": "^1.1.0",
+        "tiptap-markdown": "^0.8.10",
         "tsafe": "^1.6.5",
         "tss-react": "^4.9.12",
         "type-route": "^1.0.1",