@portabletext/editor 1.34.0 → 1.35.0

package/src/plugins/plugin.decorator-shortcut.ts

@@ -0,0 +1,235 @@
+import {useActorRef} from '@xstate/react'
+import {isEqual} from 'lodash'
+import {
+  assign,
+  fromCallback,
+  setup,
+  type AnyEventObject,
+  type CallbackLogicFunction,
+} from 'xstate'
+import {createDecoratorPairBehavior} from '../behaviors/behavior.decorator-pair'
+import {defineBehavior} from '../behaviors/behavior.types'
+import type {Editor} from '../editor/create-editor'
+import {useEditor} from '../editor/editor-provider'
+import type {EditorSchema} from '../selectors'
+import type {BlockOffset} from '../types/block-offset'
+import * as utils from '../utils'
+
+export function DecoratorShortcutPlugin(config: {
+  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+  pair: {char: string; amount: number}
+}) {
+  const editor = useEditor()
+
+  useActorRef(decoratorPairMachine, {
+    input: {
+      editor,
+      decorator: config.decorator,
+      pair: config.pair,
+    },
+  })
+
+  return null
+}
+
+type MarkdownEmphasisEvent =
+  | {
+      type: 'emphasis.add'
+      blockOffset: BlockOffset
+    }
+  | {
+      type: 'selection'
+      blockOffsets?: {
+        anchor: BlockOffset
+        focus: BlockOffset
+      }
+    }
+  | {
+      type: 'delete.backward'
+    }
+
+const emphasisListener: CallbackLogicFunction<
+  AnyEventObject,
+  MarkdownEmphasisEvent,
+  {
+    decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+    editor: Editor
+    pair: {char: string; amount: number}
+  }
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: createDecoratorPairBehavior({
+      decorator: input.decorator,
+      pair: input.pair,
+      onDecorate: (offset) => {
+        sendBack({type: 'emphasis.add', blockOffset: offset})
+      },
+    }),
+  })
+
+  return unregister
+}
+
+const selectionListenerCallback: CallbackLogicFunction<
+  AnyEventObject,
+  MarkdownEmphasisEvent,
+  {editor: Editor}
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'select',
+      guard: ({snapshot, event}) => {
+        if (!event.selection) {
+          return {blockOffsets: undefined}
+        }
+
+        const anchor = utils.spanSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: event.selection.anchor,
+        })
+        const focus = utils.spanSelectionPointToBlockOffset({
+          value: snapshot.context.value,
+          selectionPoint: event.selection.focus,
+        })
+
+        if (!anchor || !focus) {
+          return {blockOffsets: undefined}
+        }
+
+        return {
+          blockOffsets: {
+            anchor,
+            focus,
+          },
+        }
+      },
+      actions: [
+        (_, {blockOffsets}) => [
+          {
+            type: 'effect',
+            effect: () => {
+              sendBack({type: 'selection', blockOffsets})
+            },
+          },
+        ],
+      ],
+    }),
+  })
+
+  return unregister
+}
+
+const deleteBackwardListenerCallback: CallbackLogicFunction<
+  AnyEventObject,
+  MarkdownEmphasisEvent,
+  {editor: Editor}
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'delete.backward',
+      actions: [
+        () => [
+          {
+            type: 'history.undo',
+          },
+          {
+            type: 'effect',
+            effect: () => {
+              sendBack({type: 'delete.backward'})
+            },
+          },
+        ],
+      ],
+    }),
+  })
+
+  return unregister
+}
+
+const decoratorPairMachine = setup({
+  types: {
+    context: {} as {
+      decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+      editor: Editor
+      offsetAfterEmphasis?: BlockOffset
+      pair: {char: string; amount: number}
+    },
+    input: {} as {
+      decorator: ({schema}: {schema: EditorSchema}) => string | undefined
+      editor: Editor
+      pair: {char: string; amount: number}
+    },
+    events: {} as MarkdownEmphasisEvent,
+  },
+  actors: {
+    'emphasis listener': fromCallback(emphasisListener),
+    'delete.backward listener': fromCallback(deleteBackwardListenerCallback),
+    'selection listener': fromCallback(selectionListenerCallback),
+  },
+}).createMachine({
+  id: 'decorator pair',
+  context: ({input}) => ({
+    decorator: input.decorator,
+    editor: input.editor,
+    pair: input.pair,
+  }),
+  initial: 'idle',
+  states: {
+    'idle': {
+      invoke: [
+        {
+          src: 'emphasis listener',
+          input: ({context}) => ({
+            decorator: context.decorator,
+            editor: context.editor,
+            pair: context.pair,
+          }),
+        },
+      ],
+      on: {
+        'emphasis.add': {
+          target: 'emphasis added',
+          actions: assign({
+            offsetAfterEmphasis: ({event}) => event.blockOffset,
+          }),
+        },
+      },
+    },
+    'emphasis added': {
+      exit: [
+        assign({
+          offsetAfterEmphasis: undefined,
+        }),
+      ],
+      invoke: [
+        {
+          src: 'selection listener',
+          input: ({context}) => ({editor: context.editor}),
+        },
+        {
+          src: 'delete.backward listener',
+          input: ({context}) => ({editor: context.editor}),
+        },
+      ],
+      on: {
+        'selection': {
+          target: 'idle',
+          guard: ({context, event}) => {
+            const selectionChanged = !isEqual(
+              {
+                anchor: context.offsetAfterEmphasis,
+                focus: context.offsetAfterEmphasis,
+              },
+              event.blockOffsets,
+            )
+
+            return selectionChanged
+          },
+        },
+        'delete.backward': {
+          target: 'idle',
+        },
+      },
+    },
+  },
+})

package/src/plugins/plugin.markdown.tsx

@@ -3,17 +3,23 @@ import {
   createMarkdownBehaviors,
   type MarkdownBehaviorsConfig,
 } from '../behaviors/behavior.markdown'
-import {
-  useMarkdownEmphasisBehaviors,
-  type MarkdownEmphasisBehaviorsConfig,
-} from '../behaviors/behavior.markdown-emphasis'
+import type {EditorSchema} from '../editor/define-schema'
 import {useEditor} from '../editor/editor-provider'
+import {DecoratorShortcutPlugin} from './plugin.decorator-shortcut'
 
 /**
  * @beta
  */
-export type MarkdownPluginConfig = MarkdownBehaviorsConfig &
-  MarkdownEmphasisBehaviorsConfig
+export type MarkdownPluginConfig = 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
@@ -32,8 +38,12 @@ export type MarkdownPluginConfig = MarkdownBehaviorsConfig &
  *        config={{
  *          boldDecorator: ({schema}) =>
  *            schema.decorators.find((decorator) => decorator.value === 'strong')?.value,
+ *          codeDecorator: ({schema}) =>
+ *            schema.decorators.find((decorator) => decorator.value === 'code')?.value,
  *          italicDecorator: ({schema}) =>
  *            schema.decorators.find((decorator) => decorator.value === 'em')?.value,
+ *          strikeThroughDecorator: ({schema}) =>
+ *            schema.decorators.find((decorator) => decorator.value === 'strike-through')?.value,
  *          horizontalRuleObject: ({schema}) => {
  *            const name = schema.blockObjects.find(
  *              (object) => object.name === 'break',
@@ -60,7 +70,6 @@ export type MarkdownPluginConfig = MarkdownBehaviorsConfig &
  */
 export function MarkdownPlugin(props: {config: MarkdownPluginConfig}) {
   const editor = useEditor()
-  useMarkdownEmphasisBehaviors({config: props.config})
 
   useEffect(() => {
     const behaviors = createMarkdownBehaviors(props.config)
@@ -76,5 +85,44 @@ export function MarkdownPlugin(props: {config: MarkdownPluginConfig}) {
     }
   }, [editor, props.config])
 
-  return null
+  return (
+    <>
+      {props.config.boldDecorator ? (
+        <>
+          <DecoratorShortcutPlugin
+            decorator={props.config.boldDecorator}
+            pair={{char: '*', amount: 2}}
+          />
+          <DecoratorShortcutPlugin
+            decorator={props.config.boldDecorator}
+            pair={{char: '_', amount: 2}}
+          />
+        </>
+      ) : null}
+      {props.config.codeDecorator ? (
+        <DecoratorShortcutPlugin
+          decorator={props.config.codeDecorator}
+          pair={{char: '`', amount: 1}}
+        />
+      ) : null}
+      {props.config.italicDecorator ? (
+        <>
+          <DecoratorShortcutPlugin
+            decorator={props.config.italicDecorator}
+            pair={{char: '*', amount: 1}}
+          />
+          <DecoratorShortcutPlugin
+            decorator={props.config.italicDecorator}
+            pair={{char: '_', amount: 1}}
+          />
+        </>
+      ) : null}
+      {props.config.strikeThroughDecorator ? (
+        <DecoratorShortcutPlugin
+          decorator={props.config.strikeThroughDecorator}
+          pair={{char: '~', amount: 2}}
+        />
+      ) : null}
+    </>
+  )
 }

package/src/plugins/plugin.one-line.tsx

@@ -10,9 +10,9 @@ const oneLineBehaviors = [
    */
   defineBehavior({
     on: 'insert.break',
-    guard: ({context}) =>
-      context.selection && selectors.isSelectionExpanded({context})
-        ? {selection: context.selection}
+    guard: (snapshot) =>
+      snapshot.context.selection && selectors.isSelectionExpanded(snapshot)
+        ? {selection: snapshot.context.selection}
         : false,
     actions: [(_, {selection}) => [{type: 'delete', selection}]],
   }),
@@ -40,14 +40,14 @@ const oneLineBehaviors = [
    */
   defineBehavior({
     on: 'insert.block',
-    guard: ({context, event}) => {
-      const focusTextBlock = selectors.getFocusTextBlock({context})
-      const selectionStartPoint = selectors.getSelectionStartPoint({context})
-      const selectionEndPoint = selectors.getSelectionEndPoint({context})
+    guard: ({snapshot, event}) => {
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)
+      const selectionEndPoint = selectors.getSelectionEndPoint(snapshot)
 
       if (
         !focusTextBlock ||
-        !utils.isTextBlock(context, event.block) ||
+        !utils.isTextBlock(snapshot.context, event.block) ||
         !selectionStartPoint ||
         !selectionEndPoint
       ) {
@@ -90,14 +90,14 @@ const oneLineBehaviors = [
    */
   defineBehavior({
     on: 'insert.block',
-    guard: ({context, event}) => {
-      const focusTextBlock = selectors.getFocusTextBlock({context})
-      const selectionStartPoint = selectors.getSelectionStartPoint({context})
-      const selectionEndPoint = selectors.getSelectionEndPoint({context})
+    guard: ({snapshot, event}) => {
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+      const selectionStartPoint = selectors.getSelectionStartPoint(snapshot)
+      const selectionEndPoint = selectors.getSelectionEndPoint(snapshot)
 
       if (
         !focusTextBlock ||
-        !utils.isTextBlock(context, event.block) ||
+        !utils.isTextBlock(snapshot.context, event.block) ||
         !selectionStartPoint ||
         !selectionEndPoint
       ) {
@@ -105,12 +105,12 @@ const oneLineBehaviors = [
       }
 
       const blockBeforeStartPoint = utils.splitTextBlock({
-        context,
+        context: snapshot.context,
         block: focusTextBlock.node,
         point: selectionStartPoint,
       })?.before
       const blockAfterEndPoint = utils.splitTextBlock({
-        context,
+        context: snapshot.context,
         block: focusTextBlock.node,
         point: selectionEndPoint,
       })?.after
@@ -120,7 +120,7 @@ const oneLineBehaviors = [
       }
 
       const targetBlock = utils.mergeTextBlocks({
-        context,
+        context: snapshot.context,
         targetBlock: blockBeforeStartPoint,
         incomingBlock: event.block,
       })
@@ -131,7 +131,7 @@ const oneLineBehaviors = [
       })
 
       const mergedBlock = utils.mergeTextBlocks({
-        context,
+        context: snapshot.context,
         targetBlock,
         incomingBlock: blockAfterEndPoint,
       })

package/src/selectors/selector.get-active-list-item.ts

@@ -8,13 +8,13 @@ import {getSelectedBlocks} from './selectors'
  */
 export const getActiveListItem: EditorSelector<
   PortableTextListBlock['listItem'] | undefined
-> = ({context}) => {
-  if (!context.selection) {
+> = (snapshot) => {
+  if (!snapshot.context.selection) {
     return undefined
   }
 
-  const guards = createGuards(context)
-  const selectedBlocks = getSelectedBlocks({context}).map((block) => block.node)
+  const guards = createGuards(snapshot.context)
+  const selectedBlocks = getSelectedBlocks(snapshot).map((block) => block.node)
   const selectedTextBlocks = selectedBlocks.filter(guards.isTextBlock)
 
   const firstTextBlock = selectedTextBlocks.at(0)

package/src/selectors/selector.get-active-style.ts

@@ -6,15 +6,15 @@ import {getSelectedBlocks} from './selectors'
 /**
  * @public
  */
-export const getActiveStyle: EditorSelector<PortableTextTextBlock['style']> = ({
-  context,
-}) => {
-  if (!context.selection) {
+export const getActiveStyle: EditorSelector<PortableTextTextBlock['style']> = (
+  snapshot,
+) => {
+  if (!snapshot.context.selection) {
     return undefined
   }
 
-  const guards = createGuards(context)
-  const selectedBlocks = getSelectedBlocks({context}).map((block) => block.node)
+  const guards = createGuards(snapshot.context)
+  const selectedBlocks = getSelectedBlocks(snapshot).map((block) => block.node)
   const selectedTextBlocks = selectedBlocks.filter(guards.isTextBlock)
 
   const firstTextBlock = selectedTextBlocks.at(0)

package/src/selectors/selector.get-anchor-block.ts

@@ -7,15 +7,15 @@ import {isKeyedSegment} from '../utils'
  */
 export const getAnchorBlock: EditorSelector<
   {node: PortableTextBlock; path: [KeyedSegment]} | undefined
-> = ({context}) => {
-  const key = context.selection
-    ? isKeyedSegment(context.selection.anchor.path[0])
-      ? context.selection.anchor.path[0]._key
+> = (snapshot) => {
+  const key = snapshot.context.selection
+    ? isKeyedSegment(snapshot.context.selection.anchor.path[0])
+      ? snapshot.context.selection.anchor.path[0]._key
       : undefined
     : undefined
 
   const node = key
-    ? context.value.find((block) => block._key === key)
+    ? snapshot.context.value.find((block) => block._key === key)
     : undefined
 
   return node && key ? {node, path: [{_key: key}]} : undefined

package/src/selectors/selector.get-anchor-child.ts

@@ -13,16 +13,16 @@ export const getAnchorChild: EditorSelector<
       path: [KeyedSegment, 'children', KeyedSegment]
     }
   | undefined
-> = ({context}) => {
-  const anchorBlock = getAnchorTextBlock({context})
+> = (snapshot) => {
+  const anchorBlock = getAnchorTextBlock(snapshot)
 
   if (!anchorBlock) {
     return undefined
   }
 
-  const key = context.selection
-    ? isKeyedSegment(context.selection.anchor.path[2])
-      ? context.selection.anchor.path[2]._key
+  const key = snapshot.context.selection
+    ? isKeyedSegment(snapshot.context.selection.anchor.path[2])
+      ? snapshot.context.selection.anchor.path[2]._key
       : undefined
     : undefined
 

package/src/selectors/selector.get-anchor-span.ts

@@ -9,8 +9,8 @@ import {getAnchorChild} from './selector.get-anchor-child'
 export const getAnchorSpan: EditorSelector<
   | {node: PortableTextSpan; path: [KeyedSegment, 'children', KeyedSegment]}
   | undefined
-> = ({context}) => {
-  const anchorChild = getAnchorChild({context})
+> = (snapshot) => {
+  const anchorChild = getAnchorChild(snapshot)
 
   return anchorChild && isPortableTextSpan(anchorChild.node)
     ? {node: anchorChild.node, path: anchorChild.path}

package/src/selectors/selector.get-anchor-text-block.ts

@@ -11,8 +11,8 @@ import {getAnchorBlock} from './selector.get-anchor-block'
  */
 export const getAnchorTextBlock: EditorSelector<
   {node: PortableTextTextBlock; path: [KeyedSegment]} | undefined
-> = ({context}) => {
-  const anchorBlock = getAnchorBlock({context})
+> = (snapshot) => {
+  const anchorBlock = getAnchorBlock(snapshot)
 
   return anchorBlock && isPortableTextTextBlock(anchorBlock.node)
     ? {node: anchorBlock.node, path: anchorBlock.path}

package/src/selectors/selector.get-block-offsets.ts

@@ -1,4 +1,5 @@
 import type {EditorSelector} from '../editor/editor-selector'
+import type {BlockOffset} from '../types/block-offset'
 import * as utils from '../utils'
 import {getSelectionEndPoint} from './selector.get-selection-end-point'
 import {getSelectionStartPoint} from './selector.get-selection-start-point'
@@ -7,25 +8,25 @@ import {getSelectionStartPoint} from './selector.get-selection-start-point'
  * @public
  */
 export const getBlockOffsets: EditorSelector<
-  {start: utils.BlockOffset; end: utils.BlockOffset} | undefined
-> = ({context}) => {
-  if (!context.selection) {
+  {start: BlockOffset; end: BlockOffset} | undefined
+> = (snapshot) => {
+  if (!snapshot.context.selection) {
     return undefined
   }
 
-  const selectionStartPoint = getSelectionStartPoint({context})
-  const selectionEndPoint = getSelectionEndPoint({context})
+  const selectionStartPoint = getSelectionStartPoint(snapshot)
+  const selectionEndPoint = getSelectionEndPoint(snapshot)
 
   if (!selectionStartPoint || !selectionEndPoint) {
     return undefined
   }
 
   const start = utils.spanSelectionPointToBlockOffset({
-    value: context.value,
+    value: snapshot.context.value,
     selectionPoint: selectionStartPoint,
   })
   const end = utils.spanSelectionPointToBlockOffset({
-    value: context.value,
+    value: snapshot.context.value,
     selectionPoint: selectionEndPoint,
   })
 

package/src/selectors/selector.get-caret-word-selection.ts

@@ -1,11 +1,11 @@
 import type {EditorSelector} from '../editor/editor-selector'
+import type {BlockOffset} from '../types/block-offset'
 import type {EditorSelection} from '../types/editor'
 import {
   blockOffsetToSpanSelectionPoint,
   getBlockEndPoint,
   getBlockStartPoint,
   spanSelectionPointToBlockOffset,
-  type BlockOffset,
 } from '../utils'
 import {getNextInlineObject} from './selector.get-next-inline-object'
 import {getPreviousInlineObject} from './selector.get-previous-inline-object'
@@ -20,22 +20,22 @@ import {getFocusTextBlock} from './selectors'
  * Returns the selection of the of the word the caret is placed in.
  * Note: Only returns a word selection if the current selection is collapsed
  */
-export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
-  context,
-}) => {
-  if (!context.selection) {
+export const getCaretWordSelection: EditorSelector<EditorSelection> = (
+  snapshot,
+) => {
+  if (!snapshot.context.selection) {
     return null
   }
 
-  if (!isSelectionCollapsed({context})) {
+  if (!isSelectionCollapsed(snapshot)) {
     return null
   }
 
-  const focusTextBlock = getFocusTextBlock({context})
-  const selectionStartPoint = getSelectionStartPoint({context})
+  const focusTextBlock = getFocusTextBlock(snapshot)
+  const selectionStartPoint = getSelectionStartPoint(snapshot)
   const selectionStartOffset = selectionStartPoint
     ? spanSelectionPointToBlockOffset({
-        value: context.value,
+        value: snapshot.context.value,
         selectionPoint: selectionStartPoint,
       })
     : undefined
@@ -44,11 +44,12 @@ export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
     return null
   }
 
-  const previousInlineObject = getPreviousInlineObject({context})
+  const previousInlineObject = getPreviousInlineObject(snapshot)
   const blockStartPoint = getBlockStartPoint(focusTextBlock)
   const textBefore = getSelectionText({
+    ...snapshot,
     context: {
-      ...context,
+      ...snapshot.context,
       selection: {
         anchor: previousInlineObject
           ? {path: previousInlineObject.path, offset: 0}
@@ -59,11 +60,12 @@ export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
   })
   const textDirectlyBefore = textBefore.split(/\s+/).at(-1)
 
-  const nextInlineObject = getNextInlineObject({context})
+  const nextInlineObject = getNextInlineObject(snapshot)
   const blockEndPoint = getBlockEndPoint(focusTextBlock)
   const textAfter = getSelectionText({
+    ...snapshot,
     context: {
-      ...context,
+      ...snapshot.context,
       selection: {
         anchor: selectionStartPoint,
         focus: nextInlineObject
@@ -95,12 +97,12 @@ export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
     : selectionStartOffset
 
   const caretWordStartSelectionPoint = blockOffsetToSpanSelectionPoint({
-    value: context.value,
+    value: snapshot.context.value,
     blockOffset: caretWordStartOffset,
     direction: 'backward',
   })
   const caretWordEndSelectionPoint = blockOffsetToSpanSelectionPoint({
-    value: context.value,
+    value: snapshot.context.value,
     blockOffset: caretWordEndOffset,
     direction: 'forward',
   })
@@ -115,8 +117,9 @@ export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
   }
 
   return isSelectionExpanded({
+    ...snapshot,
     context: {
-      ...context,
+      ...snapshot.context,
       selection: caretWordSelection,
     },
   })

package/src/selectors/selector.get-next-inline-object.ts

@@ -17,9 +17,9 @@ export const getNextInlineObject: EditorSelector<
       path: [KeyedSegment, 'children', KeyedSegment]
     }
   | undefined
-> = ({context}) => {
-  const focusTextBlock = getFocusTextBlock({context})
-  const selectionEndPoint = getSelectionEndPoint({context})
+> = (snapshot) => {
+  const focusTextBlock = getFocusTextBlock(snapshot)
+  const selectionEndPoint = getSelectionEndPoint(snapshot)
   const selectionEndPointChildKey =
     selectionEndPoint && isKeySegment(selectionEndPoint.path[2])
       ? selectionEndPoint.path[2]._key
@@ -43,7 +43,7 @@ export const getNextInlineObject: EditorSelector<
       continue
     }
 
-    if (!isSpan(context, child) && endPointChildFound) {
+    if (!isSpan(snapshot.context, child) && endPointChildFound) {
       inlineObject = {
         node: child,
         path: [...focusTextBlock.path, 'children', {_key: child._key}],