@portabletext/editor 1.44.12 → 1.44.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.12",
+  "version": "1.44.14",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -93,10 +93,10 @@
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.13",
     "@types/lodash.startcase": "^4.4.9",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-istanbul": "^3.1.1",
@@ -109,7 +109,7 @@
     "react-dom": "^19.1.0",
     "rxjs": "^7.8.2",
     "typescript": "5.8.2",
-    "vite": "^6.2.0",
+    "vite": "^6.2.5",
     "vitest": "^3.1.1",
     "vitest-browser-react": "^0.1.1",
     "racejar": "1.2.3"

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/define-schema.ts

@@ -3,6 +3,7 @@ import {defineField, defineType, type ObjectSchemaType} from '@sanity/types'
 import startCase from 'lodash.startcase'
 import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import {createEditorSchema} from './create-editor-schema'
+import {defaultKeyGenerator} from './key-generator'
 
 /**
  * @public
@@ -55,6 +56,24 @@ export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
   return definition
 }
 
+const temporaryImageName = `tmp-${defaultKeyGenerator()}-image`
+const temporaryUrlName = `tmp-${defaultKeyGenerator()}-url`
+
+const temporaryObjectNames: Record<string, string> = {
+  image: temporaryImageName,
+  url: temporaryUrlName,
+}
+
+const objectNames: Record<string, string> = {
+  [temporaryImageName]: 'image',
+  [temporaryUrlName]: 'url',
+}
+
+const defaultObjectTitles: Record<string, string> = {
+  image: 'Image',
+  url: 'URL',
+}
+
 /**
  * @public
  */
@@ -68,21 +87,30 @@ export function compileSchemaDefinition<
       defineType({
         type: 'object',
         // Very naive way to work around `SanitySchema.compile` adding default
-        // fields to objects with the name `image`
-        name: blockObject.name === 'image' ? 'tmp-image' : blockObject.name,
+        // fields to objects with certain names.
+        name: temporaryObjectNames[blockObject.name] ?? blockObject.name,
         title:
-          blockObject.name === 'image' && blockObject.title === undefined
-            ? 'Image'
+          blockObject.title === undefined
+            ? // This avoids the default title which is a title case of the object name
+              defaultObjectTitles[blockObject.name]
             : blockObject.title,
         fields: [],
       }),
     ) ?? []
+
   const inlineObjects =
     definition?.inlineObjects?.map((inlineObject) =>
       defineType({
         type: 'object',
-        name: inlineObject.name,
-        title: inlineObject.title,
+        // Very naive way to work around `SanitySchema.compile` adding default
+        // fields to objects with certain names.
+        name: temporaryObjectNames[inlineObject.name] ?? inlineObject.name,
+
+        title:
+          inlineObject.title === undefined
+            ? // This avoids the default title which is a title case of the object name
+              defaultObjectTitles[inlineObject.name]
+            : inlineObject.title,
         fields: [],
       }),
     ) ?? []
@@ -132,16 +160,24 @@ export function compileSchemaDefinition<
   return {
     ...pteSchema,
     blockObjects: pteSchema.blockObjects.map((blockObject) =>
-      blockObject.name === 'tmp-image'
+      objectNames[blockObject.name] !== undefined
         ? ({
             ...blockObject,
-            name: 'image',
+            name: objectNames[blockObject.name],
             type: {
               ...blockObject.type,
-              name: 'image',
+              name: objectNames[blockObject.name],
             },
           } as ObjectSchemaType)
         : blockObject,
     ),
+    inlineObjects: pteSchema.inlineObjects.map((inlineObject) =>
+      objectNames[inlineObject.name] !== undefined
+        ? ({
+            ...inlineObject,
+            name: objectNames[inlineObject.name],
+          } as ObjectSchemaType)
+        : inlineObject,
+    ),
   } satisfies EditorSchema
 }