@portabletext/editor 1.1.9 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -57,13 +57,13 @@
     "@jest/types": "^29.6.3",
     "@playwright/test": "1.48.2",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.62.2",
+    "@sanity/block-tools": "^3.62.3",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.4",
-    "@sanity/schema": "^3.62.2",
-    "@sanity/types": "^3.62.2",
-    "@sanity/ui": "^2.8.10",
-    "@sanity/util": "^3.62.2",
+    "@sanity/pkg-utils": "^6.11.7",
+    "@sanity/schema": "^3.62.3",
+    "@sanity/types": "^3.62.3",
+    "@sanity/ui": "^2.8.13",
+    "@sanity/util": "^3.62.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -78,7 +78,7 @@
     "@types/react-dom": "^18.3.1",
     "@types/ws": "~8.5.12",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/browser": "^2.1.3",
+    "@vitest/browser": "^2.1.4",
     "@xstate/react": "^4.1.3",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
@@ -96,15 +96,15 @@
     "ts-node": "^10.9.2",
     "typescript": "5.6.3",
     "vite": "^5.4.10",
-    "vitest": "^2.1.3",
+    "vitest": "^2.1.4",
     "vitest-browser-react": "^0.0.3",
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.62.2",
-    "@sanity/schema": "^3.62.2",
-    "@sanity/types": "^3.62.2",
-    "@sanity/util": "^3.62.2",
+    "@sanity/block-tools": "^3.62.3",
+    "@sanity/schema": "^3.62.3",
+    "@sanity/types": "^3.62.3",
+    "@sanity/util": "^3.62.3",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/Editable.tsx

@@ -550,14 +550,6 @@ export const PortableTextEditable = forwardRef<
       if (onBeforeInput) {
         onBeforeInput(event)
       }
-
-      if (!event.defaultPrevented && event.inputType === 'insertText') {
-        editorActor.send({
-          type: 'before insert text',
-          nativeEvent: event,
-          editor: slateEditor,
-        })
-      }
     },
     [onBeforeInput],
   )
@@ -646,11 +638,6 @@ export const PortableTextEditable = forwardRef<
         props.onKeyDown(event)
       }
       if (!event.isDefaultPrevented()) {
-        editorActor.send({
-          type: 'key down',
-          nativeEvent: event.nativeEvent,
-          editor: slateEditor,
-        })
         slateEditor.pteWithHotKeys(event)
       }
     },

package/src/editor/behavior/behavior.action.insert-break.ts

@@ -0,0 +1,206 @@
+import {isEqual} from 'lodash'
+import {Editor, Node, Path, Range, Transforms} from 'slate'
+import type {SlateTextBlock, VoidElement} from '../../types/slate'
+import type {BehaviourActionImplementation} from './behavior.actions'
+import type {BehaviorAction, PickFromUnion} from './behavior.types'
+
+export const insertBreakActionImplementation: BehaviourActionImplementation<
+  PickFromUnion<BehaviorAction, 'type', 'insert break' | 'insert soft break'>
+> = ({context, action}) => {
+  const keyGenerator = context.keyGenerator
+  const schema = context.schema
+  const editor = action.editor
+
+  if (!editor.selection) {
+    return
+  }
+
+  const [focusSpan] = Array.from(
+    Editor.nodes(editor, {
+      mode: 'lowest',
+      at: editor.selection.focus,
+      match: (n) => editor.isTextSpan(n),
+      voids: false,
+    }),
+  )[0] ?? [undefined]
+  const focusDecorators =
+    focusSpan.marks?.filter((mark) =>
+      schema.decorators.some((decorator) => decorator.value === mark),
+    ) ?? []
+  const focusAnnotations =
+    focusSpan.marks?.filter(
+      (mark) =>
+        !schema.decorators.some((decorator) => decorator.value === mark),
+    ) ?? []
+
+  const focusBlockPath = editor.selection.focus.path.slice(0, 1)
+  const focusBlock = Node.descendant(editor, focusBlockPath) as
+    | SlateTextBlock
+    | VoidElement
+
+  if (editor.isTextBlock(focusBlock)) {
+    const [start, end] = Range.edges(editor.selection)
+    const atTheStartOfBlock = isEqual(end, {
+      path: [...focusBlockPath, 0],
+      offset: 0,
+    })
+
+    if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
+      Editor.insertNode(
+        editor,
+        editor.pteCreateTextBlock({
+          decorators: focusAnnotations.length === 0 ? focusDecorators : [],
+          listItem: focusBlock.listItem,
+          level: focusBlock.level,
+        }),
+      )
+
+      const [nextBlockPath] = Path.next(focusBlockPath)
+
+      Transforms.select(editor, {
+        anchor: {path: [nextBlockPath, 0], offset: 0},
+        focus: {path: [nextBlockPath, 0], offset: 0},
+      })
+
+      return
+    }
+
+    const lastFocusBlockChild =
+      focusBlock.children[focusBlock.children.length - 1]
+    const atTheEndOfBlock = isEqual(start, {
+      path: [...focusBlockPath, focusBlock.children.length - 1],
+      offset: editor.isTextSpan(lastFocusBlockChild)
+        ? lastFocusBlockChild.text.length
+        : 0,
+    })
+
+    if (atTheEndOfBlock && Range.isCollapsed(editor.selection)) {
+      Editor.insertNode(
+        editor,
+        editor.pteCreateTextBlock({
+          decorators: [],
+          listItem: focusBlock.listItem,
+          level: focusBlock.level,
+        }),
+      )
+
+      const [nextBlockPath] = Path.next(focusBlockPath)
+
+      Transforms.setSelection(editor, {
+        anchor: {path: [nextBlockPath, 0], offset: 0},
+        focus: {path: [nextBlockPath, 0], offset: 0},
+      })
+
+      return
+    }
+
+    const isInTheMiddleOfNode = !atTheStartOfBlock && !atTheEndOfBlock
+
+    if (isInTheMiddleOfNode) {
+      Editor.withoutNormalizing(editor, () => {
+        if (!editor.selection) {
+          return
+        }
+
+        Transforms.splitNodes(editor, {
+          at: editor.selection,
+        })
+
+        const [nextNode, nextNodePath] = Editor.node(
+          editor,
+          Path.next(focusBlockPath),
+          {depth: 1},
+        )
+
+        Transforms.setSelection(editor, {
+          anchor: {path: [...nextNodePath, 0], offset: 0},
+          focus: {path: [...nextNodePath, 0], offset: 0},
+        })
+
+        /**
+         * Assign new keys to markDefs that are now split across two blocks
+         */
+        if (
+          editor.isTextBlock(nextNode) &&
+          nextNode.markDefs &&
+          nextNode.markDefs.length > 0
+        ) {
+          const newMarkDefKeys = new Map<string, string>()
+
+          const prevNodeSpans = Array.from(
+            Node.children(editor, focusBlockPath),
+          )
+            .map((entry) => entry[0])
+            .filter((node) => editor.isTextSpan(node))
+          const children = Node.children(editor, nextNodePath)
+
+          for (const [child, childPath] of children) {
+            if (!editor.isTextSpan(child)) {
+              continue
+            }
+
+            const marks = child.marks ?? []
+
+            // Go through the marks of the span and figure out if any of
+            // them refer to annotations that are also present in the
+            // previous block
+            for (const mark of marks) {
+              if (
+                schema.decorators.some((decorator) => decorator.value === mark)
+              ) {
+                continue
+              }
+
+              if (
+                prevNodeSpans.some((prevNodeSpan) =>
+                  prevNodeSpan.marks?.includes(mark),
+                ) &&
+                !newMarkDefKeys.has(mark)
+              ) {
+                // This annotation is both present in the previous block
+                // and this block, so let's assign a new key to it
+                newMarkDefKeys.set(mark, keyGenerator())
+              }
+            }
+
+            const newMarks = marks.map(
+              (mark) => newMarkDefKeys.get(mark) ?? mark,
+            )
+
+            // No need to update the marks if they are the same
+            if (!isEqual(marks, newMarks)) {
+              Transforms.setNodes(
+                editor,
+                {marks: newMarks},
+                {
+                  at: childPath,
+                },
+              )
+            }
+          }
+
+          // Time to update all the markDefs that need a new key because
+          // they've been split across blocks
+          const newMarkDefs = nextNode.markDefs.map((markDef) => ({
+            ...markDef,
+            _key: newMarkDefKeys.get(markDef._key) ?? markDef._key,
+          }))
+
+          // No need to update the markDefs if they are the same
+          if (!isEqual(nextNode.markDefs, newMarkDefs)) {
+            Transforms.setNodes(
+              editor,
+              {markDefs: newMarkDefs},
+              {
+                at: nextNodePath,
+                match: (node) => editor.isTextBlock(node),
+              },
+            )
+          }
+        }
+      })
+      editor.onChange()
+      return
+    }
+  }
+}

package/src/editor/behavior/behavior.actions.ts

@@ -1,19 +1,26 @@
-import {Editor, Transforms} from 'slate'
+import {deleteBackward, Editor, insertText, Transforms} from 'slate'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {toSlateRange} from '../../utils/ranges'
-import type {BehaviorAction, PickFromUnion} from './behavior.types'
+import {insertBreakActionImplementation} from './behavior.action.insert-break'
+import type {
+  BehaviorAction,
+  BehaviorEvent,
+  PickFromUnion,
+} from './behavior.types'
 
-type BehaviorActionContext = {
+export type BehaviorActionContext = {
   keyGenerator: () => string
   schema: PortableTextMemberSchemaTypes
 }
 
-type BehaviourActionImplementation<TBehaviorAction extends BehaviorAction> = ({
+export type BehaviourActionImplementation<
+  TBehaviorAction extends BehaviorAction,
+> = ({
   context,
-  event,
+  action,
 }: {
   context: BehaviorActionContext
-  event: TBehaviorAction
+  action: TBehaviorAction
 }) => void
 
 type BehaviourActionImplementations = {
@@ -23,26 +30,51 @@ type BehaviourActionImplementations = {
 }
 
 export const behaviorActionImplementations: BehaviourActionImplementations = {
-  'apply block style': ({event}) => {
-    for (const path of event.paths) {
+  'set block': ({action}) => {
+    for (const path of action.paths) {
       const at = toSlateRange(
         {anchor: {path, offset: 0}, focus: {path, offset: 0}},
-        event.editor,
+        action.editor,
       )!
 
-      Transforms.setNodes(event.editor, {style: event.style}, {at})
+      Transforms.setNodes(
+        action.editor,
+        {
+          ...(action.style ? {style: action.style} : {}),
+          ...(action.listItem ? {listItem: action.listItem} : {}),
+          ...(action.level ? {level: action.level} : {}),
+        },
+        {at},
+      )
+    }
+  },
+  'unset block': ({action}) => {
+    for (const path of action.paths) {
+      const at = toSlateRange(
+        {anchor: {path, offset: 0}, focus: {path, offset: 0}},
+        action.editor,
+      )!
+
+      Transforms.unsetNodes(action.editor, action.props, {at})
     }
   },
-  'delete text': ({event}) => {
-    Transforms.delete(event.editor, {
-      at: toSlateRange(event.selection, event.editor)!,
+  'delete backward': ({action}) => {
+    deleteBackward(action.editor, action.unit)
+  },
+  'delete text': ({action}) => {
+    Transforms.delete(action.editor, {
+      at: toSlateRange(action.selection, action.editor)!,
     })
   },
-  'insert text': ({event}) => {
-    Editor.insertText(event.editor, event.text)
+  'insert break': insertBreakActionImplementation,
+  // This mimics Slate's internal which also just does a regular insert break
+  // when on soft break
+  'insert soft break': insertBreakActionImplementation,
+  'insert text': ({action}) => {
+    insertText(action.editor, action.text)
   },
-  'insert text block': ({context, event}) => {
-    Editor.insertNode(event.editor, {
+  'insert text block': ({context, action}) => {
+    Editor.insertNode(action.editor, {
       _key: context.keyGenerator(),
       _type: context.schema.block.name,
       style: context.schema.styles[0].value ?? 'normal',
@@ -56,4 +88,46 @@ export const behaviorActionImplementations: BehaviourActionImplementations = {
       ],
     })
   },
+  'effect': ({action}) => {
+    action.effect()
+  },
+}
+
+export function performDefaultAction({
+  context,
+  action,
+}: {
+  context: BehaviorActionContext
+  action: PickFromUnion<BehaviorAction, 'type', BehaviorEvent['type']>
+}) {
+  switch (action.type) {
+    case 'delete backward': {
+      behaviorActionImplementations['delete backward']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert break': {
+      behaviorActionImplementations['insert break']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert soft break': {
+      behaviorActionImplementations['insert soft break']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'insert text': {
+      behaviorActionImplementations['insert text']({
+        context,
+        action,
+      })
+      break
+    }
+  }
 }

package/src/editor/behavior/behavior.core.ts

@@ -1,37 +1,19 @@
-import {isHotkey} from 'is-hotkey-esm'
 import {defineBehavior} from './behavior.types'
 import {getFocusBlockObject} from './behavior.utils'
 
-const overwriteSoftReturn = defineBehavior({
-  on: 'key down',
-  guard: ({event}) => isHotkey('shift+enter', event.nativeEvent),
-  actions: [
-    ({event}) => {
-      event.nativeEvent.preventDefault()
-      return {type: 'insert text', text: '\n'}
-    },
-  ],
+const softReturn = defineBehavior({
+  on: 'insert soft break',
+  actions: [() => [{type: 'insert text', text: '\n'}]],
 })
 
-const enterOnVoidBlock = defineBehavior({
-  on: 'key down',
-  guard: ({context, event}) => {
-    const isEnter = isHotkey('enter', event.nativeEvent)
-
-    if (!isEnter) {
-      return false
-    }
-
+const breakingVoidBlock = defineBehavior({
+  on: 'insert break',
+  guard: ({context}) => {
     const focusBlockObject = getFocusBlockObject(context)
 
     return !!focusBlockObject
   },
-  actions: [
-    ({event}) => {
-      event.nativeEvent.preventDefault()
-      return {type: 'insert text block', decorators: []}
-    },
-  ],
+  actions: [() => [{type: 'insert text block', decorators: []}]],
 })
 
-export const coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock]
+export const coreBehaviors = [softReturn, breakingVoidBlock]

package/src/editor/behavior/behavior.types.ts

@@ -1,4 +1,6 @@
 import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {TextUnit} from 'slate'
+import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
 import type {
   EditorSelection,
   PortableTextMemberSchemaTypes,
@@ -19,14 +21,19 @@ export type BehaviorContext = {
  */
 export type BehaviorEvent =
   | {
-      type: 'key down'
-      nativeEvent: KeyboardEvent
-      editor: PortableTextSlateEditor
+      type: 'delete backward'
+      unit: TextUnit
     }
   | {
-      type: 'before insert text'
-      nativeEvent: InputEvent
-      editor: PortableTextSlateEditor
+      type: 'insert soft break'
+    }
+  | {
+      type: 'insert break'
+    }
+  | {
+      type: 'insert text'
+      text: string
+      options?: TextInsertTextOptions
     }
 
 /**
@@ -47,23 +54,31 @@ export type BehaviorGuard<
  * @alpha
  */
 export type BehaviorActionIntend =
-  | {
-      type: 'insert text'
-      text: string
-    }
+  | BehaviorEvent
   | {
       type: 'insert text block'
       decorators: Array<string>
     }
   | {
-      type: 'apply block style'
+      type: 'set block'
       paths: Array<[KeyedSegment]>
-      style: string
+      style?: string
+      listItem?: string
+      level?: number
+    }
+  | {
+      type: 'unset block'
+      paths: Array<[KeyedSegment]>
+      props: Array<'style' | 'listItem' | 'level'>
     }
   | {
       type: 'delete text'
       selection: NonNullable<EditorSelection>
     }
+  | {
+      type: 'effect'
+      effect: () => void
+    }
 
 /**
  * @alpha
@@ -79,18 +94,29 @@ export type Behavior<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
   TGuardResponse = true,
 > = {
+  /**
+   * The internal editor event that triggers this behavior.
+   */
   on: TBehaviorEventType
+  /**
+   * Predicate function that determines if the behavior should be executed.
+   * Returning a non-nullable value from the guard will pass the value to the
+   * actions and execute them.
+   */
   guard?: BehaviorGuard<
     PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
     TGuardResponse
   >
-  actions: Array<RaiseBehaviorActionIntend<TBehaviorEventType, TGuardResponse>>
+  /**
+   * Array of behavior action sets.
+   */
+  actions: Array<BehaviorActionIntendSet<TBehaviorEventType, TGuardResponse>>
 }
 
 /**
  * @alpha
  */
-export type RaiseBehaviorActionIntend<
+export type BehaviorActionIntendSet<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
   TGuardResponse = true,
 > = (
@@ -102,7 +128,7 @@ export type RaiseBehaviorActionIntend<
     event: PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   },
   guardResponse: TGuardResponse,
-) => BehaviorActionIntend | void
+) => Array<BehaviorActionIntend>
 
 /**
  * @alpha