@portabletext/editor 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -51,19 +51,19 @@
     "xstate": "^5.18.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@playwright/test": "1.48.1",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.61.0",
+    "@sanity/block-tools": "^3.62.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.2",
-    "@sanity/schema": "^3.61.0",
-    "@sanity/types": "^3.61.0",
-    "@sanity/ui": "^2.8.9",
-    "@sanity/util": "^3.61.0",
+    "@sanity/pkg-utils": "^6.11.4",
+    "@sanity/schema": "^3.62.1",
+    "@sanity/types": "^3.62.1",
+    "@sanity/ui": "^2.8.10",
+    "@sanity/util": "^3.62.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -71,17 +71,17 @@
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.5",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.12",
     "@types/node": "^18.19.8",
     "@types/node-ipc": "^9.2.3",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/ws": "~8.5.12",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.3",
     "@xstate/react": "^4.1.3",
     "dotenv": "^16.4.5",
-    "express": "^4.19.2",
+    "express": "^4.21.1",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
     "jest-dev-server": "^10.1.1",
@@ -95,16 +95,16 @@
     "styled-components": "^6.1.13",
     "ts-node": "^10.9.2",
     "typescript": "5.6.3",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "vitest": "^2.1.3",
-    "vitest-browser-react": "^0.0.1",
+    "vitest-browser-react": "^0.0.3",
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.61.0",
-    "@sanity/schema": "^3.61.0",
-    "@sanity/types": "^3.61.0",
-    "@sanity/util": "^3.61.0",
+    "@sanity/block-tools": "^3.62.1",
+    "@sanity/schema": "^3.62.1",
+    "@sanity/types": "^3.62.1",
+    "@sanity/util": "^3.62.1",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/Editable.tsx

@@ -634,6 +634,11 @@ 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/PortableTextEditor.tsx

@@ -24,6 +24,7 @@ import type {
 import {debugWithName} from '../utils/debug'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
+import {coreBehaviors} from './behavior/behavior.core'
 import {SlateContainer} from './components/SlateContainer'
 import {Synchronizer} from './components/Synchronizer'
 import {editorMachine, type EditorActor} from './editor-machine'
@@ -122,18 +123,20 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
       )
     }
 
+    this.schemaTypes = getPortableTextMemberSchemaTypes(
+      props.schemaType.hasOwnProperty('jsonType')
+        ? props.schemaType
+        : compileType(props.schemaType),
+    )
+
     this.editorActor = createActor(editorMachine, {
       input: {
+        behaviors: coreBehaviors,
         keyGenerator: props.keyGenerator || defaultKeyGenerator,
+        schema: this.schemaTypes,
       },
     })
     this.editorActor.start()
-
-    this.schemaTypes = getPortableTextMemberSchemaTypes(
-      props.schemaType.hasOwnProperty('jsonType')
-        ? props.schemaType
-        : compileType(props.schemaType),
-    )
   }
 
   componentDidUpdate(prevProps: PortableTextEditorProps) {
@@ -144,7 +147,13 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
           ? this.props.schemaType
           : compileType(this.props.schemaType),
       )
+
+      this.editorActor.send({
+        type: 'update schema',
+        schema: this.schemaTypes,
+      })
     }
+
     if (this.props.editorRef !== prevProps.editorRef && this.props.editorRef) {
       this.props.editorRef.current = this
     }

package/src/editor/__tests__/self-solving.test.tsx

@@ -4,7 +4,7 @@ import type {PortableTextBlock, PortableTextSpan} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ComponentProps, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
-import {getTextSelection} from '../../../gherkin-spec/gherkin-step-helpers'
+import {getTextSelection} from '../../../gherkin-tests/gherkin-step-helpers'
 import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
 

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

@@ -0,0 +1,39 @@
+import {Editor} from 'slate'
+import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+import type {BehaviorAction, PickFromUnion} from './behavior.types'
+
+type BehaviorActionContext = {
+  keyGenerator: () => string
+  schema: PortableTextMemberSchemaTypes
+}
+
+export function inserText({
+  event,
+}: {
+  context: BehaviorActionContext
+  event: PickFromUnion<BehaviorAction, 'type', 'insert text'>
+}) {
+  Editor.insertText(event.editor, event.text)
+}
+
+export function inserTextBlock({
+  context,
+  event,
+}: {
+  context: BehaviorActionContext
+  event: PickFromUnion<BehaviorAction, 'type', 'insert text block'>
+}) {
+  Editor.insertNode(event.editor, {
+    _key: context.keyGenerator(),
+    _type: context.schema.block.name,
+    style: context.schema.styles[0].value ?? 'normal',
+    markDefs: [],
+    children: [
+      {
+        _key: context.keyGenerator(),
+        _type: 'span',
+        text: '',
+      },
+    ],
+  })
+}

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

@@ -0,0 +1,37 @@
+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 enterOnVoidBlock = defineBehavior({
+  on: 'key down',
+  guard: ({context, event}) => {
+    const isEnter = isHotkey('enter', event.nativeEvent)
+
+    if (!isEnter) {
+      return false
+    }
+
+    const focusBlockObject = getFocusBlockObject(context)
+
+    return !!focusBlockObject
+  },
+  actions: [
+    ({event}) => {
+      event.nativeEvent.preventDefault()
+      return {type: 'insert text block', decorators: []}
+    },
+  ],
+})
+
+export const coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock]

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

@@ -0,0 +1,106 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {
+  EditorSelection,
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
+} from '../../types/editor'
+
+/**
+ * @alpha
+ */
+export type BehaviorContext = {
+  schema: PortableTextMemberSchemaTypes
+  value: Array<PortableTextBlock>
+  selection: NonNullable<EditorSelection>
+}
+
+/**
+ * @alpha
+ */
+export type BehaviorEvent = {
+  type: 'key down'
+  nativeEvent: KeyboardEvent
+  editor: PortableTextSlateEditor
+}
+
+/**
+ * @alpha
+ */
+export type BehaviorGuard<
+  TBehaviorEvent extends BehaviorEvent,
+  TGuardResponse,
+> = ({
+  context,
+  event,
+}: {
+  event: TBehaviorEvent
+  context: BehaviorContext
+}) => TGuardResponse | false
+
+/**
+ * @alpha
+ */
+export type BehaviorActionIntend =
+  | {
+      type: 'insert text'
+      text: string
+    }
+  | {
+      type: 'insert text block'
+      decorators: Array<string>
+    }
+
+/**
+ * @alpha
+ */
+export type BehaviorAction = BehaviorActionIntend & {
+  editor: PortableTextSlateEditor
+}
+
+/**
+ * @alpha
+ */
+export type Behavior<
+  TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
+  TGuardResponse = true,
+> = {
+  on: TBehaviorEventType
+  guard?: BehaviorGuard<
+    PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+    TGuardResponse
+  >
+  actions: Array<RaiseBehaviorActionIntend<TBehaviorEventType, TGuardResponse>>
+}
+
+/**
+ * @alpha
+ */
+export type RaiseBehaviorActionIntend<
+  TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
+  TGuardResponse = true,
+> = (
+  {
+    context,
+    event,
+  }: {
+    context: BehaviorContext
+    event: PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
+  },
+  guardResponse: TGuardResponse,
+) => BehaviorActionIntend | void
+
+export function defineBehavior<
+  TBehaviorEventType extends BehaviorEvent['type'],
+  TGuardResponse = true,
+>(behavior: Behavior<TBehaviorEventType, TGuardResponse>): Behavior {
+  return behavior as unknown as Behavior
+}
+
+/**
+ * @alpha
+ */
+export type PickFromUnion<
+  TUnion,
+  TTagKey extends keyof TUnion,
+  TPickedTags extends TUnion[TTagKey],
+> = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never

package/src/editor/behavior/behavior.utils.ts

@@ -0,0 +1,34 @@
+import {
+  isKeySegment,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+  type PortableTextObject,
+} from '@sanity/types'
+import type {BehaviorContext} from './behavior.types'
+
+export function getFocusBlock(
+  context: BehaviorContext,
+): {node: PortableTextBlock; path: [KeyedSegment]} | undefined {
+  const key = context.selection
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+export function getFocusBlockObject(
+  context: BehaviorContext,
+): {node: PortableTextObject; path: [KeyedSegment]} | undefined {
+  const focusBlock = getFocusBlock(context)
+
+  return focusBlock && !isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}

package/src/editor/editor-machine.ts

@@ -10,7 +10,21 @@ import {
   setup,
   type ActorRefFrom,
 } from 'xstate'
-import type {EditorSelection, InvalidValueResolution} from '../types/editor'
+import type {
+  EditorSelection,
+  InvalidValueResolution,
+  PortableTextMemberSchemaTypes,
+} from '../types/editor'
+import {toPortableTextRange} from '../utils/ranges'
+import {fromSlateValue} from '../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+import {inserText, inserTextBlock} from './behavior/behavior.actions'
+import type {
+  Behavior,
+  BehaviorAction,
+  BehaviorContext,
+  BehaviorEvent,
+} from './behavior/behavior.types'
 
 /**
  * @internal
@@ -51,6 +65,12 @@ export type MutationEvent = {
 type EditorEvent =
   | {type: 'normalizing'}
   | {type: 'done normalizing'}
+  | BehaviorEvent
+  | BehaviorAction
+  | {
+      type: 'update schema'
+      schema: PortableTextMemberSchemaTypes
+    }
   | EditorEmittedEvent
 
 type EditorEmittedEvent =
@@ -90,16 +110,34 @@ type EditorEmittedEvent =
 export const editorMachine = setup({
   types: {
     context: {} as {
+      behaviors: Array<Behavior>
       keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
+      schema: PortableTextMemberSchemaTypes
     },
     events: {} as EditorEvent,
     emitted: {} as EditorEmittedEvent,
     input: {} as {
+      behaviors: Array<Behavior>
       keyGenerator: () => string
+      schema: PortableTextMemberSchemaTypes
     },
   },
   actions: {
+    'apply:insert text': ({context, event}) => {
+      assertEvent(event, 'insert text')
+      inserText({context, event})
+    },
+    'apply:insert text block': ({context, event}) => {
+      assertEvent(event, 'insert text block')
+      inserTextBlock({context, event})
+    },
+    'assign schema': assign({
+      schema: ({event}) => {
+        assertEvent(event, 'update schema')
+        return event.schema
+      },
+    }),
     'emit patch event': emit(({event}) => {
       assertEvent(event, 'patch')
       return event
@@ -122,6 +160,68 @@ export const editorMachine = setup({
     'clear pending events': assign({
       pendingEvents: [],
     }),
+    'handle behavior event': enqueueActions(({context, event, enqueue}) => {
+      assertEvent(event, ['key down'])
+
+      const eventBehaviors = context.behaviors.filter(
+        (behavior) => behavior.on === event.type,
+      )
+
+      if (eventBehaviors.length === 0) {
+        return
+      }
+
+      const value = fromSlateValue(
+        event.editor.children,
+        context.schema.block.name,
+        KEY_TO_VALUE_ELEMENT.get(event.editor),
+      )
+      const selection = toPortableTextRange(
+        value,
+        event.editor.selection,
+        context.schema,
+      )
+
+      if (!selection) {
+        console.warn(
+          `Unable to handle event ${event.type} due to missing selection`,
+        )
+        return
+      }
+
+      const behaviorContext = {
+        schema: context.schema,
+        value,
+        selection,
+      } satisfies BehaviorContext
+
+      for (const eventBehavior of eventBehaviors) {
+        const shouldRun =
+          eventBehavior.guard?.({
+            context: behaviorContext,
+            event,
+          }) ?? true
+
+        if (!shouldRun) {
+          continue
+        }
+
+        const actions = eventBehavior.actions.map((action) =>
+          action({context: behaviorContext, event}, shouldRun),
+        )
+
+        for (const action of actions) {
+          if (typeof action !== 'object') {
+            continue
+          }
+
+          enqueue.raise({
+            ...action,
+            editor: event.editor,
+          })
+        }
+      }
+    }),
   },
   actors: {
     networkLogic,
@@ -129,8 +229,10 @@ export const editorMachine = setup({
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
+    behaviors: input.behaviors,
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
+    schema: input.schema,
   }),
   invoke: {
     id: 'networkLogic',
@@ -149,6 +251,16 @@ export const editorMachine = setup({
     'offline': {actions: emit({type: 'offline'})},
     'loading': {actions: emit({type: 'loading'})},
     'done loading': {actions: emit({type: 'done loading'})},
+    'update schema': {actions: 'assign schema'},
+    'key down': {
+      actions: ['handle behavior event'],
+    },
+    'insert text': {
+      actions: ['apply:insert text'],
+    },
+    'insert text block': {
+      actions: ['apply:insert text block'],
+    },
   },
   initial: 'pristine',
   states: {

package/src/editor/plugins/createWithHotKeys.ts

@@ -186,38 +186,6 @@ export function createWithHotkeys(
             return
           }
         }
-        // Block object enter key
-        if (focusBlock && Editor.isVoid(editor, focusBlock)) {
-          Editor.insertNode(editor, editor.pteCreateTextBlock({decorators: []}))
-          event.preventDefault()
-          editor.onChange()
-          return
-        }
-        // Default enter key behavior
-        event.preventDefault()
-        editor.insertBreak()
-        editor.onChange()
-      }
-
-      // Soft line breaks
-      if (isShiftEnter) {
-        event.preventDefault()
-        editor.insertText('\n')
-        return
-      }
-
-      // Undo/redo
-      if (isHotkey('mod+z', event.nativeEvent)) {
-        event.preventDefault()
-        editor.undo()
-        return
-      }
-      if (
-        isHotkey('mod+y', event.nativeEvent) ||
-        isHotkey('mod+shift+z', event.nativeEvent)
-      ) {
-        event.preventDefault()
-        editor.redo()
       }
     }
     return editor