@portabletext/editor 1.12.3 → 1.14.0

package/src/editor/Editable.tsx

@@ -420,9 +420,19 @@ export const PortableTextEditable = forwardRef<
         if (result !== undefined) {
           event.preventDefault()
         }
+      } else if (event.nativeEvent.clipboardData) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'copy',
+            data: event.nativeEvent.clipboardData,
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
       }
     },
-    [onCopy],
+    [onCopy, editorActor, slateEditor],
   )
 
   // Handle incoming pasting events in the editor
@@ -473,15 +483,14 @@ export const PortableTextEditable = forwardRef<
             editorActor.send({type: 'done loading'})
           })
       } else if (event.nativeEvent.clipboardData) {
-        event.preventDefault()
-
         editorActor.send({
           type: 'behavior event',
           behaviorEvent: {
             type: 'paste',
-            clipboardData: event.nativeEvent.clipboardData,
+            data: event.nativeEvent.clipboardData,
           },
           editor: slateEditor,
+          nativeEvent: event,
         })
       }
 
@@ -558,7 +567,7 @@ export const PortableTextEditable = forwardRef<
         onBlur(event)
       }
       if (!event.isPropagationStopped()) {
-        editorActor.send({type: 'blur', event})
+        editorActor.send({type: 'blurred', event})
       }
     },
     [editorActor, onBlur],
@@ -659,8 +668,53 @@ export const PortableTextEditable = forwardRef<
       if (!event.isDefaultPrevented()) {
         slateEditor.pteWithHotKeys(event)
       }
+      if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'key.down',
+            keyboardEvent: {
+              key: event.key,
+              code: event.code,
+              altKey: event.altKey,
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+            },
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
+      }
+    },
+    [props, editorActor, slateEditor],
+  )
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (props.onKeyUp) {
+        props.onKeyUp(event)
+      }
+      if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'key.up',
+            keyboardEvent: {
+              key: event.key,
+              code: event.code,
+              altKey: event.altKey,
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+            },
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
+      }
     },
-    [props, slateEditor],
+    [props, editorActor, slateEditor],
   )
 
   const scrollSelectionIntoViewToSlate = useMemo(() => {
@@ -753,6 +807,7 @@ export const PortableTextEditable = forwardRef<
       onDOMBeforeInput={handleOnBeforeInput}
       onFocus={handleOnFocus}
       onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
       onPaste={handlePaste}
       readOnly={readOnly}
       // We have implemented our own placeholder logic with decorations.

package/src/editor/PortableTextEditor.tsx

@@ -28,13 +28,13 @@ import {debugWithName} from '../utils/debug'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import {Synchronizer} from './components/Synchronizer'
+import {createEditor, type Editor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {defaultKeyGenerator} from './key-generator'
 import type {AddedAnnotationPaths} from './plugins/createWithEditableAPI'
-import {createEditor, type Editor} from './use-editor'
 
 const debug = debugWithName('component:PortableTextEditor')
 
@@ -148,7 +148,7 @@ export class PortableTextEditor extends Component<
 
     this.schemaTypes =
       this.editor._internal.editorActor.getSnapshot().context.schema
-    this.editable = this.editor.editable
+    this.editable = this.editor._internal.editable
   }
 
   componentDidUpdate(prevProps: PortableTextEditorProps) {
@@ -204,7 +204,10 @@ export class PortableTextEditor extends Component<
   }
 
   public setEditable = (editable: EditableAPI) => {
-    this.editor.editable = {...this.editor.editable, ...editable}
+    this.editor._internal.editable = {
+      ...this.editor._internal.editable,
+      ...editable,
+    }
   }
 
   render() {
@@ -235,7 +238,7 @@ export class PortableTextEditor extends Component<
         />
         <Synchronizer
           editorActor={this.editor._internal.editorActor}
-          getValue={this.editor.editable.getValue}
+          getValue={this.editor._internal.editable.getValue}
           portableTextEditor={this}
           slateEditor={this.editor._internal.slateEditor.instance}
         />
@@ -442,6 +445,10 @@ export function RouteEventsToChanges(props: {
     debug('Subscribing to editor changes')
     const sub = props.editorActor.on('*', (event) => {
       switch (event.type) {
+        case 'blurred': {
+          handleChange({type: 'blur', event: event.event})
+          break
+        }
         case 'patch':
           handleChange(event)
           break
@@ -479,7 +486,15 @@ export function RouteEventsToChanges(props: {
         case 'annotation.add':
         case 'annotation.remove':
         case 'annotation.toggle':
+        case 'blur':
+        case 'decorator.add':
+        case 'decorator.remove':
+        case 'decorator.toggle':
         case 'focus':
+        case 'insert.block object':
+        case 'insert.inline object':
+        case 'list item.toggle':
+        case 'style.toggle':
         case 'patches':
         case 'readOnly toggled':
           break

package/src/editor/__tests__/handleClick.test.tsx

@@ -76,7 +76,7 @@ describe('adds empty text block if its needed', () => {
 
     const element = await getEditableElement(component)
 
-    await waitFor(async () => {
+    await waitFor(() => {
       if (editorRef.current && element) {
         PortableTextEditor.focus(editorRef.current)
         PortableTextEditor.select(editorRef.current, initialSelection)
@@ -127,7 +127,7 @@ describe('adds empty text block if its needed', () => {
     )
     const element = await getEditableElement(component)
 
-    await waitFor(async () => {
+    await waitFor(() => {
       if (editorRef.current && element) {
         PortableTextEditor.focus(editorRef.current)
         PortableTextEditor.select(editorRef.current, initialSelection)
@@ -193,7 +193,7 @@ describe('adds empty text block if its needed', () => {
 
     const element = await getEditableElement(component)
 
-    await waitFor(async () => {
+    await waitFor(() => {
       if (editorRef.current && element) {
         PortableTextEditor.focus(editorRef.current)
         PortableTextEditor.select(editorRef.current, initialSelection)
@@ -263,7 +263,7 @@ describe('adds empty text block if its needed', () => {
     const inlineType = editor?.schemaTypes.inlineObjects.find(
       (t) => t.name === 'someObject',
     )
-    await waitFor(async () => {
+    await waitFor(() => {
       if (editor && inlineType && element) {
         PortableTextEditor.focus(editor)
         PortableTextEditor.select(editor, initialSelection)

package/src/editor/behavior/behavior.action.insert-block-object.ts

@@ -3,7 +3,7 @@ import {insertBlock} from './behavior.action-utils.insert-block'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const insertBlockObjectActionImplementation: BehaviorActionImplementation<
-  'insert block object'
+  'insert.block object'
 > = ({context, action}) => {
   const block = toSlateValue(
     [

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

@@ -4,7 +4,7 @@ import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const insertBreakActionImplementation: BehaviorActionImplementation<
-  'insert break'
+  'insert.break'
 > = ({context, action}) => {
   const keyGenerator = context.keyGenerator
   const schema = context.schema
@@ -23,15 +23,16 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
     }),
   )[0] ?? [undefined]
   const focusDecorators =
-    focusSpan.marks?.filter((mark) =>
+    focusSpan?.marks?.filter((mark) =>
       schema.decorators.some((decorator) => decorator.value === mark),
     ) ?? []
   const focusAnnotations =
-    focusSpan.marks?.filter(
+    focusSpan?.marks?.filter(
       (mark) =>
         !schema.decorators.some((decorator) => decorator.value === mark),
     ) ?? []
 
+  const anchorBlockPath = editor.selection.anchor.path.slice(0, 1)
   const focusBlockPath = editor.selection.focus.path.slice(0, 1)
   const focusBlock = Node.descendant(editor, focusBlockPath) as
     | SlateTextBlock
@@ -39,45 +40,37 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
 
   if (editor.isTextBlock(focusBlock)) {
     const [start, end] = Range.edges(editor.selection)
+    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,
+    })
     const atTheStartOfBlock = isEqual(end, {
       path: [...focusBlockPath, 0],
       offset: 0,
     })
 
-    if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
+    if (atTheEndOfBlock && Range.isCollapsed(editor.selection)) {
       Editor.insertNode(
         editor,
         editor.pteCreateTextBlock({
-          decorators: focusAnnotations.length === 0 ? focusDecorators : [],
+          decorators: [],
           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)) {
+    if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
       Editor.insertNode(
         editor,
         editor.pteCreateTextBlock({
-          decorators: [],
+          decorators: focusAnnotations.length === 0 ? focusDecorators : [],
           listItem: focusBlock.listItem,
           level: focusBlock.level,
         }),
@@ -85,7 +78,7 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
 
       const [nextBlockPath] = Path.next(focusBlockPath)
 
-      Transforms.setSelection(editor, {
+      Transforms.select(editor, {
         anchor: {path: [nextBlockPath, 0], offset: 0},
         focus: {path: [nextBlockPath, 0], offset: 0},
       })
@@ -93,9 +86,11 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
       return
     }
 
+    const selectionAcrossBlocks = anchorBlockPath[0] !== focusBlockPath[0]
+
     const isInTheMiddleOfNode = !atTheStartOfBlock && !atTheEndOfBlock
 
-    if (isInTheMiddleOfNode) {
+    if (isInTheMiddleOfNode && !selectionAcrossBlocks) {
       Editor.withoutNormalizing(editor, () => {
         if (!editor.selection) {
           return
@@ -202,15 +197,17 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
       return
     }
   }
+
+  Transforms.splitNodes(editor, {always: true})
 }
 
 export const insertSoftBreakActionImplementation: BehaviorActionImplementation<
-  'insert soft break'
+  'insert.soft break'
 > = ({context, action}) => {
   // This mimics Slate's internal which also just does a regular insert break
   // when soft-breaking
   insertBreakActionImplementation({
     context,
-    action: {...action, type: 'insert break'},
+    action: {...action, type: 'insert.break'},
   })
 }

package/src/editor/behavior/behavior.action.insert-inline-object.ts

@@ -0,0 +1,58 @@
+import {Editor, Transforms, type Element} from 'slate'
+import {toSlateValue} from '../../utils/values'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const insertInlineObjectActionImplementation: BehaviorActionImplementation<
+  'insert.inline object'
+> = ({context, action}) => {
+  if (
+    !context.schema.inlineObjects.some(
+      (inlineObject) => inlineObject.name === action.inlineObject.name,
+    )
+  ) {
+    console.error('Unable to insert unknown inline object')
+    return
+  }
+
+  if (!action.editor.selection) {
+    console.error('Unable to insert inline object without selection')
+    return
+  }
+
+  const [focusTextBlock] = Array.from(
+    Editor.nodes(action.editor, {
+      at: action.editor.selection.focus.path,
+      match: (node) => action.editor.isTextBlock(node),
+    }),
+  ).at(0) ?? [undefined, undefined]
+
+  if (!focusTextBlock) {
+    console.error('Unable to perform action without focus text block')
+    return
+  }
+
+  const block = toSlateValue(
+    [
+      {
+        _type: context.schema.block.name,
+        _key: context.keyGenerator(),
+        children: [
+          {
+            _type: action.inlineObject.name,
+            _key: context.keyGenerator(),
+            ...(action.inlineObject.value ?? {}),
+          },
+        ],
+      },
+    ],
+    {schemaTypes: context.schema},
+  ).at(0) as unknown as Element
+  const child = block?.children.at(0)
+
+  if (!child) {
+    console.error('Unable to insert inline object')
+    return
+  }
+
+  Transforms.insertNodes(action.editor, child)
+}

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

@@ -2,7 +2,7 @@ import {Editor, Transforms} from 'slate'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const insertSpanActionImplementation: BehaviorActionImplementation<
-  'insert span'
+  'insert.span'
 > = ({context, action}) => {
   if (!action.editor.selection) {
     console.error('Unable to perform action without selection', action)

package/src/editor/behavior/behavior.action.list-item.ts

@@ -0,0 +1,100 @@
+import {Editor, Transforms} from 'slate'
+import type {BehaviorActionImplementation} from '../behavior/behavior.actions'
+import {createGuards} from '../behavior/behavior.guards'
+
+export const toggleListItemActionImplementation: BehaviorActionImplementation<
+  'list item.toggle'
+> = ({context, action}) => {
+  const isActive = isListItemActive({
+    editor: action.editor,
+    listItem: action.listItem,
+  })
+
+  if (isActive) {
+    removeListItemActionImplementation({
+      context,
+      action: {...action, type: 'list item.remove'},
+    })
+  } else {
+    addListItemActionImplementation({
+      context,
+      action: {...action, type: 'list item.add'},
+    })
+  }
+}
+
+export const removeListItemActionImplementation: BehaviorActionImplementation<
+  'list item.remove'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    return
+  }
+
+  const guards = createGuards(context)
+
+  const selectedBlocks = [
+    ...Editor.nodes(action.editor, {
+      at: action.editor.selection,
+      match: (node) => guards.isListBlock(node),
+    }),
+  ]
+
+  for (const [, at] of selectedBlocks) {
+    Transforms.unsetNodes(action.editor, ['listItem', 'level'], {at})
+  }
+}
+
+export const addListItemActionImplementation: BehaviorActionImplementation<
+  'list item.add'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    return
+  }
+
+  const guards = createGuards(context)
+
+  const selectedBlocks = [
+    ...Editor.nodes(action.editor, {
+      at: action.editor.selection,
+      match: (node) => guards.isTextBlock(node),
+    }),
+  ]
+
+  for (const [, at] of selectedBlocks) {
+    Transforms.setNodes(
+      action.editor,
+      {
+        level: 1,
+        listItem: action.listItem,
+      },
+      {at},
+    )
+  }
+}
+
+export function isListItemActive({
+  editor,
+  listItem,
+}: {
+  editor: Editor
+  listItem: string
+}): boolean {
+  if (!editor.selection) {
+    return false
+  }
+
+  const selectedBlocks = [
+    ...Editor.nodes(editor, {
+      at: editor.selection,
+      match: (node) => editor.isTextBlock(node),
+    }),
+  ]
+
+  if (selectedBlocks.length > 0) {
+    return selectedBlocks.every(
+      ([node]) => editor.isListBlock(node) && node.listItem === listItem,
+    )
+  }
+
+  return false
+}

package/src/editor/behavior/behavior.action.style.ts

@@ -0,0 +1,108 @@
+import {Editor, Transforms} from 'slate'
+import type {BehaviorActionImplementation} from './behavior.actions'
+import {createGuards} from './behavior.guards'
+
+export const toggleStyleActionImplementation: BehaviorActionImplementation<
+  'style.toggle'
+> = ({context, action}) => {
+  const isActive = isStyleActive({
+    editor: action.editor,
+    style: action.style,
+  })
+
+  if (isActive) {
+    removeStyleActionImplementation({
+      context,
+      action: {...action, type: 'style.remove'},
+    })
+  } else {
+    addStyleActionImplementation({
+      context,
+      action: {...action, type: 'style.add'},
+    })
+  }
+}
+
+export const removeStyleActionImplementation: BehaviorActionImplementation<
+  'style.remove'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    return
+  }
+
+  const defaultStyle = context.schema.styles[0].value
+  const guards = createGuards(context)
+
+  const selectedBlocks = [
+    ...Editor.nodes(action.editor, {
+      at: action.editor.selection,
+      match: (node) => guards.isTextBlock(node),
+    }),
+  ]
+
+  for (const [, at] of selectedBlocks) {
+    Transforms.setNodes(
+      action.editor,
+      {
+        style: defaultStyle,
+      },
+      {
+        at,
+      },
+    )
+  }
+}
+
+export const addStyleActionImplementation: BehaviorActionImplementation<
+  'style.add'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    return
+  }
+
+  const guards = createGuards(context)
+
+  const selectedBlocks = [
+    ...Editor.nodes(action.editor, {
+      at: action.editor.selection,
+      match: (node) => guards.isTextBlock(node),
+    }),
+  ]
+
+  for (const [, at] of selectedBlocks) {
+    Transforms.setNodes(
+      action.editor,
+      {
+        style: action.style,
+      },
+      {
+        at,
+      },
+    )
+  }
+}
+
+export function isStyleActive({
+  editor,
+  style,
+}: {
+  editor: Editor
+  style: string
+}): boolean {
+  if (!editor.selection) {
+    return false
+  }
+
+  const selectedBlocks = [
+    ...Editor.nodes(editor, {
+      at: editor.selection,
+      match: (node) => editor.isTextBlock(node),
+    }),
+  ]
+
+  if (selectedBlocks.length > 0) {
+    return selectedBlocks.every(([node]) => node.style === style)
+  }
+
+  return false
+}

package/src/editor/behavior/behavior.action.text-block.set.ts

@@ -0,0 +1,25 @@
+import {Transforms} from 'slate'
+import {toSlateRange} from '../../utils/ranges'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const textBlockSetActionImplementation: BehaviorActionImplementation<
+  'text block.set'
+> = ({action}) => {
+  const at = toSlateRange(
+    {
+      anchor: {path: action.at, offset: 0},
+      focus: {path: action.at, offset: 0},
+    },
+    action.editor,
+  )!
+
+  Transforms.setNodes(
+    action.editor,
+    {
+      ...(action.style ? {style: action.style} : {}),
+      ...(action.listItem ? {listItem: action.listItem} : {}),
+      ...(action.level ? {level: action.level} : {}),
+    },
+    {at},
+  )
+}

package/src/editor/behavior/behavior.action.text-block.unset.ts

@@ -0,0 +1,17 @@
+import {Transforms} from 'slate'
+import {toSlateRange} from '../../utils/ranges'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const textBlockUnsetActionImplementation: BehaviorActionImplementation<
+  'text block.unset'
+> = ({action}) => {
+  const at = toSlateRange(
+    {
+      anchor: {path: action.at, offset: 0},
+      focus: {path: action.at, offset: 0},
+    },
+    action.editor,
+  )!
+
+  Transforms.unsetNodes(action.editor, action.props, {at})
+}