@portabletext/editor 1.0.17 → 1.0.19

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -18,7 +18,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'
 
@@ -56,9 +55,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)
 
@@ -81,131 +77,89 @@ export function createWithPortableTextMarkModel(
         }
       }
 
-      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 .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
-            }
-          }
-          // 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 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
           }
         }
       }
+
       // Check consistency of markDefs (unless we are merging two nodes)
       if (
         editor.isTextBlock(node) &&
@@ -360,6 +314,31 @@ 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)
     }
 

package/src/utils/operationToPatches.ts

@@ -264,9 +264,19 @@ export function createOperationToPatches(types: PortableTextMemberSchemaTypes):
       }
       throw new Error('Block not found')
     } else if (editor.isTextBlock(block) && operation.path.length === 2) {
-      const spanToRemove =
-        editor.isTextBlock(block) && block.children && block.children[operation.path[1]]
+      const spanToRemove = block.children[operation.path[1]]
+
       if (spanToRemove) {
+        const spansMatchingKey = block.children.filter((span) => span._key === operation.node._key)
+
+        if (spansMatchingKey.length > 1) {
+          console.warn(
+            `Multiple spans have \`_key\` ${operation.node._key}. It's ambiguous which one to remove.`,
+            JSON.stringify(block, null, 2),
+          )
+          return []
+        }
+
         return [unset([{_key: block._key}, 'children', {_key: spanToRemove._key}])]
       }
       debug('Span not found in editor trying to remove node')
@@ -285,7 +295,7 @@ export function createOperationToPatches(types: PortableTextMemberSchemaTypes):
     const patches: Patch[] = []
 
     const block = beforeValue[operation.path[0]]
-    const targetBlock = editor.children[operation.path[0]]
+    const updatedBlock = editor.children[operation.path[0]]
 
     if (operation.path.length === 1) {
       if (block?._key) {
@@ -295,17 +305,51 @@ export function createOperationToPatches(types: PortableTextMemberSchemaTypes):
       } else {
         throw new Error('Target key not found!')
       }
-    } else if (operation.path.length === 2 && editor.isTextBlock(targetBlock)) {
-      const mergedSpan =
-        (editor.isTextBlock(block) && block.children[operation.path[1]]) || undefined
-      const targetSpan = targetBlock.children[operation.path[1] - 1]
-      if (editor.isTextSpan(targetSpan)) {
-        // Set the merged span with it's new value
-        patches.push(
-          set(targetSpan.text, [{_key: block._key}, 'children', {_key: targetSpan._key}, 'text']),
-        )
-        if (mergedSpan) {
-          patches.push(unset([{_key: block._key}, 'children', {_key: mergedSpan._key}]))
+    } else if (
+      editor.isTextBlock(block) &&
+      editor.isTextBlock(updatedBlock) &&
+      operation.path.length === 2
+    ) {
+      const updatedSpan =
+        updatedBlock.children[operation.path[1] - 1] &&
+        editor.isTextSpan(updatedBlock.children[operation.path[1] - 1])
+          ? updatedBlock.children[operation.path[1] - 1]
+          : undefined
+      const removedSpan =
+        block.children[operation.path[1]] && editor.isTextSpan(block.children[operation.path[1]])
+          ? block.children[operation.path[1]]
+          : undefined
+
+      if (updatedSpan) {
+        const spansMatchingKey = block.children.filter((span) => span._key === updatedSpan._key)
+
+        if (spansMatchingKey.length === 1) {
+          patches.push(
+            set(updatedSpan.text, [
+              {_key: block._key},
+              'children',
+              {_key: updatedSpan._key},
+              'text',
+            ]),
+          )
+        } else {
+          console.warn(
+            `Multiple spans have \`_key\` ${updatedSpan._key}. It's ambiguous which one to update.`,
+            JSON.stringify(block, null, 2),
+          )
+        }
+      }
+
+      if (removedSpan) {
+        const spansMatchingKey = block.children.filter((span) => span._key === removedSpan._key)
+
+        if (spansMatchingKey.length === 1) {
+          patches.push(unset([{_key: block._key}, 'children', {_key: removedSpan._key}]))
+        } else {
+          console.warn(
+            `Multiple spans have \`_key\` ${removedSpan._key}. It's ambiguous which one to remove.`,
+            JSON.stringify(block, null, 2),
+          )
         }
       }
     } else {

package/src/utils/values.ts

@@ -11,7 +11,6 @@ import {type Descendant, Element, type Node, Text} from 'slate'
 import {type PortableTextMemberSchemaTypes} from '../types/editor'
 
 export const EMPTY_MARKDEFS: PortableTextObject[] = []
-export const EMPTY_MARKS: string[] = []
 
 export const VOID_CHILD_KEY = 'void-child'
 

package/src/editor/plugins/__tests__/withHotkeys.test.tsx

@@ -1,212 +0,0 @@
-import {describe, expect, it, jest} from '@jest/globals'
-import {render, waitFor} from '@testing-library/react'
-import {createRef, type RefObject} from 'react'
-
-import {PortableTextEditorTester, schemaType} from '../../__tests__/PortableTextEditorTester'
-import {getEditableElement, triggerKeyboardEvent} from '../../__tests__/utils'
-import {PortableTextEditor} from '../../PortableTextEditor'
-
-const newBlock = {
-  _type: 'myTestBlockType',
-  _key: '3',
-  style: 'normal',
-  markDefs: [],
-  children: [
-    {
-      _type: 'span',
-      _key: '2',
-      text: '',
-      marks: [],
-    },
-  ],
-}
-describe('plugin:withHotkeys: .ArrowDown', () => {
-  it('a new block is added if the user is focused on the only block which is void, and presses arrow down.', async () => {
-    const initialValue = [
-      {
-        _key: 'a',
-        _type: 'someObject',
-      },
-    ]
-
-    const initialSelection = {
-      focus: {path: [{_key: 'a'}], offset: 0},
-      anchor: {path: [{_key: 'a'}], offset: 0},
-    }
-
-    const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    const element = await getEditableElement(component)
-
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
-    await waitFor(async () => {
-      if (editor && inlineType && editor) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
-        PortableTextEditor.insertBreak(editor)
-        await triggerKeyboardEvent('ArrowDown', element)
-
-        const value = PortableTextEditor.getValue(editor)
-        expect(value).toEqual([initialValue[0], newBlock])
-      }
-    })
-  })
-  it('a new block is added if the user is focused on the last block which is void, and presses arrow down.', async () => {
-    const initialValue = [
-      {
-        _type: 'myTestBlockType',
-        _key: 'a',
-        style: 'normal',
-        markDefs: [],
-        children: [
-          {
-            _type: 'span',
-            _key: 'a1',
-            text: 'This is the first block',
-            marks: [],
-          },
-        ],
-      },
-      {
-        _key: 'b',
-        _type: 'someObject',
-      },
-    ]
-    const initialSelection = {
-      focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
-      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
-    }
-
-    const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    const element = await getEditableElement(component)
-
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
-    await waitFor(async () => {
-      if (editor && inlineType && element) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
-        await triggerKeyboardEvent('ArrowDown', element)
-        const value = PortableTextEditor.getValue(editor)
-        // Arrow down on the text block should not add a new block
-        expect(value).toEqual(initialValue)
-        // Focus on the object block
-        PortableTextEditor.select(editor, {
-          focus: {path: [{_key: 'b'}], offset: 0},
-          anchor: {path: [{_key: 'b'}], offset: 0},
-        })
-        await triggerKeyboardEvent('ArrowDown', element)
-        const value2 = PortableTextEditor.getValue(editor)
-        expect(value2).toEqual([
-          initialValue[0],
-          initialValue[1],
-          {
-            _type: 'myTestBlockType',
-            _key: '3',
-            style: 'normal',
-            markDefs: [],
-            children: [
-              {
-                _type: 'span',
-                _key: '2',
-                text: '',
-                marks: [],
-              },
-            ],
-          },
-        ])
-      }
-    })
-  })
-})
-describe('plugin:withHotkeys: .ArrowUp', () => {
-  it('a new block is added at the top, when pressing arrow up, because first block is void, the new block can be deleted with backspace.', async () => {
-    const initialValue = [
-      {
-        _key: 'b',
-        _type: 'someObject',
-      },
-      {
-        _type: 'myTestBlockType',
-        _key: 'a',
-        style: 'normal',
-        markDefs: [],
-        children: [
-          {
-            _type: 'span',
-            _key: 'a1',
-            text: 'This is the first block',
-            marks: [],
-          },
-        ],
-      },
-    ]
-
-    const initialSelection = {
-      focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
-      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
-    }
-
-    const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    const element = await getEditableElement(component)
-
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
-    await waitFor(async () => {
-      if (editor && inlineType && element) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
-        await triggerKeyboardEvent('ArrowUp', element)
-        // Arrow down on the text block should not add a new block
-        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
-        // Focus on the object block
-        PortableTextEditor.select(editor, {
-          focus: {path: [{_key: 'b'}], offset: 0},
-          anchor: {path: [{_key: 'b'}], offset: 0},
-        })
-        await triggerKeyboardEvent('ArrowUp', element)
-        expect(PortableTextEditor.getValue(editor)).toEqual([
-          newBlock,
-          initialValue[0],
-          initialValue[1],
-        ])
-        // Pressing arrow up again won't add a new block
-        await triggerKeyboardEvent('ArrowUp', element)
-        expect(PortableTextEditor.getValue(editor)).toEqual([
-          newBlock,
-          initialValue[0],
-          initialValue[1],
-        ])
-        await triggerKeyboardEvent('Backspace', element)
-        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
-      }
-    })
-  })
-})