@portabletext/editor 1.32.0 → 1.33.1

package/src/behavior-actions/behavior.action.decorator.add.ts

@@ -0,0 +1,161 @@
+import {Editor, Range, Text, Transforms} from 'slate'
+import {toPortableTextRange, toSlateRange} from '../internal-utils/ranges'
+import {fromSlateValue} from '../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
+import * as selectors from '../selectors'
+import * as utils from '../utils'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const decoratorAddActionImplementation: BehaviorActionImplementation<
+  'decorator.add'
+> = ({context, action}) => {
+  const editor = action.editor
+  const mark = action.decorator
+  const selection = action.selection
+    ? (toSlateRange(action.selection, action.editor) ?? editor.selection)
+    : editor.selection
+
+  if (!selection) {
+    return
+  }
+
+  const value = fromSlateValue(
+    editor.children,
+    context.schema.block.name,
+    KEY_TO_VALUE_ELEMENT.get(editor),
+  )
+
+  const editorSelection = toPortableTextRange(value, selection, context.schema)
+  const anchorOffset = editorSelection
+    ? utils.spanSelectionPointToBlockOffset({
+        value,
+        selectionPoint: editorSelection.anchor,
+      })
+    : undefined
+  const focusOffset = editorSelection
+    ? utils.spanSelectionPointToBlockOffset({
+        value,
+        selectionPoint: editorSelection.focus,
+      })
+    : undefined
+
+  if (!anchorOffset || !focusOffset) {
+    throw new Error('Unable to find anchor or focus offset')
+  }
+
+  if (Range.isExpanded(selection)) {
+    // Split if needed
+    Transforms.setNodes(
+      editor,
+      {},
+      {at: selection, match: Text.isText, split: true, hanging: true},
+    )
+
+    // The value might have changed after splitting
+    const newValue = fromSlateValue(
+      editor.children,
+      context.schema.block.name,
+      KEY_TO_VALUE_ELEMENT.get(editor),
+    )
+    // We need to find the new selection from the original offsets because the
+    // split operation might have changed the value.
+    const newSelection = utils.blockOffsetsToSelection({
+      value: newValue,
+      offsets: {anchor: anchorOffset, focus: focusOffset},
+      backward: editorSelection?.backward,
+    })
+
+    const trimmedSelection = selectors.getTrimmedSelection({
+      context: {
+        activeDecorators: [],
+        converters: [],
+        keyGenerator: context.keyGenerator,
+        schema: context.schema,
+        selection: newSelection,
+        value: newValue,
+      },
+    })
+
+    if (!trimmedSelection) {
+      throw new Error('Unable to find trimmed selection')
+    }
+
+    const newRange = toSlateRange(trimmedSelection, editor)
+
+    if (!newRange) {
+      throw new Error('Unable to find new selection')
+    }
+
+    // Use new selection to find nodes to decorate
+    const splitTextNodes = Range.isRange(newRange)
+      ? [
+          ...Editor.nodes(editor, {
+            at: newRange,
+            match: (node) => Text.isText(node),
+          }),
+        ]
+      : []
+
+    for (const [node, path] of splitTextNodes) {
+      const marks = [
+        ...(Array.isArray(node.marks) ? node.marks : []).filter(
+          (eMark: string) => eMark !== mark,
+        ),
+        mark,
+      ]
+      Transforms.setNodes(
+        editor,
+        {marks},
+        {at: path, match: Text.isText, split: true, hanging: true},
+      )
+    }
+  } else {
+    const [block, blockPath] = Editor.node(editor, selection, {
+      depth: 1,
+    })
+    const lonelyEmptySpan =
+      editor.isTextBlock(block) &&
+      block.children.length === 1 &&
+      editor.isTextSpan(block.children[0]) &&
+      block.children[0].text === ''
+        ? block.children[0]
+        : undefined
+
+    if (lonelyEmptySpan) {
+      const existingMarks = lonelyEmptySpan.marks ?? []
+      const existingMarksWithoutDecorator = existingMarks.filter(
+        (existingMark) => existingMark !== mark,
+      )
+
+      Transforms.setNodes(
+        editor,
+        {
+          marks:
+            existingMarks.length === existingMarksWithoutDecorator.length
+              ? [...existingMarks, mark]
+              : existingMarksWithoutDecorator,
+        },
+        {
+          at: blockPath,
+          match: (node) => editor.isTextSpan(node),
+        },
+      )
+    } else {
+      const existingMarks: string[] =
+        {
+          ...(Editor.marks(editor) || {}),
+        }.marks || []
+      const marks = {
+        ...(Editor.marks(editor) || {}),
+        marks: [...existingMarks, mark],
+      }
+      editor.marks = marks as Text
+    }
+  }
+
+  if (editor.selection) {
+    // Reselect
+    const selection = editor.selection
+    editor.selection = {...selection}
+  }
+}

package/src/behavior-actions/behavior.action.delete.text.ts

@@ -0,0 +1,54 @@
+import {Transforms} from 'slate'
+import {toSlateRange} from '../internal-utils/ranges'
+import {fromSlateValue} from '../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
+import * as selectors from '../selectors'
+import * as utils from '../utils'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const deleteTextActionImplementation: BehaviorActionImplementation<
+  'delete.text'
+> = ({context, action}) => {
+  const value = fromSlateValue(
+    action.editor.children,
+    context.schema.block.name,
+    KEY_TO_VALUE_ELEMENT.get(action.editor),
+  )
+
+  const selection = utils.blockOffsetsToSelection({
+    value,
+    offsets: {
+      anchor: action.anchor,
+      focus: action.focus,
+    },
+  })
+
+  if (!selection) {
+    throw new Error('Unable to find selection from block offsets')
+  }
+
+  const trimmedSelection = selectors.getTrimmedSelection({
+    context: {
+      converters: [],
+      schema: context.schema,
+      keyGenerator: context.keyGenerator,
+      activeDecorators: [],
+      value,
+      selection,
+    },
+  })
+
+  if (!trimmedSelection) {
+    throw new Error('Unable to find trimmed selection')
+  }
+
+  const range = toSlateRange(trimmedSelection, action.editor)
+
+  if (!range) {
+    throw new Error('Unable to find Slate range from trimmed selection')
+  }
+
+  Transforms.delete(action.editor, {
+    at: range,
+  })
+}

package/src/behavior-actions/behavior.actions.ts

@@ -17,7 +17,6 @@ import {
   toggleAnnotationActionImplementation,
 } from '../editor/plugins/createWithEditableAPI'
 import {
-  addDecoratorActionImplementation,
   removeDecoratorActionImplementation,
   toggleDecoratorActionImplementation,
 } from '../editor/plugins/createWithPortableTextMarkModel'
@@ -27,15 +26,15 @@ import {
 } from '../editor/plugins/createWithUndoRedo'
 import {toSlatePath} from '../internal-utils/paths'
 import {toSlateRange} from '../internal-utils/ranges'
-import {fromSlateValue, toSlateValue} from '../internal-utils/values'
-import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
+import {toSlateValue} from '../internal-utils/values'
 import type {PickFromUnion} from '../type-utils'
-import {blockOffsetToSpanSelectionPoint} from '../utils/util.block-offset'
 import {insertBlock} from './behavior.action-utils.insert-block'
 import {blockSetBehaviorActionImplementation} from './behavior.action.block.set'
 import {blockUnsetBehaviorActionImplementation} from './behavior.action.block.unset'
 import {dataTransferSetActionImplementation} from './behavior.action.data-transfer-set'
+import {decoratorAddActionImplementation} from './behavior.action.decorator.add'
 import {deleteActionImplementation} from './behavior.action.delete'
+import {deleteTextActionImplementation} from './behavior.action.delete.text'
 import {insertBlockObjectActionImplementation} from './behavior.action.insert-block-object'
 import {insertBlocksActionImplementation} from './behavior.action.insert-blocks'
 import {
@@ -88,7 +87,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
     ReactEditor.blur(action.editor)
   },
   'data transfer.set': dataTransferSetActionImplementation,
-  'decorator.add': addDecoratorActionImplementation,
+  'decorator.add': decoratorAddActionImplementation,
   'decorator.remove': removeDecoratorActionImplementation,
   'decorator.toggle': toggleDecoratorActionImplementation,
   'focus': ({action}) => {
@@ -119,44 +118,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       at: range,
     })
   },
-  'delete.text': ({context, action}) => {
-    const value = fromSlateValue(
-      action.editor.children,
-      context.schema.block.name,
-      KEY_TO_VALUE_ELEMENT.get(action.editor),
-    )
-
-    const anchor = blockOffsetToSpanSelectionPoint({
-      value,
-      blockOffset: action.anchor,
-    })
-    const focus = blockOffsetToSpanSelectionPoint({
-      value,
-      blockOffset: action.focus,
-    })
-
-    if (!anchor || !focus) {
-      console.error('Unable to find anchor or focus selection point')
-      return
-    }
-
-    const range = toSlateRange(
-      {
-        anchor,
-        focus,
-      },
-      action.editor,
-    )
-
-    if (!range) {
-      console.error('Unable to find Slate range from selection points')
-      return
-    }
-
-    Transforms.delete(action.editor, {
-      at: range,
-    })
-  },
+  'delete.text': deleteTextActionImplementation,
   'deserialization.failure': ({action}) => {
     console.error(
       `Deserialization of ${action.mimeType} failed with reason ${action.reason}`,

package/src/behaviors/behavior.markdown-emphasis.ts

@@ -0,0 +1,392 @@
+import {useActorRef} from '@xstate/react'
+import {isEqual} from 'lodash'
+import {
+  assign,
+  fromCallback,
+  setup,
+  type AnyEventObject,
+  type CallbackLogicFunction,
+} from 'xstate'
+import type {Editor} from '../editor/create-editor'
+import {useEditor} from '../editor/editor-provider'
+import {
+  getTextToBold,
+  getTextToItalic,
+} from '../internal-utils/get-text-to-emphasize'
+import type {EditorSchema} from '../selectors'
+import * as selectors from '../selectors'
+import * as utils from '../utils'
+import {defineBehavior} from './behavior.types'
+
+/**
+ * @beta
+ */
+export type MarkdownEmphasisBehaviorsConfig = {
+  boldDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
+  italicDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
+}
+
+/**
+ * @beta
+ */
+export function useMarkdownEmphasisBehaviors(props: {
+  config: MarkdownEmphasisBehaviorsConfig
+}) {
+  const editor = useEditor()
+
+  useActorRef(emphasisMachine, {
+    input: {
+      editor,
+      boldDecorator: props.config.boldDecorator?.({
+        schema: editor.getSnapshot().context.schema,
+      }),
+      italicDecorator: props.config.italicDecorator?.({
+        schema: editor.getSnapshot().context.schema,
+      }),
+    },
+  })
+}
+
+type MarkdownEmphasisEvent =
+  | {
+      type: 'emphasis.add'
+      blockOffset: utils.BlockOffset
+    }
+  | {
+      type: 'selection'
+      blockOffsets?: {
+        anchor: utils.BlockOffset
+        focus: utils.BlockOffset
+      }
+    }
+  | {
+      type: 'delete.backward'
+    }
+
+const emphasisListener: CallbackLogicFunction<
+  AnyEventObject,
+  MarkdownEmphasisEvent,
+  {editor: Editor; boldDecorator?: string; italicDecorator?: string}
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'insert.text',
+      guard: ({context, event}) => {
+        const boldDecorator = input.boldDecorator
+        const italicDecorator = input.italicDecorator
+
+        if (boldDecorator === undefined && italicDecorator === undefined) {
+          return false
+        }
+
+        if (event.text !== '*' && event.text !== '_') {
+          return false
+        }
+
+        const focusTextBlock = selectors.getFocusTextBlock({context})
+        const selectionStartPoint = selectors.getSelectionStartPoint({context})
+        const selectionStartOffset = selectionStartPoint
+          ? utils.spanSelectionPointToBlockOffset({
+              value: context.value,
+              selectionPoint: selectionStartPoint,
+            })
+          : undefined
+
+        if (!focusTextBlock || !selectionStartOffset) {
+          return false
+        }
+
+        const textBefore = selectors.getBlockTextBefore({context})
+
+        const textToItalic = getTextToItalic(`${textBefore}${event.text}`)
+
+        if (textToItalic !== undefined && italicDecorator !== undefined) {
+          const prefixOffsets = {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: textBefore.length - textToItalic.length + 1,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: textBefore.length - textToItalic.length + 1 + 1,
+            },
+          }
+          const suffixOffsets = {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: selectionStartOffset.offset,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: selectionStartOffset.offset + 1,
+            },
+          }
+
+          const anchor = utils.blockOffsetToSpanSelectionPoint({
+            value: context.value,
+            blockOffset: prefixOffsets.focus,
+          })
+          const focus = utils.blockOffsetToSpanSelectionPoint({
+            value: context.value,
+            blockOffset: suffixOffsets.anchor,
+          })
+
+          if (!anchor || !focus) {
+            return false
+          }
+
+          return {
+            prefixOffsets,
+            suffixOffsets,
+            decorator: italicDecorator,
+            selection: {anchor, focus},
+          }
+        }
+
+        const textToBold = getTextToBold(`${textBefore}${event.text}`)
+
+        if (textToBold !== undefined && boldDecorator !== undefined) {
+          const prefixOffsets = {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: textBefore.length - textToBold.length + 1,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: textBefore.length - textToBold.length + 1 + 2,
+            },
+          }
+          const suffixOffsets = {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: selectionStartOffset.offset - 1,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: selectionStartOffset.offset + 1,
+            },
+          }
+          const anchor = utils.blockOffsetToSpanSelectionPoint({
+            value: context.value,
+            blockOffset: prefixOffsets.focus,
+          })
+          const focus = utils.blockOffsetToSpanSelectionPoint({
+            value: context.value,
+            blockOffset: suffixOffsets.anchor,
+          })
+
+          if (!anchor || !focus) {
+            return false
+          }
+
+          return {
+            prefixOffsets,
+            suffixOffsets,
+            decorator: boldDecorator,
+            selection: {anchor, focus},
+          }
+        }
+
+        return false
+      },
+      actions: [
+        ({event}) => [event],
+        (_, {prefixOffsets, suffixOffsets, decorator, selection}) => [
+          {
+            type: 'decorator.add',
+            decorator,
+            selection,
+          },
+          {
+            type: 'delete.text',
+            ...suffixOffsets,
+          },
+          {
+            type: 'delete.text',
+            ...prefixOffsets,
+          },
+          {
+            type: 'effect',
+            effect: () => {
+              sendBack({
+                type: 'emphasis.add',
+                blockOffset: {
+                  ...suffixOffsets.anchor,
+                  offset:
+                    suffixOffsets.anchor.offset -
+                    (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
+                },
+              })
+            },
+          },
+        ],
+      ],
+    }),
+  })
+
+  return unregister
+}
+
+const selectionListenerCallback: CallbackLogicFunction<
+  AnyEventObject,
+  MarkdownEmphasisEvent,
+  {editor: Editor}
+> = ({sendBack, input}) => {
+  const unregister = input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'select',
+      guard: ({context, event}) => {
+        if (!event.selection) {
+          return {blockOffsets: undefined}
+        }
+
+        const anchor = utils.spanSelectionPointToBlockOffset({
+          value: context.value,
+          selectionPoint: event.selection.anchor,
+        })
+        const focus = utils.spanSelectionPointToBlockOffset({
+          value: 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 emphasisMachine = setup({
+  types: {
+    context: {} as {
+      boldDecorator?: string
+      italicDecorator?: string
+      offsetAfterEmphasis?: utils.BlockOffset
+      editor: Editor
+    },
+    input: {} as {
+      boldDecorator?: string
+      italicDecorator?: string
+      editor: Editor
+    },
+    events: {} as MarkdownEmphasisEvent,
+  },
+  actors: {
+    'emphasis listener': fromCallback(emphasisListener),
+    'delete.backward listener': fromCallback(deleteBackwardListenerCallback),
+    'selection listener': fromCallback(selectionListenerCallback),
+  },
+}).createMachine({
+  id: 'emphasis',
+  context: ({input}) => ({
+    boldDecorator: input.boldDecorator,
+    italicDecorator: input.italicDecorator,
+    editor: input.editor,
+  }),
+  initial: 'idle',
+  states: {
+    'idle': {
+      invoke: [
+        {
+          src: 'emphasis listener',
+          input: ({context}) => ({
+            editor: context.editor,
+            boldDecorator: context.boldDecorator,
+            italicDecorator: context.italicDecorator,
+          }),
+        },
+      ],
+      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',
+        },
+      },
+    },
+  },
+})