@portabletext/editor 0.0.0

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

@@ -0,0 +1,212 @@
+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 {getEditableElement, triggerKeyboardEvent} from '../../__tests__/utils'
+import {PortableTextEditor} from '../../PortableTextEditor'
+
+const newBlock = {
+  _type: 'myTestBlockType',
+  _key: '3',
+  style: 'normal',
+  markDefs: [],
+  children: [
+    {
+      _type: 'span',
+      _key: '2',
+      text: '',
+      marks: [],
+    },
+  ],
+}
+describe('plugin:withHotkeys: .ArrowDown', () => {
+  it('a new block is added if the user is focused on the only block which is void, and presses arrow down.', async () => {
+    const initialValue = [
+      {
+        _key: 'a',
+        _type: 'someObject',
+      },
+    ]
+
+    const initialSelection = {
+      focus: {path: [{_key: 'a'}], offset: 0},
+      anchor: {path: [{_key: 'a'}], offset: 0},
+    }
+
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    const component = render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const element = await getEditableElement(component)
+
+    const editor = editorRef.current
+    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    await waitFor(async () => {
+      if (editor && inlineType && element) {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, initialSelection)
+        PortableTextEditor.insertBreak(editor)
+        await triggerKeyboardEvent('ArrowDown', element)
+
+        const value = PortableTextEditor.getValue(editor)
+        expect(value).toEqual([initialValue[0], newBlock])
+      }
+    })
+  })
+  it('a new block is added if the user is focused on the last block which is void, and presses arrow down.', async () => {
+    const initialValue = [
+      {
+        _type: 'myTestBlockType',
+        _key: 'a',
+        style: 'normal',
+        markDefs: [],
+        children: [
+          {
+            _type: 'span',
+            _key: 'a1',
+            text: 'This is the first block',
+            marks: [],
+          },
+        ],
+      },
+      {
+        _key: 'b',
+        _type: 'someObject',
+      },
+    ]
+    const initialSelection = {
+      focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
+      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
+    }
+
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    const component = render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const element = await getEditableElement(component)
+
+    const editor = editorRef.current
+    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    await waitFor(async () => {
+      if (editor && inlineType && element) {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, initialSelection)
+        await triggerKeyboardEvent('ArrowDown', element)
+        const value = PortableTextEditor.getValue(editor)
+        // Arrow down on the text block should not add a new block
+        expect(value).toEqual(initialValue)
+        // Focus on the object block
+        PortableTextEditor.select(editor, {
+          focus: {path: [{_key: 'b'}], offset: 0},
+          anchor: {path: [{_key: 'b'}], offset: 0},
+        })
+        await triggerKeyboardEvent('ArrowDown', element)
+        const value2 = PortableTextEditor.getValue(editor)
+        expect(value2).toEqual([
+          initialValue[0],
+          initialValue[1],
+          {
+            _type: 'myTestBlockType',
+            _key: '3',
+            style: 'normal',
+            markDefs: [],
+            children: [
+              {
+                _type: 'span',
+                _key: '2',
+                text: '',
+                marks: [],
+              },
+            ],
+          },
+        ])
+      }
+    })
+  })
+})
+describe('plugin:withHotkeys: .ArrowUp', () => {
+  it('a new block is added at the top, when pressing arrow up, because first block is void, the new block can be deleted with backspace.', async () => {
+    const initialValue = [
+      {
+        _key: 'b',
+        _type: 'someObject',
+      },
+      {
+        _type: 'myTestBlockType',
+        _key: 'a',
+        style: 'normal',
+        markDefs: [],
+        children: [
+          {
+            _type: 'span',
+            _key: 'a1',
+            text: 'This is the first block',
+            marks: [],
+          },
+        ],
+      },
+    ]
+
+    const initialSelection = {
+      focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
+      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 2},
+    }
+
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    const component = render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const element = await getEditableElement(component)
+
+    const editor = editorRef.current
+    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    await waitFor(async () => {
+      if (editor && inlineType && element) {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, initialSelection)
+        await triggerKeyboardEvent('ArrowUp', element)
+        // Arrow down on the text block should not add a new block
+        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
+        // Focus on the object block
+        PortableTextEditor.select(editor, {
+          focus: {path: [{_key: 'b'}], offset: 0},
+          anchor: {path: [{_key: 'b'}], offset: 0},
+        })
+        await triggerKeyboardEvent('ArrowUp', element)
+        expect(PortableTextEditor.getValue(editor)).toEqual([
+          newBlock,
+          initialValue[0],
+          initialValue[1],
+        ])
+        // Pressing arrow up again won't add a new block
+        await triggerKeyboardEvent('ArrowUp', element)
+        expect(PortableTextEditor.getValue(editor)).toEqual([
+          newBlock,
+          initialValue[0],
+          initialValue[1],
+        ])
+        await triggerKeyboardEvent('Backspace', element)
+        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
+      }
+    })
+  })
+})

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

@@ -0,0 +1,204 @@
+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',
+  },
+]
+
+describe('plugin:withInsertBreak: "enter"', () => {
+  it('keeps text block key if enter is pressed at the start of the block, creating a new one in "before" position', async () => {
+    const initialSelection = {
+      focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 0},
+      anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 0},
+    }
+
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const editor = editorRef.current
+    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    await waitFor(async () => {
+      if (editor && inlineType) {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, initialSelection)
+        PortableTextEditor.insertBreak(editor)
+
+        const value = PortableTextEditor.getValue(editor)
+        expect(value).toEqual([
+          initialValue[0],
+          {
+            _type: 'myTestBlockType',
+            _key: '3',
+            style: 'normal',
+            markDefs: [],
+            children: [
+              {
+                _type: 'span',
+                _key: '2',
+                text: '',
+                marks: [],
+              },
+            ],
+          },
+          initialValue[1],
+        ])
+      }
+    })
+  })
+  it('inserts the new block after if key enter is pressed at the start of the block, creating a new one in "after" position if the block is empty', async () => {
+    const initialSelection = {
+      focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+      anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+    }
+    const emptyBlock = {
+      _key: 'a',
+      _type: 'myTestBlockType',
+      children: [
+        {
+          _key: 'a1',
+          _type: 'span',
+          marks: [],
+          text: '',
+        },
+      ],
+      markDefs: [],
+      style: 'normal',
+    }
+
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={[emptyBlock]}
+      />,
+    )
+    const editor = editorRef.current
+    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    await waitFor(async () => {
+      if (editor && inlineType) {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, initialSelection)
+        PortableTextEditor.insertBreak(editor)
+
+        const value = PortableTextEditor.getValue(editor)
+        expect(value).toEqual([
+          emptyBlock,
+          {
+            _key: '2',
+            _type: 'myTestBlockType',
+            markDefs: [],
+            style: 'normal',
+            children: [
+              {
+                _key: '1',
+                _type: 'span',
+                marks: [],
+                text: '',
+              },
+            ],
+          },
+        ])
+      }
+    })
+  })
+  it('splits the text block key if enter is pressed at the middle of the block', async () => {
+    const initialSelection = {
+      focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 2},
+      anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 2},
+    }
+
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={initialValue}
+      />,
+    )
+    const editor = editorRef.current
+    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    await waitFor(async () => {
+      if (editor && inlineType) {
+        PortableTextEditor.focus(editor)
+        PortableTextEditor.select(editor, initialSelection)
+        PortableTextEditor.insertBreak(editor)
+
+        const value = PortableTextEditor.getValue(editor)
+        expect(value).toEqual([
+          initialValue[0],
+          {
+            _key: 'b',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'b1',
+                _type: 'span',
+                marks: [],
+                text: 'Bl',
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+          {
+            _key: '2',
+            _type: 'myTestBlockType',
+            markDefs: [],
+            style: 'normal',
+            children: [
+              {
+                _key: '1',
+                _type: 'span',
+                marks: [],
+                text: 'ock B',
+              },
+            ],
+          },
+        ])
+      }
+    })
+  })
+})

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

@@ -0,0 +1,133 @@
+import {describe, expect, it, jest} from '@jest/globals'
+/* eslint-disable max-nested-callbacks */
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {PortableTextEditorTester, schemaType} from '../../__tests__/PortableTextEditorTester'
+import {PortableTextEditor} from '../../PortableTextEditor'
+
+describe('plugin:withPlaceholderBlock', () => {
+  describe('removing nodes', () => {
+    it("should insert an empty text block if it's removing the only block", async () => {
+      const editorRef: RefObject<PortableTextEditor> = createRef()
+      const initialValue = [
+        {
+          _key: '5fc57af23597',
+          _type: 'someObject',
+        },
+      ]
+      const onChange = jest.fn()
+      await waitFor(() => {
+        render(
+          <PortableTextEditorTester
+            onChange={onChange}
+            ref={editorRef}
+            schemaType={schemaType}
+            value={initialValue}
+          />,
+        )
+      })
+
+      await waitFor(() => {
+        if (editorRef.current) {
+          PortableTextEditor.focus(editorRef.current)
+
+          PortableTextEditor.delete(
+            editorRef.current,
+            {
+              focus: {path: [{_key: '5fc57af23597'}], offset: 0},
+              anchor: {path: [{_key: '5fc57af23597'}], offset: 0},
+            },
+            {mode: 'blocks'},
+          )
+
+          const value = PortableTextEditor.getValue(editorRef.current)
+
+          expect(value).toEqual([
+            {
+              _type: 'myTestBlockType',
+              _key: '3',
+              style: 'normal',
+              markDefs: [],
+              children: [
+                {
+                  _type: 'span',
+                  _key: '2',
+                  text: '',
+                  marks: [],
+                },
+              ],
+            },
+          ])
+        }
+      })
+    })
+    it('should not insert a new block if we have more blocks available', async () => {
+      const editorRef: RefObject<PortableTextEditor> = createRef()
+      const initialValue = [
+        {
+          _key: '5fc57af23597',
+          _type: 'someObject',
+        },
+        {
+          _type: 'myTestBlockType',
+          _key: 'existingBlock',
+          style: 'normal',
+          markDefs: [],
+          children: [
+            {
+              _type: 'span',
+              _key: '2',
+              text: '',
+              marks: [],
+            },
+          ],
+        },
+      ]
+      const onChange = jest.fn()
+      await waitFor(() => {
+        render(
+          <PortableTextEditorTester
+            onChange={onChange}
+            ref={editorRef}
+            schemaType={schemaType}
+            value={initialValue}
+          />,
+        )
+      })
+
+      await waitFor(() => {
+        if (editorRef.current) {
+          PortableTextEditor.focus(editorRef.current)
+
+          PortableTextEditor.delete(
+            editorRef.current,
+            {
+              focus: {path: [{_key: '5fc57af23597'}], offset: 0},
+              anchor: {path: [{_key: '5fc57af23597'}], offset: 0},
+            },
+            {mode: 'blocks'},
+          )
+
+          const value = PortableTextEditor.getValue(editorRef.current)
+          expect(value).toEqual([
+            {
+              _type: 'myTestBlockType',
+              _key: 'existingBlock',
+              style: 'normal',
+              markDefs: [],
+              children: [
+                {
+                  _type: 'span',
+                  _key: '2',
+                  text: '',
+                  marks: [],
+                },
+              ],
+            },
+          ])
+        }
+      })
+    })
+  })
+})

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

@@ -0,0 +1,65 @@
+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'
+
+describe('plugin:withPortableTextLists', () => {
+  it('should return active list styles that cover the whole selection', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: 'a',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _key: 'a1',
+            _type: 'span',
+            marks: [],
+            text: '12',
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+      {
+        _key: 'b',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _key: '2',
+            _type: 'span',
+            marks: [],
+            text: '34',
+            level: 1,
+            listItem: 'bullet',
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ]
+    const onChange = jest.fn()
+    await waitFor(() => {
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={initialValue}
+        />,
+      )
+    })
+    const editor = editorRef.current!
+    expect(editor).toBeDefined()
+    await waitFor(() => {
+      PortableTextEditor.focus(editor)
+      PortableTextEditor.select(editor, {
+        focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
+        anchor: {path: [{_key: '2'}, 'children', {_key: '2'}], offset: 2},
+      })
+      expect(PortableTextEditor.hasListStyle(editor, 'bullet')).toBe(false)
+    })
+  })
+})