@portabletext/editor 1.50.3 → 1.50.4

package/lib/index.d.cts

@@ -3233,6 +3233,7 @@ export declare class PortableTextEditor extends Component<
   private editor
   private editable
   private actors?
+  private subscriptions
   private unsubscribers
   constructor(props: PortableTextEditorProps)
   componentDidMount(): void
@@ -3741,6 +3742,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/index.d.ts

@@ -3233,6 +3233,7 @@ export declare class PortableTextEditor extends Component<
   private editor
   private editable
   private actors?
+  private subscriptions
   private unsubscribers
   constructor(props: PortableTextEditorProps)
   componentDidMount(): void
@@ -3741,6 +3742,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/index.js

@@ -9,7 +9,7 @@ import { Element as Element$1, Text, Range, Editor, Node, Point, Transforms, Pat
 import { useSlateStatic, useSelected, withReact, ReactEditor, Slate, useSlate, Editable } from "slate-react";
 import debug$i from "debug";
 import { getBlockEndPoint, isEmptyTextBlock, isEqualSelectionPoints } from "./_chunks-es/util.is-equal-selection-points.js";
-import { getBlockStartPoint, isKeyedSegment as isKeyedSegment$1, parseInlineObject, parseTextBlock, parseBlockObject, parseBlock, sliceBlocks, isTextBlock, parseAnnotation, blockOffsetToSpanSelectionPoint, isSpan$1 as isSpan, isListBlock, getTextBlockText, parseBlocks } from "./_chunks-es/util.slice-blocks.js";
+import { getBlockStartPoint, isKeyedSegment as isKeyedSegment$1, parseInlineObject, parseTextBlock, parseBlockObject, parseBlock, sliceBlocks, isTextBlock, parseAnnotation, blockOffsetToSpanSelectionPoint, isSpan$1 as isSpan, isListBlock, isTypedObject, getTextBlockText, parseBlocks } from "./_chunks-es/util.slice-blocks.js";
 import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock as getSelectionStartBlock$1, getSelectionEndBlock as getSelectionEndBlock$1, getFocusBlock as getFocusBlock$1, getFocusBlockObject, getPreviousBlock, getNextBlock, getFirstBlock as getFirstBlock$1, getLastBlock as getLastBlock$1, getFocusListBlock } from "./_chunks-es/selector.is-selection-expanded.js";
 import { getFocusInlineObject, isOverlappingSelection, isSelectingEntireBlocks, getTrimmedSelection, getCaretWordSelection, isAtTheEndOfBlock, isAtTheStartOfBlock, isActiveAnnotation, isActiveDecorator, getSelectedTextBlocks, isActiveListItem, isActiveStyle, getActiveAnnotations } from "./_chunks-es/selector.is-selecting-entire-blocks.js";
 import { DOMEditor, isDOMNode } from "slate-dom";
@@ -31,6 +31,7 @@ import { applyAll, unset, insert, set, setIfMissing, diffMatchPatch as diffMatch
 import get from "lodash/get.js";
 import isUndefined from "lodash/isUndefined.js";
 import omitBy from "lodash/omitBy.js";
+import { createDraft, finishDraft } from "immer";
 import startCase from "lodash.startcase";
 import isPlainObject from "lodash/isPlainObject.js";
 function EditorEventListener(props) {
@@ -1376,6 +1377,20 @@ function compileType(rawType) {
     types: [rawType]
   }).get(rawType.name);
 }
+function createPlaceholderBlock(context) {
+  return {
+    _type: context.schema.block.name,
+    _key: context.keyGenerator(),
+    style: context.schema.styles[0].name ?? "normal",
+    markDefs: [],
+    children: [{
+      _type: context.schema.span.name,
+      _key: context.keyGenerator(),
+      text: "",
+      marks: []
+    }]
+  };
+}
 const insertTextOperationImplementation = ({
   operation
 }) => {
@@ -4744,6 +4759,289 @@ function createWithUtils({
     })[0], editor;
   };
 }
+function isEditorNode(node) {
+  return typeof node == "object" && node !== null ? !("_type" in node) && "children" in node && Array.isArray(node.children) : !1;
+}
+function isTextBlockNode(context, node) {
+  return isTypedObject(node) && node._type === context.schema.block.name;
+}
+function isSpanNode(context, node) {
+  return typeof node != "object" || node === null || "children" in node ? !1 : "_type" in node ? node._type === context.schema.span.name : "text" in node;
+}
+function isPartialSpanNode(node) {
+  return typeof node == "object" && node !== null && "text" in node && typeof node.text == "string";
+}
+function isObjectNode(context, node) {
+  return !isEditorNode(node) && !isTextBlockNode(context, node) && !isSpanNode(context, node) && !isPartialSpanNode(node);
+}
+function getBlock(root, path) {
+  const index = path.at(0);
+  if (!(index === void 0 || path.length !== 1))
+    return root.children.at(index);
+}
+function getNode(context, root, path) {
+  if (path.length === 0)
+    return root;
+  if (path.length === 1)
+    return getBlock(root, path);
+  if (path.length === 2) {
+    const block = getBlock(root, path.slice(0, 1));
+    return !block || !isTextBlockNode(context, block) ? void 0 : block.children.at(path[1]) || void 0;
+  }
+}
+function getSpan(context, root, path) {
+  const node = getNode(context, root, path);
+  if (node && isSpanNode(context, node))
+    return node;
+}
+function getParent(context, root, path) {
+  if (path.length === 0)
+    return;
+  const parentPath = path.slice(0, -1);
+  if (parentPath.length === 0)
+    return root;
+  const blockIndex = parentPath.at(0);
+  if (blockIndex === void 0 || parentPath.length !== 1)
+    return;
+  const block = root.children.at(blockIndex);
+  if (block && isTextBlockNode(context, block))
+    return block;
+}
+function applyOperationToPortableText(context, value, operation) {
+  const draft = createDraft({
+    children: value
+  });
+  try {
+    applyOperationToPortableTextDraft(context, draft, operation);
+  } catch (e) {
+    console.error(e);
+  }
+  return finishDraft(draft).children;
+}
+function applyOperationToPortableTextDraft(context, root, operation) {
+  switch (operation.type) {
+    case "insert_node": {
+      const {
+        path,
+        node: insertedNode
+      } = operation, parent = getParent(context, root, path), index = path[path.length - 1];
+      if (!parent || index > parent.children.length)
+        break;
+      if (path.length === 1) {
+        if (isTextBlockNode(context, insertedNode)) {
+          parent.children.splice(index, 0, {
+            ...insertedNode,
+            children: insertedNode.children.map((child) => "__inline" in child ? {
+              _key: child._key,
+              _type: child._type,
+              ..."value" in child && typeof child.value == "object" ? child.value : {}
+            } : child)
+          });
+          break;
+        }
+        if (Element$1.isElement(insertedNode) && !("__inline" in insertedNode)) {
+          parent.children.splice(index, 0, {
+            _key: insertedNode._key,
+            _type: insertedNode._type,
+            ..."value" in insertedNode && typeof insertedNode.value == "object" ? insertedNode.value : {}
+          });
+          break;
+        }
+      }
+      if (path.length === 2) {
+        if (!isTextBlockNode(context, parent))
+          break;
+        if (isPartialSpanNode(insertedNode)) {
+          parent.children.splice(index, 0, insertedNode);
+          break;
+        }
+        if ("__inline" in insertedNode) {
+          parent.children.splice(index, 0, {
+            _key: insertedNode._key,
+            _type: insertedNode._type,
+            ..."value" in insertedNode && typeof insertedNode.value == "object" ? insertedNode.value : {}
+          });
+          break;
+        }
+      }
+      break;
+    }
+    case "insert_text": {
+      const {
+        path,
+        offset,
+        text
+      } = operation;
+      if (text.length === 0) break;
+      const span = getSpan(context, root, path);
+      if (!span)
+        break;
+      const before = span.text.slice(0, offset), after = span.text.slice(offset);
+      span.text = before + text + after;
+      break;
+    }
+    case "merge_node": {
+      const {
+        path
+      } = operation, node = getNode(context, root, path), prevPath = Path.previous(path), prev = getNode(context, root, prevPath), parent = getParent(context, root, path);
+      if (!node || !prev || !parent)
+        break;
+      const index = path[path.length - 1];
+      if (isPartialSpanNode(node) && isPartialSpanNode(prev))
+        prev.text += node.text;
+      else if (isTextBlockNode(context, node) && isTextBlockNode(context, prev))
+        prev.children.push(...node.children);
+      else
+        break;
+      parent.children.splice(index, 1);
+      break;
+    }
+    case "move_node": {
+      const {
+        path,
+        newPath
+      } = operation;
+      if (Path.isAncestor(path, newPath))
+        break;
+      const node = getNode(context, root, path), parent = getParent(context, root, path), index = path[path.length - 1];
+      if (!node || !parent)
+        break;
+      parent.children.splice(index, 1);
+      const truePath = Path.transform(path, operation), newParent = getNode(context, root, Path.parent(truePath)), newIndex = truePath[truePath.length - 1];
+      if (!newParent || !("children" in newParent) || !Array.isArray(newParent.children))
+        break;
+      newParent.children.splice(newIndex, 0, node);
+      break;
+    }
+    case "remove_node": {
+      const {
+        path
+      } = operation, index = path[path.length - 1];
+      getParent(context, root, path)?.children.splice(index, 1);
+      break;
+    }
+    case "remove_text": {
+      const {
+        path,
+        offset,
+        text
+      } = operation;
+      if (text.length === 0)
+        break;
+      const span = getSpan(context, root, path);
+      if (!span)
+        break;
+      const before = span.text.slice(0, offset), after = span.text.slice(offset + text.length);
+      span.text = before + after;
+      break;
+    }
+    case "set_node": {
+      const {
+        path,
+        properties,
+        newProperties
+      } = operation, node = getNode(context, root, path);
+      if (!node || isEditorNode(node))
+        break;
+      if (isObjectNode(context, node)) {
+        const valueBefore = "value" in properties && typeof properties.value == "object" ? properties.value : {}, valueAfter = "value" in newProperties && typeof newProperties.value == "object" ? newProperties.value : {};
+        for (const key in newProperties) {
+          if (key === "value")
+            continue;
+          const value = newProperties[key];
+          value == null ? delete node[key] : node[key] = value;
+        }
+        for (const key in properties)
+          key !== "value" && (newProperties.hasOwnProperty(key) || delete node[key]);
+        for (const key in valueAfter) {
+          const value = valueAfter[key];
+          value == null ? delete node[key] : node[key] = value;
+        }
+        for (const key in valueBefore)
+          valueAfter.hasOwnProperty(key) || delete node[key];
+        break;
+      }
+      if (isTextBlockNode(context, node)) {
+        for (const key in newProperties) {
+          if (key === "children" || key === "text")
+            break;
+          const value = newProperties[key];
+          value == null ? delete node[key] : node[key] = value;
+        }
+        for (const key in properties)
+          newProperties.hasOwnProperty(key) || delete node[key];
+        break;
+      }
+      if (isPartialSpanNode(node)) {
+        for (const key in newProperties) {
+          if (key === "text")
+            break;
+          const value = newProperties[key];
+          value == null ? delete node[key] : node[key] = value;
+        }
+        for (const key in properties)
+          newProperties.hasOwnProperty(key) || delete node[key];
+        break;
+      }
+      break;
+    }
+    case "split_node": {
+      const {
+        path,
+        position,
+        properties
+      } = operation;
+      if (path.length === 0)
+        break;
+      const parent = getParent(context, root, path), index = path[path.length - 1];
+      if (!parent)
+        break;
+      if (isEditorNode(parent)) {
+        const block = getBlock(root, path);
+        if (!block || !isTextBlockNode(context, block))
+          break;
+        const before = block.children.slice(0, position), after = block.children.slice(position);
+        block.children = before;
+        const newTextBlockNode = {
+          ...properties,
+          children: after,
+          _type: context.schema.block.name
+        };
+        parent.children.splice(index + 1, 0, newTextBlockNode);
+        break;
+      }
+      if (isTextBlockNode(context, parent)) {
+        const node = getNode(context, root, path);
+        if (!node || !isSpanNode(context, node))
+          break;
+        const before = node.text.slice(0, position), after = node.text.slice(position);
+        node.text = before;
+        const newSpanNode = {
+          ...properties,
+          text: after
+        };
+        parent.children.splice(index + 1, 0, newSpanNode);
+      }
+      break;
+    }
+  }
+  return root;
+}
+function pluginUpdateValue(context, editor) {
+  const {
+    apply: apply2
+  } = editor;
+  return editor.apply = (operation) => {
+    if (operation.type === "set_selection") {
+      apply2(operation);
+      return;
+    }
+    editor.value = applyOperationToPortableText({
+      keyGenerator: context.keyGenerator,
+      schema: context.schema
+    }, editor.value, operation), apply2(operation);
+  }, editor;
+}
 const withPlugins = (editor, options) => {
   const e = editor, {
     editorActor,
@@ -4760,7 +5058,7 @@ const withPlugins = (editor, options) => {
   }), withPortableTextMarkModel = createWithPortableTextMarkModel(editorActor), withPortableTextBlockStyle = createWithPortableTextBlockStyle(editorActor), withPlaceholderBlock = createWithPlaceholderBlock(editorActor), withUtils = createWithUtils({
     editorActor
   }), withPortableTextSelections = createWithPortableTextSelections(editorActor);
-  return createWithEventListeners(editorActor)(withSchemaTypes(withObjectKeys(withPortableTextMarkModel(withPortableTextBlockStyle(withPlaceholderBlock(withUtils(withMaxBlocks(withUndoRedo(withPatches(withPortableTextSelections(e)))))))))));
+  return createWithEventListeners(editorActor)(withSchemaTypes(withObjectKeys(withPortableTextMarkModel(withPortableTextBlockStyle(withPlaceholderBlock(withUtils(withMaxBlocks(withUndoRedo(withPatches(withPortableTextSelections(pluginUpdateValue(editorActor.getSnapshot().context, e))))))))))));
 }, debug$a = debugWithName("setup");
 function createSlateEditor(config) {
   debug$a("Creating new Slate editor instance");
@@ -4769,10 +5067,10 @@ function createSlateEditor(config) {
     relayActor: config.relayActor,
     subscriptions: config.subscriptions
   });
-  KEY_TO_VALUE_ELEMENT.set(instance, {}), KEY_TO_SLATE_ELEMENT.set(instance, {});
-  const initialValue = [instance.pteCreateTextBlock({
-    decorators: []
-  })];
+  KEY_TO_VALUE_ELEMENT.set(instance, {}), KEY_TO_SLATE_ELEMENT.set(instance, {}), instance.value = [createPlaceholderBlock(config.editorActor.getSnapshot().context)];
+  const initialValue = toSlateValue(instance.value, {
+    schemaTypes: config.editorActor.getSnapshot().context.schema
+  });
   return {
     instance,
     initialValue
@@ -6564,34 +6862,6 @@ function sortByPriority(items) {
     result.includes(item) || result.push(item);
   return [...result, ...itemsWithoutPriority];
 }
-function slateChildrenToBlocks(schema, value) {
-  const blocks = new Array(value.length);
-  for (let blockIndex = 0; blockIndex < value.length; blockIndex++) {
-    const descendant = value[blockIndex];
-    if (descendant._type !== schema.block.name) {
-      blocks[blockIndex] = {
-        _key: descendant._key,
-        _type: descendant._type,
-        ..."value" in descendant && typeof descendant.value == "object" ? descendant.value : {}
-      };
-      continue;
-    }
-    const children = "children" in descendant ? descendant.children : [], processedChildren = new Array(children.length);
-    for (let childIndex = 0; childIndex < children.length; childIndex++) {
-      const child = children[childIndex];
-      processedChildren[childIndex] = child._type === schema.span.name ? child : {
-        _key: child._key,
-        _type: child._type,
-        ..."value" in child && typeof child.value == "object" ? child.value : {}
-      };
-    }
-    blocks[blockIndex] = {
-      ...descendant,
-      children: processedChildren
-    };
-  }
-  return blocks;
-}
 function getActiveDecorators({
   schema,
   slateEditorInstance
@@ -6610,7 +6880,7 @@ function createEditorSnapshot({
   hasTag,
   internalDrag
 }) {
-  const value = slateChildrenToBlocks(schema, editor.children), selection = editor.selection ? slateRangeToSelection({
+  const selection = editor.selection ? slateRangeToSelection({
     schema,
     editor,
     range: editor.selection
@@ -6626,7 +6896,7 @@ function createEditorSnapshot({
       readOnly,
       schema,
       selection,
-      value
+      value: editor.value
     },
     beta: {
       hasTag,
@@ -7342,7 +7612,7 @@ function getEditorSnapshot({
       }),
       schema: editorActorSnapshot.context.schema,
       selection: editorActorSnapshot.context.selection,
-      value: slateChildrenToBlocks(editorActorSnapshot.context.schema, slateEditorInstance.children)
+      value: slateEditorInstance.value
     },
     beta: {
       hasTag: (tag) => editorActorSnapshot.hasTag(tag),
@@ -7729,8 +7999,8 @@ function createEditableAPI(editor, editorActor) {
         }]
       }], {
         schemaTypes: editorActor.getSnapshot().context.schema
-      })[0].children[0], focusChildPath = editor.selection.focus.path.slice(0, 2), isSpanNode = child._type === types.span.name, focusNode = Node.get(editor, focusChildPath);
-      return isSpanNode && focusNode._type !== types.span.name && (debug$6("Inserting span child next to inline object child, moving selection + 1"), editor.move({
+      })[0].children[0], focusChildPath = editor.selection.focus.path.slice(0, 2), isSpanNode2 = child._type === types.span.name, focusNode = Node.get(editor, focusChildPath);
+      return isSpanNode2 && focusNode._type !== types.span.name && (debug$6("Inserting span child next to inline object child, moving selection + 1"), editor.move({
         distance: 1,
         unit: "character"
       })), Transforms.insertNodes(editor, child, {
@@ -8770,8 +9040,8 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
           debug$5("Updating changed child", currentBlockChild, oldBlockChild), Transforms.setNodes(slateEditor, currentBlockChild, {
             at: path
           });
-          const isSpanNode = Text.isText(currentBlockChild) && currentBlockChild._type === "span" && Text.isText(oldBlockChild) && oldBlockChild._type === "span";
-          isSpanNode && isTextChanged ? (oldBlockChild.text.length > 0 && Transforms.delete(slateEditor, {
+          const isSpanNode2 = Text.isText(currentBlockChild) && currentBlockChild._type === "span" && Text.isText(oldBlockChild) && oldBlockChild._type === "span";
+          isSpanNode2 && isTextChanged ? (oldBlockChild.text.length > 0 && Transforms.delete(slateEditor, {
             at: {
               focus: {
                 path,
@@ -8784,7 +9054,7 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
             }
           }), Transforms.insertText(slateEditor, currentBlockChild.text, {
             at: path
-          }), slateEditor.onChange()) : isSpanNode || (debug$5("Updating changed inline object child", currentBlockChild), Transforms.setNodes(slateEditor, {
+          }), slateEditor.onChange()) : isSpanNode2 || (debug$5("Updating changed inline object child", currentBlockChild), Transforms.setNodes(slateEditor, {
             _key: VOID_CHILD_KEY
           }, {
             at: [...path, 0],
@@ -9154,6 +9424,7 @@ class PortableTextEditor extends Component {
   /*
    * The editor API (currently implemented with Slate).
    */
+  subscriptions = [];
   unsubscribers = [];
   constructor(props) {
     if (super(props), props.editor)
@@ -9170,23 +9441,20 @@ class PortableTextEditor extends Component {
         readOnly: props.readOnly,
         schema: props.schemaType
       });
-      this.unsubscribers.push((() => {
-        const subscription = actors.relayActor.on("*", (event) => {
-          const change = eventToChange(event);
-          change && (props.onChange(change), this.change$.next(change));
-        });
-        return () => {
-          subscription.unsubscribe();
-        };
-      })());
-      for (const subscription of subscriptions)
-        this.unsubscribers.push(subscription());
-      this.actors = actors, this.editor = editor, this.schemaTypes = actors.editorActor.getSnapshot().context.getLegacySchema();
+      this.subscriptions = subscriptions, this.actors = actors, this.editor = editor, this.schemaTypes = actors.editorActor.getSnapshot().context.getLegacySchema();
     }
     this.editable = this.editor._internal.editable;
   }
   componentDidMount() {
-    this.actors && (this.actors.editorActor.start(), this.actors.mutationActor.start(), this.actors.relayActor.start(), this.actors.syncActor.start());
+    if (!this.actors)
+      return;
+    for (const subscription of this.subscriptions)
+      this.unsubscribers.push(subscription());
+    const relayActorSubscription = this.actors.relayActor.on("*", (event) => {
+      const change = eventToChange(event);
+      change && (this.props.editor || this.props.onChange(change), this.change$.next(change));
+    });
+    this.unsubscribers.push(relayActorSubscription.unsubscribe), this.actors.editorActor.start(), this.actors.mutationActor.start(), this.actors.relayActor.start(), this.actors.syncActor.start();
   }
   componentDidUpdate(prevProps) {
     !this.props.editor && !prevProps.editor && this.props.schemaType !== prevProps.schemaType && console.warn("Updating schema type is no longer supported"), !this.props.editor && !prevProps.editor && (this.props.readOnly !== prevProps.readOnly && this.editor._internal.editorActor.send({