@portabletext/editor 1.0.18 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.18",
+  "version": "1.1.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -50,6 +50,9 @@
     "slate-react": "0.108.0"
   },
   "devDependencies": {
+    "@cucumber/cucumber-expressions": "^17.1.0",
+    "@cucumber/gherkin": "^29.0.0",
+    "@cucumber/messages": "^26.0.0",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@playwright/test": "1.46.1",
@@ -100,6 +103,7 @@
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.12",
+    "ts-node": "^10.9.2",
     "tsx": "^4.17.0",
     "typescript": "5.5.4",
     "vite": "^5.4.2"
@@ -122,14 +126,14 @@
   "scripts": {
     "build": "pkg-utils build --strict --check --clean",
     "check:lint": "eslint .",
-    "check:types": "tsc --project tsconfig.lib.json",
+    "check:types": "tsc",
     "clean": "del .turbo && del lib && del node_modules",
     "dev": "pkg-utils watch",
     "dev:e2e-server": "cd ./e2e-tests/ && tsx serve",
     "lint:fix": "eslint . --fix",
     "test": "jest",
-    "test:e2e": "jest --config=e2e-tests/e2e.config.cjs",
-    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.cjs --watch",
+    "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
+    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch",
     "test:watch": "jest --watch"
   }
 }

package/src/editor/Editable.tsx

@@ -1,41 +1,40 @@
 import {type PortableTextBlock} from '@sanity/types'
 import {isEqual, noop} from 'lodash'
 import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
   type ClipboardEvent,
   type CSSProperties,
   type FocusEventHandler,
   type ForwardedRef,
-  forwardRef,
   type HTMLProps,
   type KeyboardEvent,
   type MutableRefObject,
   type TextareaHTMLAttributes,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
 } from 'react'
 import {
-  type BaseRange,
   Editor,
   Node,
-  type NodeEntry,
-  type Operation,
   Path,
   Range as SlateRange,
-  type Text,
   Transforms,
+  type BaseRange,
+  type NodeEntry,
+  type Operation,
+  type Text,
 } from 'slate'
 import {
-  Editable as SlateEditable,
   ReactEditor,
+  Editable as SlateEditable,
+  useSlate,
   type RenderElementProps,
   type RenderLeafProps,
-  useSlate,
 } from 'slate-react'
-
 import {
   type EditorChange,
   type EditorSelection,
@@ -54,9 +53,17 @@ import {
 import {type HotkeyOptions} from '../types/options'
 import {type SlateTextBlock, type VoidElement} from '../types/slate'
 import {debugWithName} from '../utils/debug'
-import {moveRangeByOperation, toPortableTextRange, toSlateRange} from '../utils/ranges'
+import {
+  moveRangeByOperation,
+  toPortableTextRange,
+  toSlateRange,
+} from '../utils/ranges'
 import {normalizeSelection} from '../utils/selection'
-import {fromSlateValue, isEqualToEmptyEditor, toSlateValue} from '../utils/values'
+import {
+  fromSlateValue,
+  isEqualToEmptyEditor,
+  toSlateValue,
+} from '../utils/values'
 import {Element} from './components/Element'
 import {Leaf} from './components/Leaf'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
@@ -138,12 +145,19 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
   const readOnly = usePortableTextEditorReadOnlyStatus()
   const keyGenerator = usePortableTextEditorKeyGenerator()
   const ref = useRef<HTMLDivElement | null>(null)
-  const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(null)
+  const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(
+    null,
+  )
   const [hasInvalidValue, setHasInvalidValue] = useState(false)
-  const [rangeDecorationState, setRangeDecorationsState] = useState<BaseRangeWithDecoration[]>([])
+  const [rangeDecorationState, setRangeDecorationsState] = useState<
+    BaseRangeWithDecoration[]
+  >([])
 
   // Forward ref to parent component
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   const rangeDecorationsRef = useRef(rangeDecorations)
 
@@ -187,7 +201,15 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         spellCheck={spellCheck}
       />
     ),
-    [schemaTypes, spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle],
+    [
+      schemaTypes,
+      spellCheck,
+      readOnly,
+      renderBlock,
+      renderChild,
+      renderListItem,
+      renderStyle,
+    ],
   )
 
   const renderLeaf = useCallback(
@@ -207,7 +229,11 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
             readOnly={readOnly}
           />
         )
-        if (renderPlaceholder && lProps.leaf.placeholder && lProps.text.text === '') {
+        if (
+          renderPlaceholder &&
+          lProps.leaf.placeholder &&
+          lProps.text.text === ''
+        ) {
           return (
             <>
               <span style={PLACEHOLDER_STYLE} contentEditable={false}>
@@ -225,7 +251,14 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       }
       return lProps.children
     },
-    [readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder, schemaTypes],
+    [
+      readOnly,
+      renderAnnotation,
+      renderChild,
+      renderDecorator,
+      renderPlaceholder,
+      schemaTypes,
+    ],
   )
 
   const restoreSelectionFromProps = useCallback(() => {
@@ -236,7 +269,9 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         fromSlateValue(slateEditor.children, blockTypeName),
       )
       if (normalizedSelection !== null) {
-        debug(`Normalized selection from props ${JSON.stringify(normalizedSelection)}`)
+        debug(
+          `Normalized selection from props ${JSON.stringify(normalizedSelection)}`,
+        )
         const slateRange = toSlateRange(normalizedSelection, slateEditor)
         if (slateRange) {
           Transforms.select(slateEditor, slateRange)
@@ -256,7 +291,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       if (rangeDecorations && rangeDecorations.length > 0) {
         const newSlateRanges: BaseRangeWithDecoration[] = []
         rangeDecorations.forEach((rangeDecorationItem) => {
-          const slateRange = toSlateRange(rangeDecorationItem.selection, slateEditor)
+          const slateRange = toSlateRange(
+            rangeDecorationItem.selection,
+            slateEditor,
+          )
           if (!SlateRange.isRange(slateRange)) {
             if (rangeDecorationItem.onMoved) {
               rangeDecorationItem.onMoved({
@@ -270,9 +308,16 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           let newRange: BaseRange | null | undefined
           if (operation) {
             newRange = moveRangeByOperation(slateRange, operation)
-            if ((newRange && newRange !== slateRange) || (newRange === null && slateRange)) {
+            if (
+              (newRange && newRange !== slateRange) ||
+              (newRange === null && slateRange)
+            ) {
               const value = PortableTextEditor.getValue(portableTextEditor)
-              const newRangeSelection = toPortableTextRange(value, newRange, schemaTypes)
+              const newRangeSelection = toPortableTextRange(
+                value,
+                newRange,
+                schemaTypes,
+              )
               if (rangeDecorationItem.onMoved) {
                 rangeDecorationItem.onMoved({
                   newSelection: newRangeSelection,
@@ -285,7 +330,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           // If the newRange is null, it means that the range is not valid anymore and should be removed
           // If it's undefined, it means that the slateRange is still valid and should be kept
           if (newRange !== null) {
-            newSlateRanges.push({...(newRange || slateRange), rangeDecoration: rangeDecorationItem})
+            newSlateRanges.push({
+              ...(newRange || slateRange),
+              rangeDecoration: rangeDecorationItem,
+            })
           }
         })
         if (newSlateRanges.length > 0) {
@@ -388,7 +436,11 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       }
 
       const value = PortableTextEditor.getValue(portableTextEditor)
-      const ptRange = toPortableTextRange(value, slateEditor.selection, schemaTypes)
+      const ptRange = toPortableTextRange(
+        value,
+        slateEditor.selection,
+        schemaTypes,
+      )
       const path = ptRange?.focus.path || []
       const onPasteResult = onPaste({event, value, path, schemaTypes})
 
@@ -406,10 +458,15 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
               slateEditor.insertData(event.clipboardData)
             } else if (result.insert) {
               slateEditor.insertFragment(
-                toSlateValue(result.insert as PortableTextBlock[], {schemaTypes}),
+                toSlateValue(result.insert as PortableTextBlock[], {
+                  schemaTypes,
+                }),
               )
             } else {
-              console.warn('Your onPaste function returned something unexpected:', result)
+              console.warn(
+                'Your onPaste function returned something unexpected:',
+                result,
+              )
             }
           })
           .catch((error) => {
@@ -465,7 +522,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
             | SlateTextBlock
             | VoidElement
           if (lastBlock && Editor.isVoid(slateEditor, node)) {
-            Transforms.insertNodes(slateEditor, slateEditor.pteCreateEmptyBlock())
+            Transforms.insertNodes(
+              slateEditor,
+              slateEditor.pteCreateTextBlock({decorators: []}),
+            )
             slateEditor.onChange()
           }
         }
@@ -528,7 +588,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
     }
     const existingDOMRange = domSelection.getRangeAt(0)
     try {
-      const newDOMRange = ReactEditor.toDOMRange(slateEditor, slateEditor.selection)
+      const newDOMRange = ReactEditor.toDOMRange(
+        slateEditor,
+        slateEditor.selection,
+      )
       if (
         newDOMRange.startOffset !== existingDOMRange.startOffset ||
         newDOMRange.endOffset !== existingDOMRange.endOffset
@@ -625,12 +688,17 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           if (path.length !== 2) {
             return false
           }
-          return Path.equals(item.focus.path, path) && Path.equals(item.anchor.path, path)
+          return (
+            Path.equals(item.focus.path, path) &&
+            Path.equals(item.anchor.path, path)
+          )
         }
         // Include decorations that either include or intersects with this path
         return (
-          SlateRange.intersection(item, {anchor: {path, offset: 0}, focus: {path, offset: 0}}) ||
-          SlateRange.includes(item, path)
+          SlateRange.intersection(item, {
+            anchor: {path, offset: 0},
+            focus: {path, offset: 0},
+          }) || SlateRange.includes(item, path)
         )
       })
       if (result.length > 0) {
@@ -645,7 +713,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
   // Also set the editable element in a state so that the MutationObserver
   // is setup when this element is ready.
   useEffect(() => {
-    ref.current = ReactEditor.toDOMNode(slateEditor, slateEditor) as HTMLDivElement | null
+    ref.current = ReactEditor.toDOMNode(
+      slateEditor,
+      slateEditor,
+    ) as HTMLDivElement | null
     setEditableElement(ref.current)
   }, [slateEditor, ref])
 

package/src/editor/PortableTextEditor.tsx

@@ -11,7 +11,6 @@ import {
 } from '@sanity/types'
 import {Component, type MutableRefObject, type PropsWithChildren} from 'react'
 import {Subject} from 'rxjs'
-
 import {
   type EditableAPI,
   type EditableAPIDeleteOptions,
@@ -114,7 +113,9 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     }
 
     if (props.incomingPatches$) {
-      console.warn(`The prop 'incomingPatches$' is deprecated and renamed to 'patches$'`)
+      console.warn(
+        `The prop 'incomingPatches$' is deprecated and renamed to 'patches$'`,
+      )
     }
 
     this.change$.next({type: 'loading', isLoading: true})
@@ -192,20 +193,39 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   }
 
   // Static API methods
-  static activeAnnotations = (editor: PortableTextEditor): PortableTextObject[] => {
+  static activeAnnotations = (
+    editor: PortableTextEditor,
+  ): PortableTextObject[] => {
     return editor && editor.editable ? editor.editable.activeAnnotations() : []
   }
   static isAnnotationActive = (
     editor: PortableTextEditor,
     annotationType: PortableTextObject['_type'],
   ): boolean => {
-    return editor && editor.editable ? editor.editable.isAnnotationActive(annotationType) : false
+    return editor && editor.editable
+      ? editor.editable.isAnnotationActive(annotationType)
+      : false
   }
   static addAnnotation = (
     editor: PortableTextEditor,
     type: ObjectSchemaType,
     value?: {[prop: string]: unknown},
-  ): {spanPath: Path; markDefPath: Path} | undefined => editor.editable?.addAnnotation(type, value)
+  ):
+    | {
+        /**
+         * @deprecated An annotation may be applied to multiple blocks, resulting
+         * in multiple `markDef`'s being created. Use `markDefPaths` instead.
+         */
+        markDefPath: Path
+        markDefPaths: Array<Path>
+        /**
+         * @deprecated Does not return anything meaningful since an annotation
+         * can span multiple blocks and spans. If references the span closest
+         * to the focus point of the selection.
+         */
+        spanPath: Path
+      }
+    | undefined => editor.editable?.addAnnotation(type, value)
   static blur = (editor: PortableTextEditor): void => {
     debug('Host blurred')
     editor.editable?.blur()
@@ -232,7 +252,9 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static focusBlock = (editor: PortableTextEditor) => {
     return editor.editable?.focusBlock()
   }
-  static focusChild = (editor: PortableTextEditor): PortableTextChild | undefined => {
+  static focusChild = (
+    editor: PortableTextEditor,
+  ): PortableTextChild | undefined => {
     return editor.editable?.focusChild()
   }
   static getSelection = (editor: PortableTextEditor) => {
@@ -271,7 +293,10 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static insertBreak = (editor: PortableTextEditor): void => {
     return editor.editable?.insertBreak()
   }
-  static isVoid = (editor: PortableTextEditor, element: PortableTextBlock | PortableTextChild) => {
+  static isVoid = (
+    editor: PortableTextEditor,
+    element: PortableTextBlock | PortableTextChild,
+  ) => {
     return editor.editable?.isVoid(element)
   }
   static isObjectPath = (editor: PortableTextEditor, path: Path): boolean => {
@@ -283,13 +308,21 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static marks = (editor: PortableTextEditor) => {
     return editor.editable?.marks()
   }
-  static select = (editor: PortableTextEditor, selection: EditorSelection | null) => {
+  static select = (
+    editor: PortableTextEditor,
+    selection: EditorSelection | null,
+  ) => {
     debug(`Host setting selection`, selection)
     editor.editable?.select(selection)
   }
-  static removeAnnotation = (editor: PortableTextEditor, type: ObjectSchemaType) =>
-    editor.editable?.removeAnnotation(type)
-  static toggleBlockStyle = (editor: PortableTextEditor, blockStyle: string) => {
+  static removeAnnotation = (
+    editor: PortableTextEditor,
+    type: ObjectSchemaType,
+  ) => editor.editable?.removeAnnotation(type)
+  static toggleBlockStyle = (
+    editor: PortableTextEditor,
+    blockStyle: string,
+  ) => {
     debug(`Host is toggling block style`)
     return editor.editable?.toggleBlockStyle(blockStyle)
   }
@@ -300,7 +333,9 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     debug(`Host toggling mark`, mark)
     editor.editable?.toggleMark(mark)
   }
-  static getFragment = (editor: PortableTextEditor): PortableTextBlock[] | undefined => {
+  static getFragment = (
+    editor: PortableTextEditor,
+  ): PortableTextBlock[] | undefined => {
     debug(`Host getting fragment`)
     return editor.editable?.getFragment()
   }

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

@@ -3,7 +3,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 {type EditorSelection} from '../..'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
@@ -102,10 +101,15 @@ describe('initialization', () => {
     )
     const normalizedEditorValue = [{...initialValue[0], style: 'normal'}]
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+      expect(onChange).toHaveBeenCalledWith({
+        type: 'value',
+        value: initialValue,
+      })
     })
     if (editorRef.current) {
-      expect(PortableTextEditor.getValue(editorRef.current)).toStrictEqual(normalizedEditorValue)
+      expect(PortableTextEditor.getValue(editorRef.current)).toStrictEqual(
+        normalizedEditorValue,
+      )
     }
   })
 
@@ -130,7 +134,10 @@ describe('initialization', () => {
 
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -138,7 +145,9 @@ describe('initialization', () => {
     await waitFor(() => {
       if (editorRef.current) {
         PortableTextEditor.focus(editorRef.current)
-        expect(PortableTextEditor.getSelection(editorRef.current)).toStrictEqual(initialSelection)
+        expect(
+          PortableTextEditor.getSelection(editorRef.current),
+        ).toStrictEqual(initialSelection)
       }
     })
   })
@@ -169,7 +178,10 @@ describe('initialization', () => {
 
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -181,7 +193,9 @@ describe('initialization', () => {
 
         // Test for object equality here!
         const anotherSel = PortableTextEditor.getSelection(editorRef.current)
-        expect(PortableTextEditor.getSelection(editorRef.current)).toStrictEqual(initialSelection)
+        expect(
+          PortableTextEditor.getSelection(editorRef.current),
+        ).toStrictEqual(initialSelection)
         expect(sel).toBe(anotherSel)
       }
     })
@@ -196,7 +210,9 @@ describe('initialization', () => {
     )
     waitFor(() => {
       if (editorRef.current) {
-        expect(PortableTextEditor.getSelection(editorRef.current)).toEqual(newSelection)
+        expect(PortableTextEditor.getSelection(editorRef.current)).toEqual(
+          newSelection,
+        )
       }
     })
   })
@@ -225,7 +241,8 @@ describe('initialization', () => {
           value: initialValue,
           resolution: {
             action: 'Unset the value',
-            description: 'Editor value must be an array of Portable Text blocks, or undefined.',
+            description:
+              'Editor value must be an array of Portable Text blocks, or undefined.',
             item: initialValue,
             patches: [
               {
@@ -235,7 +252,10 @@ describe('initialization', () => {
             ],
           },
         })
-        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
         expect(onChange).toHaveBeenCalledWith({type: 'ready'})
       }
     })
@@ -267,7 +287,8 @@ describe('initialization', () => {
         value,
         resolution: {
           action: 'Unset the value',
-          description: 'Editor value must be an array of Portable Text blocks, or undefined.',
+          description:
+            'Editor value must be an array of Portable Text blocks, or undefined.',
           item: value,
           patches: [
             {
@@ -306,7 +327,8 @@ describe('initialization', () => {
           ],
           i18n: {
             action: 'inputs.portable-text.invalid-value.disallowed-type.action',
-            description: 'inputs.portable-text.invalid-value.disallowed-type.description',
+            description:
+              'inputs.portable-text.invalid-value.disallowed-type.description',
             values: {
               key: '123',
               typeName: 'banana',
@@ -351,8 +373,10 @@ describe('initialization', () => {
             description:
               "Child with _key 'def' in block with key 'abc' has missing or invalid text property!",
             i18n: {
-              action: 'inputs.portable-text.invalid-value.invalid-span-text.action',
-              description: 'inputs.portable-text.invalid-value.invalid-span-text.description',
+              action:
+                'inputs.portable-text.invalid-value.invalid-span-text.action',
+              description:
+                'inputs.portable-text.invalid-value.invalid-span-text.description',
               values: {
                 key: 'abc',
                 childKey: 'def',
@@ -394,7 +418,10 @@ describe('initialization', () => {
         })
       }
     })
-    expect(onChange).not.toHaveBeenCalledWith({type: 'value', value: initialValue})
+    expect(onChange).not.toHaveBeenCalledWith({
+      type: 'value',
+      value: initialValue,
+    })
     expect(onChange).toHaveBeenCalledWith({type: 'ready'})
   })
 })