@portabletext/editor 1.0.18 → 1.1.0

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -7,10 +7,19 @@
  */
 
 import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
+import {type PortableTextObject} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {type Subject} from 'rxjs'
-import {type Descendant, Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
-
+import {
+  Editor,
+  Element,
+  Node,
+  Path,
+  Range,
+  Text,
+  Transforms,
+  type Descendant,
+} from 'slate'
 import {
   type EditorChange,
   type PortableTextMemberSchemaTypes,
@@ -18,7 +27,6 @@ import {
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange} from '../../utils/ranges'
-import {EMPTY_MARKS} from '../../utils/values'
 import {isChangingRemotely} from '../../utils/withChanges'
 import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 
@@ -48,7 +56,11 @@ export function createWithPortableTextMarkModel(
         Transforms.select(editor, {...editor.selection})
         editor.selection = {...editor.selection} // Ensure new object
       }
-      const ptRange = toPortableTextRange(editor.children, editor.selection, types)
+      const ptRange = toPortableTextRange(
+        editor.children,
+        editor.selection,
+        types,
+      )
       change$.next({type: 'selection', selection: ptRange})
     }
 
@@ -56,9 +68,6 @@ export function createWithPortableTextMarkModel(
     editor.normalizeNode = (nodeEntry) => {
       const [node, path] = nodeEntry
 
-      const isSpan = Text.isText(node) && node._type === types.span.name
-      const isTextBlock = editor.isTextBlock(node)
-
       if (editor.isTextBlock(node)) {
         const children = Node.children(editor, path)
 
@@ -75,148 +84,160 @@ export function createWithPortableTextMarkModel(
               JSON.stringify(child, null, 2),
               JSON.stringify(nextNode, null, 2),
             )
-            Transforms.mergeNodes(editor, {at: [childPath[0], childPath[1] + 1], voids: true})
+            Transforms.mergeNodes(editor, {
+              at: [childPath[0], childPath[1] + 1],
+              voids: true,
+            })
             return
           }
         }
       }
 
-      if (isSpan || isTextBlock) {
-        if (isSpan && !Array.isArray(node.marks)) {
-          debug('Adding .marks to span node')
-          Transforms.setNodes(editor, {marks: []}, {at: path})
-          return
-        }
-        const hasSpanMarks = isSpan && (node.marks || []).length > 0
-        if (hasSpanMarks) {
-          const spanMarks = node.marks || EMPTY_MARKS
-          // Test that every annotation mark used has a definition in markDefs
-          const annotationMarks = spanMarks.filter(
-            (mark) => !types.decorators.map((dec) => dec.value).includes(mark),
-          )
-          if (annotationMarks.length > 0) {
-            const [block] = Editor.node(editor, Path.parent(path))
-            const orphanedMarks =
-              (editor.isTextBlock(block) &&
-                annotationMarks.filter(
-                  (mark) => !block.markDefs?.find((def) => def._key === mark),
-                )) ||
-              []
-            if (orphanedMarks.length > 0) {
-              debug('Removing orphaned .marks from span node')
-              Transforms.setNodes(
-                editor,
-                {marks: spanMarks.filter((mark) => !orphanedMarks.includes(mark))},
-                {at: path},
-              )
-              return
-            }
+      /**
+       * Add missing .markDefs to block nodes
+       */
+      if (editor.isTextBlock(node) && !Array.isArray(node.markDefs)) {
+        debug('Adding .markDefs to block node')
+        Transforms.setNodes(editor, {markDefs: []}, {at: path})
+        return
+      }
+
+      /**
+       * Add missing .marks to span nodes
+       */
+      if (editor.isTextSpan(node) && !Array.isArray(node.marks)) {
+        debug('Adding .marks to span node')
+        Transforms.setNodes(editor, {marks: []}, {at: path})
+        return
+      }
+
+      /**
+       * Remove annotations from empty spans
+       */
+      if (editor.isTextSpan(node)) {
+        const blockPath = Path.parent(path)
+        const [block] = Editor.node(editor, blockPath)
+        const decorators = types.decorators.map((decorator) => decorator.value)
+        const annotations = node.marks?.filter(
+          (mark) => !decorators.includes(mark),
+        )
+
+        if (editor.isTextBlock(block)) {
+          if (node.text === '' && annotations && annotations.length > 0) {
+            debug('Removing annotations from empty span node')
+            Transforms.setNodes(
+              editor,
+              {marks: node.marks?.filter((mark) => decorators.includes(mark))},
+              {at: path},
+            )
+            return
           }
         }
-        for (const op of editor.operations) {
-          // Make sure markDefs are copied over when merging two blocks.
-          if (
-            op.type === 'merge_node' &&
-            op.path.length === 1 &&
-            'markDefs' in op.properties &&
-            op.properties._type === types.block.name &&
-            Array.isArray(op.properties.markDefs) &&
-            op.properties.markDefs.length > 0 &&
-            op.path[0] - 1 >= 0
-          ) {
-            const [targetBlock, targetPath] = Editor.node(editor, [op.path[0] - 1])
-            debug(`Copying markDefs over to merged block`, op)
-            if (editor.isTextBlock(targetBlock)) {
-              const oldDefs = (Array.isArray(targetBlock.markDefs) && targetBlock.markDefs) || []
-              const newMarkDefs = uniq([...oldDefs, ...op.properties.markDefs])
-              const isNormalized = isEqual(newMarkDefs, targetBlock.markDefs)
-              // eslint-disable-next-line max-depth
-              if (!isNormalized) {
-                Transforms.setNodes(editor, {markDefs: newMarkDefs}, {at: targetPath, voids: false})
-                return
-              }
-            }
-          }
-          // Make sure markDefs are copied over to new block when splitting a block.
-          if (
-            op.type === 'split_node' &&
-            op.path.length === 1 &&
-            Element.isElementProps(op.properties) &&
-            op.properties._type === types.block.name &&
-            'markDefs' in op.properties &&
-            Array.isArray(op.properties.markDefs) &&
-            op.properties.markDefs.length > 0 &&
-            op.path[0] + 1 < editor.children.length
-          ) {
-            const [targetBlock, targetPath] = Editor.node(editor, [op.path[0] + 1])
-            debug(`Copying markDefs over to split block`, op)
-            if (editor.isTextBlock(targetBlock)) {
-              const oldDefs = (Array.isArray(targetBlock.markDefs) && targetBlock.markDefs) || []
+      }
+
+      /**
+       * Remove orphaned annotations from child spans of block nodes
+       */
+      if (editor.isTextBlock(node)) {
+        const decorators = types.decorators.map((decorator) => decorator.value)
+
+        for (const [child, childPath] of Node.children(editor, path)) {
+          if (editor.isTextSpan(child)) {
+            const marks = child.marks ?? []
+            const orphanedAnnotations = marks.filter((mark) => {
+              return (
+                !decorators.includes(mark) &&
+                !node.markDefs?.find((def) => def._key === mark)
+              )
+            })
+
+            if (orphanedAnnotations.length > 0) {
+              debug('Removing orphaned annotations from span node')
               Transforms.setNodes(
                 editor,
-                {markDefs: uniq([...oldDefs, ...op.properties.markDefs])},
-                {at: targetPath, voids: false},
+                {
+                  marks: marks.filter(
+                    (mark) => !orphanedAnnotations.includes(mark),
+                  ),
+                },
+                {at: childPath},
               )
               return
             }
           }
-          // Make sure marks are reset, if a block is split at the end.
-          if (
-            op.type === 'split_node' &&
-            op.path.length === 2 &&
-            (op.properties as unknown as Descendant)._type === types.span.name &&
-            'marks' in op.properties &&
-            Array.isArray(op.properties.marks) &&
-            op.properties.marks.length > 0 &&
-            op.path[0] + 1 < editor.children.length
-          ) {
-            const [child, childPath] = Editor.node(editor, [op.path[0] + 1, 0])
-            if (
-              Text.isText(child) &&
-              child.text === '' &&
-              Array.isArray(child.marks) &&
-              child.marks.length > 0
-            ) {
-              Transforms.setNodes(editor, {marks: []}, {at: childPath, voids: false})
-              return
-            }
+        }
+      }
+
+      /**
+       * Remove orphaned annotations from span nodes
+       */
+      if (editor.isTextSpan(node)) {
+        const blockPath = Path.parent(path)
+        const [block] = Editor.node(editor, blockPath)
+
+        if (editor.isTextBlock(block)) {
+          const decorators = types.decorators.map(
+            (decorator) => decorator.value,
+          )
+          const marks = node.marks ?? []
+          const orphanedAnnotations = marks.filter((mark) => {
+            return (
+              !decorators.includes(mark) &&
+              !block.markDefs?.find((def) => def._key === mark)
+            )
+          })
+
+          if (orphanedAnnotations.length > 0) {
+            debug('Removing orphaned annotations from span node')
+            Transforms.setNodes(
+              editor,
+              {
+                marks: marks.filter(
+                  (mark) => !orphanedAnnotations.includes(mark),
+                ),
+              },
+              {at: path},
+            )
+            return
           }
-          // Make sure markDefs are reset, if a block is split at start.
-          if (
-            op.type === 'split_node' &&
-            op.path.length === 1 &&
-            (op.properties as unknown as Descendant)._type === types.block.name &&
-            'markDefs' in op.properties &&
-            Array.isArray(op.properties.markDefs) &&
-            op.properties.markDefs.length > 0
-          ) {
-            const [block, blockPath] = Editor.node(editor, [op.path[0]])
-            if (
-              editor.isTextBlock(block) &&
-              block.children.length === 1 &&
-              block.markDefs &&
-              block.markDefs.length > 0 &&
-              Text.isText(block.children[0]) &&
-              block.children[0].text === '' &&
-              (!block.children[0].marks || block.children[0].marks.length === 0)
-            ) {
-              Transforms.setNodes(editor, {markDefs: []}, {at: blockPath})
-              return
-            }
+        }
+      }
+
+      // Remove duplicate markDefs
+      if (editor.isTextBlock(node)) {
+        const markDefs = node.markDefs ?? []
+        const markDefKeys = new Set<string>()
+        const newMarkDefs: Array<PortableTextObject> = []
+
+        for (const markDef of markDefs) {
+          if (!markDefKeys.has(markDef._key)) {
+            markDefKeys.add(markDef._key)
+            newMarkDefs.push(markDef)
           }
         }
+
+        if (markDefs.length !== newMarkDefs.length) {
+          debug('Removing duplicate markDefs')
+          Transforms.setNodes(editor, {markDefs: newMarkDefs}, {at: path})
+        }
       }
+
       // Check consistency of markDefs (unless we are merging two nodes)
       if (
         editor.isTextBlock(node) &&
         !editor.operations.some(
-          (op) => op.type === 'merge_node' && 'markDefs' in op.properties && op.path.length === 1,
+          (op) =>
+            op.type === 'merge_node' &&
+            'markDefs' in op.properties &&
+            op.path.length === 1,
         )
       ) {
         const newMarkDefs = (node.markDefs || []).filter((def) => {
           return node.children.find((child) => {
             return (
-              Text.isText(child) && Array.isArray(child.marks) && child.marks.includes(def._key)
+              Text.isText(child) &&
+              Array.isArray(child.marks) &&
+              child.marks.includes(def._key)
             )
           })
         })
@@ -261,13 +282,16 @@ export function createWithPortableTextMarkModel(
         if (
           selection &&
           Range.isCollapsed(selection) &&
-          Editor.marks(editor)?.marks?.some((mark) => !decorators.includes(mark))
+          Editor.marks(editor)?.marks?.some(
+            (mark) => !decorators.includes(mark),
+          )
         ) {
           const [node] = Array.from(
             Editor.nodes(editor, {
               mode: 'lowest',
               at: selection.focus,
-              match: (n) => (n as unknown as Descendant)._type === types.span.name,
+              match: (n) =>
+                (n as unknown as Descendant)._type === types.span.name,
               voids: false,
             }),
           )[0] || [undefined]
@@ -307,15 +331,25 @@ export function createWithPortableTextMarkModel(
         const blockEntry = Editor.node(editor, Path.parent(op.path))
         const block = blockEntry[0]
 
-        if (node && isPortableTextSpan(node) && block && isPortableTextBlock(block)) {
+        if (
+          node &&
+          isPortableTextSpan(node) &&
+          block &&
+          isPortableTextBlock(block)
+        ) {
           const markDefs = block.markDefs ?? []
           const nodeHasAnnotations = (node.marks ?? []).some((mark) =>
             markDefs.find((markDef) => markDef._key === mark),
           )
           const deletingPartOfTheNode = op.offset !== 0
-          const deletingFromTheEnd = op.offset + op.text.length === node.text.length
+          const deletingFromTheEnd =
+            op.offset + op.text.length === node.text.length
 
-          if (nodeHasAnnotations && deletingPartOfTheNode && deletingFromTheEnd) {
+          if (
+            nodeHasAnnotations &&
+            deletingPartOfTheNode &&
+            deletingFromTheEnd
+          ) {
             Editor.withoutNormalizing(editor, () => {
               Transforms.splitNodes(editor, {
                 match: Text.isText,
@@ -339,7 +373,11 @@ export function createWithPortableTextMarkModel(
 
             Editor.withoutNormalizing(editor, () => {
               apply(op)
-              Transforms.setNodes(editor, {marks: marksWithoutAnnotationMarks}, {at: op.path})
+              Transforms.setNodes(
+                editor,
+                {marks: marksWithoutAnnotationMarks},
+                {at: op.path},
+              )
             })
 
             editor.onChange()
@@ -360,6 +398,36 @@ export function createWithPortableTextMarkModel(
         }
       }
 
+      /**
+       * Copy over markDefs when merging blocks
+       */
+      if (
+        op.type === 'merge_node' &&
+        op.path.length === 1 &&
+        'markDefs' in op.properties &&
+        op.properties._type === types.block.name &&
+        Array.isArray(op.properties.markDefs) &&
+        op.properties.markDefs.length > 0 &&
+        op.path[0] - 1 >= 0
+      ) {
+        const [targetBlock, targetPath] = Editor.node(editor, [op.path[0] - 1])
+
+        if (editor.isTextBlock(targetBlock)) {
+          const oldDefs =
+            (Array.isArray(targetBlock.markDefs) && targetBlock.markDefs) || []
+          const newMarkDefs = uniq([...oldDefs, ...op.properties.markDefs])
+
+          debug(`Copying markDefs over to merged block`, op)
+          Transforms.setNodes(
+            editor,
+            {markDefs: newMarkDefs},
+            {at: targetPath, voids: false},
+          )
+          apply(op)
+          return
+        }
+      }
+
       apply(op)
     }
 
@@ -369,10 +437,19 @@ export function createWithPortableTextMarkModel(
         if (Range.isExpanded(editor.selection)) {
           Editor.withoutNormalizing(editor, () => {
             // Split if needed
-            Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
+            Transforms.setNodes(
+              editor,
+              {},
+              {match: Text.isText, split: true, hanging: true},
+            )
             // Use new selection
             const splitTextNodes = Range.isRange(editor.selection)
-              ? [...Editor.nodes(editor, {at: editor.selection, match: Text.isText})]
+              ? [
+                  ...Editor.nodes(editor, {
+                    at: editor.selection,
+                    match: Text.isText,
+                  }),
+                ]
               : []
             const shouldRemoveMark =
               splitTextNodes.length > 1 &&
@@ -397,17 +474,49 @@ export function createWithPortableTextMarkModel(
             }
           })
         } else {
-          const existingMarks: string[] =
-            {
+          const [block, blockPath] = Editor.node(editor, editor.selection, {
+            depth: 1,
+          })
+          const lonelyEmptySpan =
+            editor.isTextBlock(block) &&
+            block.children.length === 1 &&
+            editor.isTextSpan(block.children[0]) &&
+            block.children[0].text === ''
+              ? block.children[0]
+              : undefined
+
+          if (lonelyEmptySpan) {
+            const existingMarks = lonelyEmptySpan.marks ?? []
+            const existingMarksWithoutDecorator = existingMarks.filter(
+              (existingMark) => existingMark !== mark,
+            )
+
+            Transforms.setNodes(
+              editor,
+              {
+                marks:
+                  existingMarks.length === existingMarksWithoutDecorator.length
+                    ? [...existingMarks, mark]
+                    : existingMarksWithoutDecorator,
+              },
+              {
+                at: blockPath,
+                match: (node) => editor.isTextSpan(node),
+              },
+            )
+          } else {
+            const existingMarks: string[] =
+              {
+                ...(Editor.marks(editor) || {}),
+              }.marks || []
+            const marks = {
               ...(Editor.marks(editor) || {}),
-            }.marks || []
-          const marks = {
-            ...(Editor.marks(editor) || {}),
-            marks: [...existingMarks, mark],
+              marks: [...existingMarks, mark],
+            }
+            editor.marks = marks as Text
+            forceNewSelection()
+            return editor
           }
-          editor.marks = marks as Text
-          forceNewSelection()
-          return editor
         }
         editor.onChange()
         forceNewSelection()
@@ -422,10 +531,17 @@ export function createWithPortableTextMarkModel(
         if (Range.isExpanded(selection)) {
           Editor.withoutNormalizing(editor, () => {
             // Split if needed
-            Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
+            Transforms.setNodes(
+              editor,
+              {},
+              {match: Text.isText, split: true, hanging: true},
+            )
             if (editor.selection) {
               const splitTextNodes = [
-                ...Editor.nodes(editor, {at: editor.selection, match: Text.isText}),
+                ...Editor.nodes(editor, {
+                  at: editor.selection,
+                  match: Text.isText,
+                }),
               ]
               splitTextNodes.forEach(([node, path]) => {
                 const block = editor.children[path[0]]
@@ -433,9 +549,10 @@ export function createWithPortableTextMarkModel(
                   Transforms.setNodes(
                     editor,
                     {
-                      marks: (Array.isArray(node.marks) ? node.marks : []).filter(
-                        (eMark: string) => eMark !== mark,
-                      ),
+                      marks: (Array.isArray(node.marks)
+                        ? node.marks
+                        : []
+                      ).filter((eMark: string) => eMark !== mark),
                       _type: 'span',
                     },
                     {at: path},
@@ -446,17 +563,46 @@ export function createWithPortableTextMarkModel(
           })
           Editor.normalize(editor)
         } else {
-          const existingMarks: string[] =
-            {
+          const [block, blockPath] = Editor.node(editor, selection, {
+            depth: 1,
+          })
+          const lonelyEmptySpan =
+            editor.isTextBlock(block) &&
+            block.children.length === 1 &&
+            editor.isTextSpan(block.children[0]) &&
+            block.children[0].text === ''
+              ? block.children[0]
+              : undefined
+
+          if (lonelyEmptySpan) {
+            const existingMarks = lonelyEmptySpan.marks ?? []
+            const existingMarksWithoutDecorator = existingMarks.filter(
+              (existingMark) => existingMark !== mark,
+            )
+
+            Transforms.setNodes(
+              editor,
+              {
+                marks: existingMarksWithoutDecorator,
+              },
+              {
+                at: blockPath,
+                match: (node) => editor.isTextSpan(node),
+              },
+            )
+          } else {
+            const existingMarks: string[] =
+              {
+                ...(Editor.marks(editor) || {}),
+              }.marks || []
+            const marks = {
               ...(Editor.marks(editor) || {}),
-            }.marks || []
-          const marks = {
-            ...(Editor.marks(editor) || {}),
-            marks: existingMarks.filter((eMark) => eMark !== mark),
-          } as Text
-          editor.marks = {marks: marks.marks, _type: 'span'} as Text
-          forceNewSelection()
-          return editor
+              marks: existingMarks.filter((eMark) => eMark !== mark),
+            } as Text
+            editor.marks = {marks: marks.marks, _type: 'span'} as Text
+            forceNewSelection()
+            return editor
+          }
         }
         editor.onChange()
         forceNewSelection()

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -1,6 +1,5 @@
 import {type Subject} from 'rxjs'
 import {type BaseRange} from 'slate'
-
 import {
   type EditorChange,
   type EditorSelection,
@@ -8,7 +7,10 @@ import {
   type PortableTextSlateEditor,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
-import {type ObjectWithKeyAndType, toPortableTextRange} from '../../utils/ranges'
+import {
+  toPortableTextRange,
+  type ObjectWithKeyAndType,
+} from '../../utils/ranges'
 import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../../utils/weakMaps'
 
 const debug = debugWithName('plugin:withPortableTextSelections')