@portabletext/editor 1.36.6 → 1.38.0

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

@@ -1,277 +0,0 @@
-import {fireEvent, render, waitFor} from '@testing-library/react'
-import {act, createRef, type RefObject} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-import {PortableTextEditor} from '../PortableTextEditor'
-import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
-
-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
-   */
-  // @ts-ignore
-  element.isContentEditable = true
-  return element
-}
-
-describe('adds empty text block if its needed', () => {
-  const newBlock = {
-    _type: 'myTestBlockType',
-    _key: '1',
-    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 | null> = createRef()
-    const onChange = vi.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    const element = await getEditableElement(component)
-
-    await waitFor(() => {
-      if (editorRef.current && element) {
-        PortableTextEditor.focus(editorRef.current)
-        PortableTextEditor.select(editorRef.current, initialSelection)
-        fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editorRef.current)).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: '1',
-        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 | null> = createRef()
-    const onChange = vi.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    const element = await getEditableElement(component)
-
-    await waitFor(() => {
-      if (editorRef.current && element) {
-        PortableTextEditor.focus(editorRef.current)
-        PortableTextEditor.select(editorRef.current, initialSelection)
-        fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editorRef.current)).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: 0},
-      anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 0},
-    }
-
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const onChange = vi.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    const element = await getEditableElement(component)
-
-    await waitFor(() => {
-      if (editorRef.current && element) {
-        PortableTextEditor.focus(editorRef.current)
-        PortableTextEditor.select(editorRef.current, initialSelection)
-        fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editorRef.current)).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 | null> = createRef()
-    const onChange = vi.fn()
-    const component = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'value',
-          value: initialValue,
-        })
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-      }
-    })
-
-    const element = await getEditableElement(component)
-
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find(
-      (t) => t.name === 'someObject',
-    )
-    await waitFor(() => {
-      if (editor && inlineType && element) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
-        fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editor)).toEqual(
-          initialValue.concat(newBlock),
-        )
-      }
-    })
-  })
-})

package/src/editor/components/use-droppable.ts

@@ -1,135 +0,0 @@
-import type React from 'react'
-import {useCallback, useEffect, useState, type DragEvent} from 'react'
-import type {Element as SlateElement} from 'slate'
-import {ReactEditor, useSlateStatic} from 'slate-react'
-import {debugWithName} from '../../internal-utils/debug'
-import {
-  IS_DRAGGING_BLOCK_ELEMENT,
-  IS_DRAGGING_BLOCK_TARGET_POSITION,
-  IS_DRAGGING_ELEMENT_TARGET,
-} from '../../internal-utils/weakMaps'
-
-const debug = debugWithName('useDroppable')
-
-type Droppable = {
-  droppableProps: {
-    onDragOver?: (event: DragEvent) => void
-    onDragLeave?: () => void
-    onDrop?: (event: DragEvent) => void
-  }
-  isDraggingOverTop: boolean
-  isDraggingOverBottom: boolean
-}
-
-export function useDroppable(props: {
-  element: SlateElement
-  blockRef: React.RefObject<HTMLDivElement | null>
-  readOnly: boolean
-}): Droppable {
-  const editor = useSlateStatic()
-  const [isDragOver, setIsDragOver] = useState(false)
-  const [blockElement, setBlockElement] = useState<HTMLElement | null>(null)
-
-  useEffect(
-    () =>
-      setBlockElement(
-        props.blockRef
-          ? props.blockRef.current
-          : ReactEditor.toDOMNode(editor, props.element),
-      ),
-    [editor, props.element, props.blockRef],
-  )
-
-  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, props.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 (props.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 === props.element) {
-        event.dataTransfer.dropEffect = 'none'
-        return
-      }
-      setIsDragOver(true)
-    },
-    [blockElement, editor, props.element],
-  )
-
-  const handleDragLeave = useCallback(() => {
-    setIsDragOver(false)
-  }, [])
-
-  const handleDrop = useCallback(
-    (event: DragEvent) => {
-      if (IS_DRAGGING_BLOCK_ELEMENT.get(editor)) {
-        debug('On drop (prevented)', props.element)
-        event.preventDefault()
-        event.stopPropagation()
-        setIsDragOver(false)
-      }
-    },
-    [editor, props.element],
-  )
-
-  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')
-
-  if (props.readOnly) {
-    return {
-      droppableProps: {
-        onDragOver: undefined,
-        onDragLeave: undefined,
-        onDrop: undefined,
-      },
-      isDraggingOverTop: false,
-      isDraggingOverBottom: false,
-    }
-  }
-
-  return {
-    droppableProps: {
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-    },
-    isDraggingOverTop,
-    isDraggingOverBottom,
-  }
-}