@portabletext/editor 0.0.0

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

@@ -0,0 +1,389 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {type PortableTextBlock} from '@sanity/types'
+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',
+          },
+        ])
+      }
+    })
+  })
+
+  it('removes orphaned marks', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: 'abc',
+        _type: 'myTestBlockType',
+        style: 'normal',
+        markDefs: [],
+        children: [
+          {
+            _key: 'def',
+            _type: 'span',
+            marks: ['ghi'],
+            text: 'Hello',
+          },
+        ],
+      },
+    ]
+
+    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: 'Hello',
+                marks: [],
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
+      }
+    })
+  })
+
+  it('removes orphaned marksDefs', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [
+      {
+        _key: 'abc',
+        _type: 'myTestBlockType',
+        style: 'normal',
+        markDefs: [
+          {
+            _key: 'ghi',
+            _type: 'link',
+            href: 'https://sanity.io',
+          },
+        ],
+        children: [
+          {
+            _key: 'def',
+            _type: 'span',
+            marks: [],
+            text: 'Hello',
+          },
+        ],
+      },
+    ]
+
+    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: 'Hello',
+                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('allows empty array of blocks', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const initialValue = [] as PortableTextBlock[]
+
+    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: '5',
+            _type: 'myTestBlockType',
+            children: [{_key: '4', _type: 'span', marks: [], text: ''}],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
+      }
+    })
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+    })
+  })
+})

package/src/editor/__tests__/utils.ts

@@ -0,0 +1,39 @@
+// This utils are inspired from https://github.dev/mwood23/slate-test-utils/blob/master/src/buildTestHarness.tsx
+import {act, fireEvent, type render} from '@testing-library/react'
+import {parseHotkey} from 'is-hotkey-esm'
+
+export async function triggerKeyboardEvent(hotkey: string, element: Element): Promise<void> {
+  return act(async () => {
+    const eventProps = parseHotkey(hotkey)
+    const values = hotkey.split('+')
+
+    fireEvent(
+      element,
+      new window.KeyboardEvent('keydown', {
+        key: values[values.length - 1],
+        code: `${eventProps.which}`,
+        keyCode: eventProps.which,
+        bubbles: true,
+        ...eventProps,
+      }),
+    )
+  })
+}
+
+export async function getEditableElement(component: ReturnType<typeof render>): Promise<Element> {
+  await act(async () => component)
+  const element = component.container.querySelector('[data-slate-editor="true"]')
+  if (!element) {
+    throw new Error('Could not find element')
+  }
+  /**
+   * Manually add this because JSDom doesn't implement this and Slate checks for it
+   * internally before doing stuff.
+   *
+   * https://github.com/jsdom/jsdom/issues/1670
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  element.isContentEditable = true
+  return element
+}

package/src/editor/components/DraggableBlock.tsx

@@ -0,0 +1,287 @@
+import {
+  type DragEvent,
+  type MutableRefObject,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {Editor, type Element as SlateElement, Path, Transforms} from 'slate'
+import {ReactEditor, useSlateStatic} from 'slate-react'
+
+import {debugWithName} from '../../utils/debug'
+import {
+  IS_DRAGGING,
+  IS_DRAGGING_BLOCK_ELEMENT,
+  IS_DRAGGING_BLOCK_TARGET_POSITION,
+  IS_DRAGGING_ELEMENT_TARGET,
+} from '../../utils/weakMaps'
+
+const debug = debugWithName('components:DraggableBlock')
+const debugRenders = false
+
+/**
+ * @internal
+ */
+export interface DraggableBlockProps {
+  children: ReactNode
+  element: SlateElement
+  readOnly: boolean
+  blockRef: MutableRefObject<HTMLDivElement | null>
+}
+
+/**
+ * Implements drag and drop functionality on editor block nodes
+ * @internal
+ */
+export const DraggableBlock = ({children, element, readOnly, blockRef}: DraggableBlockProps) => {
+  const editor = useSlateStatic()
+  const dragGhostRef: MutableRefObject<undefined | HTMLElement> = useRef()
+  const [isDragOver, setIsDragOver] = useState(false)
+  const isVoid = useMemo(() => Editor.isVoid(editor, element), [editor, element])
+  const isInline = useMemo(() => Editor.isInline(editor, element), [editor, element])
+
+  const [blockElement, setBlockElement] = useState<HTMLElement | null>(null)
+
+  useEffect(
+    () => setBlockElement(blockRef ? blockRef.current : ReactEditor.toDOMNode(editor, element)),
+    [editor, element, blockRef],
+  )
+
+  // Note: this is called not for the dragging block, but for the targets when the block is dragged over them
+  const handleDragOver = useCallback(
+    (event: DragEvent) => {
+      const isMyDragOver = IS_DRAGGING_BLOCK_ELEMENT.get(editor)
+      // debug('Drag over', blockElement)
+      if (!isMyDragOver || !blockElement) {
+        return
+      }
+      event.preventDefault()
+      event.dataTransfer.dropEffect = 'move'
+      IS_DRAGGING_ELEMENT_TARGET.set(editor, element)
+      const elementRect = blockElement.getBoundingClientRect()
+      const offset = elementRect.top
+      const height = elementRect.height
+      const Y = event.pageY
+      const loc = Math.abs(offset - Y)
+      let position: 'top' | 'bottom' = 'bottom'
+      if (element === editor.children[0]) {
+        position = 'top'
+      } else if (loc < height / 2) {
+        position = 'top'
+        IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, position)
+      } else {
+        position = 'bottom'
+        IS_DRAGGING_BLOCK_TARGET_POSITION.set(editor, position)
+      }
+      if (isMyDragOver === element) {
+        event.dataTransfer.dropEffect = 'none'
+        return
+      }
+      setIsDragOver(true)
+    },
+    [blockElement, editor, element],
+  )
+
+  // Note: this is called not for the dragging block, but for the targets when the block is dragged over them
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false)
+  }, [])
+
+  // Note: this is called for the dragging block
+  const handleDragEnd = useCallback(
+    (event: DragEvent) => {
+      const targetBlock = IS_DRAGGING_ELEMENT_TARGET.get(editor)
+      if (targetBlock) {
+        IS_DRAGGING.set(editor, false)
+        event.preventDefault()
+        event.stopPropagation()
+        IS_DRAGGING_ELEMENT_TARGET.delete(editor)
+        if (dragGhostRef.current) {
+          debug('Removing drag ghost')
+          document.body.removeChild(dragGhostRef.current)
+        }
+        const dragPosition = IS_DRAGGING_BLOCK_TARGET_POSITION.get(editor)
+        IS_DRAGGING_BLOCK_TARGET_POSITION.delete(editor)
+        let targetPath = ReactEditor.findPath(editor, targetBlock)
+        const myPath = ReactEditor.findPath(editor, element)
+        const isBefore = Path.isBefore(myPath, targetPath)
+        if (dragPosition === 'bottom' && !isBefore) {
+          // If it is already at the bottom, don't do anything.
+          if (targetPath[0] >= editor.children.length - 1) {
+            debug('target is already at the bottom, not moving')
+            return
+          }
+          const originalPath = targetPath
+          targetPath = Path.next(targetPath)
+          debug(
+            `Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(
+              targetPath,
+            )}`,
+          )
+        }
+        if (dragPosition === 'top' && isBefore && targetPath[0] !== editor.children.length - 1) {
+          const originalPath = targetPath
+          targetPath = Path.previous(targetPath)
+          debug(
+            `Adjusting targetPath from ${JSON.stringify(originalPath)} to ${JSON.stringify(
+              targetPath,
+            )}`,
+          )
+        }
+        if (Path.equals(targetPath, myPath)) {
+          event.preventDefault()
+          debug('targetPath and myPath is the same, not moving')
+          return
+        }
+        debug(
+          `Moving element ${element._key} from path ${JSON.stringify(myPath)} to ${JSON.stringify(
+            targetPath,
+          )} (${dragPosition})`,
+        )
+        Transforms.moveNodes(editor, {at: myPath, to: targetPath})
+        editor.onChange()
+        return
+      }
+      debug('No target element, not doing anything')
+    },
+    [editor, element],
+  )
+  // Note: this is called not for the dragging block, but for the drop target
+  const handleDrop = useCallback(
+    (event: DragEvent) => {
+      if (IS_DRAGGING_BLOCK_ELEMENT.get(editor)) {
+        debug('On drop (prevented)', element)
+        event.preventDefault()
+        event.stopPropagation()
+        setIsDragOver(false)
+      }
+    },
+    [editor, element],
+  )
+  // Note: this is called for the dragging block
+  const handleDrag = useCallback(
+    (event: DragEvent) => {
+      if (!isVoid) {
+        IS_DRAGGING_BLOCK_ELEMENT.delete(editor)
+        return
+      }
+      IS_DRAGGING.set(editor, true)
+      IS_DRAGGING_BLOCK_ELEMENT.set(editor, element)
+      event.stopPropagation() // Stop propagation so that leafs don't get this and take focus/selection!
+
+      const target = event.target
+
+      if (target instanceof HTMLElement) {
+        target.style.opacity = '1'
+      }
+    },
+    [editor, element, isVoid],
+  )
+
+  // Note: this is called for the dragging block
+  const handleDragStart = useCallback(
+    (event: DragEvent) => {
+      if (!isVoid || isInline) {
+        debug('Not dragging block')
+        IS_DRAGGING_BLOCK_ELEMENT.delete(editor)
+        IS_DRAGGING.set(editor, false)
+        return
+      }
+      debug('Drag start')
+      IS_DRAGGING.set(editor, true)
+      if (event.dataTransfer) {
+        event.dataTransfer.setData('application/portable-text', 'something')
+        event.dataTransfer.effectAllowed = 'move'
+      }
+      // Clone blockElement so that it will not be visually clipped by scroll-containers etc.
+      // The application that uses the portable-text-editor may indicate the element used as
+      // drag ghost by adding a truthy data attribute 'data-pt-drag-ghost-element' to a HTML element.
+      if (blockElement && blockElement instanceof HTMLElement) {
+        let dragGhost = blockElement.cloneNode(true) as HTMLElement
+        const customGhost = dragGhost.querySelector('[data-pt-drag-ghost-element]')
+        if (customGhost) {
+          dragGhost = customGhost as HTMLElement
+        }
+
+        // Set the `data-dragged` attribute so the consumer can style the element while it’s dragged
+        dragGhost.setAttribute('data-dragged', '')
+
+        if (document.body) {
+          dragGhostRef.current = dragGhost
+          dragGhost.style.position = 'absolute'
+          dragGhost.style.left = '-99999px'
+          dragGhost.style.boxSizing = 'border-box'
+          document.body.appendChild(dragGhost)
+          const rect = blockElement.getBoundingClientRect()
+          const x = event.clientX - rect.left
+          const y = event.clientY - rect.top
+          dragGhost.style.width = `${rect.width}px`
+          dragGhost.style.height = `${rect.height}px`
+          event.dataTransfer.setDragImage(dragGhost, x, y)
+        }
+      }
+      handleDrag(event)
+    },
+    [blockElement, editor, handleDrag, isInline, isVoid],
+  )
+
+  const isDraggingOverFirstBlock =
+    isDragOver && editor.children[0] === IS_DRAGGING_ELEMENT_TARGET.get(editor)
+  const isDraggingOverLastBlock =
+    isDragOver &&
+    editor.children[editor.children.length - 1] === IS_DRAGGING_ELEMENT_TARGET.get(editor)
+  const dragPosition = IS_DRAGGING_BLOCK_TARGET_POSITION.get(editor)
+
+  const isDraggingOverTop =
+    isDraggingOverFirstBlock ||
+    (isDragOver && !isDraggingOverFirstBlock && !isDraggingOverLastBlock && dragPosition === 'top')
+  const isDraggingOverBottom =
+    isDraggingOverLastBlock ||
+    (isDragOver &&
+      !isDraggingOverFirstBlock &&
+      !isDraggingOverLastBlock &&
+      dragPosition === 'bottom')
+
+  const dropIndicator = useMemo(
+    () => (
+      <div
+        className="pt-drop-indicator"
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: 1,
+          borderBottom: '1px solid currentColor',
+          zIndex: 5,
+        }}
+      />
+    ),
+    [],
+  )
+
+  if (readOnly) {
+    return <>{children}</>
+  }
+
+  if (debugRenders) {
+    debug('render')
+  }
+
+  return (
+    <div
+      draggable={isVoid}
+      onDragStart={handleDragStart}
+      onDrag={handleDrag}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDragEnd={handleDragEnd}
+      onDrop={handleDrop}
+    >
+      {isDraggingOverTop && dropIndicator}
+      {children}
+      {isDraggingOverBottom && dropIndicator}
+    </div>
+  )
+}