@portabletext/plugin-markdown-shortcuts 1.0.0

package/src/behavior.markdown-shortcuts.ts

@@ -0,0 +1,486 @@
+import type {EditorSchema} from '@portabletext/editor'
+import {defineBehavior, execute} from '@portabletext/editor/behaviors'
+import * as selectors from '@portabletext/editor/selectors'
+import * as utils from '@portabletext/editor/utils'
+
+export type MarkdownBehaviorsConfig = {
+  horizontalRuleObject?: (context: {
+    schema: EditorSchema
+  }) => {name: string; value?: {[prop: string]: unknown}} | undefined
+  defaultStyle?: (context: {schema: EditorSchema}) => string | undefined
+  headingStyle?: (context: {
+    schema: EditorSchema
+    level: number
+  }) => string | undefined
+  blockquoteStyle?: (context: {schema: EditorSchema}) => string | undefined
+  unorderedList?: (context: {schema: EditorSchema}) => string | undefined
+  orderedList?: (context: {schema: EditorSchema}) => string | undefined
+}
+
+export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
+  const automaticBlockquoteOnSpace = defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot, event}) => {
+      const isSpace = event.text === ' '
+
+      if (!isSpace) {
+        return false
+      }
+
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const focusSpan = selectors.getFocusSpan(snapshot)
+
+      if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+        return false
+      }
+
+      const previousInlineObject = selectors.getPreviousInlineObject(snapshot)
+      const blockOffset = utils.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: snapshot.context.selection?.focus.offset ?? 0,
+        },
+      })
+
+      if (previousInlineObject || !blockOffset) {
+        return false
+      }
+
+      const blockText = utils.getTextBlockText(focusTextBlock.node)
+      const caretAtTheEndOfQuote = blockOffset.offset === 1
+      const looksLikeMarkdownQuote = /^>/.test(blockText)
+      const blockquoteStyle = config.blockquoteStyle?.({
+        schema: snapshot.context.schema,
+      })
+
+      if (
+        caretAtTheEndOfQuote &&
+        looksLikeMarkdownQuote &&
+        blockquoteStyle !== undefined
+      ) {
+        return {focusTextBlock, style: blockquoteStyle}
+      }
+
+      return false
+    },
+    actions: [
+      () => [
+        execute({
+          type: 'insert.text',
+          text: ' ',
+        }),
+      ],
+      (_, {focusTextBlock, style}) => [
+        execute({
+          type: 'block.unset',
+          props: ['listItem', 'level'],
+          at: focusTextBlock.path,
+        }),
+        execute({
+          type: 'block.set',
+          props: {style},
+          at: focusTextBlock.path,
+        }),
+        execute({
+          type: 'delete.text',
+          at: {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: 2,
+            },
+          },
+        }),
+      ],
+    ],
+  })
+  const automaticHr = defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot, event}) => {
+      const hrCharacter =
+        event.text === '-'
+          ? '-'
+          : event.text === '*'
+            ? '*'
+            : event.text === '_'
+              ? '_'
+              : undefined
+
+      if (hrCharacter === undefined) {
+        return false
+      }
+
+      const hrObject = config.horizontalRuleObject?.({
+        schema: snapshot.context.schema,
+      })
+      const focusBlock = selectors.getFocusTextBlock(snapshot)
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+
+      if (!hrObject || !focusBlock || !selectionCollapsed) {
+        return false
+      }
+
+      const previousInlineObject = selectors.getPreviousInlineObject(snapshot)
+      const textBefore = selectors.getBlockTextBefore(snapshot)
+      const hrBlockOffsets = {
+        anchor: {
+          path: focusBlock.path,
+          offset: 0,
+        },
+        focus: {
+          path: focusBlock.path,
+          offset: 3,
+        },
+      }
+
+      if (
+        !previousInlineObject &&
+        textBefore === `${hrCharacter}${hrCharacter}`
+      ) {
+        return {hrObject, focusBlock, hrCharacter, hrBlockOffsets}
+      }
+
+      return false
+    },
+    actions: [
+      (_, {hrCharacter}) => [
+        execute({
+          type: 'insert.text',
+          text: hrCharacter,
+        }),
+      ],
+      (_, {hrObject, hrBlockOffsets}) => [
+        execute({
+          type: 'insert.block',
+          block: {
+            _type: hrObject.name,
+            ...(hrObject.value ?? {}),
+          },
+          placement: 'before',
+          select: 'none',
+        }),
+        execute({
+          type: 'delete.text',
+          at: hrBlockOffsets,
+        }),
+      ],
+    ],
+  })
+  const automaticHrOnPaste = defineBehavior({
+    on: 'clipboard.paste',
+    guard: ({snapshot, event}) => {
+      const text = event.originEvent.dataTransfer.getData('text/plain')
+      const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/
+      const hrCharacters = text.match(hrRegExp)?.[0]
+      const hrObject = config.horizontalRuleObject?.({
+        schema: snapshot.context.schema,
+      })
+      const focusBlock = selectors.getFocusBlock(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (!hrCharacters || !hrObject || !focusBlock) {
+        return false
+      }
+
+      return {hrCharacters, hrObject, focusBlock, focusTextBlock}
+    },
+    actions: [
+      (_, {hrCharacters}) => [
+        execute({
+          type: 'insert.text',
+          text: hrCharacters,
+        }),
+      ],
+      ({snapshot}, {hrObject, focusBlock, focusTextBlock}) =>
+        focusTextBlock
+          ? [
+              execute({
+                type: 'insert.block',
+                block: {
+                  _type: snapshot.context.schema.block.name,
+                  children: focusTextBlock.node.children,
+                },
+                placement: 'after',
+              }),
+              execute({
+                type: 'insert.block',
+                block: {
+                  _type: hrObject.name,
+                  ...(hrObject.value ?? {}),
+                },
+                placement: 'after',
+              }),
+              execute({
+                type: 'delete.block',
+                at: focusBlock.path,
+              }),
+            ]
+          : [
+              execute({
+                type: 'insert.block',
+                block: {
+                  _type: hrObject.name,
+                  ...(hrObject.value ?? {}),
+                },
+                placement: 'after',
+              }),
+            ],
+    ],
+  })
+  const automaticHeadingOnSpace = defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot, event}) => {
+      const isSpace = event.text === ' '
+
+      if (!isSpace) {
+        return false
+      }
+
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const focusSpan = selectors.getFocusSpan(snapshot)
+
+      if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+        return false
+      }
+
+      const blockOffset = utils.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: snapshot.context.selection?.focus.offset ?? 0,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const previousInlineObject = selectors.getPreviousInlineObject(snapshot)
+      const blockText = utils.getTextBlockText(focusTextBlock.node)
+      const markdownHeadingSearch = /^#+/.exec(blockText)
+      const level = markdownHeadingSearch
+        ? markdownHeadingSearch[0].length
+        : undefined
+      const caretAtTheEndOfHeading = blockOffset.offset === level
+
+      if (previousInlineObject || !caretAtTheEndOfHeading) {
+        return false
+      }
+
+      const style =
+        level !== undefined
+          ? config.headingStyle?.({schema: snapshot.context.schema, level})
+          : undefined
+
+      if (level !== undefined && style !== undefined) {
+        return {
+          focusTextBlock,
+          style: style,
+          level,
+        }
+      }
+
+      return false
+    },
+    actions: [
+      ({event}) => [execute(event)],
+      (_, {focusTextBlock, style, level}) => [
+        execute({
+          type: 'block.unset',
+          props: ['listItem', 'level'],
+          at: focusTextBlock.path,
+        }),
+        execute({
+          type: 'block.set',
+          props: {style},
+          at: focusTextBlock.path,
+        }),
+        execute({
+          type: 'delete.text',
+          at: {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: level + 1,
+            },
+          },
+        }),
+      ],
+    ],
+  })
+  const clearStyleOnBackspace = defineBehavior({
+    on: 'delete.backward',
+    guard: ({snapshot}) => {
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const focusSpan = selectors.getFocusSpan(snapshot)
+
+      if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+        return false
+      }
+
+      const atTheBeginningOfBLock =
+        focusTextBlock.node.children[0]._key === focusSpan.node._key &&
+        snapshot.context.selection?.focus.offset === 0
+
+      const defaultStyle = config.defaultStyle?.({
+        schema: snapshot.context.schema,
+      })
+
+      if (
+        atTheBeginningOfBLock &&
+        defaultStyle &&
+        focusTextBlock.node.style !== defaultStyle
+      ) {
+        return {defaultStyle, focusTextBlock}
+      }
+
+      return false
+    },
+    actions: [
+      (_, {defaultStyle, focusTextBlock}) => [
+        execute({
+          type: 'block.set',
+          props: {style: defaultStyle},
+          at: focusTextBlock.path,
+        }),
+      ],
+    ],
+  })
+  const automaticListOnSpace = defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot, event}) => {
+      const isSpace = event.text === ' '
+
+      if (!isSpace) {
+        return false
+      }
+
+      const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const focusSpan = selectors.getFocusSpan(snapshot)
+
+      if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+        return false
+      }
+
+      const previousInlineObject = selectors.getPreviousInlineObject(snapshot)
+      const blockOffset = utils.spanSelectionPointToBlockOffset({
+        value: snapshot.context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: snapshot.context.selection?.focus.offset ?? 0,
+        },
+      })
+
+      if (previousInlineObject || !blockOffset) {
+        return false
+      }
+
+      const blockText = utils.getTextBlockText(focusTextBlock.node)
+      const defaultStyle = config.defaultStyle?.({
+        schema: snapshot.context.schema,
+      })
+      const looksLikeUnorderedList = /^(-|\*)/.test(blockText)
+      const unorderedList = config.unorderedList?.({
+        schema: snapshot.context.schema,
+      })
+      const caretAtTheEndOfUnorderedList = blockOffset.offset === 1
+
+      if (
+        defaultStyle &&
+        caretAtTheEndOfUnorderedList &&
+        looksLikeUnorderedList &&
+        unorderedList !== undefined
+      ) {
+        return {
+          focusTextBlock,
+          listItem: unorderedList,
+          listItemLength: 1,
+          style: defaultStyle,
+        }
+      }
+
+      const looksLikeOrderedList = /^1\./.test(blockText)
+      const orderedList = config.orderedList?.({
+        schema: snapshot.context.schema,
+      })
+      const caretAtTheEndOfOrderedList = blockOffset.offset === 2
+
+      if (
+        defaultStyle &&
+        caretAtTheEndOfOrderedList &&
+        looksLikeOrderedList &&
+        orderedList !== undefined
+      ) {
+        return {
+          focusTextBlock,
+          listItem: orderedList,
+          listItemLength: 2,
+          style: defaultStyle,
+        }
+      }
+
+      return false
+    },
+    actions: [
+      ({event}) => [execute(event)],
+      (_, {focusTextBlock, style, listItem, listItemLength}) => [
+        execute({
+          type: 'block.set',
+          props: {
+            listItem,
+            level: 1,
+            style,
+          },
+          at: focusTextBlock.path,
+        }),
+        execute({
+          type: 'delete.text',
+          at: {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: listItemLength + 1,
+            },
+          },
+        }),
+      ],
+    ],
+  })
+
+  const markdownBehaviors = [
+    automaticBlockquoteOnSpace,
+    automaticHeadingOnSpace,
+    automaticHr,
+    automaticHrOnPaste,
+    clearStyleOnBackspace,
+    automaticListOnSpace,
+  ]
+
+  return markdownBehaviors
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './plugin.markdown-shortcuts'

package/src/plugin.markdown-shortcuts.tsx

@@ -0,0 +1,84 @@
+import {useEditor} from '@portabletext/editor'
+import type {EditorSchema} from '@portabletext/editor'
+import {CharacterPairDecoratorPlugin} from '@portabletext/plugin-character-pair-decorator'
+import {useEffect} from 'react'
+import {
+  createMarkdownBehaviors,
+  type MarkdownBehaviorsConfig,
+} from './behavior.markdown-shortcuts'
+
+/**
+ * @beta
+ */
+export type MarkdownShortcutsPluginProps = MarkdownBehaviorsConfig & {
+  boldDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
+  codeDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
+  italicDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
+  strikeThroughDecorator?: ({
+    schema,
+  }: {
+    schema: EditorSchema
+  }) => string | undefined
+}
+
+/**
+ * @beta
+ */
+export function MarkdownShortcutsPlugin(props: MarkdownShortcutsPluginProps) {
+  const editor = useEditor()
+
+  useEffect(() => {
+    const behaviors = createMarkdownBehaviors(props)
+
+    const unregisterBehaviors = behaviors.map((behavior) =>
+      editor.registerBehavior({behavior}),
+    )
+
+    return () => {
+      for (const unregisterBehavior of unregisterBehaviors) {
+        unregisterBehavior()
+      }
+    }
+  }, [editor, props])
+
+  return (
+    <>
+      {props.boldDecorator ? (
+        <>
+          <CharacterPairDecoratorPlugin
+            decorator={props.boldDecorator}
+            pair={{char: '*', amount: 2}}
+          />
+          <CharacterPairDecoratorPlugin
+            decorator={props.boldDecorator}
+            pair={{char: '_', amount: 2}}
+          />
+        </>
+      ) : null}
+      {props.codeDecorator ? (
+        <CharacterPairDecoratorPlugin
+          decorator={props.codeDecorator}
+          pair={{char: '`', amount: 1}}
+        />
+      ) : null}
+      {props.italicDecorator ? (
+        <>
+          <CharacterPairDecoratorPlugin
+            decorator={props.italicDecorator}
+            pair={{char: '*', amount: 1}}
+          />
+          <CharacterPairDecoratorPlugin
+            decorator={props.italicDecorator}
+            pair={{char: '_', amount: 1}}
+          />
+        </>
+      ) : null}
+      {props.strikeThroughDecorator ? (
+        <CharacterPairDecoratorPlugin
+          decorator={props.strikeThroughDecorator}
+          pair={{char: '~', amount: 2}}
+        />
+      ) : null}
+    </>
+  )
+}