import { jsx as t, jsxs as S } from "react/jsx-runtime";
import { Plate as g, PlateContent as z } from "@udecode/plate-core";
import { noop as D } from "lodash-es";
import { useMemo as j, useCallback as B } from "react";
import { BlurObserver as H } from "./BlurObserver.es.js";
import { useMemoizedId as U } from "../../hooks/useMemoizedId.es.js";
import { merge as A } from "../../utilities/merge.es.js";
import { ContentReplacement as J } from "./ContentReplacement.es.js";
import { RichTextEditorProvider as Y } from "./context/RichTextEditorContext.es.js";
import { PaddingSizes as b } from "./types.es.js";
import { useEditorState as q } from "./hooks/useEditorState.es.js";
import { defaultPlugins as v } from "./Plugins/defaultPlugins.es.js";
import { KEY_ELEMENT_BREAK_AFTER_COLUMN as Q, GAP_DEFAULT as W } from "./Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js";
import { Position as T } from "./components/EditorPositioningWrapper/types.es.js";
import { RenderPlaceholder as X } from "./components/RenderPlaceholder/RenderPlaceholder.es.js";
import { forceToFocusNextElement as Z } from "./helpers/forceToFocusElement.es.js";
import { parseRawValue as $ } from "./utils/parseRawValue.es.js";
const k = ({
  id: h,
  value: m,
  placeholder: N = "",
  readonly: R = !1,
  onTextChange: x,
  onBlur: n,
  padding: C = b.None,
  position: l = T.FLOATING,
  plugins: s = v,
  updateValueOnChange: w = !1,
  onValueChanged: F,
  border: O = !0,
  toolbarWidth: V,
  hideExternalFloatingModals: I,
  placeholderOpacity: K = "low"
}) => {
  var u, y, E;
  const r = U(h), { localValue: a, onChange: L, memoizedValue: P, config: i } = q({
    editorId: r,
    initialValue: m,
    onTextChange: x,
    plugins: s,
    onValueChanged: F
  }), o = s.plugins.find((e) => e.key === Q), c = (u = o == null ? void 0 : o.options) == null ? void 0 : u.customClass, d = c ? null : ((y = o == null ? void 0 : o.options) == null ? void 0 : y.columns) ?? 1, p = ((E = o == null ? void 0 : o.options) == null ? void 0 : E.gap) ?? W, _ = j(
    () => ({
      columns: d,
      columnGap: p,
      outline: "none"
    }),
    [d, p]
  ), G = B(() => {
    n && n(JSON.stringify(a.current));
  }, [n, a]), M = (e) => {
    e.code === "Tab" && Z(e, !e.shiftKey);
  }, f = {
    placeholder: N,
    renderPlaceholder: (e) => /* @__PURE__ */ t(X, { ...e, opacity: K }),
    readOnly: R,
    onBlur: G,
    className: A([C, c]),
    style: _,
    onKeyDown: M,
    scrollSelectionIntoView: D
  };
  return /* @__PURE__ */ t(Y, { styles: i.styles(), position: l, border: O, editorId: r, children: /* @__PURE__ */ S(g, { id: r, onChange: L, plugins: i.plugins, initialValue: P, children: [
    /* @__PURE__ */ t(z, { ...f }),
    !f.readOnly && i.toolbar(V),
    i.inline(),
    w && /* @__PURE__ */ t(J, { value: $({ editorId: r, raw: m, plugins: s }) }),
    l === T.FLOATING && /* @__PURE__ */ t(H, { hideExternalFloatingModals: I })
  ] }) });
};
k.displayName = "FondueRichTextEditor";
export {
  k as RichTextEditor
};
//# sourceMappingURL=RichTextEditor.es.js.map
