import { co as $, a0 as t, b9 as O, bP as j, bv as k, w as q, cv as A, ba as C, cK as _, bB as Q, jM as J, U as K, V as d, P as b, bh as R, bi as g, bj as x, em as U, bg as V, bl as G, dn as I, bn as L, bo as T, bG as X, c1 as Y, eA as Z } from "./684d2f28.js";
import ee, { useRef as n, useCallback as w, useEffect as v, useContext as H, useState as S, Suspense as te } from "react";
import { formDataChildren as oe, FormDataPropertyView as re } from "./00dac55d.js";
import "react-dom";
function ie(e, o) {
  o === void 0 && (o = 0);
  var r = n(!1), i = n(), l = n(e), h = w(function() {
    return r.current;
  }, []), c = w(function() {
    r.current = !1, i.current && clearTimeout(i.current), i.current = setTimeout(function() {
      r.current = !0, l.current();
    }, o);
  }, [o]), u = w(function() {
    r.current = null, i.current && clearTimeout(i.current);
  }, []);
  return v(function() {
    l.current = e;
  }, [e]), v(function() {
    return c(), u;
  }, [o]), [h, u, c];
}
function ae(e, o, r) {
  o === void 0 && (o = 0), r === void 0 && (r = []);
  var i = ie(e, o), l = i[0], h = i[1], c = i[2];
  return v(c, r), [l, h];
}
const P = $`
  & .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")}";
      }
    }
  }
`, D = (e) => $`
  height: 100%;

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