import { Fragment, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { RichText } from "../../../../controls/rich-text-v2";
import { useStyle } from "../../use-style";
import { toText } from "../../../../slate/utils";
import { ControlValue } from "../control";
const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text, definition }, ref) {
  const descendantsAsString = toText(
    text?.descendants ?? [],
    definition?.config.mode ?? RichText.Mode.Block
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      style: {
        /**
         * These are the default styles that Slate uses for its editable div.
         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx
         * Search for `disableDefaultStyles`
         */
        position: "relative",
        whiteSpace: "pre-wrap",
        wordWrap: "break-word"
      },
      children: descendantsAsString === "" ? /* @__PURE__ */ jsx(Placeholder, {}) : /* @__PURE__ */ jsx(
        Descendants,
        {
          plugins: definition?.config.plugins ?? [],
          descendants: text?.descendants ?? []
        }
      )
    }
  );
});
var ReadOnlyTextV2_default = ReadOnlyTextV2;
function Placeholder({ text = "Write some text..." }) {
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: useStyle({
        display: "inline-block",
        width: 0,
        maxWidth: "100%",
        whiteSpace: "nowrap",
        opacity: 0.333,
        verticalAlign: "text-top"
      }),
      children: text
    }
  );
}
function LeafComponent({ plugins, ...props }) {
  function initialRenderLeaf({ leaf }) {
    return /* @__PURE__ */ jsx("span", { className: leaf.className, children: leaf.text === "" ? "\uFEFF" : leaf.text });
  }
  const renderLeaf = plugins.reduce(
    (renderFn, plugin) => (props2) => {
      const { control, renderLeaf: renderLeaf2 } = plugin;
      if (control?.definition == null || renderLeaf2 == null)
        return renderFn(props2);
      if (control.getLeafValue == null)
        return renderLeaf2(renderFn, void 0)(props2);
      return /* @__PURE__ */ jsx(ControlValue, { definition: control.definition, data: control.getLeafValue(props2.leaf), children: (value) => renderLeaf2(renderFn, value)(props2) });
    },
    initialRenderLeaf
  );
  return renderLeaf({ attributes: {}, leaf: props.leaf, children: null, text: props.leaf });
}
function ElementComponent({ plugins, ...props }) {
  function initialRenderElement(props2) {
    return /* @__PURE__ */ jsx(Descendants, { descendants: props2.element.children, plugins });
  }
  const renderElement = plugins.reduce(
    (renderFn, plugin) => (props2) => {
      const { control, renderElement: renderElement2 } = plugin;
      if (control?.definition == null || renderElement2 == null)
        return renderFn(props2);
      if (control.getElementValue == null)
        return renderElement2(renderFn, void 0)(props2);
      return /* @__PURE__ */ jsx(ControlValue, { definition: control.definition, data: control.getElementValue(props2.element), children: (value) => renderElement2(renderFn, value)(props2) });
    },
    initialRenderElement
  );
  return renderElement({ attributes: {}, children: null, element: props.descendant });
}
function isText(node) {
  if (typeof node === "object" && "text" in node)
    return true;
  return false;
}
function Descendants({
  descendants,
  plugins
}) {
  return /* @__PURE__ */ jsx(Fragment, { children: descendants.map((descendant, index) => {
    if (isText(descendant)) {
      return /* @__PURE__ */ jsx(LeafComponent, { plugins, leaf: descendant }, index);
    }
    return /* @__PURE__ */ jsx(ElementComponent, { descendant, plugins }, index);
  }) });
}
export {
  LeafComponent,
  ReadOnlyTextV2_default as default
};
//# sourceMappingURL=ReadOnlyTextV2.js.map