@forgedevstack/ink 1.1.3 → 1.1.4

package/dist/components/InkEditor/InkEditor.js

@@ -1,651 +1,1135 @@
-import { jsxs as M, jsx as a } from "react/jsx-runtime";
-import { useRef as Pe, useState as m, useEffect as _ } from "react";
-import { INK_MIN_HEIGHT as Wt, INK_DEFAULT_TEXT_COLOR as $t, INK_DEFAULT_HIGHLIGHT_COLOR as zt } from "../../constants/numbers.js";
-import { TOOLBAR_OPTION_SIGNATURE as xe, TOOLBAR_OPTION_FIND_REPLACE as Be, TOOLBAR_OPTION_HORIZONTAL_RULE as Ue } from "../../constants/toolbar.const.js";
-import { INK_PLACEHOLDER_DEFAULT as qt, INK_DEFAULT_TOOLBAR as Xt, INK_DEFAULT_VARIANT as Qt, INK_DEFAULT_AUTHOR as Yt, INK_TABLE_DEFAULT_ROWS as Zt, INK_TABLE_DEFAULT_COLS as Jt, INK_DEFAULT_FEATURES as en, INK_CLASS_TOOLBAR as tn, INK_CLASS_SHELL as nn, INK_CLASS_BODY as rn, INK_CLASS_CONTENT as on, INK_CLASS_FOOTER as cn, INK_CLASS_DIVIDER as sn, INK_HEADING_OPTIONS as an, INK_BUTTON_CONFIG as De, INK_CLASS_ROOT as ln } from "../../constants/defaults.const.js";
-import { INK_DEFAULT_ICONS as Fe } from "../../constants/premium.const.js";
-import { cn as un } from "../../utils/cn.utils.js";
-import { applyTypoAutoFix as mn } from "../../utils/typo.utils.js";
-import { createInkId as Ke } from "../../utils/id.utils.js";
-import { buildTableHtml as dn } from "../../utils/table.utils.js";
-import { getBlockElement as Me, moveBlock as fn, markActiveBlock as pn } from "../../utils/blocks.utils.js";
-import { createTrackChange as J, rejectTrackChangeInHtml as hn, acceptTrackChangeInHtml as gn, wrapInsertHtml as Ve, wrapDeleteHtml as Cn } from "../../utils/trackChanges.utils.js";
-import { removeCommentMark as kn, wrapSelectionAsComment as Tn, createCommentThread as In } from "../../utils/comments.utils.js";
-import { InkHistoryStack as ee } from "../../utils/history.utils.js";
-import { extractSlashQuery as bn, filterSlashCommands as An } from "../../utils/slash.utils.js";
-import { resolveInkPremium as Ln, hasInkPremiumFeature as U, themeTokensToStyle as wn } from "../../utils/premium.utils.js";
-import { extractClipboardHtml as Hn, sanitizePastedHtml as yn, extractClipboardText as _n } from "../../utils/paste.utils.js";
-import { readInkMemory as Nn, writeInkMemory as Sn } from "../../utils/memory.utils.js";
-import { replaceInHtml as Rn } from "../../utils/findReplace.utils.js";
-import { insertImage as te, insertHTML as A, setTextColor as vn, setHighlightColor as On, getActiveFormats as En, queryCommandValue as Pn, execCommand as k, insertLink as xn, fileToDataUrl as Bn } from "./helpers/format.utils.js";
-import { ToolbarButton as h } from "./components/ToolbarButton/ToolbarButton.js";
-import { ToolbarDropdown as Un } from "./components/ToolbarDropdown/ToolbarDropdown.js";
-import { ToolbarColorPicker as je } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
-import { CommentsPanel as Dn } from "./components/CommentsPanel/CommentsPanel.js";
-import { AiPanel as Fn } from "./components/AiPanel/AiPanel.js";
-import { BlockHandles as Kn } from "./components/BlockHandles/BlockHandles.js";
-import { SlashMenu as Mn } from "./components/SlashMenu/SlashMenu.js";
-import { TrackChangesBar as Vn } from "./components/TrackChangesBar/TrackChangesBar.js";
-import { SignPad as jn } from "./components/SignPad/SignPad.js";
-import { FindReplace as Gn } from "./components/FindReplace/FindReplace.js";
-const ne = () => {
-  const N = window.getSelection();
-  if (!N || N.rangeCount === 0) return "";
-  const g = N.getRangeAt(0), T = document.createElement("div");
-  return T.appendChild(g.cloneContents()), T.innerHTML;
-}, br = (N) => {
-  var Ee;
+import { jsxs as ce, jsx as s } from "react/jsx-runtime";
+import { useRef as S, useState as a, useEffect as I } from "react";
+import { INK_MIN_HEIGHT as bo, INK_DEFAULT_TEXT_COLOR as Ro, INK_DEFAULT_HIGHLIGHT_COLOR as Do, NUMBER_ZERO as _ } from "../../constants/numbers.js";
+import { TOOLBAR_OPTION_FONT_DROPDOWN as St, TOOLBAR_OPTION_LIST_DROPDOWN as Mt, TOOLBAR_OPTION_SIGNATURE as kt, TOOLBAR_OPTION_FIND_REPLACE as Ut, TOOLBAR_OPTION_FIND_REPLACE_DROPDOWN as wt, TOOLBAR_OPTION_HORIZONTAL_RULE as Ht } from "../../constants/toolbar.const.js";
+import { TOOLBAR_SHOW_CONTROL_LABEL as Bo, TOOLBAR_SHOW_CONTROL_ARIA_LABEL as So, CONTEXT_MENU_LABEL_SHOW_TOOLBAR as Mo, CONTEXT_MENU_ID_SHOW_TOOLBAR as ko, TOOLBAR_CONTEXT_MENU_LABEL_CUSTOMIZE as Uo, TOOLBAR_CONTEXT_MENU_ID_CUSTOMIZE as wo, TOOLBAR_CONTEXT_MENU_LABEL_HIDE as Ho, TOOLBAR_CONTEXT_MENU_ID_HIDE as Po, TOOLBAR_OPTION_DIVIDER as Pt } from "../../constants/toolbarMenu.const.js";
+import { INK_DEFAULT_COLOR_MODE as yo, COLOR_MODE_SYSTEM as Fo } from "../../constants/colorMode.const.js";
+import { KEY_TAB as vo, KEY_ENTER as xo, KEY_ESCAPE as Xo, KEY_Z as Ko } from "../../constants/keyboard.const.js";
+import { FONT_VALUE_SYSTEM as Wo, INK_FONT_OPTIONS as Vo, FONT_DROPDOWN_TITLE as Go } from "../../constants/fonts.const.js";
+import { LIST_VALUE_BULLET as Yo, INK_LIST_OPTIONS as zo, LIST_DROPDOWN_TITLE as jo } from "../../constants/lists.const.js";
+import { FIND_REPLACE_FOCUS_FIND as se, INK_FIND_REPLACE_OPTIONS as $o, FIND_REPLACE_DROPDOWN_TITLE as qo, FIND_REPLACE_FOCUS_REPLACE as Zo, FIND_REPLACE_VALUE_REPLACE as Qo } from "../../constants/findReplaceMenu.const.js";
+import { BLOCK_DROP_POSITION_BEFORE as Jo, DIR_LTR as er, DIR_RTL as tr } from "../../constants/blocks.const.js";
+import { INK_PLACEHOLDER_DEFAULT as nr, INK_DEFAULT_TOOLBAR as or, INK_DEFAULT_VARIANT as rr, INK_DEFAULT_CHROME as lr, INK_DEFAULT_AUTHOR as ir, INK_TABLE_DEFAULT_ROWS as cr, INK_TABLE_DEFAULT_COLS as sr, INK_DEFAULT_FEATURES as ar, INK_CLASS_TOOLBAR_SHOW as ur, INK_CLASS_TOOLBAR as dr, INK_CLASS_SHELL as fr, INK_CLASS_BODY as mr, INK_CLASS_CONTENT as _r, INK_CLASS_FOOTER as Tr, INK_CLASS_DIVIDER as Er, INK_HEADING_OPTIONS as pr, INK_BUTTON_CONFIG as yt, INK_CLASS_BLOCK_ACTIVE as Cr, INK_CLASS_ROOT as Lr } from "../../constants/defaults.const.js";
+import { INK_AI_DEMO_PROVIDER_ID as Or } from "../../constants/aiModels.const.js";
+import "../../constants/openai.const.js";
+import { INK_DEFAULT_ICONS as Ft } from "../../constants/defaultIcons.js";
+import { CONTEXT_MENU_LABEL_TABLE_ROW_ABOVE as Nr, CONTEXT_MENU_ID_TABLE_ROW_ABOVE as Ir, CONTEXT_MENU_LABEL_TABLE_ROW_BELOW as gr, CONTEXT_MENU_ID_TABLE_ROW_BELOW as hr, CONTEXT_MENU_LABEL_TABLE_COL_LEFT as Ar, CONTEXT_MENU_ID_TABLE_COL_LEFT as br, CONTEXT_MENU_LABEL_TABLE_COL_RIGHT as Rr, CONTEXT_MENU_ID_TABLE_COL_RIGHT as Dr, CONTEXT_MENU_LABEL_TABLE_DELETE_ROW as Br, CONTEXT_MENU_ID_TABLE_DELETE_ROW as Sr, CONTEXT_MENU_LABEL_TABLE_DELETE_COL as Mr, CONTEXT_MENU_ID_TABLE_DELETE_COL as kr, CONTEXT_MENU_LABEL_BOLD as Ur, CONTEXT_MENU_ID_BOLD as wr, CONTEXT_MENU_LABEL_ITALIC as Hr, CONTEXT_MENU_ID_ITALIC as Pr, CONTEXT_MENU_LABEL_UNDERLINE as yr, CONTEXT_MENU_ID_UNDERLINE as Fr, CONTEXT_MENU_LABEL_STRIKE as vr, CONTEXT_MENU_ID_STRIKE as xr, CONTEXT_MENU_LABEL_HEADING as Xr, CONTEXT_MENU_ID_HEADING as Kr, CONTEXT_MENU_LABEL_BULLET as Wr, CONTEXT_MENU_ID_BULLET as Vr, CONTEXT_MENU_LABEL_ORDERED as Gr, CONTEXT_MENU_ID_ORDERED as Yr, CONTEXT_MENU_LABEL_LINK as zr, CONTEXT_MENU_ID_LINK as jr, CONTEXT_MENU_LABEL_CLEAR as $r, CONTEXT_MENU_ID_CLEAR as qr, CONTEXT_MENU_LABEL_FIND as Zr, CONTEXT_MENU_ID_FIND as Qr, CONTEXT_MENU_LABEL_SIGNATURE as Jr, CONTEXT_MENU_ID_SIGNATURE as el, CONTEXT_MENU_LABEL_COMMENT as tl, CONTEXT_MENU_ID_COMMENT as nl } from "../../constants/contextMenu.const.js";
+import { cn as ol } from "../../utils/cn.utils.js";
+import { applyTypoAutoFix as rl } from "../../utils/typo.utils.js";
+import { createInkId as vt } from "../../utils/id.utils.js";
+import { getTableCellFromSelection as xt, buildTableHtml as ll, insertTableRow as Xt, insertTableColumn as Kt, deleteTableRow as il, deleteTableColumn as cl } from "../../utils/table.utils.js";
+import { getBlockElement as ee, clearBlockDragClasses as Pe, markActiveBlock as Wt, markDraggingBlock as sl, moveBlock as al, resolveDropPosition as Vt, reorderBlockBefore as ul, reorderBlockAfter as dl, markDropTarget as Gt } from "../../utils/blocks.utils.js";
+import { createTrackChange as ye, rejectTrackChangeInHtml as fl, acceptTrackChangeInHtml as ml, wrapInsertHtml as Yt, wrapDeleteHtml as _l } from "../../utils/trackChanges.utils.js";
+import { removeCommentMark as Tl, wrapSelectionAsComment as El, createCommentThread as pl } from "../../utils/comments.utils.js";
+import { InkHistoryStack as Fe } from "../../utils/history.utils.js";
+import { extractSlashQuery as Cl, filterSlashCommands as Ll } from "../../utils/slash.utils.js";
+import { resolveInkPremium as Ol, hasInkPremiumFeature as te, themeTokensToStyle as Nl } from "../../utils/premium.utils.js";
+import { extractClipboardHtml as Il, sanitizePastedHtml as gl, extractClipboardText as hl } from "../../utils/paste.utils.js";
+import { readInkMemory as Al, writeInkMemory as bl } from "../../utils/memory.utils.js";
+import { replaceInHtml as Rl } from "../../utils/findReplace.utils.js";
+import { withPreservedSelection as ve } from "../../utils/selection.utils.js";
+import { readToolbarItems as Dl, readToolbarHidden as Bl, listCustomizableToolbarOptions as Sl, writeToolbarHidden as Ml, buildVisibleToolbarItems as kl, writeToolbarItems as Ul } from "../../utils/toolbarStorage.utils.js";
+import { Button as wl } from "../../common-components/Button/Button.js";
+import { ContextMenu as zt } from "../../common-components/ContextMenu/ContextMenu.js";
+import { insertImage as xe, insertHTML as M, setTextColor as Hl, setHighlightColor as Pl, getActiveFormats as yl, queryCommandValue as Fl, detectListType as vl, tryConvertMarkdownListPrefix as xl, execCommand as L, insertLink as Xl, applyFontFamily as Kl, applyListType as Wl, clearFormatDeep as Vl, setBlockDirection as jt, fileToDataUrl as Gl } from "./helpers/format.utils.js";
+import { inkAi as Yl } from "../../plugins/ai/aiPlugin.js";
+import { ToolbarButton as C } from "./components/ToolbarButton/ToolbarButton.js";
+import { ToolbarDropdown as ae } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarColorPicker as $t } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
+import { CommentsPanel as zl } from "./components/CommentsPanel/CommentsPanel.js";
+import { AiPanel as jl } from "./components/AiPanel/AiPanel.js";
+import { AiAutocomplete as $l } from "./components/AiAutocomplete/AiAutocomplete.js";
+import { AI_AUTOCOMPLETE_DEBOUNCE_MS as ql, AI_AUTOCOMPLETE_COMMAND_INSERT_TEXT as Zl } from "./components/AiAutocomplete/AiAutocomplete.const.js";
+import { getTextBeforeCaret as Ql, getCaretPositionInRoot as qt } from "./components/AiAutocomplete/AiAutocomplete.utils.js";
+import { BlockHandles as Jl } from "./components/BlockHandles/BlockHandles.js";
+import { BLOCK_HANDLES_DRAG_MIME as ei, BLOCK_HANDLES_DRAG_PAYLOAD as ti, BLOCK_HANDLES_DRAG_EFFECT_MOVE as Zt } from "./components/BlockHandles/BlockHandles.const.js";
+import { InlineToolbar as ni } from "./components/InlineToolbar/InlineToolbar.js";
+import { INLINE_TOOLBAR_EDGE_PADDING_PX as oi, INLINE_TOOLBAR_ESTIMATED_WIDTH_PX as ri, INLINE_TOOLBAR_ESTIMATED_HEIGHT_PX as li, INLINE_TOOLBAR_GAP_PX as ii } from "./components/InlineToolbar/InlineToolbar.const.js";
+import { selectionIsInsideElement as ci, clampInlineToolbarPosition as si } from "./components/InlineToolbar/InlineToolbar.utils.js";
+import { SlashMenu as ai } from "./components/SlashMenu/SlashMenu.js";
+import { TrackChangesBar as ui } from "./components/TrackChangesBar/TrackChangesBar.js";
+import { SignPad as di } from "./components/SignPad/SignPad.js";
+import { FindReplace as fi } from "./components/FindReplace/FindReplace.js";
+import { ToolbarCustomize as mi } from "./components/ToolbarCustomize/ToolbarCustomize.js";
+const Xe = () => {
+  const g = window.getSelection();
+  if (!g || g.rangeCount === _) return "";
+  const p = g.getRangeAt(_), h = document.createElement("div");
+  return h.appendChild(p.cloneContents()), h.innerHTML;
+}, T = (g) => {
+  g == null || g.focus({ preventScroll: !0 });
+}, _c = (g) => {
+  var Rt;
   const {
-    value: g,
-    defaultValue: T = "",
-    onChange: C,
-    placeholder: re = qt,
-    disabled: c = !1,
+    value: p,
+    defaultValue: h = "",
+    onChange: A,
+    placeholder: Ke = nr,
+    disabled: l = !1,
     readOnly: i = !1,
-    minHeight: V = Wt,
-    maxHeight: j,
-    toolbar: Ge = Xt,
-    className: We = "",
-    testId: $e,
-    allowImagePaste: oe = !0,
-    showCharCount: ce = !1,
-    charCountMax: ie,
-    typoAutoFix: ze = !0,
-    variant: qe = Qt,
-    features: Xe,
-    author: w = Yt,
-    trackChanges: S,
-    onTrackChangesChange: G,
-    trackChangesEnabled: D,
-    onTrackChangesEnabledChange: W,
-    comments: R,
-    onCommentsChange: $,
-    showCommentsPanel: v,
-    onShowCommentsPanelChange: z,
-    ai: d,
-    slashCommands: Qe,
-    tableRows: Ye = Zt,
-    tableCols: Ze = Jt,
-    premium: Je,
-    theme: et,
-    icons: se,
-    pasteMode: tt = "plain",
-    onImageUpload: ae,
-    wysiwyg: nt = !1,
-    keepInMemory: le = !1,
-    memoryKey: ue,
-    style: rt,
-    ...ot
-  } = N, u = { ...en, ...Xe }, H = Ln(Je), ct = U(H, "icons"), it = U(H, "theme"), st = U(H, "richPaste"), at = U(H, "imageUpload"), lt = U(H, "wysiwyg") && nt, f = ct && se ? { ...Fe, ...se } : Fe, ut = it ? wn(et) : {}, mt = st && tt === "rich", r = Pe(null), O = Pe(new ee(g ?? T)), [dt, ft] = m(/* @__PURE__ */ new Set()), [pt, me] = m("p"), [ht, gt] = m(0), [Ct, kt] = m($t), [Tt, It] = m(zt), [y, de] = m(D ?? !1), [bt, fe] = m(S ?? []), [At, pe] = m(R ?? []), [Lt, he] = m(v ?? !1), [ge, q] = m(!!(d != null && d.enabled && d.openOnInit)), [Ce, wt] = m(""), [Ht, yt] = m(0), [_t, ke] = m(!1), [Nt, F] = m([]), [Te, St] = m({ top: 0, left: 0 }), [Ie, be] = m(!1), [Ae, Le] = m(!1), I = S ?? bt, E = R ?? At, X = v ?? Lt, we = Qe ?? u.slash;
-  _(() => {
-    D !== void 0 && de(D);
-  }, [D]), _(() => {
-    S && fe(S);
-  }, [S]), _(() => {
-    R && pe(R);
-  }, [R]), _(() => {
-    v !== void 0 && he(v);
-  }, [v]), _(() => {
-    !r.current || g === void 0 || r.current.innerHTML !== g && (r.current.innerHTML = g);
-  }, [g]), _(() => {
-    if (!r.current) return;
-    const e = le ? Nn(ue) : "";
+    minHeight: ue = bo,
+    maxHeight: de,
+    toolbar: ne = or,
+    className: Qt = "",
+    testId: Jt,
+    allowImagePaste: We = !0,
+    showCharCount: Ve = !1,
+    charCountMax: Ge,
+    typoAutoFix: en = !0,
+    variant: tn = rr,
+    chrome: nn = lr,
+    colorMode: Ye = yo,
+    features: on,
+    author: H = ir,
+    trackChanges: G,
+    onTrackChangesChange: fe,
+    trackChangesEnabled: oe,
+    onTrackChangesEnabledChange: me,
+    comments: Y,
+    onCommentsChange: _e,
+    showCommentsPanel: z,
+    onShowCommentsPanelChange: Te,
+    ai: f,
+    slashCommands: rn,
+    tableRows: ln = cr,
+    tableCols: cn = sr,
+    premium: sn,
+    theme: an,
+    icons: ze,
+    pasteMode: un = "plain",
+    onImageUpload: je,
+    wysiwyg: dn = !1,
+    keepInMemory: P = !1,
+    memoryKey: y,
+    onToolbarChange: Ee,
+    toolbarHidden: F,
+    onToolbarHiddenChange: pe,
+    style: fn,
+    ...mn
+  } = g, d = { ...ar, ...on }, v = Ol(sn), _n = te(v, "icons"), Tn = te(v, "theme"), En = te(v, "richPaste"), pn = te(v, "imageUpload"), Cn = te(v, "wysiwyg") && dn, m = _n && ze ? { ...Ft, ...ze } : Ft, Ln = Tn ? Nl(an) : {}, On = En && un === "rich", n = S(null), j = S(new Fe(p ?? h)), x = S(null), k = S(null), [$e, Nn] = a(/* @__PURE__ */ new Set()), [In, qe] = a("p"), [gn, hn] = a(0), [An, bn] = a(Ro), [Rn, Dn] = a(Do), [X, Ze] = a(oe ?? !1), [Bn, Qe] = a(G ?? []), [Sn, Je] = a(Y ?? []), [Mn, et] = a(z ?? !1), [tt, Ce] = a(!!(f != null && f.enabled && f.openOnInit)), [re, kn] = a(!1), nt = S(!1), [R, $] = a({
+    visible: !1,
+    suggestion: "",
+    top: _,
+    left: _
+  }), q = S(null), K = S(_), [ot, Un] = a(""), [wn, Hn] = a(0), [Pn, rt] = a(!1), [yn, le] = a([]), [lt, Fn] = a({ top: 0, left: 0 }), [it, Le] = a(!1), [Oe, ie] = a(!1), [vn, xn] = a(se), [Xn, Kn] = a(Wo), [Wn, ct] = a(Yo), [Vn, Gn] = a(se), [Ne, Ie] = a({ open: !1, x: _, y: _ }), [Yn, st] = a(!1), [ge, he] = a({
+    open: !1,
+    x: _,
+    y: _
+  }), [Ae, W] = a({
+    open: !1,
+    top: _,
+    left: _
+  }), [be, at] = a(
+    () => Dl(P, y) ?? ne
+  ), [zn, ut] = a(() => F !== void 0 ? F : Bl(P, y) ?? !1), [jn, dt] = a(!1), ft = S(!0), $n = ne.join(","), D = G ?? Bn, Z = Y ?? Sn, Re = z ?? Mn, mt = rn ?? d.slash, _t = F ?? zn, Tt = ne, qn = Sl(Tt), De = Ye === Fo ? void 0 : Ye, Be = !!(d.ai && (f != null && f.enabled) && f.autocomplete !== !1 && !l && !i), Se = () => {
+    q.current !== null && (window.clearTimeout(q.current), q.current = null);
+  }, b = () => {
+    Se(), K.current += 1, $(
+      (e) => e.visible || e.suggestion ? { visible: !1, suggestion: "", top: _, left: _ } : e
+    );
+  }, Zn = () => {
+    if (!Be || re || !n.current) {
+      b();
+      return;
+    }
+    const e = window.getSelection();
+    if (!e || !e.isCollapsed) {
+      b();
+      return;
+    }
+    Se(), $(
+      (o) => o.visible || o.suggestion ? { ...o, visible: !1, suggestion: "" } : o
+    );
+    const t = (f == null ? void 0 : f.providerId) || Or;
+    q.current = window.setTimeout(() => {
+      if (q.current = null, !n.current || nt.current) return;
+      const o = window.getSelection();
+      if (!o || !o.isCollapsed) return;
+      const r = Ql(n.current), c = qt(n.current);
+      if (!r.trim() || !c) return;
+      const E = K.current + 1;
+      K.current = E;
+      const N = n.current.innerHTML;
+      Yl.runProvider(t, {
+        capability: "autocomplete",
+        html: N,
+        prompt: r,
+        modelId: f == null ? void 0 : f.modelId
+      }).then((w) => {
+        var Bt;
+        if (E !== K.current) return;
+        const B = ((Bt = w.text) == null ? void 0 : Bt.trim()) || "";
+        if (!B) {
+          $({
+            visible: !1,
+            suggestion: "",
+            top: _,
+            left: _
+          });
+          return;
+        }
+        const Dt = n.current && qt(n.current) || c;
+        $({
+          visible: !0,
+          suggestion: B,
+          top: Dt.top,
+          left: Dt.left
+        });
+      }).catch(() => {
+        E === K.current && $({
+          visible: !1,
+          suggestion: "",
+          top: _,
+          left: _
+        });
+      });
+    }, ql);
+  };
+  I(() => () => {
+    Se(), K.current += 1;
+  }, []), I(() => {
+    nt.current = re, re && b();
+  }, [re]), I(() => {
+    oe !== void 0 && Ze(oe);
+  }, [oe]), I(() => {
+    G && Qe(G);
+  }, [G]), I(() => {
+    Y && Je(Y);
+  }, [Y]), I(() => {
+    z !== void 0 && et(z);
+  }, [z]), I(() => {
+    F !== void 0 && ut(F);
+  }, [F]), I(() => {
+    if (ft.current) {
+      ft.current = !1;
+      return;
+    }
+    at(ne);
+  }, [$n]), I(() => {
+    if (!n.current || p === void 0 || p === x.current) return;
+    if (n.current.innerHTML === p) {
+      x.current = p;
+      return;
+    }
+    const e = document.activeElement === n.current;
+    ve(e ? n.current : null, () => {
+      n.current && (n.current.innerHTML = p);
+    }), x.current = p;
+  }, [p]), I(() => {
+    if (!n.current) return;
+    const e = P ? Al(y) : "";
     if (e) {
-      r.current.innerHTML = e, O.current = new ee(e), C == null || C(e);
+      n.current.innerHTML = e, x.current = e, j.current = new Fe(e), A == null || A(e);
       return;
     }
-    g === void 0 && T && (r.current.innerHTML = T, O.current = new ee(T), C == null || C(T));
+    p === void 0 && h && (n.current.innerHTML = h, x.current = h, j.current = new Fe(h), A == null || A(h));
   }, []);
-  const Q = (e) => {
+  const Me = (e) => {
     var t;
-    O.current.push(e), C == null || C(e), le && Sn(e, ue), ce && r.current && gt(((t = r.current.textContent) == null ? void 0 : t.length) ?? 0);
-  }, L = (e) => {
-    r.current && (r.current.innerHTML = e, Q(e));
-  }, P = (e) => {
-    fe(e), G == null || G(e);
-  }, Y = (e) => {
-    pe(e), $ == null || $(e);
-  }, Z = (e) => {
-    he(e), z == null || z(e);
-  }, Rt = (e) => {
-    de(e), W == null || W(e);
-  }, K = () => {
-    ft(En());
-    const e = Pn("formatBlock");
-    if (e && me(e.toLowerCase().replace(/[<>]/g, "")), wt(ne()), !r.current || !u.blocks) return;
-    const t = window.getSelection(), n = (t == null ? void 0 : t.anchorNode) ?? null, o = Me(n, r.current);
-    if (pn(r.current, o), o) {
-      const s = r.current.getBoundingClientRect(), p = o.getBoundingClientRect();
-      yt(p.top - s.top + r.current.scrollTop), ke(!0);
+    j.current.push(e), x.current = e, A == null || A(e), P && bl(e, y), Ve && n.current && hn(((t = n.current.textContent) == null ? void 0 : t.length) ?? 0);
+  }, U = (e) => {
+    n.current && (ve(n.current, () => {
+      n.current && (n.current.innerHTML = e);
+    }), Me(e));
+  }, ke = (e) => {
+    ut(e), pe == null || pe(e), Ml(e, P, y);
+  }, Qn = (e) => {
+    at(e), Ee == null || Ee(e), Ul(e, P, y);
+  }, Jn = (e, t) => {
+    if (e === Pt) return;
+    const o = new Set(
+      be.filter((r) => r !== Pt)
+    );
+    t ? o.add(e) : o.delete(e), Qn(kl(Tt, o));
+  }, Q = (e) => {
+    Qe(e), fe == null || fe(e);
+  }, Ue = (e) => {
+    Je(e), _e == null || _e(e);
+  }, we = (e) => {
+    et(e), Te == null || Te(e);
+  }, eo = (e) => {
+    Ze(e), me == null || me(e);
+  }, to = () => {
+    if (l || i) {
+      W((c) => c.open ? { ...c, open: !1 } : c);
+      return;
+    }
+    const e = window.getSelection();
+    if (!e || e.isCollapsed || e.rangeCount === 0 || !ci(e, n.current)) {
+      W((c) => c.open ? { ...c, open: !1 } : c);
+      return;
+    }
+    const o = e.getRangeAt(0).getBoundingClientRect();
+    if (o.width === 0 && o.height === 0) {
+      W((c) => c.open ? { ...c, open: !1 } : c);
+      return;
+    }
+    const r = si({
+      selectionRect: o,
+      toolbarWidth: ri,
+      toolbarHeight: li,
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      gap: ii,
+      edgePadding: oi
+    });
+    W({ open: !0, top: r.top, left: r.left });
+  }, J = () => {
+    Nn(yl());
+    const e = Fl("formatBlock");
+    if (e && qe(e.toLowerCase().replace(/[<>]/g, "")), ct(vl()), Un(Xe()), to(), !n.current || !d.blocks) return;
+    const t = window.getSelection(), o = (t == null ? void 0 : t.anchorNode) ?? null, r = ee(o, n.current);
+    if (Wt(n.current, r), r) {
+      const c = n.current.getBoundingClientRect(), E = r.getBoundingClientRect();
+      Hn(E.top - c.top + n.current.scrollTop), rt(!0);
     } else
-      ke(!1);
-  }, l = () => {
-    var t, n, o;
-    if (!r.current) return;
-    let e = r.current.innerHTML;
-    if (y && u.trackChanges) {
-      const s = window.getSelection();
-      if (s && !s.isCollapsed) {
-        const p = ne();
-        if (p) {
-          const b = J("delete", p, w);
-          P([...I, b]), vt(b.id), e = r.current.innerHTML;
+      rt(!1);
+  }, u = () => {
+    var t, o, r;
+    if (!n.current) return;
+    let e = n.current.innerHTML;
+    if (X && d.trackChanges) {
+      const c = window.getSelection();
+      if (c && !c.isCollapsed) {
+        const E = Xe();
+        if (E) {
+          const N = ye("delete", E, H);
+          Q([...D, N]), no(N.id), e = n.current.innerHTML;
         }
       }
     }
-    if (Q(e), K(), we && r.current) {
-      const s = ((n = (t = window.getSelection()) == null ? void 0 : t.anchorNode) == null ? void 0 : n.textContent) ?? "", p = bn(s);
-      if (p !== null) {
-        F(An(p));
-        const b = (o = window.getSelection()) == null ? void 0 : o.getRangeAt(0);
-        if (b && r.current) {
-          const x = b.getBoundingClientRect(), B = r.current.getBoundingClientRect();
-          St({
-            top: x.bottom - B.top + 8,
-            left: x.left - B.left
+    if (Me(e), J(), mt && n.current) {
+      const c = ((o = (t = window.getSelection()) == null ? void 0 : t.anchorNode) == null ? void 0 : o.textContent) ?? "", E = Cl(c);
+      if (E !== null) {
+        le(Ll(E));
+        const N = (r = window.getSelection()) == null ? void 0 : r.getRangeAt(0);
+        if (N && n.current) {
+          const w = N.getBoundingClientRect(), B = n.current.getBoundingClientRect();
+          Fn({
+            top: w.bottom - B.top + 8,
+            left: w.left - B.left
           });
         }
       } else
-        F([]);
+        le([]);
+    }
+    Be ? Zn() : b();
+  }, Et = () => {
+    const e = R.suggestion;
+    if (!e) {
+      b();
+      return;
     }
-  }, vt = (e) => {
+    T(n.current), L(Zl, e), b(), u();
+  }, no = (e) => {
     const t = window.getSelection();
     if (!t || t.rangeCount === 0) return;
-    const n = ne();
-    n && A(Cn(n, e));
-  }, Ot = () => {
-    if (!r.current || !ze || !u.typoAutoFix || c || i) return;
-    const e = r.current.innerHTML, t = mn(e);
-    t.html !== e && (r.current.innerHTML = t.html, Q(t.html));
-  }, Et = (e) => {
-    var n;
-    if (c || i) return;
-    (n = r.current) == null || n.focus();
-    const t = De[e];
-    t && (t.value ? k(t.command, t.value) : k(t.command), l());
-  }, Pt = (e) => {
-    var t;
-    c || i || ((t = r.current) == null || t.focus(), k("formatBlock", e), me(e), l());
-  }, xt = () => {
-    var t;
-    if (c || i) return;
+    const o = Xe();
+    o && M(_l(o, e));
+  }, oo = () => {
+    if (!n.current || !en || !d.typoAutoFix || l || i) return;
+    const e = n.current.innerHTML, t = rl(e);
+    t.html !== e && (ve(n.current, () => {
+      n.current && (n.current.innerHTML = t.html);
+    }), Me(t.html));
+  }, O = (e) => {
+    if (l || i) return;
+    if (T(n.current), e === "clearFormat") {
+      Vl(), u();
+      return;
+    }
+    if (e === "directionLtr" && n.current) {
+      jt(n.current, er), u();
+      return;
+    }
+    if (e === "directionRtl" && n.current) {
+      jt(n.current, tr), u();
+      return;
+    }
+    if (e === "superscript" || e === "subscript") {
+      L(e), u();
+      return;
+    }
+    const t = yt[e];
+    t && (t.value ? L(t.command, t.value) : L(t.command), u());
+  }, ro = (e) => {
+    l || i || (T(n.current), L("formatBlock", e), qe(e), u());
+  }, lo = (e) => {
+    l || i || (T(n.current), Kl(e), Kn(e), u());
+  }, io = (e) => {
+    l || i || (T(n.current), Wl(e), ct(e), u());
+  }, pt = (e) => {
+    xn(e), Gn(e), ie(!0);
+  }, co = (e) => {
+    if (l || i) return;
+    pt(e === Qo ? Zo : se);
+  }, He = () => {
+    if (l || i) return;
     const e = window.prompt("Enter URL:", "https://");
-    e && ((t = r.current) == null || t.focus(), xn(e), l());
-  }, He = async (e) => at && ae ? ae(e) : Bn(e), Bt = async () => {
-    if (c || i) return;
+    e && (T(n.current), Xl(e), u());
+  }, Ct = async (e) => pn && je ? je(e) : Gl(e), so = async () => {
+    if (l || i) return;
     const e = document.createElement("input");
     e.type = "file", e.accept = "image/*", e.onchange = async () => {
-      var o, s;
-      const t = (o = e.files) == null ? void 0 : o[0];
+      var r;
+      const t = (r = e.files) == null ? void 0 : r[0];
       if (!t) return;
-      const n = await He(t);
-      (s = r.current) == null || s.focus(), te(n, t.name), l();
+      const o = await Ct(t);
+      T(n.current), xe(o, t.name), u();
     }, e.click();
-  }, ye = () => {
-    var t;
-    if (c || i || !u.table) return;
-    (t = r.current) == null || t.focus();
-    const e = dn(Ye, Ze);
-    if (y && u.trackChanges) {
-      const n = J("insert", e, w);
-      P([...I, n]), A(Ve(e, n.id));
+  }, Lt = () => {
+    if (l || i || !d.table) return;
+    T(n.current);
+    const e = ll(ln, cn);
+    if (X && d.trackChanges) {
+      const t = ye("insert", e, H);
+      Q([...D, t]), M(Yt(e, t.id));
     } else
-      A(e);
-    l();
-  }, _e = () => {
-    const e = O.current.undo();
-    if (e === null || !r.current) {
-      k("undo"), l();
+      M(e);
+    u();
+  }, Ot = () => {
+    const e = j.current.undo();
+    if (e === null || !n.current) {
+      L("undo"), u();
       return;
     }
-    L(e);
-  }, Ne = () => {
-    const e = O.current.redo();
-    if (e === null || !r.current) {
-      k("redo"), l();
+    U(e);
+  }, Nt = () => {
+    const e = j.current.redo();
+    if (e === null || !n.current) {
+      L("redo"), u();
       return;
     }
-    L(e);
-  }, Ut = () => {
-    var s;
-    if (c || i || !u.comments) return;
+    U(e);
+  }, ao = (e) => {
+    l || i || (e.preventDefault(), he((t) => t.open ? { ...t, open: !1 } : t), st(!!(d.table && xt())), Ie({ open: !0, x: e.clientX, y: e.clientY }));
+  }, uo = (e) => {
+    l || i || (e.preventDefault(), Ie((t) => t.open ? { ...t, open: !1 } : t), he({ open: !0, x: e.clientX, y: e.clientY }));
+  }, It = () => {
+    if (l || i || !d.comments) return;
     const e = window.prompt("Comment:");
     if (!(e != null && e.trim())) return;
-    const t = Ke("hl");
-    if ((s = r.current) == null || s.focus(), !Tn(t)) return;
-    const o = In(w, e.trim(), t);
-    Y([o, ...E]), Z(!0), l();
-  }, Se = (e) => {
-    if (!r.current) return;
-    const t = gn(r.current.innerHTML, e);
-    L(t), P(
-      I.map((n) => n.id === e ? { ...n, accepted: !0 } : n)
+    const t = vt("hl");
+    if (T(n.current), !El(t)) return;
+    const r = pl(H, e.trim(), t);
+    Ue([r, ...Z]), we(!0), u();
+  }, fo = [
+    {
+      id: wo,
+      label: Uo,
+      onSelect: () => dt(!0)
+    },
+    {
+      id: Po,
+      label: Ho,
+      onSelect: () => ke(!0)
+    }
+  ], V = (e) => {
+    const t = xt();
+    !t || !d.table || e(t) && u();
+  }, mo = [
+    ...d.table && Yn ? [
+      {
+        id: Ir,
+        label: Nr,
+        onSelect: () => V((e) => Xt(e, "before"))
+      },
+      {
+        id: hr,
+        label: gr,
+        onSelect: () => V((e) => Xt(e, "after"))
+      },
+      {
+        id: br,
+        label: Ar,
+        onSelect: () => V((e) => Kt(e, "before"))
+      },
+      {
+        id: Dr,
+        label: Rr,
+        onSelect: () => V((e) => Kt(e, "after"))
+      },
+      {
+        id: Sr,
+        label: Br,
+        onSelect: () => V((e) => il(e))
+      },
+      {
+        id: kr,
+        label: Mr,
+        onSelect: () => V((e) => cl(e))
+      }
+    ] : [],
+    {
+      id: wr,
+      label: Ur,
+      onSelect: () => O("bold")
+    },
+    {
+      id: Pr,
+      label: Hr,
+      onSelect: () => O("italic")
+    },
+    {
+      id: Fr,
+      label: yr,
+      onSelect: () => O("underline")
+    },
+    {
+      id: xr,
+      label: vr,
+      onSelect: () => O("strikethrough")
+    },
+    {
+      id: Kr,
+      label: Xr,
+      onSelect: () => O("heading2")
+    },
+    {
+      id: Vr,
+      label: Wr,
+      onSelect: () => O("bulletList")
+    },
+    {
+      id: Yr,
+      label: Gr,
+      onSelect: () => O("orderedList")
+    },
+    {
+      id: jr,
+      label: zr,
+      onSelect: () => He()
+    },
+    {
+      id: qr,
+      label: $r,
+      onSelect: () => O("clearFormat")
+    },
+    {
+      id: Qr,
+      label: Zr,
+      disabled: !d.findReplace,
+      onSelect: () => ie(!0)
+    },
+    {
+      id: el,
+      label: Jr,
+      disabled: !d.signature,
+      onSelect: () => Le(!0)
+    },
+    {
+      id: nl,
+      label: tl,
+      disabled: !d.comments,
+      onSelect: () => It()
+    },
+    ..._t ? [
+      {
+        id: ko,
+        label: Mo,
+        onSelect: () => ke(!1)
+      }
+    ] : []
+  ], gt = (e) => {
+    if (!n.current) return;
+    const t = ml(n.current.innerHTML, e);
+    U(t), Q(
+      D.map((o) => o.id === e ? { ...o, accepted: !0 } : o)
     );
-  }, Re = (e) => {
-    if (!r.current) return;
-    const t = hn(r.current.innerHTML, e);
-    L(t), P(
-      I.map((n) => n.id === e ? { ...n, rejected: !0 } : n)
+  }, ht = (e) => {
+    if (!n.current) return;
+    const t = fl(n.current.innerHTML, e);
+    U(t), Q(
+      D.map((o) => o.id === e ? { ...o, rejected: !0 } : o)
     );
-  }, ve = async (e) => {
-    const t = await He(e), n = `<img src="${t}" alt="" style="max-width:100%;height:auto;" />`;
-    if (y && u.trackChanges) {
-      const o = J("insert", n, w);
-      P([...I, o]), A(Ve(n, o.id));
+  }, At = async (e) => {
+    const t = await Ct(e), o = `<img src="${t}" alt="" style="max-width:100%;height:auto;" />`;
+    if (X && d.trackChanges) {
+      const r = ye("insert", o, H);
+      Q([...D, r]), M(Yt(o, r.id));
     } else
-      te(t);
-    l();
-  }, Dt = async (e) => {
-    if (c || i) return;
+      xe(t);
+    u();
+  }, _o = async (e) => {
+    if (l || i) return;
     const t = e.clipboardData;
     if (!t) return;
-    if (mt) {
-      const o = Hn(t);
-      if (o) {
+    if (On) {
+      const r = Il(t);
+      if (r) {
         e.preventDefault();
-        const p = yn(o);
-        p && (A(p), l());
-        const b = t.items;
-        if (oe && b)
-          for (const x of Array.from(b)) {
-            if (!x.type.startsWith("image/")) continue;
-            const B = x.getAsFile();
-            B && await ve(B);
+        const E = gl(r);
+        E && (M(E), u());
+        const N = t.items;
+        if (We && N)
+          for (const w of Array.from(N)) {
+            if (!w.type.startsWith("image/")) continue;
+            const B = w.getAsFile();
+            B && await At(B);
           }
         return;
       }
-      const s = _n(t);
-      if (s) {
-        e.preventDefault(), A(s.replace(/\n/g, "<br />")), l();
+      const c = hl(t);
+      if (c) {
+        e.preventDefault(), M(c.replace(/\n/g, "<br />")), u();
         return;
       }
     }
-    if (!oe) return;
-    const n = t.items;
-    if (n)
-      for (const o of Array.from(n)) {
-        if (!o.type.startsWith("image/")) continue;
+    if (!We) return;
+    const o = t.items;
+    if (o)
+      for (const r of Array.from(o)) {
+        if (!r.type.startsWith("image/")) continue;
         e.preventDefault();
-        const s = o.getAsFile();
-        s && await ve(s);
+        const c = r.getAsFile();
+        c && await At(c);
+      }
+  }, To = (e) => {
+    O(e);
+  }, Eo = (e) => {
+    if (e.key === vo && R.visible && R.suggestion) {
+      e.preventDefault(), Et();
+      return;
+    }
+    if (e.key === xo) {
+      b();
+      return;
+    }
+    if (xl(e.nativeEvent)) {
+      u();
+      return;
+    }
+    if (e.key === Xo) {
+      if (R.visible) {
+        e.preventDefault(), b();
+        return;
       }
-  }, Ft = (e) => {
-    e.key === "Escape" && F([]), (e.metaKey || e.ctrlKey) && e.key === "z" && (e.preventDefault(), e.shiftKey ? Ne() : _e());
-  }, Kt = (e) => {
-    var n, o;
-    (n = r.current) == null || n.focus();
+      le([]), W((t) => t.open ? { ...t, open: !1 } : t);
+    }
+    (e.metaKey || e.ctrlKey) && e.key === Ko && (e.preventDefault(), e.shiftKey ? Nt() : Ot());
+  }, po = (e) => {
+    var o;
+    T(n.current);
     const t = window.getSelection();
     if ((o = t == null ? void 0 : t.anchorNode) != null && o.textContent) {
-      const p = t.anchorNode.textContent.replace(/(?:^|\s)\/[^\s]*$/, " ");
-      t.anchorNode.nodeType === Node.TEXT_NODE && (t.anchorNode.textContent = p);
+      const c = t.anchorNode.textContent.replace(/(?:^|\s)\/[^\s]*$/, " ");
+      t.anchorNode.nodeType === Node.TEXT_NODE && (t.anchorNode.textContent = c);
     }
-    switch (F([]), e.insert) {
+    switch (le([]), e.insert) {
       case "heading1":
-        k("formatBlock", "h1");
+        L("formatBlock", "h1");
         break;
       case "heading2":
-        k("formatBlock", "h2");
+        L("formatBlock", "h2");
         break;
       case "bulletList":
-        k("insertUnorderedList");
+        L("insertUnorderedList");
         break;
       case "orderedList":
-        k("insertOrderedList");
+        L("insertOrderedList");
         break;
       case "table":
-        ye();
+        Lt();
         return;
       case "ai":
-        q(!0);
+        Ce(!0);
         break;
     }
-    l();
-  }, Oe = (e) => {
-    if (!r.current) return;
-    const t = window.getSelection(), n = Me((t == null ? void 0 : t.anchorNode) ?? null, r.current);
-    n && fn(n, e) && (l(), K());
-  }, Mt = (e, t) => {
+    u();
+  }, bt = (e) => {
+    if (!n.current) return;
+    const t = window.getSelection(), o = ee((t == null ? void 0 : t.anchorNode) ?? null, n.current);
+    o && al(o, e) && (u(), J());
+  }, Co = (e) => {
+    if (!n.current) return;
+    const t = window.getSelection(), o = ee((t == null ? void 0 : t.anchorNode) ?? null, n.current), r = n.current.querySelector(`.${Cr}`), c = o ?? (r instanceof HTMLElement ? r : null);
+    if (!c) {
+      e.preventDefault();
+      return;
+    }
+    k.current = c, Pe(n.current), Wt(n.current, c), sl(c), e.dataTransfer.setData(ei, ti), e.dataTransfer.effectAllowed = Zt;
+  }, Lo = (e) => {
+    if (!n.current || !k.current) return;
+    e.preventDefault(), e.dataTransfer.dropEffect = Zt;
+    const t = ee(e.target, n.current);
+    if (!t || t === k.current) {
+      Gt(n.current, null, null);
+      return;
+    }
+    const o = Vt(e.clientY, t);
+    Gt(n.current, t, o);
+  }, Oo = (e) => {
+    if (!n.current || !k.current) return;
+    e.preventDefault();
+    const t = ee(e.target, n.current), o = k.current;
+    t && t !== o && (Vt(e.clientY, t) === Jo ? ul(o, t) : dl(o, t)) && (u(), J()), Pe(n.current), k.current = null;
+  }, No = () => {
+    n.current && Pe(n.current), k.current = null;
+  }, Io = (e, t) => {
     if (e === "divider")
-      return /* @__PURE__ */ a("span", { className: sn }, `divider-${t}`);
+      return /* @__PURE__ */ s("span", { className: Er }, `divider-${t}`);
     if (e === "headingDropdown")
-      return /* @__PURE__ */ a(
-        Un,
+      return /* @__PURE__ */ s(
+        ae,
         {
           title: "Heading",
-          options: an,
-          value: pt || "p",
-          disabled: c || i,
-          onChange: Pt
+          options: pr,
+          value: In || "p",
+          disabled: l || i,
+          onChange: ro
         },
         "heading"
       );
+    if (e === St)
+      return /* @__PURE__ */ s(
+        ae,
+        {
+          title: Go,
+          options: Vo,
+          value: Xn,
+          disabled: l || i,
+          onChange: lo
+        },
+        St
+      );
+    if (e === Mt)
+      return /* @__PURE__ */ s(
+        ae,
+        {
+          title: jo,
+          options: zo,
+          value: Wn,
+          disabled: l || i,
+          onChange: io
+        },
+        Mt
+      );
     if (e === "textColor")
-      return /* @__PURE__ */ a(
-        je,
+      return /* @__PURE__ */ s(
+        $t,
         {
           title: "Text color",
           type: "text",
-          value: Ct,
-          disabled: c || i,
-          onChange: (o) => {
-            var s;
-            (s = r.current) == null || s.focus(), vn(o), kt(o), l();
+          value: An,
+          disabled: l || i,
+          onChange: (r) => {
+            T(n.current), Hl(r), bn(r), u();
           }
         },
         "textColor"
       );
     if (e === "highlightColor")
-      return /* @__PURE__ */ a(
-        je,
+      return /* @__PURE__ */ s(
+        $t,
         {
           title: "Highlight color",
           type: "highlight",
-          value: Tt,
-          disabled: c || i,
-          onChange: (o) => {
-            var s;
-            (s = r.current) == null || s.focus(), On(o), It(o), l();
+          value: Rn,
+          disabled: l || i,
+          onChange: (r) => {
+            T(n.current), Pl(r), Dn(r), u();
           }
         },
         "highlightColor"
       );
     if (e === "link")
-      return /* @__PURE__ */ a(
-        h,
+      return /* @__PURE__ */ s(
+        C,
         {
-          icon: f.link,
+          icon: m.link,
           title: "Insert link",
-          disabled: c || i,
-          onClick: xt
+          disabled: l || i,
+          onClick: He
         },
         "link"
       );
     if (e === "image")
-      return /* @__PURE__ */ a(
-        h,
+      return /* @__PURE__ */ s(
+        C,
         {
-          icon: f.image,
+          icon: m.image,
           title: "Insert image",
-          disabled: c || i,
+          disabled: l || i,
           onClick: () => {
-            Bt();
+            so();
           }
         },
         "image"
       );
     if (e === "table")
-      return u.table ? /* @__PURE__ */ a(
-        h,
+      return d.table ? /* @__PURE__ */ s(
+        C,
         {
-          icon: f.table,
+          icon: m.table,
           title: "Insert table",
-          disabled: c || i,
-          onClick: ye
+          disabled: l || i,
+          onClick: Lt
         },
         "table"
       ) : null;
-    if (e === xe)
-      return u.signature ? /* @__PURE__ */ a(
-        h,
+    if (e === kt)
+      return d.signature ? /* @__PURE__ */ s(
+        C,
         {
-          icon: f.signature,
+          icon: m.signature,
           title: "Sign pad",
-          active: Ie,
-          disabled: c || i,
-          onClick: () => be(!0)
+          active: it,
+          disabled: l || i,
+          onClick: () => Le(!0)
         },
-        xe
+        kt
       ) : null;
-    if (e === Be)
-      return u.findReplace ? /* @__PURE__ */ a(
-        h,
+    if (e === Ut)
+      return d.findReplace ? /* @__PURE__ */ s(
+        C,
         {
-          icon: f.findReplace,
+          icon: m.findReplace,
           title: "Find and replace",
-          active: Ae,
-          disabled: c || i,
-          onClick: () => Le((o) => !o)
+          active: Oe,
+          disabled: l || i,
+          onClick: () => {
+            Oe ? ie(!1) : pt(se);
+          }
         },
-        Be
+        Ut
       ) : null;
-    if (e === Ue)
-      return u.horizontalRule ? /* @__PURE__ */ a(
-        h,
+    if (e === wt)
+      return d.findReplace ? /* @__PURE__ */ s(
+        ae,
         {
-          icon: f.horizontalRule,
+          title: qo,
+          options: $o,
+          value: Vn,
+          disabled: l || i,
+          onChange: co
+        },
+        wt
+      ) : null;
+    if (e === Ht)
+      return d.horizontalRule ? /* @__PURE__ */ s(
+        C,
+        {
+          icon: m.horizontalRule,
           title: "Horizontal rule",
-          disabled: c || i,
+          disabled: l || i,
           onClick: () => {
-            var o;
-            (o = r.current) == null || o.focus(), A("<hr />"), l();
+            T(n.current), M("<hr />"), u();
           }
         },
-        Ue
+        Ht
       ) : null;
     if (e === "undo")
-      return /* @__PURE__ */ a(
-        h,
+      return /* @__PURE__ */ s(
+        C,
         {
-          icon: f.undo,
+          icon: m.undo,
           title: "Undo",
-          disabled: c || i,
-          onClick: _e
+          disabled: l || i,
+          onClick: Ot
         },
         "undo"
       );
     if (e === "redo")
-      return /* @__PURE__ */ a(
-        h,
+      return /* @__PURE__ */ s(
+        C,
         {
-          icon: f.redo,
+          icon: m.redo,
           title: "Redo",
-          disabled: c || i,
-          onClick: Ne
+          disabled: l || i,
+          onClick: Nt
         },
         "redo"
       );
     if (e === "trackChanges")
-      return u.trackChanges ? /* @__PURE__ */ a(
-        h,
+      return d.trackChanges ? /* @__PURE__ */ s(
+        C,
         {
-          icon: f.trackChanges,
+          icon: m.trackChanges,
           title: "Track changes",
-          active: y,
-          disabled: c || i,
-          onClick: () => Rt(!y)
+          active: X,
+          disabled: l || i,
+          onClick: () => eo(!X)
         },
         "trackChanges"
       ) : null;
     if (e === "comments")
-      return u.comments ? /* @__PURE__ */ a(
-        h,
+      return d.comments ? /* @__PURE__ */ s(
+        C,
         {
-          icon: f.comments,
+          icon: m.comments,
           title: "Comments",
-          active: X,
-          disabled: c || i,
+          active: Re,
+          disabled: l || i,
           onClick: () => {
-            X ? Z(!1) : Ut();
+            Re ? we(!1) : It();
           }
         },
         "comments"
       ) : null;
     if (e === "ai")
-      return !u.ai || !(d != null && d.enabled) ? null : /* @__PURE__ */ a(
-        h,
+      return !d.ai || !(f != null && f.enabled) ? null : /* @__PURE__ */ s(
+        C,
         {
-          icon: f.ai,
+          icon: m.ai,
           title: "Ink AI",
-          active: ge,
-          disabled: c || i,
-          onClick: () => q((o) => !o)
+          active: tt,
+          disabled: l || i,
+          onClick: () => Ce((r) => !r)
         },
         "ai"
       );
-    const n = De[e];
-    return n ? /* @__PURE__ */ a(
-      h,
+    const o = yt[e];
+    return o ? /* @__PURE__ */ s(
+      C,
       {
-        icon: f[e] ?? e.slice(0, 1).toUpperCase(),
-        title: n.title,
-        active: dt.has(e),
-        disabled: c || i,
-        onClick: () => Et(e)
+        icon: m[e] ?? e.slice(0, 1).toUpperCase(),
+        title: o.title,
+        active: $e.has(e),
+        disabled: l || i,
+        onClick: () => O(e)
       },
       e
     ) : null;
-  }, Vt = typeof V == "number" ? `${V}px` : V, jt = typeof j == "number" ? `${j}px` : j, Gt = !!(d != null && d.enabled && ge);
-  return /* @__PURE__ */ M(
+  }, go = typeof ue == "number" ? `${ue}px` : ue, ho = typeof de == "number" ? `${de}px` : de, Ao = !!(f != null && f.enabled && tt);
+  return /* @__PURE__ */ ce(
     "div",
     {
-      className: un(ln, We),
-      "data-testid": $e,
-      "data-disabled": c || void 0,
-      "data-variant": qe,
-      "data-premium": H.active || void 0,
-      "data-wysiwyg": lt || void 0,
-      style: { ...ut, ...rt },
-      ...ot,
+      className: ol(Lr, Qt),
+      "data-testid": Jt,
+      "data-disabled": l || void 0,
+      "data-variant": tn,
+      "data-chrome": nn,
+      "data-color-mode": De,
+      "data-premium": v.active || void 0,
+      "data-wysiwyg": Cn || void 0,
+      style: { ...Ln, ...fn },
+      ...mn,
       children: [
-        /* @__PURE__ */ a("div", { className: tn, role: "toolbar", "aria-label": "Ink formatting toolbar", children: Ge.map(Mt) }),
-        /* @__PURE__ */ a(
-          jn,
+        _t ? /* @__PURE__ */ s("div", { className: ur, children: /* @__PURE__ */ s(
+          wl,
+          {
+            type: "button",
+            "aria-label": So,
+            onClick: () => ke(!1),
+            children: Bo
+          }
+        ) }) : /* @__PURE__ */ s(
+          "div",
           {
-            open: Ie,
-            onClose: () => be(!1),
+            className: dr,
+            role: "toolbar",
+            "aria-label": "Ink formatting toolbar",
+            onContextMenu: uo,
+            children: be.map(Io)
+          }
+        ),
+        /* @__PURE__ */ s(
+          mi,
+          {
+            open: jn,
+            options: qn,
+            visibleItems: be,
+            onToggle: Jn,
+            onClose: () => dt(!1)
+          }
+        ),
+        /* @__PURE__ */ s(
+          di,
+          {
+            open: it,
+            onClose: () => Le(!1),
             onConfirm: (e) => {
-              var t;
-              (t = r.current) == null || t.focus(), te(e), l();
+              T(n.current), xe(e), u();
             }
           }
         ),
-        /* @__PURE__ */ a(
-          Gn,
+        /* @__PURE__ */ s(
+          fi,
           {
-            open: Ae,
-            onClose: () => Le(!1),
-            onReplace: (e, t, n) => {
-              if (!r.current) return;
-              const o = Rn(r.current.innerHTML, e, t, n);
-              L(o);
+            open: Oe,
+            focusField: vn,
+            onClose: () => ie(!1),
+            onReplace: (e, t, o) => {
+              if (!n.current) return;
+              const r = Rl(n.current.innerHTML, e, t, o);
+              U(r);
             }
           }
         ),
-        y && u.trackChanges ? /* @__PURE__ */ a(
-          Vn,
+        X && d.trackChanges ? /* @__PURE__ */ s(
+          ui,
           {
-            changes: I,
-            onAccept: Se,
-            onReject: Re,
-            onAcceptAll: () => I.forEach((e) => Se(e.id)),
-            onRejectAll: () => I.forEach((e) => Re(e.id))
+            changes: D,
+            onAccept: gt,
+            onReject: ht,
+            onAcceptAll: () => D.forEach((e) => gt(e.id)),
+            onRejectAll: () => D.forEach((e) => ht(e.id))
           }
         ) : null,
-        /* @__PURE__ */ M("div", { className: nn, children: [
-          /* @__PURE__ */ M("div", { className: rn, children: [
-            u.blocks ? /* @__PURE__ */ a(
-              Kn,
+        /* @__PURE__ */ ce("div", { className: fr, children: [
+          /* @__PURE__ */ ce("div", { className: mr, children: [
+            d.blocks ? /* @__PURE__ */ s(
+              Jl,
               {
-                visible: _t && !c && !i,
-                top: Ht,
-                onMoveUp: () => Oe("up"),
-                onMoveDown: () => Oe("down")
+                visible: Pn && !l && !i,
+                top: wn,
+                onMoveUp: () => bt("up"),
+                onMoveDown: () => bt("down"),
+                onDragStart: Co
               }
             ) : null,
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ s(
               "div",
               {
-                ref: r,
-                className: on,
-                contentEditable: !c && !i,
+                ref: n,
+                className: _r,
+                contentEditable: !l && !i,
                 role: "textbox",
                 "aria-multiline": "true",
-                "aria-placeholder": re,
-                "data-placeholder": re,
+                "aria-placeholder": Ke,
+                "data-placeholder": Ke,
                 suppressContentEditableWarning: !0,
-                style: { minHeight: Vt, maxHeight: jt },
-                onInput: l,
-                onBlur: Ot,
-                onKeyUp: K,
-                onKeyDown: Ft,
-                onMouseUp: K,
+                style: { minHeight: go, maxHeight: ho },
+                onInput: u,
+                onBlur: oo,
+                onKeyUp: J,
+                onKeyDown: Eo,
+                onMouseUp: J,
+                onContextMenu: ao,
+                onDragOver: Lo,
+                onDrop: Oo,
+                onDragEnd: No,
                 onPaste: (e) => {
-                  Dt(e);
+                  _o(e);
+                }
+              }
+            ),
+            mt ? /* @__PURE__ */ s(
+              ai,
+              {
+                items: yn,
+                top: lt.top,
+                left: lt.left,
+                onSelect: po
+              }
+            ) : null,
+            Be ? /* @__PURE__ */ s(
+              $l,
+              {
+                suggestion: R.suggestion,
+                position: { top: R.top, left: R.left },
+                visible: R.visible,
+                onAccept: Et,
+                onDismiss: b
+              }
+            ) : null,
+            /* @__PURE__ */ s(
+              ni,
+              {
+                open: Ae.open,
+                top: Ae.top,
+                left: Ae.left,
+                icons: {
+                  bold: m.bold,
+                  italic: m.italic,
+                  underline: m.underline,
+                  code: m.code,
+                  link: m.link,
+                  clearFormat: m.clearFormat
+                },
+                activeFormats: $e,
+                disabled: l || i,
+                onFormat: To,
+                onLink: He,
+                onClose: () => W((e) => ({ ...e, open: !1 }))
+              }
+            ),
+            /* @__PURE__ */ s(
+              zt,
+              {
+                open: Ne.open,
+                x: Ne.x,
+                y: Ne.y,
+                items: mo,
+                colorMode: De,
+                onClose: () => {
+                  st(!1), Ie((e) => ({ ...e, open: !1 }));
                 }
               }
             ),
-            we ? /* @__PURE__ */ a(
-              Mn,
+            /* @__PURE__ */ s(
+              zt,
               {
-                items: Nt,
-                top: Te.top,
-                left: Te.left,
-                onSelect: Kt
+                open: ge.open,
+                x: ge.x,
+                y: ge.y,
+                items: fo,
+                colorMode: De,
+                onClose: () => he((e) => ({ ...e, open: !1 }))
               }
-            ) : null
+            )
           ] }),
-          X && u.comments ? /* @__PURE__ */ a(
-            Dn,
+          Re && d.comments ? /* @__PURE__ */ s(
+            zl,
             {
-              comments: E,
-              author: w,
-              onClose: () => Z(!1),
+              comments: Z,
+              author: H,
+              onClose: () => we(!1),
               onResolve: (e) => {
-                const t = E.find((n) => n.id === e);
-                Y(
-                  E.map(
-                    (n) => n.id === e ? { ...n, resolved: !0 } : n
+                const t = Z.find((o) => o.id === e);
+                Ue(
+                  Z.map(
+                    (o) => o.id === e ? { ...o, resolved: !0 } : o
                   )
-                ), t && r.current && L(kn(r.current.innerHTML, t.highlightId));
+                ), t && n.current && U(Tl(n.current.innerHTML, t.highlightId));
               },
               onAddReply: (e, t) => {
-                Y(
-                  E.map(
-                    (n) => n.id === e ? {
-                      ...n,
+                Ue(
+                  Z.map(
+                    (o) => o.id === e ? {
+                      ...o,
                       replies: [
-                        ...n.replies,
+                        ...o.replies,
                         {
-                          id: Ke("reply"),
-                          author: w,
+                          id: vt("reply"),
+                          author: H,
                           body: t,
                           timestamp: Date.now()
                         }
                       ]
-                    } : n
+                    } : o
                   )
                 );
               }
             }
           ) : null,
-          Gt && d ? /* @__PURE__ */ a(
-            Fn,
+          Ao && f ? /* @__PURE__ */ s(
+            jl,
             {
-              config: d,
-              documentHtml: ((Ee = r.current) == null ? void 0 : Ee.innerHTML) ?? g ?? "",
-              selectionHtml: Ce,
-              onClose: () => q(!1),
+              config: f,
+              documentHtml: ((Rt = n.current) == null ? void 0 : Rt.innerHTML) ?? p ?? "",
+              selectionHtml: ot,
+              onBusyChange: kn,
+              onClose: () => Ce(!1),
               onApplyHtml: (e) => {
-                var t;
-                if ((t = r.current) == null || t.focus(), Ce)
-                  A(e);
+                if (T(n.current), ot)
+                  M(e);
                 else {
-                  L(e);
+                  U(e);
                   return;
                 }
-                l();
+                u();
               }
             }
           ) : null
         ] }),
-        ce ? /* @__PURE__ */ M("div", { className: cn, children: [
-          ht,
-          ie ? ` / ${ie}` : ""
+        Ve ? /* @__PURE__ */ ce("div", { className: Tr, children: [
+          gn,
+          Ge ? ` / ${Ge}` : ""
         ] }) : null
       ]
     }
   );
 };
 export {
-  br as InkEditor
+  _c as InkEditor
 };