@portabletext/editor 1.48.14 → 1.49.0

package/lib/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), useEffectEvent = require("use-effect-event"), editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), noop = require("lodash/noop.js"), slate = require("slate"), slateReact = require("slate-react"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"), selector_isSelectingEntireBlocks = require("./_chunks-cjs/selector.is-selecting-entire-blocks.cjs"), selector_getFocusInlineObject = require("./_chunks-cjs/selector.get-focus-inline-object.cjs"), slateDom = require("slate-dom"), util_isSelectionCollapsed = require("./_chunks-cjs/util.is-selection-collapsed.cjs"), isEqual = require("lodash/isEqual.js"), util_selectionPointToBlockOffset = require("./_chunks-cjs/util.selection-point-to-block-offset.cjs"), behaviors_index = require("./behaviors/index.cjs"), uniq = require("lodash/uniq.js"), xstate = require("xstate");
+var reactCompilerRuntime = require("react-compiler-runtime"), React = require("react"), useEffectEvent = require("use-effect-event"), editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), noop = require("lodash/noop.js"), slate = require("slate"), slateReact = require("slate-react"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"), selector_isSelectingEntireBlocks = require("./_chunks-cjs/selector.is-selecting-entire-blocks.cjs"), selector_getFocusInlineObject = require("./_chunks-cjs/selector.get-focus-inline-object.cjs"), slateDom = require("slate-dom"), util_isSelectionCollapsed = require("./_chunks-cjs/util.is-selection-collapsed.cjs"), isEqual = require("lodash/isEqual.js"), util_selectionPointToBlockOffset = require("./_chunks-cjs/util.selection-point-to-block-offset.cjs"), uniq = require("lodash/uniq.js"), behaviors_index = require("./behaviors/index.cjs"), xstate = require("xstate");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -330,260 +330,6 @@ function getSelectionDomNodes({
     childNodes: childEntries.map(([childNode]) => slateDom.DOMEditor.toDOMNode(slateEditor, childNode))
   };
 }
-function DefaultBlockObject(props) {
-  const $ = reactCompilerRuntime.c(4);
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
-    userSelect: "none"
-  }, $[0] = t0) : t0 = $[0];
-  let t1;
-  return $[1] !== props.value._key || $[2] !== props.value._type ? (t1 = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: t0, children: [
-    "[",
-    props.value._type,
-    ": ",
-    props.value._key,
-    "]"
-  ] }), $[1] = props.value._key, $[2] = props.value._type, $[3] = t1) : t1 = $[3], t1;
-}
-function DefaultInlineObject(props) {
-  const $ = reactCompilerRuntime.c(4);
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
-    userSelect: "none"
-  }, $[0] = t0) : t0 = $[0];
-  let t1;
-  return $[1] !== props.value._key || $[2] !== props.value._type ? (t1 = /* @__PURE__ */ jsxRuntime.jsxs("span", { style: t0, children: [
-    "[",
-    props.value._type,
-    ": ",
-    props.value._key,
-    "]"
-  ] }), $[1] = props.value._key, $[2] = props.value._type, $[3] = t1) : t1 = $[3], t1;
-}
-function DropIndicator() {
-  const $ = reactCompilerRuntime.c(1);
-  let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { contentEditable: !1, className: "pt-drop-indicator", style: {
-    position: "absolute",
-    width: "100%",
-    height: 1,
-    borderBottom: "1px solid currentColor",
-    zIndex: 5
-  }, children: /* @__PURE__ */ jsxRuntime.jsx("span", {}) }), $[0] = t0) : t0 = $[0], t0;
-}
-editorProvider.debugWithName("components:Element");
-const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
-  display: "inline-block"
-}, Element$1 = ({
-  attributes,
-  children,
-  element,
-  schemaTypes,
-  readOnly,
-  renderBlock,
-  renderChild,
-  renderListItem,
-  renderStyle,
-  spellCheck
-}) => {
-  const editorActor = React.useContext(editorProvider.EditorActorContext), slateEditor = slateReact.useSlateStatic(), selected = slateReact.useSelected(), blockRef = React.useRef(null), inlineBlockObjectRef = React.useRef(null), focused = selected && slateEditor.selection && slate.Range.isCollapsed(slateEditor.selection) || !1, [dragPositionBlock, setDragPositionBlock] = React.useState();
-  React.useEffect(() => {
-    const behavior = behaviors_index.defineBehavior({
-      on: "drag.dragover",
-      guard: ({
-        snapshot,
-        event
-      }) => {
-        const dropFocusBlock = selector_isSelectingEntireBlocks.getFocusBlock({
-          context: {
-            ...snapshot.context,
-            selection: event.position.selection
-          }
-        });
-        if (!dropFocusBlock || dropFocusBlock.node._key !== element._key)
-          return !1;
-        const dragOrigin = snapshot.beta.internalDrag?.origin;
-        return !dragOrigin || selector_isSelectingEntireBlocks.getSelectedBlocks({
-          context: {
-            ...snapshot.context,
-            selection: dragOrigin.selection
-          }
-        }).some((draggedBlock) => draggedBlock.node._key === element._key) ? !1 : selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
-          context: {
-            ...snapshot.context,
-            selection: dragOrigin.selection
-          }
-        });
-      },
-      actions: [({
-        event: event_0
-      }) => [{
-        type: "effect",
-        effect: () => {
-          setDragPositionBlock(event_0.position.block);
-        }
-      }]]
-    });
-    return editorActor.send({
-      type: "add behavior",
-      behavior
-    }), () => {
-      editorActor.send({
-        type: "remove behavior",
-        behavior
-      });
-    };
-  }, [editorActor, element._key]), React.useEffect(() => {
-    const behavior_0 = behaviors_index.defineBehavior({
-      on: "drag.*",
-      guard: ({
-        event: event_1
-      }) => event_1.type !== "drag.dragover",
-      actions: [({
-        event: event_2
-      }) => [{
-        type: "effect",
-        effect: () => {
-          setDragPositionBlock(void 0);
-        }
-      }, behaviors_index.forward(event_2)]]
-    });
-    return editorActor.send({
-      type: "add behavior",
-      behavior: behavior_0
-    }), () => {
-      editorActor.send({
-        type: "remove behavior",
-        behavior: behavior_0
-      });
-    };
-  }, [editorActor]);
-  const value = React.useMemo(() => editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(slateEditor))[0], [slateEditor, element, schemaTypes.block.name]);
-  let renderedBlock = children, className;
-  const blockPath = React.useMemo(() => [{
-    _key: element._key
-  }], [element]);
-  if (typeof element._type != "string")
-    throw new Error("Expected element to have a _type property");
-  if (typeof element._key != "string")
-    throw new Error("Expected element to have a _key property");
-  if (slateEditor.isInline(element)) {
-    const path = slateReact.ReactEditor.findPath(slateEditor, element), [block] = slate.Editor.node(slateEditor, path, {
-      depth: 1
-    }), schemaType = schemaTypes.inlineObjects.find((_type) => _type.name === element._type);
-    if (!schemaType)
-      throw new Error("Could not find type for inline block element");
-    if (slate.Element.isElement(block)) {
-      const elmPath = [{
-        _key: block._key
-      }, "children", {
-        _key: element._key
-      }];
-      return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...attributes, children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { draggable: !readOnly, className: "pt-inline-object", "data-testid": "pt-inline-object", ref: inlineBlockObjectRef, style: inlineBlockStyle, contentEditable: !1, children: [
-          renderChild && renderChild({
-            annotations: EMPTY_ANNOTATIONS,
-            // These inline objects currently doesn't support annotations. This is a limitation of the current PT spec/model.
-            children: /* @__PURE__ */ jsxRuntime.jsx(DefaultInlineObject, { value }),
-            editorElementRef: inlineBlockObjectRef,
-            focused,
-            path: elmPath,
-            schemaType,
-            selected,
-            type: schemaType,
-            value
-          }),
-          !renderChild && /* @__PURE__ */ jsxRuntime.jsx(DefaultInlineObject, { value })
-        ] }, element._key)
-      ] });
-    }
-    throw new Error("Block not found!");
-  }
-  if (element._type === schemaTypes.block.name) {
-    className = "pt-block pt-text-block";
-    const isListItem = "listItem" in element, style = "style" in element && element.style || "normal";
-    className = `pt-block pt-text-block pt-text-block-style-${style}`;
-    const blockStyleType = schemaTypes.styles.find((item) => item.value === style);
-    renderStyle && blockStyleType && (renderedBlock = renderStyle({
-      block: element,
-      children,
-      focused,
-      selected,
-      value: style,
-      path: blockPath,
-      schemaType: blockStyleType,
-      editorElementRef: blockRef
-    }));
-    let level;
-    if (isListItem && (typeof element.level == "number" && (level = element.level), className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`), slateEditor.isListBlock(value) && isListItem && element.listItem) {
-      const listType = schemaTypes.lists.find((item_0) => item_0.value === element.listItem);
-      renderListItem && listType && (renderedBlock = renderListItem({
-        block: value,
-        children: renderedBlock,
-        focused,
-        selected,
-        value: element.listItem,
-        path: blockPath,
-        schemaType: listType,
-        level: value.level || 1,
-        editorElementRef: blockRef
-      }));
-    }
-    const renderProps = Object.defineProperty({
-      children: renderedBlock,
-      editorElementRef: blockRef,
-      focused,
-      level,
-      listItem: isListItem ? element.listItem : void 0,
-      path: blockPath,
-      selected,
-      style,
-      schemaType: schemaTypes.block,
-      value
-    }, "type", {
-      enumerable: !1,
-      get() {
-        return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaTypes.block;
-      }
-    }), propsOrDefaultRendered = renderBlock ? renderBlock(renderProps) : children;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, spellCheck, children: [
-      dragPositionBlock === "start" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, children: propsOrDefaultRendered }),
-      dragPositionBlock === "end" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
-    ] }, element._key);
-  }
-  const schemaType_0 = schemaTypes.blockObjects.find((_type_0) => _type_0.name === element._type);
-  if (!schemaType_0)
-    throw new Error(`Could not find schema type for block element of _type ${element._type}`);
-  className = "pt-block pt-object-block";
-  const block_0 = editorProvider.fromSlateValue([element], schemaTypes.block.name, editorProvider.KEY_TO_VALUE_ELEMENT.get(slateEditor))[0];
-  let renderedBlockFromProps;
-  if (renderBlock) {
-    const _props = Object.defineProperty({
-      children: /* @__PURE__ */ jsxRuntime.jsx(DefaultBlockObject, { value }),
-      editorElementRef: blockRef,
-      focused,
-      path: blockPath,
-      schemaType: schemaType_0,
-      selected,
-      value: block_0
-    }, "type", {
-      enumerable: !1,
-      get() {
-        return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaType_0;
-      }
-    });
-    renderedBlockFromProps = renderBlock(_props);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, children: [
-    dragPositionBlock === "start" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, contentEditable: !1, draggable: !readOnly, children: renderedBlockFromProps || /* @__PURE__ */ jsxRuntime.jsx(DefaultBlockObject, { value }) }),
-    dragPositionBlock === "end" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
-  ] }, element._key);
-};
-Element$1.displayName = "Element";
 const debug$2 = editorProvider.debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (props) => {
   const {
     editorActor,
@@ -705,9 +451,352 @@ const debug$2 = editorProvider.debugWithName("components:Leaf"), EMPTY_MARKS = [
     }
     return returnedChildren;
   }, [annotations, block, children, focused, leaf, marks, path, renderAnnotation, renderChild, renderDecorator, schemaTypes.annotations, schemaTypes.decorators, schemaTypes.span, selected]);
-  return React.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, ref: spanRef, children: content }, leaf._key), [leaf, attributes, content]);
+  return React.useMemo(() => /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(1);
+  let t0;
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { contentEditable: !1, className: "pt-drop-indicator", style: {
+    position: "absolute",
+    width: "100%",
+    height: 1,
+    borderBottom: "1px solid currentColor",
+    zIndex: 5
+  }, children: /* @__PURE__ */ jsxRuntime.jsx("span", {}) }), $[0] = t0) : t0 = $[0], t0;
+}
+function RenderDefaultBlockObject(props) {
+  const $ = reactCompilerRuntime.c(4);
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
+    userSelect: "none"
+  }, $[0] = t0) : t0 = $[0];
+  let t1;
+  return $[1] !== props.blockObject._key || $[2] !== props.blockObject._type ? (t1 = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: t0, children: [
+    "[",
+    props.blockObject._type,
+    ": ",
+    props.blockObject._key,
+    "]"
+  ] }), $[1] = props.blockObject._key, $[2] = props.blockObject._type, $[3] = t1) : t1 = $[3], t1;
+}
+function RenderDefaultInlineObject(props) {
+  const $ = reactCompilerRuntime.c(4);
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
+    userSelect: "none"
+  }, $[0] = t0) : t0 = $[0];
+  let t1;
+  return $[1] !== props.inlineObject._key || $[2] !== props.inlineObject._type ? (t1 = /* @__PURE__ */ jsxRuntime.jsxs("span", { style: t0, children: [
+    "[",
+    props.inlineObject._type,
+    ": ",
+    props.inlineObject._key,
+    "]"
+  ] }), $[1] = props.inlineObject._key, $[2] = props.inlineObject._type, $[3] = t1) : t1 = $[3], t1;
+}
+function createCoreBlockElementBehaviorsConfig({
+  key,
+  onSetDragPositionBlock
+}) {
+  return [{
+    behavior: behaviors_index.defineBehavior({
+      on: "drag.dragover",
+      guard: ({
+        snapshot,
+        event
+      }) => {
+        const dropFocusBlock = selector_isSelectingEntireBlocks.getFocusBlock({
+          context: {
+            ...snapshot.context,
+            selection: event.position.selection
+          }
+        });
+        if (!dropFocusBlock || dropFocusBlock.node._key !== key)
+          return !1;
+        const dragOrigin = snapshot.beta.internalDrag?.origin;
+        return !dragOrigin || selector_isSelectingEntireBlocks.getSelectedBlocks({
+          context: {
+            ...snapshot.context,
+            selection: dragOrigin.selection
+          }
+        }).some((draggedBlock) => draggedBlock.node._key === key) ? !1 : selector_isSelectingEntireBlocks.isSelectingEntireBlocks({
+          context: {
+            ...snapshot.context,
+            selection: dragOrigin.selection
+          }
+        });
+      },
+      actions: [({
+        event
+      }) => [{
+        type: "effect",
+        effect: () => {
+          onSetDragPositionBlock(event.position.block);
+        }
+      }]]
+    }),
+    priority: editorProvider.createEditorPriority({
+      reference: {
+        priority: editorProvider.corePriority,
+        importance: "lower"
+      }
+    })
+  }, {
+    behavior: behaviors_index.defineBehavior({
+      on: "drag.*",
+      guard: ({
+        event
+      }) => event.type !== "drag.dragover",
+      actions: [({
+        event
+      }) => [{
+        type: "effect",
+        effect: () => {
+          onSetDragPositionBlock(void 0);
+        }
+      }, behaviors_index.forward(event)]]
+    }),
+    priority: editorProvider.createEditorPriority({
+      reference: {
+        priority: editorProvider.corePriority,
+        importance: "lower"
+      }
+    })
+  }];
+}
+function useCoreBlockElementBehaviors(t0) {
+  const $ = reactCompilerRuntime.c(5), {
+    key,
+    onSetDragPositionBlock
+  } = t0, editorActor = React.useContext(editorProvider.EditorActorContext);
+  let t1, t2;
+  $[0] !== editorActor || $[1] !== key || $[2] !== onSetDragPositionBlock ? (t1 = () => {
+    const behaviorConfigs = createCoreBlockElementBehaviorsConfig({
+      key,
+      onSetDragPositionBlock
+    });
+    for (const behaviorConfig of behaviorConfigs)
+      editorActor.send({
+        type: "add behavior",
+        behaviorConfig
+      });
+    return () => {
+      for (const behaviorConfig_0 of behaviorConfigs)
+        editorActor.send({
+          type: "remove behavior",
+          behaviorConfig: behaviorConfig_0
+        });
+    };
+  }, t2 = [editorActor, key, onSetDragPositionBlock], $[0] = editorActor, $[1] = key, $[2] = onSetDragPositionBlock, $[3] = t1, $[4] = t2) : (t1 = $[3], t2 = $[4]), React.useEffect(t1, t2);
+}
+function RenderBlockObject(props) {
+  const [dragPositionBlock, setDragPositionBlock] = React.useState(), blockObjectRef = React.useRef(null), slateEditor = slateReact.useSlateStatic(), selected = slateReact.useSelected(), editorActor = React.useContext(editorProvider.EditorActorContext);
+  useCoreBlockElementBehaviors({
+    key: props.element._key,
+    onSetDragPositionBlock: setDragPositionBlock
+  });
+  const legacySchemaType = react.useSelector(editorActor, (s) => s.context.getLegacySchema().blockObjects.find((blockObject) => blockObject.name === props.element._type));
+  legacySchemaType || console.error(`Block object type ${props.element._type} not found in Schema`);
+  const focused = selected && slateEditor.selection !== null && slate.Range.isCollapsed(slateEditor.selection);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props.attributes, className: "pt-block pt-object-block", "data-block-key": props.element._key, "data-block-name": props.element._type, "data-block-type": "object", children: [
+    dragPositionBlock === "start" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
+    props.children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockObjectRef, contentEditable: !1, draggable: !props.readOnly, children: props.renderBlock && legacySchemaType ? props.renderBlock({
+      children: /* @__PURE__ */ jsxRuntime.jsx(RenderDefaultBlockObject, { blockObject: props.blockObject }),
+      editorElementRef: blockObjectRef,
+      focused,
+      path: [{
+        _key: props.element._key
+      }],
+      schemaType: legacySchemaType,
+      selected,
+      type: legacySchemaType,
+      value: props.blockObject
+    }) : /* @__PURE__ */ jsxRuntime.jsx(RenderDefaultBlockObject, { blockObject: props.blockObject }) }),
+    dragPositionBlock === "end" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+  ] }, props.element._key);
+}
+function RenderInlineObject(props) {
+  const inlineObjectRef = React.useRef(null), slateEditor = slateReact.useSlateStatic(), selected = slateReact.useSelected(), editorActor = React.useContext(editorProvider.EditorActorContext), legacySchemaType = react.useSelector(editorActor, (s) => s.context.getLegacySchema().inlineObjects.find((inlineObject) => inlineObject.name === props.element._type));
+  legacySchemaType || console.error(`Inline object type ${props.element._type} not found in Schema`);
+  const focused = selected && slateEditor.selection !== null && slate.Range.isCollapsed(slateEditor.selection), path = slateDom.DOMEditor.findPath(slateEditor, props.element), [block] = editorProvider.getPointBlock({
+    editor: slateEditor,
+    point: {
+      path,
+      offset: 0
+    }
+  });
+  return block || console.error(`Unable to find parent block of inline object ${props.element._key}`), /* @__PURE__ */ jsxRuntime.jsxs("span", { ...props.attributes, children: [
+    props.children,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { draggable: !props.readOnly, className: "pt-inline-object", "data-testid": "pt-inline-object", 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({
+      annotations: [],
+      children: /* @__PURE__ */ jsxRuntime.jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }),
+      editorElementRef: inlineObjectRef,
+      selected,
+      focused,
+      path: [{
+        _key: block._key
+      }, "children", {
+        _key: props.element._key
+      }],
+      schemaType: legacySchemaType,
+      value: props.inlineObject,
+      type: legacySchemaType
+    }) : /* @__PURE__ */ jsxRuntime.jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }) }, props.element._key)
+  ] });
+}
+function RenderTextBlock(props) {
+  const [dragPositionBlock, setDragPositionBlock] = React.useState(), blockRef = React.useRef(null), slateEditor = slateReact.useSlateStatic(), selected = slateReact.useSelected(), editorActor = React.useContext(editorProvider.EditorActorContext);
+  useCoreBlockElementBehaviors({
+    key: props.element._key,
+    onSetDragPositionBlock: setDragPositionBlock
+  });
+  const legacySchema = react.useSelector(editorActor, (s) => s.context.getLegacySchema()), focused = selected && slateEditor.selection !== null && slate.Range.isCollapsed(slateEditor.selection);
+  let children = props.children;
+  const legacyBlockSchemaType = legacySchema.block;
+  if (props.renderStyle && props.textBlock.style) {
+    const legacyStyleSchemaType = props.textBlock.style !== void 0 ? legacySchema.styles.find((style) => style.value === props.textBlock.style) : void 0;
+    legacyStyleSchemaType ? children = props.renderStyle({
+      block: props.textBlock,
+      children,
+      editorElementRef: blockRef,
+      focused,
+      path: [{
+        _key: props.textBlock._key
+      }],
+      schemaType: legacyStyleSchemaType,
+      selected,
+      value: props.textBlock.style
+    }) : console.error(`Unable to find Schema type for text block style ${props.textBlock.style}`);
+  }
+  if (props.renderListItem && props.textBlock.listItem) {
+    const legacyListItemSchemaType = legacySchema.lists.find((list) => list.value === props.textBlock.listItem);
+    legacyListItemSchemaType ? children = props.renderListItem({
+      block: props.textBlock,
+      children,
+      editorElementRef: blockRef,
+      focused,
+      level: props.textBlock.level ?? 1,
+      path: [{
+        _key: props.textBlock._key
+      }],
+      selected,
+      value: props.textBlock.listItem,
+      schemaType: legacyListItemSchemaType
+    }) : console.error(`Unable to find Schema type for text block list item ${props.textBlock.listItem}`);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props.attributes, className: ["pt-block", "pt-text-block", ...props.textBlock.style ? [`pt-text-block-style-${props.textBlock.style}`] : [], ...props.textBlock.listItem ? ["pt-list-item", `pt-list-item-${props.textBlock.listItem}`, `pt-list-item-level-${props.textBlock.level ?? 1}`] : []].join(" "), spellCheck: props.spellCheck, "data-block-key": props.textBlock._key, "data-block-name": props.textBlock._type, "data-block-type": "text", children: [
+    dragPositionBlock === "start" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, children: props.renderBlock ? props.renderBlock({
+      children,
+      editorElementRef: blockRef,
+      focused,
+      level: props.textBlock.level,
+      listItem: props.textBlock.listItem,
+      path: [{
+        _key: props.textBlock._key
+      }],
+      selected,
+      schemaType: legacyBlockSchemaType,
+      style: props.textBlock.style,
+      type: legacyBlockSchemaType,
+      value: props.textBlock
+    }) : props.children }),
+    dragPositionBlock === "end" ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, {}) : null
+  ] }, props.element._key);
+}
+function RenderElement(props) {
+  const $ = reactCompilerRuntime.c(45), editorActor = React.useContext(editorProvider.EditorActorContext), schema = react.useSelector(editorActor, _temp);
+  if ("__inline" in props.element && props.element.__inline === !0) {
+    let t02;
+    if ($[0] !== props.element || $[1] !== schema) {
+      let t13;
+      $[3] !== props.element ? (t13 = "value" in props.element && typeof props.element.value == "object" ? props.element.value : {}, $[3] = props.element, $[4] = t13) : t13 = $[4], t02 = util_sliceBlocks.parseInlineObject({
+        context: {
+          keyGenerator: _temp2,
+          schema
+        },
+        options: {
+          refreshKeys: !1
+        },
+        inlineObject: {
+          _key: props.element._key,
+          _type: props.element._type,
+          ...t13
+        }
+      }), $[0] = props.element, $[1] = schema, $[2] = t02;
+    } else
+      t02 = $[2];
+    const inlineObject = t02;
+    inlineObject || console.error(`Unable to find Inline Object "${props.element._type}" in Schema`);
+    let t12;
+    $[5] !== inlineObject || $[6] !== props.element._key || $[7] !== props.element._type ? (t12 = inlineObject ?? {
+      _key: props.element._key,
+      _type: props.element._type
+    }, $[5] = inlineObject, $[6] = props.element._key, $[7] = props.element._type, $[8] = t12) : t12 = $[8];
+    let t22;
+    return $[9] !== props.attributes || $[10] !== props.children || $[11] !== props.element || $[12] !== props.readOnly || $[13] !== props.renderChild || $[14] !== t12 ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(RenderInlineObject, { attributes: props.attributes, element: props.element, inlineObject: t12, readOnly: props.readOnly, renderChild: props.renderChild, children: props.children }), $[9] = props.attributes, $[10] = props.children, $[11] = props.element, $[12] = props.readOnly, $[13] = props.renderChild, $[14] = t12, $[15] = t22) : t22 = $[15], t22;
+  }
+  let t0;
+  $[16] !== props.element || $[17] !== schema ? (t0 = util_sliceBlocks.parseTextBlock({
+    context: {
+      keyGenerator: _temp3,
+      schema
+    },
+    options: {
+      refreshKeys: !1
+    },
+    block: props.element
+  }), $[16] = props.element, $[17] = schema, $[18] = t0) : t0 = $[18];
+  const textBlock = t0;
+  if (textBlock) {
+    let t12;
+    return $[19] !== props.attributes || $[20] !== props.children || $[21] !== props.element || $[22] !== props.readOnly || $[23] !== props.renderBlock || $[24] !== props.renderListItem || $[25] !== props.renderStyle || $[26] !== props.spellCheck || $[27] !== textBlock ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(RenderTextBlock, { attributes: props.attributes, element: props.element, readOnly: props.readOnly, renderBlock: props.renderBlock, renderListItem: props.renderListItem, renderStyle: props.renderStyle, spellCheck: props.spellCheck, textBlock, children: props.children }), $[19] = props.attributes, $[20] = props.children, $[21] = props.element, $[22] = props.readOnly, $[23] = props.renderBlock, $[24] = props.renderListItem, $[25] = props.renderStyle, $[26] = props.spellCheck, $[27] = textBlock, $[28] = t12) : t12 = $[28], t12;
+  }
+  let t1;
+  if ($[29] !== props.element || $[30] !== schema) {
+    let t22;
+    $[32] !== props.element ? (t22 = "value" in props.element && typeof props.element.value == "object" ? props.element.value : {}, $[32] = props.element, $[33] = t22) : t22 = $[33], t1 = util_sliceBlocks.parseBlockObject({
+      context: {
+        keyGenerator: _temp4,
+        schema
+      },
+      options: {
+        refreshKeys: !1
+      },
+      blockObject: {
+        _key: props.element._key,
+        _type: props.element._type,
+        ...t22
+      }
+    }), $[29] = props.element, $[30] = schema, $[31] = t1;
+  } else
+    t1 = $[31];
+  const blockObject = t1;
+  blockObject || console.error(`Unable to find Block Object "${props.element._type}" in Schema`);
+  let t2;
+  $[34] !== blockObject || $[35] !== props.element._key || $[36] !== props.element._type ? (t2 = blockObject ?? {
+    _key: props.element._key,
+    _type: props.element._type
+  }, $[34] = blockObject, $[35] = props.element._key, $[36] = props.element._type, $[37] = t2) : t2 = $[37];
+  let t3;
+  return $[38] !== props.attributes || $[39] !== props.children || $[40] !== props.element || $[41] !== props.readOnly || $[42] !== props.renderBlock || $[43] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(RenderBlockObject, { attributes: props.attributes, blockObject: t2, element: props.element, readOnly: props.readOnly, renderBlock: props.renderBlock, children: props.children }), $[38] = props.attributes, $[39] = props.children, $[40] = props.element, $[41] = props.readOnly, $[42] = props.renderBlock, $[43] = t2, $[44] = t3) : t3 = $[44], t3;
+}
+function _temp4() {
+  return "";
+}
+function _temp3() {
+  return "";
+}
+function _temp2() {
+  return "";
+}
+function _temp(s) {
+  return s.context.schema;
+}
 const debug$1 = editorProvider.debugWithName("plugin:withHotKeys");
 function createWithHotkeys(editorActor, portableTextEditor, hotkeysFromOptions) {
   const reservedHotkeys = ["enter", "tab", "shift", "delete", "end"], activeHotkeys = hotkeysFromOptions ?? {};
@@ -1092,7 +1181,7 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
     const withHotKeys = createWithHotkeys(editorActor, portableTextEditor, hotkeys);
     return debug("Editable is in edit mode"), withHotKeys(slateEditor);
   }, [editorActor, hotkeys, portableTextEditor, readOnly, slateEditor]);
-  const renderElement = React.useCallback((eProps) => /* @__PURE__ */ jsxRuntime.jsx(Element$1, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, schemaTypes: portableTextEditor.schemaTypes, spellCheck }), [portableTextEditor, spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = React.useCallback((lProps) => {
+  const renderElement = React.useCallback((eProps) => /* @__PURE__ */ jsxRuntime.jsx(RenderElement, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, spellCheck }), [spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = React.useCallback((lProps) => {
     if (lProps.leaf._type === "span") {
       let rendered = /* @__PURE__ */ jsxRuntime.jsx(Leaf, { ...lProps, editorActor, schemaTypes: portableTextEditor.schemaTypes, renderAnnotation, renderChild, renderDecorator, readOnly });
       if (renderPlaceholder && lProps.leaf.placeholder && lProps.text.text === "")