-
Notifications
You must be signed in to change notification settings - Fork 418
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(portable-text-editor): automatically resolve some validation…
… errors (#6705) * fix(portable-text-editor): normalize missing .markDefs on text block schema type * refactor(portable-text-editor): refactor addAnnotation fn This was too damn messy and contained a bug where sometimes an annotation would not be added. Fixed the bug. * refactor(portable-text-editor): don't automatically add missing markDefs to editor value We will normalize this automatically and update the value when needed. For this to work, the value must reflect the original value * feat(portable-text-editor): normalize away marks that doesn't exist in the the schema Note: you need to actively edit the node before it's normalized * test(portable-text-editor): update tests to test for new normalization of marks and markdefs * chore(portable-text-editor): use tsx over ts-node * refactor(portable-text-editor): automatically resolve some validation error Resolve errors for missing .markDefs, orphapned marks, empty children, missing child keys * fix(portable-text-editor): allow for missing span marks in value Don't insert a empty array for missing span node .marks. It will be inserted through normalization inside withPortableTextMarkModel instead. * doc(portable-text-editor): update comments * fix(portable-text-editor): validate missing and empty children * test(portable-text-editor): update test to test for missing children * fix(types): fix invalid assertion in isPortableTextTextBlock As .markDefs is optional, return true when missing * fix(portable-text-editor): don't validate or normalize missing .markDefs It should be allowed and is a optional property according to the schema
- Loading branch information
1 parent
922235f
commit 6062a9a
Showing
15 changed files
with
454 additions
and
256 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
182 changes: 182 additions & 0 deletions
182
packages/@sanity/portable-text-editor/src/editor/__tests__/pteWarningsSelfSolving.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| import {describe, expect, it, jest} from '@jest/globals' | ||
| import {render, waitFor} from '@testing-library/react' | ||
| import {createRef, type RefObject} from 'react' | ||
|
|
||
| import {PortableTextEditor} from '../PortableTextEditor' | ||
| import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester' | ||
|
|
||
| describe('when PTE would display warnings, instead it self solves', () => { | ||
| it('when child at index is missing required _key in block with _key', async () => { | ||
| const editorRef: RefObject<PortableTextEditor> = createRef() | ||
| const initialValue = [ | ||
| { | ||
| _key: 'abc', | ||
| _type: 'myTestBlockType', | ||
| children: [ | ||
| { | ||
| _type: 'span', | ||
| marks: [], | ||
| text: 'Hello with a new key', | ||
| }, | ||
| ], | ||
| markDefs: [], | ||
| style: 'normal', | ||
| }, | ||
| ] | ||
|
|
||
| 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) { | ||
| expect(PortableTextEditor.getValue(editorRef.current)).toEqual([ | ||
| { | ||
| _key: 'abc', | ||
| _type: 'myTestBlockType', | ||
| children: [ | ||
| { | ||
| _key: '4', | ||
| _type: 'span', | ||
| text: 'Hello with a new key', | ||
| marks: [], | ||
| }, | ||
| ], | ||
| markDefs: [], | ||
| style: 'normal', | ||
| }, | ||
| ]) | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| it('allows missing .markDefs', async () => { | ||
| const editorRef: RefObject<PortableTextEditor> = createRef() | ||
| const initialValue = [ | ||
| { | ||
| _key: 'abc', | ||
| _type: 'myTestBlockType', | ||
| children: [ | ||
| { | ||
| _key: 'def', | ||
| _type: 'span', | ||
| marks: [], | ||
| text: 'No markDefs', | ||
| }, | ||
| ], | ||
| style: 'normal', | ||
| }, | ||
| ] | ||
|
|
||
| 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.focus(editorRef.current) | ||
| expect(PortableTextEditor.getValue(editorRef.current)).toEqual([ | ||
| { | ||
| _key: 'abc', | ||
| _type: 'myTestBlockType', | ||
| children: [ | ||
| { | ||
| _key: 'def', | ||
| _type: 'span', | ||
| text: 'No markDefs', | ||
| marks: [], | ||
| }, | ||
| ], | ||
| style: 'normal', | ||
| }, | ||
| ]) | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| it('adds missing .children', async () => { | ||
| const editorRef: RefObject<PortableTextEditor> = createRef() | ||
| const initialValue = [ | ||
| { | ||
| _key: 'abc', | ||
| _type: 'myTestBlockType', | ||
| style: 'normal', | ||
| markDefs: [], | ||
| }, | ||
| { | ||
| _key: 'def', | ||
| _type: 'myTestBlockType', | ||
| style: 'normal', | ||
| children: [], | ||
| markDefs: [], | ||
| }, | ||
| ] | ||
|
|
||
| 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.focus(editorRef.current) | ||
| expect(PortableTextEditor.getValue(editorRef.current)).toEqual([ | ||
| { | ||
| _key: 'abc', | ||
| _type: 'myTestBlockType', | ||
| children: [ | ||
| { | ||
| _key: '5', | ||
| _type: 'span', | ||
| text: '', | ||
| marks: [], | ||
| }, | ||
| ], | ||
| markDefs: [], | ||
| style: 'normal', | ||
| }, | ||
| { | ||
| _key: 'def', | ||
| _type: 'myTestBlockType', | ||
| children: [ | ||
| { | ||
| _key: '6', | ||
| _type: 'span', | ||
| text: '', | ||
| marks: [], | ||
| }, | ||
| ], | ||
| markDefs: [], | ||
| style: 'normal', | ||
| }, | ||
| ]) | ||
| } | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.