@portabletext/editor 2.7.1 → 2.8.0

package/src/editor/__tests__/insert-block.test.tsx

@@ -1,224 +0,0 @@
-import type {PortableTextBlock} from '@sanity/types'
-import {render, waitFor} from '@testing-library/react'
-import {createRef, type RefObject} from 'react'
-import {describe, expect, test, vi} from 'vitest'
-import type {EditorChange, EditorSelection} from '../../types/editor'
-import {PortableTextEditor} from '../PortableTextEditor'
-import {PortableTextEditorTester} from './PortableTextEditorTester'
-
-describe(PortableTextEditor.insertBlock.name, () => {
-  test('Scenario: Inserting a custom block without a selection #1', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const emptyTextBlock: PortableTextBlock = {
-      _key: 'ba',
-      _type: 'block',
-      children: [
-        {
-          _type: 'span',
-          _key: 'sa',
-          text: '',
-          marks: [],
-        },
-      ],
-      style: 'normal',
-    }
-    const initialValue: Array<PortableTextBlock> = [emptyTextBlock]
-    const onChange: (change: EditorChange) => void = vi.fn()
-
-    render(
-      <PortableTextEditorTester
-        ref={editorRef}
-        value={initialValue}
-        keyGenerator={() => 'bb'}
-        onChange={onChange}
-      />,
-    )
-
-    // Given an empty text block
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    // And no selection
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getSelection(editorRef.current)).toBeNull()
-      }
-    })
-
-    // When a new image is inserted
-    await waitFor(() => {
-      if (editorRef.current) {
-        const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
-          (object) => object.name === 'custom image',
-        )!
-        PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
-      }
-    })
-
-    // Then the empty text block is replaced with the new image
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: 'bb', _type: 'custom image'},
-        ])
-      }
-    })
-  })
-
-  test('Scenario: Inserting a custom block without a selection #2', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const nonEmptyTextBlock: PortableTextBlock = {
-      _key: 'ba',
-      _type: 'block',
-      children: [
-        {
-          _type: 'span',
-          _key: 'xs',
-          text: 'foo',
-          marks: [],
-        },
-      ],
-      markDefs: [],
-      style: 'normal',
-    }
-    const initialValue: Array<PortableTextBlock> = [nonEmptyTextBlock]
-    const onChange: (change: EditorChange) => void = vi.fn()
-
-    render(
-      <PortableTextEditorTester
-        ref={editorRef}
-        value={initialValue}
-        keyGenerator={() => 'bb'}
-        onChange={onChange}
-      />,
-    )
-
-    // Given an non-empty text block
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    // And no selection
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getSelection(editorRef.current)).toBeNull()
-      }
-    })
-
-    // When a new image is inserted
-    await waitFor(() => {
-      if (editorRef.current) {
-        const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
-          (object) => object.name === 'custom image',
-        )!
-        PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
-      }
-    })
-
-    // Then the empty text block is replaced with the new image
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          nonEmptyTextBlock,
-          {_key: 'bb', _type: 'custom image'},
-        ])
-      }
-    })
-  })
-
-  test('Scenario: Replacing an empty text block with a custom block', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const emptyTextBlock: PortableTextBlock = {
-      _key: 'ba',
-      _type: 'block',
-      children: [
-        {
-          _type: 'span',
-          _key: 'sa',
-          text: '',
-          marks: [],
-        },
-      ],
-      style: 'normal',
-    }
-    const imageBlock: PortableTextBlock = {
-      _key: 'bb',
-      _type: 'custom image',
-    }
-    const initialValue: Array<PortableTextBlock> = [emptyTextBlock, imageBlock]
-    const onChange: (change: EditorChange) => void = vi.fn()
-
-    render(
-      <PortableTextEditorTester
-        ref={editorRef}
-        value={initialValue}
-        keyGenerator={() => 'bc'}
-        onChange={onChange}
-      />,
-    )
-
-    // Given an empty text block followed by an image
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    // And a selection in the empty text block
-    const initialSelection: EditorSelection = {
-      anchor: {path: [{_key: 'ba'}, 'children', {_key: 'sa'}], offset: 0},
-      focus: {path: [{_key: 'ba'}, 'children', {_key: 'sa'}], offset: 0},
-      backward: false,
-    }
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.select(editorRef.current, initialSelection)
-      }
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'selection',
-          selection: initialSelection,
-        })
-      }
-    })
-
-    // When a new image is inserted
-    await waitFor(() => {
-      if (editorRef.current) {
-        const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
-          (object) => object.name === 'custom image',
-        )!
-        PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
-      }
-    })
-
-    // Then the empty text block is replaced with the new image
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: 'bc', _type: 'custom image'},
-          {_key: 'bb', _type: 'custom image'},
-        ])
-      }
-    })
-  })
-})

package/src/editor/__tests__/self-solving.test.tsx

@@ -1,183 +0,0 @@
-import type {JSONValue, Patch} from '@portabletext/patches'
-import {compileSchema, defineSchema} from '@portabletext/schema'
-import {createTestKeyGenerator} from '@portabletext/test'
-import type {PortableTextBlock, PortableTextSpan} from '@sanity/types'
-import {render, waitFor} from '@testing-library/react'
-import {createRef, type ComponentProps, type RefObject} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-import {getTextSelection} from '../../internal-utils/text-selection'
-import {PortableTextEditor} from '../PortableTextEditor'
-import {PortableTextEditorTester} from './PortableTextEditorTester'
-
-type OnChange = ComponentProps<typeof PortableTextEditor>['onChange']
-
-function block(
-  props?: Partial<Omit<PortableTextBlock, '_type'>>,
-): PortableTextBlock {
-  return {
-    _type: 'block',
-    ...(props ?? {}),
-  } as PortableTextBlock
-}
-
-function span(
-  props?: Partial<Omit<PortableTextSpan, '_type'>>,
-): PortableTextSpan {
-  return {
-    _type: 'span',
-    ...(props ?? {}),
-  } as PortableTextSpan
-}
-
-describe('Feature: Self-solving', () => {
-  it('Scenario: Missing .markDefs and .marks are added after the editor is made dirty', async () => {
-    const schemaDefinition = defineSchema({decorators: [{name: 'strong'}]})
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const onChange = vi.fn<OnChange>()
-    const initialValue = [
-      block({
-        _key: 'b1',
-        children: [
-          span({
-            _key: 's1',
-            text: 'foo',
-          }),
-        ],
-        style: 'normal',
-      }),
-    ]
-    const spanPatch: Patch = {
-      type: 'set',
-      path: [{_key: 'b1'}, 'children', {_key: 's1'}, 'marks'],
-      value: [],
-      origin: 'local',
-    }
-    const blockPatch: Patch = {
-      type: 'set',
-      path: [{_key: 'b1'}],
-      value: block({
-        _key: 'b1',
-        children: [
-          span({
-            _key: 's1',
-            text: 'foo',
-            marks: [],
-          }),
-        ],
-        style: 'normal',
-        markDefs: [],
-      }) as JSONValue,
-      origin: 'local',
-    }
-    const strongPatch: Patch = {
-      type: 'set',
-      path: [{_key: 'b1'}, 'children', {_key: 's1'}, 'marks'],
-      value: ['strong'],
-      origin: 'local',
-    }
-
-    render(
-      <PortableTextEditorTester
-        ref={editorRef}
-        schemaDefinition={schemaDefinition}
-        keyGenerator={createTestKeyGenerator()}
-        value={initialValue}
-        onChange={onChange}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenNthCalledWith(1, {
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenNthCalledWith(2, {
-          type: 'ready',
-        })
-      }
-    })
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.select(
-          editorRef.current,
-          getTextSelection(
-            {schema: compileSchema(schemaDefinition), value: initialValue},
-            'foo',
-          ),
-        )
-        PortableTextEditor.toggleMark(editorRef.current, 'strong')
-      }
-    })
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenNthCalledWith(3, {
-          type: 'selection',
-          selection: {
-            ...getTextSelection(
-              {schema: compileSchema(schemaDefinition), value: initialValue},
-              'foo',
-            ),
-            backward: false,
-          },
-        })
-        expect(onChange).toHaveBeenNthCalledWith(4, {
-          type: 'patch',
-          patch: spanPatch,
-        })
-        expect(onChange).toHaveBeenNthCalledWith(5, {
-          type: 'patch',
-          patch: blockPatch,
-        })
-        expect(onChange).toHaveBeenNthCalledWith(6, {
-          type: 'patch',
-          patch: strongPatch,
-        })
-        expect(onChange).toHaveBeenNthCalledWith(7, {
-          type: 'selection',
-          selection: {
-            ...getTextSelection(
-              {schema: compileSchema(schemaDefinition), value: initialValue},
-              'foo',
-            ),
-            backward: false,
-          },
-        })
-        expect(onChange).toHaveBeenNthCalledWith(8, {
-          type: 'mutation',
-          patches: [spanPatch, blockPatch, strongPatch],
-          snapshot: [
-            block({
-              _key: 'b1',
-              children: [
-                span({
-                  _key: 's1',
-                  text: 'foo',
-                  marks: ['strong'],
-                }),
-              ],
-              style: 'normal',
-              markDefs: [],
-            }),
-          ],
-          value: [
-            block({
-              _key: 'b1',
-              children: [
-                span({
-                  _key: 's1',
-                  text: 'foo',
-                  marks: ['strong'],
-                }),
-              ],
-              style: 'normal',
-              markDefs: [],
-            }),
-          ],
-        })
-      }
-    })
-  })
-})

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

@@ -1,298 +0,0 @@
-import {createTestKeyGenerator} from '@portabletext/test'
-import {render, waitFor} from '@testing-library/react'
-import {createRef, type RefObject} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-import {PortableTextEditorTester} from '../../__tests__/PortableTextEditorTester'
-import {PortableTextEditor} from '../../PortableTextEditor'
-
-const initialValue = [
-  {
-    _key: 'a',
-    _type: 'block',
-    children: [
-      {
-        _key: 'a1',
-        _type: 'span',
-        marks: [],
-        text: 'Block A',
-      },
-    ],
-    markDefs: [],
-    style: 'normal',
-  },
-  {
-    _key: 'b',
-    _type: 'block',
-    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 | null> = createRef()
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        value={initialValue}
-        keyGenerator={createTestKeyGenerator()}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    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(`
-          [
-            {
-              "_key": "a",
-              "_type": "block",
-              "children": [
-                {
-                  "_key": "a1",
-                  "_type": "span",
-                  "marks": [],
-                  "text": "Block A",
-                },
-              ],
-              "markDefs": [],
-              "style": "normal",
-            },
-          ]
-        `)
-      }
-    })
-  })
-
-  it('deletes all the blocks, but leaves a placeholder block', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        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)).toEqual([
-          {
-            _key: 'k2',
-            _type: 'block',
-            children: [
-              {
-                _key: 'k3',
-                _type: 'span',
-                marks: [],
-                text: '',
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-
-  it('deletes children', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const onChange = vi.fn()
-
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        value={initialValue}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    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},
-        })
-      }
-    })
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.delete(
-          editorRef.current,
-          PortableTextEditor.getSelection(editorRef.current),
-          {mode: 'children'},
-        )
-      }
-    })
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current))
-          .toMatchInlineSnapshot(`
-                  [
-                    {
-                      "_key": "a",
-                      "_type": "block",
-                      "children": [
-                        {
-                          "_key": "a1",
-                          "_type": "span",
-                          "marks": [],
-                          "text": "Block A",
-                        },
-                      ],
-                      "markDefs": [],
-                      "style": "normal",
-                    },
-                    {
-                      "_key": "b",
-                      "_type": "block",
-                      "children": [
-                        {
-                          "_key": "k2",
-                          "_type": "span",
-                          "marks": [],
-                          "text": "",
-                        },
-                      ],
-                      "markDefs": [],
-                      "style": "normal",
-                    },
-                  ]
-              `)
-      }
-    })
-  })
-
-  it('deletes selected', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const onChange = vi.fn()
-
-    render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        value={initialValue}
-        keyGenerator={createTestKeyGenerator()}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    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},
-        })
-      }
-    })
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.delete(
-          editorRef.current,
-          PortableTextEditor.getSelection(editorRef.current),
-          {mode: 'selected'},
-        )
-      }
-    })
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'b',
-            _type: 'block',
-            children: [
-              {
-                _key: 'b1',
-                _type: 'span',
-                marks: [],
-                text: ' B',
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-})