@portabletext/editor 1.1.1 → 1.1.2

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

@@ -1,6 +1,6 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,
   schemaType,
@@ -29,7 +29,7 @@ describe('plugin:withPortableTextMarksModel', () => {
           style: 'normal',
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
       await waitFor(() => {
         render(
           <PortableTextEditorTester
@@ -50,21 +50,21 @@ describe('plugin:withPortableTextMarksModel', () => {
         })
         PortableTextEditor.toggleMark(editor, 'strong')
         expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        Array [
-          Object {
+        [
+          {
             "_key": "a",
             "_type": "myTestBlockType",
-            "children": Array [
-              Object {
+            "children": [
+              {
                 "_key": "a1",
                 "_type": "span",
-                "marks": Array [
+                "marks": [
                   "strong",
                 ],
                 "text": "1234",
               },
             ],
-            "markDefs": Array [],
+            "markDefs": [],
             "style": "normal",
           },
         ]
@@ -79,35 +79,35 @@ describe('plugin:withPortableTextMarksModel', () => {
           PortableTextEditor.toggleMark(editorRef.current, 'strong')
           expect(PortableTextEditor.getValue(editorRef.current))
             .toMatchInlineSnapshot(`
-        Array [
-          Object {
+        [
+          {
             "_key": "a",
             "_type": "myTestBlockType",
-            "children": Array [
-              Object {
+            "children": [
+              {
                 "_key": "a1",
                 "_type": "span",
-                "marks": Array [
+                "marks": [
                   "strong",
                 ],
                 "text": "1",
               },
-              Object {
+              {
                 "_key": "2",
                 "_type": "span",
-                "marks": Array [],
+                "marks": [],
                 "text": "23",
               },
-              Object {
+              {
                 "_key": "1",
                 "_type": "span",
-                "marks": Array [
+                "marks": [
                   "strong",
                 ],
                 "text": "4",
               },
             ],
-            "markDefs": Array [],
+            "markDefs": [],
             "style": "normal",
           },
         ]
@@ -122,21 +122,21 @@ describe('plugin:withPortableTextMarksModel', () => {
           })
           PortableTextEditor.toggleMark(editor, 'strong')
           expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-Array [
-  Object {
+[
+  {
     "_key": "a",
     "_type": "myTestBlockType",
-    "children": Array [
-      Object {
+    "children": [
+      {
         "_key": "a1",
         "_type": "span",
-        "marks": Array [
+        "marks": [
           "strong",
         ],
         "text": "1234",
       },
     ],
-    "markDefs": Array [],
+    "markDefs": [],
     "style": "normal",
   },
 ]
@@ -175,7 +175,7 @@ Array [
           style: 'normal',
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
 
       render(
         <PortableTextEditorTester
@@ -307,7 +307,7 @@ Array [
           offset: 0,
         },
       }
-      const onChange = jest.fn()
+      const onChange = vi.fn()
       await waitFor(() => {
         render(
           <PortableTextEditorTester
@@ -324,47 +324,47 @@ Array [
         PortableTextEditor.select(editor, sel)
         PortableTextEditor.delete(editor, sel)
         expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        Array [
-          Object {
+        [
+          {
             "_key": "5fc57af23597",
             "_type": "myTestBlockType",
-            "children": Array [
-              Object {
+            "children": [
+              {
                 "_key": "be1c67c6971a",
                 "_type": "span",
-                "marks": Array [],
+                "marks": [],
                 "text": "This is a ",
               },
-              Object {
+              {
                 "_key": "11c8c9f783a8",
                 "_type": "span",
-                "marks": Array [
+                "marks": [
                   "fde1fd54b544",
                 ],
                 "text": "link",
               },
-              Object {
+              {
                 "_key": "576c748e0cd2",
                 "_type": "span",
-                "marks": Array [],
+                "marks": [],
                 "text": "This is ",
               },
-              Object {
+              {
                 "_key": "f3d73d3833bf",
                 "_type": "span",
-                "marks": Array [
+                "marks": [
                   "7b6d3d5de30c",
                 ],
                 "text": "another",
               },
             ],
-            "markDefs": Array [
-              Object {
+            "markDefs": [
+              {
                 "_key": "fde1fd54b544",
                 "_type": "link",
                 "url": "1",
               },
-              Object {
+              {
                 "_key": "7b6d3d5de30c",
                 "_type": "link",
                 "url": "2",
@@ -419,7 +419,7 @@ Array [
         focus: {path: [{_key: 'bb'}, 'children', {_key: 'sb'}], offset: 0},
         anchor: {path: [{_key: 'bb'}, 'children', {_key: 'sb'}], offset: 0},
       }
-      const onChange = jest.fn()
+      const onChange = vi.fn()
 
       render(
         <PortableTextEditorTester
@@ -522,7 +522,7 @@ Array [
           style: 'normal',
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
 
       render(
         <PortableTextEditorTester
@@ -592,7 +592,7 @@ Array [
           style: 'normal',
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
       await waitFor(() => {
         render(
           <PortableTextEditorTester
@@ -647,7 +647,7 @@ Array [
           style: 'normal',
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
       await waitFor(() => {
         render(
           <PortableTextEditorTester
@@ -703,7 +703,7 @@ Array [
           style: 'normal',
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
       await waitFor(() => {
         render(
           <PortableTextEditorTester
@@ -859,7 +859,7 @@ Array [
           ],
         },
       ]
-      const onChange = jest.fn()
+      const onChange = vi.fn()
       await waitFor(() => {
         render(
           <PortableTextEditorTester

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

@@ -1,6 +1,6 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,
   schemaType,
@@ -41,7 +41,7 @@ const initialValue = [
 describe('plugin:withPortableTextSelections', () => {
   it('will report that a selection is made backward', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -54,34 +54,45 @@ describe('plugin:withPortableTextSelections', () => {
       anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 9},
       focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 7},
     }
+
+    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)
         PortableTextEditor.select(editorRef.current, initialSelection)
         expect(PortableTextEditor.getSelection(editorRef.current))
           .toMatchInlineSnapshot(`
-          Object {
-            "anchor": Object {
+          {
+            "anchor": {
               "offset": 9,
-              "path": Array [
-                Object {
+              "path": [
+                {
                   "_key": "b",
                 },
                 "children",
-                Object {
+                {
                   "_key": "b1",
                 },
               ],
             },
             "backward": true,
-            "focus": Object {
+            "focus": {
               "offset": 7,
-              "path": Array [
-                Object {
+              "path": [
+                {
                   "_key": "a",
                 },
                 "children",
-                Object {
+                {
                   "_key": "a1",
                 },
               ],

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

@@ -1,6 +1,6 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,
   schemaType,
@@ -46,7 +46,7 @@ const initialSelection = {
 describe('plugin:withUndoRedo', () => {
   it('preserves the keys when undoing ', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -77,19 +77,19 @@ describe('plugin:withUndoRedo', () => {
         )
         expect(PortableTextEditor.getValue(editorRef.current))
           .toMatchInlineSnapshot(`
-          Array [
-            Object {
+          [
+            {
               "_key": "a",
               "_type": "myTestBlockType",
-              "children": Array [
-                Object {
+              "children": [
+                {
                   "_key": "a1",
                   "_type": "span",
-                  "marks": Array [],
+                  "marks": [],
                   "text": "Block A",
                 },
               ],
-              "markDefs": Array [],
+              "markDefs": [],
               "style": "normal",
             },
           ]
@@ -103,7 +103,7 @@ describe('plugin:withUndoRedo', () => {
   })
   it('preserves the keys when redoing ', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     render(
       <PortableTextEditorTester

package/src/editor/plugins/createWithInsertData.ts

@@ -15,6 +15,7 @@ import {
   isEqualToEmptyEditor,
   toSlateValue,
 } from '../../utils/values'
+import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withInsertData')
 
@@ -23,7 +24,7 @@ const debug = debugWithName('plugin:withInsertData')
  *
  */
 export function createWithInsertData(
-  change$: EditorChanges,
+  editorActor: EditorActor,
   schemaTypes: PortableTextMemberSchemaTypes,
   keyGenerator: () => string,
 ) {
@@ -158,9 +159,8 @@ export function createWithInsertData(
           // Bail out if it's not valid
           if (!validation.valid && !validation.resolution?.autoResolve) {
             const errorDescription = `${validation.resolution?.description}`
-            change$.next({
+            editorActor.send({
               type: 'error',
-              level: 'warning',
               name: 'pasteError',
               description: errorDescription,
               data: validation,
@@ -180,7 +180,6 @@ export function createWithInsertData(
         debug('No selection, not inserting')
         return false
       }
-      change$.next({type: 'loading', isLoading: true}) // This could potentially take some time
       const html = data.getData('text/html')
       const text = data.getData('text/plain')
 
@@ -232,9 +231,8 @@ export function createWithInsertData(
         // Bail out if it's not valid
         if (!validation.valid) {
           const errorDescription = `Could not validate the resulting portable text to insert.\n${validation.resolution?.description}\nTry to insert as plain text (shift-paste) instead.`
-          change$.next({
+          editorActor.send({
             type: 'error',
-            level: 'warning',
             name: 'pasteError',
             description: errorDescription,
             data: validation,
@@ -246,10 +244,8 @@ export function createWithInsertData(
           `Inserting ${insertedType} fragment at ${JSON.stringify(editor.selection)}`,
         )
         _insertFragment(editor, fragment, schemaTypes)
-        change$.next({type: 'loading', isLoading: false})
         return true
       }
-      change$.next({type: 'loading', isLoading: false})
       return false
     }
 

package/src/editor/plugins/createWithObjectKeys.ts

@@ -5,12 +5,14 @@ import type {
 } from '../../types/editor'
 import {isChangingRemotely} from '../../utils/withChanges'
 import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
+import type {EditorActor} from '../editor-machine'
 
 /**
  * This plugin makes sure that every new node in the editor get a new _key prop when created
  *
  */
 export function createWithObjectKeys(
+  editorActor: EditorActor,
   schemaTypes: PortableTextMemberSchemaTypes,
   keyGenerator: () => string,
 ) {
@@ -75,12 +77,17 @@ export function createWithObjectKeys(
       if (Element.isElement(node) && node._type === schemaTypes.block.name) {
         // Set key on block itself
         if (!node._key) {
+          editorActor.send({type: 'normalizing'})
           Transforms.setNodes(editor, {_key: keyGenerator()}, {at: path})
+          editorActor.send({type: 'done normalizing'})
+          return
         }
         // Set keys on it's children
         for (const [child, childPath] of Node.children(editor, path)) {
           if (!child._key) {
+            editorActor.send({type: 'normalizing'})
             Transforms.setNodes(editor, {_key: keyGenerator()}, {at: childPath})
+            editorActor.send({type: 'done normalizing'})
             return
           }
         }

package/src/editor/plugins/createWithPatches.ts

@@ -1,5 +1,4 @@
 import {insert, setIfMissing, unset, type Patch} from '@portabletext/patches'
-import type {Subject} from 'rxjs'
 import {
   Editor,
   type Descendant,
@@ -14,7 +13,6 @@ import {
   type SplitNodeOperation,
 } from 'slate'
 import type {
-  EditorChange,
   PatchObservable,
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
@@ -32,6 +30,7 @@ import {
   PATCHING,
   withoutPatching,
 } from '../../utils/withoutPatching'
+import type {EditorActor} from '../editor-machine'
 import {withoutSaving} from './createWithUndoRedo'
 
 const debug = debugWithName('plugin:withPatches')
@@ -81,7 +80,7 @@ export interface PatchFunctions {
 }
 
 interface Options {
-  change$: Subject<EditorChange>
+  editorActor: EditorActor
   keyGenerator: () => string
   patches$?: PatchObservable
   patchFunctions: PatchFunctions
@@ -90,7 +89,7 @@ interface Options {
 }
 
 export function createWithPatches({
-  change$,
+  editorActor,
   patches$,
   patchFunctions,
   readOnly,
@@ -281,7 +280,7 @@ export function createWithPatches({
         )
       ) {
         patches = [...patches, unset([])]
-        change$.next({
+        editorActor.send({
           type: 'unset',
           previousValue: fromSlateValue(
             previousChildren,
@@ -299,7 +298,7 @@ export function createWithPatches({
       // Emit all patches
       if (patches.length > 0) {
         patches.forEach((patch) => {
-          change$.next({
+          editorActor.send({
             type: 'patch',
             patch: {...patch, origin: 'local'},
           })

package/src/editor/plugins/createWithPortableTextBlockStyle.ts

@@ -4,10 +4,12 @@ import type {
   PortableTextSlateEditor,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
+import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withPortableTextBlockStyle')
 
 export function createWithPortableTextBlockStyle(
+  editorActor: EditorActor,
   types: PortableTextMemberSchemaTypes,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   const defaultStyle = types.styles[0].value
@@ -17,9 +19,10 @@ export function createWithPortableTextBlockStyle(
     // Extend Slate's default normalization to reset split node to normal style
     // if there is no text at the right end of the split.
     const {normalizeNode} = editor
+
     editor.normalizeNode = (nodeEntry) => {
-      normalizeNode(nodeEntry)
       const [, path] = nodeEntry
+
       for (const op of editor.operations) {
         if (
           op.type === 'split_node' &&
@@ -32,16 +35,21 @@ export function createWithPortableTextBlockStyle(
           const [child] = Editor.node(editor, [op.path[0] + 1, 0])
           if (SlateText.isText(child) && child.text === '') {
             debug(`Normalizing split node to ${defaultStyle} style`, op)
+            editorActor.send({type: 'normalizing'})
             Transforms.setNodes(
               editor,
               {style: defaultStyle},
               {at: [op.path[0] + 1], voids: false},
             )
-            break
+            editorActor.send({type: 'done normalizing'})
+            return
           }
         }
       }
+
+      normalizeNode(nodeEntry)
     }
+
     editor.pteHasBlockStyle = (style: string): boolean => {
       if (!editor.selection) {
         return false