import { av as w, Y as t, X as R, a4 as A, O as $, w as f, S as k, cW as M, Z as Q, lL as _, U as j, F as u, a6 as b, G as C, a7 as g, a8 as x, el as J, af as S, a9 as U, dC as G, aa as I, ac as m, ab as K, aA as L, ey as X } from "./603b75d9.js";
import Y, { useRef as i, useCallback as y, useEffect as v, useContext as V, useState as H, Suspense as Z } from "react";
import { formDataChildren as ee, FormDataPropertyView as te } from "./f9847c56.js";
import "react-dom";
function oe(e, o) {
  o === void 0 && (o = 0);
  var r = i(!1), a = i(), n = i(e), h = y(function() {
    return r.current;
  }, []), c = y(function() {
    r.current = !1, a.current && clearTimeout(a.current), a.current = setTimeout(function() {
      r.current = !0, n.current();
    }, o);
  }, [o]), d = y(function() {
    r.current = null, a.current && clearTimeout(a.current);
  }, []);
  return v(function() {
    n.current = e;
  }, [e]), v(function() {
    return c(), d;
  }, [o]), [h, d, c];
}
function re(e, o, r) {
  o === void 0 && (o = 0), r === void 0 && (r = []);
  var a = oe(e, o), n = a[0], h = a[1], c = a[2];
  return v(c, r), [n, h];
}
const B = w`
  & .ql-snow {
    .ql-picker.ql-header {
      .ql-picker-label::before,
      .ql-picker-item::before {
        content: "${t("richTextEditor.content")}";
      }

      .ql-picker-label[data-value="1"]::before,
      .ql-picker-item[data-value="1"]::before {
        content: "${t("richTextEditor.title")} 1";
      }

      .ql-picker-label[data-value="2"]::before,
      .ql-picker-item[data-value="2"]::before {
        content: "${t("richTextEditor.title")} 2";
      }

      .ql-picker-label[data-value="3"]::before,
      .ql-picker-item[data-value="3"]::before {
        content: "${t("richTextEditor.title")} 3";
      }

      .ql-picker-item[data-value="1"]::before {
        font-size: 26px;
      }

      .ql-picker-item[data-value="3"]::before {
        font-size: 19px;
      }

      .ql-picker-item[data-value="3"]::before {
        font-size: 15px;
      }
    }
    & .ql-tooltip.ql-editing a.ql-action::after {
      content: "${t("richTextEditor.save")}";
    }
    & .ql-tooltip::before {
      content: "${t("richTextEditor.link")}";
    }
    & .ql-tooltip {
      a.ql-action::after {
        content: "${t("richTextEditor.edit")}";
      }
      a.ql-remove::before {
        content: "${t("richTextEditor.remove")}";
      }
    }
  }
`, O = (e, o) => w`
  height: 100%;

  .ql-editor::-webkit-scrollbar {
    display: ${o ? "block" : "none"};
  }

  & .ql-editor {
    min-height: 85px;
  }
  & .ql-snow .ql-tooltip.ql-editing {
    input[type="text"] {
      width: 130px;
    }
  }
  & .ql-snow {
    &.ql-container,
    &.ql-toolbar {
      border-color: ${e.border};
      background: ${e.background};
      
    }
  }
  & .ql-toolbar {
    border-radius: ${e.radius} ${e.radius} 0 0;
    border-width: ${e.borderWidth ? e.borderWidth : "1px"};
  }
  & .ql-container {
    border-radius: 0 0 ${e.radius} ${e.radius};
    background: ${e.background};
    border-width: ${e.borderWidth ? e.borderWidth : "1px"};
  }
`, D = (e) => w`
  .ql-snow.ql-toolbar {
    height: 0;
    overflow: hidden;
    padding: 0;
    border-bottom: 0;
    border: none;
  }
  .quill .ql-snow.ql-container {
    border-radius: ${e.radius};
    border: 1px solid ${e.border};
  }
`, ae = R.div`
  ${B}
  ${(e) => O(e.$style, e.$contentScrollBar)}
  & .ql-container .ql-editor {
    min-height: 125px;
  }
  ${(e) => e.$hideToolbar ? D(e.$style) : ""};
`, le = R.div`
  ${B}
  ${(e) => O(e.$style, e.$contentScrollBar)}
  & .quill {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  & .ql-snow {
    &.ql-container {
      flex: 1;
      overflow: auto;
    }
  }
  ${(e) => e.$hideToolbar ? D(e.$style) : ""};
`, ie = [[{
  header: [1, 2, 3, !1]
}], ["bold", "italic", "underline", "strike", "blockquote"], [{
  list: "ordered"
}, {
  list: "bullet"
}], [{
  indent: "-1"
}, {
  indent: "+1"
}], [{
  color: []
}, {
  background: []
}, {
  align: []
}], ["link", "image"], ["clean"]], ne = {
  value: A("value"),
  hideToolbar: $,
  readOnly: $,
  autoHeight: f(L, "fixed"),
  contentScrollBar: f($, !1),
  placeholder: f(k, t("richTextEditor.placeholder")),
  toolbar: f(k, JSON.stringify(ie)),
  onEvent: M,
  style: Q(_, "style"),
  ...ee
}, ce = Y.lazy(() => import("./66feb2fb.js").then((e) => e.i));
function de(e) {
  const [o, r] = H(0), [a, n] = H(""), h = i(null), c = i(null);
  i(0);
  const d = i(e.onChange);
  d.current = e.onChange;
  const P = i((l) => {
    var s;
    return (s = d.current) == null ? void 0 : s.call(d, l);
  });
  re(() => {
    r(Math.random());
  }, 500, [e.placeholder]);
  const W = (l, s) => {
    try {
      s.parentNode;
    } catch {
      return !1;
    }
    return l.contains(s);
  }, F = (l) => {
    n(l), P.current(l);
  };
  v(() => {
    let l = e.value;
    /^<\w+>.+<\/\w+>$/.test(e.value) || (l = `<p class="">${e.value}</p>`), n(l);
  }, [e.value]);
  const N = (l) => {
    var q, p;
    (p = ((q = c.current) == null ? void 0 : q.editor).theme.pickers) == null || p.forEach((E) => {
      W(E.container, l.nativeEvent.target) || E.close();
    });
  }, T = "rtf-editor", z = e.autoHeight ? ae : le;
  return /* @__PURE__ */ u(z, {
    id: T,
    onClick: N,
    ref: h,
    $hideToolbar: e.hideToolbar,
    $style: e.$style,
    $contentScrollBar: e.contentScrollBar,
    children: /* @__PURE__ */ u(Z, {
      fallback: /* @__PURE__ */ u(X, {}),
      children: /* @__PURE__ */ u(ce, {
        ref: c,
        bounds: `#${T}`,
        modules: {
          toolbar: JSON.parse(e.toolbar)
        },
        theme: "snow",
        value: a,
        placeholder: e.placeholder,
        readOnly: e.readOnly,
        onChange: F
      }, o)
    })
  });
}
const ue = new j(ne, (e) => {
  const o = (r) => {
    e.value.onChange(r), e.onEvent("change");
  };
  return /* @__PURE__ */ u(de, {
    autoHeight: e.autoHeight,
    hideToolbar: e.hideToolbar,
    toolbar: e.toolbar,
    readOnly: e.readOnly,
    value: e.value.value,
    placeholder: e.placeholder,
    onChange: o,
    $style: e.style,
    contentScrollBar: e.contentScrollBar
  });
}).setPropertyViewFn((e) => /* @__PURE__ */ b(C, {
  children: [/* @__PURE__ */ b(g, {
    name: x.basic,
    children: [e.value.propertyView({
      label: t("richTextEditor.defaultValue")
    }), J(e)]
  }), /* @__PURE__ */ u(te, {
    ...e
  }), ["logic", "both"].includes(V(S).editorModeStatus) && /* @__PURE__ */ b(g, {
    name: x.interaction,
    children: [e.onEvent.getPropertyView(), U(e), G(e)]
  }), ["layout", "both"].includes(V(S).editorModeStatus) && /* @__PURE__ */ b(C, {
    children: [/* @__PURE__ */ b(g, {
      name: x.layout,
      children: [e.autoHeight.getPropertyView(), !e.autoHeight.getView() && e.contentScrollBar.propertyView({
        label: t("prop.textAreaScrollBar")
      }), e.toolbar.propertyView({
        label: t("richTextEditor.toolbar"),
        tooltip: t("richTextEditor.toolbarDescription")
      }), e.hideToolbar.propertyView({
        label: t("richTextEditor.hideToolbar")
      })]
    }), /* @__PURE__ */ u(g, {
      name: x.style,
      children: e.style.getPropertyView()
    })]
  })]
})).build();
class se extends ue {
  autoHeight() {
    return this.children.autoHeight.getView();
  }
}
const xe = I(se, [new m("value", t("export.richTextEditorValueDesc")), new m("readOnly", t("export.richTextEditorReadOnlyDesc")), new m("hideToolbar", t("export.richTextEditorHideToolBarDesc")), K]);
export {
  xe as RichTextEditorComp
};
