@portabletext/editor 0.0.0

package/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -0,0 +1,116 @@
+import {jest} from '@jest/globals'
+import {Schema} from '@sanity/schema'
+import {defineArrayMember, defineField} from '@sanity/types'
+import {type ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from 'react'
+
+import {
+  PortableTextEditable,
+  type PortableTextEditableProps,
+  PortableTextEditor,
+  type PortableTextEditorProps,
+} from '../../index'
+
+const imageType = defineField({
+  type: 'image',
+  name: 'blockImage',
+})
+
+const someObject = defineField({
+  type: 'object',
+  name: 'someObject',
+  fields: [{type: 'string', name: 'color'}],
+})
+
+const blockType = defineField({
+  type: 'block',
+  name: 'myTestBlockType',
+  styles: [
+    {title: 'Normal', value: 'normal'},
+    {title: 'H1', value: 'h1'},
+    {title: 'H2', value: 'h2'},
+    {title: 'H3', value: 'h3'},
+    {title: 'H4', value: 'h4'},
+    {title: 'H5', value: 'h5'},
+    {title: 'H6', value: 'h6'},
+    {title: 'Quote', value: 'blockquote'},
+  ],
+  of: [someObject, imageType],
+})
+
+const portableTextType = defineArrayMember({
+  type: 'array',
+  name: 'body',
+  of: [blockType, someObject],
+})
+
+const colorAndLink = defineArrayMember({
+  type: 'array',
+  name: 'colorAndLink',
+  of: [
+    {
+      ...blockType,
+      marks: {
+        annotations: [
+          {
+            name: 'link',
+            type: 'object',
+            fields: [{type: 'string', name: 'color'}],
+          },
+          {
+            name: 'color',
+            type: 'object',
+            fields: [{type: 'string', name: 'color'}],
+          },
+        ],
+      },
+    },
+  ],
+})
+
+const schema = Schema.compile({
+  name: 'test',
+  types: [portableTextType, colorAndLink],
+})
+
+let key = 0
+
+export const PortableTextEditorTester = forwardRef(function PortableTextEditorTester(
+  props: Partial<Omit<PortableTextEditorProps, 'type' | 'onChange' | 'value'>> & {
+    onChange?: PortableTextEditorProps['onChange']
+    rangeDecorations?: PortableTextEditableProps['rangeDecorations']
+    renderPlaceholder?: PortableTextEditableProps['renderPlaceholder']
+    schemaType: PortableTextEditorProps['schemaType']
+    selection?: PortableTextEditableProps['selection']
+    value?: PortableTextEditorProps['value']
+  },
+  ref: ForwardedRef<PortableTextEditor>,
+) {
+  useEffect(() => {
+    key = 0
+  }, [])
+  const _keyGenerator = useCallback(() => {
+    key++
+    return `${key}`
+  }, [])
+  const onChange = useMemo(() => props.onChange || jest.fn(), [props.onChange])
+  return (
+    <PortableTextEditor
+      schemaType={props.schemaType}
+      onChange={onChange}
+      value={props.value || undefined}
+      keyGenerator={_keyGenerator}
+      ref={ref}
+    >
+      <PortableTextEditable
+        selection={props.selection || undefined}
+        rangeDecorations={props.rangeDecorations}
+        renderPlaceholder={props.renderPlaceholder}
+        aria-describedby="desc_foo"
+      />
+    </PortableTextEditor>
+  )
+})
+
+export const schemaType = schema.get('body')
+
+export const schemaTypeWithColorAndLink = schema.get('colorAndLink')

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -0,0 +1,115 @@
+import {describe, expect, it, jest} from '@jest/globals'
+/* eslint-disable no-irregular-whitespace */
+import {type PortableTextBlock} from '@sanity/types'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type ReactNode, type RefObject} from 'react'
+
+import {type RangeDecoration} from '../..'
+import {type PortableTextEditor} from '../PortableTextEditor'
+import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
+
+const helloBlock: PortableTextBlock = {
+  _key: '123',
+  _type: 'myTestBlockType',
+  markDefs: [],
+  children: [{_key: '567', _type: 'span', text: 'Hello', marks: []}],
+}
+
+let rangeDecorationIteration = 0
+
+const RangeDecorationTestComponent = ({children}: {children?: ReactNode}) => {
+  rangeDecorationIteration++
+  return <span data-testid="range-decoration">{children}</span>
+}
+
+describe('RangeDecorations', () => {
+  it.only('only render range decorations as necessary', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = jest.fn()
+    const value = [helloBlock]
+    let rangeDecorations: RangeDecoration[] = [
+      {
+        component: RangeDecorationTestComponent,
+        selection: {
+          anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
+          focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+        },
+      },
+    ]
+    const {rerender} = render(
+      <PortableTextEditorTester
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
+    await waitFor(() => {
+      expect([rangeDecorationIteration, 'initial']).toEqual([0, 'initial'])
+    })
+    // Re-render with the same range decorations
+    rerender(
+      <PortableTextEditorTester
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
+    await waitFor(() => {
+      expect([rangeDecorationIteration, 'initial']).toEqual([0, 'initial'])
+    })
+    // Update the range decorations, a new object with identical values
+    rangeDecorations = [
+      {
+        component: RangeDecorationTestComponent,
+        selection: {
+          anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
+          focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+        },
+      },
+    ]
+    rerender(
+      <PortableTextEditorTester
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
+    await waitFor(() => {
+      expect([rangeDecorationIteration, 'updated-with-equal-values']).toEqual([
+        0,
+        'updated-with-equal-values',
+      ])
+    })
+    // Update the range decorations with a new offset
+    rangeDecorations = [
+      {
+        component: RangeDecorationTestComponent,
+        selection: {
+          anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+          focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 4},
+        },
+      },
+    ]
+    rerender(
+      <PortableTextEditorTester
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
+    await waitFor(() => {
+      expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
+        1,
+        'updated-with-different',
+      ])
+    })
+  })
+})

package/src/editor/__tests__/handleClick.test.tsx

@@ -0,0 +1,218 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {fireEvent, render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {PortableTextEditor} from '../PortableTextEditor'
+import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
+import {getEditableElement} from './utils'
+
+describe('adds empty text block if its needed', () => {
+  const newBlock = {
+    _type: 'myTestBlockType',
+    _key: '3',
+    style: 'normal',
+    markDefs: [],
+    children: [
+      {
+        _type: 'span',
+        _key: '2',
+        text: '',
+        marks: [],
+      },
+    ],
+  }
+  it('adds a new block at the bottom, when clicking on the portable text editor, because the only block is void and user is focused on that one', async () => {
+    const initialValue = [
+      {
+        _key: 'b',
+        _type: 'someObject',
+      },
+    ]
+
+    const initialSelection = {
+      focus: {path: [{_key: 'b'}], offset: 0},
+      anchor: {path: [{_key: 'b'}], 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)
+        fireEvent.click(element)
+        expect(PortableTextEditor.getValue(editor)).toEqual([initialValue[0], newBlock])
+      }
+    })
+  })
+  it('should not add blocks if the last element is a text block', async () => {
+    const initialValue = [
+      {
+        _key: 'b',
+        _type: 'someObject',
+      },
+      {
+        _type: 'myTestBlockType',
+        _key: '3',
+        style: 'normal',
+        markDefs: [],
+        children: [
+          {
+            _type: 'span',
+            _key: '2',
+            text: '',
+            marks: [],
+          },
+        ],
+      },
+    ]
+
+    const initialSelection = {
+      focus: {path: [{_key: 'b'}], offset: 0},
+      anchor: {path: [{_key: 'b'}], 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)
+        fireEvent.click(element)
+        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
+      }
+    })
+  })
+  it('should not add blocks if the last element is void, but its not focused on that one', async () => {
+    const initialValue = [
+      {
+        _key: 'a',
+        _type: 'someObject',
+      },
+      {
+        _type: 'myTestBlockType',
+        _key: 'b',
+        style: 'normal',
+        markDefs: [],
+        children: [
+          {
+            _type: 'span',
+            _key: 'b1',
+            text: '',
+            marks: [],
+          },
+        ],
+      },
+      {
+        _key: 'c',
+        _type: 'someObject',
+      },
+    ]
+
+    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()
+    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)
+        fireEvent.click(element)
+        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
+      }
+    })
+  })
+  it('should not add blocks if the last element is void, and its focused on that one when clicking', async () => {
+    const initialValue = [
+      {
+        _key: 'a',
+        _type: 'someObject',
+      },
+      {
+        _type: 'myTestBlockType',
+        _key: 'b',
+        style: 'normal',
+        markDefs: [],
+        children: [
+          {
+            _type: 'span',
+            _key: 'b1',
+            text: '',
+            marks: [],
+          },
+        ],
+      },
+      {
+        _key: 'c',
+        _type: 'someObject',
+      },
+    ]
+
+    const initialSelection = {
+      focus: {path: [{_key: 'c'}], offset: 0},
+      anchor: {path: [{_key: 'c'}], 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)
+        fireEvent.click(element)
+        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue.concat(newBlock))
+      }
+    })
+  })
+})