@portabletext/editor 1.31.2 → 1.33.0

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,21 +17,24 @@ import {
   toggleAnnotationActionImplementation,
 } from '../editor/plugins/createWithEditableAPI'
 import {
-  addDecoratorActionImplementation,
   removeDecoratorActionImplementation,
   toggleDecoratorActionImplementation,
 } from '../editor/plugins/createWithPortableTextMarkModel'
+import {
+  historyRedoActionImplementation,
+  historyUndoActionImplementation,
+} 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 {
@@ -84,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}) => {
@@ -115,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}`,
@@ -168,6 +134,8 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       },
     })
   },
+  'history.redo': historyRedoActionImplementation,
+  'history.undo': historyUndoActionImplementation,
   'insert.block': insertBlockActionImplementation,
   'insert.blocks': insertBlocksActionImplementation,
   'insert.block object': insertBlockObjectActionImplementation,
@@ -470,6 +438,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'history.redo': {
+      behaviorActionImplementations['history.redo']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'history.undo': {
+      behaviorActionImplementations['history.undo']({
+        context,
+        action,
+      })
+      break
+    }
     case 'insert.block': {
       behaviorActionImplementations['insert.block']({
         context,

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

@@ -0,0 +1,395 @@
+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 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,
+      }),
+    },
+  })
+}
+
+const italicRegex =
+  /(?<!\*)\*(?!\s)([^*\n]+?)(?<!\s)\*(?!\*)|(?<!_)_(?!\s)([^_\n]+?)(?<!\s)_(?!_)$/
+const boldRegex =
+  /(?<!\*)\*\*(?!\s)([^*\n]+?)(?<!\s)\*\*(?!\*)|(?<!_)__(?!\s)([^_\n]+?)(?<!\s)__(?!_)$/
+
+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 = `${textBefore}${event.text}`
+          .match(italicRegex)
+          ?.at(0)
+
+        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 = `${textBefore}${event.text}`.match(boldRegex)?.at(0)
+
+        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',
+        },
+      },
+    },
+  },
+})

package/src/behaviors/behavior.markdown.ts

@@ -86,6 +86,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const blockOffset = spanSelectionPointToBlockOffset({
         value: context.value,
         selectionPoint: {
@@ -98,7 +99,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
       })
 
-      if (!blockOffset) {
+      if (previousInlineObject || !blockOffset) {
         return false
       }
 
@@ -173,6 +174,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const textBefore = getBlockTextBefore({context})
       const hrBlockOffsets = {
         anchor: {
@@ -185,7 +187,10 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
       }
 
-      if (textBefore === `${hrCharacter}${hrCharacter}`) {
+      if (
+        !previousInlineObject &&
+        textBefore === `${hrCharacter}${hrCharacter}`
+      ) {
         return {hrObject, focusBlock, hrCharacter, hrBlockOffsets}
       }
 
@@ -290,6 +295,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const blockText = getTextBlockText(focusTextBlock.node)
       const markdownHeadingSearch = /^#+/.exec(blockText)
       const level = markdownHeadingSearch
@@ -297,7 +303,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         : undefined
       const caretAtTheEndOfHeading = blockOffset.offset === level
 
-      if (!caretAtTheEndOfHeading) {
+      if (previousInlineObject || !caretAtTheEndOfHeading) {
         return false
       }
 
@@ -397,6 +403,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const previousInlineObject = selectors.getPreviousInlineObject({context})
       const blockOffset = spanSelectionPointToBlockOffset({
         value: context.value,
         selectionPoint: {
@@ -409,7 +416,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
       })
 
-      if (!blockOffset) {
+      if (previousInlineObject || !blockOffset) {
         return false
       }
 

package/src/behaviors/behavior.types.ts

@@ -57,6 +57,7 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'decorator.add'
       decorator: string
+      selection?: NonNullable<EditorSelection>
     }
   | {
       type: 'decorator.remove'
@@ -90,6 +91,12 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'focus'
     }
+  | {
+      type: 'history.redo'
+    }
+  | {
+      type: 'history.undo'
+    }
   | {
       type: 'insert.blocks'
       blocks: Array<PortableTextBlock>