@portabletext/editor 1.54.2 → 1.54.4

package/lib/index.d.cts

@@ -36,7 +36,7 @@ import {
   TextareaHTMLAttributes,
 } from 'react'
 import type {Observable, Subject} from 'rxjs'
-import {Descendant} from 'slate'
+import {BaseRange, Descendant} from 'slate'
 import type {Operation} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
@@ -616,6 +616,10 @@ declare type CustomBehaviorEventType<
   TType extends string = '',
 > = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
 
+declare type DecoratedRange = BaseRange & {
+  rangeDecoration: RangeDecoration
+}
+
 /**
  * @public
  * A helper wrapper that adds editor support, such as autocomplete and type checking, for a schema definition.
@@ -3243,7 +3247,10 @@ declare type ExternalEditorEvent =
 declare type ExtractNamespace<TType extends string> =
   TType extends `${infer Namespace}.${string}` ? Namespace : TType
 
-declare type FieldDefinition = {
+/**
+ * @public
+ */
+export declare type FieldDefinition = {
   name: string
   type: 'string' | 'number' | 'boolean' | 'array' | 'object'
 }
@@ -4133,6 +4140,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
   value: Array<PortableTextBlock>
+  decoratedRanges: Array<DecoratedRange>
   decoratorState: Record<string, boolean | undefined>
   markState: MarkState | undefined
   /**

package/lib/index.d.ts

@@ -36,7 +36,7 @@ import {
   TextareaHTMLAttributes,
 } from 'react'
 import type {Observable, Subject} from 'rxjs'
-import {Descendant} from 'slate'
+import {BaseRange, Descendant} from 'slate'
 import type {Operation} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
@@ -616,6 +616,10 @@ declare type CustomBehaviorEventType<
   TType extends string = '',
 > = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
 
+declare type DecoratedRange = BaseRange & {
+  rangeDecoration: RangeDecoration
+}
+
 /**
  * @public
  * A helper wrapper that adds editor support, such as autocomplete and type checking, for a schema definition.
@@ -3243,7 +3247,10 @@ declare type ExternalEditorEvent =
 declare type ExtractNamespace<TType extends string> =
   TType extends `${infer Namespace}.${string}` ? Namespace : TType
 
-declare type FieldDefinition = {
+/**
+ * @public
+ */
+export declare type FieldDefinition = {
   name: string
   type: 'string' | 'number' | 'boolean' | 'array' | 'object'
 }
@@ -4133,6 +4140,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
   value: Array<PortableTextBlock>
+  decoratedRanges: Array<DecoratedRange>
   decoratorState: Record<string, boolean | undefined>
   markState: MarkState | undefined
   /**

package/lib/index.js

@@ -4685,13 +4685,10 @@ function createWithPlaceholderBlock(editorActor) {
         return;
       }
       if (op.type === "remove_node") {
-        const node = op.node;
-        if (op.path[0] === 0 && Editor.isVoid(editor, node)) {
-          const nextPath = Path.next(op.path);
-          editor.children[nextPath[0]] || (debug$b("Adding placeholder block"), Editor.insertNode(editor, editor.pteCreateTextBlock({
-            decorators: []
-          })));
-        }
+        const blockIndex = op.path.at(0), isLonelyBlock = op.path.length === 1 && blockIndex === 0 && editor.children.length === 1, isBlockObject = op.node._type !== editorActor.getSnapshot().context.schema.block.name;
+        isLonelyBlock && isBlockObject && (debug$b("Adding placeholder block"), Editor.insertNode(editor, editor.pteCreateTextBlock({
+          decorators: []
+        })));
       }
       apply2(op);
     }, editor;
@@ -5218,7 +5215,7 @@ function createSlateEditor(config) {
     relayActor: config.relayActor,
     subscriptions: config.subscriptions
   });
-  KEY_TO_VALUE_ELEMENT.set(instance, {}), KEY_TO_SLATE_ELEMENT.set(instance, {}), instance.decoratorState = {}, instance.markState = void 0, instance.value = [createPlaceholderBlock(config.editorActor.getSnapshot().context)];
+  KEY_TO_VALUE_ELEMENT.set(instance, {}), KEY_TO_SLATE_ELEMENT.set(instance, {}), instance.decoratedRanges = [], instance.decoratorState = {}, instance.markState = void 0, instance.value = [createPlaceholderBlock(config.editorActor.getSnapshot().context)];
   const initialValue = toSlateValue(instance.value, {
     schemaTypes: config.editorActor.getSnapshot().context.schema
   });
@@ -10570,111 +10567,107 @@ const slateOperationCallback = ({
         event
       }) => event.type !== "range decorations updated" ? context.pendingRangeDecorations : event.rangeDecorations
     }),
-    "set up initial range decorations": assign({
-      decoratedRanges: ({
-        context
-      }) => {
-        const rangeDecorationState = [];
-        for (const rangeDecoration of context.pendingRangeDecorations) {
-          const slateRange = toSlateRange(rangeDecoration.selection, context.slateEditor);
-          if (!Range.isRange(slateRange)) {
-            rangeDecoration.onMoved?.({
-              newSelection: null,
-              rangeDecoration,
-              origin: "local"
-            });
-            continue;
-          }
-          rangeDecorationState.push({
+    "set up initial range decorations": ({
+      context
+    }) => {
+      const rangeDecorationState = [];
+      for (const rangeDecoration of context.pendingRangeDecorations) {
+        const slateRange = toSlateRange(rangeDecoration.selection, context.slateEditor);
+        if (!Range.isRange(slateRange)) {
+          rangeDecoration.onMoved?.({
+            newSelection: null,
             rangeDecoration,
-            ...slateRange
+            origin: "local"
           });
+          continue;
         }
-        return rangeDecorationState;
+        rangeDecorationState.push({
+          rangeDecoration,
+          ...slateRange
+        });
       }
-    }),
-    "update range decorations": assign({
-      decoratedRanges: ({
-        context,
-        event
-      }) => {
-        if (event.type !== "range decorations updated")
-          return context.decoratedRanges;
-        const rangeDecorationState = [];
-        for (const rangeDecoration of event.rangeDecorations) {
-          const slateRange = toSlateRange(rangeDecoration.selection, context.slateEditor);
-          if (!Range.isRange(slateRange)) {
-            rangeDecoration.onMoved?.({
-              newSelection: null,
-              rangeDecoration,
-              origin: "local"
-            });
-            continue;
-          }
-          rangeDecorationState.push({
+      context.slateEditor.decoratedRanges = rangeDecorationState;
+    },
+    "update range decorations": ({
+      context,
+      event
+    }) => {
+      if (event.type !== "range decorations updated")
+        return;
+      const rangeDecorationState = [];
+      for (const rangeDecoration of event.rangeDecorations) {
+        const slateRange = toSlateRange(rangeDecoration.selection, context.slateEditor);
+        if (!Range.isRange(slateRange)) {
+          rangeDecoration.onMoved?.({
+            newSelection: null,
             rangeDecoration,
-            ...slateRange
+            origin: "local"
           });
+          continue;
         }
-        return rangeDecorationState;
+        rangeDecorationState.push({
+          rangeDecoration,
+          ...slateRange
+        });
       }
-    }),
-    "move range decorations": assign({
-      decoratedRanges: ({
-        context,
-        event
-      }) => {
-        if (event.type !== "slate operation")
-          return context.decoratedRanges;
-        const rangeDecorationState = [];
-        for (const decoratedRange of context.decoratedRanges) {
-          const slateRange = toSlateRange(decoratedRange.rangeDecoration.selection, context.slateEditor);
-          if (!Range.isRange(slateRange)) {
-            decoratedRange.rangeDecoration.onMoved?.({
-              newSelection: null,
-              rangeDecoration: decoratedRange.rangeDecoration,
-              origin: "local"
-            });
-            continue;
-          }
-          let newRange;
-          if (newRange = moveRangeByOperation(slateRange, event.operation), newRange && newRange !== slateRange || newRange === null && slateRange) {
-            const newRangeSelection = newRange ? slateRangeToSelection({
+      context.slateEditor.decoratedRanges = rangeDecorationState;
+    },
+    "move range decorations": ({
+      context,
+      event
+    }) => {
+      if (event.type !== "slate operation")
+        return;
+      const rangeDecorationState = [];
+      for (const decoratedRange of context.slateEditor.decoratedRanges) {
+        const slateRange = toSlateRange(decoratedRange.rangeDecoration.selection, context.slateEditor);
+        if (!Range.isRange(slateRange)) {
+          decoratedRange.rangeDecoration.onMoved?.({
+            newSelection: null,
+            rangeDecoration: decoratedRange.rangeDecoration,
+            origin: "local"
+          });
+          continue;
+        }
+        let newRange;
+        if (newRange = moveRangeByOperation(slateRange, event.operation), newRange && newRange !== slateRange || newRange === null && slateRange) {
+          const newRangeSelection = newRange ? slateRangeToSelection({
+            schema: context.schema,
+            editor: context.slateEditor,
+            range: newRange
+          }) : null;
+          decoratedRange.rangeDecoration.onMoved?.({
+            newSelection: newRangeSelection,
+            rangeDecoration: decoratedRange.rangeDecoration,
+            origin: "local"
+          });
+        }
+        newRange !== null && rangeDecorationState.push({
+          ...newRange || slateRange,
+          rangeDecoration: {
+            ...decoratedRange.rangeDecoration,
+            selection: slateRangeToSelection({
               schema: context.schema,
               editor: context.slateEditor,
               range: newRange
-            }) : null;
-            decoratedRange.rangeDecoration.onMoved?.({
-              newSelection: newRangeSelection,
-              rangeDecoration: decoratedRange.rangeDecoration,
-              origin: "local"
-            });
+            })
           }
-          newRange !== null && rangeDecorationState.push({
-            ...newRange || slateRange,
-            rangeDecoration: {
-              ...decoratedRange.rangeDecoration,
-              selection: slateRangeToSelection({
-                schema: context.schema,
-                editor: context.slateEditor,
-                range: newRange
-              })
-            }
-          });
-        }
-        return rangeDecorationState;
+        });
       }
-    }),
+      context.slateEditor.decoratedRanges = rangeDecorationState;
+    },
     "assign readOnly": assign({
       readOnly: ({
         context,
         event
       }) => event.type !== "update read only" ? context.readOnly : event.readOnly
     }),
-    "increment update count": assign({
-      updateCount: ({
+    "update decorate": assign({
+      decorate: ({
         context
-      }) => context.updateCount + 1
+      }) => ({
+        fn: createDecorate(context.schema, context.slateEditor)
+      })
     })
   },
   actors: {
@@ -10686,14 +10679,14 @@ const slateOperationCallback = ({
     }) => context.pendingRangeDecorations.length > 0,
     "has range decorations": ({
       context
-    }) => context.decoratedRanges.length > 0,
+    }) => context.slateEditor.decoratedRanges.length > 0,
     "has different decorations": ({
       context,
       event
     }) => {
       if (event.type !== "range decorations updated")
         return !1;
-      const existingRangeDecorations = context.decoratedRanges.map((decoratedRange) => ({
+      const existingRangeDecorations = context.slateEditor.decoratedRanges.map((decoratedRange) => ({
         anchor: decoratedRange.rangeDecoration.selection?.anchor,
         focus: decoratedRange.rangeDecoration.selection?.focus
       })), newRangeDecorations = event.rangeDecorations.map((rangeDecoration) => ({
@@ -10720,7 +10713,9 @@ const slateOperationCallback = ({
     skipSetup: input.skipSetup,
     schema: input.schema,
     slateEditor: input.slateEditor,
-    updateCount: 0
+    decorate: {
+      fn: createDecorate(input.schema, input.slateEditor)
+    }
   }),
   invoke: {
     src: "slate operation listener",
@@ -10741,7 +10736,7 @@ const slateOperationCallback = ({
       always: [{
         guard: and(["should skip setup", "has pending range decorations"]),
         target: "ready",
-        actions: ["set up initial range decorations", "increment update count"]
+        actions: ["set up initial range decorations", "update decorate"]
       }, {
         guard: "should skip setup",
         target: "ready"
@@ -10753,7 +10748,7 @@ const slateOperationCallback = ({
         ready: [{
           target: "ready",
           guard: "has pending range decorations",
-          actions: ["set up initial range decorations", "increment update count"]
+          actions: ["set up initial range decorations", "update decorate"]
         }, {
           target: "ready"
         }]
@@ -10765,7 +10760,7 @@ const slateOperationCallback = ({
         "range decorations updated": {
           target: ".idle",
           guard: "has different decorations",
-          actions: ["update range decorations", "increment update count"]
+          actions: ["update range decorations", "update decorate"]
         }
       },
       states: {
@@ -10787,9 +10782,9 @@ const slateOperationCallback = ({
     }
   }
 });
-function createDecorate(rangeDecorationActor) {
+function createDecorate(schema, slateEditor) {
   return function([node, path]) {
-    if (isEqualToEmptyEditor(rangeDecorationActor.getSnapshot().context.slateEditor.children, rangeDecorationActor.getSnapshot().context.schema))
+    if (isEqualToEmptyEditor(slateEditor.children, schema))
       return [{
         anchor: {
           path: [0, 0],
@@ -10806,7 +10801,7 @@ function createDecorate(rangeDecorationActor) {
     if (!Element$1.isElement(node) || node.children.length === 0)
       return [];
     const blockIndex = path.at(0);
-    return blockIndex === void 0 ? [] : rangeDecorationActor.getSnapshot().context.decoratedRanges.filter((decoratedRange) => Range.isCollapsed(decoratedRange) ? node.children.some((_, childIndex) => Path.equals(decoratedRange.anchor.path, [blockIndex, childIndex]) && Path.equals(decoratedRange.focus.path, [blockIndex, childIndex])) : Range.intersection(decoratedRange, {
+    return blockIndex === void 0 ? [] : slateEditor.decoratedRanges.filter((decoratedRange) => Range.isCollapsed(decoratedRange) ? node.children.some((_, childIndex) => Path.equals(decoratedRange.anchor.path, [blockIndex, childIndex]) && Path.equals(decoratedRange.focus.path, [blockIndex, childIndex])) : Range.intersection(decoratedRange, {
       anchor: {
         path,
         offset: 0
@@ -10861,9 +10856,7 @@ const debug = debugWithName("component:Editable"), PortableTextEditable = forwar
         setup: "setting up"
       })
     }
-  });
-  useSelector(rangeDecorationsActor, (s_0) => s_0.context.updateCount);
-  const decorate = useMemo(() => createDecorate(rangeDecorationsActor), [rangeDecorationsActor]);
+  }), decorate = useSelector(rangeDecorationsActor, (s_0) => s_0.context.decorate?.fn);
   useEffect(() => {
     rangeDecorationsActor.send({
       type: "update read only",