@forgedevstack/ink 1.0.1 → 1.1.1

package/dist/components/InkEditor/InkEditor.js

@@ -1,225 +1,577 @@
-import { jsxs as k, jsx as s } from "react/jsx-runtime";
-import { useRef as nt, useState as d, useEffect as x } from "react";
-import { INK_MIN_HEIGHT as ot, INK_DEFAULT_TEXT_COLOR as it, INK_DEFAULT_HIGHLIGHT_COLOR as at } from "../../constants/numbers.const.js";
-import { INK_PLACEHOLDER_DEFAULT as lt, INK_DEFAULT_TOOLBAR as st, INK_CLASS_TOOLBAR as ct, INK_CLASS_CONTENT as ut, INK_CLASS_FOOTER as dt, INK_CLASS_DIVIDER as ft, INK_HEADING_OPTIONS as mt, INK_BUTTON_CONFIG as v, INK_CLASS_ROOT as ht } from "../../constants/defaults.const.js";
-import { cn as gt } from "../../utils/cn.utils.js";
-import { applyTypoAutoFix as pt } from "../../utils/typo.utils.js";
-import { setTextColor as Ct, setHighlightColor as It, getActiveFormats as Tt, queryCommandValue as Lt, fileToDataUrl as A, insertImage as O, execCommand as p, insertLink as _t } from "./helpers/format.utils.js";
+import { jsxs as F, jsx as i } from "react/jsx-runtime";
+import { useRef as ye, useState as m, useEffect as y } from "react";
+import { INK_MIN_HEIGHT as Ot, INK_DEFAULT_TEXT_COLOR as Pt, INK_DEFAULT_HIGHLIGHT_COLOR as Ut } from "../../constants/numbers.const.js";
+import { INK_PLACEHOLDER_DEFAULT as Kt, INK_DEFAULT_TOOLBAR as Ft, INK_DEFAULT_VARIANT as Mt, INK_DEFAULT_AUTHOR as Vt, INK_TABLE_DEFAULT_ROWS as jt, INK_TABLE_DEFAULT_COLS as Wt, INK_DEFAULT_FEATURES as $t, INK_CLASS_TOOLBAR as Gt, INK_CLASS_SHELL as qt, INK_CLASS_BODY as zt, INK_CLASS_CONTENT as Xt, INK_CLASS_FOOTER as Qt, INK_CLASS_DIVIDER as Yt, INK_HEADING_OPTIONS as Jt, INK_BUTTON_CONFIG as Ne, INK_CLASS_ROOT as Zt } from "../../constants/defaults.const.js";
+import { INK_DEFAULT_ICONS as Se } from "../../constants/premium.const.js";
+import { cn as en } from "../../utils/cn.utils.js";
+import { applyTypoAutoFix as tn } from "../../utils/typo.utils.js";
+import { createInkId as ve } from "../../utils/id.utils.js";
+import { buildTableHtml as nn } from "../../utils/table.utils.js";
+import { getBlockElement as _e, moveBlock as on, markActiveBlock as rn } from "../../utils/blocks.utils.js";
+import { rejectTrackChangeInHtml as cn, acceptTrackChangeInHtml as sn, createTrackChange as Z, wrapInsertHtml as Ee, wrapDeleteHtml as an } from "../../utils/trackChanges.utils.js";
+import { removeCommentMark as ln, wrapSelectionAsComment as un, createCommentThread as mn } from "../../utils/comments.utils.js";
+import { InkHistoryStack as xe } from "../../utils/history.utils.js";
+import { extractSlashQuery as dn, filterSlashCommands as fn } from "../../utils/slash.utils.js";
+import { resolveInkPremium as hn, hasInkPremiumFeature as D, themeTokensToStyle as pn } from "../../utils/premium.utils.js";
+import { extractClipboardHtml as gn, sanitizePastedHtml as Cn, extractClipboardText as kn } from "../../utils/paste.utils.js";
+import { insertHTML as I, setTextColor as Tn, setHighlightColor as bn, getActiveFormats as In, queryCommandValue as wn, execCommand as g, insertLink as An, insertImage as Re, fileToDataUrl as Ln } from "./helpers/format.utils.js";
 import { ToolbarButton as C } from "./components/ToolbarButton/ToolbarButton.js";
-import { ToolbarDropdown as bt } from "./components/ToolbarDropdown/ToolbarDropdown.js";
-import { ToolbarColorPicker as E } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
-const I = {
-  bold: "B",
-  italic: "I",
-  underline: "U",
-  strikethrough: "S",
-  bulletList: "•",
-  orderedList: "1.",
-  link: "🔗",
-  image: "🖼",
-  clearFormat: "⌫",
-  alignLeft: "⫷",
-  alignCenter: "☰",
-  alignRight: "⫸",
-  alignJustify: "≡",
-  indent: "→",
-  outdent: "←",
-  blockquote: "“",
-  code: "</>"
-}, St = (y) => {
+import { ToolbarDropdown as Hn } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarColorPicker as Be } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
+import { CommentsPanel as yn } from "./components/CommentsPanel/CommentsPanel.js";
+import { AiPanel as Nn } from "./components/AiPanel/AiPanel.js";
+import { BlockHandles as Sn } from "./components/BlockHandles/BlockHandles.js";
+import { SlashMenu as vn } from "./components/SlashMenu/SlashMenu.js";
+import { TrackChangesBar as _n } from "./components/TrackChangesBar/TrackChangesBar.js";
+const ee = () => {
+  const N = window.getSelection();
+  if (!N || N.rangeCount === 0) return "";
+  const h = N.getRangeAt(0), b = document.createElement("div");
+  return b.appendChild(h.cloneContents()), b.innerHTML;
+}, no = (N) => {
+  var He;
   const {
-    value: u,
-    defaultValue: T = "",
-    onChange: f,
-    placeholder: L = lt,
-    disabled: n = !1,
-    readOnly: o = !1,
-    minHeight: m = ot,
-    maxHeight: h,
-    toolbar: F = st,
-    className: S = "",
-    testId: D,
-    allowImagePaste: K = !0,
-    showCharCount: _ = !1,
-    charCountMax: b,
-    typoAutoFix: U = !0,
-    ...B
-  } = y, r = nt(null), [R, w] = d(/* @__PURE__ */ new Set()), [M, N] = d("p"), [V, P] = d(0), [G, $] = d(it), [j, q] = d(at);
-  x(() => {
-    !r.current || u === void 0 || r.current.innerHTML !== u && (r.current.innerHTML = u);
-  }, [u]), x(() => {
-    !r.current || u || !T || (r.current.innerHTML = T);
+    value: h,
+    defaultValue: b = "",
+    onChange: M,
+    placeholder: te = Kt,
+    disabled: s = !1,
+    readOnly: a = !1,
+    minHeight: V = Ot,
+    maxHeight: j,
+    toolbar: De = Ft,
+    className: Oe = "",
+    testId: Pe,
+    allowImagePaste: ne = !0,
+    showCharCount: oe = !1,
+    charCountMax: re,
+    typoAutoFix: Ue = !0,
+    variant: Ke = Mt,
+    features: Fe,
+    author: w = Vt,
+    trackChanges: S,
+    onTrackChangesChange: W,
+    trackChangesEnabled: O,
+    onTrackChangesEnabledChange: $,
+    comments: v,
+    onCommentsChange: G,
+    showCommentsPanel: _,
+    onShowCommentsPanelChange: q,
+    ai: d,
+    slashCommands: Me,
+    tableRows: Ve = jt,
+    tableCols: je = Wt,
+    premium: We,
+    theme: $e,
+    icons: ce,
+    pasteMode: Ge = "plain",
+    onImageUpload: se,
+    wysiwyg: qe = !1,
+    style: ze,
+    ...Xe
+  } = N, u = { ...$t, ...Fe }, A = hn(We), Qe = D(A, "icons"), Ye = D(A, "theme"), Je = D(A, "richPaste"), Ze = D(A, "imageUpload"), et = D(A, "wysiwyg") && qe, p = Qe && ce ? { ...Se, ...ce } : Se, tt = Ye ? pn($e) : {}, nt = Je && Ge === "rich", o = ye(null), P = ye(new xe(h ?? b)), [ot, rt] = m(/* @__PURE__ */ new Set()), [ct, ae] = m("p"), [st, at] = m(0), [it, lt] = m(Pt), [ut, mt] = m(Ut), [L, ie] = m(O ?? !1), [dt, le] = m(S ?? []), [ft, ue] = m(v ?? []), [ht, me] = m(_ ?? !1), [de, z] = m(!!(d != null && d.enabled && d.openOnInit)), [fe, pt] = m(""), [gt, Ct] = m(0), [kt, he] = m(!1), [Tt, U] = m([]), [pe, bt] = m({ top: 0, left: 0 }), k = S ?? dt, E = v ?? ft, X = _ ?? ht, ge = Me ?? u.slash;
+  y(() => {
+    O !== void 0 && ie(O);
+  }, [O]), y(() => {
+    S && le(S);
+  }, [S]), y(() => {
+    v && ue(v);
+  }, [v]), y(() => {
+    _ !== void 0 && me(_);
+  }, [_]), y(() => {
+    !o.current || h === void 0 || o.current.innerHTML !== h && (o.current.innerHTML = h);
+  }, [h]), y(() => {
+    !o.current || h || !b || (o.current.innerHTML = b, P.current = new xe(b));
   }, []);
-  const H = (t) => {
-    var e;
-    f == null || f(t), _ && r.current && P(((e = r.current.textContent) == null ? void 0 : e.length) ?? 0);
-  }, g = () => {
-    w(Tt());
-    const t = Lt("formatBlock");
-    t && N(t.toLowerCase().replace(/[<>]/g, ""));
-  }, c = () => {
-    r.current && (H(r.current.innerHTML), g());
-  }, W = () => {
-    if (!r.current || !U || n || o) return;
-    const t = r.current.innerHTML, e = pt(t);
-    e.html !== t && (r.current.innerHTML = e.html, H(e.html));
-  }, J = (t) => {
-    var l;
-    if (n || o) return;
-    (l = r.current) == null || l.focus();
-    const e = v[t];
-    e && (e.value ? p(e.command, e.value) : p(e.command), c());
-  }, X = (t) => {
-    var e;
-    n || o || ((e = r.current) == null || e.focus(), p("formatBlock", t), N(t), c());
-  }, z = () => {
-    var e;
-    if (n || o) return;
-    const t = window.prompt("Enter URL:", "https://");
-    t && ((e = r.current) == null || e.focus(), _t(t), c());
-  }, Q = async () => {
-    if (n || o) return;
-    const t = document.createElement("input");
-    t.type = "file", t.accept = "image/*", t.onchange = async () => {
-      var i, a;
-      const e = (i = t.files) == null ? void 0 : i[0];
-      if (!e) return;
-      const l = await A(e);
-      (a = r.current) == null || a.focus(), O(l, e.name), c();
-    }, t.click();
-  }, Y = async (t) => {
-    var l;
-    if (!K || n || o) return;
-    const e = (l = t.clipboardData) == null ? void 0 : l.items;
-    if (e)
-      for (const i of Array.from(e)) {
-        if (!i.type.startsWith("image/")) continue;
-        t.preventDefault();
-        const a = i.getAsFile();
-        if (!a) continue;
-        const rt = await A(a);
-        O(rt), c();
+  const Q = (e) => {
+    var t;
+    P.current.push(e), M == null || M(e), oe && o.current && at(((t = o.current.textContent) == null ? void 0 : t.length) ?? 0);
+  }, H = (e) => {
+    o.current && (o.current.innerHTML = e, Q(e));
+  }, x = (e) => {
+    le(e), W == null || W(e);
+  }, Y = (e) => {
+    ue(e), G == null || G(e);
+  }, J = (e) => {
+    me(e), q == null || q(e);
+  }, It = (e) => {
+    ie(e), $ == null || $(e);
+  }, K = () => {
+    rt(In());
+    const e = wn("formatBlock");
+    if (e && ae(e.toLowerCase().replace(/[<>]/g, "")), pt(ee()), !o.current || !u.blocks) return;
+    const t = window.getSelection(), n = (t == null ? void 0 : t.anchorNode) ?? null, r = _e(n, o.current);
+    if (rn(o.current, r), r) {
+      const c = o.current.getBoundingClientRect(), f = r.getBoundingClientRect();
+      Ct(f.top - c.top + o.current.scrollTop), he(!0);
+    } else
+      he(!1);
+  }, l = () => {
+    var t, n, r;
+    if (!o.current) return;
+    let e = o.current.innerHTML;
+    if (L && u.trackChanges) {
+      const c = window.getSelection();
+      if (c && !c.isCollapsed) {
+        const f = ee();
+        if (f) {
+          const T = Z("delete", f, w);
+          x([...k, T]), wt(T.id), e = o.current.innerHTML;
+        }
       }
-  }, Z = (t, e) => {
-    if (t === "divider")
-      return /* @__PURE__ */ s("span", { className: ft }, `divider-${e}`);
-    if (t === "headingDropdown")
-      return /* @__PURE__ */ s(
-        bt,
+    }
+    if (Q(e), K(), ge && o.current) {
+      const c = ((n = (t = window.getSelection()) == null ? void 0 : t.anchorNode) == null ? void 0 : n.textContent) ?? "", f = dn(c);
+      if (f !== null) {
+        U(fn(f));
+        const T = (r = window.getSelection()) == null ? void 0 : r.getRangeAt(0);
+        if (T && o.current) {
+          const R = T.getBoundingClientRect(), B = o.current.getBoundingClientRect();
+          bt({
+            top: R.bottom - B.top + 8,
+            left: R.left - B.left
+          });
+        }
+      } else
+        U([]);
+    }
+  }, wt = (e) => {
+    const t = window.getSelection();
+    if (!t || t.rangeCount === 0) return;
+    const n = ee();
+    n && I(an(n, e));
+  }, At = () => {
+    if (!o.current || !Ue || !u.typoAutoFix || s || a) return;
+    const e = o.current.innerHTML, t = tn(e);
+    t.html !== e && (o.current.innerHTML = t.html, Q(t.html));
+  }, Lt = (e) => {
+    var n;
+    if (s || a) return;
+    (n = o.current) == null || n.focus();
+    const t = Ne[e];
+    t && (t.value ? g(t.command, t.value) : g(t.command), l());
+  }, Ht = (e) => {
+    var t;
+    s || a || ((t = o.current) == null || t.focus(), g("formatBlock", e), ae(e), l());
+  }, yt = () => {
+    var t;
+    if (s || a) return;
+    const e = window.prompt("Enter URL:", "https://");
+    e && ((t = o.current) == null || t.focus(), An(e), l());
+  }, Ce = async (e) => Ze && se ? se(e) : Ln(e), Nt = async () => {
+    if (s || a) return;
+    const e = document.createElement("input");
+    e.type = "file", e.accept = "image/*", e.onchange = async () => {
+      var r, c;
+      const t = (r = e.files) == null ? void 0 : r[0];
+      if (!t) return;
+      const n = await Ce(t);
+      (c = o.current) == null || c.focus(), Re(n, t.name), l();
+    }, e.click();
+  }, ke = () => {
+    var t;
+    if (s || a || !u.table) return;
+    (t = o.current) == null || t.focus();
+    const e = nn(Ve, je);
+    if (L && u.trackChanges) {
+      const n = Z("insert", e, w);
+      x([...k, n]), I(Ee(e, n.id));
+    } else
+      I(e);
+    l();
+  }, Te = () => {
+    const e = P.current.undo();
+    if (e === null || !o.current) {
+      g("undo"), l();
+      return;
+    }
+    H(e);
+  }, be = () => {
+    const e = P.current.redo();
+    if (e === null || !o.current) {
+      g("redo"), l();
+      return;
+    }
+    H(e);
+  }, St = () => {
+    var c;
+    if (s || a || !u.comments) return;
+    const e = window.prompt("Comment:");
+    if (!(e != null && e.trim())) return;
+    const t = ve("hl");
+    if ((c = o.current) == null || c.focus(), !un(t)) return;
+    const r = mn(w, e.trim(), t);
+    Y([r, ...E]), J(!0), l();
+  }, Ie = (e) => {
+    if (!o.current) return;
+    const t = sn(o.current.innerHTML, e);
+    H(t), x(
+      k.map((n) => n.id === e ? { ...n, accepted: !0 } : n)
+    );
+  }, we = (e) => {
+    if (!o.current) return;
+    const t = cn(o.current.innerHTML, e);
+    H(t), x(
+      k.map((n) => n.id === e ? { ...n, rejected: !0 } : n)
+    );
+  }, Ae = async (e) => {
+    const t = await Ce(e), n = `<img src="${t}" alt="" style="max-width:100%;height:auto;" />`;
+    if (L && u.trackChanges) {
+      const r = Z("insert", n, w);
+      x([...k, r]), I(Ee(n, r.id));
+    } else
+      Re(t);
+    l();
+  }, vt = async (e) => {
+    if (s || a) return;
+    const t = e.clipboardData;
+    if (!t) return;
+    if (nt) {
+      const r = gn(t);
+      if (r) {
+        e.preventDefault();
+        const f = Cn(r);
+        f && (I(f), l());
+        const T = t.items;
+        if (ne && T)
+          for (const R of Array.from(T)) {
+            if (!R.type.startsWith("image/")) continue;
+            const B = R.getAsFile();
+            B && await Ae(B);
+          }
+        return;
+      }
+      const c = kn(t);
+      if (c) {
+        e.preventDefault(), I(c.replace(/\n/g, "<br />")), l();
+        return;
+      }
+    }
+    if (!ne) return;
+    const n = t.items;
+    if (n)
+      for (const r of Array.from(n)) {
+        if (!r.type.startsWith("image/")) continue;
+        e.preventDefault();
+        const c = r.getAsFile();
+        c && await Ae(c);
+      }
+  }, _t = (e) => {
+    e.key === "Escape" && U([]), (e.metaKey || e.ctrlKey) && e.key === "z" && (e.preventDefault(), e.shiftKey ? be() : Te());
+  }, Et = (e) => {
+    var n, r;
+    (n = o.current) == null || n.focus();
+    const t = window.getSelection();
+    if ((r = t == null ? void 0 : t.anchorNode) != null && r.textContent) {
+      const f = t.anchorNode.textContent.replace(/(?:^|\s)\/[^\s]*$/, " ");
+      t.anchorNode.nodeType === Node.TEXT_NODE && (t.anchorNode.textContent = f);
+    }
+    switch (U([]), e.insert) {
+      case "heading1":
+        g("formatBlock", "h1");
+        break;
+      case "heading2":
+        g("formatBlock", "h2");
+        break;
+      case "bulletList":
+        g("insertUnorderedList");
+        break;
+      case "orderedList":
+        g("insertOrderedList");
+        break;
+      case "table":
+        ke();
+        return;
+      case "ai":
+        z(!0);
+        break;
+    }
+    l();
+  }, Le = (e) => {
+    if (!o.current) return;
+    const t = window.getSelection(), n = _e((t == null ? void 0 : t.anchorNode) ?? null, o.current);
+    n && on(n, e) && (l(), K());
+  }, xt = (e, t) => {
+    if (e === "divider")
+      return /* @__PURE__ */ i("span", { className: Yt }, `divider-${t}`);
+    if (e === "headingDropdown")
+      return /* @__PURE__ */ i(
+        Hn,
         {
           title: "Heading",
-          options: mt,
-          value: M || "p",
-          disabled: n || o,
-          onChange: X
+          options: Jt,
+          value: ct || "p",
+          disabled: s || a,
+          onChange: Ht
         },
         "heading"
       );
-    if (t === "textColor")
-      return /* @__PURE__ */ s(
-        E,
+    if (e === "textColor")
+      return /* @__PURE__ */ i(
+        Be,
         {
           title: "Text color",
           type: "text",
-          value: G,
-          disabled: n || o,
-          onChange: (i) => {
-            var a;
-            (a = r.current) == null || a.focus(), Ct(i), $(i), c();
+          value: it,
+          disabled: s || a,
+          onChange: (r) => {
+            var c;
+            (c = o.current) == null || c.focus(), Tn(r), lt(r), l();
           }
         },
         "textColor"
       );
-    if (t === "highlightColor")
-      return /* @__PURE__ */ s(
-        E,
+    if (e === "highlightColor")
+      return /* @__PURE__ */ i(
+        Be,
         {
           title: "Highlight color",
           type: "highlight",
-          value: j,
-          disabled: n || o,
-          onChange: (i) => {
-            var a;
-            (a = r.current) == null || a.focus(), It(i), q(i), c();
+          value: ut,
+          disabled: s || a,
+          onChange: (r) => {
+            var c;
+            (c = o.current) == null || c.focus(), bn(r), mt(r), l();
           }
         },
         "highlightColor"
       );
-    if (t === "link")
-      return /* @__PURE__ */ s(
+    if (e === "link")
+      return /* @__PURE__ */ i(
         C,
         {
-          icon: I.link,
+          icon: p.link,
           title: "Insert link",
-          disabled: n || o,
-          onClick: z
+          disabled: s || a,
+          onClick: yt
         },
         "link"
       );
-    if (t === "image")
-      return /* @__PURE__ */ s(
+    if (e === "image")
+      return /* @__PURE__ */ i(
         C,
         {
-          icon: I.image,
+          icon: p.image,
           title: "Insert image",
-          disabled: n || o,
+          disabled: s || a,
           onClick: () => {
-            Q();
+            Nt();
           }
         },
         "image"
       );
-    const l = v[t];
-    return l ? /* @__PURE__ */ s(
+    if (e === "table")
+      return u.table ? /* @__PURE__ */ i(
+        C,
+        {
+          icon: p.table,
+          title: "Insert table",
+          disabled: s || a,
+          onClick: ke
+        },
+        "table"
+      ) : null;
+    if (e === "undo")
+      return /* @__PURE__ */ i(
+        C,
+        {
+          icon: p.undo,
+          title: "Undo",
+          disabled: s || a,
+          onClick: Te
+        },
+        "undo"
+      );
+    if (e === "redo")
+      return /* @__PURE__ */ i(
+        C,
+        {
+          icon: p.redo,
+          title: "Redo",
+          disabled: s || a,
+          onClick: be
+        },
+        "redo"
+      );
+    if (e === "trackChanges")
+      return u.trackChanges ? /* @__PURE__ */ i(
+        C,
+        {
+          icon: p.trackChanges,
+          title: "Track changes",
+          active: L,
+          disabled: s || a,
+          onClick: () => It(!L)
+        },
+        "trackChanges"
+      ) : null;
+    if (e === "comments")
+      return u.comments ? /* @__PURE__ */ i(
+        C,
+        {
+          icon: p.comments,
+          title: "Comments",
+          active: X,
+          disabled: s || a,
+          onClick: () => {
+            X ? J(!1) : St();
+          }
+        },
+        "comments"
+      ) : null;
+    if (e === "ai")
+      return !u.ai || !(d != null && d.enabled) ? null : /* @__PURE__ */ i(
+        C,
+        {
+          icon: p.ai,
+          title: "Ink AI",
+          active: de,
+          disabled: s || a,
+          onClick: () => z((r) => !r)
+        },
+        "ai"
+      );
+    const n = Ne[e];
+    return n ? /* @__PURE__ */ i(
       C,
       {
-        icon: I[t] ?? t.slice(0, 1).toUpperCase(),
-        title: l.title,
-        active: R.has(t),
-        disabled: n || o,
-        onClick: () => J(t)
+        icon: p[e] ?? e.slice(0, 1).toUpperCase(),
+        title: n.title,
+        active: ot.has(e),
+        disabled: s || a,
+        onClick: () => Lt(e)
       },
-      t
+      e
     ) : null;
-  }, tt = typeof m == "number" ? `${m}px` : m, et = typeof h == "number" ? `${h}px` : h;
-  return /* @__PURE__ */ k(
+  }, Rt = typeof V == "number" ? `${V}px` : V, Bt = typeof j == "number" ? `${j}px` : j, Dt = !!(d != null && d.enabled && de);
+  return /* @__PURE__ */ F(
     "div",
     {
-      className: gt(ht, S),
-      "data-testid": D,
-      "data-disabled": n || void 0,
-      ...B,
+      className: en(Zt, Oe),
+      "data-testid": Pe,
+      "data-disabled": s || void 0,
+      "data-variant": Ke,
+      "data-premium": A.active || void 0,
+      "data-wysiwyg": et || void 0,
+      style: { ...tt, ...ze },
+      ...Xe,
       children: [
-        /* @__PURE__ */ s("div", { className: ct, role: "toolbar", "aria-label": "Ink formatting toolbar", children: F.map(Z) }),
-        /* @__PURE__ */ s(
-          "div",
+        /* @__PURE__ */ i("div", { className: Gt, role: "toolbar", "aria-label": "Ink formatting toolbar", children: De.map(xt) }),
+        L && u.trackChanges ? /* @__PURE__ */ i(
+          _n,
           {
-            ref: r,
-            className: ut,
-            contentEditable: !n && !o,
-            role: "textbox",
-            "aria-multiline": "true",
-            "aria-placeholder": L,
-            "data-placeholder": L,
-            suppressContentEditableWarning: !0,
-            style: { minHeight: tt, maxHeight: et },
-            onInput: c,
-            onBlur: W,
-            onKeyUp: g,
-            onMouseUp: g,
-            onPaste: (t) => {
-              Y(t);
-            }
+            changes: k,
+            onAccept: Ie,
+            onReject: we,
+            onAcceptAll: () => k.forEach((e) => Ie(e.id)),
+            onRejectAll: () => k.forEach((e) => we(e.id))
           }
-        ),
-        _ ? /* @__PURE__ */ k("div", { className: dt, children: [
-          V,
-          b ? ` / ${b}` : ""
+        ) : null,
+        /* @__PURE__ */ F("div", { className: qt, children: [
+          /* @__PURE__ */ F("div", { className: zt, children: [
+            u.blocks ? /* @__PURE__ */ i(
+              Sn,
+              {
+                visible: kt && !s && !a,
+                top: gt,
+                onMoveUp: () => Le("up"),
+                onMoveDown: () => Le("down")
+              }
+            ) : null,
+            /* @__PURE__ */ i(
+              "div",
+              {
+                ref: o,
+                className: Xt,
+                contentEditable: !s && !a,
+                role: "textbox",
+                "aria-multiline": "true",
+                "aria-placeholder": te,
+                "data-placeholder": te,
+                suppressContentEditableWarning: !0,
+                style: { minHeight: Rt, maxHeight: Bt },
+                onInput: l,
+                onBlur: At,
+                onKeyUp: K,
+                onKeyDown: _t,
+                onMouseUp: K,
+                onPaste: (e) => {
+                  vt(e);
+                }
+              }
+            ),
+            ge ? /* @__PURE__ */ i(
+              vn,
+              {
+                items: Tt,
+                top: pe.top,
+                left: pe.left,
+                onSelect: Et
+              }
+            ) : null
+          ] }),
+          X && u.comments ? /* @__PURE__ */ i(
+            yn,
+            {
+              comments: E,
+              author: w,
+              onClose: () => J(!1),
+              onResolve: (e) => {
+                const t = E.find((n) => n.id === e);
+                Y(
+                  E.map(
+                    (n) => n.id === e ? { ...n, resolved: !0 } : n
+                  )
+                ), t && o.current && H(ln(o.current.innerHTML, t.highlightId));
+              },
+              onAddReply: (e, t) => {
+                Y(
+                  E.map(
+                    (n) => n.id === e ? {
+                      ...n,
+                      replies: [
+                        ...n.replies,
+                        {
+                          id: ve("reply"),
+                          author: w,
+                          body: t,
+                          timestamp: Date.now()
+                        }
+                      ]
+                    } : n
+                  )
+                );
+              }
+            }
+          ) : null,
+          Dt && d ? /* @__PURE__ */ i(
+            Nn,
+            {
+              config: d,
+              documentHtml: ((He = o.current) == null ? void 0 : He.innerHTML) ?? h ?? "",
+              selectionHtml: fe,
+              onClose: () => z(!1),
+              onApplyHtml: (e) => {
+                var t;
+                if ((t = o.current) == null || t.focus(), fe)
+                  I(e);
+                else {
+                  H(e);
+                  return;
+                }
+                l();
+              }
+            }
+          ) : null
+        ] }),
+        oe ? /* @__PURE__ */ F("div", { className: Qt, children: [
+          st,
+          re ? ` / ${re}` : ""
         ] }) : null
       ]
     }
   );
 };
 export {
-  St as InkEditor
+  no as InkEditor
 };