@portabletext/editor 1.0.19 → 1.1.0

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

@@ -1,7 +1,6 @@
 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'
@@ -47,7 +46,10 @@ describe('adds empty text block if its needed', () => {
 
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -59,7 +61,10 @@ describe('adds empty text block if its needed', () => {
         PortableTextEditor.focus(editorRef.current)
         PortableTextEditor.select(editorRef.current, initialSelection)
         fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([initialValue[0], newBlock])
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          initialValue[0],
+          newBlock,
+        ])
       }
     })
   })
@@ -107,7 +112,9 @@ describe('adds empty text block if its needed', () => {
         PortableTextEditor.focus(editorRef.current)
         PortableTextEditor.select(editorRef.current, initialSelection)
         fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual(initialValue)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual(
+          initialValue,
+        )
       }
     })
   })
@@ -156,7 +163,10 @@ describe('adds empty text block if its needed', () => {
 
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -168,7 +178,9 @@ describe('adds empty text block if its needed', () => {
         PortableTextEditor.focus(editorRef.current)
         PortableTextEditor.select(editorRef.current, initialSelection)
         fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual(initialValue)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual(
+          initialValue,
+        )
       }
     })
   })
@@ -217,7 +229,10 @@ describe('adds empty text block if its needed', () => {
 
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -225,13 +240,17 @@ describe('adds empty text block if its needed', () => {
     const element = await getEditableElement(component)
 
     const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
+    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))
+        expect(PortableTextEditor.getValue(editor)).toEqual(
+          initialValue.concat(newBlock),
+        )
       }
     })
   })

package/src/editor/__tests__/insert-block.test.tsx

@@ -3,14 +3,17 @@ import {Schema} from '@sanity/schema'
 import {type PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
-
 import {type EditorChange, type EditorSelection} from '../../types/editor'
 import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
 
 const schema = Schema.compile({
   types: [
-    {name: 'portable-text', type: 'array', of: [{type: 'block'}, {type: 'image'}]},
+    {
+      name: 'portable-text',
+      type: 'array',
+      of: [{type: 'block'}, {type: 'image'}],
+    },
     {name: 'image', type: 'object'},
   ],
 }).get('portable-text')
@@ -49,7 +52,10 @@ describe(PortableTextEditor.insertBlock.name, () => {
     // Given an empty text block
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -94,6 +100,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
           marks: [],
         },
       ],
+      markDefs: [],
       style: 'normal',
     }
     const initialValue: Array<PortableTextBlock> = [nonEmptyTextBlock]
@@ -114,7 +121,10 @@ describe(PortableTextEditor.insertBlock.name, () => {
     // Given an non-empty text block
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -184,7 +194,10 @@ describe(PortableTextEditor.insertBlock.name, () => {
     // Given an empty text block followed by an image
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -202,7 +215,10 @@ describe(PortableTextEditor.insertBlock.name, () => {
     })
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'selection', selection: initialSelection})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'selection',
+          selection: initialSelection,
+        })
       }
     })
 

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

@@ -2,7 +2,6 @@ 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'
 
@@ -35,7 +34,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       />,
     )
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
     await waitFor(() => {
@@ -60,7 +62,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     })
   })
 
-  it('allows missing .markDefs', async () => {
+  it('self-solves missing .markDefs', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue = [
       {
@@ -88,7 +90,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       />,
     )
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
     await waitFor(() => {
@@ -106,6 +111,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
                 marks: [],
               },
             ],
+            markDefs: [],
             style: 'normal',
           },
         ])
@@ -141,7 +147,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       />,
     )
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
     await waitFor(() => {
@@ -210,7 +219,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       />,
     )
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
     await waitFor(() => {
@@ -271,7 +283,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       />,
     )
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
     await waitFor(() => {
@@ -297,59 +312,6 @@ describe('when PTE would display warnings, instead it self solves', () => {
     })
   })
 
-  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[]
@@ -364,7 +326,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       />,
     )
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
     await waitFor(() => {
@@ -382,7 +347,10 @@ describe('when PTE would display warnings, instead it self solves', () => {
       }
     })
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
     })
   })

package/src/editor/__tests__/utils.ts

@@ -3,7 +3,10 @@ import {fireEvent, type render} from '@testing-library/react'
 import {parseHotkey} from 'is-hotkey-esm'
 import {act} from 'react'
 
-export async function triggerKeyboardEvent(hotkey: string, element: Element): Promise<void> {
+export async function triggerKeyboardEvent(
+  hotkey: string,
+  element: Element,
+): Promise<void> {
   const eventProps = parseHotkey(hotkey)
   const values = hotkey.split('+')
 
@@ -19,9 +22,13 @@ export async function triggerKeyboardEvent(hotkey: string, element: Element): Pr
   )
 }
 
-export async function getEditableElement(component: ReturnType<typeof render>): Promise<Element> {
+export async function getEditableElement(
+  component: ReturnType<typeof render>,
+): Promise<Element> {
   await act(async () => component)
-  const element = component.container.querySelector('[data-slate-editor="true"]')
+  const element = component.container.querySelector(
+    '[data-slate-editor="true"]',
+  )
   if (!element) {
     throw new Error('Could not find element')
   }

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

@@ -6,10 +6,14 @@ import {
   type PortableTextObject,
   type 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 {
+  ReactEditor,
+  useSelected,
+  useSlateStatic,
+  type RenderElementProps,
+} from 'slate-react'
 import {
   type BlockRenderProps,
   type PortableTextMemberSchemaTypes,
@@ -22,7 +26,11 @@ 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,10 +75,17 @@ 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],
   )
 
@@ -92,12 +107,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 +165,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,
@@ -165,7 +188,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 +231,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 +243,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)`)
@@ -252,7 +292,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
         },
       },