forma-text
Version:
FormaText is a modern, feature-rich, and highly customizable React text editor with AI integration. It delivers a seamless and intuitive editing experience, supporting everything from simple text input to advanced rich content creation.
1,301 lines (1,299 loc) โข 154 kB
JavaScript
import He, { useState as R, useRef as Q, useCallback as V, useEffect as J } from "react";
import o from "prop-types";
import Mr from "mammoth";
import { diff_match_patch as Pr, DIFF_EQUAL as qr, DIFF_DELETE as Br, DIFF_INSERT as Ur } from "diff-match-patch";
import { ChevronDown as _t, Palette as $t, Highlighter as Dt, Smile as Ht, Undo as Mt, Redo as Pt, Bold as qt, Italic as Bt, Underline as Ut, Strikethrough as Vt, Superscript as Yt, Subscript as Wt, AlignLeft as Kt, AlignCenter as Gt, AlignRight as Jt, ListOrdered as Xt, List as Zt, Outdent as Qt, Indent as er, Quote as tr, Code as rr, Link as rt, Minus as or, Eraser as nr, Image as ir, Video as vt, Table as jt, Columns as sr, FileUp as ar, Sparkles as ot, Pilcrow as xr, Type as Vr, ArrowDownUp as Yr, GripVertical as Wr, PinOff as Kr, Pin as Gr, ExternalLink as Jr, ChevronsDownUp as Xr, Minimize as Ct, CodeXml as lr, Maximize as cr, Sigma as Zr, Binary as Qr, Info as eo, AlignStartVertical as to, AlignCenterVertical as ro, AlignEndVertical as oo, Trash2 as no } from "lucide-react";
import hr from "react-dom";
import { jwtDecode as io } from "jwt-decode";
var St = { exports: {} }, Xe = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ur;
function so() {
if (ur) return Xe;
ur = 1;
var n = He, r = Symbol.for("react.element"), l = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, b = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, x = { key: !0, ref: !0, __self: !0, __source: !0 };
function g(j, u, q) {
var C, k = {}, f = null, F = null;
q !== void 0 && (f = "" + q), u.key !== void 0 && (f = "" + u.key), u.ref !== void 0 && (F = u.ref);
for (C in u) i.call(u, C) && !x.hasOwnProperty(C) && (k[C] = u[C]);
if (j && j.defaultProps) for (C in u = j.defaultProps, u) k[C] === void 0 && (k[C] = u[C]);
return { $$typeof: r, type: j, key: f, ref: F, props: k, _owner: b.current };
}
return Xe.Fragment = l, Xe.jsx = g, Xe.jsxs = g, Xe;
}
var Ze = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var pr;
function ao() {
return pr || (pr = 1, process.env.NODE_ENV !== "production" && function() {
var n = He, r = Symbol.for("react.element"), l = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), b = Symbol.for("react.strict_mode"), x = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), j = Symbol.for("react.context"), u = Symbol.for("react.forward_ref"), q = Symbol.for("react.suspense"), C = Symbol.for("react.suspense_list"), k = Symbol.for("react.memo"), f = Symbol.for("react.lazy"), F = Symbol.for("react.offscreen"), T = Symbol.iterator, N = "@@iterator";
function ee(t) {
if (t === null || typeof t != "object")
return null;
var s = T && t[T] || t[N];
return typeof s == "function" ? s : null;
}
var $ = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function p(t) {
{
for (var s = arguments.length, h = new Array(s > 1 ? s - 1 : 0), w = 1; w < s; w++)
h[w - 1] = arguments[w];
d("error", t, h);
}
}
function d(t, s, h) {
{
var w = $.ReactDebugCurrentFrame, A = w.getStackAddendum();
A !== "" && (s += "%s", h = h.concat([A]));
var H = h.map(function(z) {
return String(z);
});
H.unshift("Warning: " + s), Function.prototype.apply.call(console[t], console, H);
}
}
var S = !1, _ = !1, Y = !1, te = !1, re = !1, v;
v = Symbol.for("react.module.reference");
function I(t) {
return !!(typeof t == "string" || typeof t == "function" || t === i || t === x || re || t === b || t === q || t === C || te || t === F || S || _ || Y || typeof t == "object" && t !== null && (t.$$typeof === f || t.$$typeof === k || t.$$typeof === g || t.$$typeof === j || t.$$typeof === u || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
t.$$typeof === v || t.getModuleId !== void 0));
}
function X(t, s, h) {
var w = t.displayName;
if (w)
return w;
var A = s.displayName || s.name || "";
return A !== "" ? h + "(" + A + ")" : h;
}
function oe(t) {
return t.displayName || "Context";
}
function W(t) {
if (t == null)
return null;
if (typeof t.tag == "number" && p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof t == "function")
return t.displayName || t.name || null;
if (typeof t == "string")
return t;
switch (t) {
case i:
return "Fragment";
case l:
return "Portal";
case x:
return "Profiler";
case b:
return "StrictMode";
case q:
return "Suspense";
case C:
return "SuspenseList";
}
if (typeof t == "object")
switch (t.$$typeof) {
case j:
var s = t;
return oe(s) + ".Consumer";
case g:
var h = t;
return oe(h._context) + ".Provider";
case u:
return X(t, t.render, "ForwardRef");
case k:
var w = t.displayName || null;
return w !== null ? w : W(t.type) || "Memo";
case f: {
var A = t, H = A._payload, z = A._init;
try {
return W(z(H));
} catch {
return null;
}
}
}
return null;
}
var K = Object.assign, ie = 0, ve, Se, Le, nt, Re, Pe, Ie;
function it() {
}
it.__reactDisabledLog = !0;
function qe() {
{
if (ie === 0) {
ve = console.log, Se = console.info, Le = console.warn, nt = console.error, Re = console.group, Pe = console.groupCollapsed, Ie = console.groupEnd;
var t = {
configurable: !0,
enumerable: !0,
value: it,
writable: !0
};
Object.defineProperties(console, {
info: t,
log: t,
warn: t,
error: t,
group: t,
groupCollapsed: t,
groupEnd: t
});
}
ie++;
}
}
function Be() {
{
if (ie--, ie === 0) {
var t = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: K({}, t, {
value: ve
}),
info: K({}, t, {
value: Se
}),
warn: K({}, t, {
value: Le
}),
error: K({}, t, {
value: nt
}),
group: K({}, t, {
value: Re
}),
groupCollapsed: K({}, t, {
value: Pe
}),
groupEnd: K({}, t, {
value: Ie
})
});
}
ie < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var Ae = $.ReactCurrentDispatcher, Ue;
function je(t, s, h) {
{
if (Ue === void 0)
try {
throw Error();
} catch (A) {
var w = A.stack.trim().match(/\n( *(at )?)/);
Ue = w && w[1] || "";
}
return `
` + Ue + t;
}
}
var Te = !1, Ee;
{
var se = typeof WeakMap == "function" ? WeakMap : Map;
Ee = new se();
}
function Ce(t, s) {
if (!t || Te)
return "";
{
var h = Ee.get(t);
if (h !== void 0)
return h;
}
var w;
Te = !0;
var A = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var H;
H = Ae.current, Ae.current = null, qe();
try {
if (s) {
var z = function() {
throw Error();
};
if (Object.defineProperty(z.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(z, []);
} catch (le) {
w = le;
}
Reflect.construct(t, [], z);
} else {
try {
z.call();
} catch (le) {
w = le;
}
t.call(z.prototype);
}
} else {
try {
throw Error();
} catch (le) {
w = le;
}
t();
}
} catch (le) {
if (le && w && typeof le.stack == "string") {
for (var E = le.stack.split(`
`), ae = w.stack.split(`
`), G = E.length - 1, Z = ae.length - 1; G >= 1 && Z >= 0 && E[G] !== ae[Z]; )
Z--;
for (; G >= 1 && Z >= 0; G--, Z--)
if (E[G] !== ae[Z]) {
if (G !== 1 || Z !== 1)
do
if (G--, Z--, Z < 0 || E[G] !== ae[Z]) {
var pe = `
` + E[G].replace(" at new ", " at ");
return t.displayName && pe.includes("<anonymous>") && (pe = pe.replace("<anonymous>", t.displayName)), typeof t == "function" && Ee.set(t, pe), pe;
}
while (G >= 1 && Z >= 0);
break;
}
}
} finally {
Te = !1, Ae.current = H, Be(), Error.prepareStackTrace = A;
}
var De = t ? t.displayName || t.name : "", ze = De ? je(De) : "";
return typeof t == "function" && Ee.set(t, ze), ze;
}
function Ve(t, s, h) {
return Ce(t, !1);
}
function Oe(t) {
var s = t.prototype;
return !!(s && s.isReactComponent);
}
function fe(t, s, h) {
if (t == null)
return "";
if (typeof t == "function")
return Ce(t, Oe(t));
if (typeof t == "string")
return je(t);
switch (t) {
case q:
return je("Suspense");
case C:
return je("SuspenseList");
}
if (typeof t == "object")
switch (t.$$typeof) {
case u:
return Ve(t.render);
case k:
return fe(t.type, s, h);
case f: {
var w = t, A = w._payload, H = w._init;
try {
return fe(H(A), s, h);
} catch {
}
}
}
return "";
}
var ue = Object.prototype.hasOwnProperty, ne = {}, be = $.ReactDebugCurrentFrame;
function ce(t) {
if (t) {
var s = t._owner, h = fe(t.type, t._source, s ? s.type : null);
be.setExtraStackFrame(h);
} else
be.setExtraStackFrame(null);
}
function wt(t, s, h, w, A) {
{
var H = Function.call.bind(ue);
for (var z in t)
if (H(t, z)) {
var E = void 0;
try {
if (typeof t[z] != "function") {
var ae = Error((w || "React class") + ": " + h + " type `" + z + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof t[z] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw ae.name = "Invariant Violation", ae;
}
E = t[z](s, z, w, h, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (G) {
E = G;
}
E && !(E instanceof Error) && (ce(A), p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", w || "React class", h, z, typeof E), ce(null)), E instanceof Error && !(E.message in ne) && (ne[E.message] = !0, ce(A), p("Failed %s type: %s", h, E.message), ce(null));
}
}
}
var we = Array.isArray;
function Ye(t) {
return we(t);
}
function de(t) {
{
var s = typeof Symbol == "function" && Symbol.toStringTag, h = s && t[Symbol.toStringTag] || t.constructor.name || "Object";
return h;
}
}
function yt(t) {
try {
return st(t), !1;
} catch {
return !0;
}
}
function st(t) {
return "" + t;
}
function at(t) {
if (yt(t))
return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", de(t)), st(t);
}
var _e = $.ReactCurrentOwner, kt = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, lt, ct;
function Ft(t) {
if (ue.call(t, "ref")) {
var s = Object.getOwnPropertyDescriptor(t, "ref").get;
if (s && s.isReactWarning)
return !1;
}
return t.ref !== void 0;
}
function Nt(t) {
if (ue.call(t, "key")) {
var s = Object.getOwnPropertyDescriptor(t, "key").get;
if (s && s.isReactWarning)
return !1;
}
return t.key !== void 0;
}
function Rt(t, s) {
typeof t.ref == "string" && _e.current;
}
function We(t, s) {
{
var h = function() {
lt || (lt = !0, p("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
};
h.isReactWarning = !0, Object.defineProperty(t, "key", {
get: h,
configurable: !0
});
}
}
function Tt(t, s) {
{
var h = function() {
ct || (ct = !0, p("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
};
h.isReactWarning = !0, Object.defineProperty(t, "ref", {
get: h,
configurable: !0
});
}
}
var Et = function(t, s, h, w, A, H, z) {
var E = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: r,
// Built-in properties that belong on the element
type: t,
key: s,
ref: h,
props: z,
// Record the component responsible for creating this element.
_owner: H
};
return E._store = {}, Object.defineProperty(E._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(E, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: w
}), Object.defineProperty(E, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: A
}), Object.freeze && (Object.freeze(E.props), Object.freeze(E)), E;
};
function Ot(t, s, h, w, A) {
{
var H, z = {}, E = null, ae = null;
h !== void 0 && (at(h), E = "" + h), Nt(s) && (at(s.key), E = "" + s.key), Ft(s) && (ae = s.ref, Rt(s, A));
for (H in s)
ue.call(s, H) && !kt.hasOwnProperty(H) && (z[H] = s[H]);
if (t && t.defaultProps) {
var G = t.defaultProps;
for (H in G)
z[H] === void 0 && (z[H] = G[H]);
}
if (E || ae) {
var Z = typeof t == "function" ? t.displayName || t.name || "Unknown" : t;
E && We(z, Z), ae && Tt(z, Z);
}
return Et(t, E, ae, A, w, _e.current, z);
}
}
var Ke = $.ReactCurrentOwner, dt = $.ReactDebugCurrentFrame;
function ye(t) {
if (t) {
var s = t._owner, h = fe(t.type, t._source, s ? s.type : null);
dt.setExtraStackFrame(h);
} else
dt.setExtraStackFrame(null);
}
var c;
c = !1;
function a(t) {
return typeof t == "object" && t !== null && t.$$typeof === r;
}
function m() {
{
if (Ke.current) {
var t = W(Ke.current.type);
if (t)
return `
Check the render method of \`` + t + "`.";
}
return "";
}
}
function O(t) {
return "";
}
var y = {};
function L(t) {
{
var s = m();
if (!s) {
var h = typeof t == "string" ? t : t.displayName || t.name;
h && (s = `
Check the top-level render call using <` + h + ">.");
}
return s;
}
}
function B(t, s) {
{
if (!t._store || t._store.validated || t.key != null)
return;
t._store.validated = !0;
var h = L(s);
if (y[h])
return;
y[h] = !0;
var w = "";
t && t._owner && t._owner !== Ke.current && (w = " It was passed a child from " + W(t._owner.type) + "."), ye(t), p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', h, w), ye(null);
}
}
function U(t, s) {
{
if (typeof t != "object")
return;
if (Ye(t))
for (var h = 0; h < t.length; h++) {
var w = t[h];
a(w) && B(w, s);
}
else if (a(t))
t._store && (t._store.validated = !0);
else if (t) {
var A = ee(t);
if (typeof A == "function" && A !== t.entries)
for (var H = A.call(t), z; !(z = H.next()).done; )
a(z.value) && B(z.value, s);
}
}
}
function me(t) {
{
var s = t.type;
if (s == null || typeof s == "string")
return;
var h;
if (typeof s == "function")
h = s.propTypes;
else if (typeof s == "object" && (s.$$typeof === u || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
s.$$typeof === k))
h = s.propTypes;
else
return;
if (h) {
var w = W(s);
wt(h, t.props, "prop", w, t);
} else if (s.PropTypes !== void 0 && !c) {
c = !0;
var A = W(s);
p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", A || "Unknown");
}
typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function Ge(t) {
{
for (var s = Object.keys(t.props), h = 0; h < s.length; h++) {
var w = s[h];
if (w !== "children" && w !== "key") {
ye(t), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", w), ye(null);
break;
}
}
t.ref !== null && (ye(t), p("Invalid attribute `ref` supplied to `React.Fragment`."), ye(null));
}
}
var ut = {};
function $e(t, s, h, w, A, H) {
{
var z = I(t);
if (!z) {
var E = "";
(t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (E += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var ae = O();
ae ? E += ae : E += m();
var G;
t === null ? G = "null" : Ye(t) ? G = "array" : t !== void 0 && t.$$typeof === r ? (G = "<" + (W(t.type) || "Unknown") + " />", E = " Did you accidentally export a JSX literal instead of a component?") : G = typeof t, p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", G, E);
}
var Z = Ot(t, s, h, A, H);
if (Z == null)
return Z;
if (z) {
var pe = s.children;
if (pe !== void 0)
if (w)
if (Ye(pe)) {
for (var De = 0; De < pe.length; De++)
U(pe[De], t);
Object.freeze && Object.freeze(pe);
} else
p("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
U(pe, t);
}
if (ue.call(s, "key")) {
var ze = W(t), le = Object.keys(s).filter(function(Hr) {
return Hr !== "key";
}), zt = le.length > 0 ? "{key: someKey, " + le.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!ut[ze + zt]) {
var Dr = le.length > 0 ? "{" + le.join(": ..., ") + ": ...}" : "{}";
p(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, zt, ze, Dr, ze), ut[ze + zt] = !0;
}
}
return t === i ? Ge(Z) : me(Z), Z;
}
}
function dr(t, s, h) {
return $e(t, s, h, !0);
}
function Je(t, s, h) {
return $e(t, s, h, !1);
}
var _r = Je, $r = dr;
Ze.Fragment = i, Ze.jsx = _r, Ze.jsxs = $r;
}()), Ze;
}
process.env.NODE_ENV === "production" ? St.exports = so() : St.exports = ao();
var e = St.exports;
const M = He.memo(
({ onClick: n, title: r, command: l, activeStyles: i, disabled: b = !1, children: x }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
"button",
{
type: "button",
onClick: n,
onMouseDown: (g) => g.preventDefault(),
className: `btn btn-outline-secondary ${i && i.has(l) ? "active" : ""}`,
"data-bs-toggle": "tooltip",
"data-bs-placement": "bottom",
disabled: b,
children: x
}
) })
);
M.propTypes = { onClick: o.func.isRequired, title: o.string.isRequired, command: o.string, activeStyles: o.object, disabled: o.bool, children: o.node.isRequired };
M.displayName = "ToolbarButton";
const lo = () => /* @__PURE__ */ e.jsx("style", { children: '.dropdown-menu{background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.375rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.175);padding:.5rem}.dropdown-menu>*:not(div){display:block;width:100%;padding:.5rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0;text-decoration:none;border-radius:.25rem}.dropdown-menu>*:not(div):hover{background-color:#f8f9fa;color:#1e2125}.dropdown-menu div[class*="flex-wrap"] .btn{font-size:1.5rem;line-height:1;padding:.25rem;background-color:transparent;border:1px solid transparent;border-radius:.375rem;transition:background-color .15s ease-in-out}.dropdown-menu div[class*="flex-wrap"] .btn:hover{background-color:#e9ecef}' }), ke = ({ title: n, icon: r, children: l, disabled: i = !1, selectedValue: b }) => {
const [x, g] = R(!1), j = Q(null), u = V(() => {
g((C) => !C);
}, []);
J(() => {
const C = (k) => {
const f = document.querySelector(".dropdown-menu-portal");
j.current && !j.current.contains(k.target) && (!f || !f.contains(k.target)) && g(!1);
};
return x && document.addEventListener("mousedown", C), () => {
document.removeEventListener("mousedown", C);
};
}, [x]);
const q = () => {
const C = Q(null), [k, f] = R({ opacity: 0, position: "fixed" });
return J(() => {
if (j.current && C.current) {
const F = j.current.getBoundingClientRect(), T = C.current.offsetWidth, N = C.current.offsetHeight, ee = window.innerWidth, $ = window.innerHeight;
let p = F.bottom + 4, d = F.left;
d + T > ee && (d = F.right - T), p + N > $ && (p = F.top - N - 4), f({
position: "fixed",
top: `${Math.max(5, p)}px`,
left: `${Math.max(5, d)}px`,
zIndex: 2050,
opacity: 1
});
}
}, []), /* @__PURE__ */ e.jsx(
"div",
{
ref: C,
className: "dropdown-menu dropdown-menu-portal show",
style: k,
onClick: (F) => {
F.target.closest("button") && g(!1);
},
children: l
}
);
};
return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(lo, {}),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", ref: j, children: [
/* @__PURE__ */ e.jsxs("button", { type: "button", onClick: u, onMouseDown: (C) => C.preventDefault(), className: "btn btn-outline-secondary d-flex align-items-center gap-1 py-2 px-2", "aria-haspopup": "true", "aria-expanded": x, title: n, disabled: i, style: { minWidth: b ? "110px" : "auto" }, children: [
b ? /* @__PURE__ */ e.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: "13px", textAlign: "left", flexGrow: 1 }, children: b }) : r,
/* @__PURE__ */ e.jsx(_t, { size: 14, style: { marginLeft: "auto" } })
] }),
x && hr.createPortal(/* @__PURE__ */ e.jsx(q, {}), document.body)
] })
] });
};
ke.propTypes = { title: o.string.isRequired, icon: o.node, children: o.node.isRequired, disabled: o.bool, selectedValue: o.string };
const co = () => /* @__PURE__ */ e.jsx("style", { children: ".color-swatch{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-swatch:hover{transform:scale(1.15);box-shadow:0 0 0 3px rgba(0,0,0,.1)}" }), uo = [
"#000000",
"#222222",
"#444444",
"#666666",
"#888888",
"#999999",
"#BBBBBB",
"#CCCCCC",
"#DDDDDD",
"#EEEEEE",
"#FFFFFF",
"#FF0000",
"#CC0000",
"#990000",
"#660000",
"#FF6666",
"#FF9900",
"#FF6600",
"#CC6600",
"#FFB84D",
"#FFFF00",
"#FFEE00",
"#CCCC00",
"#999900",
"#00FF00",
"#00CC00",
"#009900",
"#66FF66",
"#33CC33",
"#00FFFF",
"#00CCCC",
"#009999",
"#66FFFF",
"#0000FF",
"#0000CC",
"#000099",
"#6666FF",
"#3366FF",
"#9900FF",
"#6600CC",
"#9933FF",
"#CC99FF",
"#FF00FF",
"#CC00CC",
"#FF66FF",
"#FF99FF"
], Lt = ({ command: n, applyStyle: r, currentStyles: l }) => {
const [i, b] = R(n === "foreColor" ? "#000000" : "#ffff00"), x = n === "foreColor" ? "Text Color" : "Highlight Color";
J(() => {
if (l) {
const u = n === "foreColor" ? l.foreColor : l.backColor;
u && b(u);
}
}, [l, n]);
const g = (u) => {
b(u), r(n, u);
}, j = /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
n === "foreColor" ? /* @__PURE__ */ e.jsx($t, { size: 18 }) : /* @__PURE__ */ e.jsx(Dt, { size: 18 }),
/* @__PURE__ */ e.jsx("div", { style: { width: "15px", height: "4px", backgroundColor: i, borderRadius: "2px", border: "1px solid #ced4da" } })
]
}
);
return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(co, {}),
/* @__PURE__ */ e.jsx(ke, { title: x, icon: j, children: /* @__PURE__ */ e.jsx("div", { className: "p-3 d-flex flex-wrap gap-1", style: { width: "160px" }, children: uo.map((u) => /* @__PURE__ */ e.jsx("button", { type: "button", className: "color-swatch", style: { backgroundColor: u }, onClick: () => g(u), "aria-label": u }, u)) }) })
] });
};
Lt.propTypes = { command: o.oneOf(["foreColor", "backColor"]).isRequired, applyStyle: o.func.isRequired, currentStyles: o.object };
const po = [
"๐ป",
"๐ฅ๏ธ",
"๐ฑ๏ธ",
"โจ๏ธ",
"๐จ๏ธ",
"๐ฑ",
"๐ฒ",
"๐น๏ธ",
"๐งโ๐ป",
"๐จโ๐ป",
"๐ฉโ๐ป",
"๐ง",
"๐จ",
"โ๏ธ",
"๐งฐ",
"๐ก",
"๐",
"๐",
"๐พ",
"๐",
"๐",
"๐๏ธ",
"๐",
"๐",
"๐",
"๐",
"๐",
"๐",
"๐ก๏ธ",
"๐",
"โก",
"๐",
"๐งช",
"๐ก",
"๐ค",
"๐งฉ",
"๐งฌ",
"๐ ๏ธ",
"๐ง",
"๐",
"๐ฅ",
"๐ค"
], gr = ({ applyStyle: n }) => /* @__PURE__ */ e.jsx(ke, { title: "Insert Emoji", icon: /* @__PURE__ */ e.jsx(Ht, { size: 16 }), children: /* @__PURE__ */ e.jsx("div", { className: "p-2 d-flex flex-wrap gap-1", style: { maxHeight: "200px", width: "250px", overflowY: "auto" }, children: po.map((r) => /* @__PURE__ */ e.jsx("button", { className: "btn btn-sm btn-light fs-5", onClick: () => n("insertText", r), children: r }, r)) }) });
gr.propTypes = { applyStyle: o.func.isRequired };
const fr = [
"Arial",
"Georgia",
"Helvetica",
"Tahoma",
"Times New Roman",
"Verdana",
"Courier New"
], fo = { Small: "2", Normal: "3", Large: "5", Huge: "7" }, mo = {
"Heading 1": "<h1>",
"Heading 2": "<h2>",
"Heading 3": "<h3>",
"Heading 4": "<h4>",
"Heading 5": "<h5>",
Paragraph: "<p>"
}, Qe = { Single: "1", 1.15: "1.15", 1.5: "1.5", Double: "2" }, bo = {
"13.3333px": "Small",
"16px": "Normal",
"24px": "Large",
"42.6667px": "Huge"
}, xo = {
h1: "Heading 1",
h2: "Heading 2",
h3: "Heading 3",
h4: "Heading 4",
h5: "Heading 5",
p: "Paragraph"
}, pt = "width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; padding: 0;", xe = "padding: 0; vertical-align: top;", ft = "<style>@media screen and (max-width: 600px) { .responsive-cell { display: block !important; width: 100% !important; box-sizing: border-box !important; } }</style>", ho = {
"2 Columns (1:1)": `${ft}<table class="responsive-table" style="${pt}"><tbody><tr><td class="responsive-cell" style="${xe} width: 50%;"><p>C1</p></td><td class="responsive-cell" style="${xe} width: 50%;"><p>C2</p></td></tr></tbody></table>`,
"3 Columns (1:1:1)": `${ft}<table class="responsive-table" style="${pt}"><tbody><tr><td class="responsive-cell" style="${xe} width: 33.33%;"><p>C1</p></td><td class="responsive-cell" style="${xe} width: 33.33%;"><p>C2</p></td><td class="responsive-cell" style="${xe} width: 33.33%;"><p>C3</p></td></tr></tbody></table>`,
"2 Columns (1:2)": `${ft}<table class="responsive-table" style="${pt}"><tbody><tr><td class="responsive-cell" style="${xe} width: 33.33%;"><p>C1</p></td><td class="responsive-cell" style="${xe} width: 66.66%;"><p>C2</p></td></tr></tbody></table>`,
"2 Columns (2:1)": `${ft}<table class="responsive-table" style="${pt}"><tbody><tr><td class="responsive-cell" style="${xe} width: 66.66%;"><p>C1</p></td><td class="responsive-cell" style="${xe} width: 33.33%;"><p>C2</p></td></tr></tbody></table>`
}, vr = ({
currentStyles: n,
applyStyle: r,
applyLineHeight: l,
activeStyles: i,
onOpenLinkModal: b,
onImageUpload: x,
onDocxUpload: g,
onVideoModalOpen: j,
onTableModalOpen: u,
onAiRefactor: q,
content: C,
isGenerating: k,
isAiLoadingMinimized: f
}) => {
const F = Q(null), T = Q(null), N = Q(null), [ee, $] = R({
headings: "Paragraph",
fontFamily: "Arial",
fontSize: "Normal",
lineHeight: "Single"
});
J(() => {
var d;
if (n && Object.keys(n).length > 0) {
const S = {};
S.headings = xo[n.formatBlock] || "Paragraph", S.fontFamily = fr.find(
(re) => {
var v;
return (v = n.fontName) == null ? void 0 : v.toLowerCase().includes(re.toLowerCase());
}
) || "Arial", S.fontSize = ((d = Object.entries(bo).find(
([re]) => {
var v;
return (v = n.fontSize) == null ? void 0 : v.includes(re);
}
)) == null ? void 0 : d[1]) || "Normal";
let _ = "Single";
const Y = n.lineHeight, te = n.fontSize;
if (Y && Y !== "normal")
if (Y.endsWith("px") && (te != null && te.endsWith("px"))) {
const re = parseFloat(Y), v = parseFloat(te);
if (v > 0) {
const I = (re / v).toFixed(2);
_ = Object.keys(Qe).find(
(X) => parseFloat(Qe[X]).toFixed(2) === I
) || _;
}
} else
_ = Object.keys(Qe).find(
(re) => Qe[re] === Y
) || _;
else Y === "normal" && (_ = "1.15");
S.lineHeight = _, $((re) => ({ ...re, ...S }));
}
}, [n]);
const p = (d, S) => {
$((_) => ({ ..._, [d]: S }));
};
return J(() => {
if (F.current && typeof window.bootstrap < "u") {
const S = [].slice.call(
F.current.querySelectorAll('[data-bs-toggle="tooltip"]')
).map(
(_) => new window.bootstrap.Tooltip(_)
);
return () => S.forEach((_) => _ == null ? void 0 : _.dispose());
}
}, []), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsxs("div", { ref: F, className: "p-2 border-bottom d-flex flex-wrap align-items-center gap-2", children: [
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", role: "group", children: [
/* @__PURE__ */ e.jsx(M, { title: "Undo (Ctrl+Z)", onClick: () => r("undo"), children: /* @__PURE__ */ e.jsx(Mt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Redo (Ctrl+Y)", onClick: () => r("redo"), children: /* @__PURE__ */ e.jsx(Pt, { size: 16 }) })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(ke, { title: "Headings", selectedValue: ee.headings, children: Object.entries(mo).map(([d, S]) => /* @__PURE__ */ e.jsxs(
"button",
{
className: "dropdown-item",
onClick: () => {
r("formatBlock", S), p("headings", d);
},
children: [
d,
" "
]
},
d
)) }),
/* @__PURE__ */ e.jsx(ke, { title: "Font Family", selectedValue: ee.fontFamily, children: fr.map((d) => /* @__PURE__ */ e.jsxs(
"button",
{
className: "dropdown-item",
style: { fontFamily: d },
onClick: () => {
r("fontName", d), p("fontFamily", d);
},
children: [
" ",
d
]
},
d
)) }),
/* @__PURE__ */ e.jsx(ke, { title: "Font Size", selectedValue: ee.fontSize, children: Object.entries(fo).map(([d, S]) => /* @__PURE__ */ e.jsx(
"button",
{
className: "dropdown-item",
onClick: () => {
r("fontSize", S), p("fontSize", d);
},
children: d
},
d
)) }),
/* @__PURE__ */ e.jsxs(
ke,
{
title: "Line Height",
selectedValue: ee.lineHeight,
children: [
Object.entries(Qe).map(([d, S]) => /* @__PURE__ */ e.jsxs(
"button",
{
className: "dropdown-item",
style: { fontSize: "14px" },
onClick: () => {
l(S), p("lineHeight", d);
},
children: [
d,
" "
]
},
d
)),
/* @__PURE__ */ e.jsx(
"button",
{
className: "dropdown-item text-danger border-top mt-2",
style: { fontSize: "14px" },
onClick: () => {
l("normal"), p("lineHeight", "Single");
},
children: " Remove Height "
}
)
]
}
)
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(M, { title: "Bold (Ctrl+B)", command: "bold", activeStyles: i, onClick: () => r("bold"), children: /* @__PURE__ */ e.jsx(qt, { size: 14 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Italic (Ctrl+I)", command: "italic", activeStyles: i, onClick: () => r("italic"), children: /* @__PURE__ */ e.jsx(Bt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Underline (Ctrl+U)", command: "underline", activeStyles: i, onClick: () => r("underline"), children: /* @__PURE__ */ e.jsx(Ut, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Strikethrough", command: "strikeThrough", activeStyles: i, onClick: () => r("strikeThrough"), children: /* @__PURE__ */ e.jsx(Vt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Superscript", command: "superscript", activeStyles: i, onClick: () => r("superscript"), children: /* @__PURE__ */ e.jsx(Yt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Subscript", command: "subscript", activeStyles: i, onClick: () => r("subscript"), children: /* @__PURE__ */ e.jsx(Wt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(gr, { applyStyle: r })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(Lt, { command: "foreColor", applyStyle: r, currentStyles: n }),
/* @__PURE__ */ e.jsx(Lt, { command: "backColor", applyStyle: r, currentStyles: n })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(M, { title: "Align Left", command: "justifyLeft", activeStyles: i, onClick: () => r("justifyLeft"), children: /* @__PURE__ */ e.jsx(Kt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Align Center", command: "justifyCenter", activeStyles: i, onClick: () => r("justifyCenter"), children: /* @__PURE__ */ e.jsx(Gt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Align Right", command: "justifyRight", activeStyles: i, onClick: () => r("justifyRight"), children: /* @__PURE__ */ e.jsx(Jt, { size: 16 }) })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(M, { title: "Ordered List", command: "insertOrderedList", activeStyles: i, onClick: () => r("insertOrderedList"), children: /* @__PURE__ */ e.jsx(Xt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Unordered List", command: "insertUnorderedList", activeStyles: i, onClick: () => r("insertUnorderedList"), children: /* @__PURE__ */ e.jsx(Zt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Outdent", onClick: () => r("outdent"), children: /* @__PURE__ */ e.jsx(Qt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Indent", onClick: () => r("indent"), children: /* @__PURE__ */ e.jsx(er, { size: 16 }) })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(M, { title: "Blockquote", onClick: () => r("formatBlock", "<blockquote>"), children: /* @__PURE__ */ e.jsx(tr, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Code Block", onClick: () => r("formatBlock", "<pre>"), children: /* @__PURE__ */ e.jsx(rr, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Add/Edit Link (Ctrl+K)", onClick: b, children: /* @__PURE__ */ e.jsx(rt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Horizontal Line", onClick: () => r("insertHorizontalRule"), children: /* @__PURE__ */ e.jsx(or, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Clear Formatting", onClick: () => r("removeFormat"), children: /* @__PURE__ */ e.jsx(nr, { size: 16 }) })
] }),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group", children: [
/* @__PURE__ */ e.jsx(M, { title: "Insert Image", onClick: () => {
var d;
return (d = T.current) == null ? void 0 : d.click();
}, children: /* @__PURE__ */ e.jsx(ir, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Insert Video", onClick: j, children: /* @__PURE__ */ e.jsx(vt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(M, { title: "Insert Table", onClick: u, children: /* @__PURE__ */ e.jsx(jt, { size: 16 }) }),
/* @__PURE__ */ e.jsx(ke, { title: "Insert Columns", icon: /* @__PURE__ */ e.jsx(sr, { size: 16 }), children: Object.entries(ho).map(([d, S]) => /* @__PURE__ */ e.jsx("button", { className: "dropdown-item", style: { fontSize: "14px" }, onClick: () => r("insertHTML", S + "<p><br></p>"), children: d }, d)) }),
/* @__PURE__ */ e.jsx(M, { title: "Import from Word (.docx)", onClick: () => {
var d;
return (d = N.current) == null ? void 0 : d.click();
}, children: /* @__PURE__ */ e.jsx(ar, { size: 16 }) })
] }),
/* @__PURE__ */ e.jsx("div", { className: "btn-group", children: /* @__PURE__ */ e.jsx(M, { title: "Improve with AI", onClick: q, disabled: !C || C === "" || k, children: k && !f ? /* @__PURE__ */ e.jsx("div", { className: "spinner-border spinner-border-sm", role: "status", children: /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) : /* @__PURE__ */ e.jsx(ot, { size: 16 }) }) })
] }),
/* @__PURE__ */ e.jsx("input", { type: "file", accept: "image/*", ref: T, onChange: x, className: "d-none" }),
/* @__PURE__ */ e.jsx("input", { type: "file", accept: ".docx", ref: N, onChange: g, className: "d-none" })
] });
};
vr.propTypes = { currentStyles: o.object, applyStyle: o.func.isRequired, applyLineHeight: o.func.isRequired, activeStyles: o.object.isRequired, onOpenLinkModal: o.func.isRequired, onImageUpload: o.func.isRequired, onDocxUpload: o.func.isRequired, onVideoModalOpen: o.func.isRequired, onTableModalOpen: o.func.isRequired, onAiRefactor: o.func.isRequired, content: o.string, isGenerating: o.bool.isRequired, isAiLoadingMinimized: o.bool.isRequired };
const go = () => /* @__PURE__ */ e.jsx("style", { children: '.forma-text-tooltip-container{position:relative;display:inline-block}.forma-text-tooltip{visibility:hidden;opacity:0;width:max-content;background-color:#63b1ff;color:#fff;text-align:center;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:500;position:absolute;z-index:10;top:130%;left:50%;transform:translateX(-50%);transition:opacity .2s ease-in-out}.forma-text-tooltip::after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #63b1ff transparent}.forma-text-tooltip-container:hover .forma-text-tooltip{visibility:visible;opacity:1}' }), P = He.memo(
({
onClick: n,
title: r,
command: l,
activeStyles: i,
disabled: b = !1,
children: x,
className: g = ""
}) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(go, {}),
/* @__PURE__ */ e.jsx("div", { className: "forma-text-tooltip-container", children: /* @__PURE__ */ e.jsx("button", { type: "button", onClick: n, onMouseDown: (j) => j.preventDefault(), className: `modern-toolbar-button ${i && i.has(l) ? "active" : ""} ${g}`, disabled: b, children: x }) })
] })
);
P.propTypes = { onClick: o.func.isRequired, title: o.string.isRequired, command: o.string, activeStyles: o.object, disabled: o.bool, children: o.node.isRequired, className: o.string };
P.displayName = "ModernToolbarButton";
const vo = () => /* @__PURE__ */ e.jsx("style", { children: '.dropdown-menu{background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.375rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.175);padding:.5rem}.dropdown-menu>*:not(div){display:block;width:100%;padding:.5rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0;text-decoration:none;border-radius:.25rem}.dropdown-menu>*:not(div):hover{background-color:#f8f9fa;color:#1e2125}.dropdown-menu div[class*="flex-wrap"] .btn{font-size:1.5rem;line-height:1;padding:.25rem;background-color:transparent;border:1px solid transparent;border-radius:.375rem;transition:background-color .15s ease-in-out}.dropdown-menu div[class*="flex-wrap"] .btn:hover{background-color:#007dfbff!important}.btn.forma-text-toolbar-button:hover{background-color:#e8f0fe!important;color:#1967d2!important}' }), Fe = ({ title: n, icon: r, children: l, disabled: i = !1, selectedValue: b }) => {
const [x, g] = R(!1), j = Q(null), u = V(() => {
g((C) => !C);
}, []);
J(() => {
const C = (k) => {
const f = document.querySelector(".dropdown-menu-portal");
j.current && !j.current.contains(k.target) && (!f || !f.contains(k.target)) && g(!1);
};
return x && document.addEventListener("mousedown", C), () => {
document.removeEventListener("mousedown", C);
};
}, [x]);
const q = () => {
const C = Q(null), [k, f] = R({
opacity: 0,
position: "fixed"
});
return J(() => {
if (j.current && C.current) {
const F = j.current.getBoundingClientRect(), T = C.current.offsetWidth, N = C.current.offsetHeight, ee = window.innerWidth, $ = window.innerHeight;
let p = F.bottom + 4, d = F.left;
d + T > ee && (d = F.right - T), p + N > $ && (p = F.top - N - 4), f({
position: "fixed",
top: `${Math.max(5, p)}px`,
left: `${Math.max(5, d)}px`,
zIndex: 2050,
opacity: 1
});
}
}, []), /* @__PURE__ */ e.jsx(
"div",
{
ref: C,
className: "dropdown-menu dropdown-menu-portal show",
style: k,
onClick: (F) => {
F.target.closest("button") && g(!1);
},
children: l
}
);
};
return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(vo, {}),
/* @__PURE__ */ e.jsxs("div", { className: "btn-group ", ref: j, children: [
/* @__PURE__ */ e.jsxs(
"button",
{
type: "button",
onClick: u,
onMouseDown: (C) => C.preventDefault(),
className: "btn d-flex align-items-center gap-1 py-2 px-2 forma-text-toolbar-button",
"aria-haspopup": "true",
"aria-expanded": x,
title: n,
disabled: i,
style: { minWidth: b ? "110px" : "auto" },
children: [
b ? /* @__PURE__ */ e.jsxs(
"span",
{
style: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
fontSize: "13px",
textAlign: "left",
flexGrow: 1
},
children: [
/* @__PURE__ */ e.jsx("span", { className: "me-2", children: r }),
" ",
b
]
}
) : r,
/* @__PURE__ */ e.jsx(_t, { size: 14 })
]
}
),
x && hr.createPortal(/* @__PURE__ */ e.jsx(q, {}), document.body)
] })
] });
};
Fe.propTypes = {
title: o.string.isRequired,
icon: o.node,
children: o.node.isRequired,
disabled: o.bool,
selectedValue: o.string
};
const jo = [
"#000000",
"#222222",
"#444444",
"#666666",
"#888888",
"#999999",
"#BBBBBB",
"#CCCCCC",
"#DDDDDD",
"#EEEEEE",
"#FFFFFF",
"#FF0000",
"#CC0000",
"#990000",
"#660000",
"#FF6666",
"#FF9900",
"#FF6600",
"#CC6600",
"#FFB84D",
"#FFFF00",
"#FFEE00",
"#CCCC00",
"#999900",
"#00FF00",
"#00CC00",
"#009900",
"#66FF66",
"#33CC33",
"#00FFFF",
"#00CCCC",
"#009999",
"#66FFFF",
"#0000FF",
"#0000CC",
"#000099",
"#6666FF",
"#3366FF",
"#9900FF",
"#6600CC",
"#9933FF",
"#CC99FF",
"#FF00FF",
"#CC00CC",
"#FF66FF",
"#FF99FF"
], It = ({ command: n, applyStyle: r, currentStyles: l }) => {
const [i, b] = R(
n === "foreColor" ? "#000000" : "#FFFF00"
), x = n === "foreColor" ? "Text Color" : "Highlight Color";
J(() => {
if (l) {
const u = n === "foreColor" ? l.foreColor : l.backColor;
u && b(u);
}
}, [l, n]);
const g = (u) => {
b(u), r(n, u);
}, j = n === "foreColor" ? /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center"
},
children: [
/* @__PURE__ */ e.jsx($t, { size: 18 }),
/* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "16px",
height: "4px",
backgroundColor: i,
borderRadius: "2px",
marginTop: "2px"
}
}
)
]
}
) : /* @__PURE__ */ e.jsxs(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center"
},
children: [
/* @__PURE__ */ e.jsx(Dt, { size: 18 }),
/* @__PURE__ */ e.jsx(
"div",
{
style: {
width: "16px",
height: "4px",
backgroundColor: i,
borderRadius: "2px",
marginTop: "2px"
}
}
)
]
}
);
return /* @__PURE__ */ e.jsx(Fe, { title: x, icon: j, children: /* @__PURE__ */ e.jsx("div", { className: "modern-color-picker", children: jo.map((u) => /* @__PURE__ */ e.jsx(
"button",
{
type: "button",
className: "modern-color-swatch",
style: { backgroundColor: u },
onClick: () => g(u),
"aria-label": u
},
u
)) }) });
};
It.propTypes = {
command: o.oneOf(["foreColor", "backColor"]).isRequired,
applyStyle: o.func.isRequired,
// We now expect the currentStyles from the parent
currentStyles: o.object
};
const Co = [
"๐ป",
"๐ฅ๏ธ",
"๐ฑ๏ธ",
"โจ๏ธ",
"๐จ๏ธ",
"๐ฑ",
"๐ฒ",
"๐น๏ธ",
"๐งโํ ฝ