@portabletext/editor 2.9.1 → 2.9.2

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react22 from "react";
+import * as react12 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react12.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react21 from "react";
+import * as react22 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react21.JSX.Element;
+}): react22.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react21.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,9 +80,9 @@
     "slate-react": "0.117.4",
     "xstate": "^5.21.0",
     "@portabletext/block-tools": "^3.5.5",
+    "@portabletext/schema": "^1.2.0",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/patches": "^1.1.8",
-    "@portabletext/schema": "^1.2.0"
+    "@portabletext/patches": "^1.1.8"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",

package/src/behaviors/behavior.perform-event.ts

@@ -1,7 +1,7 @@
 import {createEditorDom} from '../editor/editor-dom'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
-import {withApplyingBehaviorOperations} from '../editor/with-applying-behavior-operations'
+import {withPerformingBehaviorOperation} from '../editor/with-performing-behavior-operation'
 import {clearUndoStep, createUndoStep} from '../editor/with-undo-step'
 import {debugWithName} from '../internal-utils/debug'
 import {performOperation} from '../operations/behavior.operations'
@@ -112,7 +112,7 @@ export function performEvent({
       clearUndoStep(editor)
     }
 
-    withApplyingBehaviorOperations(editor, () => {
+    withPerformingBehaviorOperation(editor, () => {
       debug(`(execute:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
       performOperation({
@@ -198,6 +198,8 @@ export function performEvent({
           (action) => action.type === 'raise' || action.type === 'execute',
         ) || !actions.some((action) => action.type === 'forward')
 
+      let undoStepCreated = false
+
       if (actions.some((action) => action.type === 'execute')) {
         // Since at least one action is about to `execute` changes in the editor,
         // we set up a new undo step.
@@ -205,78 +207,7 @@ export function performEvent({
         // undo step
         createUndoStep(editor)
 
-        for (const action of actions) {
-          if (action.type === 'effect') {
-            try {
-              action.effect({
-                send: sendBack,
-              })
-            } catch (error) {
-              console.error(
-                new Error(
-                  `Executing effect as a result of "${event.type}" failed due to: ${error.message}`,
-                ),
-              )
-            }
-
-            continue
-          }
-
-          if (action.type === 'forward') {
-            const remainingEventBehaviors = eventBehaviors.slice(
-              eventBehaviorIndex + 1,
-            )
-
-            performEvent({
-              mode: 'forward',
-              behaviors,
-              remainingEventBehaviors: remainingEventBehaviors,
-              event: action.event,
-              editor,
-              keyGenerator,
-              schema,
-              getSnapshot,
-              nativeEvent,
-              sendBack,
-            })
-
-            continue
-          }
-
-          if (action.type === 'raise') {
-            performEvent({
-              mode: 'raise',
-              behaviors,
-              remainingEventBehaviors: behaviors,
-              event: action.event,
-              editor,
-              keyGenerator,
-              schema,
-              getSnapshot,
-              nativeEvent,
-              sendBack,
-            })
-
-            continue
-          }
-
-          performEvent({
-            mode: 'execute',
-            behaviors,
-            remainingEventBehaviors: [],
-            event: action.event,
-            editor,
-            keyGenerator,
-            schema,
-            getSnapshot,
-            nativeEvent: undefined,
-            sendBack,
-          })
-        }
-
-        clearUndoStep(editor)
-
-        continue
+        undoStepCreated = true
       }
 
       for (const action of actions) {
@@ -302,7 +233,7 @@ export function performEvent({
           )
 
           performEvent({
-            mode: 'forward',
+            mode: mode === 'execute' ? 'execute' : 'forward',
             behaviors,
             remainingEventBehaviors: remainingEventBehaviors,
             event: action.event,
@@ -319,7 +250,7 @@ export function performEvent({
 
         if (action.type === 'raise') {
           performEvent({
-            mode: 'raise',
+            mode: mode === 'execute' ? 'execute' : 'raise',
             behaviors,
             remainingEventBehaviors:
               mode === 'execute' ? remainingEventBehaviors : behaviors,
@@ -335,9 +266,22 @@ export function performEvent({
           continue
         }
 
-        if (action.type === 'execute') {
-          console.error('Unexpected action type: `execute`')
-        }
+        performEvent({
+          mode: 'execute',
+          behaviors,
+          remainingEventBehaviors: [],
+          event: action.event,
+          editor,
+          keyGenerator,
+          schema,
+          getSnapshot,
+          nativeEvent: undefined,
+          sendBack,
+        })
+      }
+
+      if (undoStepCreated) {
+        clearUndoStep(editor)
       }
     }
 
@@ -351,7 +295,7 @@ export function performEvent({
       clearUndoStep(editor)
     }
 
-    withApplyingBehaviorOperations(editor, () => {
+    withPerformingBehaviorOperation(editor, () => {
       debug(`(execute:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
       performOperation({

package/src/editor/plugins/create-with-event-listeners.ts

@@ -1,9 +1,8 @@
 import {Editor} from 'slate'
 import {slateRangeToSelection} from '../../internal-utils/slate-utils'
-import {insertTextOperationImplementation} from '../../operations/behavior.operation.insert.text'
 import {performOperation} from '../../operations/behavior.operations'
 import type {EditorActor} from '../editor-machine'
-import {isApplyingBehaviorOperations} from '../with-applying-behavior-operations'
+import {isPerformingBehaviorOperation} from '../with-performing-behavior-operation'
 
 export function createWithEventListeners(editorActor: EditorActor) {
   return function withEventListeners(editor: Editor) {
@@ -14,7 +13,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     const {delete: editorDelete, select} = editor
 
     editor.delete = (options) => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         editorDelete(options)
         return
       }
@@ -54,7 +53,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.deleteBackward = (unit) => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         console.error('Unexpected call to .deleteBackward(...)')
         return
       }
@@ -71,7 +70,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.deleteForward = (unit) => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         console.error('Unexpected call to .deleteForward(...)')
         return
       }
@@ -88,7 +87,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.insertBreak = () => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         console.error('Unexpected call to .insertBreak(...)')
         return
       }
@@ -104,7 +103,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.insertData = (dataTransfer) => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         console.error('Unexpected call to .insertData(...)')
         return
       }
@@ -122,8 +121,8 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.insertSoftBreak = () => {
-      if (isApplyingBehaviorOperations(editor)) {
-        insertTextOperationImplementation({
+      if (isPerformingBehaviorOperation(editor)) {
+        performOperation({
           context: {
             keyGenerator: editorActor.getSnapshot().context.keyGenerator,
             schema: editorActor.getSnapshot().context.schema,
@@ -144,8 +143,8 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.insertText = (text) => {
-      if (isApplyingBehaviorOperations(editor)) {
-        insertTextOperationImplementation({
+      if (isPerformingBehaviorOperation(editor)) {
+        performOperation({
           context: {
             keyGenerator: editorActor.getSnapshot().context.keyGenerator,
             schema: editorActor.getSnapshot().context.schema,
@@ -167,7 +166,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.redo = () => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         performOperation({
           context: {
             keyGenerator: editorActor.getSnapshot().context.keyGenerator,
@@ -192,7 +191,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.select = (location) => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         select(location)
         return
       }
@@ -220,7 +219,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
     }
 
     editor.undo = () => {
-      if (isApplyingBehaviorOperations(editor)) {
+      if (isPerformingBehaviorOperation(editor)) {
         performOperation({
           context: {
             keyGenerator: editorActor.getSnapshot().context.keyGenerator,

package/src/editor/sync-machine.ts

@@ -507,6 +507,10 @@ async function updateValue({
 
                   isChanged = blockChanged || isChanged
                   isValid = isValid && blockValid
+
+                  if (!isValid) {
+                    break
+                  }
                 }
 
                 resolve()
@@ -544,6 +548,11 @@ async function updateValue({
 
               isChanged = blockChanged || isChanged
               isValid = isValid && blockValid
+
+              if (!blockValid) {
+                break
+              }
+
               index++
             }
           })

package/src/editor/with-performing-behavior-operation.ts

@@ -0,0 +1,21 @@
+import type {Editor} from 'slate'
+
+const IS_PERFORMING_OPERATION: WeakMap<Editor, boolean | undefined> =
+  new WeakMap()
+
+export function withPerformingBehaviorOperation(
+  editor: Editor,
+  fn: () => void,
+) {
+  const prev = IS_PERFORMING_OPERATION.get(editor)
+
+  IS_PERFORMING_OPERATION.set(editor, true)
+
+  fn()
+
+  IS_PERFORMING_OPERATION.set(editor, prev)
+}
+
+export function isPerformingBehaviorOperation(editor: Editor) {
+  return IS_PERFORMING_OPERATION.get(editor) ?? false
+}

package/src/internal-utils/slate-utils.test.tsx

@@ -0,0 +1,119 @@
+import {defineSchema} from '@portabletext/schema'
+import {createTestKeyGenerator} from '@portabletext/test'
+import React from 'react'
+import {describe, expect, test} from 'vitest'
+import {InternalSlateEditorRefPlugin} from '../plugins/plugin.internal.slate-editor-ref'
+import type {PortableTextSlateEditor} from '../types/editor'
+import {getFocusSpan} from './slate-utils'
+import {createTestEditor} from './test-editor'
+
+describe(getFocusSpan.name, () => {
+  const keyGenerator = createTestKeyGenerator()
+  const blockKey = keyGenerator()
+  const fooSpanKey = keyGenerator()
+  const stockTickerKey = keyGenerator()
+  const barSpanKey = keyGenerator()
+  const imageKey = keyGenerator()
+  const initialValue = [
+    {
+      _key: blockKey,
+      _type: 'block',
+      children: [
+        {
+          _type: 'span',
+          _key: fooSpanKey,
+          text: 'foo',
+        },
+        {
+          _type: 'stock-ticker',
+          _key: stockTickerKey,
+        },
+        {
+          _type: 'span',
+          _key: barSpanKey,
+          text: 'bar',
+        },
+      ],
+    },
+    {
+      _key: imageKey,
+      _type: 'image',
+    },
+  ]
+  const schemaDefinition = defineSchema({
+    blockObjects: [{name: 'image'}],
+    inlineObjects: [{name: 'stock-ticker'}],
+  })
+
+  test('Scenario: Text block span is selected', async () => {
+    const slateEditorRef = React.createRef<PortableTextSlateEditor>()
+    await createTestEditor({
+      children: <InternalSlateEditorRefPlugin ref={slateEditorRef} />,
+      schemaDefinition,
+      initialValue,
+      editableProps: {
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: fooSpanKey}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: fooSpanKey}],
+            offset: 0,
+          },
+        },
+      },
+    })
+
+    expect(getFocusSpan({editor: slateEditorRef.current!})).toEqual([
+      {_type: 'span', _key: fooSpanKey, text: 'foo', marks: []},
+      [0, 0],
+    ])
+  })
+
+  test('Scenario: Inline object is selected', async () => {
+    const slateEditorRef = React.createRef<PortableTextSlateEditor>()
+    await createTestEditor({
+      children: <InternalSlateEditorRefPlugin ref={slateEditorRef} />,
+      schemaDefinition,
+      initialValue,
+      editableProps: {
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: stockTickerKey}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: stockTickerKey}],
+            offset: 0,
+          },
+        },
+      },
+    })
+
+    expect(getFocusSpan({editor: slateEditorRef.current!})).toEqual([
+      undefined,
+      undefined,
+    ])
+  })
+
+  test('Scenario: Block object is selected', async () => {
+    const slateEditorRef = React.createRef<PortableTextSlateEditor>()
+    await createTestEditor({
+      children: <InternalSlateEditorRefPlugin ref={slateEditorRef} />,
+      schemaDefinition,
+      initialValue,
+      editableProps: {
+        selection: {
+          anchor: {path: [{_key: imageKey}], offset: 0},
+          focus: {path: [{_key: imageKey}], offset: 0},
+        },
+      },
+    })
+
+    expect(getFocusSpan({editor: slateEditorRef.current!})).toEqual([
+      undefined,
+      undefined,
+    ])
+  })
+})

package/src/internal-utils/slate-utils.ts

@@ -79,7 +79,20 @@ export function getFocusSpan({
   }
 
   try {
-    const [node, path] = Editor.node(editor, editor.selection.focus.path)
+    const [focusBlock] = getFocusBlock({editor})
+
+    if (!focusBlock) {
+      return [undefined, undefined]
+    }
+
+    if (!editor.isTextBlock(focusBlock)) {
+      return [undefined, undefined]
+    }
+
+    const [node, path] = Editor.node(
+      editor,
+      editor.selection.focus.path.slice(0, 2),
+    )
 
     if (editor.isTextSpan(node)) {
       return [node, path]

package/src/internal-utils/text-marks.ts

@@ -5,7 +5,7 @@ export function getTextMarks(
   context: Pick<EditorContext, 'schema' | 'value'>,
   text: string,
 ) {
-  let marks: Array<string> | undefined
+  let marks: Array<string> = []
 
   for (const block of context.value) {
     if (isTextBlock(context, block)) {

package/src/internal-utils/values.ts

@@ -1,22 +1,17 @@
 import type {
-  PathSegment,
   PortableTextBlock,
   PortableTextChild,
   PortableTextObject,
   PortableTextTextBlock,
 } from '@sanity/types'
 import {isEqual} from 'lodash'
-import {Element, Text, type Descendant, type Node} from 'slate'
+import {Element, Text, type Descendant} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 
 export const EMPTY_MARKDEFS: PortableTextObject[] = []
 
 export const VOID_CHILD_KEY = 'void-child'
 
-type Partial<T> = {
-  [P in keyof T]?: T[P]
-}
-
 function keepObjectEquality(
   object: PortableTextBlock | PortableTextChild,
   keyMap: Record<string, PortableTextBlock | PortableTextChild>,
@@ -188,52 +183,3 @@ export function isEqualToEmptyEditor(
       children[0].children[0].text === '')
   )
 }
-
-export function findBlockAndIndexFromPath(
-  firstPathSegment: PathSegment,
-  children: (Node | Partial<Node>)[],
-): [Element | undefined, number | undefined] {
-  let blockIndex = -1
-  const isNumber = Number.isInteger(Number(firstPathSegment))
-  if (isNumber) {
-    blockIndex = Number(firstPathSegment)
-  } else if (children) {
-    blockIndex = children.findIndex(
-      (blk) =>
-        Element.isElement(blk) && isEqual({_key: blk._key}, firstPathSegment),
-    )
-  }
-  if (blockIndex > -1) {
-    return [children[blockIndex] as Element, blockIndex]
-  }
-  return [undefined, -1]
-}
-
-export function findChildAndIndexFromPath(
-  secondPathSegment: PathSegment,
-  block: Element,
-): [Element | Text | undefined, number] {
-  let childIndex = -1
-  const isNumber = Number.isInteger(Number(secondPathSegment))
-  if (isNumber) {
-    childIndex = Number(secondPathSegment)
-  } else {
-    childIndex = block.children.findIndex((child) =>
-      isEqual({_key: child._key}, secondPathSegment),
-    )
-  }
-  if (childIndex > -1) {
-    return [block.children[childIndex] as Element | Text, childIndex]
-  }
-  return [undefined, -1]
-}
-
-export function getValueOrInitialValue(
-  value: unknown,
-  initialValue: PortableTextBlock[],
-): PortableTextBlock[] | undefined {
-  if (value && Array.isArray(value) && value.length > 0) {
-    return value
-  }
-  return initialValue
-}

package/src/operations/behavior.operation.block.set.ts

@@ -1,64 +1,45 @@
-import {Editor, Transforms, type Element as SlateElement} from 'slate'
+import {Transforms, type Element as SlateElement} from 'slate'
 import {parseBlock} from '../internal-utils/parse-blocks'
-import {toSlateRange} from '../internal-utils/to-slate-range'
-import {fromSlateValue, toSlateValue} from '../internal-utils/values'
-import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
+import {toSlateValue} from '../internal-utils/values'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const blockSetOperationImplementation: BehaviorOperationImplementation<
   'block.set'
 > = ({context, operation}) => {
-  const location = toSlateRange({
-    context: {
-      schema: context.schema,
-      value: operation.editor.value,
-      selection: {
-        anchor: {path: operation.at, offset: 0},
-        focus: {path: operation.at, offset: 0},
-      },
-    },
-    blockIndexMap: operation.editor.blockIndexMap,
-  })
+  const blockIndex = operation.editor.blockIndexMap.get(operation.at[0]._key)
 
-  if (!location) {
+  if (blockIndex === undefined) {
     throw new Error(
-      `Unable to convert ${JSON.stringify(operation.at)} into a Slate Range`,
+      `Unable to find block index for block at ${JSON.stringify(operation.at)}`,
     )
   }
 
-  const blockEntry = Editor.node(operation.editor, location, {depth: 1})
-  const block = blockEntry?.[0]
+  const block = operation.editor.value.at(blockIndex)
 
   if (!block) {
     throw new Error(`Unable to find block at ${JSON.stringify(operation.at)}`)
   }
 
-  const parsedBlock = fromSlateValue(
-    [block],
-    context.schema.block.name,
-    KEY_TO_VALUE_ELEMENT.get(operation.editor),
-  ).at(0)
+  const {_type, ...filteredProps} = operation.props
 
-  if (!parsedBlock) {
-    throw new Error(`Unable to parse block at ${JSON.stringify(operation.at)}`)
+  const updatedBlock = {
+    ...block,
+    ...filteredProps,
   }
 
-  const {_type, ...filteredProps} = operation.props
-
-  const updatedBlock = parseBlock({
+  const parsedBlock = parseBlock({
     context,
-    block: {
-      ...parsedBlock,
-      ...filteredProps,
-    },
+    block: updatedBlock,
     options: {validateFields: true},
   })
 
-  if (!updatedBlock) {
+  if (!parsedBlock) {
     throw new Error(`Unable to update block at ${JSON.stringify(operation.at)}`)
   }
 
-  const slateBlock = toSlateValue([updatedBlock], {
+  parsedBlock.markDefs = updatedBlock.markDefs
+
+  const slateBlock = toSlateValue([parsedBlock], {
     schemaTypes: context.schema,
   })?.at(0) as SlateElement | undefined
 
@@ -66,5 +47,5 @@ export const blockSetOperationImplementation: BehaviorOperationImplementation<
     throw new Error(`Unable to convert block to Slate value`)
   }
 
-  Transforms.setNodes(operation.editor, slateBlock, {at: location})
+  Transforms.setNodes(operation.editor, slateBlock, {at: [blockIndex]})
 }