@portabletext/editor 1.0.11 → 1.0.13

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

@@ -79,15 +79,21 @@ describe('plugin:withPortableTextMarksModel', () => {
       ]
 
       const onChange = jest.fn()
+
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={initialValue}
+        />,
+      )
+
       await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
+        if (editorRef.current) {
+          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+        }
       })
 
       await waitFor(() => {
@@ -382,6 +388,7 @@ Array [
         }
       })
     })
+
     it('toggles marks on children with annotation marks correctly', async () => {
       const editorRef: RefObject<PortableTextEditor> = createRef()
       const initialValue = [
@@ -413,61 +420,65 @@ Array [
         },
       ]
       const onChange = jest.fn()
+
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={initialValue}
+        />,
+      )
+
       await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
+        if (editorRef.current) {
+          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+        }
       })
-      const editor = editorRef.current!
-      expect(editor).toBeDefined()
 
       await waitFor(() => {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, {
-          focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
-          anchor: {path: [{_key: 'a'}, 'children', {_key: 'b1'}], offset: 12},
-        })
-        PortableTextEditor.toggleMark(editor, 'strong')
-        expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        Array [
-          Object {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "a1",
-                "_type": "span",
-                "marks": Array [
-                  "abc",
-                  "strong",
-                ],
-                "text": "A link",
-              },
-              Object {
-                "_key": "a2",
-                "_type": "span",
-                "marks": Array [
-                  "strong",
-                ],
-                "text": ", not a link",
-              },
-            ],
-            "markDefs": Array [
-              Object {
-                "_key": "abc",
-                "_type": "link",
-                "href": "http://www.link.com",
-              },
-            ],
-            "style": "normal",
-          },
-        ]
-      `)
+        if (editorRef.current) {
+          PortableTextEditor.focus(editorRef.current)
+          PortableTextEditor.select(editorRef.current, {
+            focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+            anchor: {path: [{_key: 'a'}, 'children', {_key: 'a2'}], offset: 12},
+          })
+          PortableTextEditor.toggleMark(editorRef.current, 'strong')
+        }
+      })
+
+      await waitFor(() => {
+        if (editorRef.current) {
+          expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+            {
+              _key: 'a',
+              _type: 'myTestBlockType',
+              children: [
+                {
+                  _key: 'a1',
+                  _type: 'span',
+                  marks: ['abc', 'strong'],
+                  text: 'A link',
+                },
+                {
+                  _key: 'a2',
+                  _type: 'span',
+                  marks: ['strong'],
+                  text: ', not a link',
+                },
+              ],
+              markDefs: [
+                {
+                  _type: 'link',
+                  _key: 'abc',
+                  href: 'http://www.link.com',
+                },
+              ],
+              style: 'normal',
+            },
+          ])
+        }
       })
     })
 
@@ -605,11 +616,11 @@ Array [
       const editorRef: RefObject<PortableTextEditor> = createRef()
       const initialValue = [
         {
-          _key: '1987f99da4a2',
+          _key: 'ba',
           _type: 'myTestBlockType',
           children: [
             {
-              _key: '3693e789451c',
+              _key: 'sa',
               _type: 'span',
               marks: [],
               text: '1',
@@ -619,19 +630,19 @@ Array [
           style: 'normal',
         },
         {
-          _key: '2f55670a03bb',
+          _key: 'bb',
           _type: 'myTestBlockType',
           children: [
             {
-              _key: '9f5ed7dee7ab',
+              _key: 'sb',
               _type: 'span',
-              marks: ['bab319ad3a9d'],
+              marks: ['aa'],
               text: '2',
             },
           ],
           markDefs: [
             {
-              _key: 'bab319ad3a9d',
+              _key: 'aa',
               _type: 'link',
               href: 'http://www.123.com',
             },
@@ -640,82 +651,87 @@ Array [
         },
       ]
       const sel: EditorSelection = {
-        focus: {path: [{_key: '2f55670a03bb'}, 'children', {_key: '9f5ed7dee7ab'}], offset: 0},
-        anchor: {path: [{_key: '2f55670a03bb'}, 'children', {_key: '9f5ed7dee7ab'}], offset: 0},
+        focus: {path: [{_key: 'bb'}, 'children', {_key: 'sb'}], offset: 0},
+        anchor: {path: [{_key: 'bb'}, 'children', {_key: 'sb'}], offset: 0},
       }
       const onChange = jest.fn()
+
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={initialValue}
+        />,
+      )
+
       await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
+        if (editorRef.current) {
+          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+        }
       })
 
-      const editor = editorRef.current!
-      expect(editor).toBeDefined()
+      await waitFor(() => {
+        if (editorRef.current) {
+          PortableTextEditor.select(editorRef.current, sel)
+          PortableTextEditor.insertBreak(editorRef.current)
+        }
+      })
 
       await waitFor(() => {
-        PortableTextEditor.select(editor, sel)
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.insertBreak(editor)
-        expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        Array [
-          Object {
-            "_key": "1987f99da4a2",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "3693e789451c",
-                "_type": "span",
-                "marks": Array [],
-                "text": "1",
-              },
-            ],
-            "markDefs": Array [],
-            "style": "normal",
-          },
-          Object {
-            "_key": "3",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "2",
-                "_type": "span",
-                "marks": Array [],
-                "text": "",
-              },
-            ],
-            "markDefs": Array [],
-            "style": "normal",
-          },
-          Object {
-            "_key": "2f55670a03bb",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "9f5ed7dee7ab",
-                "_type": "span",
-                "marks": Array [
-                  "bab319ad3a9d",
-                ],
-                "text": "2",
-              },
-            ],
-            "markDefs": Array [
-              Object {
-                "_key": "bab319ad3a9d",
-                "_type": "link",
-                "href": "http://www.123.com",
-              },
-            ],
-            "style": "normal",
-          },
-        ]
-      `)
+        if (editorRef.current) {
+          expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+            {
+              _key: 'ba',
+              _type: 'myTestBlockType',
+              children: [
+                {
+                  _key: 'sa',
+                  _type: 'span',
+                  marks: [],
+                  text: '1',
+                },
+              ],
+              markDefs: [],
+              style: 'normal',
+            },
+            {
+              _key: '3',
+              _type: 'myTestBlockType',
+              children: [
+                {
+                  _key: '2',
+                  _type: 'span',
+                  marks: [],
+                  text: '',
+                },
+              ],
+              markDefs: [],
+              style: 'normal',
+            },
+            {
+              _key: 'bb',
+              _type: 'myTestBlockType',
+              children: [
+                {
+                  _key: 'sb',
+                  _type: 'span',
+                  marks: ['aa'],
+                  text: '2',
+                },
+              ],
+              markDefs: [
+                {
+                  _key: 'aa',
+                  _type: 'link',
+                  href: 'http://www.123.com',
+                },
+              ],
+              style: 'normal',
+            },
+          ])
+        }
       })
     })
   })
@@ -724,11 +740,11 @@ Array [
       const editorRef: RefObject<PortableTextEditor> = createRef()
       const initialValue = [
         {
-          _key: '1987f99da4a2',
+          _key: 'ba',
           _type: 'myTestBlockType',
           children: [
             {
-              _key: '3693e789451c',
+              _key: 'sa',
               _type: 'span',
               marks: [],
               text: '',
@@ -740,32 +756,38 @@ Array [
       ]
       const onChange = jest.fn()
 
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={initialValue}
+        />,
+      )
+
       await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
+        if (editorRef.current) {
+          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+        }
       })
 
-      const editor = editorRef.current!
-      expect(editor).toBeDefined()
-
       await waitFor(() => {
-        PortableTextEditor.focus(editor)
+        if (editorRef.current) {
+          PortableTextEditor.focus(editorRef.current)
+        }
       })
-      const currentSelectionObject = PortableTextEditor.getSelection(editor)
 
       await waitFor(() => {
-        PortableTextEditor.toggleMark(editor, 'strong')
+        if (editorRef.current) {
+          const currentSelectionObject = PortableTextEditor.getSelection(editorRef.current)
+          PortableTextEditor.toggleMark(editorRef.current, 'strong')
+          const nextSelectionObject = PortableTextEditor.getSelection(editorRef.current)
+          expect(currentSelectionObject).toEqual(nextSelectionObject)
+          expect(currentSelectionObject === nextSelectionObject).toBe(false)
+          expect(onChange).toHaveBeenCalledWith({type: 'selection', selection: nextSelectionObject})
+        }
       })
-      const nextSelectionObject = PortableTextEditor.getSelection(editor)
-      expect(currentSelectionObject).toEqual(nextSelectionObject)
-      expect(currentSelectionObject === nextSelectionObject).toBe(false)
-      expect(onChange).toHaveBeenCalledWith({type: 'selection', selection: nextSelectionObject})
     })
 
     it('should return active marks that cover the whole selection', async () => {

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

@@ -53,6 +53,14 @@ describe('plugin:withUndoRedo', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     await waitFor(() => {
       if (editorRef.current) {
         PortableTextEditor.focus(editorRef.current)
@@ -88,6 +96,7 @@ describe('plugin:withUndoRedo', () => {
   it('preserves the keys when redoing ', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
+
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -96,6 +105,14 @@ describe('plugin:withUndoRedo', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     await waitFor(() => {
       if (editorRef.current) {
         PortableTextEditor.focus(editorRef.current)

package/src/editor/plugins/createWithObjectKeys.ts

@@ -23,23 +23,38 @@ export function createWithObjectKeys(
     editor.apply = (operation) => {
       if (operation.type === 'split_node') {
         const withNewKey = !isPreservingKeys(editor) || !('_key' in operation.properties)
-        operation.properties = {
-          ...operation.properties,
-          ...(withNewKey ? {_key: keyGenerator()} : {}),
-        }
+
+        apply({
+          ...operation,
+          properties: {
+            ...operation.properties,
+            ...(withNewKey ? {_key: keyGenerator()} : {}),
+          },
+        })
+
+        return
       }
+
       if (operation.type === 'insert_node') {
         // Must be given a new key or adding/removing marks while typing gets in trouble (duped keys)!
         const withNewKey = !isPreservingKeys(editor) || !('_key' in operation.node)
+
         if (!Editor.isEditor(operation.node)) {
-          operation.node = {
-            ...operation.node,
-            ...(withNewKey ? {_key: keyGenerator()} : {}),
-          }
+          apply({
+            ...operation,
+            node: {
+              ...operation.node,
+              ...(withNewKey ? {_key: keyGenerator()} : {}),
+            },
+          })
+
+          return
         }
       }
+
       apply(operation)
     }
+
     editor.normalizeNode = (entry) => {
       const [node, path] = entry
       if (Element.isElement(node) && node._type === schemaTypes.block.name) {

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -6,6 +6,7 @@
  *
  */
 
+import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
 import {isEqual, uniq} from 'lodash'
 import {type Subject} from 'rxjs'
 import {type Descendant, Editor, Element, Path, Range, Text, Transforms} from 'slate'
@@ -18,12 +19,14 @@ import {
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange} from '../../utils/ranges'
 import {EMPTY_MARKS} from '../../utils/values'
+import {withoutPreserveKeys} from '../../utils/withPreserveKeys'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
 
 export function createWithPortableTextMarkModel(
   types: PortableTextMemberSchemaTypes,
   change$: Subject<EditorChange>,
+  keyGenerator: () => string,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   return function withPortableTextMarkModel(editor: PortableTextSlateEditor) {
     const {apply, normalizeNode} = editor
@@ -230,8 +233,8 @@ export function createWithPortableTextMarkModel(
       }
     }
 
-    // Special hook before inserting text at the end of an annotation.
     editor.apply = (op) => {
+      // Special hook before inserting text at the end of an annotation.
       if (op.type === 'insert_text') {
         const {selection} = editor
         if (
@@ -253,26 +256,70 @@ export function createWithPortableTextMarkModel(
             Array.isArray(node.marks) &&
             node.marks.length > 0
           ) {
-            apply(op)
-            Transforms.splitNodes(editor, {
-              match: Text.isText,
-              at: {...selection.focus, offset: selection.focus.offset},
-            })
             const marksWithoutAnnotationMarks: string[] = (
               {
                 ...(Editor.marks(editor) || {}),
               }.marks || []
             ).filter((mark) => decorators.includes(mark))
-            Transforms.setNodes(
-              editor,
-              {marks: marksWithoutAnnotationMarks},
-              {at: Path.next(selection.focus.path)},
-            )
+            Transforms.insertNodes(editor, {
+              _type: 'span',
+              _key: keyGenerator(),
+              text: op.text,
+              marks: marksWithoutAnnotationMarks,
+            })
             debug('Inserting text at end of annotation')
             return
           }
         }
       }
+
+      if (op.type === 'remove_text') {
+        const nodeEntry = Array.from(
+          Editor.nodes(editor, {
+            mode: 'lowest',
+            at: {path: op.path, offset: op.offset},
+            match: (n) => n._type === types.span.name,
+            voids: false,
+          }),
+        )[0]
+        const node = nodeEntry[0]
+        const blockEntry = Editor.node(editor, Path.parent(op.path))
+        const block = blockEntry[0]
+
+        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
+
+          if (nodeHasAnnotations && deletingPartOfTheNode && deletingFromTheEnd) {
+            /**
+             * If all of these conditions match then override the ordinary
+             * `remove_text` operation and turn it into `split_nodes` followed
+             * by `remove_nodes`. This is so if the operation can be properly
+             * undone. Undoing a `remove_text` results in an `insert_text` and
+             * we want to bail out of that in this exact scenario to make sure
+             * the inserted text is annotated. (See custom logic regarding
+             * `insert_text`)
+             */
+            Editor.withoutNormalizing(editor, () => {
+              withoutPreserveKeys(editor, () => {
+                Transforms.splitNodes(editor, {
+                  match: Text.isText,
+                  at: {path: op.path, offset: op.offset},
+                })
+              })
+              Transforms.removeNodes(editor, {at: Path.next(op.path)})
+            })
+
+            editor.onChange()
+            return
+          }
+        }
+      }
+
       apply(op)
     }
 
@@ -419,17 +466,24 @@ export function createWithPortableTextMarkModel(
    */
   function mergeSpans(editor: PortableTextSlateEditor) {
     const {selection} = editor
+
     if (selection) {
-      for (const [node, path] of Array.from(
+      const textNodesInSelection = Array.from(
         Editor.nodes(editor, {
           at: Editor.range(editor, [selection.anchor.path[0]], [selection.focus.path[0]]),
+          match: Text.isText,
+          reverse: true,
         }),
-      ).reverse()) {
+      )
+
+      for (const [node, path] of textNodesInSelection) {
         const [parent] = path.length > 1 ? Editor.node(editor, Path.parent(path)) : [undefined]
         const nextPath = [path[0], path[1] + 1]
+
         if (editor.isTextBlock(parent)) {
           const nextNode = parent.children[nextPath[1]]
-          if (Text.isText(node) && Text.isText(nextNode) && isEqual(nextNode.marks, node.marks)) {
+
+          if (Text.isText(nextNode) && isEqual(nextNode.marks, node.marks)) {
             debug('Merging spans')
             Transforms.mergeNodes(editor, {at: nextPath, voids: true})
             editor.onChange()

package/src/editor/plugins/createWithUndoRedo.ts

@@ -146,17 +146,15 @@ export function createWithUndoRedo(
               ),
             )
           })
+          const reversedOperations = transformedOperations.map(Operation.inverse).reverse()
+
           try {
             Editor.withoutNormalizing(editor, () => {
               withPreserveKeys(editor, () => {
                 withoutSaving(editor, () => {
-                  transformedOperations
-                    .map(Operation.inverse)
-                    .reverse()
-                    // eslint-disable-next-line max-nested-callbacks
-                    .forEach((op) => {
-                      editor.apply(op)
-                    })
+                  reversedOperations.forEach((op) => {
+                    editor.apply(op)
+                  })
                 })
               })
             })