refactor(portable-text-editor): automatically resolve some validation errors

packages/@sanity/portable-text-editor/package.json

@@ -48,7 +48,7 @@
     "build": "pkg-utils build --strict --check --clean",
     "check:types": "tsc --project tsconfig.lib.json",
     "clean": "rimraf lib",
-    "dev": "cd ./e2e-tests/ && ts-node serve",
+    "dev": "cd ./e2e-tests/ && tsx serve",
     "lint": "eslint .",
     "prepublishOnly": "turbo run build",
     "prettier": "prettier --write './**/*.{ts,tsx,js,css,html}'",
@@ -97,6 +97,7 @@
     "rimraf": "^3.0.2",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.11",
+    "tsx": "^4.10.3",
     "vite": "^4.5.3"
   },
   "peerDependencies": {

packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx

@@ -330,19 +330,12 @@ describe('initialization', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(onChange).toHaveBeenCalledWith({
+          type: 'invalidValue',
+          value: initialValue,
           resolution: {
             action: 'Remove invalid marks',
             description:
               "Block with _key 'abc' contains marks (invalid) not supported by the current content model.",
-            item: {
-              _key: 'abc',
-              _type: 'myTestBlockType',
-              children: [{_key: 'def', _type: 'span', marks: ['invalid'], text: 'Test'}],
-              markDefs: [],
-            },
-            patches: [
-              {path: [{_key: 'abc'}, 'children', {_key: 'def'}, 'marks'], type: 'set', value: []},
-            ],
             i18n: {
               action: 'inputs.portable-text.invalid-value.orphaned-marks.action',
               description: 'inputs.portable-text.invalid-value.orphaned-marks.description',
@@ -351,26 +344,40 @@ describe('initialization', () => {
                 orphanedMarks: ['invalid'],
               },
             },
-          },
-          type: 'invalidValue',
-          value: [
-            {
-              _key: '123',
-              _type: 'myTestBlockType',
-              children: [{_key: '567', _type: 'span', marks: [], text: 'Hello'}],
-              markDefs: [],
-            },
-            {
+            item: {
               _key: 'abc',
               _type: 'myTestBlockType',
-              children: [{_key: 'def', _type: 'span', marks: ['invalid'], text: 'Test'}],
+              children: [
+                {
+                  _key: 'def',
+                  _type: 'span',
+                  marks: ['invalid'],
+                  text: 'Test',
+                },
+              ],
               markDefs: [],
             },
-          ],
+            patches: [
+              {
+                path: [
+                  {
+                    _key: 'abc',
+                  },
+                  'children',
+                  {
+                    _key: 'def',
+                  },
+                  'marks',
+                ],
+                type: 'set',
+                value: [],
+              },
+            ],
+          },
         })
-        expect(onChange).not.toHaveBeenCalledWith({type: 'value', value: initialValue})
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
+    expect(onChange).not.toHaveBeenCalledWith({type: 'value', value: initialValue})
+    expect(onChange).toHaveBeenCalledWith({type: 'ready'})
   })
 })

packages/@sanity/portable-text-editor/src/editor/__tests__/pteWarningsSelfSolving.test.tsx

@@ -0,0 +1,114 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {PortableTextEditor} from '../PortableTextEditor'
+import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
+
+describe('when PTE would display warnings, instead it self solves', () => {
+  it('when child at index is missing required _key in block with _key', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: 'abc',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _type: 'span',
+            marks: [],
+            text: 'Hello with a new key',
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ]
+
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+    })
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: 'abc',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: '4',
+                _type: 'span',
+                text: 'Hello with a new key',
+                marks: [],
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
+      }
+    })
+  })
+  it('adds missing .markDefs', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: 'abc',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _key: 'def',
+            _type: 'span',
+            marks: [],
+            text: 'Hello with markDefs',
+          },
+        ],
+        style: 'normal',
+      },
+    ]
+
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+    })
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.focus(editorRef.current)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: 'abc',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'def',
+                _type: 'span',
+                text: 'Hello with markDefs',
+                marks: [],
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
+      }
+    })
+  })
+})

packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.ts

@@ -142,7 +142,24 @@ export function useSyncValue(
                   if (hasChanges && isValid) {
                     const validationValue = [value[currentBlockIndex]]
                     const validation = validateValue(validationValue, schemaTypes, keyGenerator)
-                    if (validation.valid) {
+                    // Resolve validations that can be resolved automatically, without involving the user (but only if the value was changed)
+                    if (
+                      !validation.valid &&
+                      validation.resolution?.autoResolve &&
+                      validation.resolution?.patches.length > 0
+                    ) {
+                      // Only apply auto resolution if the value has been populated before and is different from the last one.
+                      if (!readOnly && previousValue.current && previousValue.current !== value) {
+                        // Give a console warning about the fact that it did an auto resolution
+                        console.warn(
+                          `${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`,
+                        )
+                        validation.resolution.patches.forEach((patch) => {
+                          change$.next({type: 'patch', patch})
+                        })
+                      }
+                    }
+                    if (validation.valid || validation.resolution?.autoResolve) {
                       if (oldBlock._key === currentBlock._key) {
                         if (debug.enabled) debug('Updating block', oldBlock, currentBlock)
                         _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex)
@@ -168,7 +185,7 @@ export function useSyncValue(
                         'Validating and inserting new block in the end of the value',
                         currentBlock,
                       )
-                    if (validation.valid) {
+                    if (validation.valid || validation.resolution?.autoResolve) {
                       withPreserveKeys(slateEditor, () => {
                         Transforms.insertNodes(slateEditor, currentBlock, {
                           at: [currentBlockIndex],
@@ -255,6 +272,7 @@ function _replaceBlock(
   withPreserveKeys(slateEditor, () => {
     Transforms.insertNodes(slateEditor, currentBlock, {at: [currentBlockIndex]})
   })
+  slateEditor.onChange()
   if (selectionFocusOnBlock) {
     Transforms.select(slateEditor, currentSelection)
   }

packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -203,7 +203,7 @@ describe('plugin:withPortableTextMarksModel', () => {
             focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
             anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 1},
           })
-          PortableTextEditor.toggleMark(editor, 'bold')
+          PortableTextEditor.toggleMark(editor, 'strong')
           const value = PortableTextEditor.getValue(editor)
           expect(value).toMatchInlineSnapshot(`
         Array [
@@ -215,7 +215,7 @@ describe('plugin:withPortableTextMarksModel', () => {
                 "_key": "a1",
                 "_type": "span",
                 "marks": Array [
-                  "bold",
+                  "strong",
                 ],
                 "text": "123",
               },
@@ -231,7 +231,7 @@ describe('plugin:withPortableTextMarksModel', () => {
                 "_key": "b1",
                 "_type": "span",
                 "marks": Array [
-                  "bold",
+                  "strong",
                 ],
                 "text": "1",
               },
@@ -287,7 +287,7 @@ describe('plugin:withPortableTextMarksModel', () => {
           focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
           anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 4},
         })
-        PortableTextEditor.toggleMark(editor, 'bold')
+        PortableTextEditor.toggleMark(editor, 'strong')
         expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
         Array [
           Object {
@@ -298,7 +298,7 @@ describe('plugin:withPortableTextMarksModel', () => {
                 "_key": "a1",
                 "_type": "span",
                 "marks": Array [
-                  "bold",
+                  "strong",
                 ],
                 "text": "1234",
               },
@@ -315,7 +315,7 @@ describe('plugin:withPortableTextMarksModel', () => {
             focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 1},
             anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 3},
           })
-          PortableTextEditor.toggleMark(editorRef.current, 'bold')
+          PortableTextEditor.toggleMark(editorRef.current, 'strong')
           expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
         Array [
           Object {
@@ -326,7 +326,7 @@ describe('plugin:withPortableTextMarksModel', () => {
                 "_key": "a1",
                 "_type": "span",
                 "marks": Array [
-                  "bold",
+                  "strong",
                 ],
                 "text": "1",
               },
@@ -340,7 +340,7 @@ describe('plugin:withPortableTextMarksModel', () => {
                 "_key": "1",
                 "_type": "span",
                 "marks": Array [
-                  "bold",
+                  "strong",
                 ],
                 "text": "4",
               },
@@ -358,7 +358,7 @@ describe('plugin:withPortableTextMarksModel', () => {
             focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
             anchor: {path: [{_key: 'a'}, 'children', {_key: '1'}], offset: 1},
           })
-          PortableTextEditor.toggleMark(editor, 'bold')
+          PortableTextEditor.toggleMark(editor, 'strong')
           expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
 Array [
   Object {
@@ -369,7 +369,7 @@ Array [
         "_key": "a1",
         "_type": "span",
         "marks": Array [
-          "bold",
+          "strong",
         ],
         "text": "1234",
       },
@@ -432,7 +432,7 @@ Array [
           focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
           anchor: {path: [{_key: 'a'}, 'children', {_key: 'b1'}], offset: 12},
         })
-        PortableTextEditor.toggleMark(editor, 'bold')
+        PortableTextEditor.toggleMark(editor, 'strong')
         expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
         Array [
           Object {
@@ -444,15 +444,15 @@ Array [
                 "_type": "span",
                 "marks": Array [
                   "abc",
-                  "bold",
+                  "strong",
                 ],
                 "text": "A link",
               },
               Object {
                 "_key": "a2",
                 "_type": "span",
                 "marks": Array [
-                  "bold",
+                  "strong",
                 ],
                 "text": ", not a link",
               },
@@ -778,7 +778,7 @@ Array [
             {
               _key: 'a1',
               _type: 'span',
-              marks: ['bold'],
+              marks: ['strong'],
               text: '12',
             },
             {
@@ -788,7 +788,7 @@ Array [
               text: '34',
             },
           ],
-          markDefs: [{_key: 'bold', _type: 'strong'}],
+          markDefs: [{_key: 'strong', _type: 'strong'}],
           style: 'normal',
         },
       ]
@@ -811,9 +811,9 @@ Array [
           focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
           anchor: {path: [{_key: 'a'}, 'children', {_key: '2'}], offset: 2},
         })
-        expect(PortableTextEditor.isMarkActive(editor, 'bold')).toBe(false)
-        PortableTextEditor.toggleMark(editor, 'bold')
-        expect(PortableTextEditor.isMarkActive(editor, 'bold')).toBe(true)
+        expect(PortableTextEditor.isMarkActive(editor, 'strong')).toBe(false)
+        PortableTextEditor.toggleMark(editor, 'strong')
+        expect(PortableTextEditor.isMarkActive(editor, 'strong')).toBe(true)
       })
     })