feat(portable-text-editor): determine if selection is made backward (#…

…5807) * feat(portable-text-editor): be able to determine if a selection was made backwards Add .backward? on EditorSelection to be able to tell if the selection was made backward. * test(portable-text-editor): update tests regarding selection.backward * test(portable-text-editor): add test for backward selection
sanity-io · Feb 21, 2024 · db8fd66 · db8fd66
1 parent 1a36a74
commit db8fd66
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 4 deletions.
diff --git a/...sanity/portable-text-editor/e2e-tests/__tests__/selectionAdjustment.collaborative.test.ts b/...sanity/portable-text-editor/e2e-tests/__tests__/selectionAdjustment.collaborative.test.ts
@@ -18,6 +18,7 @@ describe('selection adjustment', () => {
       const expectedSelectionA = {
         anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey'}], offset: 2},
         focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey'}], offset: 2},
+        backward: false,
       }
       const [editorA, editorB] = await getEditors()
       await editorA.pressKey('ArrowRight', 2)
@@ -71,6 +72,7 @@ describe('selection adjustment', () => {
               },
             ],
           },
+          "backward": false,
           "focus": Object {
             "offset": 0,
             "path": Array [
@@ -114,6 +116,7 @@ describe('selection adjustment', () => {
       const expectedSelection = {
         anchor: {path: [{_key: 'someKey2'}, 'children', {_key: 'anotherKey2'}], offset: 2},
         focus: {path: [{_key: 'someKey2'}, 'children', {_key: 'anotherKey2'}], offset: 2},
+        backward: false,
       }
       const [editorA, editorB] = await getEditors()
       await editorA.setSelection(expectedSelection)
@@ -198,6 +201,7 @@ describe('selection adjustment', () => {
       const expectedSelection = {
         anchor: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 5},
         focus: {path: [{_key: 'someKey5'}, 'children', {_key: 'anotherKey5'}], offset: 5},
+        backward: false,
       }
       const [editorA, editorB] = await getEditors()
       await editorA.setSelection(expectedSelection)
@@ -266,6 +270,7 @@ describe('selection adjustment', () => {
       const expectedSelection = {
         anchor: {path: [{_key: 'someKey3'}, 'children', {_key: 'anotherKey3'}], offset: 0},
         focus: {path: [{_key: 'someKey3'}, 'children', {_key: 'anotherKey3'}], offset: 0},
+        backward: false,
       }
       const [editorA, editorB] = await getEditors()
       await editorA.setSelection(expectedSelection)
@@ -354,6 +359,7 @@ describe('selection adjustment', () => {
       const expectedSelection = {
         anchor: {path: [{_key: 'someKey6'}, 'children', {_key: 'anotherKey6'}], offset: 2},
         focus: {path: [{_key: 'someKey6'}, 'children', {_key: 'anotherKey6'}], offset: 2},
+        backward: false,
       }
       const [editorA, editorB] = await getEditors()
       await editorA.setSelection(expectedSelection)
@@ -410,6 +416,7 @@ describe('selection adjustment', () => {
               },
             ],
           },
+          "backward": false,
           "focus": Object {
             "offset": 0,
             "path": Array [
@@ -444,6 +451,7 @@ describe('selection adjustment', () => {
     const expectedSelectionA = {
       anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey3'}], offset: 1},
       focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey3'}], offset: 1},
+      backward: false,
     }
     const [editorA, editorB] = await getEditors()
     await editorA.setSelection(expectedSelectionA)
@@ -479,6 +487,7 @@ describe('selection adjustment', () => {
     expect(await editorA.getSelection()).toEqual({
       anchor: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 8},
       focus: {path: [{_key: 'someKey'}, 'children', {_key: 'anotherKey1'}], offset: 8},
+      backward: false,
     })
   })
 
@@ -551,10 +560,12 @@ describe('selection adjustment', () => {
     expect(await editorA.getSelection()).toEqual({
       anchor: {path: [{_key: 'someKey1'}, 'children', {_key: 'anotherKey1'}], offset: 0},
       focus: {path: [{_key: 'someKey1'}, 'children', {_key: 'anotherKey1'}], offset: 1},
+      backward: false,
     })
     expect(await editorB.getSelection()).toEqual({
       anchor: {path: [{_key: 'someKey2'}, 'children', {_key: 'anotherKey2'}], offset: 0},
       focus: {path: [{_key: 'someKey2'}, 'children', {_key: 'anotherKey2'}], offset: 1},
+      backward: false,
     })
   })
 })
diff --git a/packages/@sanity/portable-text-editor/e2e-tests/__tests__/undoRedo.collborative.test.ts b/packages/@sanity/portable-text-editor/e2e-tests/__tests__/undoRedo.collborative.test.ts
@@ -264,11 +264,13 @@ describe('undo/redo', () => {
     const startSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
+      backward: false,
     }
     await editorA.setSelection(startSelectionA)
     const startSelectionB = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     }
     await editorB.setSelection(startSelectionB)
     await editorA.insertText('123')
@@ -366,11 +368,13 @@ describe('undo/redo', () => {
     const startSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
+      backward: false,
     }
     await editorA.setSelection(startSelectionA)
     const startSelectionB = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
+      backward: false,
     }
     await editorB.setSelection(startSelectionB)
     await editorB.pressKey('Backspace')
@@ -448,6 +452,7 @@ describe('undo/redo', () => {
     const desiredSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
+      backward: false,
     }
     await editorA.setSelection(desiredSelectionA)
     await editorA.pressKey('Enter')
@@ -539,11 +544,13 @@ describe('undo/redo', () => {
     const startSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
+      backward: false,
     }
     await editorA.setSelection(startSelectionA)
     const startSelectionB = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     }
     await editorB.setSelection(startSelectionB)
     await editorA.insertText('123')
@@ -622,6 +629,7 @@ describe('undo/redo', () => {
             },
           ],
         },
+        "backward": false,
         "focus": Object {
           "offset": 8,
           "path": Array [
@@ -651,6 +659,7 @@ describe('undo/redo', () => {
             },
           ],
         },
+        "backward": false,
         "focus": Object {
           "offset": 14,
           "path": Array [
@@ -689,11 +698,13 @@ describe('undo/redo', () => {
     const startSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 5},
+      backward: false,
     }
     await editorA.setSelection(startSelectionA)
     const startSelectionB = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     }
     await editorB.setSelection(startSelectionB)
     await editorA.pressKey('1')
@@ -853,11 +864,13 @@ describe('undo/redo', () => {
     const startSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 1},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 1},
+      backward: false,
     }
     await editorA.setSelection(startSelectionA)
     const startSelectionB = {
       anchor: {path: [{_key: 'randomKey2'}, 'children', {_key: 'randomKey3'}], offset: 1},
       focus: {path: [{_key: 'randomKey2'}, 'children', {_key: 'randomKey3'}], offset: 1},
+      backward: false,
     }
     await editorB.setSelection(startSelectionB)
     await editorA.pressKey('a')
@@ -1060,6 +1073,7 @@ describe('undo/redo', () => {
       const desiredSelectionA = {
         anchor: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: 0},
         focus: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: 0},
+        backward: false,
       }
       const p1Prefix = 'Paragraph 1: '
       await editorA.setSelection(desiredSelectionA)
@@ -1146,6 +1160,7 @@ describe('undo/redo', () => {
       const desiredSelectionA = {
         anchor: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: 0},
         focus: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: 0},
+        backward: false,
       }
       const p1Prefix = 'Paragraph 1: '
       await editorA.setSelection(desiredSelectionA)
@@ -1242,6 +1257,7 @@ describe('undo/redo', () => {
       const desiredSelectionA = {
         anchor: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: charOffset},
         focus: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: charOffset},
+        backward: false,
       }
       await editorA.setSelection(desiredSelectionA)
       await editorA.pressKey('Backspace')
@@ -1296,6 +1312,7 @@ describe('undo/redo', () => {
       const desiredSelectionA = {
         anchor: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: charOffset},
         focus: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: charOffset},
+        backward: false,
       }
       await editorA.setSelection(desiredSelectionA)
       await editorA.pressKey('Backspace')
@@ -1350,6 +1367,7 @@ describe('undo/redo', () => {
       const desiredSelectionA = {
         anchor: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: charOffset},
         focus: {path: [{_key: 'blockA'}, 'children', {_key: 'spanA'}], offset: charOffset},
+        backward: false,
       }
       await editorA.setSelection(desiredSelectionA)
       await editorA.pressKey('Backspace')

diff --git a/...es/@sanity/portable-text-editor/e2e-tests/__tests__/writingTogether.collaborative.test.ts b/...es/@sanity/portable-text-editor/e2e-tests/__tests__/writingTogether.collaborative.test.ts
@@ -56,10 +56,12 @@ describe('collaborate editing', () => {
     expect(selectionA).toEqual({
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     })
     expect(selectionB).toEqual({
       anchor: {offset: 0, path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}]},
       focus: {offset: 0, path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}]},
+      backward: false,
     })
   })
 
@@ -162,6 +164,7 @@ describe('collaborate editing', () => {
     const desiredSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
+      backward: false,
     }
     await editorA.setSelection(desiredSelectionA)
     await editorB.setSelection({
@@ -194,6 +197,7 @@ describe('collaborate editing', () => {
     expect(selectionB).toEqual({
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
+      backward: false,
     })
   })
 
@@ -218,6 +222,7 @@ describe('collaborate editing', () => {
     const desiredSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     }
     await editorB.setSelection({
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 18},
@@ -264,6 +269,7 @@ describe('collaborate editing', () => {
     expect(selectionB).toEqual({
       anchor: {offset: 0, path: [{_key: 'B-6'}, 'children', {_key: 'B-5'}]},
       focus: {offset: 0, path: [{_key: 'B-6'}, 'children', {_key: 'B-5'}]},
+      backward: false,
     })
   })
 
@@ -337,10 +343,12 @@ describe('collaborate editing', () => {
     expect(selectionA).toEqual({
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     })
     expect(selectionB).toEqual({
       anchor: {offset: 17, path: [{_key: 'B-3'}, 'children', {_key: 'B-2'}]},
       focus: {offset: 17, path: [{_key: 'B-3'}, 'children', {_key: 'B-2'}]},
+      backward: false,
     })
   })
 
@@ -379,6 +387,7 @@ describe('collaborate editing', () => {
     const startSelectionA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 11},
+      backward: false,
     }
     await editorA.setSelection(startSelectionA)
     await editorB.setSelection({
@@ -415,10 +424,12 @@ describe('collaborate editing', () => {
     expect(selectionA).toEqual({
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 52},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 52},
+      backward: false,
     })
     expect(selectionB).toEqual({
       anchor: {offset: 17, path: [{_key: 'B-3'}, 'children', {_key: 'B-2'}]},
       focus: {offset: 17, path: [{_key: 'B-3'}, 'children', {_key: 'B-2'}]},
+      backward: false,
     })
   })
 
@@ -460,6 +471,7 @@ describe('collaborate editing', () => {
     const newExpectedSelA = {
       anchor: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 52},
       focus: {path: [{_key: 'randomKey0'}, 'children', {_key: 'randomKey1'}], offset: 52},
+      backward: false,
     }
     await editorA.setSelection(newExpectedSelA)
     const newSelA = await editorA.getSelection()
@@ -532,6 +544,7 @@ describe('collaborate editing', () => {
             },
           ],
         },
+        "backward": false,
         "focus": Object {
           "offset": 0,
           "path": Array [
@@ -597,11 +610,13 @@ describe('collaborate editing', () => {
     expect(selectionA).toEqual({
       anchor: {path: [{_key: 'A-8'}, 'children', {_key: 'A-7'}], offset: 0},
       focus: {path: [{_key: 'A-8'}, 'children', {_key: 'A-7'}], offset: 0},
+      backward: false,
     })
     const selectionB = await editorB.getSelection()
     expect(selectionB).toEqual({
       anchor: {offset: 17, path: [{_key: 'B-3'}, 'children', {_key: 'B-2'}]},
       focus: {offset: 17, path: [{_key: 'B-3'}, 'children', {_key: 'B-2'}]},
+      backward: false,
     })
   })
 
@@ -680,6 +695,7 @@ describe('collaborate editing', () => {
     expect(newSelectionA).toEqual({
       anchor: {path: [{_key: '26901064a3c9'}, 'children', {_key: 'ef4627c1c11b'}], offset: 16},
       focus: {path: [{_key: '26901064a3c9'}, 'children', {_key: 'ef4627c1c11b'}], offset: 16},
+      backward: false,
     })
   })
   it('will not result in duplicate keys when overwriting some partial bold text line, as the only content in the editor', async () => {

diff --git a/packages/@sanity/portable-text-editor/e2e-tests/setup/collaborative.jest.env.ts b/packages/@sanity/portable-text-editor/e2e-tests/setup/collaborative.jest.env.ts
@@ -183,6 +183,9 @@ export default class CollaborationEnvironment extends NodeEnvironment {
           }
 
           const waitForSelection = async (selection: EditorSelection) => {
+            if (selection && typeof selection.backward === 'undefined') {
+              selection.backward = false
+            }
             const value = await valueHandle.evaluate((node): PortableTextBlock[] | undefined =>
               node instanceof HTMLElement && node.innerText
                 ? JSON.parse(node.innerText)
@@ -306,6 +309,9 @@ export default class CollaborationEnvironment extends NodeEnvironment {
               await editableHandle.focus()
             },
             setSelection: async (selection: EditorSelection | null) => {
+              if (selection && typeof selection.backward === 'undefined') {
+                selection.backward = false
+              }
               ipc.of.socketServer.emit(
                 'payload',
                 JSON.stringify({

diff --git a/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx b/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx
@@ -115,6 +115,7 @@ describe('initialization', () => {
     const initialSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+      backward: false,
     }
     const onChange = jest.fn()
     render(
@@ -140,10 +141,12 @@ describe('initialization', () => {
     const initialSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
+      backward: false,
     }
     const newSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 3},
+      backward: false,
     }
     const onChange = jest.fn()
     const {rerender} = render(

diff --git a/.../@sanity/portable-text-editor/src/editor/plugins/__tests__/withEditableAPIInsert.test.tsx b/.../@sanity/portable-text-editor/src/editor/plugins/__tests__/withEditableAPIInsert.test.tsx
@@ -140,6 +140,7 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 },
               ],
             },
+            "backward": false,
             "focus": Object {
               "offset": 1,
               "path": Array [