@portabletext/editor 1.13.0 → 1.14.1

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
@@ -202,12 +202,12 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
 }
 
 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})
+}