@portabletext/editor 1.0.19 → 1.1.1

package/src/editor/components/DraggableBlock.tsx

@@ -1,16 +1,15 @@
 import {
-  type DragEvent,
-  type MutableRefObject,
-  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type DragEvent,
+  type MutableRefObject,
+  type ReactNode,
 } from 'react'
-import {Editor, type Element as SlateElement, Path, Transforms} from 'slate'
+import {Editor, Path, Transforms, type Element as SlateElement} from 'slate'
 import {ReactEditor, useSlateStatic} from 'slate-react'
-
 import {debugWithName} from '../../utils/debug'
 import {
   IS_DRAGGING,
@@ -36,17 +35,31 @@ export interface DraggableBlockProps {
  * Implements drag and drop functionality on editor block nodes
  * @internal
  */
-export const DraggableBlock = ({children, element, readOnly, blockRef}: DraggableBlockProps) => {
+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 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)),
+    () =>
+      setBlockElement(
+        blockRef ? blockRef.current : ReactEditor.toDOMNode(editor, element),
+      ),
     [editor, element, blockRef],
   )
 
@@ -122,7 +135,11 @@ export const DraggableBlock = ({children, element, readOnly, blockRef}: Draggabl
             )}`,
           )
         }
-        if (dragPosition === 'top' && isBefore && targetPath[0] !== editor.children.length - 1) {
+        if (
+          dragPosition === 'top' &&
+          isBefore &&
+          targetPath[0] !== editor.children.length - 1
+        ) {
           const originalPath = targetPath
           targetPath = Path.previous(targetPath)
           debug(
@@ -201,7 +218,9 @@ export const DraggableBlock = ({children, element, readOnly, blockRef}: Draggabl
       // 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]')
+        const customGhost = dragGhost.querySelector(
+          '[data-pt-drag-ghost-element]',
+        )
         if (customGhost) {
           dragGhost = customGhost as HTMLElement
         }
@@ -232,12 +251,16 @@ export const DraggableBlock = ({children, element, readOnly, blockRef}: Draggabl
     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)
+    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')
+    (isDragOver &&
+      !isDraggingOverFirstBlock &&
+      !isDraggingOverLastBlock &&
+      dragPosition === 'top')
   const isDraggingOverBottom =
     isDraggingOverLastBlock ||
     (isDragOver &&

package/src/editor/components/Element.tsx

@@ -1,28 +1,34 @@
-/* eslint-disable complexity */
-/* eslint-disable max-statements */
-import {
-  type Path,
-  type PortableTextChild,
-  type PortableTextObject,
-  type PortableTextTextBlock,
+import type {
+  Path,
+  PortableTextChild,
+  PortableTextObject,
+  PortableTextTextBlock,
 } from '@sanity/types'
-import {type FunctionComponent, type ReactElement, useMemo, useRef} from 'react'
-import {Editor, Element as SlateElement, Range} from 'slate'
-import {ReactEditor, type RenderElementProps, useSelected, useSlateStatic} from 'slate-react'
-
+import {useMemo, useRef, type FunctionComponent, type ReactElement} from 'react'
+import {Editor, Range, Element as SlateElement} from 'slate'
 import {
-  type BlockRenderProps,
-  type PortableTextMemberSchemaTypes,
-  type RenderBlockFunction,
-  type RenderChildFunction,
-  type RenderListItemFunction,
-  type RenderStyleFunction,
+  ReactEditor,
+  useSelected,
+  useSlateStatic,
+  type RenderElementProps,
+} from 'slate-react'
+import type {
+  BlockRenderProps,
+  PortableTextMemberSchemaTypes,
+  RenderBlockFunction,
+  RenderChildFunction,
+  RenderListItemFunction,
+  RenderStyleFunction,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {fromSlateValue} from '../../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import ObjectNode from '../nodes/DefaultObject'
-import {DefaultBlockObject, DefaultListItem, DefaultListItemInner} from '../nodes/index'
+import {
+  DefaultBlockObject,
+  DefaultListItem,
+  DefaultListItemInner,
+} from '../nodes/index'
 import {DraggableBlock} from './DraggableBlock'
 
 const debug = debugWithName('components:Element')
@@ -67,16 +73,23 @@ export const Element: FunctionComponent<ElementProps> = ({
   const selected = useSelected()
   const blockRef = useRef<HTMLDivElement | null>(null)
   const inlineBlockObjectRef = useRef(null)
-  const focused = (selected && editor.selection && Range.isCollapsed(editor.selection)) || false
+  const focused =
+    (selected && editor.selection && Range.isCollapsed(editor.selection)) ||
+    false
 
   const value = useMemo(
-    () => fromSlateValue([element], schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0],
+    () =>
+      fromSlateValue(
+        [element],
+        schemaTypes.block.name,
+        KEY_TO_VALUE_ELEMENT.get(editor),
+      )[0],
     [editor, element, schemaTypes.block.name],
   )
 
   let renderedBlock = children
 
-  let className
+  let className: string | undefined
 
   const blockPath: Path = useMemo(() => [{_key: element._key}], [element])
 
@@ -92,12 +105,18 @@ export const Element: FunctionComponent<ElementProps> = ({
   if (editor.isInline(element)) {
     const path = ReactEditor.findPath(editor, element)
     const [block] = Editor.node(editor, path, {depth: 1})
-    const schemaType = schemaTypes.inlineObjects.find((_type) => _type.name === element._type)
+    const schemaType = schemaTypes.inlineObjects.find(
+      (_type) => _type.name === element._type,
+    )
     if (!schemaType) {
       throw new Error('Could not find type for inline block element')
     }
     if (SlateElement.isElement(block)) {
-      const elmPath: Path = [{_key: block._key}, 'children', {_key: element._key}]
+      const elmPath: Path = [
+        {_key: block._key},
+        'children',
+        {_key: element._key},
+      ]
       if (debugRenders) {
         debug(`Render ${element._key} (inline object)`)
       }
@@ -144,7 +163,9 @@ export const Element: FunctionComponent<ElementProps> = ({
     }
     const style = ('style' in element && element.style) || 'normal'
     className = `pt-block pt-text-block pt-text-block-style-${style}`
-    const blockStyleType = schemaTypes.styles.find((item) => item.value === style)
+    const blockStyleType = schemaTypes.styles.find(
+      (item) => item.value === style,
+    )
     if (renderStyle && blockStyleType) {
       renderedBlock = renderStyle({
         block: element as PortableTextTextBlock,
@@ -157,7 +178,7 @@ export const Element: FunctionComponent<ElementProps> = ({
         editorElementRef: blockRef,
       })
     }
-    let level
+    let level: number | undefined
     if (isListItem) {
       if (typeof element.level === 'number') {
         level = element.level
@@ -165,7 +186,9 @@ export const Element: FunctionComponent<ElementProps> = ({
       className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`
     }
     if (editor.isListBlock(value) && isListItem && element.listItem) {
-      const listType = schemaTypes.lists.find((item) => item.value === element.listItem)
+      const listType = schemaTypes.lists.find(
+        (item) => item.value === element.listItem,
+      )
       if (renderListItem && listType) {
         renderedBlock = renderListItem({
           block: value,
@@ -206,7 +229,9 @@ export const Element: FunctionComponent<ElementProps> = ({
       {
         enumerable: false,
         get() {
-          console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
+          console.warn(
+            "Property 'type' is deprecated, use 'schemaType' instead.",
+          )
           return schemaTypes.block
         },
       },
@@ -216,16 +241,29 @@ export const Element: FunctionComponent<ElementProps> = ({
       ? renderBlock(renderProps as BlockRenderProps)
       : children
     return (
-      <div key={element._key} {...attributes} className={className} spellCheck={spellCheck}>
-        <DraggableBlock element={element} readOnly={readOnly} blockRef={blockRef}>
+      <div
+        key={element._key}
+        {...attributes}
+        className={className}
+        spellCheck={spellCheck}
+      >
+        <DraggableBlock
+          element={element}
+          readOnly={readOnly}
+          blockRef={blockRef}
+        >
           <div ref={blockRef}>{propsOrDefaultRendered}</div>
         </DraggableBlock>
       </div>
     )
   }
-  const schemaType = schemaTypes.blockObjects.find((_type) => _type.name === element._type)
+  const schemaType = schemaTypes.blockObjects.find(
+    (_type) => _type.name === element._type,
+  )
   if (!schemaType) {
-    throw new Error(`Could not find schema type for block element of _type ${element._type}`)
+    throw new Error(
+      `Could not find schema type for block element of _type ${element._type}`,
+    )
   }
   if (debugRenders) {
     debug(`Render ${element._key} (object block)`)
@@ -236,7 +274,7 @@ export const Element: FunctionComponent<ElementProps> = ({
     schemaTypes.block.name,
     KEY_TO_VALUE_ELEMENT.get(editor),
   )[0]
-  let renderedBlockFromProps
+  let renderedBlockFromProps: JSX.Element | undefined
   if (renderBlock) {
     const _props: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
       {
@@ -252,7 +290,9 @@ export const Element: FunctionComponent<ElementProps> = ({
       {
         enumerable: false,
         get() {
-          console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
+          console.warn(
+            "Property 'type' is deprecated, use 'schemaType' instead.",
+          )
           return schemaType
         },
       },

package/src/editor/components/Leaf.tsx

@@ -1,25 +1,28 @@
-import {type Path, type PortableTextObject, type PortableTextTextBlock} from '@sanity/types'
+import type {
+  Path,
+  PortableTextObject,
+  PortableTextTextBlock,
+} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {
-  type ReactElement,
   startTransition,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type ReactElement,
 } from 'react'
 import {Text} from 'slate'
-import {type RenderLeafProps, useSelected} from 'slate-react'
-
-import {
-  type BlockAnnotationRenderProps,
-  type BlockChildRenderProps,
-  type BlockDecoratorRenderProps,
-  type PortableTextMemberSchemaTypes,
-  type RenderAnnotationFunction,
-  type RenderChildFunction,
-  type RenderDecoratorFunction,
+import {useSelected, type RenderLeafProps} from 'slate-react'
+import type {
+  BlockAnnotationRenderProps,
+  BlockChildRenderProps,
+  BlockDecoratorRenderProps,
+  PortableTextMemberSchemaTypes,
+  RenderAnnotationFunction,
+  RenderChildFunction,
+  RenderDecoratorFunction,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
@@ -47,8 +50,15 @@ export interface LeafProps extends RenderLeafProps {
  * @internal
  */
 export const Leaf = (props: LeafProps) => {
-  const {attributes, children, leaf, schemaTypes, renderChild, renderDecorator, renderAnnotation} =
-    props
+  const {
+    attributes,
+    children,
+    leaf,
+    schemaTypes,
+    renderChild,
+    renderDecorator,
+    renderAnnotation,
+  } = props
   const spanRef = useRef<HTMLElement>(null)
   const portableTextEditor = usePortableTextEditor()
   const blockSelected = useSelected()
@@ -64,7 +74,12 @@ export const Leaf = (props: LeafProps) => {
     [schemaTypes.decorators],
   )
   const marks: string[] = useMemo(
-    () => uniq((leaf.marks || EMPTY_MARKS).filter((mark) => decoratorValues.includes(mark))),
+    () =>
+      uniq(
+        (leaf.marks || EMPTY_MARKS).filter((mark) =>
+          decoratorValues.includes(mark),
+        ),
+      ),
     [decoratorValues, leaf.marks],
   )
   const annotationMarks = Array.isArray(leaf.marks) ? leaf.marks : EMPTY_MARKS
@@ -73,7 +88,8 @@ export const Leaf = (props: LeafProps) => {
       annotationMarks
         .map(
           (mark) =>
-            !decoratorValues.includes(mark) && block?.markDefs?.find((def) => def._key === mark),
+            !decoratorValues.includes(mark) &&
+            block?.markDefs?.find((def) => def._key === mark),
         )
         .filter(Boolean) as PortableTextObject[],
     [annotationMarks, block, decoratorValues],
@@ -159,7 +175,12 @@ export const Leaf = (props: LeafProps) => {
     return () => {
       sub.unsubscribe()
     }
-  }, [path, portableTextEditor, setSelectedFromRange, shouldTrackSelectionAndFocus])
+  }, [
+    path,
+    portableTextEditor,
+    setSelectedFromRange,
+    shouldTrackSelectionAndFocus,
+  ])
 
   useEffect(() => setSelectedFromRange(), [setSelectedFromRange])
 
@@ -168,59 +189,73 @@ export const Leaf = (props: LeafProps) => {
     // Render text nodes
     if (Text.isText(leaf) && leaf._type === schemaTypes.span.name) {
       marks.forEach((mark) => {
-        const schemaType = schemaTypes.decorators.find((dec) => dec.value === mark)
+        const schemaType = schemaTypes.decorators.find(
+          (dec) => dec.value === mark,
+        )
         if (schemaType && renderDecorator) {
-          const _props: Omit<BlockDecoratorRenderProps, 'type'> = Object.defineProperty(
-            {
-              children: returnedChildren,
-              editorElementRef: spanRef,
-              focused,
-              path,
-              selected,
-              schemaType,
-              value: mark,
-            },
-            'type',
-            {
-              enumerable: false,
-              get() {
-                console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
-                return schemaType
+          const _props: Omit<BlockDecoratorRenderProps, 'type'> =
+            Object.defineProperty(
+              {
+                children: returnedChildren,
+                editorElementRef: spanRef,
+                focused,
+                path,
+                selected,
+                schemaType,
+                value: mark,
+              },
+              'type',
+              {
+                enumerable: false,
+                get() {
+                  console.warn(
+                    "Property 'type' is deprecated, use 'schemaType' instead.",
+                  )
+                  return schemaType
+                },
               },
-            },
+            )
+          returnedChildren = renderDecorator(
+            _props as BlockDecoratorRenderProps,
           )
-          returnedChildren = renderDecorator(_props as BlockDecoratorRenderProps)
         }
       })
 
       if (block && annotations.length > 0) {
         annotations.forEach((annotation) => {
-          const schemaType = schemaTypes.annotations.find((t) => t.name === annotation._type)
+          const schemaType = schemaTypes.annotations.find(
+            (t) => t.name === annotation._type,
+          )
           if (schemaType) {
             if (renderAnnotation) {
-              const _props: Omit<BlockAnnotationRenderProps, 'type'> = Object.defineProperty(
-                {
-                  block,
-                  children: returnedChildren,
-                  editorElementRef: spanRef,
-                  focused,
-                  path,
-                  selected,
-                  schemaType,
-                  value: annotation,
-                },
-                'type',
-                {
-                  enumerable: false,
-                  get() {
-                    console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
-                    return schemaType
+              const _props: Omit<BlockAnnotationRenderProps, 'type'> =
+                Object.defineProperty(
+                  {
+                    block,
+                    children: returnedChildren,
+                    editorElementRef: spanRef,
+                    focused,
+                    path,
+                    selected,
+                    schemaType,
+                    value: annotation,
                   },
-                },
-              )
+                  'type',
+                  {
+                    enumerable: false,
+                    get() {
+                      console.warn(
+                        "Property 'type' is deprecated, use 'schemaType' instead.",
+                      )
+                      return schemaType
+                    },
+                  },
+                )
 
               returnedChildren = (
-                <span ref={spanRef}>{renderAnnotation(_props as BlockAnnotationRenderProps)}</span>
+                <span ref={spanRef}>
+                  {renderAnnotation(_props as BlockAnnotationRenderProps)}
+                </span>
               )
             } else {
               returnedChildren = (
@@ -236,26 +271,29 @@ export const Leaf = (props: LeafProps) => {
         const child = block.children.find((_child) => _child._key === leaf._key) // Ensure object equality
         if (child) {
           const defaultRendered = <>{returnedChildren}</>
-          const _props: Omit<BlockChildRenderProps, 'type'> = Object.defineProperty(
-            {
-              annotations,
-              children: defaultRendered,
-              editorElementRef: spanRef,
-              focused,
-              path,
-              schemaType: schemaTypes.span,
-              selected,
-              value: child,
-            },
-            'type',
-            {
-              enumerable: false,
-              get() {
-                console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
-                return schemaTypes.span
+          const _props: Omit<BlockChildRenderProps, 'type'> =
+            Object.defineProperty(
+              {
+                annotations,
+                children: defaultRendered,
+                editorElementRef: spanRef,
+                focused,
+                path,
+                schemaType: schemaTypes.span,
+                selected,
+                value: child,
               },
-            },
-          )
+              'type',
+              {
+                enumerable: false,
+                get() {
+                  console.warn(
+                    "Property 'type' is deprecated, use 'schemaType' instead.",
+                  )
+                  return schemaTypes.span
+                },
+              },
+            )
           returnedChildren = renderChild(_props as BlockChildRenderProps)
         }
       }

package/src/editor/components/SlateContainer.tsx

@@ -1,12 +1,11 @@
-import {type PropsWithChildren, useEffect, useMemo, useState} from 'react'
+import {useEffect, useMemo, useState, type PropsWithChildren} from 'react'
 import {createEditor} from 'slate'
 import {Slate, withReact} from 'slate-react'
-
-import {type PatchObservable} from '../../types/editor'
+import type {PatchObservable} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import {withPlugins} from '../plugins'
-import {type PortableTextEditor} from '../PortableTextEditor'
+import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('component:PortableTextEditor:SlateContainer')
 
@@ -26,7 +25,8 @@ export interface SlateContainerProps extends PropsWithChildren {
  * @internal
  */
 export function SlateContainer(props: SlateContainerProps) {
-  const {patches$, portableTextEditor, readOnly, maxBlocks, keyGenerator} = props
+  const {patches$, portableTextEditor, readOnly, maxBlocks, keyGenerator} =
+    props
 
   // Create the slate instance, using `useState` ensures setup is only run once, initially
   const [[slateEditor, subscribe]] = useState(() => {
@@ -60,10 +60,17 @@ export function SlateContainer(props: SlateContainerProps) {
       portableTextEditor,
       readOnly,
     })
-  }, [keyGenerator, portableTextEditor, maxBlocks, readOnly, patches$, slateEditor])
+  }, [
+    keyGenerator,
+    portableTextEditor,
+    maxBlocks,
+    readOnly,
+    patches$,
+    slateEditor,
+  ])
 
   const initialValue = useMemo(() => {
-    return [slateEditor.pteCreateEmptyBlock()]
+    return [slateEditor.pteCreateTextBlock({decorators: []})]
   }, [slateEditor])
 
   useEffect(() => {

package/src/editor/components/Synchronizer.tsx

@@ -1,11 +1,10 @@
-import {type Patch} from '@portabletext/patches'
-import {type PortableTextBlock} from '@sanity/types'
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
 import {throttle} from 'lodash'
 import {useCallback, useEffect, useMemo, useRef} from 'react'
 import {Editor} from 'slate'
 import {useSlate} from 'slate-react'
-
-import {type EditorChange, type EditorChanges} from '../../types/editor'
+import type {EditorChange, EditorChanges} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {IS_PROCESSING_LOCAL_CHANGES} from '../../utils/weakMaps'
 import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
@@ -61,7 +60,11 @@ export function Synchronizer(props: SynchronizerProps) {
         debug(`Patches:\n${JSON.stringify(pendingPatches.current, null, 2)}`)
       }
       const snapshot = getValue()
-      change$.next({type: 'mutation', patches: pendingPatches.current, snapshot})
+      change$.next({
+        type: 'mutation',
+        patches: pendingPatches.current,
+        snapshot,
+      })
       pendingPatches.current = []
     }
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)

package/src/editor/hooks/usePortableTextEditor.ts

@@ -1,11 +1,11 @@
 import {createContext, useContext} from 'react'
-
-import {type PortableTextEditor} from '../PortableTextEditor'
+import type {PortableTextEditor} from '../PortableTextEditor'
 
 /**
  * A React context for sharing the editor object.
  */
-export const PortableTextEditorContext = createContext<PortableTextEditor | null>(null)
+export const PortableTextEditorContext =
+  createContext<PortableTextEditor | null>(null)
 
 /**
  * @public

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -1,12 +1,18 @@
-import {createContext, startTransition, useContext, useEffect, useState} from 'react'
-
-import {type EditorChanges, type EditorSelection} from '../../types/editor'
+import {
+  createContext,
+  startTransition,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import type {EditorChanges, EditorSelection} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 
 /**
  * A React context for sharing the editor selection.
  */
-const PortableTextEditorSelectionContext = createContext<EditorSelection | null>(null)
+const PortableTextEditorSelectionContext =
+  createContext<EditorSelection | null>(null)
 
 /**
  * @public