@portabletext/editor 0.0.0

package/src/utils/__tests__/patchToOperations.test.ts

@@ -0,0 +1,293 @@
+import {beforeEach, describe, expect, it} from '@jest/globals'
+import {noop} from 'lodash'
+import {createEditor, type Descendant} from 'slate'
+
+import {keyGenerator, type Patch, PortableTextEditor} from '../..'
+import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
+import {withPlugins} from '../../editor/plugins'
+import {createApplyPatch} from '../applyPatch'
+import {getPortableTextMemberSchemaTypes} from '../getPortableTextMemberSchemaTypes'
+import {VOID_CHILD_KEY} from '../values'
+
+const schemaTypes = getPortableTextMemberSchemaTypes(schemaType)
+
+const patchToOperations = createApplyPatch(schemaTypes)
+const portableTextEditor = new PortableTextEditor({schemaType, onChange: noop})
+
+const {editor} = withPlugins(createEditor(), {
+  portableTextEditor,
+  keyGenerator,
+  readOnly: false,
+})
+
+const createDefaultValue = (): Descendant[] => [
+  {
+    _type: 'image',
+    _key: 'c01739b0d03b',
+    children: [
+      {
+        _key: VOID_CHILD_KEY,
+        _type: 'span',
+        text: '',
+        marks: [],
+      },
+    ],
+    __inline: false,
+    value: {
+      asset: {
+        _ref: 'image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png',
+        _type: 'reference',
+      },
+    },
+  },
+]
+
+describe('operationToPatches', () => {
+  beforeEach(() => {
+    editor.onChange()
+  })
+
+  it('makes the correct operations for block objects', () => {
+    editor.children = createDefaultValue()
+    const patches = [
+      {type: 'unset', path: [{_key: 'c01739b0d03b'}, 'hotspot'], origin: 'remote'},
+      {type: 'unset', path: [{_key: 'c01739b0d03b'}, 'crop'], origin: 'remote'},
+      {
+        type: 'set',
+        path: [{_key: 'c01739b0d03b'}, 'asset'],
+        value: {
+          _ref: 'image-b5681d9d0b2b6c922238e7c694500dd7c1349b19-256x256-jpg',
+          _type: 'reference',
+        },
+        origin: 'remote',
+      },
+    ] as Patch[]
+    patches.forEach((p) => {
+      patchToOperations(editor, p)
+    })
+    expect(editor.children).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "__inline": false,
+          "_key": "c01739b0d03b",
+          "_type": "image",
+          "children": Array [
+            Object {
+              "_key": "${VOID_CHILD_KEY}",
+              "_type": "span",
+              "marks": Array [],
+              "text": "",
+            },
+          ],
+          "value": Object {
+            "asset": Object {
+              "_ref": "image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png",
+              "_type": "reference",
+            },
+          },
+        },
+      ]
+    `)
+  })
+  it('will not create operations for insertion inside object blocks', () => {
+    editor.children = [
+      {
+        _type: 'someType',
+        _key: 'c01739b0d03b',
+        children: [
+          {
+            _key: VOID_CHILD_KEY,
+            _type: 'span',
+            text: '',
+            marks: [],
+          },
+        ],
+        __inline: false,
+        value: {
+          asset: {
+            _ref: 'image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png',
+            _type: 'reference',
+          },
+          nestedArray: [],
+        },
+      },
+    ]
+    const patches = [
+      {type: 'insert', path: [{_key: 'c01739b0d03b'}, 'nestedArray'], origin: 'remote'},
+    ] as Patch[]
+    patches.forEach((p) => {
+      patchToOperations(editor, p)
+    })
+    expect(editor.children).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "__inline": false,
+          "_key": "c01739b0d03b",
+          "_type": "someType",
+          "children": Array [
+            Object {
+              "_key": "${VOID_CHILD_KEY}",
+              "_type": "span",
+              "marks": Array [],
+              "text": "",
+            },
+          ],
+          "value": Object {
+            "asset": Object {
+              "_ref": "image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png",
+              "_type": "reference",
+            },
+            "nestedArray": Array [],
+          },
+        },
+      ]
+    `)
+  })
+  it('will not create operations for removal inside object blocks', () => {
+    editor.children = [
+      {
+        _type: 'someType',
+        _key: 'c01739b0d03b',
+        children: [
+          {
+            _key: VOID_CHILD_KEY,
+            _type: 'span',
+            text: '',
+            marks: [],
+          },
+        ],
+        __inline: false,
+        value: {
+          asset: {
+            _ref: 'image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png',
+            _type: 'reference',
+          },
+          nestedArray: [
+            {
+              _key: 'foo',
+              _type: 'nestedValue',
+            },
+          ],
+        },
+      },
+    ]
+    const patches = [
+      {type: 'unset', path: [{_key: 'c01739b0d03b'}, 'nestedArray', 0], origin: 'remote'},
+    ] as Patch[]
+    patches.forEach((p) => {
+      patchToOperations(editor, p)
+    })
+    expect(editor.children).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "__inline": false,
+          "_key": "c01739b0d03b",
+          "_type": "someType",
+          "children": Array [
+            Object {
+              "_key": "${VOID_CHILD_KEY}",
+              "_type": "span",
+              "marks": Array [],
+              "text": "",
+            },
+          ],
+          "value": Object {
+            "asset": Object {
+              "_ref": "image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png",
+              "_type": "reference",
+            },
+            "nestedArray": Array [
+              Object {
+                "_key": "foo",
+                "_type": "nestedValue",
+              },
+            ],
+          },
+        },
+      ]
+    `)
+  })
+  it('will not create operations for setting data inside object blocks', () => {
+    editor.children = [
+      {
+        _key: '1335959d4d03',
+        _type: 'block',
+        children: [
+          {
+            _key: '9bd868adcd6b',
+            _type: 'span',
+            marks: [],
+            text: '1 ',
+          },
+          {
+            _key: '6f75d593f3fc',
+            _type: 'span',
+            marks: ['11de7fcea659'],
+            text: '2',
+          },
+          {
+            _key: '033618a7f081',
+            _type: 'span',
+            marks: [],
+            text: ' 3',
+          },
+        ],
+        markDefs: [
+          {
+            _key: '11de7fcea659',
+            _type: 'link',
+          },
+        ],
+        style: 'normal',
+      },
+    ]
+    const patches = [
+      {
+        type: 'set',
+        path: [{_key: '1335959d4d03'}, 'markDefs', {_key: '11de7fcea659'}],
+        origin: 'remote',
+        value: {href: 'http://www.test.com'},
+      },
+    ] as Patch[]
+    patches.forEach((p) => {
+      patchToOperations(editor, p)
+    })
+    expect(editor.children).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "_key": "1335959d4d03",
+          "_type": "block",
+          "children": Array [
+            Object {
+              "_key": "9bd868adcd6b",
+              "_type": "span",
+              "marks": Array [],
+              "text": "1 ",
+            },
+            Object {
+              "_key": "6f75d593f3fc",
+              "_type": "span",
+              "marks": Array [
+                "11de7fcea659",
+              ],
+              "text": "2",
+            },
+            Object {
+              "_key": "033618a7f081",
+              "_type": "span",
+              "marks": Array [],
+              "text": " 3",
+            },
+          ],
+          "markDefs": Array [
+            Object {
+              "_key": "11de7fcea659",
+              "_type": "link",
+            },
+          ],
+          "style": "normal",
+        },
+      ]
+    `)
+  })
+})

package/src/utils/__tests__/ranges.test.ts

@@ -0,0 +1,18 @@
+import {describe, expect, it} from '@jest/globals'
+import {type InsertTextOperation, type Range} from 'slate'
+
+import {moveRangeByOperation} from '../ranges'
+
+describe('moveRangeByOperation', () => {
+  it('should move range when inserting text in front of it', () => {
+    const range: Range = {anchor: {path: [0, 0], offset: 1}, focus: {path: [0, 0], offset: 3}}
+    const operation: InsertTextOperation = {
+      type: 'insert_text',
+      path: [0, 0],
+      offset: 0,
+      text: 'foo',
+    }
+    const newRange = moveRangeByOperation(range, operation)
+    expect(newRange).toEqual({anchor: {path: [0, 0], offset: 4}, focus: {path: [0, 0], offset: 6}})
+  })
+})

package/src/utils/__tests__/valueNormalization.test.tsx

@@ -0,0 +1,62 @@
+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 '../../editor/__tests__/PortableTextEditorTester'
+import {PortableTextEditor} from '../../editor/PortableTextEditor'
+
+describe('values: normalization', () => {
+  it("accepts incoming value with blocks without a style or markDefs prop, but doesn't leave them without them when editing them", async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: '5fc57af23597',
+        _type: 'myTestBlockType',
+        children: [
+          {
+            _key: 'be1c67c6971a',
+            _type: 'span',
+            marks: [],
+            text: 'Hello',
+          },
+        ],
+        markDefs: [],
+      },
+    ]
+    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, {
+          focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}], offset: 0},
+          anchor: {path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}], offset: 5},
+        })
+        PortableTextEditor.toggleMark(editorRef.current, 'strong')
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: '5fc57af23597',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'be1c67c6971a',
+                _type: 'span',
+                marks: ['strong'],
+                text: 'Hello',
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
+      }
+    })
+  })
+})

package/src/utils/__tests__/values.test.ts

@@ -0,0 +1,253 @@
+import {describe, expect, it} from '@jest/globals'
+
+import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
+import {getPortableTextMemberSchemaTypes} from '../getPortableTextMemberSchemaTypes'
+import {fromSlateValue, toSlateValue} from '../values'
+
+const schemaTypes = getPortableTextMemberSchemaTypes(schemaType)
+
+describe('toSlateValue', () => {
+  it('checks undefined', () => {
+    const result = toSlateValue(undefined, {schemaTypes})
+    expect(result).toHaveLength(0)
+  })
+
+  it('runs given empty array', () => {
+    const result = toSlateValue([], {schemaTypes})
+    expect(result).toHaveLength(0)
+  })
+
+  it('given type is custom with no custom properties, should include an empty text property in children and an empty value', () => {
+    const result = toSlateValue(
+      [
+        {
+          _type: 'image',
+          _key: '123',
+        },
+      ],
+      {schemaTypes},
+    )
+
+    expect(result).toMatchObject([
+      {
+        _key: '123',
+        _type: 'image',
+        children: [
+          {
+            text: '',
+          },
+        ],
+        value: {},
+      },
+    ])
+  })
+
+  it('given type is block', () => {
+    const result = toSlateValue(
+      [
+        {
+          _type: schemaTypes.block.name,
+          _key: '123',
+          children: [
+            {
+              _type: 'span',
+              _key: '1231',
+              text: '123',
+            },
+          ],
+        },
+      ],
+      {schemaTypes},
+    )
+    expect(result).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "_key": "123",
+    "_type": "myTestBlockType",
+    "children": Array [
+      Object {
+        "_key": "1231",
+        "_type": "span",
+        "text": "123",
+      },
+    ],
+    "style": "normal",
+  },
+]
+`)
+  })
+
+  it('given type is block and has custom object in children', () => {
+    const result = toSlateValue(
+      [
+        {
+          _type: schemaTypes.block.name,
+          _key: '123',
+          children: [
+            {
+              _type: 'span',
+              _key: '1231',
+              text: '123',
+            },
+            {
+              _type: 'image',
+              _key: '1232',
+              asset: {
+                _ref: 'ref-123',
+              },
+            },
+          ],
+        },
+      ],
+      {schemaTypes},
+    )
+    expect(result).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "_key": "123",
+    "_type": "myTestBlockType",
+    "children": Array [
+      Object {
+        "_key": "1231",
+        "_type": "span",
+        "text": "123",
+      },
+      Object {
+        "__inline": true,
+        "_key": "1232",
+        "_type": "image",
+        "children": Array [
+          Object {
+            "_key": "void-child",
+            "_type": "span",
+            "marks": Array [],
+            "text": "",
+          },
+        ],
+        "value": Object {
+          "asset": Object {
+            "_ref": "ref-123",
+          },
+        },
+      },
+    ],
+    "style": "normal",
+  },
+]
+`)
+  })
+})
+
+describe('fromSlateValue', () => {
+  it('runs given empty array', () => {
+    const result = fromSlateValue([], 'image')
+    expect(result).toHaveLength(0)
+  })
+
+  it('converts a slate value to portable text', () => {
+    const ptValue = fromSlateValue(
+      [
+        {
+          _type: 'block',
+          _key: 'dr239u3',
+          children: [
+            {
+              _type: 'span',
+              _key: '252f4swet',
+              marks: [],
+              text: 'Hey ',
+            },
+            {
+              _type: 'image',
+              _key: 'e324t4s',
+              __inline: true,
+              children: [{_key: '1', _type: 'span', text: '', marks: []}],
+              value: {
+                _type: 'image',
+                _key: 'e324t4s',
+                asset: {_ref: '32423r32rewr3rwerwer'},
+              },
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        },
+        {
+          _type: 'image',
+          _key: 'wer32434',
+          children: [{_key: '1', _type: 'span', text: '', marks: []}],
+          value: {
+            _type: 'image',
+            _key: 'wer32434',
+            asset: {_ref: 'werwer452423423'},
+          },
+        },
+      ],
+      'block',
+    )
+    expect(ptValue).toEqual([
+      {
+        _type: 'block',
+        _key: 'dr239u3',
+        children: [
+          {
+            _type: 'span',
+            _key: '252f4swet',
+            marks: [],
+            text: 'Hey ',
+          },
+          {
+            _type: 'image',
+            _key: 'e324t4s',
+            asset: {_ref: '32423r32rewr3rwerwer'},
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+      {
+        _type: 'image',
+        _key: 'wer32434',
+        asset: {_ref: 'werwer452423423'},
+      },
+    ])
+  })
+
+  it('has object equality', () => {
+    const keyMap = {}
+    const value = [
+      {
+        _type: 'image',
+        _key: 'wer32434',
+        asset: {_ref: 'werwer452423423'},
+      },
+      {
+        _type: 'block',
+        _key: 'dr239u3',
+        children: [
+          {
+            _type: 'span',
+            _key: '252f4swet',
+            marks: [],
+            text: 'Hey ',
+          },
+          {
+            _type: 'image',
+            _key: 'e324t4s',
+            asset: {_ref: '32423r32rewr3rwerwer'},
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ]
+    const toSlate1 = toSlateValue(value, {schemaTypes}, keyMap)
+    const toSlate2 = toSlateValue(value, {schemaTypes}, keyMap)
+    expect(toSlate1[0]).toBe(toSlate2[0])
+    expect(toSlate1[1]).toBe(toSlate2[1])
+    const fromSlate1 = fromSlateValue(toSlate1, 'block', keyMap)
+    const fromSlate2 = fromSlateValue(toSlate2, 'block', keyMap)
+    expect(fromSlate1[0]).toBe(fromSlate2[0])
+    expect(fromSlate1[1]).toBe(fromSlate2[1])
+  })
+})