@frontify/fondue/dist/components/RichTextEditor/RichTextEditor.es.js

Design system of Frontify

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