import { createElement, useContext } from "react";
import { ReferenceElementWrapper } from "../references/ReferenceElementWrapper.js";
import { ErrorBoundary } from "react-error-boundary";
import { ReactEditor, useSlateStatic } from "slate-react";
import { EditorBlock } from "@contember/ui";
import { SortedBlocksContext } from "../state/SortedBlocksContext.js";
import { SortableRepeaterItem } from "../../../collections/Repeater/SortableRepeaterItem.js";
import { SortableRepeaterItemHandle } from "../../../collections/Repeater/SortableRepeaterItemHandle.js";
import { isElementWithReference } from "../elements/ElementWithReference.js";
import { DragHandle } from "../../../../ui/DragHandle.js";
const overrideRenderElement = (editor) => {
  const { renderElement } = editor;
  editor.renderElement = (props) => {
    let children = renderElement(props);
    const path = ReactEditor.findPath(editor, props.element);
    if (isElementWithReference(props.element)) {
      children = /* @__PURE__ */ createElement(ErrorBoundary, {
        fallback: /* @__PURE__ */ createElement("span", {
          style: { background: "red", color: "white" }
        }, "Invalid element")
      }, /* @__PURE__ */ createElement(ReferenceElementWrapper, {
        element: props.element
      }, children));
    }
    if (path.length === 1) {
      return /* @__PURE__ */ createElement(SortableBlock, {
        element: props.element
      }, children);
    }
    return children;
  };
};
const SortableBlock = ({ children, element }) => {
  const editor = useSlateStatic();
  const sortedBlocks = useContext(SortedBlocksContext);
  const [index] = ReactEditor.findPath(editor, element);
  return /* @__PURE__ */ createElement(SortableRepeaterItem, {
    index,
    key: sortedBlocks[index]?.id
  }, /* @__PURE__ */ createElement(EditorBlock, {
    dragHandle: /* @__PURE__ */ createElement(SortableRepeaterItemHandle, null, /* @__PURE__ */ createElement(DragHandle, null))
  }, children));
};
export { overrideRenderElement };
//# sourceMappingURL=overrideRenderElement.js.map
