@portabletext/editor 1.36.0 → 1.36.2

package/src/converters/converter.text-html.deserialize.test.ts

@@ -114,7 +114,7 @@ describe(converterTextHtml.deserialize.name, () => {
         },
       }),
     ).toMatchObject({
-      data: [],
+      type: 'deserialization.failure',
     })
   })
 

package/src/converters/converter.text-html.serialize.test.ts

@@ -1,12 +1,12 @@
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {describe, expect, test} from 'vitest'
+import type {EditorSelection} from '..'
 import {
   compileSchemaDefinition,
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
-import type {EditorSelection} from '../utils'
 import {converterTextHtml} from './converter.text-html'
 import {coreConverters} from './converters.core'
 

package/src/converters/converter.text-html.ts

@@ -56,6 +56,14 @@ export const converterTextHtml = defineConverter({
       },
     ) as Array<PortableTextBlock>
 
+    if (blocks.length === 0) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: 'text/html',
+        reason: 'No blocks deserialized',
+      }
+    }
+
     return {
       type: 'deserialization.success',
       data: blocks,

package/src/converters/converter.text-plain.test.ts

@@ -1,12 +1,12 @@
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
+import type {EditorSelection} from '..'
 import {
   compileSchemaDefinition,
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
-import type {EditorSelection} from '../utils'
 import {converterTextPlain} from './converter.text-plain'
 import {coreConverters} from './converters.core'
 

package/src/converters/converter.text-plain.ts

@@ -71,6 +71,14 @@ export const converterTextPlain = defineConverter({
       },
     ) as Array<PortableTextBlock>
 
+    if (blocks.length === 0) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: 'text/plain',
+        reason: 'No blocks deserialized',
+      }
+    }
+
     return {
       type: 'deserialization.success',
       data: blocks,

package/src/editor/Editable.tsx

@@ -114,7 +114,7 @@ export type PortableTextEditableProps = Omit<
  * @public
  *
  *
- * The core component that renders the editor. Must be placed within the {@link EventProvider} component.
+ * The core component that renders the editor. Must be placed within the {@link EditorProvider} component.
  *
  * @example
  * ```tsx

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

@@ -52,32 +52,28 @@ describe('initialization', () => {
       class="pt-block pt-text-block pt-text-block-style-normal"
       data-slate-node="element"
     >
-      <div
-        draggable="false"
-      >
-        <div>
+      <div>
+        <span
+          data-slate-node="text"
+        >
           <span
-            data-slate-node="text"
+            contenteditable="false"
+            style="position: absolute; user-select: none; pointer-events: none; left: 0px; right: 0px;"
+          >
+            Jot something down here
+          </span>
+          <span
+            data-slate-leaf="true"
           >
             <span
-              contenteditable="false"
-              style="position: absolute; user-select: none; pointer-events: none; left: 0px; right: 0px;"
-            >
-              Jot something down here
-            </span>
-            <span
-              data-slate-leaf="true"
+              data-slate-length="0"
+              data-slate-zero-width="n"
             >
-              <span
-                data-slate-length="0"
-                data-slate-zero-width="n"
-              >
-                
-                <br />
-              </span>
+              
+              <br />
             </span>
           </span>
-        </div>
+        </span>
       </div>
     </div>
   </div>

package/src/editor/components/Element.tsx

@@ -30,7 +30,9 @@ import type {
   RenderStyleFunction,
 } from '../../types/editor'
 import {DefaultBlockObject, DefaultInlineObject} from './DefaultObject'
-import {DraggableBlock} from './DraggableBlock'
+import {DropIndicator} from './drop-indicator'
+import {useDraggable} from './use-draggable'
+import {useDroppable} from './use-droppable'
 
 const debug = debugWithName('components:Element')
 const debugRenders = false
@@ -77,6 +79,8 @@ export const Element: FunctionComponent<ElementProps> = ({
   const focused =
     (selected && editor.selection && Range.isCollapsed(editor.selection)) ||
     false
+  const droppable = useDroppable({element, blockRef, readOnly})
+  const draggable = useDraggable({element, blockRef, readOnly})
 
   const value = useMemo(
     () =>
@@ -235,20 +239,18 @@ export const Element: FunctionComponent<ElementProps> = ({
     const propsOrDefaultRendered = renderBlock
       ? renderBlock(renderProps as BlockRenderProps)
       : children
+
     return (
       <div
         key={element._key}
         {...attributes}
         className={className}
         spellCheck={spellCheck}
+        {...droppable.droppableProps}
       >
-        <DraggableBlock
-          element={element}
-          readOnly={readOnly}
-          blockRef={blockRef}
-        >
-          <div ref={blockRef}>{propsOrDefaultRendered}</div>
-        </DraggableBlock>
+        {droppable.isDraggingOverTop ? <DropIndicator /> : null}
+        <div ref={blockRef}>{propsOrDefaultRendered}</div>
+        {droppable.isDraggingOverBottom ? <DropIndicator /> : null}
       </div>
     )
   }
@@ -303,17 +305,23 @@ export const Element: FunctionComponent<ElementProps> = ({
   }
 
   return (
-    <div key={element._key} {...attributes} className={className}>
+    <div
+      key={element._key}
+      {...attributes}
+      className={className}
+      {...droppable.droppableProps}
+      {...draggable.draggableProps}
+    >
+      {droppable.isDraggingOverTop ? <DropIndicator /> : null}
       {children}
-      <DraggableBlock element={element} readOnly={readOnly} blockRef={blockRef}>
-        <div ref={blockRef} contentEditable={false}>
-          {renderedBlockFromProps ? (
-            renderedBlockFromProps
-          ) : (
-            <DefaultBlockObject value={value} />
-          )}
-        </div>
-      </DraggableBlock>
+      <div ref={blockRef} contentEditable={false}>
+        {renderedBlockFromProps ? (
+          renderedBlockFromProps
+        ) : (
+          <DefaultBlockObject value={value} />
+        )}
+      </div>
+      {droppable.isDraggingOverBottom ? <DropIndicator /> : null}
     </div>
   )
 }

package/src/editor/components/drop-indicator.tsx

@@ -0,0 +1,14 @@
+export function DropIndicator() {
+  return (
+    <div
+      className="pt-drop-indicator"
+      style={{
+        position: 'absolute',
+        width: '100%',
+        height: 1,
+        borderBottom: '1px solid currentColor',
+        zIndex: 5,
+      }}
+    />
+  )
+}

package/src/editor/components/{DraggableBlock.tsx → use-draggable.ts}

@@ -1,14 +1,12 @@
 import {
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type DragEvent,
-  type MutableRefObject,
-  type ReactNode,
+  type RefObject,
 } from 'react'
-import {Editor, Path, Transforms, type Element as SlateElement} from 'slate'
+import {Path, Transforms, type Element as SlateElement} from 'slate'
 import {ReactEditor, useSlateStatic} from 'slate-react'
 import {debugWithName} from '../../internal-utils/debug'
 import {
@@ -18,91 +16,36 @@ import {
   IS_DRAGGING_ELEMENT_TARGET,
 } from '../../internal-utils/weakMaps'
 
-const debug = debugWithName('components:DraggableBlock')
-const debugRenders = false
+const debug = debugWithName('useDraggable')
 
-/**
- * @internal
- */
-export interface DraggableBlockProps {
-  children: ReactNode
-  element: SlateElement
-  readOnly: boolean
-  blockRef: MutableRefObject<HTMLDivElement | null>
+type Draggable = {
+  draggableProps: {
+    draggable: boolean
+    onDragStart?: (event: DragEvent) => void
+    onDrag?: (event: DragEvent) => void
+    onDragEnd?: (event: DragEvent) => void
+  }
 }
 
-/**
- * Implements drag and drop functionality on editor block nodes
- * @internal
- */
-export const DraggableBlock = ({
-  children,
-  element,
-  readOnly,
-  blockRef,
-}: DraggableBlockProps) => {
+export function useDraggable(props: {
+  element: SlateElement
+  readOnly: boolean
+  blockRef: RefObject<HTMLDivElement | null>
+}): Draggable {
   const editor = useSlateStatic()
   const dragGhostRef = useRef<HTMLElement>(undefined)
-  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),
+        props.blockRef
+          ? props.blockRef.current
+          : ReactEditor.toDOMNode(editor, props.element),
       ),
-    [editor, element, blockRef],
+    [editor, props.element, props.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) => {
@@ -119,7 +62,7 @@ export const DraggableBlock = ({
         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 myPath = ReactEditor.findPath(editor, props.element)
         const isBefore = Path.isBefore(myPath, targetPath)
         if (dragPosition === 'bottom' && !isBefore) {
           // If it is already at the bottom, don't do anything.
@@ -154,7 +97,7 @@ export const DraggableBlock = ({
           return
         }
         debug(
-          `Moving element ${element._key} from path ${JSON.stringify(myPath)} to ${JSON.stringify(
+          `Moving element ${props.element._key} from path ${JSON.stringify(myPath)} to ${JSON.stringify(
             targetPath,
           )} (${dragPosition})`,
         )
@@ -164,29 +107,14 @@ export const DraggableBlock = ({
       }
       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],
+    [editor, props.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)
+      IS_DRAGGING_BLOCK_ELEMENT.set(editor, props.element)
       event.stopPropagation() // Stop propagation so that leafs don't get this and take focus/selection!
 
       const target = event.target
@@ -195,18 +123,12 @@ export const DraggableBlock = ({
         target.style.opacity = '1'
       }
     },
-    [editor, element, isVoid],
+    [editor, props.element],
   )
 
   // 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) {
@@ -244,69 +166,26 @@ export const DraggableBlock = ({
       }
       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,
-        }}
-      />
-    ),
-    [],
+    [blockElement, editor, handleDrag],
   )
 
-  if (readOnly) {
-    return <>{children}</>
+  if (props.readOnly) {
+    return {
+      draggableProps: {
+        draggable: false,
+        onDragStart: undefined,
+        onDrag: undefined,
+        onDragEnd: undefined,
+      },
+    }
   }
 
-  if (debugRenders) {
-    debug('render')
+  return {
+    draggableProps: {
+      draggable: true,
+      onDragStart: handleDragStart,
+      onDrag: handleDrag,
+      onDragEnd: handleDragEnd,
+    },
   }
-
-  return (
-    <div
-      draggable={isVoid}
-      onDragStart={handleDragStart}
-      onDrag={handleDrag}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDragEnd={handleDragEnd}
-      onDrop={handleDrop}
-    >
-      {isDraggingOverTop && dropIndicator}
-      {children}
-      {isDraggingOverBottom && dropIndicator}
-    </div>
-  )
 }
-
-DraggableBlock.displayName = 'DraggableBlock'

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

@@ -0,0 +1,135 @@
+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,
+  }
+}

package/src/editor/create-slate-editor.tsx

@@ -15,9 +15,6 @@ type SlateEditorConfig = {
   editorActor: EditorActor
 }
 
-/**
- * @internal
- */
 export type SlateEditor = {
   instance: PortableTextSlateEditor
   initialValue: Array<Descendant>

package/src/editor/sync-machine.ts

@@ -361,6 +361,7 @@ export const syncMachine = setup({
                   'assign previous value',
                   'assign initial value synced',
                 ],
+                target: 'syncing',
                 reenter: true,
               },
               {