@portabletext/editor 0.0.0

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

@@ -0,0 +1,244 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {PortableTextEditorTester, schemaType} from '../../__tests__/PortableTextEditorTester'
+import {PortableTextEditor} from '../../PortableTextEditor'
+
+const initialValue = [
+  {
+    _key: 'a',
+    _type: 'myTestBlockType',
+    children: [
+      {
+        _key: 'a1',
+        _type: 'span',
+        marks: [],
+        text: 'Block A',
+      },
+    ],
+    markDefs: [],
+    style: 'normal',
+  },
+  {
+    _key: 'b',
+    _type: 'myTestBlockType',
+    children: [
+      {
+        _key: 'b1',
+        _type: 'span',
+        marks: [],
+        text: 'Block B',
+      },
+    ],
+    markDefs: [],
+    style: 'normal',
+  },
+]
+
+const initialSelection = {
+  focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 7},
+  anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 7},
+}
+
+describe('plugin:withEditableAPI: .delete()', () => {
+  it('deletes block', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.select(editorRef.current, initialSelection)
+        PortableTextEditor.delete(
+          editorRef.current,
+          PortableTextEditor.getSelection(editorRef.current),
+          {mode: 'blocks'},
+        )
+        expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "_key": "a",
+              "_type": "myTestBlockType",
+              "children": Array [
+                Object {
+                  "_key": "a1",
+                  "_type": "span",
+                  "marks": Array [],
+                  "text": "Block A",
+                },
+              ],
+              "markDefs": Array [],
+              "style": "normal",
+            },
+          ]
+        `)
+      }
+    })
+  })
+
+  it('deletes all the blocks, but leaves a placeholder block', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    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.delete(
+          editorRef.current,
+          {
+            focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 7},
+            anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+          },
+          {mode: 'blocks'},
+        )
+      }
+    })
+    await waitFor(() => {
+      if (editorRef.current) {
+        // New keys here confirms that a placeholder block has been created
+        expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "_key": "1",
+              "_type": "myTestBlockType",
+              "children": Array [
+                Object {
+                  "_key": "2",
+                  "_type": "span",
+                  "marks": Array [],
+                  "text": "",
+                },
+              ],
+              "markDefs": Array [],
+              "style": "normal",
+            },
+          ]
+        `)
+      }
+    })
+  })
+
+  it('deletes children', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.select(editorRef.current, {
+          focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 5},
+          anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 7},
+        })
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.delete(
+          editorRef.current,
+          PortableTextEditor.getSelection(editorRef.current),
+          {mode: 'children'},
+        )
+        expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
+                  Array [
+                    Object {
+                      "_key": "a",
+                      "_type": "myTestBlockType",
+                      "children": Array [
+                        Object {
+                          "_key": "a1",
+                          "_type": "span",
+                          "marks": Array [],
+                          "text": "Block A",
+                        },
+                      ],
+                      "markDefs": Array [],
+                      "style": "normal",
+                    },
+                    Object {
+                      "_key": "b",
+                      "_type": "myTestBlockType",
+                      "children": Array [
+                        Object {
+                          "_key": "1",
+                          "_type": "span",
+                          "marks": Array [],
+                          "text": "",
+                        },
+                      ],
+                      "markDefs": Array [],
+                      "style": "normal",
+                    },
+                  ]
+              `)
+      }
+    })
+  })
+  it('deletes selected', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.select(editorRef.current, {
+          focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 5},
+          anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+        })
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.delete(
+          editorRef.current,
+          PortableTextEditor.getSelection(editorRef.current),
+          {mode: 'selected'},
+        )
+        expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
+                  Array [
+                    Object {
+                      "_key": "b",
+                      "_type": "myTestBlockType",
+                      "children": Array [
+                        Object {
+                          "_key": "b1",
+                          "_type": "span",
+                          "marks": Array [],
+                          "text": " B",
+                        },
+                      ],
+                      "markDefs": Array [],
+                      "style": "normal",
+                    },
+                  ]
+              `)
+      }
+    })
+  })
+})

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

@@ -0,0 +1,142 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {isPortableTextTextBlock} from '@sanity/types'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {PortableTextEditorTester, schemaType} from '../../__tests__/PortableTextEditorTester'
+import {PortableTextEditor} from '../../PortableTextEditor'
+
+const initialValue = [
+  {
+    _key: 'a',
+    _type: 'myTestBlockType',
+    children: [
+      {
+        _key: 'a1',
+        _type: 'span',
+        marks: [],
+        text: 'Block A',
+      },
+    ],
+    markDefs: [],
+    style: 'normal',
+  },
+  {
+    _key: 'b',
+    _type: 'myTestBlockType',
+    children: [
+      {
+        _key: 'b1',
+        _type: 'span',
+        marks: [],
+        text: 'Block B ',
+      },
+      {
+        _key: 'b2',
+        _type: 'someObject',
+      },
+      {
+        _key: 'b3',
+        _type: 'span',
+        marks: [],
+        text: ' contains a inline object',
+      },
+    ],
+    markDefs: [],
+    style: 'normal',
+  },
+]
+
+describe('plugin:withEditableAPI: .getFragment()', () => {
+  it('can get a Portable Text fragment of the current selection in a single block', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const initialSelection = {
+      focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 6},
+      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 7},
+    }
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.select(editorRef.current, initialSelection)
+        const fragment = PortableTextEditor.getFragment(editorRef.current)
+        expect(
+          fragment && isPortableTextTextBlock(fragment[0]) && fragment[0]?.children[0]?.text,
+        ).toBe('A')
+      }
+    })
+  })
+  it('can get a Portable Text fragment of the current selection in multiple blocks', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const initialSelection = {
+      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 6},
+      focus: {path: [{_key: 'b'}, 'children', {_key: 'b3'}], offset: 9},
+    }
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.select(editorRef.current, initialSelection)
+        const fragment = PortableTextEditor.getFragment(editorRef.current)
+        expect(fragment).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "_key": "a",
+              "_type": "myTestBlockType",
+              "children": Array [
+                Object {
+                  "_key": "a1",
+                  "_type": "span",
+                  "marks": Array [],
+                  "text": "A",
+                },
+              ],
+              "markDefs": Array [],
+              "style": "normal",
+            },
+            Object {
+              "_key": "b",
+              "_type": "myTestBlockType",
+              "children": Array [
+                Object {
+                  "_key": "b1",
+                  "_type": "span",
+                  "marks": Array [],
+                  "text": "Block B ",
+                },
+                Object {
+                  "_key": "b2",
+                  "_type": "someObject",
+                },
+                Object {
+                  "_key": "b3",
+                  "_type": "span",
+                  "marks": Array [],
+                  "text": " contains",
+                },
+              ],
+              "markDefs": Array [],
+              "style": "normal",
+            },
+          ]
+        `)
+      }
+    })
+  })
+})