@portabletext/editor 2.13.0 → 2.13.2

package/lib/plugins/index.d.cts

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

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react22 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;
-}): react22.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(): react22.JSX.Element;
+declare function OneLinePlugin(): react21.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.cts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.13.0",
+  "version": "2.13.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -86,9 +86,9 @@
     "slate-react": "0.117.4",
     "xstate": "^5.22.0",
     "@portabletext/block-tools": "^3.5.7",
-    "@portabletext/patches": "^1.1.8",
+    "@portabletext/keyboard-shortcuts": "^1.1.1",
     "@portabletext/schema": "^1.2.0",
-    "@portabletext/keyboard-shortcuts": "^1.1.1"
+    "@portabletext/patches": "^1.1.8"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
@@ -117,8 +117,8 @@
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
     "@portabletext/sanity-bridge": "1.1.11",
-    "racejar": "1.3.0",
-    "@portabletext/test": "^0.0.0"
+    "@portabletext/test": "^0.0.0",
+    "racejar": "1.3.0"
   },
   "peerDependencies": {
     "@portabletext/sanity-bridge": "^1.1.11",

package/src/editor/Editable.tsx

@@ -942,8 +942,28 @@ export const PortableTextEditable = forwardRef<
       } 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],
+    [forwardedRef, slateEditor],
   )
 
   if (!portableTextEditor) {
@@ -987,3 +1007,72 @@ 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
+  }
+
+  let root: Document | ShadowRoot | undefined
+
+  try {
+    root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
+  } catch {}
+
+  if (!root) {
+    // The editor has most likely been unmounted
+    return
+  }
+
+  // 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/editor/components/render-block-object.tsx

@@ -8,6 +8,7 @@ import {
 } from 'slate-react'
 import type {EventPositionBlock} from '../../internal-utils/event-position'
 import type {
+  BlockRenderProps,
   PortableTextMemberSchemaTypes,
   RenderBlockFunction,
 } from '../../types/editor'
@@ -73,7 +74,8 @@ export function RenderBlockObject(props: {
         draggable={!props.readOnly}
       >
         {props.renderBlock && legacySchemaType ? (
-          <props.renderBlock
+          <RenderBlock
+            renderBlock={props.renderBlock}
             editorElementRef={blockObjectRef}
             focused={focused}
             path={[{_key: props.element._key}]}
@@ -83,7 +85,7 @@ export function RenderBlockObject(props: {
             value={blockObject}
           >
             <RenderDefaultBlockObject blockObject={blockObject} />
-          </props.renderBlock>
+          </RenderBlock>
         ) : (
           <RenderDefaultBlockObject blockObject={blockObject} />
         )}
@@ -92,3 +94,28 @@ export function RenderBlockObject(props: {
     </div>
   )
 }
+
+function RenderBlock({
+  renderBlock,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  type,
+  value,
+}: {
+  renderBlock: RenderBlockFunction
+} & BlockRenderProps) {
+  return renderBlock({
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    type,
+    value,
+  })
+}

package/src/editor/components/render-inline-object.tsx

@@ -9,6 +9,7 @@ import {
 } from 'slate-react'
 import {getPointBlock} from '../../internal-utils/slate-utils'
 import type {
+  BlockChildRenderProps,
   PortableTextMemberSchemaTypes,
   RenderChildFunction,
 } from '../../types/editor'
@@ -79,7 +80,8 @@ export function RenderInlineObject(props: {
       {props.children}
       <span ref={inlineObjectRef} style={{display: 'inline-block'}}>
         {props.renderChild && block && legacySchemaType ? (
-          <props.renderChild
+          <RenderChild
+            renderChild={props.renderChild}
             annotations={[]}
             editorElementRef={inlineObjectRef}
             selected={selected}
@@ -90,7 +92,7 @@ export function RenderInlineObject(props: {
             type={legacySchemaType}
           >
             <RenderDefaultInlineObject inlineObject={inlineObject} />
-          </props.renderChild>
+          </RenderChild>
         ) : (
           <RenderDefaultInlineObject inlineObject={inlineObject} />
         )}
@@ -98,3 +100,30 @@ export function RenderInlineObject(props: {
     </span>
   )
 }
+
+function RenderChild({
+  renderChild,
+  annotations,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  value,
+  type,
+}: {
+  renderChild: RenderChildFunction
+} & BlockChildRenderProps) {
+  return renderChild({
+    annotations,
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    value,
+    type,
+  })
+}

package/src/editor/components/render-span.tsx

@@ -9,6 +9,9 @@ import {
   isSelectionCollapsed,
 } from '../../selectors'
 import type {
+  BlockAnnotationRenderProps,
+  BlockChildRenderProps,
+  BlockDecoratorRenderProps,
   EditorSelection,
   RenderAnnotationFunction,
   RenderChildFunction,
@@ -140,7 +143,8 @@ export function RenderSpan(props: RenderSpanProps) {
 
     if (path && legacyDecoratorSchemaType && props.renderDecorator) {
       children = (
-        <props.renderDecorator
+        <RenderDecorator
+          renderDecorator={props.renderDecorator}
           editorElementRef={spanRef}
           focused={focused}
           path={path}
@@ -150,7 +154,7 @@ export function RenderSpan(props: RenderSpanProps) {
           type={legacyDecoratorSchemaType}
         >
           {children}
-        </props.renderDecorator>
+        </RenderDecorator>
       )
     }
   }
@@ -166,7 +170,8 @@ export function RenderSpan(props: RenderSpanProps) {
       if (block && path && props.renderAnnotation) {
         children = (
           <span ref={spanRef}>
-            <props.renderAnnotation
+            <RenderAnnotation
+              renderAnnotation={props.renderAnnotation}
               block={block}
               editorElementRef={spanRef}
               focused={focused}
@@ -177,7 +182,7 @@ export function RenderSpan(props: RenderSpanProps) {
               type={legacyAnnotationSchemaType}
             >
               {children}
-            </props.renderAnnotation>
+            </RenderAnnotation>
           </span>
         )
       } else {
@@ -196,7 +201,8 @@ export function RenderSpan(props: RenderSpanProps) {
 
     if (child) {
       children = (
-        <props.renderChild
+        <RenderChild
+          renderChild={props.renderChild}
           annotations={annotationMarkDefs}
           editorElementRef={spanRef}
           focused={focused}
@@ -207,7 +213,7 @@ export function RenderSpan(props: RenderSpanProps) {
           type={legacySchema.span}
         >
           {children}
-        </props.renderChild>
+        </RenderChild>
       )
     }
   }
@@ -218,3 +224,82 @@ export function RenderSpan(props: RenderSpanProps) {
     </span>
   )
 }
+
+function RenderAnnotation({
+  renderAnnotation,
+  block,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  value,
+  type,
+}: {
+  renderAnnotation: RenderAnnotationFunction
+} & BlockAnnotationRenderProps) {
+  return renderAnnotation({
+    block,
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    value,
+    type,
+  })
+}
+
+function RenderDecorator({
+  renderDecorator,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  value,
+  type,
+}: {
+  renderDecorator: RenderDecoratorFunction
+} & BlockDecoratorRenderProps) {
+  return renderDecorator({
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    value,
+    type,
+  })
+}
+
+function RenderChild({
+  renderChild,
+  annotations,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  value,
+  type,
+}: {
+  renderChild: RenderChildFunction
+} & BlockChildRenderProps) {
+  return renderChild({
+    annotations,
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    value,
+    type,
+  })
+}

package/src/editor/components/render-text-block.tsx

@@ -8,6 +8,9 @@ import {
 } from 'slate-react'
 import type {EventPositionBlock} from '../../internal-utils/event-position'
 import type {
+  BlockListItemRenderProps,
+  BlockRenderProps,
+  BlockStyleRenderProps,
   PortableTextMemberSchemaTypes,
   RenderBlockFunction,
   RenderListItemFunction,
@@ -61,7 +64,8 @@ export function RenderTextBlock(props: {
 
     if (legacyStyleSchemaType) {
       children = (
-        <props.renderStyle
+        <RenderStyle
+          renderStyle={props.renderStyle}
           block={props.textBlock}
           editorElementRef={blockRef}
           focused={focused}
@@ -71,7 +75,7 @@ export function RenderTextBlock(props: {
           value={props.textBlock.style}
         >
           {children}
-        </props.renderStyle>
+        </RenderStyle>
       )
     } else {
       console.error(
@@ -87,7 +91,8 @@ export function RenderTextBlock(props: {
 
     if (legacyListItemSchemaType) {
       children = (
-        <props.renderListItem
+        <RenderListItem
+          renderListItem={props.renderListItem}
           block={props.textBlock}
           editorElementRef={blockRef}
           focused={focused}
@@ -98,7 +103,7 @@ export function RenderTextBlock(props: {
           schemaType={legacyListItemSchemaType}
         >
           {children}
-        </props.renderListItem>
+        </RenderListItem>
       )
     } else {
       console.error(
@@ -152,7 +157,8 @@ export function RenderTextBlock(props: {
       {dragPositionBlock === 'start' ? <DropIndicator /> : null}
       <div ref={blockRef}>
         {props.renderBlock ? (
-          <props.renderBlock
+          <RenderBlock
+            renderBlock={props.renderBlock}
             editorElementRef={blockRef}
             focused={focused}
             level={props.textBlock.level}
@@ -165,7 +171,7 @@ export function RenderTextBlock(props: {
             value={props.textBlock}
           >
             {children}
-          </props.renderBlock>
+          </RenderBlock>
         ) : (
           children
         )}
@@ -174,3 +180,86 @@ export function RenderTextBlock(props: {
     </div>
   )
 }
+
+function RenderBlock({
+  renderBlock,
+  children,
+  editorElementRef,
+  focused,
+  level,
+  listItem,
+  path,
+  selected,
+  style,
+  schemaType,
+  type,
+  value,
+}: {
+  renderBlock: RenderBlockFunction
+} & BlockRenderProps) {
+  return renderBlock({
+    children,
+    editorElementRef,
+    focused,
+    level,
+    listItem,
+    path,
+    selected,
+    style,
+    schemaType,
+    type,
+    value,
+  })
+}
+
+function RenderListItem({
+  renderListItem,
+  block,
+  children,
+  editorElementRef,
+  focused,
+  level,
+  path,
+  schemaType,
+  selected,
+  value,
+}: {
+  renderListItem: RenderListItemFunction
+} & BlockListItemRenderProps) {
+  return renderListItem({
+    block,
+    children,
+    editorElementRef,
+    focused,
+    level,
+    path,
+    schemaType,
+    selected,
+    value,
+  })
+}
+
+function RenderStyle({
+  renderStyle,
+  block,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  value,
+}: {
+  renderStyle: RenderStyleFunction
+} & BlockStyleRenderProps) {
+  return renderStyle({
+    block,
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    value,
+  })
+}