@portabletext/editor 1.44.13 → 1.44.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.13",
+  "version": "1.44.14",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/behavior-actions/behavior.action.annotation.add.ts

@@ -0,0 +1,133 @@
+import type {Path} from '@sanity/types'
+import {Editor, Node, Range, Text, Transforms} from 'slate'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+/**
+ * @public
+ */
+export type AddedAnnotationPaths = {
+  /**
+   * @deprecated An annotation may be applied to multiple blocks, resulting
+   * in multiple `markDef`'s being created. Use `markDefPaths` instead.
+   */
+  markDefPath: Path
+  markDefPaths: Array<Path>
+  /**
+   * @deprecated Does not return anything meaningful since an annotation
+   * can span multiple blocks and spans. If references the span closest
+   * to the focus point of the selection.
+   */
+  spanPath: Path
+}
+
+export const addAnnotationActionImplementation: BehaviorActionImplementation<
+  'annotation.add',
+  AddedAnnotationPaths | undefined
+> = ({context, action}) => {
+  const editor = action.editor
+
+  if (!editor.selection || Range.isCollapsed(editor.selection)) {
+    return
+  }
+
+  let paths: AddedAnnotationPaths | undefined = undefined
+  let spanPath: Path | undefined
+  let markDefPath: Path | undefined
+  const markDefPaths: Path[] = []
+
+  const selectedBlocks = Editor.nodes(editor, {
+    at: editor.selection,
+    match: (node) => editor.isTextBlock(node),
+    reverse: Range.isBackward(editor.selection),
+  })
+
+  for (const [block, blockPath] of selectedBlocks) {
+    if (block.children.length === 0) {
+      continue
+    }
+
+    if (block.children.length === 1 && block.children[0].text === '') {
+      continue
+    }
+
+    const annotationKey = context.keyGenerator()
+    const markDefs = block.markDefs ?? []
+    const existingMarkDef = markDefs.find(
+      (markDef) =>
+        markDef._type === action.annotation.name &&
+        markDef._key === annotationKey,
+    )
+
+    if (existingMarkDef === undefined) {
+      Transforms.setNodes(
+        editor,
+        {
+          markDefs: [
+            ...markDefs,
+            {
+              _type: action.annotation.name,
+              _key: annotationKey,
+              ...action.annotation.value,
+            },
+          ],
+        },
+        {at: blockPath},
+      )
+
+      markDefPath = [{_key: block._key}, 'markDefs', {_key: annotationKey}]
+
+      if (Range.isBackward(editor.selection)) {
+        markDefPaths.unshift(markDefPath)
+      } else {
+        markDefPaths.push(markDefPath)
+      }
+    }
+
+    Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
+
+    const children = Node.children(editor, blockPath)
+
+    for (const [span, path] of children) {
+      if (!editor.isTextSpan(span)) {
+        continue
+      }
+
+      if (!Range.includes(editor.selection, path)) {
+        continue
+      }
+
+      const marks = span.marks ?? []
+      const existingSameTypeAnnotations = marks.filter((mark) =>
+        markDefs.some(
+          (markDef) =>
+            markDef._key === mark && markDef._type === action.annotation.name,
+        ),
+      )
+
+      Transforms.setNodes(
+        editor,
+        {
+          marks: [
+            ...marks.filter(
+              (mark) => !existingSameTypeAnnotations.includes(mark),
+            ),
+            annotationKey,
+          ],
+        },
+        {at: path},
+      )
+
+      spanPath = [{_key: block._key}, 'children', {_key: span._key}]
+    }
+  }
+
+  if (markDefPath && spanPath) {
+    paths = {
+      markDefPath,
+      markDefPaths,
+      spanPath,
+    }
+  }
+
+  return paths
+}

package/src/behavior-actions/behavior.action.annotation.remove.ts

@@ -0,0 +1,150 @@
+import type {PortableTextSpan} from '@sanity/types'
+import {Editor, Node, Path, Range, Transforms} from 'slate'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const removeAnnotationActionImplementation: BehaviorActionImplementation<
+  'annotation.remove'
+> = ({action}) => {
+  const editor = action.editor
+
+  if (!editor.selection) {
+    return
+  }
+
+  if (Range.isCollapsed(editor.selection)) {
+    const [block, blockPath] = Editor.node(editor, editor.selection, {
+      depth: 1,
+    })
+
+    if (!editor.isTextBlock(block)) {
+      return
+    }
+
+    const markDefs = block.markDefs ?? []
+    const potentialAnnotations = markDefs.filter(
+      (markDef) => markDef._type === action.annotation.name,
+    )
+
+    const [selectedChild, selectedChildPath] = Editor.node(
+      editor,
+      editor.selection,
+      {
+        depth: 2,
+      },
+    )
+
+    if (!editor.isTextSpan(selectedChild)) {
+      return
+    }
+
+    const annotationToRemove = selectedChild.marks?.find((mark) =>
+      potentialAnnotations.some((markDef) => markDef._key === mark),
+    )
+
+    if (!annotationToRemove) {
+      return
+    }
+
+    const previousSpansWithSameAnnotation: Array<
+      [span: PortableTextSpan, path: Path]
+    > = []
+
+    for (const [child, childPath] of Node.children(editor, blockPath, {
+      reverse: true,
+    })) {
+      if (!editor.isTextSpan(child)) {
+        continue
+      }
+
+      if (!Path.isBefore(childPath, selectedChildPath)) {
+        continue
+      }
+
+      if (child.marks?.includes(annotationToRemove)) {
+        previousSpansWithSameAnnotation.push([child, childPath])
+      } else {
+        break
+      }
+    }
+
+    const nextSpansWithSameAnnotation: Array<
+      [span: PortableTextSpan, path: Path]
+    > = []
+
+    for (const [child, childPath] of Node.children(editor, blockPath)) {
+      if (!editor.isTextSpan(child)) {
+        continue
+      }
+
+      if (!Path.isAfter(childPath, selectedChildPath)) {
+        continue
+      }
+
+      if (child.marks?.includes(annotationToRemove)) {
+        nextSpansWithSameAnnotation.push([child, childPath])
+      } else {
+        break
+      }
+    }
+
+    for (const [child, childPath] of [
+      ...previousSpansWithSameAnnotation,
+      [selectedChild, selectedChildPath] as const,
+      ...nextSpansWithSameAnnotation,
+    ]) {
+      Transforms.setNodes(
+        editor,
+        {
+          marks: child.marks?.filter((mark) => mark !== annotationToRemove),
+        },
+        {at: childPath},
+      )
+    }
+  } else {
+    Transforms.setNodes(
+      editor,
+      {},
+      {
+        match: (node) => editor.isTextSpan(node),
+        split: true,
+        hanging: true,
+      },
+    )
+
+    const blocks = Editor.nodes(editor, {
+      at: editor.selection,
+      match: (node) => editor.isTextBlock(node),
+    })
+
+    for (const [block, blockPath] of blocks) {
+      const children = Node.children(editor, blockPath)
+
+      for (const [child, childPath] of children) {
+        if (!editor.isTextSpan(child)) {
+          continue
+        }
+
+        if (!Range.includes(editor.selection, childPath)) {
+          continue
+        }
+
+        const markDefs = block.markDefs ?? []
+        const marks = child.marks ?? []
+        const marksWithoutAnnotation = marks.filter((mark) => {
+          const markDef = markDefs.find((markDef) => markDef._key === mark)
+          return markDef?._type !== action.annotation.name
+        })
+
+        if (marksWithoutAnnotation.length !== marks.length) {
+          Transforms.setNodes(
+            editor,
+            {
+              marks: marksWithoutAnnotation,
+            },
+            {at: childPath},
+          )
+        }
+      }
+    }
+  }
+}

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

@@ -1,10 +1,6 @@
 import {omit} from 'lodash'
 import type {InternalBehaviorAction} from '../behaviors/behavior.types.action'
 import type {EditorContext} from '../editor/editor-snapshot'
-import {
-  addAnnotationActionImplementation,
-  removeAnnotationActionImplementation,
-} from '../editor/plugins/createWithEditableAPI'
 import {removeDecoratorActionImplementation} from '../editor/plugins/createWithPortableTextMarkModel'
 import {
   historyRedoActionImplementation,
@@ -12,6 +8,8 @@ import {
 } from '../editor/plugins/createWithUndoRedo'
 import {debugWithName} from '../internal-utils/debug'
 import type {PickFromUnion} from '../type-utils'
+import {addAnnotationActionImplementation} from './behavior.action.annotation.add'
+import {removeAnnotationActionImplementation} from './behavior.action.annotation.remove'
 import {blockSetBehaviorActionImplementation} from './behavior.action.block.set'
 import {blockUnsetBehaviorActionImplementation} from './behavior.action.block.unset'
 import {blurActionImplementation} from './behavior.action.blur'

package/src/converters/converter.text-html.ts

@@ -1,6 +1,7 @@
 import {htmlToBlocks} from '@portabletext/block-tools'
 import {toHTML} from '@portabletext/to-html'
 import type {PortableTextBlock} from '@sanity/types'
+import {parseBlock} from '../internal-utils/parse-blocks'
 import {sliceBlocks} from '../utils'
 import {defineConverter} from './converter.types'
 
@@ -59,7 +60,18 @@ export const converterTextHtml = defineConverter({
       },
     ) as Array<PortableTextBlock>
 
-    if (blocks.length === 0) {
+    const parsedBlocks = blocks.flatMap((block) => {
+      const parsedBlock = parseBlock({
+        context: snapshot.context,
+        block,
+        options: {
+          refreshKeys: false,
+        },
+      })
+      return parsedBlock ? [parsedBlock] : []
+    })
+
+    if (parsedBlocks.length === 0) {
       return {
         type: 'deserialization.failure',
         mimeType: 'text/html',
@@ -69,7 +81,7 @@ export const converterTextHtml = defineConverter({
 
     return {
       type: 'deserialization.success',
-      data: blocks,
+      data: parsedBlocks,
       mimeType: 'text/html',
     }
   },

package/src/converters/converter.text-plain.ts

@@ -1,5 +1,6 @@
 import {htmlToBlocks} from '@portabletext/block-tools'
 import {isPortableTextTextBlock, type PortableTextBlock} from '@sanity/types'
+import {parseBlock} from '../internal-utils/parse-blocks'
 import {sliceBlocks} from '../utils'
 import {defineConverter} from './converter.types'
 
@@ -80,7 +81,18 @@ export const converterTextPlain = defineConverter({
       },
     ) as Array<PortableTextBlock>
 
-    if (blocks.length === 0) {
+    const parsedBlocks = blocks.flatMap((block) => {
+      const parsedBlock = parseBlock({
+        context: snapshot.context,
+        block,
+        options: {
+          refreshKeys: false,
+        },
+      })
+      return parsedBlock ? [parsedBlock] : []
+    })
+
+    if (parsedBlocks.length === 0) {
       return {
         type: 'deserialization.failure',
         mimeType: 'text/plain',
@@ -90,7 +102,7 @@ export const converterTextPlain = defineConverter({
 
     return {
       type: 'deserialization.success',
-      data: blocks,
+      data: parsedBlocks,
       mimeType: 'text/plain',
     }
   },

package/src/editor/PortableTextEditor.tsx

@@ -15,6 +15,7 @@ import {
 import {Subject} from 'rxjs'
 import {Slate} from 'slate-react'
 import {useEffectEvent} from 'use-effect-event'
+import type {AddedAnnotationPaths} from '../behavior-actions/behavior.action.annotation.add'
 import {debugWithName} from '../internal-utils/debug'
 import {compileType} from '../internal-utils/schema'
 import type {
@@ -34,7 +35,6 @@ 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'
 
 const debug = debugWithName('component:PortableTextEditor')
 

package/src/editor/plugins/createWithEditableAPI.ts

@@ -4,7 +4,6 @@ import {
   type PortableTextBlock,
   type PortableTextChild,
   type PortableTextObject,
-  type PortableTextSpan,
   type PortableTextTextBlock,
 } from '@sanity/types'
 import {
@@ -12,13 +11,12 @@ import {
   Node,
   Range,
   Element as SlateElement,
-  Path as SlatePath,
   Text,
   Transforms,
 } from 'slate'
 import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
-import type {BehaviorActionImplementation} from '../../behavior-actions/behavior.actions'
+import {addAnnotationActionImplementation} from '../../behavior-actions/behavior.action.annotation.add'
 import {debugWithName} from '../../internal-utils/debug'
 import {toSlateRange} from '../../internal-utils/ranges'
 import {
@@ -608,282 +606,3 @@ function isAnnotationActive({
     return false
   }
 }
-
-/**
- * @public
- */
-export type AddedAnnotationPaths = {
-  /**
-   * @deprecated An annotation may be applied to multiple blocks, resulting
-   * in multiple `markDef`'s being created. Use `markDefPaths` instead.
-   */
-  markDefPath: Path
-  markDefPaths: Array<Path>
-  /**
-   * @deprecated Does not return anything meaningful since an annotation
-   * can span multiple blocks and spans. If references the span closest
-   * to the focus point of the selection.
-   */
-  spanPath: Path
-}
-
-export const addAnnotationActionImplementation: BehaviorActionImplementation<
-  'annotation.add',
-  AddedAnnotationPaths | undefined
-> = ({context, action}) => {
-  const editor = action.editor
-
-  if (!editor.selection || Range.isCollapsed(editor.selection)) {
-    return
-  }
-
-  let paths: AddedAnnotationPaths | undefined = undefined
-  let spanPath: Path | undefined
-  let markDefPath: Path | undefined
-  const markDefPaths: Path[] = []
-
-  const selectedBlocks = Editor.nodes(editor, {
-    at: editor.selection,
-    match: (node) => editor.isTextBlock(node),
-    reverse: Range.isBackward(editor.selection),
-  })
-
-  for (const [block, blockPath] of selectedBlocks) {
-    if (block.children.length === 0) {
-      continue
-    }
-
-    if (block.children.length === 1 && block.children[0].text === '') {
-      continue
-    }
-
-    const annotationKey = context.keyGenerator()
-    const markDefs = block.markDefs ?? []
-    const existingMarkDef = markDefs.find(
-      (markDef) =>
-        markDef._type === action.annotation.name &&
-        markDef._key === annotationKey,
-    )
-
-    if (existingMarkDef === undefined) {
-      Transforms.setNodes(
-        editor,
-        {
-          markDefs: [
-            ...markDefs,
-            {
-              _type: action.annotation.name,
-              _key: annotationKey,
-              ...action.annotation.value,
-            },
-          ],
-        },
-        {at: blockPath},
-      )
-
-      markDefPath = [{_key: block._key}, 'markDefs', {_key: annotationKey}]
-
-      if (Range.isBackward(editor.selection)) {
-        markDefPaths.unshift(markDefPath)
-      } else {
-        markDefPaths.push(markDefPath)
-      }
-    }
-
-    Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
-
-    const children = Node.children(editor, blockPath)
-
-    for (const [span, path] of children) {
-      if (!editor.isTextSpan(span)) {
-        continue
-      }
-
-      if (!Range.includes(editor.selection, path)) {
-        continue
-      }
-
-      const marks = span.marks ?? []
-      const existingSameTypeAnnotations = marks.filter((mark) =>
-        markDefs.some(
-          (markDef) =>
-            markDef._key === mark && markDef._type === action.annotation.name,
-        ),
-      )
-
-      Transforms.setNodes(
-        editor,
-        {
-          marks: [
-            ...marks.filter(
-              (mark) => !existingSameTypeAnnotations.includes(mark),
-            ),
-            annotationKey,
-          ],
-        },
-        {at: path},
-      )
-
-      spanPath = [{_key: block._key}, 'children', {_key: span._key}]
-    }
-  }
-
-  if (markDefPath && spanPath) {
-    paths = {
-      markDefPath,
-      markDefPaths,
-      spanPath,
-    }
-  }
-
-  return paths
-}
-
-export const removeAnnotationActionImplementation: BehaviorActionImplementation<
-  'annotation.remove'
-> = ({action}) => {
-  const editor = action.editor
-
-  debug('Removing annotation', action.annotation.name)
-
-  if (!editor.selection) {
-    return
-  }
-
-  if (Range.isCollapsed(editor.selection)) {
-    const [block, blockPath] = Editor.node(editor, editor.selection, {
-      depth: 1,
-    })
-
-    if (!editor.isTextBlock(block)) {
-      return
-    }
-
-    const markDefs = block.markDefs ?? []
-    const potentialAnnotations = markDefs.filter(
-      (markDef) => markDef._type === action.annotation.name,
-    )
-
-    const [selectedChild, selectedChildPath] = Editor.node(
-      editor,
-      editor.selection,
-      {
-        depth: 2,
-      },
-    )
-
-    if (!editor.isTextSpan(selectedChild)) {
-      return
-    }
-
-    const annotationToRemove = selectedChild.marks?.find((mark) =>
-      potentialAnnotations.some((markDef) => markDef._key === mark),
-    )
-
-    if (!annotationToRemove) {
-      return
-    }
-
-    const previousSpansWithSameAnnotation: Array<
-      [span: PortableTextSpan, path: SlatePath]
-    > = []
-
-    for (const [child, childPath] of Node.children(editor, blockPath, {
-      reverse: true,
-    })) {
-      if (!editor.isTextSpan(child)) {
-        continue
-      }
-
-      if (!SlatePath.isBefore(childPath, selectedChildPath)) {
-        continue
-      }
-
-      if (child.marks?.includes(annotationToRemove)) {
-        previousSpansWithSameAnnotation.push([child, childPath])
-      } else {
-        break
-      }
-    }
-
-    const nextSpansWithSameAnnotation: Array<
-      [span: PortableTextSpan, path: SlatePath]
-    > = []
-
-    for (const [child, childPath] of Node.children(editor, blockPath)) {
-      if (!editor.isTextSpan(child)) {
-        continue
-      }
-
-      if (!SlatePath.isAfter(childPath, selectedChildPath)) {
-        continue
-      }
-
-      if (child.marks?.includes(annotationToRemove)) {
-        nextSpansWithSameAnnotation.push([child, childPath])
-      } else {
-        break
-      }
-    }
-
-    for (const [child, childPath] of [
-      ...previousSpansWithSameAnnotation,
-      [selectedChild, selectedChildPath] as const,
-      ...nextSpansWithSameAnnotation,
-    ]) {
-      Transforms.setNodes(
-        editor,
-        {
-          marks: child.marks?.filter((mark) => mark !== annotationToRemove),
-        },
-        {at: childPath},
-      )
-    }
-  } else {
-    Transforms.setNodes(
-      editor,
-      {},
-      {
-        match: (node) => editor.isTextSpan(node),
-        split: true,
-        hanging: true,
-      },
-    )
-
-    const blocks = Editor.nodes(editor, {
-      at: editor.selection,
-      match: (node) => editor.isTextBlock(node),
-    })
-
-    for (const [block, blockPath] of blocks) {
-      const children = Node.children(editor, blockPath)
-
-      for (const [child, childPath] of children) {
-        if (!editor.isTextSpan(child)) {
-          continue
-        }
-
-        if (!Range.includes(editor.selection, childPath)) {
-          continue
-        }
-
-        const markDefs = block.markDefs ?? []
-        const marks = child.marks ?? []
-        const marksWithoutAnnotation = marks.filter((mark) => {
-          const markDef = markDefs.find((markDef) => markDef._key === mark)
-          return markDef?._type !== action.annotation.name
-        })
-
-        if (marksWithoutAnnotation.length !== marks.length) {
-          Transforms.setNodes(
-            editor,
-            {
-              marks: marksWithoutAnnotation,
-            },
-            {at: childPath},
-          )
-        }
-      }
-    }
-  }
-}