@portabletext/editor 2.11.0 → 2.12.1

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.11.0",
+  "version": "2.12.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -51,6 +51,12 @@
       "require": "./lib/selectors/index.cjs",
       "default": "./lib/selectors/index.js"
     },
+    "./test": {
+      "default": "./src/test/_exports/index.ts"
+    },
+    "./test/vitest": {
+      "default": "./src/test/vitest/_exports/index.ts"
+    },
     "./utils": {
       "source": "./src/utils/_exports/index.ts",
       "import": "./lib/utils/index.js",
@@ -80,9 +86,9 @@
     "slate-react": "0.117.4",
     "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/keyboard-shortcuts": "^1.1.1"
+    "@portabletext/schema": "^1.2.0"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",

package/src/behaviors/behavior.abstract.keyboard.ts

@@ -1,8 +1,28 @@
+import {createKeyboardShortcut} from '@portabletext/keyboard-shortcuts'
+import {isTextBlock} from '@portabletext/schema'
 import {defaultKeyboardShortcuts} from '../keyboard-shortcuts/default-keyboard-shortcuts'
-import * as selectors from '../selectors'
+import {
+  getFocusBlock,
+  getFocusInlineObject,
+  getPreviousBlock,
+  isSelectionCollapsed,
+} from '../selectors'
+import {getBlockEndPoint, isEmptyTextBlock} from '../utils'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
+const shiftLeft = createKeyboardShortcut({
+  default: [
+    {
+      key: 'ArrowLeft',
+      shift: true,
+      meta: false,
+      ctrl: false,
+      alt: false,
+    },
+  ],
+})
+
 export const abstractKeyboardBehaviors = [
   /**
    * Allow raising an `insert.break` event when pressing Enter on an inline
@@ -12,8 +32,8 @@ export const abstractKeyboardBehaviors = [
     on: 'keyboard.keydown',
     guard: ({snapshot, event}) =>
       defaultKeyboardShortcuts.break.guard(event.originEvent) &&
-      selectors.isSelectionCollapsed(snapshot) &&
-      selectors.getFocusInlineObject(snapshot),
+      isSelectionCollapsed(snapshot) &&
+      getFocusInlineObject(snapshot),
     actions: [() => [raise({type: 'insert.break'})]],
   }),
 
@@ -48,4 +68,68 @@ export const abstractKeyboardBehaviors = [
       defaultKeyboardShortcuts.history.redo.guard(event.originEvent),
     actions: [() => [raise({type: 'history.redo'})]],
   }),
+
+  /**
+   * Fix edge case where Shift+ArrowLeft didn't reduce a selection hanging
+   * onto an empty text block.
+   */
+  defineBehavior({
+    on: 'keyboard.keydown',
+    guard: ({snapshot, event}) => {
+      if (!snapshot.context.selection || !shiftLeft.guard(event.originEvent)) {
+        return false
+      }
+
+      const focusBlock = getFocusBlock(snapshot)
+
+      if (!focusBlock) {
+        return false
+      }
+
+      const previousBlock = getPreviousBlock({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: {
+            anchor: {
+              path: focusBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusBlock.path,
+              offset: 0,
+            },
+          },
+        },
+      })
+
+      if (!previousBlock) {
+        return false
+      }
+
+      const hanging =
+        isTextBlock(snapshot.context, focusBlock.node) &&
+        snapshot.context.selection.focus.offset === 0
+
+      if (hanging && isEmptyTextBlock(snapshot.context, focusBlock.node)) {
+        return {previousBlock, selection: snapshot.context.selection}
+      }
+
+      return false
+    },
+    actions: [
+      ({snapshot}, {previousBlock, selection}) => [
+        raise({
+          type: 'select',
+          at: {
+            anchor: selection.anchor,
+            focus: getBlockEndPoint({
+              context: snapshot.context,
+              block: previousBlock,
+            }),
+          },
+        }),
+      ],
+    ],
+  }),
 ]

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.perform-event.ts

@@ -168,6 +168,10 @@ export function performEvent({
     // action prevented
     defaultBehaviorOverwritten = true
 
+    if (eventBehavior.actions.length === 0) {
+      nativeEventPrevented = true
+    }
+
     for (const actionSet of eventBehavior.actions) {
       const actionsSnapshot = getSnapshot()
 

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

@@ -3,9 +3,9 @@ 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 {createTestEditor} from '../test/vitest'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {getFocusSpan} from './slate-utils'
-import {createTestEditor} from './test-editor'
 
 describe(getFocusSpan.name, () => {
   const keyGenerator = createTestKeyGenerator()

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.auto-close-brackets.test.tsx

@@ -1,7 +1,7 @@
 import {getTersePt} from '@portabletext/test'
 import {userEvent} from '@vitest/browser/context'
 import {describe, expect, test, vi} from 'vitest'
-import {createTestEditor} from '../internal-utils/test-editor'
+import {createTestEditor} from '../test/vitest'
 import {AutoCloseBracketsPlugin} from './plugin.internal.auto-close-brackets'
 
 describe(AutoCloseBracketsPlugin.name, () => {

package/src/plugins/plugin.markdown.test.tsx

@@ -2,8 +2,8 @@ import {defineSchema} from '@portabletext/schema'
 import {getTersePt} from '@portabletext/test'
 import {userEvent} from '@vitest/browser/context'
 import {describe, expect, test, vi} from 'vitest'
-import {createTestEditor} from '../internal-utils/test-editor'
 import {getTextMarks} from '../internal-utils/text-marks'
+import {createTestEditor} from '../test/vitest'
 import {MarkdownPlugin} from './plugin.markdown'
 
 describe(MarkdownPlugin.name, () => {

package/src/test/_exports/index.ts

@@ -0,0 +1 @@
+export * from '../index'

package/src/test/gherkin-parameter-types.ts

@@ -0,0 +1,102 @@
+import {parseTersePtString} from '@portabletext/test'
+import {createParameterType, type ParameterType} from 'racejar'
+
+/**
+ * @internal
+ */
+export type Parameter = {
+  [K in keyof typeof parameterType]: (typeof parameterType)[K] extends ParameterType<
+    infer TParameterType
+  >
+    ? TParameterType
+    : never
+}
+
+const parameterType = {
+  annotation: createParameterType<'comment' | 'link'>({
+    name: 'annotation',
+    matcher: /"(comment|link)"/,
+  }),
+  blockObject: createParameterType<'image'>({
+    name: 'block-object',
+    matcher: /"(image)"/,
+  }),
+  button: createParameterType<string>({
+    name: 'button',
+    matcher: /"(([A-Z]|[a-z]|{|}|>|\/|\+)+)"/,
+    type: String,
+  }),
+  decorator: createParameterType<'em' | 'strong'>({
+    name: 'decorator',
+    matcher: /"(em|strong)"/,
+  }),
+  index: createParameterType({
+    name: 'index',
+    matcher: /"(\d)"/,
+    type: Number,
+    transform: (input) => Number.parseInt(input, 10),
+  }),
+  inlineObject: createParameterType<'stock-ticker'>({
+    name: 'inline-object',
+    matcher: /"(stock-ticker)"/,
+  }),
+  key: createParameterType<'key'>({
+    name: 'key',
+    matcher: /"([a-z]\d)"/,
+  }),
+  keyKeys: createParameterType<Array<string>>({
+    name: 'keyKeys',
+    matcher: /"(([a-z]\d)(,([a-z]\d))*)"/,
+    type: Array,
+    transform: (input) => input.split(','),
+  }),
+  marks: createParameterType<Array<string>>({
+    name: 'marks',
+    matcher: /"((strong|em|[a-z]\d)(,(strong|em|[a-z]\d))*)"/,
+    type: Array,
+    transform: (input) => input.split(','),
+  }),
+  placement: createParameterType<'auto' | 'after' | 'before'>({
+    name: 'placement',
+    matcher: /"(auto|after|before)"/,
+  }),
+  selectPosition: createParameterType<'start' | 'end' | 'none'>({
+    name: 'select-position',
+    matcher: /"(start|end|none)"/,
+  }),
+  style: createParameterType({
+    name: 'style',
+    matcher: /"(normal|blockquote|h\d)"/,
+  }),
+  tersePt: createParameterType<Array<string>>({
+    name: 'terse-pt',
+    matcher: /"([a-z-,#>:\\n \d|{}'"‘’“”?]*)"/u,
+    type: Array,
+    transform: parseTersePtString,
+  }),
+  text: createParameterType<string>({
+    name: 'text',
+    matcher: /"([a-z]*)"/u,
+    type: String,
+  }),
+}
+
+/**
+ * @internal
+ */
+export const parameterTypes = [
+  parameterType.annotation,
+  parameterType.blockObject,
+  parameterType.button,
+  parameterType.decorator,
+  parameterType.index,
+  parameterType.inlineObject,
+  parameterType.key,
+  parameterType.keyKeys,
+  parameterType.marks,
+  parameterType.placement,
+  parameterType.selectPosition,
+  parameterType.style,
+  parameterType.tersePt,
+  parameterType.text,
+]

package/src/test/index.ts

@@ -0,0 +1 @@
+export * from './gherkin-parameter-types'

package/src/test/vitest/_exports/index.ts

@@ -0,0 +1 @@
+export * from '../index'

package/src/test/vitest/index.ts

@@ -0,0 +1,3 @@
+export * from './step-context'
+export * from './step-definitions'
+export * from './test-editor'

package/src/test/vitest/step-context.ts

@@ -0,0 +1,11 @@
+import type {Locator} from '@vitest/browser/context'
+import type {Editor} from '../../editor'
+
+/**
+ * @internal
+ */
+export type Context = {
+  editor: Editor
+  locator: Locator
+  keyMap?: Map<string, string>
+}