test(portable-text-editor): update and add tests for latest refactor

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment ./test/setup/jsdom.jest.env.ts
+ * \@jest-environment ./test/setup/jsdom.jest.env.ts
  */
 /* eslint-disable no-irregular-whitespace */
 // eslint-disable-next-line import/no-unassigned-import

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment ./test/setup/jsdom.jest.env.ts
+ * \@jest-environment ./test/setup/jsdom.jest.env.ts
  */
 /* eslint-disable no-irregular-whitespace */
 // eslint-disable-next-line import/no-unassigned-import
@@ -148,7 +148,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
           "_type": "myTestBlockType",
           "children": Array [
             Object {
-              "_key": "1",
+              "_key": "2",
               "_type": "span",
               "marks": Array [],
               "text": "",

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment ./test/setup/jsdom.jest.env.ts
+ * \@jest-environment ./test/setup/jsdom.jest.env.ts
  */
 // eslint-disable-next-line import/no-unassigned-import
 import '@testing-library/jest-dom/extend-expect'
@@ -248,7 +248,7 @@ describe('plugin:withPortableTextMarksModel: normalization', () => {
               "text": "1",
             },
             Object {
-              "_key": "1",
+              "_key": "2",
               "_type": "span",
               "marks": Array [],
               "text": "23",
@@ -350,13 +350,13 @@ describe('plugin:withPortableTextMarksModel: normalization', () => {
               "text": "1",
             },
             Object {
-              "_key": "2",
+              "_key": "4",
               "_type": "span",
               "marks": Array [],
               "text": "23",
             },
             Object {
-              "_key": "1",
+              "_key": "2",
               "_type": "span",
               "marks": Array [
                 "bold",
@@ -719,11 +719,11 @@ describe('plugin:withPortableTextMarksModel: normalization', () => {
           "style": "normal",
         },
         Object {
-          "_key": "2",
+          "_key": "4",
           "_type": "myTestBlockType",
           "children": Array [
             Object {
-              "_key": "1",
+              "_key": "2",
               "_type": "span",
               "marks": Array [
                 "bab319ad3a9d",

packages/@sanity/portable-text-editor/src/utils/__tests__/operationToPatches.test.ts

@@ -3,18 +3,19 @@ import {Subject} from 'rxjs'
 import {getPortableTextFeatures} from '../getPortableTextFeatures'
 import {type} from '../../editor/__tests__/PortableTextEditorTester'
 import {createOperationToPatches} from '../operationToPatches'
-import {withPortableText} from '../../editor/withPortableText'
+import {withPlugins} from '../../editor/plugins'
 import {keyGenerator} from '../..'
 import {TextBlock} from '../../types/portableText'
 
 const portableTextFeatures = getPortableTextFeatures(type)
 
 const operationToPatches = createOperationToPatches(portableTextFeatures)
-const editor = withPortableText(createEditor(), {
+const editor = withPlugins(createEditor(), {
   portableTextFeatures,
   keyGenerator,
   change$: new Subject(),
   readOnly: false,
+  syncValue: () => undefined,
 })
 
 const createDefaultValue = () =>

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

@@ -1,5 +1,5 @@
 /**
- * @jest-environment ./test/setup/jsdom.jest.env.ts
+ * \@jest-environment ./test/setup/jsdom.jest.env.ts
  */
 // eslint-disable-next-line import/no-unassigned-import
 import '@testing-library/jest-dom/extend-expect'

packages/@sanity/portable-text-editor/test/__tests__/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "browser": false,
+    "node": true
+  },
+  "rules": {
+    "tsdoc/syntax": "off"
+  }
+}

packages/@sanity/portable-text-editor/test/__tests__/selectionAdjustment.collaborative.test.ts

@@ -121,52 +121,70 @@ describe('selection adjustment', () => {
           _type: 'block',
           markDefs: [],
           style: 'normal',
-          children: [{_key: 'anotherKey3', _type: 'span', text: 'Three', marks: []}],
+          children: [{_key: 'anotherKey3', _type: 'span', text: '', marks: []}],
         },
-      ])
-      const expectedSelection = {
-        anchor: {path: [{_key: 'someKey3'}, 'children', {_key: 'anotherKey3'}], offset: 0},
-        focus: {path: [{_key: 'someKey3'}, 'children', {_key: 'anotherKey3'}], offset: 0},
-      }
-      const [editorA, editorB] = await getEditors()
-      await editorA.setSelection(expectedSelection)
-      expect(await editorA.getSelection()).toEqual(expectedSelection)
-      await editorB.setSelection({
-        anchor: {path: [{_key: 'someKey2'}, 'children', {_key: 'anotherKey2'}], offset: 0},
-        focus: {path: [{_key: 'someKey2'}, 'children', {_key: 'anotherKey2'}], offset: 0},
-      })
-      await editorB.pressKey('Backspace')
-      const valueB = await editorB.getValue()
-      expect(valueB).toEqual([
         {
-          _key: 'someKey2',
+          _key: 'someKey4',
           _type: 'block',
           markDefs: [],
           style: 'normal',
-          children: [
-            {
-              _key: 'anotherKey2',
-              _type: 'span',
-              text: '',
-              marks: [],
-            },
-          ],
+          children: [{_key: 'anotherKey4', _type: 'span', text: '', marks: []}],
         },
         {
-          _key: 'someKey3',
+          _key: 'someKey5',
           _type: 'block',
           markDefs: [],
           style: 'normal',
-          children: [
-            {
-              _key: 'anotherKey3',
-              _type: 'span',
-              text: 'Three',
-              marks: [],
-            },
-          ],
+          children: [{_key: 'anotherKey5', _type: 'span', text: 'Three', marks: []}],
         },
       ])
+      const expectedSelection = {
+        anchor: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 5},
+        focus: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 5},
+      }
+      const [editorA, editorB] = await getEditors()
+      await editorA.setSelection(expectedSelection)
+      expect(await editorA.getSelection()).toEqual(expectedSelection)
+      await editorB.setSelection({
+        anchor: {path: [{_key: 'someKey4'}, 'children', {_key: 'anotherKey4'}], offset: 0},
+        focus: {path: [{_key: 'someKey4'}, 'children', {_key: 'anotherKey4'}], offset: 0},
+      })
+      await editorB.pressKey('Backspace')
+      await editorB.pressKey('Backspace')
+      await editorB.pressKey('Backspace')
+      const valueB = await editorB.getValue()
+      expect(valueB).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "_key": "someKey4",
+            "_type": "block",
+            "children": Array [
+              Object {
+                "_key": "anotherKey4",
+                "_type": "span",
+                "marks": Array [],
+                "text": "",
+              },
+            ],
+            "markDefs": Array [],
+            "style": "normal",
+          },
+          Object {
+            "_key": "someKey5",
+            "_type": "block",
+            "children": Array [
+              Object {
+                "_key": "anotherKey5",
+                "_type": "span",
+                "marks": Array [],
+                "text": "Three",
+              },
+            ],
+            "markDefs": Array [],
+            "style": "normal",
+          },
+        ]
+      `)
       expect(await editorA.getSelection()).toEqual(expectedSelection)
     })
     it('will keep A on same line if B inserts a line above', async () => {
@@ -216,13 +234,13 @@ describe('selection adjustment', () => {
           ],
         },
         {
-          _key: 'B-3',
+          _key: 'B-5',
           _type: 'block',
           markDefs: [],
           style: 'normal',
           children: [
             {
-              _key: 'B-2',
+              _key: 'B-3',
               _type: 'span',
               text: '',
               marks: [],
@@ -257,21 +275,21 @@ describe('selection adjustment', () => {
           _type: 'block',
           markDefs: [],
           style: 'normal',
-          children: [{_key: 'anotherKey5', _type: 'span', text: 'One', marks: []}],
+          children: [{_key: 'anotherKey5', _type: 'span', text: '1', marks: []}],
         },
         {
           _key: 'someKey6',
           _type: 'block',
           markDefs: [],
           style: 'normal',
-          children: [{_key: 'anotherKey6', _type: 'span', text: 'Two', marks: []}],
+          children: [{_key: 'anotherKey6', _type: 'span', text: '22', marks: []}],
         },
         {
           _key: 'someKey7',
           _type: 'block',
           markDefs: [],
           style: 'normal',
-          children: [{_key: 'anotherKey7', _type: 'span', text: 'Three', marks: []}],
+          children: [{_key: 'anotherKey7', _type: 'span', text: '333', marks: []}],
         },
       ])
       const expectedSelection = {
@@ -297,7 +315,7 @@ describe('selection adjustment', () => {
             {
               _key: 'anotherKey5',
               _type: 'span',
-              text: 'OneTwo',
+              text: '122',
               marks: [],
             },
           ],
@@ -311,18 +329,76 @@ describe('selection adjustment', () => {
             {
               _key: 'anotherKey7',
               _type: 'span',
-              text: 'Three',
+              text: '333',
               marks: [],
             },
           ],
         },
       ])
+      const valueA = await editorA.getValue()
+      expect(valueA).toEqual(valueB)
       expect(await editorA.getSelection()).toEqual({
-        anchor: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 6},
-        focus: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 6},
+        anchor: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 3},
+        focus: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 3},
       })
     })
   })
+
+  it('will keep A on same word if B merges marks within that line', async () => {
+    await setDocumentValue([
+      {
+        _key: 'someKey',
+        _type: 'block',
+        markDefs: [],
+        style: 'normal',
+        children: [
+          {_key: 'anotherKey1', _type: 'span', text: '1 ', marks: []},
+          {_key: 'anotherKey2', _type: 'span', text: '22', marks: ['strong']},
+          {_key: 'anotherKey3', _type: 'span', text: ' 333', marks: []},
+        ],
+      },
+    ])
+    const expectedSelectionA = {
+      anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey3'}], offset: 1},
+      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey3'}], offset: 1},
+    }
+    const [editorA, editorB] = await getEditors()
+    await editorA.setSelection(expectedSelectionA)
+    expect(await editorA.getSelection()).toEqual(expectedSelectionA)
+    const expectedSelectionB = {
+      anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey2'}], offset: 0},
+      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey2'}], offset: 2},
+    }
+    await editorB.setSelection(expectedSelectionB)
+    expect(await editorB.getSelection()).toEqual(expectedSelectionB)
+    await editorB.toggleMark()
+    const valueB = await editorB.getValue()
+    expect(valueB).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "_key": "someKey",
+          "_type": "block",
+          "children": Array [
+            Object {
+              "_key": "anotherKey1",
+              "_type": "span",
+              "marks": Array [],
+              "text": "1 22 333",
+            },
+          ],
+          "markDefs": Array [],
+          "style": "normal",
+        },
+      ]
+    `)
+    const valueA = await editorA.getValue()
+    expect(valueA).toEqual(valueB)
+    expect(await editorA.getSelection()).toEqual({
+      anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 5},
+      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 5},
+    })
+  })
+
   it('will keep A on same word if B merges marks within that line', async () => {
     await setDocumentValue([
       {
@@ -331,9 +407,9 @@ describe('selection adjustment', () => {
         markDefs: [],
         style: 'normal',
         children: [
-          {_key: 'anotherKey1', _type: 'span', text: 'One ', marks: []},
-          {_key: 'anotherKey2', _type: 'span', text: 'Two', marks: ['strong']},
-          {_key: 'anotherKey3', _type: 'span', text: ' Three', marks: []},
+          {_key: 'anotherKey1', _type: 'span', text: '1 ', marks: []},
+          {_key: 'anotherKey2', _type: 'span', text: '22', marks: ['strong']},
+          {_key: 'anotherKey3', _type: 'span', text: ' 333', marks: []},
         ],
       },
     ])
@@ -346,7 +422,7 @@ describe('selection adjustment', () => {
     expect(await editorA.getSelection()).toEqual(expectedSelectionA)
     const expectedSelectionB = {
       anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey2'}], offset: 0},
-      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey2'}], offset: 3},
+      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey2'}], offset: 2},
     }
     await editorB.setSelection(expectedSelectionB)
     expect(await editorB.getSelection()).toEqual(expectedSelectionB)
@@ -362,7 +438,7 @@ describe('selection adjustment', () => {
               "_key": "anotherKey1",
               "_type": "span",
               "marks": Array [],
-              "text": "One Two Three",
+              "text": "1 22 333",
             },
           ],
           "markDefs": Array [],
@@ -373,8 +449,8 @@ describe('selection adjustment', () => {
     const valueA = await editorA.getValue()
     expect(valueA).toEqual(valueB)
     expect(await editorA.getSelection()).toEqual({
-      anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 8},
-      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 8},
+      anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 5},
+      focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 5},
     })
   })
 })