@portabletext/editor 1.12.3 → 1.14.0

package/src/selectors/selectors.ts

@@ -0,0 +1,329 @@
+import {
+  isKeySegment,
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+  type PortableTextListBlock,
+  type PortableTextObject,
+  type PortableTextSpan,
+  type PortableTextTextBlock,
+} from '@sanity/types'
+import {createGuards} from '../editor/behavior/behavior.guards'
+import type {EditorSelector} from '../editor/editor-selector'
+
+/**
+ * @alpha
+ */
+export const selectionIsCollapsed: EditorSelector<boolean> = ({context}) => {
+  return (
+    JSON.stringify(context.selection?.anchor.path) ===
+      JSON.stringify(context.selection?.focus.path) &&
+    context.selection?.anchor.offset === context.selection?.focus.offset
+  )
+}
+
+/**
+ * @alpha
+ */
+export const getFocusBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  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
+}
+
+/**
+ * @alpha
+ */
+export const getFocusListBlock: EditorSelector<
+  {node: PortableTextListBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const guards = createGuards(context)
+  const focusBlock = getFocusBlock({context})
+
+  return focusBlock && guards.isListBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusTextBlock: EditorSelector<
+  {node: PortableTextTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const focusBlock = getFocusBlock({context})
+
+  return focusBlock && isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusBlockObject: EditorSelector<
+  {node: PortableTextObject; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const focusBlock = getFocusBlock({context})
+
+  return focusBlock && !isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusChild: EditorSelector<
+  | {
+      node: PortableTextObject | PortableTextSpan
+      path: [KeyedSegment, 'children', KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  const focusBlock = getFocusTextBlock({context})
+
+  if (!focusBlock) {
+    return undefined
+  }
+
+  const key = context.selection
+    ? isKeySegment(context.selection.focus.path[2])
+      ? context.selection.focus.path[2]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? focusBlock.node.children.find((span) => span._key === key)
+    : undefined
+
+  return node && key
+    ? {node, path: [...focusBlock.path, 'children', {_key: key}]}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFocusSpan: EditorSelector<
+  | {node: PortableTextSpan; path: [KeyedSegment, 'children', KeyedSegment]}
+  | undefined
+> = ({context}) => {
+  const focusChild = getFocusChild({context})
+
+  return focusChild && isPortableTextSpan(focusChild.node)
+    ? {node: focusChild.node, path: focusChild.path}
+    : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getFirstBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const node = context.value[0]
+
+  return node ? {node, path: [{_key: node._key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getLastBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  const node = context.value[context.value.length - 1]
+    ? context.value[context.value.length - 1]
+    : undefined
+
+  return node ? {node, path: [{_key: node._key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getSelectedBlocks: EditorSelector<
+  Array<{node: PortableTextBlock; path: [KeyedSegment]}>
+> = ({context}) => {
+  if (!context.selection) {
+    return []
+  }
+
+  const selectedBlocks: Array<{node: PortableTextBlock; path: [KeyedSegment]}> =
+    []
+  const startKey = context.selection.backward
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+  const endKey = context.selection.backward
+    ? isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+
+  if (!startKey || !endKey) {
+    return selectedBlocks
+  }
+
+  for (const block of context.value) {
+    if (block._key === startKey) {
+      selectedBlocks.push({node: block, path: [{_key: block._key}]})
+
+      if (startKey === endKey) {
+        break
+      }
+      continue
+    }
+
+    if (block._key === endKey) {
+      selectedBlocks.push({node: block, path: [{_key: block._key}]})
+      break
+    }
+
+    if (selectedBlocks.length > 0) {
+      selectedBlocks.push({node: block, path: [{_key: block._key}]})
+    }
+  }
+
+  return selectedBlocks
+}
+
+/**
+ * @alpha
+ */
+export const getSelectionStartBlock: EditorSelector<
+  | {
+      node: PortableTextBlock
+      path: [KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  const key = context.selection.backward
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getSelectionEndBlock: EditorSelector<
+  | {
+      node: PortableTextBlock
+      path: [KeyedSegment]
+    }
+  | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  const key = context.selection.backward
+    ? isKeySegment(context.selection.anchor.path[0])
+      ? context.selection.anchor.path[0]._key
+      : undefined
+    : isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+/**
+ * @alpha
+ */
+export const getPreviousBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  let previousBlock: {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+  const selectionStartBlock = getSelectionStartBlock({context})
+
+  if (!selectionStartBlock) {
+    return undefined
+  }
+
+  let foundSelectionStartBlock = false
+
+  for (const block of context.value) {
+    if (block._key === selectionStartBlock.node._key) {
+      foundSelectionStartBlock = true
+      break
+    }
+
+    previousBlock = {node: block, path: [{_key: block._key}]}
+  }
+
+  if (foundSelectionStartBlock && previousBlock) {
+    return previousBlock
+  }
+
+  return undefined
+}
+
+/**
+ * @alpha
+ */
+export const getNextBlock: EditorSelector<
+  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+> = ({context}) => {
+  let nextBlock: {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+  const selectionEndBlock = getSelectionEndBlock({context})
+
+  if (!selectionEndBlock) {
+    return undefined
+  }
+
+  let foundSelectionEndBlock = false
+
+  for (const block of context.value) {
+    if (block._key === selectionEndBlock.node._key) {
+      foundSelectionEndBlock = true
+      continue
+    }
+
+    if (foundSelectionEndBlock) {
+      nextBlock = {node: block, path: [{_key: block._key}]}
+      break
+    }
+  }
+
+  if (foundSelectionEndBlock && nextBlock) {
+    return nextBlock
+  }
+
+  return undefined
+}

package/src/types/editor.ts

@@ -133,66 +133,6 @@ export interface PortableTextSlateEditor extends ReactEditor {
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
 
-  /**
-   * Increments selected list items levels, or decrements them if `reverse` is true.
-   *
-   * @param reverse - if true, decrement instead of incrementing
-   * @returns True if anything was incremented in the selection
-   */
-  pteIncrementBlockLevels: (reverse?: boolean) => boolean
-
-  /**
-   * Toggle selected blocks as listItem
-   *
-   * @param listStyle - Style of list item to toggle on/off
-   */
-  pteToggleListItem: (listStyle: string) => void
-
-  /**
-   * Set selected block as listItem
-   *
-   * @param listStyle - Style of list item to set
-   */
-  pteSetListItem: (listStyle: string) => void
-
-  /**
-   * Unset selected block as listItem
-   *
-   * @param listStyle - Style of list item to unset
-   */
-  pteUnsetListItem: (listStyle: string) => void
-
-  /**
-   * Ends a list
-   *
-   * @returns True if a list was ended in the selection
-   */
-  pteEndList: () => boolean
-
-  /**
-   * Toggle the selected block style
-   *
-   * @param style - The style name
-   *
-   */
-  pteToggleBlockStyle: (style: string) => void
-
-  /**
-   * Test if the current selection has a certain block style
-   *
-   * @param style - The style name
-   *
-   */
-  pteHasBlockStyle: (style: string) => boolean
-
-  /**
-   * Test if the current selection has a certain list style
-   *
-   * @param listStyle - Style name to check whether or not the selection has
-   *
-   */
-  pteHasListStyle: (style: string) => boolean
-
   /**
    * Try to expand the current selection to a word
    */

package/src/utils/is-hotkey.test.ts

@@ -1,61 +1,114 @@
 import {expect, test} from 'vitest'
 import {isHotkey, type KeyboardEventLike} from './is-hotkey'
 
-function e(value: string | number, ...modifiers: string[]) {
+function e(
+  value: string | number,
+  modifiers: Array<'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'> = [],
+) {
   return {
     ...(typeof value === 'string' ? {key: value} : {keyCode: value}),
-    altKey: modifiers.includes('alt'),
-    ctrlKey: modifiers.includes('ctrl'),
-    metaKey: modifiers.includes('meta'),
-    shiftKey: modifiers.includes('shift'),
+    altKey: modifiers.includes('altKey'),
+    ctrlKey: modifiers.includes('ctrlKey'),
+    metaKey: modifiers.includes('metaKey'),
+    shiftKey: modifiers.includes('shiftKey'),
   } as KeyboardEventLike
 }
 
-type TestCase = [KeyboardEventLike, string, boolean]
-
-const testCases = [
-  [e(83, 'meta'), 'Meta+S', true],
-  [e(83, 'alt', 'meta'), 'Meta+Alt+s', true],
-  [e(83, 'meta'), 'meta+s', true],
-  [e(83, 'meta'), 'cmd+s', true],
-  [e(32, 'meta'), 'cmd+space', true],
-  [e(187, 'meta'), 'cmd+=', true],
-  [e(83, 'ctrl'), 'mod+s', true],
-  [e(16, 'shift'), 'shift', true],
-  [e(93, 'meta'), 'meta', true],
-  [e(65), 'a', true],
-  [e(83, 'alt', 'meta'), 'cmd+s', false],
-  [e('a', 'ctrl'), 'a', false],
-  [e(83, 'alt', 'meta'), 'cmd+alt?+s', true],
-  [e(83, 'meta'), 'cmd+alt?+s', true],
-  [e('?'), '?', true],
-  [e(13), 'enter', true],
-  [e(65, 'meta'), 'cmd+a', true],
-  [e(83, 'meta'), 'cmd+s', true],
-  [e('s', 'meta'), 'Meta+S', true],
-  [e('ß', 'alt', 'meta'), 'Meta+Alt+ß', true],
-  [e('s', 'meta'), 'meta+s', true],
-  [e('s', 'meta'), 'cmd+s', true],
-  [e(' ', 'meta'), 'cmd+space', true],
-  [e('+', 'meta'), 'cmd++', true],
-  [e('s', 'ctrl'), 'mod+s', true],
-  [e('Shift', 'shift'), 'shift', true],
-  [e('a'), 'a', true],
-  [e('s', 'alt', 'meta'), 'cmd+s', false],
-  [e('a', 'ctrl'), 'a', false],
-  [e('s', 'alt', 'meta'), 'cmd+alt?+s', true],
-  [e('s', 'meta'), 'cmd+alt?+s', true],
-  [e('Enter'), 'enter', true],
-  [e('a', 'meta'), 'meta+a', true],
-  [e('s', 'meta'), 'meta+s', true],
+type TestCase = [string, KeyboardEventLike, boolean]
+
+const testCases: TestCase[] = [
+  ['meta', e('Meta', ['metaKey']), true],
+  ['Meta', e('Meta', ['metaKey']), true],
+  ['meta', e(93, ['metaKey']), true],
+  ['Meta', e(93, ['metaKey']), true],
+
+  ['meta+s', e('s', ['metaKey']), true],
+  ['Meta+S', e('s', ['metaKey']), true],
+  ['meta+s', e(83, ['metaKey']), true],
+  ['Meta+S', e(83, ['metaKey']), true],
+
+  ['cmd+space', e(' ', ['metaKey']), true],
+  ['Cmd+Space', e(' ', ['metaKey']), true],
+  ['cmd+space', e(32, ['metaKey']), true],
+  ['Cmd+Space', e(32, ['metaKey']), true],
+
+  ['cmd+alt?+s', e('s', ['metaKey']), true],
+  ['cmd+alt?+s', e('s', ['metaKey', 'altKey']), true],
+  ['cmd+alt?+s', e(83, ['metaKey']), true],
+  ['cmd+alt?+s', e(83, ['metaKey', 'altKey']), true],
+
+  ['Cmd+Alt?+S', e('s', ['metaKey']), true],
+  ['Cmd+Alt?+S', e('s', ['metaKey', 'altKey']), true],
+  ['Cmd+Alt?+S', e(83, ['metaKey']), true],
+  ['Cmd+Alt?+S', e(83, ['metaKey', 'altKey']), true],
+
+  ['cmd+s', e('s', ['metaKey', 'altKey']), false],
+  ['Cmd+S', e('s', ['metaKey', 'altKey']), false],
+  ['cmd+s', e(83, ['metaKey', 'altKey']), false],
+  ['Cmd+S', e(83, ['metaKey', 'altKey']), false],
+
+  ['cmd+s', e('s', ['metaKey']), true],
+  ['Cmd+s', e('s', ['metaKey']), true],
+  ['cmd+s', e(83, ['metaKey']), true],
+  ['Cmd+s', e(83, ['metaKey']), true],
+
+  ['mod+s', e('s', ['ctrlKey']), true],
+  ['Mod+S', e('s', ['ctrlKey']), true],
+  ['mod+s', e(83, ['ctrlKey']), true],
+  ['Mod+S', e(83, ['ctrlKey']), true],
+
+  ['meta+alt+s', e('s', ['metaKey', 'altKey']), true],
+  ['Meta+Alt+S', e('s', ['metaKey', 'altKey']), true],
+  ['meta+alt+s', e(83, ['metaKey', 'altKey']), true],
+  ['Meta+Alt+S', e(83, ['metaKey', 'altKey']), true],
+
+  ['?', e('?'), true],
+  ['?', e('?', ['altKey']), false],
+
+  ['a', e('a'), true],
+  ['a', e('A'), true],
+  ['A', e('a'), true],
+  ['A', e('A'), true],
+  ['a', e(65), true],
+  ['A', e(65), true],
+
+  ['a', e('a', ['ctrlKey']), false],
+  ['A', e('a', ['ctrlKey']), false],
+  ['a', e(65, ['ctrlKey']), false],
+  ['A', e(65, ['ctrlKey']), false],
+
+  ['shift', e('Shift', ['shiftKey']), true],
+  ['Shift', e('Shift', ['shiftKey']), true],
+  ['shift', e(16, ['shiftKey']), true],
+  ['Shift', e(16, ['shiftKey']), true],
+
+  ['meta+a', e('a', ['metaKey']), true],
+  ['Meta+A', e('a', ['metaKey']), true],
+  ['cmd+a', e(65, ['metaKey']), true],
+  ['Cmd+A', e(65, ['metaKey']), true],
+
+  ['enter', e('Enter'), true],
+  ['Enter', e('Enter'), true],
+  ['enter', e(13), true],
+  ['Enter', e(13), true],
+  ['enter', e('Enter', ['shiftKey']), false],
+  ['Enter', e('Enter', ['shiftKey']), false],
+
+  ['cmd+=', e(187, ['metaKey']), true],
+  ['Cmd+=', e(187, ['metaKey']), true],
+  ['cmd++', e('+', ['metaKey']), true],
+  ['Cmd++', e('+', ['metaKey']), true],
+
+  ['meta+alt+ß', e('ß', ['metaKey', 'altKey']), true],
+  ['Meta+Alt+ß', e('ß', ['metaKey', 'altKey']), true],
 ] satisfies Array<TestCase>
 
 test(isHotkey.name, () => {
   for (const testCase of testCases) {
-    expect(isHotkey(testCase[1], testCase[0])).toBe(testCase[2])
+    expect(isHotkey(testCase[0], testCase[1])).toBe(testCase[2])
   }
 
-  expect(() => isHotkey('ctrlalt+k', e('k', 'ctrl', 'alt'))).toThrowError(
-    'Unknown modifier: "ctrlalt"',
-  )
+  expect(() =>
+    isHotkey('ctrlalt+k', e('k', ['ctrlKey', 'altKey'])),
+  ).toThrowError('Unknown modifier: "ctrlalt"')
 })

package/src/utils/is-hotkey.ts

@@ -1,6 +1,6 @@
 export interface KeyboardEventLike {
   key: string
-  keyCode: number
+  keyCode?: number
   altKey: boolean
   ctrlKey: boolean
   metaKey: boolean

package/src/utils/operationToPatches.ts

@@ -438,6 +438,11 @@ export function createOperationToPatches(
     const patches: Patch[] = []
     const block = beforeValue[operation.path[0]]
     const targetBlock = beforeValue[operation.newPath[0]]
+
+    if (!targetBlock) {
+      return patches
+    }
+
     if (operation.path.length === 1) {
       const position: InsertPosition =
         operation.path[0] > operation.newPath[0] ? 'before' : 'after'

package/src/utils/paths.ts

@@ -7,10 +7,7 @@ import {
   type Point,
   type Path as SlatePath,
 } from 'slate'
-import type {
-  EditorSelectionPoint,
-  PortableTextMemberSchemaTypes,
-} from '../types/editor'
+import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import type {ObjectWithKeyAndType} from './ranges'
 
 export function createKeyedPath(
@@ -41,10 +38,7 @@ export function createKeyedPath(
   ) as Path
 }
 
-export function createArrayedPath(
-  point: EditorSelectionPoint,
-  editor: Editor,
-): SlatePath {
+export function toSlatePath(path: Path, editor: Editor): SlatePath {
   if (!editor) {
     return []
   }
@@ -52,8 +46,7 @@ export function createArrayedPath(
     Editor.nodes(editor, {
       at: [],
       match: (n) =>
-        isKeySegment(point.path[0]) &&
-        (n as Descendant)._key === point.path[0]._key,
+        isKeySegment(path[0]) && (n as Descendant)._key === path[0]._key,
     }),
   )[0] || [undefined, undefined]
   if (!block || !Element.isElement(block)) {
@@ -62,7 +55,7 @@ export function createArrayedPath(
   if (editor.isVoid(block)) {
     return [blockPath[0], 0]
   }
-  const childPath = [point.path[2]]
+  const childPath = [path[2]]
   const childIndex = block.children.findIndex((child) =>
     isEqual([{_key: child._key}], childPath),
   )

package/src/utils/ranges.ts

@@ -4,7 +4,7 @@ import type {
   EditorSelectionPoint,
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
-import {createArrayedPath, createKeyedPath} from './paths'
+import {createKeyedPath, toSlatePath} from './paths'
 
 export interface ObjectWithKeyAndType {
   _key: string
@@ -50,11 +50,11 @@ export function toSlateRange(
     return null
   }
   const anchor = {
-    path: createArrayedPath(selection.anchor, editor),
+    path: toSlatePath(selection.anchor.path, editor),
     offset: selection.anchor.offset,
   }
   const focus = {
-    path: createArrayedPath(selection.focus, editor),
+    path: toSlatePath(selection.focus.path, editor),
     offset: selection.focus.offset,
   }
   if (focus.path.length === 0 || anchor.path.length === 0) {