@portabletext/editor 1.0.19 → 1.1.0

package/src/editor/plugins/createWithEditableAPI.ts

@@ -5,14 +5,23 @@ import {
   type PortableTextBlock,
   type PortableTextChild,
   type PortableTextObject,
+  type PortableTextSpan,
   type PortableTextTextBlock,
   type SchemaType,
 } from '@sanity/types'
-import {Editor, Element as SlateElement, Node, Range, Text, Transforms} from 'slate'
+import {
+  Editor,
+  Node,
+  Range,
+  Element as SlateElement,
+  Path as SlatePath,
+  Text,
+  Transforms,
+} from 'slate'
 import {ReactEditor} from 'slate-react'
 import {type DOMNode} from 'slate-react/dist/utils/dom'
-
 import {
+  type EditableAPI,
   type EditableAPIDeleteOptions,
   type EditorSelection,
   type PortableTextMemberSchemaTypes,
@@ -20,8 +29,15 @@ import {
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange, toSlateRange} from '../../utils/ranges'
-import {fromSlateValue, isEqualToEmptyEditor, toSlateValue} from '../../utils/values'
-import {KEY_TO_VALUE_ELEMENT, SLATE_TO_PORTABLE_TEXT_RANGE} from '../../utils/weakMaps'
+import {
+  fromSlateValue,
+  isEqualToEmptyEditor,
+  toSlateValue,
+} from '../../utils/values'
+import {
+  KEY_TO_VALUE_ELEMENT,
+  SLATE_TO_PORTABLE_TEXT_RANGE,
+} from '../../utils/weakMaps'
 import {type PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('API:editable')
@@ -31,7 +47,9 @@ export function createWithEditableAPI(
   types: PortableTextMemberSchemaTypes,
   keyGenerator: () => string,
 ) {
-  return function withEditableAPI(editor: PortableTextSlateEditor): PortableTextSlateEditor {
+  return function withEditableAPI(
+    editor: PortableTextSlateEditor,
+  ): PortableTextSlateEditor {
     portableTextEditor.setEditable({
       focus: (): void => {
         ReactEditor.focus(editor)
@@ -78,16 +96,26 @@ export function createWithEditableAPI(
       },
       focusBlock: (): PortableTextBlock | undefined => {
         if (editor.selection) {
-          const block = Node.descendant(editor, editor.selection.focus.path.slice(0, 1))
+          const block = Node.descendant(
+            editor,
+            editor.selection.focus.path.slice(0, 1),
+          )
           if (block) {
-            return fromSlateValue([block], types.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0]
+            return fromSlateValue(
+              [block],
+              types.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            )[0]
           }
         }
         return undefined
       },
       focusChild: (): PortableTextChild | undefined => {
         if (editor.selection) {
-          const block = Node.descendant(editor, editor.selection.focus.path.slice(0, 1))
+          const block = Node.descendant(
+            editor,
+            editor.selection.focus.path.slice(0, 1),
+          )
           if (block && editor.isTextBlock(block)) {
             const ptBlock = fromSlateValue(
               [block],
@@ -116,7 +144,9 @@ export function createWithEditableAPI(
           type.name !== types.span.name &&
           !types.inlineObjects.some((t) => t.name === type.name)
         ) {
-          throw new Error('This type cannot be inserted as a child to a text block')
+          throw new Error(
+            'This type cannot be inserted as a child to a text block',
+          )
         }
         const block = toSlateValue(
           [
@@ -142,7 +172,9 @@ export function createWithEditableAPI(
         // If we are inserting a span, and currently have focus on an inline object,
         // move the selection to the next span (guaranteed by normalizing rules) before inserting it.
         if (isSpanNode && focusNode._type !== types.span.name) {
-          debug('Inserting span child next to inline object child, moving selection + 1')
+          debug(
+            'Inserting span child next to inline object child, moving selection + 1',
+          )
           editor.move({distance: 1, unit: 'character'})
         }
 
@@ -153,7 +185,11 @@ export function createWithEditableAPI(
         editor.onChange()
         return (
           toPortableTextRange(
-            fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
+            fromSlateValue(
+              editor.children,
+              types.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
             editor.selection,
             types,
           )?.focus.path || []
@@ -194,7 +230,11 @@ export function createWithEditableAPI(
 
           return (
             toPortableTextRange(
-              fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
+              fromSlateValue(
+                editor.children,
+                types.block.name,
+                KEY_TO_VALUE_ELEMENT.get(editor),
+              ),
               editor.selection,
               types,
             )?.focus.path ?? []
@@ -218,7 +258,11 @@ export function createWithEditableAPI(
 
         return (
           toPortableTextRange(
-            fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
+            fromSlateValue(
+              editor.children,
+              types.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
             editor.selection,
             types,
           )?.focus.path || []
@@ -247,16 +291,25 @@ export function createWithEditableAPI(
       },
       findByPath: (
         path: Path,
-      ): [PortableTextBlock | PortableTextChild | undefined, Path | undefined] => {
+      ): [
+        PortableTextBlock | PortableTextChild | undefined,
+        Path | undefined,
+      ] => {
         const slatePath = toSlateRange(
           {focus: {path, offset: 0}, anchor: {path, offset: 0}},
           editor,
         )
         if (slatePath) {
-          const [block, blockPath] = Editor.node(editor, slatePath.focus.path.slice(0, 1))
+          const [block, blockPath] = Editor.node(
+            editor,
+            slatePath.focus.path.slice(0, 1),
+          )
           if (block && blockPath && typeof block._key === 'string') {
             if (path.length === 1 && slatePath.focus.path.length === 1) {
-              return [fromSlateValue([block], types.block.name)[0], [{_key: block._key}]]
+              return [
+                fromSlateValue([block], types.block.name)[0],
+                [{_key: block._key}],
+              ]
             }
             const ptBlock = fromSlateValue(
               [block],
@@ -266,14 +319,19 @@ export function createWithEditableAPI(
             if (editor.isTextBlock(ptBlock)) {
               const ptChild = ptBlock.children[slatePath.focus.path[1]]
               if (ptChild) {
-                return [ptChild, [{_key: block._key}, 'children', {_key: ptChild._key}]]
+                return [
+                  ptChild,
+                  [{_key: block._key}, 'children', {_key: ptChild._key}],
+                ]
               }
             }
           }
         }
         return [undefined, undefined]
       },
-      findDOMNode: (element: PortableTextBlock | PortableTextChild): DOMNode | undefined => {
+      findDOMNode: (
+        element: PortableTextBlock | PortableTextChild,
+      ): DOMNode | undefined => {
         let node: DOMNode | undefined
         try {
           const [item] = Array.from(
@@ -322,7 +380,9 @@ export function createWithEditableAPI(
           return []
         }
       },
-      isAnnotationActive: (annotationType: PortableTextObject['_type']): boolean => {
+      isAnnotationActive: (
+        annotationType: PortableTextObject['_type'],
+      ): boolean => {
         if (!editor.selection || editor.selection.focus.path.length < 2) {
           return false
         }
@@ -341,7 +401,10 @@ export function createWithEditableAPI(
 
           if (
             spans.some(
-              ([span]) => !isPortableTextSpan(span) || !span.marks || span.marks?.length === 0,
+              ([span]) =>
+                !isPortableTextSpan(span) ||
+                !span.marks ||
+                span.marks?.length === 0,
             )
           )
             return false
@@ -358,7 +421,8 @@ export function createWithEditableAPI(
             if (!isPortableTextSpan(span)) return false
 
             const spanMarkDefs = span.marks?.map(
-              (markKey) => selectionMarkDefs.find((def) => def?._key === markKey)?._type,
+              (markKey) =>
+                selectionMarkDefs.find((def) => def?._key === markKey)?._type,
             )
 
             return spanMarkDefs?.includes(annotationType)
@@ -367,27 +431,12 @@ export function createWithEditableAPI(
           return false
         }
       },
-      addAnnotation: (
-        type: ObjectSchemaType,
-        value?: {[prop: string]: unknown},
-      ): {spanPath: Path; markDefPath: Path} | undefined => {
+      addAnnotation: (type, value) => {
         const {selection: originalSelection} = editor
-        let returnValue: {spanPath: Path; markDefPath: Path} | undefined = undefined
-        if (originalSelection) {
-          const [block] = Editor.node(editor, originalSelection.focus, {depth: 1})
-          if (!editor.isTextBlock(block)) {
-            return undefined
-          }
-          const [textNode] = Editor.node(editor, originalSelection.focus, {depth: 2})
-
-          if (!isPortableTextSpan(textNode)) {
-            return undefined
-          }
-
-          if (textNode.text === '') {
-            return undefined
-          }
+        let returnValue: ReturnType<EditableAPI['addAnnotation']> | undefined =
+          undefined
 
+        if (originalSelection) {
           if (Range.isCollapsed(originalSelection)) {
             editor.pteExpandToWord()
             editor.onChange()
@@ -395,62 +444,131 @@ export function createWithEditableAPI(
 
           // If we still have a selection, add the annotation to the selected text
           if (editor.selection) {
+            let spanPath: Path | undefined
+            let markDefPath: Path | undefined
+            const markDefPaths: Path[] = []
+
             Editor.withoutNormalizing(editor, () => {
-              // Add markDefs to the block
-              const annotationKey = keyGenerator()
-              Transforms.setNodes(
-                editor,
-                {
-                  markDefs: [
-                    ...(block.markDefs || []),
-                    {_type: type.name, _key: annotationKey, ...value} as PortableTextObject,
-                  ],
-                },
-                {at: originalSelection.focus},
-              )
-              editor.onChange()
+              if (!editor.selection) {
+                return
+              }
 
-              // Split if needed
-              Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
-              editor.onChange()
+              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 = keyGenerator()
+                const markDefs = block.markDefs ?? []
+                const existingMarkDef = markDefs.find(
+                  (markDef) =>
+                    markDef._type === type.name &&
+                    markDef._key === annotationKey,
+                )
+
+                if (existingMarkDef === undefined) {
+                  Transforms.setNodes(
+                    editor,
+                    {
+                      markDefs: [
+                        ...markDefs,
+                        {
+                          _type: type.name,
+                          _key: annotationKey,
+                          ...value,
+                        },
+                      ],
+                    },
+                    {at: blockPath},
+                  )
+
+                  markDefPath = [
+                    {_key: block._key},
+                    'markDefs',
+                    {_key: annotationKey},
+                  ]
+                  if (Range.isBackward(editor.selection)) {
+                    markDefPaths.unshift(markDefPath)
+                  } else {
+                    markDefPaths.push(markDefPath)
+                  }
+                }
 
-              // Add marks to the span node
-              if (editor.selection && Text.isText(textNode)) {
                 Transforms.setNodes(
                   editor,
-                  {
-                    marks: [...((textNode.marks || []) as string[]), annotationKey],
-                  },
-                  {
-                    at: editor.selection,
-                    match: (n) => n._type === types.span.name,
-                  },
+                  {},
+                  {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 === type.name,
+                    ),
+                  )
+
+                  Transforms.setNodes(
+                    editor,
+                    {
+                      marks: [
+                        ...marks.filter(
+                          (mark) => !existingSameTypeAnnotations.includes(mark),
+                        ),
+                        annotationKey,
+                      ],
+                    },
+                    {at: path},
+                  )
+                  spanPath = [{_key: block._key}, 'children', {_key: span._key}]
+                }
               }
-              editor.onChange()
 
-              const newPortableTextEditorSelection = toPortableTextRange(
-                fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
-                editor.selection,
-                types,
-              )
-              if (newPortableTextEditorSelection) {
+              if (markDefPath && spanPath) {
                 returnValue = {
-                  spanPath: newPortableTextEditorSelection.focus.path,
-                  markDefPath: [{_key: block._key}, 'markDefs', {_key: annotationKey}],
+                  markDefPath,
+                  markDefPaths,
+                  spanPath,
                 }
               }
             })
-            Editor.normalize(editor)
             editor.onChange()
           }
         }
         return returnValue
       },
-      delete: (selection: EditorSelection, options?: EditableAPIDeleteOptions): void => {
+      delete: (
+        selection: EditorSelection,
+        options?: EditableAPIDeleteOptions,
+      ): void => {
         if (selection) {
           const range = toSlateRange(selection, editor)
-          const hasRange = range && range.anchor.path.length > 0 && range.focus.path.length > 0
+          const hasRange =
+            range && range.anchor.path.length > 0 && range.focus.path.length > 0
           if (!hasRange) {
             throw new Error('Invalid range')
           }
@@ -497,61 +615,162 @@ export function createWithEditableAPI(
             // that would insert the placeholder into the actual value
             // which should remain empty)
             if (editor.children.length === 0) {
-              editor.children = [editor.pteCreateEmptyBlock()]
+              editor.children = [editor.pteCreateTextBlock({decorators: []})]
             }
             editor.onChange()
           }
         }
       },
       removeAnnotation: (type: ObjectSchemaType): void => {
-        let {selection} = editor
         debug('Removing annotation', type)
-        if (selection) {
-          // Select the whole annotation if collapsed
-          if (Range.isCollapsed(selection)) {
-            const [node, nodePath] = Editor.node(editor, selection, {depth: 2})
-            if (Text.isText(node) && node.marks && typeof node.text === 'string') {
-              Transforms.select(editor, nodePath)
-              selection = editor.selection
-            }
+
+        Editor.withoutNormalizing(editor, () => {
+          if (!editor.selection) {
+            return
           }
-          // Do this without normalization or span references will be unstable!
-          Editor.withoutNormalizing(editor, () => {
-            if (selection && Range.isExpanded(selection)) {
-              selection = editor.selection
-              if (!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 === type.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
               }
-              // Find the selected block, to identify the annotation to remove
-              const blocks = [
-                ...Editor.nodes(editor, {
-                  at: selection,
-                  match: (node) => {
-                    return (
-                      editor.isTextBlock(node) &&
-                      Array.isArray(node.markDefs) &&
-                      node.markDefs.some((def) => def._type === type.name)
-                    )
-                  },
-                }),
-              ]
-              const removedMarks: string[] = []
-
-              // Removes the marks from the text nodes
-              blocks.forEach(([block]) => {
-                if (editor.isTextBlock(block) && Array.isArray(block.markDefs)) {
-                  const marksToRemove = block.markDefs.filter((def) => def._type === type.name)
-                  marksToRemove.forEach((def) => {
-                    if (!removedMarks.includes(def._key)) removedMarks.push(def._key)
-                    Editor.removeMark(editor, def._key)
-                  })
+
+              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 !== type.name
+                })
+
+                if (marksWithoutAnnotation.length !== marks.length) {
+                  Transforms.setNodes(
+                    editor,
+                    {
+                      marks: marksWithoutAnnotation,
+                    },
+                    {at: childPath},
+                  )
+                }
+              }
             }
-          })
-          Editor.normalize(editor)
-          editor.onChange()
-        }
+          }
+        })
+        editor.onChange()
       },
       getSelection: (): EditorSelection | null => {
         let ptRange: EditorSelection = null
@@ -561,7 +780,11 @@ export function createWithEditableAPI(
             return existing
           }
           ptRange = toPortableTextRange(
-            fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
+            fromSlateValue(
+              editor.children,
+              types.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
             editor.selection,
             types,
           )
@@ -570,7 +793,11 @@ export function createWithEditableAPI(
         return ptRange
       },
       getValue: () => {
-        return fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor))
+        return fromSlateValue(
+          editor.children,
+          types.block.name,
+          KEY_TO_VALUE_ELEMENT.get(editor),
+        )
       },
       isCollapsedSelection: () => {
         return !!editor.selection && Range.isCollapsed(editor.selection)
@@ -585,7 +812,10 @@ export function createWithEditableAPI(
       getFragment: () => {
         return fromSlateValue(editor.getFragment(), types.block.name)
       },
-      isSelectionsOverlapping: (selectionA: EditorSelection, selectionB: EditorSelection) => {
+      isSelectionsOverlapping: (
+        selectionA: EditorSelection,
+        selectionB: EditorSelection,
+      ) => {
         // Convert the selections to Slate ranges
         const rangeA = toSlateRange(selectionA, editor)
         const rangeB = toSlateRange(selectionB, editor)