@portabletext/editor 1.44.13 → 1.44.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.13",
+  "version": "1.44.15",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -91,7 +91,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.16",
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",

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/behaviors/behavior.default.ts

@@ -1,5 +1,7 @@
+import type {ConverterEvent} from '../converters/converter.types'
 import {isTextBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
+import type {PickFromUnion} from '../type-utils'
 import {getTextBlockText} from '../utils'
 import {abstractAnnotationBehaviors} from './behavior.abstract.annotation'
 import {abstractDecoratorBehaviors} from './behavior.abstract.decorator'
@@ -15,44 +17,44 @@ import {defineBehavior} from './behavior.types.behavior'
 const raiseDeserializationSuccessOrFailure = defineBehavior({
   on: 'deserialize',
   guard: ({snapshot, event}) => {
-    const deserializeEvents = snapshot.context.converters.flatMap(
-      (converter) => {
-        const data = event.originEvent.originEvent.dataTransfer.getData(
-          converter.mimeType,
-        )
+    let success:
+      | PickFromUnion<ConverterEvent, 'type', 'deserialization.success'>
+      | undefined
+    const failures: Array<
+      PickFromUnion<ConverterEvent, 'type', 'deserialization.failure'>
+    > = []
 
-        if (!data) {
-          return []
-        }
+    for (const converter of snapshot.context.converters) {
+      const data = event.originEvent.originEvent.dataTransfer.getData(
+        converter.mimeType,
+      )
 
-        return [
-          converter.deserialize({
-            snapshot,
-            event: {type: 'deserialize', data},
-          }),
-        ]
-      },
-    )
+      if (!data) {
+        continue
+      }
 
-    const firstSuccess = deserializeEvents.find(
-      (deserializeEvent) => deserializeEvent.type === 'deserialization.success',
-    )
+      const deserializeEvent = converter.deserialize({
+        snapshot,
+        event: {type: 'deserialize', data},
+      })
+
+      if (deserializeEvent.type === 'deserialization.success') {
+        success = deserializeEvent
+        break
+      } else {
+        failures.push(deserializeEvent)
+      }
+    }
 
-    if (!firstSuccess) {
+    if (!success) {
       return {
         type: 'deserialization.failure',
         mimeType: '*/*',
-        reason: deserializeEvents
-          .map((deserializeEvent) =>
-            deserializeEvent.type === 'deserialization.failure'
-              ? deserializeEvent.reason
-              : '',
-          )
-          .join(', '),
+        reason: failures.map((failure) => failure.reason).join(', '),
       } as const
     }
 
-    return firstSuccess
+    return success
   },
   actions: [
     ({event}, deserializeEvent) => [

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')