@portabletext/editor 2.4.3 → 2.6.0

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react12 from "react";
+import * as react22 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.JSX.Element;
+}): react22.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(): react12.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types9 from "@sanity/types";
+import * as _sanity_types8 from "@sanity/types";
 import { KeyedSegment, PortableTextBlock, PortableTextChild, PortableTextSpan, PortableTextTextBlock } from "@sanity/types";
 /**
  * @public
@@ -150,7 +150,7 @@ declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>;
   targetBlock: PortableTextTextBlock;
   incomingBlock: PortableTextTextBlock;
-}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.4.3",
+  "version": "2.6.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -67,7 +67,7 @@
     "src"
   ],
   "dependencies": {
-    "@portabletext/to-html": "^2.0.16",
+    "@portabletext/to-html": "^3.0.0",
     "@xstate/react": "^6.0.0",
     "debug": "^4.4.1",
     "get-random-values-esm": "^1.0.2",
@@ -79,10 +79,10 @@
     "slate-dom": "^0.117.4",
     "slate-react": "0.117.4",
     "xstate": "^5.20.2",
-    "@portabletext/block-tools": "^3.3.1",
+    "@portabletext/block-tools": "^3.3.2",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/patches": "^1.1.7",
-    "@portabletext/schema": "^1.0.1"
+    "@portabletext/patches": "^1.1.8",
+    "@portabletext/schema": "^1.1.0"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
@@ -111,15 +111,15 @@
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "@portabletext/sanity-bridge": "1.1.3",
+    "@portabletext/sanity-bridge": "1.1.4",
     "racejar": "1.2.14"
   },
   "peerDependencies": {
+    "@portabletext/sanity-bridge": "^1.1.4",
     "@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/internal-utils/parse-blocks.test.ts

@@ -280,6 +280,95 @@ describe(parseBlock.name, () => {
         style: 'normal',
       })
     })
+
+    describe('validating custom fields', () => {
+      test('none defined', () => {
+        expect(
+          parseBlock({
+            block: {_type: 'block', map: {}},
+            context: {
+              keyGenerator: createTestKeyGenerator(),
+              schema: compileSchema(defineSchema({})),
+            },
+            options: {refreshKeys: false, validateFields: true},
+          }),
+        ).toEqual({
+          _type: 'block',
+          _key: 'k0',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              text: '',
+              marks: [],
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        })
+      })
+
+      test('field defined', () => {
+        expect(
+          parseBlock({
+            block: {_type: 'block', map: {}},
+            context: {
+              keyGenerator: createTestKeyGenerator(),
+              schema: compileSchema(
+                defineSchema({
+                  block: {fields: [{name: 'map', type: 'object'}]},
+                }),
+              ),
+            },
+            options: {refreshKeys: false, validateFields: true},
+          }),
+        ).toEqual({
+          _type: 'block',
+          _key: 'k0',
+          map: {},
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              text: '',
+              marks: [],
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        })
+      })
+
+      test('different field defined', () => {
+        expect(
+          parseBlock({
+            block: {_type: 'block', foo: {}},
+            context: {
+              keyGenerator: createTestKeyGenerator(),
+              schema: compileSchema(
+                defineSchema({
+                  block: {fields: [{name: 'map', type: 'object'}]},
+                }),
+              ),
+            },
+            options: {refreshKeys: false, validateFields: true},
+          }),
+        ).toEqual({
+          _type: 'block',
+          _key: 'k0',
+          children: [
+            {
+              _key: 'k1',
+              _type: 'span',
+              text: '',
+              marks: [],
+            },
+          ],
+          markDefs: [],
+          style: 'normal',
+        })
+      })
+    })
   })
 })
 

package/src/internal-utils/parse-blocks.ts

@@ -129,14 +129,22 @@ export function parseTextBlock({
 
   for (const key of Object.keys(block)) {
     if (
-      key !== '_type' &&
-      key !== '_key' &&
-      key !== 'children' &&
-      key !== 'markDefs' &&
-      key !== 'style' &&
-      key !== 'listItem' &&
-      key !== 'level'
+      key === '_type' ||
+      key === '_key' ||
+      key === 'children' ||
+      key === 'markDefs' ||
+      key === 'style' ||
+      key === 'listItem' ||
+      key === 'level'
     ) {
+      continue
+    }
+
+    if (options.validateFields) {
+      if (context.schema.block.fields?.some((field) => field.name === key)) {
+        customFields[key] = block[key]
+      }
+    } else {
       customFields[key] = block[key]
     }
   }
@@ -219,7 +227,7 @@ export function parseTextBlock({
             },
           ],
     markDefs,
-    ...(options.validateFields ? {} : customFields),
+    ...customFields,
   }
 
   if (