From 9b917da7f1332380b23abf3bb589fd96ccbaaa68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Hamburger=20Gr=C3=B8ngaard?=
<christian.groengaard@sanity.io>
Date: Wed, 29 Jan 2025 11:48:49 +0100
Subject: [PATCH] refactor(playground): use `MarkdownPlugin`
---
apps/playground/src/editor.tsx | 61 +++++++++++++---------------------
1 file changed, 23 insertions(+), 38 deletions(-)
diff --git a/apps/playground/src/editor.tsx b/apps/playground/src/editor.tsx
index 42c3a297..058ef6f5 100644
--- 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>>([])