Comment intégrer un éditeur Markdown WYSIWYG dans une application ReactJS

1
npm install @mdxeditor/editor

1
import "@mdxeditor/editor/style.css";

1
'use client'
2
import {
3
  MDXEditor,
4
  headingsPlugin,
5
  listsPlugin,
6
  quotePlugin,
7
  markdownShortcutPlugin,
8
  tablePlugin,
9
  linkPlugin,
10
  linkDialogPlugin,
11
  imagePlugin,
12
  diffSourcePlugin,
13
  toolbarPlugin,
14
  /* … */
15
} from "@mdxeditor/editor";
16
import { ClientOnly } from "remix-utils/client-only";
17
import { useId, useRef } from "react";
18
import { Label } from "~/components/ui/label";
19
import { ErrorList } from "~/components/forms";
20

21
export function MarkdownField({
22
  content,
23
  onContentChange,
24
  textareaProps,
25
  labelProps,
26
  errors,
27
}: {
28
  content: string;
29
  onContentChange: (value: string) => void;
30
  textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
31
  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
32
  errors?: Array<string>;
33
}) {
34
  const id = textareaProps.id ?? textareaProps.name ?? useId();
35
  const errorId = errors?.length ? `${id}-error` : undefined;
36

37
  return (
38
    <div className="space-y-2">
39
      <Label htmlFor={id} {...labelProps} />
40

41
      {/* champ caché pour Conform */}
42
      <textarea {...textareaProps} value={content} className="hidden" readOnly />
43

44
      <ClientOnly
45
        fallback={
46
          <div className="rounded-md border bg-muted/30 p-4">
47
            <p className="text-sm text-muted-foreground">Chargement de l’éditeur…</p>
48
          </div>
49
        }
50
      >
51
        {() => (
52
          <MDXEditor
53
            markdown={content}
54
            onChange={onContentChange}
55
            contentEditableClassName="prose max-w-none min-h-[200px] p-4 border rounded-md focus:outline-none"
56
            plugins={[
57
              headingsPlugin(),
58
              listsPlugin(),
59
              quotePlugin(),
60
              markdownShortcutPlugin(),
61
              linkPlugin(),
62
              linkDialogPlugin(),
63
              tablePlugin(),
64
              imagePlugin(),
65
              diffSourcePlugin({ viewMode: "rich-text" }),
66
              toolbarPlugin(),
67
            ]}
68
          />
69
        )}
70
      </ClientOnly>
71

72
      <ErrorList id={errorId} errors={errors} />
73
    </div>
74
  );
75
}

1
- <Field
2
-   labelProps={{ children: "Contenu détaillé (Markdown)" }}
3
-   textareaProps={getTextareaProps(fields.content)}
4
-   errors={fields.content.errors}
5
- />
6
+ <MarkdownField
7
+   content={content}
8
+   onContentChange={setContent}
9
+   labelProps={{ children: "Contenu détaillé (Markdown)" }}
10
+   textareaProps={getTextareaProps(fields.content)}
11
+   errors={fields.content.errors}
12
+ />

1
import { Youtube } from "lucide-react";
2
import {
3
  directivesPlugin,
4
  type DirectiveDescriptor,
5
  insertDirective$,
6
  usePublisher,
7
  DialogButton,
8
} from "@mdxeditor/editor";
9

10
/* descriptor */
11
const youtubeDescriptor: DirectiveDescriptor = {
12
  name: "youtube",
13
  attributes: ["id"],
14
  hasChildren: false,
15
  testNode: (n) => n.name === "youtube",
16
  Editor: ({ mdastNode }) => (
17
    <iframe
18
      className="my-4 aspect-video w-full rounded-md"
19
      src={`https://www.youtube.com/embed/${mdastNode.attributes?.id ?? ""}`}
20
      loading="lazy"
21
    />
22
  ),
23
};
24

25
/* bouton toolbar */
26
const YouTubeButton = () => {
27
  const insert = usePublisher(insertDirective$);
28
  return (
29
    <DialogButton
30
      tooltipTitle="Insérer une vidéo YouTube"
31
      dialogInputPlaceholder="URL YouTube"
32
      buttonContent={<Youtube className="h-4 w-4" />}
33
      onSubmit={(url) => {
34
        const id = new URL(url).searchParams.get("v");
35
        id && insert({ name: "youtube", type: "leafDirective", attributes: { id } });
36
      }}
37
    />
38
  );
39
};

1

1
import remarkDirective from "remark-directive";
2
import { visit } from "unist-util-visit";
3

4
/* plugin qui remplace la directive youtube par un iframe */
5
function remarkYouTube() {
6
  return (tree) => {
7
    visit(tree, (node) => {
8
      if (node.type === "leafDirective" && node.name === "youtube") {
9
        node.data = {
10
          hName: "iframe",
11
          hProperties: {
12
            src: `https://www.youtube.com/embed/${node.attributes.id}`,
13
            className: "my-6 w-full aspect-video rounded-md",
14
            loading: "lazy",
15
          },
16
        };
17
      }
18
    });
19
  };
20
}

1
<Markdown remarkPlugins={[remarkGfm, remarkDirective, remarkYouTube]}>
2
  {content}
3
</Markdown>

1
git add .
2
git commit -m "feat(admin): éditeur Markdown WYSIWYG MDX Editor + directive YouTube"