@forgedevstack/ink 1.0.0 → 1.1.0

package/dist/components/InkEditor/InkEditor.js

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