feat(editor): output prefixed HTML

konstantinmuenster · Dec 11, 2023 · a03908b · a03908b
1 parent 2703a7a
commit a03908b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 28 deletions.
diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/Editor.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/Editor.tsx
@@ -1,11 +1,4 @@
-import {
-  EditorContent,
-  Extension,
-  JSONContent,
-  Mark,
-  Node,
-  useEditor,
-} from "@tiptap/react";
+import { EditorContent, Extension, Mark, Node, useEditor } from "@tiptap/react";
 import { Blockquote } from "@tiptap/extension-blockquote";
 import { Bold } from "@tiptap/extension-bold";
 import { BulletList } from "@tiptap/extension-bullet-list";
@@ -59,29 +52,23 @@ const extensions: (Extension | Node | Mark)[] = [
   Youtube,
 ];
 
-export interface RichTextContent {
-  html?: string;
-  text?: string;
-  json?: JSONContent;
-}
+const OUTPUT_PREFIX = "<!--strapi-plugin-rich-text-output-->";
+const removeOutputPrefix = (value: string) => value.replace(OUTPUT_PREFIX, "");
+export const isRichText = (value: string) => value.startsWith(OUTPUT_PREFIX);
 
 interface EditorProps {
-  initialContent: RichTextContent | string;
-  onChange: (value: RichTextContent) => void;
+  initialContent: string;
+  onChange: (value: string) => void;
   placeholder: string | null;
   disabled: boolean;
 }
 
 export default function Editor({ initialContent, onChange }: EditorProps) {
   const editor = useEditor({
     extensions,
-    content: initialContent,
+    content: removeOutputPrefix(initialContent),
     onUpdate: ({ editor }) => {
-      onChange({
-        html: editor.getHTML(),
-        text: editor.getText(),
-        json: editor.getJSON(),
-      });
+      onChange(OUTPUT_PREFIX + editor.getHTML());
     },
   });
 

diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/index.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/index.tsx
@@ -5,7 +5,7 @@ import { Field, FieldLabel } from "@strapi/design-system/Field";
 import { Typography } from "@strapi/design-system/Typography";
 import { useIntl } from "react-intl";
 
-import Editor, { RichTextContent } from "./Editor";
+import Editor, { isRichText } from "./Editor";
 import { createHTMLFromMarkdown } from "../../lib/markdown";
 
 interface RichTextProps {
@@ -56,20 +56,20 @@ export default function RichText({
   const { formatMessage } = useIntl();
 
   const content = useMemo(() => {
-    try {
-      return (JSON.parse(value || "") as RichTextContent).json || "";
-    } catch {
-      return value ? createHTMLFromMarkdown(value) : "";
+    if (value) {
+      return isRichText(value) ? value : createHTMLFromMarkdown(value);
+    } else {
+      return "";
     }
   }, []);
 
   const handleChange = useCallback(
-    (value: RichTextContent) => {
+    (value: string) => {
       onChange({
         target: {
           name: name,
           type: attribute.type,
-          value: JSON.stringify(value),
+          value: value,
         },
       });
     },