@portabletext/editor 1.11.3 → 1.12.1

package/src/editor/behavior/behavior.utils.get-selection-text.ts

@@ -0,0 +1,92 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type PortableTextBlock,
+} from '@sanity/types'
+import type {EditorSelection} from '../../types/editor'
+import {isKeyedSegment} from './behavior.utils.is-keyed-segment'
+import {reverseSelection} from './behavior.utils.reverse-selection'
+
+export function getSelectionText({
+  value,
+  selection,
+}: {
+  value: Array<PortableTextBlock>
+  selection: NonNullable<EditorSelection>
+}): string {
+  let text = ''
+
+  if (!value || !selection) {
+    return text
+  }
+
+  const forwardSelection = selection.backward
+    ? reverseSelection(selection)
+    : selection
+
+  if (!forwardSelection) {
+    return text
+  }
+
+  for (const block of value) {
+    if (
+      isKeyedSegment(forwardSelection.anchor.path[0]) &&
+      block._key !== forwardSelection.anchor.path[0]._key
+    ) {
+      continue
+    }
+
+    if (!isPortableTextTextBlock(block)) {
+      continue
+    }
+
+    for (const child of block.children) {
+      if (isPortableTextSpan(child)) {
+        if (
+          isKeyedSegment(forwardSelection.anchor.path[2]) &&
+          child._key === forwardSelection.anchor.path[2]._key &&
+          isKeyedSegment(forwardSelection.focus.path[2]) &&
+          child._key === forwardSelection.focus.path[2]._key
+        ) {
+          text =
+            text +
+            child.text.slice(
+              forwardSelection.anchor.offset,
+              forwardSelection.focus.offset,
+            )
+
+          break
+        }
+
+        if (
+          isKeyedSegment(forwardSelection.anchor.path[2]) &&
+          child._key === forwardSelection.anchor.path[2]._key
+        ) {
+          text = text + child.text.slice(forwardSelection.anchor.offset)
+          continue
+        }
+
+        if (
+          isKeyedSegment(forwardSelection.focus.path[2]) &&
+          child._key === forwardSelection.focus.path[2]._key
+        ) {
+          text = text + child.text.slice(0, forwardSelection.focus.offset)
+          break
+        }
+
+        if (text.length > 0) {
+          text + child.text
+        }
+      }
+    }
+
+    if (
+      isKeyedSegment(forwardSelection.focus.path[0]) &&
+      block._key === forwardSelection.focus.path[0]._key
+    ) {
+      break
+    }
+  }
+
+  return text
+}

package/src/editor/behavior/behavior.utils.get-start-point.ts

@@ -0,0 +1,26 @@
+import {
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+} from '@sanity/types'
+import type {EditorSelectionPoint} from '../../types/editor'
+
+export function getStartPoint({
+  node,
+  path,
+}: {
+  node: PortableTextBlock
+  path: [KeyedSegment]
+}): EditorSelectionPoint {
+  if (isPortableTextTextBlock(node)) {
+    return {
+      path: [...path, 'children', {_key: node.children[0]._key}],
+      offset: 0,
+    }
+  }
+
+  return {
+    path,
+    offset: 0,
+  }
+}

package/src/editor/behavior/behavior.utils.is-keyed-segment.ts

@@ -0,0 +1,5 @@
+import type {KeyedSegment, PathSegment} from '@sanity/types'
+
+export function isKeyedSegment(segment: PathSegment): segment is KeyedSegment {
+  return typeof segment === 'object' && segment !== null && '_key' in segment
+}

package/src/editor/behavior/behavior.utils.reverse-selection.ts

@@ -0,0 +1,21 @@
+import type {EditorSelection} from '../../types/editor'
+
+export function reverseSelection(selection: EditorSelection): EditorSelection {
+  if (!selection) {
+    return selection
+  }
+
+  if (selection.backward) {
+    return {
+      anchor: selection.focus,
+      focus: selection.anchor,
+      backward: false,
+    }
+  }
+
+  return {
+    anchor: selection.focus,
+    focus: selection.anchor,
+    backward: true,
+  }
+}

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

@@ -202,6 +202,17 @@ export function getNextBlock(
   return undefined
 }
 
-export function isEmptyTextBlock(block: PortableTextTextBlock) {
-  return block.children.length === 1 && block.children[0].text === ''
+export function isEmptyTextBlock(block: PortableTextBlock) {
+  if (!isPortableTextTextBlock(block)) {
+    return false
+  }
+
+  const onlyText = block.children.every(isPortableTextSpan)
+  const blockText = getTextBlockText(block)
+
+  return onlyText && blockText === ''
+}
+
+export function getTextBlockText(block: PortableTextTextBlock) {
+  return block.children.map((child) => child.text ?? '').join('')
 }

package/src/editor/behavior/behavior.utilts.get-text-before.ts

@@ -0,0 +1,31 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorSelectionPoint} from '../../types/editor'
+import {getSelectionText} from './behavior.utils.get-selection-text'
+import {getStartPoint} from './behavior.utils.get-start-point'
+import {isKeyedSegment} from './behavior.utils.is-keyed-segment'
+
+export function getBlockTextBefore({
+  value,
+  point,
+}: {
+  value: Array<PortableTextBlock>
+  point: EditorSelectionPoint
+}) {
+  const key = isKeyedSegment(point.path[0]) ? point.path[0]._key : undefined
+
+  const block = key ? value.find((block) => block._key === key) : undefined
+
+  if (!block) {
+    return ''
+  }
+
+  const startPoint = getStartPoint({node: block, path: [{_key: block._key}]})
+
+  return getSelectionText({
+    value,
+    selection: {
+      anchor: startPoint,
+      focus: point,
+    },
+  })
+}

package/src/editor/plugins/createWithEditableAPI.ts

@@ -26,15 +26,12 @@ import type {
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange, toSlateRange} from '../../utils/ranges'
-import {
-  fromSlateValue,
-  isEqualToEmptyEditor,
-  toSlateValue,
-} from '../../utils/values'
+import {fromSlateValue, toSlateValue} from '../../utils/values'
 import {
   KEY_TO_VALUE_ELEMENT,
   SLATE_TO_PORTABLE_TEXT_RANGE,
 } from '../../utils/weakMaps'
+import {insertBlockObjectActionImplementation} from '../behavior/behavior.action.insert-block-object'
 import type {BehaviorActionImplementation} from '../behavior/behavior.actions'
 import type {EditorActor} from '../editor-machine'
 import {isDecoratorActive} from './createWithPortableTextMarkModel'
@@ -206,18 +203,35 @@ export function createEditableAPI(
       type: TSchemaType,
       value?: {[prop: string]: any},
     ): Path => {
-      return insertBlockObjectActionImplementation({
+      insertBlockObjectActionImplementation({
         context: {
           keyGenerator: editorActor.getSnapshot().context.keyGenerator,
           schema: types,
         },
         action: {
           type: 'insert block object',
-          name: type.name,
-          value,
+          blockObject: {
+            name: type.name,
+            value,
+          },
+          placement: 'auto',
           editor,
         },
       })
+
+      editor.onChange()
+
+      return (
+        toPortableTextRange(
+          fromSlateValue(
+            editor.children,
+            types.block.name,
+            KEY_TO_VALUE_ELEMENT.get(editor),
+          ),
+          editor.selection,
+          types,
+        )?.focus.path ?? []
+      )
     },
     hasBlockStyle: (style: string): boolean => {
       try {
@@ -487,85 +501,6 @@ export function createEditableAPI(
   return editableApi
 }
 
-export const insertBlockObjectActionImplementation: BehaviorActionImplementation<
-  'insert block object',
-  Path
-> = ({context, action}) => {
-  const editor = action.editor
-  const types = context.schema
-  const block = toSlateValue(
-    [
-      {
-        _key: context.keyGenerator(),
-        _type: action.name,
-        ...(action.value ? action.value : {}),
-      },
-    ],
-    {schemaTypes: context.schema},
-  )[0] as unknown as Node
-
-  if (!editor.selection) {
-    const lastBlock = Array.from(
-      Editor.nodes(editor, {
-        match: (n) => !Editor.isEditor(n),
-        at: [],
-        reverse: true,
-      }),
-    )[0]
-
-    // If there is no selection, let's just insert the new block at the
-    // end of the document
-    Editor.insertNode(editor, block)
-
-    if (lastBlock && isEqualToEmptyEditor([lastBlock[0]], types)) {
-      // And if the last block was an empty text block, let's remove
-      // that too
-      Transforms.removeNodes(editor, {at: lastBlock[1]})
-    }
-
-    editor.onChange()
-
-    return (
-      toPortableTextRange(
-        fromSlateValue(
-          editor.children,
-          types.block.name,
-          KEY_TO_VALUE_ELEMENT.get(editor),
-        ),
-        editor.selection,
-        types,
-      )?.focus.path ?? []
-    )
-  }
-
-  const focusBlock = Array.from(
-    Editor.nodes(editor, {
-      at: editor.selection.focus.path.slice(0, 1),
-      match: (n) => n._type === types.block.name,
-    }),
-  )[0]
-
-  Editor.insertNode(editor, block)
-
-  if (focusBlock && isEqualToEmptyEditor([focusBlock[0]], types)) {
-    Transforms.removeNodes(editor, {at: focusBlock[1]})
-  }
-
-  editor.onChange()
-
-  return (
-    toPortableTextRange(
-      fromSlateValue(
-        editor.children,
-        types.block.name,
-        KEY_TO_VALUE_ELEMENT.get(editor),
-      ),
-      editor.selection,
-      types,
-    )?.focus.path || []
-  )
-}
-
 function isAnnotationActive({
   editor,
   annotation,

package/src/index.ts

@@ -20,6 +20,7 @@ export {
   type OmitFromUnion,
   type PickFromUnion,
 } from './editor/behavior/behavior.types'
+export type {BlockOffset} from './editor/behavior/behavior.utils.block-offset'
 export type {SlateEditor} from './editor/create-slate-editor'
 export {
   defineSchema,