@portabletext/editor 2.4.2 → 2.5.0

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react11 from "react";
+import * as react21 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react11.JSX.Element;
+}): react21.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react11.JSX.Element;
+declare function OneLinePlugin(): react21.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -67,7 +67,7 @@
     "src"
   ],
   "dependencies": {
-    "@portabletext/to-html": "^2.0.15",
+    "@portabletext/to-html": "^3.0.0",
     "@xstate/react": "^6.0.0",
     "debug": "^4.4.1",
     "get-random-values-esm": "^1.0.2",
@@ -80,9 +80,9 @@
     "slate-react": "0.117.4",
     "xstate": "^5.20.2",
     "@portabletext/block-tools": "^3.3.1",
-    "@portabletext/patches": "^1.1.7",
-    "@portabletext/schema": "^1.0.1",
-    "@portabletext/keyboard-shortcuts": "^1.1.1"
+    "@portabletext/patches": "^1.1.8",
+    "@portabletext/keyboard-shortcuts": "^1.1.1",
+    "@portabletext/schema": "^1.0.1"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
@@ -93,7 +93,7 @@
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.20",
     "@types/lodash.startcase": "^4.4.9",
-    "@types/react": "^19.1.9",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@typescript-eslint/parser": "^8.39.1",
@@ -108,18 +108,18 @@
     "react-dom": "^19.1.1",
     "rxjs": "^7.8.2",
     "typescript": "5.9.2",
-    "vite": "^7.0.6",
+    "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
     "@portabletext/sanity-bridge": "1.1.3",
     "racejar": "1.2.14"
   },
   "peerDependencies": {
+    "@portabletext/sanity-bridge": "^1.0.0",
     "@sanity/schema": "^4.5.0",
     "@sanity/types": "^4.5.0",
     "react": "^18.3 || ^19",
-    "rxjs": "^7.8.2",
-    "@portabletext/sanity-bridge": "^1.1.3"
+    "rxjs": "^7.8.2"
   },
   "engines": {
     "node": ">=20.19 <22 || >=22.12"

package/src/editor/Editable.tsx

@@ -5,14 +5,11 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useImperativeHandle,
   useMemo,
-  useRef,
   useState,
   type ClipboardEvent,
   type FocusEventHandler,
   type KeyboardEvent,
-  type MutableRefObject,
   type TextareaHTMLAttributes,
 } from 'react'
 import {Editor, Transforms, type Text} from 'slate'
@@ -68,7 +65,6 @@ export type PortableTextEditableProps = Omit<
   onBeforeInput?: (event: InputEvent) => void
   onPaste?: OnPasteFn
   onCopy?: OnCopyFn
-  ref: MutableRefObject<HTMLDivElement | null>
   rangeDecorations?: RangeDecoration[]
   renderAnnotation?: RenderAnnotationFunction
   renderBlock?: RenderBlockFunction
@@ -137,18 +133,8 @@ export const PortableTextEditable = forwardRef<
   } = props
 
   const portableTextEditor = usePortableTextEditor()
-  const ref = useRef<HTMLDivElement | null>(null)
-  const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(
-    null,
-  )
   const [hasInvalidValue, setHasInvalidValue] = useState(false)
 
-  // Forward ref to parent component
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
   const editorActor = useContext(EditorActorContext)
   const relayActor = useContext(RelayActorContext)
   const readOnly = useSelector(editorActor, (s) =>
@@ -605,84 +591,6 @@ export const PortableTextEditable = forwardRef<
     [onBeforeInput],
   )
 
-  // This function will handle unexpected DOM changes inside the Editable rendering,
-  // and make sure that we can maintain a stable slateEditor.selection when that happens.
-  //
-  // For example, if this Editable is rendered inside something that might re-render
-  // this component (hidden contexts) while the user is still actively changing the
-  // contentEditable, this could interfere with the intermediate DOM selection,
-  // which again could be picked up by ReactEditor's event listeners.
-  // If that range is invalid at that point, the slate.editorSelection could be
-  // set either wrong, or invalid, to which slateEditor will throw exceptions
-  // that are impossible to recover properly from or result in a wrong selection.
-  //
-  // Also the other way around, when the ReactEditor will try to create a DOM Range
-  // from the current slateEditor.selection, it may throw unrecoverable errors
-  // if the current editor.selection is invalid according to the DOM.
-  // If this is the case, default to selecting the top of the document, if the
-  // user already had a selection.
-  const validateSelection = useCallback(() => {
-    if (!slateEditor.selection) {
-      return
-    }
-    const root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
-    const {activeElement} = root
-    // Return if the editor isn't the active element
-    if (ref.current !== activeElement) {
-      return
-    }
-    const window = ReactEditor.getWindow(slateEditor)
-    const domSelection = window.getSelection()
-    if (!domSelection || domSelection.rangeCount === 0) {
-      return
-    }
-    const existingDOMRange = domSelection.getRangeAt(0)
-    try {
-      const newDOMRange = ReactEditor.toDOMRange(
-        slateEditor,
-        slateEditor.selection,
-      )
-      if (
-        newDOMRange.startOffset !== existingDOMRange.startOffset ||
-        newDOMRange.endOffset !== existingDOMRange.endOffset
-      ) {
-        debug('DOM range out of sync, validating selection')
-        // Remove all ranges temporary
-        domSelection?.removeAllRanges()
-        // Set the correct range
-        domSelection.addRange(newDOMRange)
-      }
-    } catch {
-      debug(`Could not resolve selection, selecting top document`)
-      // Deselect the editor
-      Transforms.deselect(slateEditor)
-      // Select top document if there is a top block to select
-      if (slateEditor.children.length > 0) {
-        Transforms.select(slateEditor, [0, 0])
-      }
-      slateEditor.onChange()
-    }
-  }, [ref, slateEditor])
-
-  // Observe mutations (child list and subtree) to this component's DOM,
-  // and make sure the editor selection is valid when that happens.
-  useEffect(() => {
-    if (editableElement) {
-      const mutationObserver = new MutationObserver(validateSelection)
-      mutationObserver.observe(editableElement, {
-        attributeOldValue: false,
-        attributes: false,
-        characterData: false,
-        childList: true,
-        subtree: true,
-      })
-      return () => {
-        mutationObserver.disconnect()
-      }
-    }
-    return undefined
-  }, [validateSelection, editableElement])
-
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       if (props.onKeyDown) {
@@ -755,17 +663,6 @@ export const PortableTextEditable = forwardRef<
     }
   }, [portableTextEditor, scrollSelectionIntoView])
 
-  // Set the forwarded ref to be the Slate editable DOM element
-  // 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
-    setEditableElement(ref.current)
-  }, [slateEditor, ref])
-
   useEffect(() => {
     const window = ReactEditor.getWindow(slateEditor)
 
@@ -1037,6 +934,37 @@ export const PortableTextEditable = forwardRef<
     [onDragLeave, editorActor, slateEditor],
   )
 
+  const callbackRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(node)
+      } else if (forwardedRef) {
+        forwardedRef.current = node
+      }
+
+      if (node) {
+        // Observe mutations (child list and subtree) to this component's DOM,
+        // and make sure the editor selection is valid when that happens.
+        const mutationObserver = new MutationObserver(() => {
+          validateSelection(slateEditor, node)
+        })
+
+        mutationObserver.observe(node, {
+          attributeOldValue: false,
+          attributes: false,
+          characterData: false,
+          childList: true,
+          subtree: true,
+        })
+
+        return () => {
+          mutationObserver.disconnect()
+        }
+      }
+    },
+    [forwardedRef, slateEditor],
+  )
+
   if (!portableTextEditor) {
     return null
   }
@@ -1044,6 +972,7 @@ export const PortableTextEditable = forwardRef<
   return hasInvalidValue ? null : (
     <SlateEditable
       {...restProps}
+      ref={callbackRef}
       data-read-only={readOnly}
       autoFocus={false}
       className={restProps.className || 'pt-editable'}
@@ -1077,3 +1006,61 @@ export const PortableTextEditable = forwardRef<
 })
 
 PortableTextEditable.displayName = 'ForwardRef(PortableTextEditable)'
+
+// This function will handle unexpected DOM changes inside the Editable rendering,
+// and make sure that we can maintain a stable slateEditor.selection when that happens.
+//
+// For example, if this Editable is rendered inside something that might re-render
+// this component (hidden contexts) while the user is still actively changing the
+// contentEditable, this could interfere with the intermediate DOM selection,
+// which again could be picked up by ReactEditor's event listeners.
+// If that range is invalid at that point, the slate.editorSelection could be
+// set either wrong, or invalid, to which slateEditor will throw exceptions
+// that are impossible to recover properly from or result in a wrong selection.
+//
+// Also the other way around, when the ReactEditor will try to create a DOM Range
+// from the current slateEditor.selection, it may throw unrecoverable errors
+// if the current editor.selection is invalid according to the DOM.
+// If this is the case, default to selecting the top of the document, if the
+// user already had a selection.
+function validateSelection(slateEditor: Editor, activeElement: HTMLDivElement) {
+  if (!slateEditor.selection) {
+    return
+  }
+  const root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
+  // Return if the editor isn't the active element
+  if (activeElement !== root.activeElement) {
+    return
+  }
+  const window = ReactEditor.getWindow(slateEditor)
+  const domSelection = window.getSelection()
+  if (!domSelection || domSelection.rangeCount === 0) {
+    return
+  }
+  const existingDOMRange = domSelection.getRangeAt(0)
+  try {
+    const newDOMRange = ReactEditor.toDOMRange(
+      slateEditor,
+      slateEditor.selection,
+    )
+    if (
+      newDOMRange.startOffset !== existingDOMRange.startOffset ||
+      newDOMRange.endOffset !== existingDOMRange.endOffset
+    ) {
+      debug('DOM range out of sync, validating selection')
+      // Remove all ranges temporary
+      domSelection?.removeAllRanges()
+      // Set the correct range
+      domSelection.addRange(newDOMRange)
+    }
+  } catch {
+    debug(`Could not resolve selection, selecting top document`)
+    // Deselect the editor
+    Transforms.deselect(slateEditor)
+    // Select top document if there is a top block to select
+    if (slateEditor.children.length > 0) {
+      Transforms.select(slateEditor, [0, 0])
+    }
+    slateEditor.onChange()
+  }
+}

package/src/selectors/selector.is-overlapping-selection.test.ts

@@ -1,4 +1,5 @@
 import {describe, expect, test} from 'vitest'
+import {defaultKeyGenerator} from '../editor/key-generator'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import type {EditorSelection} from '../types/editor'
 import {isOverlappingSelection} from './selector.is-overlapping-selection'
@@ -168,4 +169,20 @@ describe(isOverlappingSelection.name, () => {
       ),
     ).toBe(false)
   })
+
+  test('unknown block', () => {
+    const unknownBlockKey = defaultKeyGenerator()
+
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: unknownBlockKey}], offset: 0},
+        focus: {path: [{_key: unknownBlockKey}], offset: 0},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k0'}], offset: 0},
+          focus: {path: [{_key: 'k0'}], offset: 0},
+        }),
+      ),
+    ).toBe(false)
+  })
 })

package/src/selectors/selector.is-overlapping-selection.ts

@@ -112,6 +112,19 @@ export function isOverlappingSelection(
       originalSelectionEndPoint,
     )
 
+    // If all checks fail then we can deduce that the selection does not exist
+    // and there doesn't overlap with the snapshot selection
+    if (
+      !endPointEqualToOriginalStartPoint &&
+      !startPointEqualToOriginalEndPoint &&
+      !originalStartPointBeforeStartPoint &&
+      !originalStartPointAfterStartPoint &&
+      !originalEndPointBeforeEndPoint &&
+      !originalEndPointAfterEndPoint
+    ) {
+      return false
+    }
+
     if (endPointBeforeSelection && !endPointEqualToOriginalStartPoint) {
       return false
     }