@portabletext/editor 2.10.0 → 2.12.0

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react12 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;
-}): react12.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(): react12.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types8 from "@sanity/types";
+import * as _sanity_types9 from "@sanity/types";
 import { KeyedSegment, PortableTextBlock, PortableTextTextBlock } from "@sanity/types";
 import { isSpan, isTextBlock } from "@portabletext/schema";
 /**
@@ -143,7 +143,7 @@ declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>;
   targetBlock: PortableTextTextBlock;
   incomingBlock: PortableTextTextBlock;
-}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -81,8 +81,8 @@
     "xstate": "^5.21.0",
     "@portabletext/block-tools": "^3.5.6",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/patches": "^1.1.8",
-    "@portabletext/schema": "^1.2.0"
+    "@portabletext/schema": "^1.2.0",
+    "@portabletext/patches": "^1.1.8"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",

package/src/behaviors/behavior.core.insert.ts

@@ -0,0 +1,52 @@
+import {getActiveAnnotationsMarks} from '../selectors/selector.get-active-annotation-marks'
+import {getActiveDecorators} from '../selectors/selector.get-active-decorators'
+import {getFocusSpan} from '../selectors/selector.get-focus-span'
+import {getMarkState} from '../selectors/selector.get-mark-state'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const coreInsertBehaviors = [
+  defineBehavior({
+    on: 'insert.text',
+    guard: ({snapshot}) => {
+      const focusSpan = getFocusSpan(snapshot)
+
+      if (!focusSpan) {
+        return false
+      }
+
+      const markState = getMarkState(snapshot)
+      const activeDecorators = getActiveDecorators(snapshot)
+      const activeAnnotations = getActiveAnnotationsMarks(snapshot)
+
+      if (markState && markState.state === 'unchanged') {
+        const markStateDecorators = (markState.marks ?? []).filter((mark) =>
+          snapshot.context.schema.decorators
+            .map((decorator) => decorator.name)
+            .includes(mark),
+        )
+
+        if (
+          markStateDecorators.length === activeDecorators.length &&
+          markStateDecorators.every((mark) => activeDecorators.includes(mark))
+        ) {
+          return false
+        }
+      }
+
+      return {activeDecorators, activeAnnotations}
+    },
+    actions: [
+      ({snapshot, event}, {activeDecorators, activeAnnotations}) => [
+        raise({
+          type: 'insert.child',
+          child: {
+            _type: snapshot.context.schema.span.name,
+            text: event.text,
+            marks: [...activeDecorators, ...activeAnnotations],
+          },
+        }),
+      ],
+    ],
+  }),
+]

package/src/behaviors/behavior.core.ts

@@ -3,6 +3,7 @@ import {coreAnnotationBehaviors} from './behavior.core.annotations'
 import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
 import {coreDecoratorBehaviors} from './behavior.core.decorators'
 import {coreDndBehaviors} from './behavior.core.dnd'
+import {coreInsertBehaviors} from './behavior.core.insert'
 import {coreInsertBreakBehaviors} from './behavior.core.insert-break'
 import {coreListBehaviors} from './behavior.core.lists'
 
@@ -20,6 +21,7 @@ export const coreBehaviorsConfig = [
   coreBlockObjectBehaviors.breakingBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockAfterBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject,
+  ...coreInsertBehaviors,
   coreListBehaviors.clearListOnBackspace,
   coreListBehaviors.unindentListOnBackspace,
   coreListBehaviors.mergeTextIntoListOnDelete,

package/src/behaviors/behavior.types.event.ts

@@ -55,8 +55,7 @@ export type ExternalBehaviorEvent =
         value?: {[prop: string]: unknown}
       }
     }
-  | SyntheticBehaviorEvent
-  | CustomBehaviorEvent
+  | BehaviorEvent
 
 /**************************************
  * Synthetic events

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

@@ -6,18 +6,13 @@ import React from 'react'
 import {expect, vi} from 'vitest'
 import {render} from 'vitest-browser-react'
 import type {Context} from '../../gherkin-tests-v2/step-context'
-import type {NativeBehaviorEvent} from '../behaviors'
 import type {Editor} from '../editor'
 import {
   PortableTextEditable,
   type PortableTextEditableProps,
 } from '../editor/Editable'
-import type {EditorActor} from '../editor/editor-machine'
 import {EditorProvider} from '../editor/editor-provider'
 import {EditorRefPlugin} from '../plugins/plugin.editor-ref'
-import {InternalEditorAfterRefPlugin} from '../plugins/plugin.internal.editor-actor-ref'
-import {InternalSlateEditorRefPlugin} from '../plugins/plugin.internal.slate-editor-ref'
-import type {PortableTextSlateEditor} from '../types/editor'
 
 type CreateTestEditorOptions = {
   initialValue?: Array<PortableTextBlock>
@@ -35,8 +30,6 @@ export async function createTestEditor(
   }
 > {
   const editorRef = React.createRef<Editor>()
-  const editorActorRef = React.createRef<EditorActor>()
-  const slateRef = React.createRef<PortableTextSlateEditor>()
   const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
 
   const renderResult = render(
@@ -48,8 +41,6 @@ export async function createTestEditor(
       }}
     >
       <EditorRefPlugin ref={editorRef} />
-      <InternalEditorAfterRefPlugin ref={editorActorRef} />
-      <InternalSlateEditorRefPlugin ref={slateRef} />
       <PortableTextEditable {...options.editableProps} />
       {options.children}
     </EditorProvider>,
@@ -66,8 +57,6 @@ export async function createTestEditor(
             }}
           >
             <EditorRefPlugin ref={editorRef} />
-            <InternalEditorAfterRefPlugin ref={editorActorRef} />
-            <InternalSlateEditorRefPlugin ref={slateRef} />
             <PortableTextEditable {...newOptions.editableProps} />
             {newOptions.children}
           </EditorProvider>,
@@ -81,8 +70,6 @@ export async function createTestEditor(
             }}
           >
             <EditorRefPlugin ref={editorRef} />
-            <InternalEditorAfterRefPlugin ref={editorActorRef} />
-            <InternalSlateEditorRefPlugin ref={slateRef} />
             <PortableTextEditable {...options.editableProps} />
             {options.children}
           </EditorProvider>,
@@ -93,19 +80,8 @@ export async function createTestEditor(
 
   await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
 
-  function sendNativeEvent(event: NativeBehaviorEvent) {
-    editorActorRef.current?.send({
-      type: 'behavior event',
-      behaviorEvent: event,
-      editor: slateRef.current!,
-    })
-  }
-
   return {
-    editor: {
-      ...editorRef.current!,
-      sendNativeEvent,
-    },
+    editor: editorRef.current!,
     locator,
     rerender,
   }

package/src/operations/behavior.operation.insert.child.ts

@@ -1,5 +1,6 @@
 import {isTextBlock} from '@portabletext/schema'
 import {Transforms} from 'slate'
+import {EDITOR_TO_PENDING_SELECTION} from 'slate-dom'
 import {parseInlineObject, parseSpan} from '../internal-utils/parse-blocks'
 import {getFocusBlock, getFocusSpan} from '../internal-utils/slate-utils'
 import {VOID_CHILD_KEY} from '../internal-utils/values'
@@ -54,6 +55,13 @@ export const insertChildOperationImplementation: BehaviorOperationImplementation
       })
     }
 
+    // This makes sure the selection is set correctly when event handling is run
+    // through Slate's Android input handling
+    EDITOR_TO_PENDING_SELECTION.set(
+      operation.editor,
+      operation.editor.selection,
+    )
+
     return
   }
 

package/src/operations/behavior.operation.insert.text.ts

@@ -1,76 +1,8 @@
 import {Transforms} from 'slate'
-import {EDITOR_TO_PENDING_SELECTION} from 'slate-dom'
-import type {EditorSnapshot} from '../editor/editor-snapshot'
-import {
-  getFocusSpan,
-  slateRangeToSelection,
-} from '../internal-utils/slate-utils'
-import {getActiveAnnotationsMarks} from '../selectors/selector.get-active-annotation-marks'
-import {getActiveDecorators} from '../selectors/selector.get-active-decorators'
-import {getMarkState} from '../selectors/selector.get-mark-state'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const insertTextOperationImplementation: BehaviorOperationImplementation<
   'insert.text'
-> = ({context, operation}) => {
-  const snapshot: EditorSnapshot = {
-    blockIndexMap: operation.editor.blockIndexMap,
-    context: {
-      value: operation.editor.value,
-      selection: operation.editor.selection
-        ? slateRangeToSelection({
-            schema: context.schema,
-            editor: operation.editor,
-            range: operation.editor.selection,
-          })
-        : null,
-      schema: context.schema,
-      keyGenerator: context.keyGenerator,
-      converters: [],
-      readOnly: false,
-    },
-    decoratorState: operation.editor.decoratorState,
-  }
-
-  const markState = getMarkState(snapshot)
-  const activeDecorators = getActiveDecorators(snapshot)
-  const activeAnnotations = getActiveAnnotationsMarks(snapshot)
-
-  const [focusSpan] = getFocusSpan({
-    editor: operation.editor,
-  })
-
-  if (!focusSpan) {
-    Transforms.insertText(operation.editor, operation.text)
-    return
-  }
-
-  if (markState && markState.state === 'unchanged') {
-    const markStateDecorators = (markState.marks ?? []).filter((mark) =>
-      context.schema.decorators
-        .map((decorator) => decorator.name)
-        .includes(mark),
-    )
-
-    if (
-      markStateDecorators.length === activeDecorators.length &&
-      markStateDecorators.every((mark) => activeDecorators.includes(mark))
-    ) {
-      Transforms.insertText(operation.editor, operation.text)
-      return
-    }
-  }
-
-  Transforms.insertNodes(operation.editor, {
-    _type: focusSpan._type,
-    _key: context.keyGenerator(),
-    text: operation.text,
-    marks: [...activeDecorators, ...activeAnnotations],
-  })
-
-  // This makes sure the selection is set correctly when event handling is run
-  // through Slate's Android input handling
-  EDITOR_TO_PENDING_SELECTION.set(operation.editor, operation.editor.selection)
-
-  operation.editor.decoratorState = {}
+> = ({operation}) => {
+  Transforms.insertText(operation.editor, operation.text)
 }

package/src/plugins/plugin.internal.editor-actor-ref.tsx

@@ -1,15 +0,0 @@
-import React, {useContext} from 'react'
-import {EditorActorContext} from '../editor/editor-actor-context'
-import type {EditorActor} from '../editor/editor-machine'
-
-export const InternalEditorAfterRefPlugin =
-  React.forwardRef<EditorActor | null>((_, ref) => {
-    const editorActor = useContext(EditorActorContext)
-
-    const editorActorRef = React.useRef(editorActor)
-
-    React.useImperativeHandle(ref, () => editorActorRef.current, [])
-
-    return null
-  })
-InternalEditorAfterRefPlugin.displayName = 'InternalEditorAfterRefPlugin'