refactor(playground): use MarkdownPlugin

portabletext · Jan 29, 2025 · 9b917da · 9b917da
1 parent c39ad48
commit 9b917da
Showing 1 changed file with 23 additions and 38 deletions.
diff --git a/apps/playground/src/editor.tsx b/apps/playground/src/editor.tsx
@@ -18,8 +18,8 @@ import {
   createCodeEditorBehaviors,
   createEmojiPickerBehaviors,
   createLinkBehaviors,
-  createMarkdownBehaviors,
 } from '@portabletext/editor/behaviors'
+import {MarkdownPlugin} from '@portabletext/editor/plugins'
 import {useSelector} from '@xstate/react'
 import {CopyIcon, ImageIcon, TrashIcon} from 'lucide-react'
 import {useEffect, useState, type JSX} from 'react'
@@ -353,49 +353,34 @@ function EditorPlaygroundToolbar(props: {
           <ValuePreview editorId={props.editorRef.id} />
         ) : null}
       </div>
-      {enableMarkdownPlugin ? <MarkdownPlugin /> : null}
+      {enableMarkdownPlugin ? (
+        <MarkdownPlugin
+          config={{
+            horizontalRuleObject: ({schema}) => {
+              const name = schema.blockObjects.find(
+                (object) => object.name === 'break',
+              )?.name
+              return name ? {name} : undefined
+            },
+            defaultStyle: ({schema}) => schema.styles[0].value,
+            headingStyle: ({schema, level}) =>
+              schema.styles.find((style) => style.value === `h${level}`)?.value,
+            blockquoteStyle: ({schema}) =>
+              schema.styles.find((style) => style.value === 'blockquote')
+                ?.value,
+            unorderedListStyle: ({schema}) =>
+              schema.lists.find((list) => list.value === 'bullet')?.value,
+            orderedListStyle: ({schema}) =>
+              schema.lists.find((list) => list.value === 'number')?.value,
+          }}
+        />
+      ) : null}
       {enableCodeEditorPlugin ? <CodeEditorPlugin /> : null}
       {enableLinkPlugin ? <LinkPlugin /> : null}
     </>
   )
 }
 
-function MarkdownPlugin() {
-  const editor = useEditor()
-
-  useEffect(() => {
-    const behaviors = createMarkdownBehaviors({
-      horizontalRuleObject: ({schema}) => {
-        const name = schema.blockObjects.find(
-          (object) => object.name === 'break',
-        )?.name
-        return name ? {name} : undefined
-      },
-      defaultStyle: ({schema}) => schema.styles[0].value,
-      headingStyle: ({schema, level}) =>
-        schema.styles.find((style) => style.value === `h${level}`)?.value,
-      blockquoteStyle: ({schema}) =>
-        schema.styles.find((style) => style.value === 'blockquote')?.value,
-      unorderedListStyle: ({schema}) =>
-        schema.lists.find((list) => list.value === 'bullet')?.value,
-      orderedListStyle: ({schema}) =>
-        schema.lists.find((list) => list.value === 'number')?.value,
-    })
-
-    const unregisterBehaviors = behaviors.map((behavior) =>
-      editor.registerBehavior({behavior}),
-    )
-
-    return () => {
-      for (const unregisterBehavior of unregisterBehaviors) {
-        unregisterBehavior()
-      }
-    }
-  }, [editor])
-
-  return null
-}
-
 function EmojiPickerPlugin() {
   const editor = useEditor()
   const [emojiMatches, setEmojiMatches] = useState<Array<EmojiMatch>>([])