@portabletext/editor 1.0.18 → 1.1.0

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

@@ -1,212 +0,0 @@
-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 && editor) {
-        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

@@ -1,220 +0,0 @@
-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}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    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]}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: [emptyBlock]})
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    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

@@ -1,133 +0,0 @@
-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: [],
-                },
-              ],
-            },
-          ])
-        }
-      })
-    })
-  })
-})