@portabletext/editor 1.49.0 → 1.49.1

package/lib/index.js

@@ -1,13 +1,13 @@
 import { c } from "react-compiler-runtime";
-import { useEffect, useRef, useState, useMemo, startTransition, useCallback, useContext, forwardRef, useImperativeHandle } from "react";
+import { useEffect, useContext, useState, useRef, useMemo, startTransition, useCallback, forwardRef, useImperativeHandle } from "react";
 import { useEffectEvent } from "use-effect-event";
-import { useEditor, getNodeBlock, getFirstBlock, getLastBlock, slateRangeToSelection, toSlateRange, debugWithName, usePortableTextEditor, PortableTextEditor, createEditorPriority, corePriority, EditorActorContext, getPointBlock, isHotkey, moveRangeByOperation, isEqualToEmptyEditor, fromSlateValue, KEY_TO_VALUE_ELEMENT, getEditorSnapshot } from "./_chunks-es/editor-provider.js";
+import { useEditor, getNodeBlock, getFirstBlock, getLastBlock, slateRangeToSelection, toSlateRange, createEditorPriority, corePriority, EditorActorContext, getPointBlock, usePortableTextEditor, PortableTextEditor, debugWithName, isHotkey, moveRangeByOperation, isEqualToEmptyEditor, fromSlateValue, KEY_TO_VALUE_ELEMENT, getEditorSnapshot } from "./_chunks-es/editor-provider.js";
 import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useSelector, useActorRef } from "@xstate/react";
 import noop from "lodash/noop.js";
-import { Editor, Text, Range, Element as Element$1, Path, Transforms } from "slate";
-import { useSelected, useSlateStatic, useSlate, ReactEditor, Editable } from "slate-react";
+import { Editor, Range, Element as Element$1, Path, Transforms } from "slate";
+import { useSlateStatic, useSelected, useSlate, ReactEditor, Editable } from "slate-react";
 import { getBlockEndPoint, getBlockStartPoint, isKeyedSegment, parseInlineObject, parseTextBlock, parseBlockObject, parseBlocks } from "./_chunks-es/util.slice-blocks.js";
 import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, isOverlappingSelection, getFocusBlock, isSelectingEntireBlocks } from "./_chunks-es/selector.is-selecting-entire-blocks.js";
 import { getFocusInlineObject } from "./_chunks-es/selector.get-focus-inline-object.js";
@@ -15,8 +15,8 @@ import { DOMEditor, isDOMNode } from "slate-dom";
 import { isSelectionCollapsed as isSelectionCollapsed$1 } from "./_chunks-es/util.is-selection-collapsed.js";
 import isEqual from "lodash/isEqual.js";
 import { getSelectionEndPoint } from "./_chunks-es/util.selection-point-to-block-offset.js";
-import uniq from "lodash/uniq.js";
 import { defineBehavior, forward } from "./behaviors/index.js";
+import uniq from "lodash/uniq.js";
 import { setup, fromCallback, assign, and } from "xstate";
 function EditorEventListener(props) {
   const $ = c(5), editor = useEditor(), on = useEffectEvent(props.on);
@@ -343,130 +343,6 @@ function getSelectionDomNodes({
     childNodes: childEntries.map(([childNode]) => DOMEditor.toDOMNode(slateEditor, childNode))
   };
 }
-const debug$2 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (props) => {
-  const {
-    editorActor,
-    attributes,
-    children,
-    leaf,
-    schemaTypes,
-    renderChild,
-    renderDecorator,
-    renderAnnotation
-  } = props, spanRef = useRef(null), portableTextEditor = usePortableTextEditor(), blockSelected = useSelected(), [focused, setFocused] = useState(!1), [selected, setSelected] = useState(!1), block = children.props.parent, path = useMemo(() => block ? [{
-    _key: block?._key
-  }, "children", {
-    _key: leaf._key
-  }] : [], [block, leaf._key]), decoratorValues = useMemo(() => schemaTypes.decorators.map((dec) => dec.value), [schemaTypes.decorators]), marks = useMemo(() => uniq((leaf.marks || EMPTY_MARKS).filter((mark) => decoratorValues.includes(mark))), [decoratorValues, leaf.marks]), annotationMarks = Array.isArray(leaf.marks) ? leaf.marks : EMPTY_MARKS, annotations = useMemo(() => annotationMarks.map((mark_0) => !decoratorValues.includes(mark_0) && block?.markDefs?.find((def) => def._key === mark_0)).filter(Boolean), [annotationMarks, block, decoratorValues]), shouldTrackSelectionAndFocus = annotations.length > 0 && blockSelected;
-  useEffect(() => {
-    if (!shouldTrackSelectionAndFocus) {
-      setFocused(!1);
-      return;
-    }
-    const sel = PortableTextEditor.getSelection(portableTextEditor);
-    sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && startTransition(() => {
-      setFocused(!0);
-    });
-  }, [shouldTrackSelectionAndFocus, path, portableTextEditor]);
-  const setSelectedFromRange = useCallback(() => {
-    if (!shouldTrackSelectionAndFocus)
-      return;
-    debug$2("Setting selection and focus from range");
-    const winSelection = window.getSelection();
-    if (!winSelection) {
-      setSelected(!1);
-      return;
-    }
-    if (winSelection && winSelection.rangeCount > 0) {
-      const range = winSelection.getRangeAt(0);
-      spanRef.current && range.intersectsNode(spanRef.current) ? setSelected(!0) : setSelected(!1);
-    } else
-      setSelected(!1);
-  }, [shouldTrackSelectionAndFocus]);
-  useEffect(() => {
-    if (!shouldTrackSelectionAndFocus)
-      return;
-    const onBlur = editorActor.on("blurred", () => {
-      setFocused(!1), setSelected(!1);
-    }), onFocus = editorActor.on("focused", () => {
-      const sel_0 = PortableTextEditor.getSelection(portableTextEditor);
-      sel_0 && isEqual(sel_0.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
-    }), onSelection = editorActor.on("selection", (event) => {
-      event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
-    });
-    return () => {
-      onBlur.unsubscribe(), onFocus.unsubscribe(), onSelection.unsubscribe();
-    };
-  }, [editorActor, path, portableTextEditor, setSelectedFromRange, shouldTrackSelectionAndFocus]), useEffect(() => setSelectedFromRange(), [setSelectedFromRange]);
-  const content = useMemo(() => {
-    let returnedChildren = children;
-    if (Text.isText(leaf) && leaf._type === schemaTypes.span.name && (marks.forEach((mark_1) => {
-      const schemaType = schemaTypes.decorators.find((dec_0) => dec_0.value === mark_1);
-      if (schemaType && renderDecorator) {
-        const _props = Object.defineProperty({
-          children: returnedChildren,
-          editorElementRef: spanRef,
-          focused,
-          path,
-          selected,
-          schemaType,
-          value: mark_1
-        }, "type", {
-          enumerable: !1,
-          get() {
-            return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaType;
-          }
-        });
-        returnedChildren = renderDecorator(_props);
-      }
-    }), block && annotations.length > 0 && annotations.forEach((annotation) => {
-      const schemaType_0 = schemaTypes.annotations.find((t) => t.name === annotation._type);
-      if (schemaType_0)
-        if (renderAnnotation) {
-          const _props_0 = Object.defineProperty({
-            block,
-            children: returnedChildren,
-            editorElementRef: spanRef,
-            focused,
-            path,
-            selected,
-            schemaType: schemaType_0,
-            value: annotation
-          }, "type", {
-            enumerable: !1,
-            get() {
-              return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaType_0;
-            }
-          });
-          returnedChildren = /* @__PURE__ */ jsx("span", { ref: spanRef, children: renderAnnotation(_props_0) });
-        } else
-          returnedChildren = /* @__PURE__ */ jsx("span", { ref: spanRef, children: returnedChildren });
-    }), block && renderChild)) {
-      const child = block.children.find((_child) => _child._key === leaf._key);
-      if (child) {
-        const _props_1 = Object.defineProperty({
-          annotations,
-          children: /* @__PURE__ */ jsx(Fragment, { children: returnedChildren }),
-          editorElementRef: spanRef,
-          focused,
-          path,
-          schemaType: schemaTypes.span,
-          selected,
-          value: child
-        }, "type", {
-          enumerable: !1,
-          get() {
-            return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaTypes.span;
-          }
-        });
-        returnedChildren = renderChild(_props_1);
-      }
-    }
-    return returnedChildren;
-  }, [annotations, block, children, focused, leaf, marks, path, renderAnnotation, renderChild, renderDecorator, schemaTypes.annotations, schemaTypes.decorators, schemaTypes.span, selected]);
-  return useMemo(() => /* @__PURE__ */ jsx("span", { ...attributes, ref: spanRef, "data-child-key": leaf._key, "data-child-name": leaf._type, "data-child-type": "span", children: content }, leaf._key), [leaf, attributes, content]);
-};
-Leaf.displayName = "Leaf";
 function DropIndicator() {
   const $ = c(1);
   let t0;
@@ -628,7 +504,7 @@ function RenderBlockObject(props) {
       value: props.blockObject
     }) : /* @__PURE__ */ jsx(RenderDefaultBlockObject, { blockObject: props.blockObject }) }),
     dragPositionBlock === "end" ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
-  ] }, props.element._key);
+  ] });
 }
 function RenderInlineObject(props) {
   const inlineObjectRef = useRef(null), slateEditor = useSlateStatic(), selected = useSelected(), editorActor = useContext(EditorActorContext), legacySchemaType = useSelector(editorActor, (s) => s.context.getLegacySchema().inlineObjects.find((inlineObject) => inlineObject.name === props.element._type));
@@ -640,11 +516,11 @@ function RenderInlineObject(props) {
       offset: 0
     }
   });
-  return block || console.error(`Unable to find parent block of inline object ${props.element._key}`), /* @__PURE__ */ jsxs("span", { ...props.attributes, children: [
+  return block || console.error(`Unable to find parent block of inline object ${props.element._key}`), /* @__PURE__ */ jsxs("span", { ...props.attributes, draggable: !props.readOnly, className: "pt-inline-object", "data-child-key": props.inlineObject._key, "data-child-name": props.inlineObject._type, "data-child-type": "object", children: [
     props.children,
-    /* @__PURE__ */ jsx("span", { draggable: !props.readOnly, className: "pt-inline-object", "data-testid": "pt-inline-object", ref: inlineObjectRef, style: {
+    /* @__PURE__ */ jsx("span", { ref: inlineObjectRef, style: {
       display: "inline-block"
-    }, "data-child-key": props.inlineObject._key, "data-child-name": props.inlineObject._type, "data-child-type": "object", children: props.renderChild && block && legacySchemaType ? props.renderChild({
+    }, children: props.renderChild && block && legacySchemaType ? props.renderChild({
       annotations: [],
       children: /* @__PURE__ */ jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }),
       editorElementRef: inlineObjectRef,
@@ -658,7 +534,7 @@ function RenderInlineObject(props) {
       schemaType: legacySchemaType,
       value: props.inlineObject,
       type: legacySchemaType
-    }) : /* @__PURE__ */ jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }) }, props.element._key)
+    }) : /* @__PURE__ */ jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }) })
   ] });
 }
 function RenderTextBlock(props) {
@@ -719,10 +595,10 @@ function RenderTextBlock(props) {
       value: props.textBlock
     }) : props.children }),
     dragPositionBlock === "end" ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
-  ] }, props.element._key);
+  ] });
 }
 function RenderElement(props) {
-  const $ = c(45), editorActor = useContext(EditorActorContext), schema = useSelector(editorActor, _temp);
+  const $ = c(45), editorActor = useContext(EditorActorContext), schema = useSelector(editorActor, _temp$1);
   if ("__inline" in props.element && props.element.__inline === !0) {
     let t02;
     if ($[0] !== props.element || $[1] !== schema) {
@@ -807,9 +683,145 @@ function _temp3() {
 function _temp2() {
   return "";
 }
+function _temp$1(s) {
+  return s.context.schema;
+}
+function RenderSpan(props) {
+  const slateEditor = useSlateStatic(), editorActor = useContext(EditorActorContext), legacySchema = useSelector(editorActor, (s) => s.context.getLegacySchema()), spanRef = useRef(null), portableTextEditor = usePortableTextEditor(), blockSelected = useSelected(), [focused, setFocused] = useState(!1), [selected, setSelected] = useState(!1), parent = props.children.props.parent, block = parent && slateEditor.isTextBlock(parent) ? parent : void 0, path = useMemo(() => block ? [{
+    _key: block._key
+  }, "children", {
+    _key: props.leaf._key
+  }] : void 0, [block, props.leaf._key]), decoratorSchemaTypes = editorActor.getSnapshot().context.schema.decorators.map((decorator) => decorator.name), decorators = uniq((props.leaf.marks ?? []).filter((mark) => decoratorSchemaTypes.includes(mark))), annotationMarkDefs = (props.leaf.marks ?? []).flatMap((mark_0) => {
+    if (decoratorSchemaTypes.includes(mark_0))
+      return [];
+    const markDef_0 = block?.markDefs?.find((markDef) => markDef._key === mark_0);
+    return markDef_0 ? [markDef_0] : [];
+  }), shouldTrackSelectionAndFocus = annotationMarkDefs.length > 0 && blockSelected;
+  useEffect(() => {
+    if (!shouldTrackSelectionAndFocus) {
+      setFocused(!1);
+      return;
+    }
+    const sel = PortableTextEditor.getSelection(portableTextEditor);
+    sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && startTransition(() => {
+      setFocused(!0);
+    });
+  }, [shouldTrackSelectionAndFocus, path, portableTextEditor]);
+  const setSelectedFromRange = useCallback(() => {
+    if (!shouldTrackSelectionAndFocus)
+      return;
+    const winSelection = window.getSelection();
+    if (!winSelection) {
+      setSelected(!1);
+      return;
+    }
+    if (winSelection && winSelection.rangeCount > 0) {
+      const range = winSelection.getRangeAt(0);
+      spanRef.current && range.intersectsNode(spanRef.current) ? setSelected(!0) : setSelected(!1);
+    } else
+      setSelected(!1);
+  }, [shouldTrackSelectionAndFocus]);
+  useEffect(() => {
+    if (!shouldTrackSelectionAndFocus)
+      return;
+    const onBlur = editorActor.on("blurred", () => {
+      setFocused(!1), setSelected(!1);
+    }), onFocus = editorActor.on("focused", () => {
+      const sel_0 = PortableTextEditor.getSelection(portableTextEditor);
+      sel_0 && isEqual(sel_0.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
+    }), onSelection = editorActor.on("selection", (event) => {
+      event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
+    });
+    return () => {
+      onBlur.unsubscribe(), onFocus.unsubscribe(), onSelection.unsubscribe();
+    };
+  }, [editorActor, path, portableTextEditor, setSelectedFromRange, shouldTrackSelectionAndFocus]), useEffect(() => setSelectedFromRange(), [setSelectedFromRange]);
+  let children = props.children;
+  for (const mark_1 of decorators) {
+    const legacyDecoratorSchemaType = legacySchema.decorators.find((dec) => dec.value === mark_1);
+    path && legacyDecoratorSchemaType && props.renderDecorator && (children = props.renderDecorator({
+      children,
+      editorElementRef: spanRef,
+      focused,
+      path,
+      selected,
+      schemaType: legacyDecoratorSchemaType,
+      value: mark_1,
+      type: legacyDecoratorSchemaType
+    }));
+  }
+  for (const annotationMarkDef of annotationMarkDefs) {
+    const legacyAnnotationSchemaType = legacySchema.annotations.find((t) => t.name === annotationMarkDef._type);
+    legacyAnnotationSchemaType && (block && path && props.renderAnnotation ? children = /* @__PURE__ */ jsx("span", { ref: spanRef, children: props.renderAnnotation({
+      block,
+      children,
+      editorElementRef: spanRef,
+      focused,
+      path,
+      selected,
+      schemaType: legacyAnnotationSchemaType,
+      value: annotationMarkDef,
+      type: legacyAnnotationSchemaType
+    }) }) : children = /* @__PURE__ */ jsx("span", { ref: spanRef, children }));
+  }
+  if (block && path && props.renderChild) {
+    const child = block.children.find((_child) => _child._key === props.leaf._key);
+    child && (children = props.renderChild({
+      annotations: annotationMarkDefs,
+      children,
+      editorElementRef: spanRef,
+      focused,
+      path,
+      schemaType: legacySchema.span,
+      selected,
+      value: child,
+      type: legacySchema.span
+    }));
+  }
+  return /* @__PURE__ */ jsx("span", { ...props.attributes, ref: spanRef, children });
+}
+const PLACEHOLDER_STYLE = {
+  position: "absolute",
+  userSelect: "none",
+  pointerEvents: "none",
+  left: 0,
+  right: 0
+};
+function RenderLeaf(props) {
+  const $ = c(12), editorActor = useContext(EditorActorContext), schema = useSelector(editorActor, _temp);
+  if (props.leaf._type !== schema.span.name)
+    return props.children;
+  let t0;
+  $[0] !== props ? (t0 = /* @__PURE__ */ jsx(RenderSpan, { ...props }), $[0] = props, $[1] = t0) : t0 = $[1];
+  let renderedSpan = t0;
+  if (props.renderPlaceholder && props.leaf.placeholder && props.text.text === "") {
+    let t1;
+    $[2] !== props.renderPlaceholder ? (t1 = props.renderPlaceholder(), $[2] = props.renderPlaceholder, $[3] = t1) : t1 = $[3];
+    let t2;
+    $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx("span", { style: PLACEHOLDER_STYLE, contentEditable: !1, children: t1 }), $[4] = t1, $[5] = t2) : t2 = $[5];
+    let t3;
+    return $[6] !== renderedSpan || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t2,
+      renderedSpan
+    ] }), $[6] = renderedSpan, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
+  }
+  const rangeDecoration = props.leaf.rangeDecoration;
+  if (rangeDecoration) {
+    let t1;
+    $[9] !== rangeDecoration || $[10] !== renderedSpan ? (t1 = rangeDecoration.component({
+      children: renderedSpan
+    }), $[9] = rangeDecoration, $[10] = renderedSpan, $[11] = t1) : t1 = $[11], renderedSpan = t1;
+  }
+  return renderedSpan;
+}
 function _temp(s) {
   return s.context.schema;
 }
+function RenderText(props) {
+  const $ = c(5);
+  let t0;
+  return $[0] !== props.attributes || $[1] !== props.children || $[2] !== props.text._key || $[3] !== props.text._type ? (t0 = /* @__PURE__ */ jsx("span", { ...props.attributes, "data-child-key": props.text._key, "data-child-name": props.text._type, "data-child-type": "span", children: props.children }), $[0] = props.attributes, $[1] = props.children, $[2] = props.text._key, $[3] = props.text._type, $[4] = t0) : t0 = $[4], t0;
+}
 const debug$1 = debugWithName("plugin:withHotKeys");
 function createWithHotkeys(editorActor, portableTextEditor, hotkeysFromOptions) {
   const reservedHotkeys = ["enter", "tab", "shift", "delete", "end"], activeHotkeys = hotkeysFromOptions ?? {};
@@ -1126,13 +1138,7 @@ function createDecorate(rangeDecorationActor) {
     }) || Range.includes(decoratedRange, path));
   };
 }
-const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
-  position: "absolute",
-  userSelect: "none",
-  pointerEvents: "none",
-  left: 0,
-  right: 0
-}, PortableTextEditable = forwardRef(function(props, forwardedRef) {
+const debug = debugWithName("component:Editable"), PortableTextEditable = forwardRef(function(props, forwardedRef) {
   const {
     hotkeys,
     onBlur,
@@ -1194,21 +1200,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
     const withHotKeys = createWithHotkeys(editorActor, portableTextEditor, hotkeys);
     return debug("Editable is in edit mode"), withHotKeys(slateEditor);
   }, [editorActor, hotkeys, portableTextEditor, readOnly, slateEditor]);
-  const renderElement = useCallback((eProps) => /* @__PURE__ */ jsx(RenderElement, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, spellCheck }), [spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = useCallback((lProps) => {
-    if (lProps.leaf._type === "span") {
-      let rendered = /* @__PURE__ */ jsx(Leaf, { ...lProps, editorActor, schemaTypes: portableTextEditor.schemaTypes, renderAnnotation, renderChild, renderDecorator, readOnly });
-      if (renderPlaceholder && lProps.leaf.placeholder && lProps.text.text === "")
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { style: PLACEHOLDER_STYLE, contentEditable: !1, children: renderPlaceholder() }),
-          rendered
-        ] });
-      const decoration = lProps.leaf.rangeDecoration;
-      return decoration && (rendered = decoration.component({
-        children: rendered
-      })), rendered;
-    }
-    return lProps.children;
-  }, [editorActor, portableTextEditor, readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder]), restoreSelectionFromProps = useCallback(() => {
+  const renderElement = useCallback((eProps) => /* @__PURE__ */ jsx(RenderElement, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, spellCheck }), [spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = useCallback((leafProps) => /* @__PURE__ */ jsx(RenderLeaf, { ...leafProps, readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder }), [readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder]), renderText = useCallback((props_0) => /* @__PURE__ */ jsx(RenderText, { ...props_0 }), []), restoreSelectionFromProps = useCallback(() => {
     if (propsSelection) {
       debug(`Selection from props ${JSON.stringify(propsSelection)}`);
       const normalizedSelection = normalizeSelection(propsSelection, fromSlateValue(slateEditor.children, editorActor.getSnapshot().context.schema.block.name));
@@ -1719,6 +1711,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       renderPlaceholder: void 0,
       renderElement,
       renderLeaf,
+      renderText,
       scrollSelectionIntoView: scrollSelectionIntoViewToSlate
     }
   ) : null;