@portabletext/editor 1.36.6 → 1.38.0

package/src/behavior-actions/behavior.action.insert.block.ts

@@ -1,6 +1,14 @@
+import {Editor, Path, Point, Range, Transforms, type Descendant} from 'slate'
+import {DOMEditor} from 'slate-dom'
+import type {EditorSchema} from '../editor/define-schema'
 import {parseBlock} from '../internal-utils/parse-blocks'
-import {toSlateValue} from '../internal-utils/values'
-import {insertBlock} from './behavior.action-utils.insert-block'
+import {
+  getFocusBlock,
+  getFocusChild,
+  getLastBlock,
+} from '../internal-utils/slate-utils'
+import {isEqualToEmptyEditor, toSlateValue} from '../internal-utils/values'
+import type {PortableTextSlateEditor} from '../types/editor'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const insertBlockActionImplementation: BehaviorActionImplementation<
@@ -27,7 +35,244 @@ export const insertBlockActionImplementation: BehaviorActionImplementation<
   insertBlock({
     block: fragment,
     placement: action.placement,
+    select: action.select ?? 'start',
     editor: action.editor,
     schema: context.schema,
   })
 }
+
+export function insertBlock({
+  block,
+  placement,
+  select,
+  editor,
+  schema,
+}: {
+  block: Descendant
+  placement: 'auto' | 'after' | 'before'
+  select: 'start' | 'end' | 'none'
+  editor: PortableTextSlateEditor
+  schema: EditorSchema
+}) {
+  const [focusBlock, focusBlockPath] = getFocusBlock({editor})
+
+  if (!editor.selection || !focusBlock || !focusBlockPath) {
+    if (select !== 'none') {
+      DOMEditor.focus(editor)
+    }
+
+    const [lastBlock, lastBlockPath] = getLastBlock({editor})
+
+    if (placement === 'before') {
+      Transforms.insertNodes(editor, [block], {at: [0]})
+
+      if (select === 'start') {
+        Transforms.select(editor, Editor.start(editor, [0]))
+      } else if (select === 'end') {
+        Transforms.select(editor, Editor.end(editor, [0]))
+      }
+    } else if (placement === 'after') {
+      const nextPath = lastBlockPath ? [lastBlockPath[0] + 1] : [0]
+      Transforms.insertNodes(editor, [block], {at: nextPath, select: false})
+
+      if (select === 'start') {
+        Transforms.select(editor, Editor.start(editor, nextPath))
+      } else if (select === 'end') {
+        Transforms.select(editor, Editor.end(editor, nextPath))
+      }
+    } else {
+      // placement === 'auto'
+
+      if (lastBlock && isEqualToEmptyEditor([lastBlock], schema)) {
+        // And if the last block was an empty text block, let's remove
+        // that too
+        Transforms.removeNodes(editor, {at: lastBlockPath})
+
+        Transforms.insertNodes(editor, [block], {
+          at: lastBlockPath,
+          select: false,
+        })
+
+        Transforms.deselect(editor)
+
+        if (select === 'start') {
+          Transforms.select(editor, Editor.start(editor, lastBlockPath))
+        } else if (select === 'end') {
+          Transforms.select(editor, Editor.end(editor, lastBlockPath))
+        }
+
+        return
+      }
+
+      if (
+        editor.isTextBlock(block) &&
+        lastBlock &&
+        editor.isTextBlock(lastBlock)
+      ) {
+        const selectionBefore = Editor.end(editor, lastBlockPath)
+
+        Transforms.insertFragment(editor, [block], {
+          at: Editor.end(editor, lastBlockPath),
+        })
+
+        if (select === 'start') {
+          Transforms.select(editor, selectionBefore)
+        } else if (select === 'none') {
+          Transforms.deselect(editor)
+        }
+
+        return
+      }
+
+      const nextPath = lastBlockPath ? [lastBlockPath[0] + 1] : [0]
+
+      Transforms.insertNodes(editor, [block], {at: nextPath, select: false})
+
+      if (select === 'start') {
+        Transforms.select(editor, Editor.start(editor, nextPath))
+      } else if (select === 'end') {
+        Transforms.select(editor, Editor.end(editor, nextPath))
+      }
+    }
+  } else {
+    if (placement === 'before') {
+      const currentSelection = editor.selection
+
+      Transforms.insertNodes(editor, [block], {
+        at: focusBlockPath,
+        select: false,
+      })
+
+      const adjustedSelection = Range.transform(currentSelection, {
+        type: 'move_node',
+        path: focusBlockPath,
+        newPath: [focusBlockPath[0] + 1],
+      })
+
+      if (adjustedSelection) {
+        Transforms.select(editor, adjustedSelection)
+      } else {
+        Transforms.select(editor, currentSelection)
+      }
+
+      if (select === 'start') {
+        Transforms.select(editor, Editor.start(editor, focusBlockPath))
+      } else if (select === 'end') {
+        Transforms.select(editor, Editor.end(editor, focusBlockPath))
+      }
+    } else if (placement === 'after') {
+      const nextPath = [focusBlockPath[0] + 1]
+
+      const currentSelection = editor.selection
+      Transforms.insertNodes(editor, [block], {at: nextPath, select: false})
+      Transforms.select(editor, currentSelection)
+
+      if (select === 'start') {
+        Transforms.select(editor, Editor.start(editor, nextPath))
+      } else if (select === 'end') {
+        Transforms.select(editor, Editor.end(editor, nextPath))
+      }
+    } else {
+      // placement === 'auto'
+
+      const currentSelection = editor.selection
+      const focusBlockStartPoint = Editor.start(editor, focusBlockPath)
+
+      if (editor.isTextBlock(focusBlock) && editor.isTextBlock(block)) {
+        if (select === 'end') {
+          Transforms.insertFragment(editor, [block], {
+            voids: true,
+          })
+
+          return
+        }
+
+        Transforms.insertFragment(editor, [block], {
+          at: currentSelection,
+          voids: true,
+        })
+
+        if (select === 'start') {
+          if (Point.equals(currentSelection.anchor, focusBlockStartPoint)) {
+            Transforms.select(editor, Editor.start(editor, focusBlockPath))
+          } else {
+            Transforms.select(editor, currentSelection)
+          }
+        } else {
+          if (!Point.equals(currentSelection.anchor, focusBlockStartPoint)) {
+            Transforms.select(editor, currentSelection)
+          }
+        }
+      } else {
+        if (!editor.isTextBlock(focusBlock)) {
+          Transforms.insertNodes(editor, [block], {select: false})
+
+          const nextPath = [focusBlockPath[0] + 1]
+
+          if (select === 'start') {
+            Transforms.select(editor, Editor.start(editor, nextPath))
+          } else if (select === 'end') {
+            Transforms.select(editor, Editor.end(editor, nextPath))
+          }
+        } else {
+          const focusBlockStartPoint = Editor.start(editor, focusBlockPath)
+          const focusBlockEndPoint = Editor.end(editor, focusBlockPath)
+
+          if (Point.equals(currentSelection.anchor, focusBlockStartPoint)) {
+            Transforms.insertNodes(editor, [block], {
+              at: focusBlockPath,
+              select: false,
+            })
+
+            if (select === 'start' || select === 'end') {
+              Transforms.select(editor, Editor.start(editor, focusBlockPath))
+            }
+
+            if (isEqualToEmptyEditor([focusBlock], schema)) {
+              Transforms.removeNodes(editor, {at: Path.next(focusBlockPath)})
+            }
+          } else if (Point.equals(currentSelection.focus, focusBlockEndPoint)) {
+            const nextPath = [focusBlockPath[0] + 1]
+
+            Transforms.insertNodes(editor, [block], {
+              at: nextPath,
+              select: false,
+            })
+
+            if (select === 'start' || select === 'end') {
+              Transforms.select(editor, Editor.start(editor, nextPath))
+            }
+          } else {
+            const currentSelection = editor.selection
+            const [focusChild] = getFocusChild({editor})
+
+            if (focusChild && editor.isTextSpan(focusChild)) {
+              Transforms.insertFragment(editor, [block], {
+                at: currentSelection,
+              })
+
+              if (select === 'start' || select === 'end') {
+                Transforms.select(editor, [focusBlockPath[0] + 1])
+              } else {
+                Transforms.select(editor, currentSelection)
+              }
+            } else {
+              const nextPath = [focusBlockPath[0] + 1]
+              Transforms.insertNodes(editor, [block], {
+                at: nextPath,
+                select: false,
+              })
+              Transforms.select(editor, currentSelection)
+
+              if (select === 'start') {
+                Transforms.select(editor, Editor.start(editor, nextPath))
+              } else if (select === 'end') {
+                Transforms.select(editor, Editor.end(editor, nextPath))
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/behavior-actions/behavior.action.insert.text-block.ts

@@ -0,0 +1,33 @@
+import {insertBlockActionImplementation} from './behavior.action.insert.block'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const insertTextBlockActionImplementation: BehaviorActionImplementation<
+  'insert.text block'
+> = ({context, action}) => {
+  insertBlockActionImplementation({
+    context,
+    action: {
+      type: 'insert.block',
+      block: {
+        _key: context.keyGenerator(),
+        _type: context.schema.block.name,
+        children: action.textBlock?.children?.map((child) => ({
+          ...child,
+          _key: context.keyGenerator(),
+        })) ?? [
+          {
+            _type: context.schema.span.name,
+            _key: context.keyGenerator(),
+            text: '',
+            marks: [],
+          },
+        ],
+        markDefs: [],
+        style: context.schema.styles[0].value ?? 'normal',
+      },
+      editor: action.editor,
+      placement: action.placement,
+      select: 'start',
+    },
+  })
+}

package/src/behavior-actions/behavior.action.insert.text.ts

@@ -0,0 +1,7 @@
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const insertTextActionImplementation: BehaviorActionImplementation<
+  'insert.text'
+> = ({action}) => {
+  action.editor.insertText(action.text)
+}

package/src/behavior-actions/behavior.action.move.block-down.ts

@@ -0,0 +1,48 @@
+import {Path} from 'slate'
+import {toSlatePath} from '../internal-utils/paths'
+import {toPortableTextRange} from '../internal-utils/ranges'
+import {isKeyedSegment} from '../utils'
+import {moveBlockActionImplementation} from './behavior.action.move.block'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const moveBlockDownActionImplementation: BehaviorActionImplementation<
+  'move.block down'
+> = ({context, action}) => {
+  const at = [toSlatePath(action.at, action.editor)[0]]
+  const to = [Path.next(at)[0]]
+  const selection = toPortableTextRange(
+    action.editor.children,
+    {
+      anchor: {
+        path: to,
+        offset: 0,
+      },
+      focus: {
+        path: to,
+        offset: 0,
+      },
+    },
+    context.schema,
+  )
+
+  const destinationBlockKey = selection
+    ? isKeyedSegment(selection.focus.path[0])
+      ? selection.focus.path[0]._key
+      : undefined
+    : undefined
+
+  if (destinationBlockKey === undefined) {
+    console.error('Could not find destination block key')
+    return
+  }
+
+  moveBlockActionImplementation({
+    context,
+    action: {
+      type: 'move.block',
+      at: action.at,
+      to: [{_key: destinationBlockKey}],
+      editor: action.editor,
+    },
+  })
+}

package/src/behavior-actions/behavior.action.move.block-up.ts

@@ -0,0 +1,53 @@
+import {Path} from 'slate'
+import {toSlatePath} from '../internal-utils/paths'
+import {toPortableTextRange} from '../internal-utils/ranges'
+import {isKeyedSegment} from '../utils'
+import {moveBlockActionImplementation} from './behavior.action.move.block'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const moveBlockUpActionImplementation: BehaviorActionImplementation<
+  'move.block up'
+> = ({context, action}) => {
+  const at = [toSlatePath(action.at, action.editor)[0]]
+
+  if (!Path.hasPrevious(at)) {
+    return
+  }
+
+  const to = [Path.previous(at)[0]]
+  const selection = toPortableTextRange(
+    action.editor.children,
+    {
+      anchor: {
+        path: to,
+        offset: 0,
+      },
+      focus: {
+        path: to,
+        offset: 0,
+      },
+    },
+    context.schema,
+  )
+
+  const destinationBlockKey = selection
+    ? isKeyedSegment(selection.focus.path[0])
+      ? selection.focus.path[0]._key
+      : undefined
+    : undefined
+
+  if (destinationBlockKey === undefined) {
+    console.error('Could not find destination block key')
+    return
+  }
+
+  moveBlockActionImplementation({
+    context,
+    action: {
+      type: 'move.block',
+      at: action.at,
+      to: [{_key: destinationBlockKey}],
+      editor: action.editor,
+    },
+  })
+}

package/src/behavior-actions/behavior.action.move.block.ts

@@ -0,0 +1,16 @@
+import {Transforms} from 'slate'
+import {toSlatePath} from '../internal-utils/paths'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const moveBlockActionImplementation: BehaviorActionImplementation<
+  'move.block'
+> = ({action}) => {
+  const at = [toSlatePath(action.at, action.editor)[0]]
+  const to = [toSlatePath(action.to, action.editor)[0]]
+
+  Transforms.moveNodes(action.editor, {
+    at,
+    to,
+    mode: 'highest',
+  })
+}

package/src/behavior-actions/behavior.action.noop.ts

@@ -0,0 +1,5 @@
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const noopActionImplementation: BehaviorActionImplementation<
+  'noop'
+> = () => {}

package/src/behavior-actions/behavior.action.select.next-block.ts

@@ -0,0 +1,44 @@
+import {Editor} from 'slate'
+import {toPortableTextRange} from '../internal-utils/ranges'
+import {selectActionImplementation} from './behavior.action.select'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const selectNextBlockActionImplementation: BehaviorActionImplementation<
+  'select.next block'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    console.error('Unable to select previous block without a selection')
+    return
+  }
+
+  const blockPath = action.editor.selection.focus.path.slice(0, 1)
+  const nextBlockPath = [blockPath[0] + 1]
+
+  const position =
+    action.select === 'end'
+      ? Editor.end(action.editor, nextBlockPath)
+      : Editor.start(action.editor, nextBlockPath)
+
+  const newSelection = toPortableTextRange(
+    action.editor.children,
+    {
+      anchor: position,
+      focus: position,
+    },
+    context.schema,
+  )
+
+  if (!newSelection) {
+    console.error('Could not find selection for next block')
+    return
+  }
+
+  selectActionImplementation({
+    context,
+    action: {
+      type: 'select',
+      selection: newSelection,
+      editor: action.editor,
+    },
+  })
+}

package/src/behavior-actions/behavior.action.select.previous-block.ts

@@ -0,0 +1,48 @@
+import {Editor, Path} from 'slate'
+import {toPortableTextRange} from '../internal-utils/ranges'
+import {selectActionImplementation} from './behavior.action.select'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const selectPreviousBlockActionImplementation: BehaviorActionImplementation<
+  'select.previous block'
+> = ({context, action}) => {
+  if (!action.editor.selection) {
+    console.error('Unable to select previous block without a selection')
+    return
+  }
+
+  const blockPath = action.editor.selection.focus.path.slice(0, 1)
+
+  if (!Path.hasPrevious(blockPath)) {
+    console.error("There's no previous block to select")
+    return
+  }
+
+  const position =
+    action.select === 'end'
+      ? Editor.end(action.editor, Path.previous(blockPath))
+      : Editor.start(action.editor, Path.previous(blockPath))
+
+  const newSelection = toPortableTextRange(
+    action.editor.children,
+    {
+      anchor: position,
+      focus: position,
+    },
+    context.schema,
+  )
+
+  if (!newSelection) {
+    console.error('Could not find selection for previous block')
+    return
+  }
+
+  selectActionImplementation({
+    context,
+    action: {
+      type: 'select',
+      selection: newSelection,
+      editor: action.editor,
+    },
+  })
+}

package/src/behavior-actions/behavior.action.select.ts

@@ -0,0 +1,15 @@
+import {Transforms} from 'slate'
+import {toSlateRange} from '../internal-utils/ranges'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const selectActionImplementation: BehaviorActionImplementation<
+  'select'
+> = ({action}) => {
+  const newSelection = toSlateRange(action.selection, action.editor)
+
+  if (newSelection) {
+    Transforms.select(action.editor, newSelection)
+  } else {
+    Transforms.deselect(action.editor)
+  }
+}

package/src/behavior-actions/behavior.action.serialization.failure.ts

@@ -0,0 +1,9 @@
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const serializationFailureActionImplementation: BehaviorActionImplementation<
+  'serialization.failure'
+> = ({action}) => {
+  console.warn(
+    `Serialization of ${action.mimeType} failed with reason "${action.reason}"`,
+  )
+}

package/src/behavior-actions/behavior.action.serialization.success.ts

@@ -0,0 +1,14 @@
+import {dataTransferSetActionImplementation} from './behavior.action.data-transfer-set'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const serializationSuccessActionImplementation: BehaviorActionImplementation<
+  'serialization.success'
+> = ({context, action}) => {
+  dataTransferSetActionImplementation({
+    context,
+    action: {
+      ...action,
+      type: 'data transfer.set',
+    },
+  })
+}