@harbour-enterprises/superdoc 0.12.0-RC1 → 0.12.0-RC2

package/dist/super-editor/super-editor.es.js

@@ -2,93 +2,93 @@ var yt = Object.defineProperty;
 var Ue = (t) => {
   throw TypeError(t);
 };
-var bt = (t, l, o) => l in t ? yt(t, l, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[l] = o;
-var Re = (t, l, o) => bt(t, typeof l != "symbol" ? l + "" : l, o), qe = (t, l, o) => l.has(t) || Ue("Cannot " + o);
-var Ae = (t, l, o) => (qe(t, l, "read from private field"), o ? o.call(t) : l.get(t)), Oe = (t, l, o) => l.has(t) ? Ue("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(t) : l.set(t, o);
-var z = (t, l, o) => (qe(t, l, "access private method"), o);
-import { _ as q, a as Ze, b as wt, I as Ne, f as kt, c as Ge, d as Ct, i as _t, u as xt, r as St, E as ze, e as Et, P as At, h as Tt, M as Ft, j as It, A as Lt, N as Mt } from "./chunks/editor-D_W26AM3.js";
-import { C as No, T as zo, l as Vo, n as Wo, k as Po, m as jo } from "./chunks/editor-D_W26AM3.js";
-import { a1 as Dt, E as $t, a3 as Ht, T as Ye, a as Bt } from "./chunks/converter-B_CnsyBe.js";
-import { O as qo } from "./chunks/converter-B_CnsyBe.js";
-import { ref as f, createElementBlock as k, openBlock as w, createElementVNode as C, unref as D, getCurrentInstance as Rt, computed as j, watch as Ot, onMounted as Ce, createCommentVNode as Q, withDirectives as Je, withKeys as Qe, normalizeClass as oe, withModifiers as ge, vModelText as et, createTextVNode as tt, toDisplayString as ie, Fragment as U, renderList as ee, normalizeStyle as J, createVNode as P, h as B, createApp as Nt, reactive as Ke, onUnmounted as zt, shallowRef as nt, onBeforeUnmount as ot, createBlock as Vt } from "vue";
-import { t as X, s as Wt, T as Pt, N as Y } from "./chunks/toolbar-DgpDtH5C.js";
+var bt = (t, r, o) => r in t ? yt(t, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[r] = o;
+var Re = (t, r, o) => bt(t, typeof r != "symbol" ? r + "" : r, o), qe = (t, r, o) => r.has(t) || Ue("Cannot " + o);
+var Ae = (t, r, o) => (qe(t, r, "read from private field"), o ? o.call(t) : r.get(t)), Oe = (t, r, o) => r.has(t) ? Ue("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, o);
+var z = (t, r, o) => (qe(t, r, "access private method"), o);
+import { _ as q, a as Ze, b as wt, I as Ne, f as Ct, c as Ge, d as kt, i as _t, u as xt, r as Et, E as ze, e as St, P as At, h as Tt, M as Ft, j as It, A as Lt, N as Mt } from "./chunks/editor-BY7pz5xQ.js";
+import { C as No, T as zo, l as Vo, n as Wo, k as Po, m as jo } from "./chunks/editor-BY7pz5xQ.js";
+import { a6 as Dt, E as $t, a8 as Ht, T as Ye, a as Bt } from "./chunks/converter-D1a6grDV.js";
+import { O as qo } from "./chunks/converter-D1a6grDV.js";
+import { ref as f, createElementBlock as C, openBlock as w, createElementVNode as k, unref as D, getCurrentInstance as Rt, computed as j, watch as Ot, onMounted as ke, createCommentVNode as Q, withDirectives as Je, withKeys as Qe, normalizeClass as oe, withModifiers as ge, vModelText as et, createTextVNode as tt, toDisplayString as ie, Fragment as U, renderList as ee, normalizeStyle as J, createVNode as P, h as B, createApp as Nt, reactive as Ke, onUnmounted as zt, shallowRef as nt, onBeforeUnmount as ot, createBlock as Vt } from "vue";
+import { t as X, s as Wt, T as Pt, N as Y } from "./chunks/toolbar-DEvjPuNj.js";
 import jt from "./ai-writer.es.js";
-import { D as Ko } from "./chunks/docx-zipper-CmQ11kAl.js";
+import { D as Ko } from "./chunks/docx-zipper-L7BeJRax.js";
 import { createZip as Zo } from "./file-zipper.es.js";
 var it = { exports: {} };
 (function(t) {
-  var l = Object.prototype.hasOwnProperty, o = "~";
+  var r = Object.prototype.hasOwnProperty, o = "~";
   function n() {
   }
   Object.create && (n.prototype = /* @__PURE__ */ Object.create(null), new n().__proto__ || (o = !1));
-  function e(s, c, d) {
-    this.fn = s, this.context = c, this.once = d || !1;
+  function e(l, d, m) {
+    this.fn = l, this.context = d, this.once = m || !1;
   }
-  function i(s, c, d, u, b) {
-    if (typeof d != "function")
+  function i(l, d, m, s, b) {
+    if (typeof m != "function")
       throw new TypeError("The listener must be a function");
-    var v = new e(d, u || s, b), y = o ? o + c : c;
-    return s._events[y] ? s._events[y].fn ? s._events[y] = [s._events[y], v] : s._events[y].push(v) : (s._events[y] = v, s._eventsCount++), s;
+    var v = new e(m, s || l, b), y = o ? o + d : d;
+    return l._events[y] ? l._events[y].fn ? l._events[y] = [l._events[y], v] : l._events[y].push(v) : (l._events[y] = v, l._eventsCount++), l;
   }
-  function r(s, c) {
-    --s._eventsCount === 0 ? s._events = new n() : delete s._events[c];
+  function c(l, d) {
+    --l._eventsCount === 0 ? l._events = new n() : delete l._events[d];
   }
   function a() {
     this._events = new n(), this._eventsCount = 0;
   }
   a.prototype.eventNames = function() {
-    var c = [], d, u;
-    if (this._eventsCount === 0) return c;
-    for (u in d = this._events)
-      l.call(d, u) && c.push(o ? u.slice(1) : u);
-    return Object.getOwnPropertySymbols ? c.concat(Object.getOwnPropertySymbols(d)) : c;
-  }, a.prototype.listeners = function(c) {
-    var d = o ? o + c : c, u = this._events[d];
-    if (!u) return [];
-    if (u.fn) return [u.fn];
-    for (var b = 0, v = u.length, y = new Array(v); b < v; b++)
-      y[b] = u[b].fn;
+    var d = [], m, s;
+    if (this._eventsCount === 0) return d;
+    for (s in m = this._events)
+      r.call(m, s) && d.push(o ? s.slice(1) : s);
+    return Object.getOwnPropertySymbols ? d.concat(Object.getOwnPropertySymbols(m)) : d;
+  }, a.prototype.listeners = function(d) {
+    var m = o ? o + d : d, s = this._events[m];
+    if (!s) return [];
+    if (s.fn) return [s.fn];
+    for (var b = 0, v = s.length, y = new Array(v); b < v; b++)
+      y[b] = s[b].fn;
     return y;
-  }, a.prototype.listenerCount = function(c) {
-    var d = o ? o + c : c, u = this._events[d];
-    return u ? u.fn ? 1 : u.length : 0;
-  }, a.prototype.emit = function(c, d, u, b, v, y) {
-    var S = o ? o + c : c;
-    if (!this._events[S]) return !1;
-    var g = this._events[S], F = arguments.length, $, p;
+  }, a.prototype.listenerCount = function(d) {
+    var m = o ? o + d : d, s = this._events[m];
+    return s ? s.fn ? 1 : s.length : 0;
+  }, a.prototype.emit = function(d, m, s, b, v, y) {
+    var E = o ? o + d : d;
+    if (!this._events[E]) return !1;
+    var g = this._events[E], F = arguments.length, $, p;
     if (g.fn) {
-      switch (g.once && this.removeListener(c, g.fn, void 0, !0), F) {
+      switch (g.once && this.removeListener(d, g.fn, void 0, !0), F) {
         case 1:
           return g.fn.call(g.context), !0;
         case 2:
-          return g.fn.call(g.context, d), !0;
+          return g.fn.call(g.context, m), !0;
         case 3:
-          return g.fn.call(g.context, d, u), !0;
+          return g.fn.call(g.context, m, s), !0;
         case 4:
-          return g.fn.call(g.context, d, u, b), !0;
+          return g.fn.call(g.context, m, s, b), !0;
         case 5:
-          return g.fn.call(g.context, d, u, b, v), !0;
+          return g.fn.call(g.context, m, s, b, v), !0;
         case 6:
-          return g.fn.call(g.context, d, u, b, v, y), !0;
+          return g.fn.call(g.context, m, s, b, v, y), !0;
       }
       for (p = 1, $ = new Array(F - 1); p < F; p++)
         $[p - 1] = arguments[p];
       g.fn.apply(g.context, $);
     } else {
-      var _ = g.length, T;
-      for (p = 0; p < _; p++)
-        switch (g[p].once && this.removeListener(c, g[p].fn, void 0, !0), F) {
+      var x = g.length, T;
+      for (p = 0; p < x; p++)
+        switch (g[p].once && this.removeListener(d, g[p].fn, void 0, !0), F) {
           case 1:
             g[p].fn.call(g[p].context);
             break;
           case 2:
-            g[p].fn.call(g[p].context, d);
+            g[p].fn.call(g[p].context, m);
             break;
           case 3:
-            g[p].fn.call(g[p].context, d, u);
+            g[p].fn.call(g[p].context, m, s);
             break;
           case 4:
-            g[p].fn.call(g[p].context, d, u, b);
+            g[p].fn.call(g[p].context, m, s, b);
             break;
           default:
             if (!$) for (T = 1, $ = new Array(F - 1); T < F; T++)
@@ -97,60 +97,60 @@ var it = { exports: {} };
         }
     }
     return !0;
-  }, a.prototype.on = function(c, d, u) {
-    return i(this, c, d, u, !1);
-  }, a.prototype.once = function(c, d, u) {
-    return i(this, c, d, u, !0);
-  }, a.prototype.removeListener = function(c, d, u, b) {
-    var v = o ? o + c : c;
+  }, a.prototype.on = function(d, m, s) {
+    return i(this, d, m, s, !1);
+  }, a.prototype.once = function(d, m, s) {
+    return i(this, d, m, s, !0);
+  }, a.prototype.removeListener = function(d, m, s, b) {
+    var v = o ? o + d : d;
     if (!this._events[v]) return this;
-    if (!d)
-      return r(this, v), this;
+    if (!m)
+      return c(this, v), this;
     var y = this._events[v];
     if (y.fn)
-      y.fn === d && (!b || y.once) && (!u || y.context === u) && r(this, v);
+      y.fn === m && (!b || y.once) && (!s || y.context === s) && c(this, v);
     else {
-      for (var S = 0, g = [], F = y.length; S < F; S++)
-        (y[S].fn !== d || b && !y[S].once || u && y[S].context !== u) && g.push(y[S]);
-      g.length ? this._events[v] = g.length === 1 ? g[0] : g : r(this, v);
+      for (var E = 0, g = [], F = y.length; E < F; E++)
+        (y[E].fn !== m || b && !y[E].once || s && y[E].context !== s) && g.push(y[E]);
+      g.length ? this._events[v] = g.length === 1 ? g[0] : g : c(this, v);
     }
     return this;
-  }, a.prototype.removeAllListeners = function(c) {
-    var d;
-    return c ? (d = o ? o + c : c, this._events[d] && r(this, d)) : (this._events = new n(), this._eventsCount = 0), this;
+  }, a.prototype.removeAllListeners = function(d) {
+    var m;
+    return d ? (m = o ? o + d : d, this._events[m] && c(this, m)) : (this._events = new n(), this._eventsCount = 0), this;
   }, a.prototype.off = a.prototype.removeListener, a.prototype.addListener = a.prototype.on, a.prefixed = o, a.EventEmitter = a, t.exports = a;
 })(it);
 var Ut = it.exports;
 const qt = /* @__PURE__ */ Dt(Ut);
 function Gt(t) {
-  let l = t;
-  for (; l; ) {
-    const o = window.getComputedStyle(l).overflowY;
-    if (/(auto|scroll)/.test(o) && l.scrollHeight > l.clientHeight)
-      return l;
-    l = l.parentElement;
+  let r = t;
+  for (; r; ) {
+    const o = window.getComputedStyle(r).overflowY;
+    if (/(auto|scroll)/.test(o) && r.scrollHeight > r.clientHeight)
+      return r;
+    r = r.parentElement;
   }
   return document.scrollingElement || document.documentElement;
 }
-function Kt(t, l = { behavior: "smooth", block: "start" }) {
+function Kt(t, r = { behavior: "smooth", block: "start" }) {
   if (!t) return;
   const o = Gt(t), n = o.getBoundingClientRect(), i = t.getBoundingClientRect().top - n.top + o.scrollTop;
   o.scrollTo({
-    top: l.block === "start" ? i : i - o.clientHeight + t.offsetHeight,
-    behavior: l.behavior
+    top: r.block === "start" ? i : i - o.clientHeight + t.offsetHeight,
+    behavior: r.behavior
   });
 }
-const x = (t) => {
+const _ = (t) => {
   if (!["button", "options", "separator", "dropdown", "overflow"].includes(t.type))
     throw new Error("Invalid toolbar item type - " + t.type);
   if (t.type === "button" && !t.defaultLabel && !t.icon)
     throw new Error("Toolbar button item needs either icon or label - " + t.name);
   if (!t.name)
     throw new Error("Invalid toolbar item name - " + t.name);
-  const o = f($t()), n = t.type, e = f(t.name), i = t.command, r = t.noArgumentCommand, a = f(t.icon), s = f(t.group || "center"), c = f(t.allowWithoutEditor), d = f(t.attributes || {}), u = t.disabled || !1, b = f(t.disabled), v = f(!1), y = f(!1), S = f(t.style), g = f(t.isNarrow), F = f(t.isWide), $ = f(t.minWidth), p = f(t.suppressActiveHighlight || !1), _ = f(t.argument), T = f(null), N = f(null), V = f(t.iconColor), te = f(t.hasCaret), ye = f(t.dropdownStyles), Z = f(t.tooltip), re = f(t.tooltipVisible), be = f(t.tooltipTimeout), I = f(t.defaultLabel), M = f(t.label), H = f(t.hideLabel), R = f(t.inlineTextInputVisible), G = f(t.hasInlineTextInput), K = f(t.markName), ce = f(t.labelAttr), ue = f(t.selectedValue), _e = f(t.dropdownValueKey), xe = f(t.inputRef || null), Se = f([]);
+  const o = f($t()), n = t.type, e = f(t.name), i = t.command, c = t.noArgumentCommand, a = f(t.icon), l = f(t.group || "center"), d = f(t.allowWithoutEditor), m = f(t.attributes || {}), s = t.disabled || !1, b = f(t.disabled), v = f(!1), y = f(!1), E = f(t.style), g = f(t.isNarrow), F = f(t.isWide), $ = f(t.minWidth), p = f(t.suppressActiveHighlight || !1), x = f(t.argument), T = f(null), N = f(null), V = f(t.iconColor), te = f(t.hasCaret), ye = f(t.dropdownStyles), Z = f(t.tooltip), re = f(t.tooltipVisible), be = f(t.tooltipTimeout), I = f(t.defaultLabel), M = f(t.label), H = f(t.hideLabel), R = f(t.inlineTextInputVisible), G = f(t.hasInlineTextInput), K = f(t.markName), ce = f(t.labelAttr), ue = f(t.selectedValue), _e = f(t.dropdownValueKey), xe = f(t.inputRef || null), Ee = f([]);
   if (t.options) {
     if (!Array.isArray(t.options)) throw new Error("Invalid toolbar item options - " + t.options);
-    Se.value.push(...t.options);
+    Ee.value.push(...t.options);
   }
   const Fe = (se) => {
     we(se), !p.value && (v.value = !0);
@@ -159,7 +159,7 @@ const x = (t) => {
   }, Le = (se) => {
     b.value = se;
   }, Me = () => {
-    b.value = u;
+    b.value = s;
   }, we = t.onActivate || (() => null), ne = t.onDeactivate || (() => null), De = () => {
     const se = {};
     return Object.keys(me).forEach((pe) => {
@@ -170,20 +170,20 @@ const x = (t) => {
     name: e,
     type: n,
     command: i,
-    noArgumentCommand: r,
+    noArgumentCommand: c,
     icon: a,
     tooltip: Z,
-    group: s,
-    attributes: d,
+    group: l,
+    attributes: m,
     disabled: b,
     active: v,
     expand: y,
-    nestedOptions: Se,
-    style: S,
+    nestedOptions: Ee,
+    style: E,
     isNarrow: g,
     isWide: F,
     minWidth: $,
-    argument: _,
+    argument: x,
     parentItem: N,
     iconColor: V,
     hasCaret: te,
@@ -198,7 +198,7 @@ const x = (t) => {
     markName: K,
     labelAttr: ce,
     childItem: T,
-    allowWithoutEditor: c,
+    allowWithoutEditor: d,
     dropdownValueKey: _e,
     selectedValue: ue,
     inputRef: xe
@@ -216,29 +216,29 @@ const x = (t) => {
 }, Xt = { class: "alignment-buttons" }, Zt = ["innerHTML"], Yt = ["innerHTML"], Jt = ["innerHTML"], Qt = ["innerHTML"], en = {
   __name: "AlignmentButtons",
   emits: ["select"],
-  setup(t, { emit: l }) {
-    const o = l, n = (e) => {
+  setup(t, { emit: r }) {
+    const o = r, n = (e) => {
       o("select", e);
     };
-    return (e, i) => (w(), k("div", Xt, [
-      C("div", {
+    return (e, i) => (w(), C("div", Xt, [
+      k("div", {
         class: "button-icon",
-        onClick: i[0] || (i[0] = (r) => n("left")),
+        onClick: i[0] || (i[0] = (c) => n("left")),
         innerHTML: D(X).alignLeft
       }, null, 8, Zt),
-      C("div", {
+      k("div", {
         class: "button-icon",
-        onClick: i[1] || (i[1] = (r) => n("center")),
+        onClick: i[1] || (i[1] = (c) => n("center")),
         innerHTML: D(X).alignCenter
       }, null, 8, Yt),
-      C("div", {
+      k("div", {
         class: "button-icon",
-        onClick: i[2] || (i[2] = (r) => n("right")),
+        onClick: i[2] || (i[2] = (c) => n("right")),
         innerHTML: D(X).alignRight
       }, null, 8, Jt),
-      C("div", {
+      k("div", {
         class: "button-icon",
-        onClick: i[3] || (i[3] = (r) => n("justify")),
+        onClick: i[3] || (i[3] = (c) => n("justify")),
         innerHTML: D(X).alignJustify
       }, null, 8, Qt)
     ]));
@@ -281,88 +281,88 @@ const x = (t) => {
     }
   },
   emits: ["submit", "cancel"],
-  setup(t, { emit: l }) {
-    const o = l, n = t, { proxy: e } = Rt(), i = () => {
-      if (e?.$submit instanceof Function && e.$submit(), c.value && u.value) {
-        o("submit", { text: s.value, href: d.value });
+  setup(t, { emit: r }) {
+    const o = r, n = t, { proxy: e } = Rt(), i = () => {
+      if (e?.$submit instanceof Function && e.$submit(), d.value && s.value) {
+        o("submit", { text: l.value, href: m.value });
         return;
-      } else if (!c.value) {
-        o("submit", { text: s.value, href: null });
+      } else if (!d.value) {
+        o("submit", { text: l.value, href: null });
         return;
       }
       console.debug("[LinkInput] Invalid URL in handleSubmit"), a.value = !0;
-    }, r = () => {
-      o("submit", { text: s.value, href: null });
-    }, a = f(!1), s = f(n.initialText), c = f(n.href), d = j(() => c.value?.startsWith("http") ? c.value : "http://" + c.value), u = j(() => {
-      const p = d.value.split(".").filter(Boolean);
-      return d.value.includes(".") && p.length > 1;
-    }), b = j(() => y.value ? "Apply" : "Remove"), v = j(() => !u.value), y = j(() => !S.value), S = j(() => n.href && !c.value), g = j(() => n.href.startsWith("#")), F = () => {
-      window.open(d.value, "_blank");
+    }, c = () => {
+      o("submit", { text: l.value, href: null });
+    }, a = f(!1), l = f(n.initialText), d = f(n.href), m = j(() => d.value?.startsWith("http") ? d.value : "http://" + d.value), s = j(() => {
+      const p = m.value.split(".").filter(Boolean);
+      return m.value.includes(".") && p.length > 1;
+    }), b = j(() => y.value ? "Apply" : "Remove"), v = j(() => !s.value), y = j(() => !E.value), E = j(() => n.href && !d.value), g = j(() => n.href.startsWith("#")), F = () => {
+      window.open(m.value, "_blank");
     };
     Ot(
       () => n.href,
       (p) => {
-        c.value = p;
+        d.value = p;
       }
     );
     const $ = () => {
       const p = document.querySelector(".link-input-ctn input");
       p && p.focus();
     };
-    return Ce(() => {
+    return ke(() => {
       n.showInput && $();
-    }), (p, _) => (w(), k("div", nn, [
-      t.href ? g.value ? (w(), k("div", sn, "Page anchor")) : (w(), k("div", ln, "Edit link")) : (w(), k("div", on, "Add link")),
-      t.showInput && !g.value ? (w(), k("div", an, [
-        C("div", rn, [
-          C("div", {
+    }), (p, x) => (w(), C("div", nn, [
+      t.href ? g.value ? (w(), C("div", sn, "Page anchor")) : (w(), C("div", ln, "Edit link")) : (w(), C("div", on, "Add link")),
+      t.showInput && !g.value ? (w(), C("div", an, [
+        k("div", rn, [
+          k("div", {
             class: "input-icon",
             innerHTML: D(X).linkInput
           }, null, 8, cn),
-          Je(C("input", {
+          Je(k("input", {
             type: "text",
             placeholder: "Type or paste a link",
             class: oe({ error: a.value }),
-            "onUpdate:modelValue": _[0] || (_[0] = (T) => c.value = T),
+            "onUpdate:modelValue": x[0] || (x[0] = (T) => d.value = T),
             onKeydown: [
               Qe(ge(i, ["stop", "prevent"]), ["enter"]),
-              _[1] || (_[1] = (T) => a.value = !1)
+              x[1] || (x[1] = (T) => a.value = !1)
             ]
           }, null, 42, dn), [
-            [et, c.value]
+            [et, d.value]
           ]),
-          C("div", {
-            class: oe(["open-link-icon", { disabled: !u.value }]),
+          k("div", {
+            class: oe(["open-link-icon", { disabled: !s.value }]),
             innerHTML: D(X).openLink,
             onClick: F
           }, null, 10, un)
         ]),
-        C("div", mn, [
-          t.href ? (w(), k("button", {
+        k("div", mn, [
+          t.href ? (w(), C("button", {
             key: 0,
             class: "remove-btn",
-            onClick: r
+            onClick: c
           }, [
-            C("div", {
+            k("div", {
               class: "remove-btn__icon",
               innerHTML: D(X).removeLink
             }, null, 8, pn),
-            _[3] || (_[3] = tt(" Remove "))
+            x[3] || (x[3] = tt(" Remove "))
           ])) : Q("", !0),
-          y.value ? (w(), k("button", {
+          y.value ? (w(), C("button", {
             key: 1,
             class: oe(["submit-btn", { "disable-btn": v.value }]),
             onClick: i
           }, ie(b.value), 3)) : Q("", !0)
         ])
-      ])) : g.value ? (w(), k("div", hn, [
-        C("a", {
-          onClick: _[2] || (_[2] = ge((...T) => t.goToAnchor && t.goToAnchor(...T), ["stop", "prevent"]))
+      ])) : g.value ? (w(), C("div", hn, [
+        k("a", {
+          onClick: x[2] || (x[2] = ge((...T) => t.goToAnchor && t.goToAnchor(...T), ["stop", "prevent"]))
         }, "Go to " + ie(t.href.startsWith("#_") ? t.href.substring(2) : t.href), 1)
       ])) : Q("", !0)
     ]));
   }
-}, vn = /* @__PURE__ */ q(fn, [["__scopeId", "data-v-6990d5b2"]]), gn = { class: "document-mode" }, yn = ["onClick"], bn = { class: "document-mode-column icon-column" }, wn = ["innerHTML"], kn = { class: "document-mode-column text-column" }, Cn = { class: "document-mode-type" }, _n = { class: "document-mode-description" }, xn = {
+}, vn = /* @__PURE__ */ q(fn, [["__scopeId", "data-v-6990d5b2"]]), gn = { class: "document-mode" }, yn = ["onClick"], bn = { class: "document-mode-column icon-column" }, wn = ["innerHTML"], Cn = { class: "document-mode-column text-column" }, kn = { class: "document-mode-type" }, _n = { class: "document-mode-description" }, xn = {
   __name: "DocumentMode",
   props: {
     options: {
@@ -370,29 +370,29 @@ const x = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: l }) {
-    const o = l, n = (e) => {
+  setup(t, { emit: r }) {
+    const o = r, n = (e) => {
       o("select", e);
     };
-    return (e, i) => (w(), k("div", gn, [
-      (w(!0), k(U, null, ee(t.options, (r) => (w(), k("div", {
-        class: oe(["option-item", { disabled: r.disabled }]),
-        onClick: (a) => n(r)
+    return (e, i) => (w(), C("div", gn, [
+      (w(!0), C(U, null, ee(t.options, (c) => (w(), C("div", {
+        class: oe(["option-item", { disabled: c.disabled }]),
+        onClick: (a) => n(c)
       }, [
-        C("div", bn, [
-          C("div", {
+        k("div", bn, [
+          k("div", {
             class: "icon-column__icon",
-            innerHTML: r.icon
+            innerHTML: c.icon
           }, null, 8, wn)
         ]),
-        C("div", kn, [
-          C("div", Cn, ie(r.label), 1),
-          C("div", _n, ie(r.description), 1)
+        k("div", Cn, [
+          k("div", kn, ie(c.label), 1),
+          k("div", _n, ie(c.description), 1)
         ])
       ], 10, yn))), 256))
     ]));
   }
-}, Sn = /* @__PURE__ */ q(xn, [["__scopeId", "data-v-f86e1477"]]), En = {
+}, En = /* @__PURE__ */ q(xn, [["__scopeId", "data-v-f86e1477"]]), Sn = {
   key: 0,
   class: "linked-style-buttons"
 }, An = ["onClick"], Tn = {
@@ -404,16 +404,16 @@ const x = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: l }) {
-    const o = l, n = t, e = (i) => {
+  setup(t, { emit: r }) {
+    const o = r, n = t, e = (i) => {
       o("select", i);
     };
-    return (i, r) => n.editor ? (w(), k("div", En, [
-      (w(!0), k(U, null, ee(D(Ze)(t.editor), (a) => (w(), k("div", {
+    return (i, c) => n.editor ? (w(), C("div", Sn, [
+      (w(!0), C(U, null, ee(D(Ze)(t.editor), (a) => (w(), C("div", {
         class: "style-item",
-        onClick: (s) => e(a)
+        onClick: (l) => e(a)
       }, [
-        C("div", {
+        k("div", {
           class: "style-name",
           style: J(D(wt)(a, null, !1))
         }, ie(a.definition.attrs.name), 5)
@@ -433,31 +433,31 @@ const x = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: l }) {
-    const o = l, n = t, e = j(() => (a) => n.activeColor.value ? n.activeColor.value.toUpperCase() === a.value : !1), i = (a, s) => s === 5 || ["#FFFFFF", "#FAFF09"].includes(a) ? { color: "#000" } : { color: "#FFF" }, r = (a) => {
+  setup(t, { emit: r }) {
+    const o = r, n = t, e = j(() => (a) => n.activeColor.value ? n.activeColor.value.toUpperCase() === a.value : !1), i = (a, l) => l === 5 || ["#FFFFFF", "#FAFF09"].includes(a) ? { color: "#000" } : { color: "#FFF" }, c = (a) => {
       o("select", a.value);
     };
-    return Ce(() => {
-      if (!n.icons.every((s) => Array.isArray(s))) throw new Error("icon props must be 2d array");
-    }), (a, s) => (w(!0), k(U, null, ee(t.icons, (c, d) => (w(), k("div", {
+    return ke(() => {
+      if (!n.icons.every((l) => Array.isArray(l))) throw new Error("icon props must be 2d array");
+    }), (a, l) => (w(!0), C(U, null, ee(t.icons, (d, m) => (w(), C("div", {
       class: "option-row",
-      key: d
+      key: m
     }, [
-      (w(!0), k(U, null, ee(c, (u, b) => (w(), k("div", {
+      (w(!0), C(U, null, ee(d, (s, b) => (w(), C("div", {
         class: "option",
         key: b,
-        onClick: ge((v) => r(u), ["stop", "prevent"])
+        onClick: ge((v) => c(s), ["stop", "prevent"])
       }, [
-        C("div", {
+        k("div", {
           class: "option__icon",
-          innerHTML: u.icon,
-          style: J(u.style)
+          innerHTML: s.icon,
+          style: J(s.style)
         }, null, 12, Ln),
-        e.value(u) ? (w(), k("div", {
+        e.value(s) ? (w(), C("div", {
           key: 0,
           class: "option__check",
           innerHTML: D(X).colorOptionCheck,
-          style: J(i(u.value, b))
+          style: J(i(s.value, b))
         }, null, 12, Mn)) : Q("", !0)
       ], 8, In))), 128))
     ]))), 128));
@@ -484,30 +484,30 @@ const x = (t) => {
     }
   },
   emits: ["select", "clickoutside"],
-  setup(t, { emit: l }) {
-    const o = l, n = (e) => {
+  setup(t, { emit: r }) {
+    const o = r, n = (e) => {
       o("select", e);
     };
-    return (e, i) => (w(), k("div", Hn, [
-      t.hasNoneIcon ? (w(), k("div", {
+    return (e, i) => (w(), C("div", Hn, [
+      t.hasNoneIcon ? (w(), C("div", {
         key: 0,
         class: "none-option",
-        onClick: i[0] || (i[0] = (r) => n("none"))
+        onClick: i[0] || (i[0] = (c) => n("none"))
       }, [
-        C("span", {
+        k("span", {
           innerHTML: D($n),
           class: "none-icon"
         }, null, 8, Bn),
         i[1] || (i[1] = tt(" None "))
       ])) : Q("", !0),
-      C("div", Rn, [
+      k("div", Rn, [
         P(Xe, {
           icons: t.icons,
           "active-color": t.activeColor,
           onSelect: n
         }, null, 8, ["icons", "active-color"]),
-        t.customIcons.flat().length ? (w(), k(U, { key: 0 }, [
-          i[2] || (i[2] = C("span", { class: "option-grid-ctn__subtitle" }, "Custom colors", -1)),
+        t.customIcons.flat().length ? (w(), C(U, { key: 0 }, [
+          i[2] || (i[2] = k("span", { class: "option-grid-ctn__subtitle" }, "Custom colors", -1)),
           P(Xe, {
             icons: t.customIcons,
             "active-color": t.activeColor,
@@ -519,8 +519,8 @@ const x = (t) => {
   }
 }, Nn = /* @__PURE__ */ q(On, [["__scopeId", "data-v-47b783db"]]), zn = (t) => {
   t.expand.value = !1;
-}, h = (t, l = null) => ({
-  label: l,
+}, h = (t, r = null) => ({
+  label: r,
   icon: X.colorOption,
   value: t,
   style: {
@@ -528,15 +528,15 @@ const x = (t) => {
     boxShadow: "0 0 5px 1px rgba(0, 0, 0, 0.1)",
     borderRadius: "50%"
   }
-}), Ve = (t, l, o = [], n = !1) => {
+}), Ve = (t, r, o = [], n = !1) => {
   const e = (i) => {
-    l.iconColor.value = i, t.emitCommand({ item: l, argument: i }), zn(l);
+    r.iconColor.value = i, t.emitCommand({ item: r, argument: i }), zn(r);
   };
   return B("div", {}, [
     B(Nn, {
       icons: st,
       customIcons: o,
-      activeColor: l.iconColor,
+      activeColor: r.iconColor,
       hasNoneIcon: n,
       onSelect: e
     })
@@ -603,7 +603,7 @@ const x = (t) => {
     h("#6CA0DC"),
     h("#9DBFE8"),
     h("#CEDFF3"),
-    h("#00E0FF")
+    h("#21c8ce")
   ],
   [
     h("#3E027A"),
@@ -617,38 +617,38 @@ const x = (t) => {
 ], Vn = () => st.flat().map((t) => t.value), Wn = { class: "toolbar-table-grid-wrapper" }, Pn = ["data-cols", "data-rows", "onClick"], jn = { class: "toolbar-table-grid-value" }, Un = {
   __name: "TableGrid",
   emits: ["select", "clickoutside"],
-  setup(t, { emit: l }) {
-    const o = l, n = f(0), e = f(0), i = (a) => {
-      let s = a.target;
-      if (!!s.dataset.grid)
+  setup(t, { emit: r }) {
+    const o = r, n = f(0), e = f(0), i = (a) => {
+      let l = a.target;
+      if (!!l.dataset.grid)
         return;
-      let u = [...s.parentElement.querySelectorAll("[data-item]")], b = parseInt(s.dataset.cols, 10), v = parseInt(s.dataset.rows, 10);
+      let s = [...l.parentElement.querySelectorAll("[data-item]")], b = parseInt(l.dataset.cols, 10), v = parseInt(l.dataset.rows, 10);
       e.value = b, n.value = v;
-      for (let y = 0; y < u.length; y++) {
-        let S = u[y], g = parseInt(S.dataset.cols, 10), F = parseInt(S.dataset.rows, 10);
-        g <= b && F <= v ? S.classList.add("selected") : S.classList.remove("selected");
+      for (let y = 0; y < s.length; y++) {
+        let E = s[y], g = parseInt(E.dataset.cols, 10), F = parseInt(E.dataset.rows, 10);
+        g <= b && F <= v ? E.classList.add("selected") : E.classList.remove("selected");
       }
-    }, r = ({ cols: a, rows: s }) => {
-      o("select", { cols: a, rows: s });
+    }, c = ({ cols: a, rows: l }) => {
+      o("select", { cols: a, rows: l });
     };
-    return (a, s) => (w(), k("div", Wn, [
-      C("div", {
+    return (a, l) => (w(), C("div", Wn, [
+      k("div", {
         class: "toolbar-table-grid",
         onMouseover: i,
         "data-grid": "true"
       }, [
-        (w(), k(U, null, ee(5, (c) => (w(), k(U, { key: c }, [
-          (w(), k(U, null, ee(5, (d) => C("div", {
+        (w(), C(U, null, ee(5, (d) => (w(), C(U, { key: d }, [
+          (w(), C(U, null, ee(5, (m) => k("div", {
             class: "toolbar-table-grid__item",
-            key: `${c}_${d}`,
-            "data-cols": d,
-            "data-rows": c,
+            key: `${d}_${m}`,
+            "data-cols": m,
+            "data-rows": d,
             "data-item": "true",
-            onClick: ge((u) => r({ cols: d, rows: c }), ["stop", "prevent"])
+            onClick: ge((s) => c({ cols: m, rows: d }), ["stop", "prevent"])
           }, null, 8, Pn)), 64))
         ], 64))), 64))
       ], 32),
-      C("div", jn, ie(n.value) + " x " + ie(e.value), 1)
+      k("div", jn, ie(n.value) + " x " + ie(e.value), 1)
     ]));
   }
 }, qn = /* @__PURE__ */ q(Un, [["__scopeId", "data-v-06352ab9"]]), Gn = { class: "toolbar-table-actions" }, Kn = ["onClick"], Xn = { class: "toolbar-table-actions__icon" }, Zn = ["innerHTML"], Yn = { class: "toolbar-table-actions__label" }, Jn = {
@@ -659,22 +659,22 @@ const x = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: l }) {
-    const o = l, n = (e) => {
+  setup(t, { emit: r }) {
+    const o = r, n = (e) => {
       o("select", { command: e.command });
     };
-    return (e, i) => (w(), k("div", Gn, [
-      (w(!0), k(U, null, ee(t.options, (r) => (w(), k("div", {
-        class: oe(["toolbar-table-actions__item", { "toolbar-table-actions__item--border": r.bottomBorder }]),
-        onClick: (a) => n(r)
+    return (e, i) => (w(), C("div", Gn, [
+      (w(!0), C(U, null, ee(t.options, (c) => (w(), C("div", {
+        class: oe(["toolbar-table-actions__item", { "toolbar-table-actions__item--border": c.bottomBorder }]),
+        onClick: (a) => n(c)
       }, [
-        C("div", Xn, [
-          C("div", {
+        k("div", Xn, [
+          k("div", {
             class: "toolbar-table-actions__icon-wrapper",
-            innerHTML: r.icon
+            innerHTML: c.icon
           }, null, 8, Zn)
         ]),
-        C("div", Yn, ie(r.label), 1)
+        k("div", Yn, ie(c.label), 1)
       ], 10, Kn))), 256))
     ]));
   }
@@ -687,15 +687,15 @@ const x = (t) => {
     }
   },
   emits: ["submit"],
-  setup(t, { emit: l }) {
-    const o = f(""), n = l, e = () => {
+  setup(t, { emit: r }) {
+    const o = f(""), n = r, e = () => {
       n("submit", { value: o.value });
     };
-    return (i, r) => (w(), k("div", to, [
-      C("div", no, [
-        Je(C("input", {
+    return (i, c) => (w(), C("div", to, [
+      k("div", no, [
+        Je(k("input", {
           ref: t.searchRef,
-          "onUpdate:modelValue": r[0] || (r[0] = (a) => o.value = a),
+          "onUpdate:modelValue": c[0] || (c[0] = (a) => o.value = a),
           class: "search-input",
           type: "text",
           name: "search",
@@ -705,8 +705,8 @@ const x = (t) => {
           [et, o.value]
         ])
       ]),
-      C("div", { class: "row submit" }, [
-        C("button", {
+      k("div", { class: "row submit" }, [
+        k("button", {
           class: "submit-btn",
           onClick: e
         }, " Apply ")
@@ -715,14 +715,14 @@ const x = (t) => {
   }
 }, so = /* @__PURE__ */ q(io, [["__scopeId", "data-v-af870fbd"]]), ae = (t) => {
   t.expand.value = !1;
-}, lo = (t, l = !1, o, n, e) => {
-  const i = x({
+}, lo = (t, r = !1, o, n, e) => {
+  const i = _({
     type: "button",
     name: "bold",
     command: "toggleBold",
     icon: e.bold,
     tooltip: "Bold"
-  }), r = x({
+  }), c = _({
     type: "dropdown",
     name: "fontFamily",
     tooltip: "Font",
@@ -769,11 +769,11 @@ const x = (t) => {
         }
       }
     ],
-    onActivate: ({ fontFamily: m }) => {
-      m && (r.label.value = m);
+    onActivate: ({ fontFamily: u }) => {
+      u && (c.label.value = u);
     },
-    onDeactivate: () => r.label.value = r.defaultLabel.value
-  }), a = x({
+    onDeactivate: () => c.label.value = c.defaultLabel.value
+  }), a = _({
     type: "dropdown",
     dropdownStyles: {
       padding: 0,
@@ -791,10 +791,10 @@ const x = (t) => {
         type: "render",
         key: "ai",
         render: () => {
-          let m = "";
+          let u = "";
           if (t.activeEditor) {
             const { state: A } = t.activeEditor, { from: W, to: le, empty: gt } = A.selection;
-            m = gt ? "" : A.doc.textBetween(W, le);
+            u = gt ? "" : A.doc.textBetween(W, le);
           }
           return B(
             "div",
@@ -804,7 +804,7 @@ const x = (t) => {
                 handleClose: () => {
                   ae(a);
                 },
-                selectedText: m,
+                selectedText: u,
                 editor: t.activeEditor,
                 apiKey: t.config.aiApiKey,
                 endpoint: t.config.aiEndpoint,
@@ -815,7 +815,7 @@ const x = (t) => {
         }
       }
     ]
-  }), s = x({
+  }), l = _({
     type: "dropdown",
     name: "fontSize",
     defaultLabel: "12",
@@ -846,29 +846,29 @@ const x = (t) => {
       { label: "72", key: "72pt" },
       { label: "96", key: "96pt" }
     ],
-    onActivate: ({ fontSize: m }) => {
-      if (!m) return s.label.value = s.defaultLabel.value;
-      let E = Wt(m, 12);
-      E < 8 && (E = 8), E > 96 && (E = 96), s.label.value = String(E);
+    onActivate: ({ fontSize: u }) => {
+      if (!u) return l.label.value = l.defaultLabel.value;
+      let S = Wt(u, 12);
+      S < 8 && (S = 8), S > 96 && (S = 96), l.label.value = String(S);
     },
-    onDeactivate: () => s.label.value = s.defaultLabel.value
-  }), c = x({
+    onDeactivate: () => l.label.value = l.defaultLabel.value
+  }), d = _({
     type: "separator",
     name: "separator",
     isNarrow: !0
-  }), d = x({
+  }), m = _({
     type: "button",
     name: "italic",
     command: "toggleItalic",
     icon: e.italic,
     tooltip: "Italic"
-  }), u = x({
+  }), s = _({
     type: "button",
     name: "underline",
     command: "toggleUnderline",
     icon: e.underline,
     tooltip: "Underline"
-  }), b = x({
+  }), b = _({
     type: "dropdown",
     name: "highlight",
     icon: e.highlight,
@@ -886,11 +886,11 @@ const x = (t) => {
         render: () => Ve(t, b, [], !0)
       }
     ],
-    onActivate: ({ color: m }) => {
-      b.iconColor.value = m || "";
+    onActivate: ({ color: u }) => {
+      b.iconColor.value = u || "";
     },
     onDeactivate: () => b.iconColor.value = ""
-  }), v = x({
+  }), v = _({
     type: "dropdown",
     name: "color",
     icon: e.color,
@@ -907,11 +907,11 @@ const x = (t) => {
         render: () => Ve(t, v)
       }
     ],
-    onActivate: ({ color: m }) => {
-      v.iconColor.value = m;
+    onActivate: ({ color: u }) => {
+      v.iconColor.value = u;
     },
     onDeactivate: () => v.iconColor.value = "#000"
-  }), y = f(null), S = x({
+  }), y = f(null), E = _({
     type: "dropdown",
     name: "search",
     icon: e.search,
@@ -927,12 +927,12 @@ const x = (t) => {
     ]
   }), g = () => B("div", {}, [
     B(so, {
-      onSubmit: ({ value: E }) => {
-        t.activeEditor.commands.search(E);
+      onSubmit: ({ value: S }) => {
+        t.activeEditor.commands.search(S);
       },
       searchRef: y
     })
-  ]), F = x({
+  ]), F = _({
     type: "dropdown",
     name: "link",
     markName: "link",
@@ -945,44 +945,44 @@ const x = (t) => {
         render: () => $(F)
       }
     ],
-    onActivate: ({ href: m }) => {
-      m ? F.attributes.value = { href: m } : F.attributes.value = {}, F.expand.value = !0;
+    onActivate: ({ href: u }) => {
+      u ? F.attributes.value = { href: u } : F.attributes.value = {}, F.expand.value = !0;
     },
     onDeactivate: () => {
       F.attributes.value = {}, F.expand.value = !1;
     }
   });
-  function $(m) {
+  function $(u) {
     return B("div", {}, [
       B(vn, {
         onSubmit: ({ href: A }) => {
-          ae(m), m.attributes.value.link = { href: A };
-          const W = { ...m, command: "toggleLink" };
-          t.emitCommand({ item: W, argument: { href: A, text: "" } }), A || (m.active.value = !1);
+          ae(u), u.attributes.value.link = { href: A };
+          const W = { ...u, command: "toggleLink" };
+          t.emitCommand({ item: W, argument: { href: A, text: "" } }), A || (u.active.value = !1);
         },
-        href: m.attributes.value.href,
+        href: u.attributes.value.href,
         goToAnchor: () => {
-          if (ae(m), !t.activeEditor || !m.attributes.value?.href) return;
-          const A = m.attributes.value?.href?.slice(1), le = t.activeEditor.element.querySelector(`a[name='${A}']`);
+          if (ae(u), !t.activeEditor || !u.attributes.value?.href) return;
+          const A = u.attributes.value?.href?.slice(1), le = t.activeEditor.element.querySelector(`a[name='${A}']`);
           le && Kt(le);
         }
       })
     ]);
   }
-  const p = x({
+  const p = _({
     type: "options",
     name: "linkInput",
     command: "toggleLink"
   });
   F.childItem = p, p.parentItem = F;
-  const _ = x({
+  const x = _({
     type: "button",
     name: "image",
     command: "startImageUpload",
     icon: e.image,
     tooltip: "Image",
     disabled: !1
-  }), T = x({
+  }), T = _({
     type: "dropdown",
     name: "table",
     icon: e.table,
@@ -999,16 +999,16 @@ const x = (t) => {
       }
     ]
   });
-  function N(m) {
+  function N(u) {
     return B("div", {}, [
       B(qn, {
         onSelect: (A) => {
-          t.emitCommand({ item: m, argument: A }), ae(m);
+          t.emitCommand({ item: u, argument: A }), ae(u);
         }
       })
     ]);
   }
-  const V = x({
+  const V = _({
     type: "dropdown",
     name: "tableActions",
     command: "executeTableCommand",
@@ -1080,17 +1080,17 @@ const x = (t) => {
       icon: e.fixTables
     }
   ];
-  function ye(m) {
+  function ye(u) {
     return B(Qn, {
       options: te,
-      onSelect: (E) => {
-        ae(m);
-        const { command: A } = E;
-        t.emitCommand({ item: m, argument: { command: A } });
+      onSelect: (S) => {
+        ae(u);
+        const { command: A } = S;
+        t.emitCommand({ item: u, argument: { command: A } });
       }
     });
   }
-  const Z = x({
+  const Z = _({
     type: "dropdown",
     name: "textAlign",
     tooltip: "Alignment",
@@ -1105,63 +1105,63 @@ const x = (t) => {
         type: "render",
         render: () => B("div", {}, [
           B(tn, {
-            onSelect: (E) => {
+            onSelect: (S) => {
               ae(Z);
               const A = { ...Z, command: "setTextAlign" };
-              A.command = "setTextAlign", t.emitCommand({ item: A, argument: E }), re(Z, E);
+              A.command = "setTextAlign", t.emitCommand({ item: A, argument: S }), re(Z, S);
             }
           })
         ]),
         key: "alignment"
       }
     ],
-    onActivate: ({ textAlign: m }) => {
-      re(Z, m);
+    onActivate: ({ textAlign: u }) => {
+      re(Z, u);
     },
     onDeactivate: () => {
       re(Z, "left");
     }
-  }), re = (m, E) => {
-    let A = E === "both" ? "justify" : E, W = {
+  }), re = (u, S) => {
+    let A = S === "both" ? "justify" : S, W = {
       left: e.alignLeft,
       right: e.alignRight,
       center: e.alignCenter,
       justify: e.alignJustify
     }, le = W[A] ?? W.left;
-    m.icon.value = le;
-  }, be = x({
+    u.icon.value = le;
+  }, be = _({
     type: "button",
     name: "list",
     command: "toggleBulletList",
     icon: e.bulletList,
     tooltip: "Bullet list"
-  }), I = x({
+  }), I = _({
     type: "button",
     name: "numberedlist",
     command: "toggleOrderedList",
     icon: e.numberedList,
     tooltip: "Numbered list"
-  }), M = x({
+  }), M = _({
     type: "button",
     name: "indentleft",
     command: "decreaseTextIndent",
     icon: e.indentLeft,
     tooltip: "Left indent",
     disabled: !1
-  }), H = x({
+  }), H = _({
     type: "button",
     name: "indentright",
     command: "increaseTextIndent",
     icon: e.indentRight,
     tooltip: "Right indent",
     disabled: !1
-  }), R = x({
+  }), R = _({
     type: "overflow",
     name: "overflow",
     command: "toggleOverflow",
     icon: e.overflow,
     disabled: !1
-  }), G = x({
+  }), G = _({
     type: "dropdown",
     name: "zoom",
     allowWithoutEditor: !0,
@@ -1182,10 +1182,10 @@ const x = (t) => {
       { label: "150%", key: 1.5 },
       { label: "200%", key: 2 }
     ],
-    onActivate: ({ zoom: m }) => {
-      m && (G.label.value = m);
+    onActivate: ({ zoom: u }) => {
+      u && (G.label.value = u);
     }
-  }), K = x({
+  }), K = _({
     type: "button",
     name: "undo",
     disabled: !0,
@@ -1196,7 +1196,7 @@ const x = (t) => {
     onDeactivate: () => {
       K.disabled.value = !t.undoDepth;
     }
-  }), ce = x({
+  }), ce = _({
     type: "button",
     disabled: !0,
     name: "redo",
@@ -1207,7 +1207,7 @@ const x = (t) => {
     onDeactivate: () => {
       ce.disabled.value = !t.redoDepth;
     }
-  }), ue = x({
+  }), ue = _({
     type: "button",
     disabled: !1,
     name: "toggleTrackChanges",
@@ -1215,7 +1215,7 @@ const x = (t) => {
     command: "toggleTrackChanges",
     icon: e.trackChanges,
     group: "left"
-  }), _e = x({
+  }), _e = _({
     type: "button",
     disabled: !1,
     name: "acceptTrackedChangeBySelection",
@@ -1223,7 +1223,7 @@ const x = (t) => {
     command: "acceptTrackedChangeBySelection",
     icon: e.trackChangesAccept,
     group: "left"
-  }), xe = x({
+  }), xe = _({
     type: "button",
     disabled: !1,
     name: "rejectTrackedChangeOnSelection",
@@ -1231,7 +1231,7 @@ const x = (t) => {
     command: "rejectTrackedChangeOnSelection",
     icon: e.trackChangesReject,
     group: "left"
-  }), Se = x({
+  }), Ee = _({
     type: "button",
     disabled: !1,
     name: "toggleTrackChangesShowOriginal",
@@ -1239,7 +1239,7 @@ const x = (t) => {
     command: "toggleTrackChangesShowOriginal",
     icon: e.trackChangesOriginal,
     group: "left"
-  }), Fe = x({
+  }), Fe = _({
     type: "button",
     disabled: !1,
     name: "toggleTrackChangesShowFinal",
@@ -1247,7 +1247,7 @@ const x = (t) => {
     command: "toggleTrackChangesShowFinal",
     icon: e.trackChangesFinal,
     group: "left"
-  }), Ie = x({
+  }), Ie = _({
     type: "button",
     name: "clearFormatting",
     command: "clearFormat",
@@ -1256,20 +1256,20 @@ const x = (t) => {
   });
   [
     i,
-    d,
-    u,
+    m,
+    s,
     H,
     M,
-    S,
+    E,
     R
-  ].map((m) => m.name);
-  const Le = x({
+  ].map((u) => u.name);
+  const Le = _({
     type: "button",
     name: "copyFormat",
     tooltip: "Format painter",
     icon: e.copyFormat,
     command: "copyFormat"
-  }), Me = (m, E) => m === "editor" ? E : m === "suggester" ? E.filter((A) => A.value === "suggesting") : E.filter((A) => A.value === "viewing"), we = (m) => m === "editor" ? "Editing" : m === "suggester" ? "Suggesting" : "Viewing", ne = x({
+  }), Me = (u, S) => u === "editor" ? S : u === "suggester" ? S.filter((A) => A.value === "suggesting") : S.filter((A) => A.value === "viewing"), we = (u) => u === "editor" ? "Editing" : u === "suggester" ? "Suggesting" : "Viewing", ne = _({
     type: "dropdown",
     name: "documentMode",
     command: "setDocumentMode",
@@ -1314,18 +1314,18 @@ const x = (t) => {
       description: "View clean version of document only"
     }
   ];
-  function me(m) {
-    const E = Me(n, De);
-    return B(Sn, {
-      options: E,
+  function me(u) {
+    const S = Me(n, De);
+    return B(En, {
+      options: S,
       onSelect: (A) => {
-        ae(m);
+        ae(u);
         const { label: W, icon: le } = A;
         ne.label.value = W, ne.icon.value = le, t.emitCommand({ item: ne, argument: W });
       }
     });
   }
-  const se = x({
+  const se = _({
     type: "button",
     name: "pageBreakTool",
     command: "insertPageBreak",
@@ -1341,13 +1341,13 @@ const x = (t) => {
     ["documentMode", 47],
     ["ai", 32],
     ["default", 32]
-  ]), dt = x({
+  ]), dt = _({
     type: "button",
     name: "ruler",
     command: "toggleRuler",
     icon: e.ruler,
     tooltip: "Show or hide ruler"
-  }), ke = x({
+  }), Ce = _({
     type: "dropdown",
     name: "linkedStyles",
     command: "setLinkedStyle",
@@ -1367,30 +1367,30 @@ const x = (t) => {
         type: "render",
         key: "linkedStyle",
         render: () => {
-          const m = (E) => {
-            ae(ke);
-            const A = { ...ke, command: "setLinkedStyle" };
-            t.emitCommand({ item: A, argument: E });
+          const u = (S) => {
+            ae(Ce);
+            const A = { ...Ce, command: "setLinkedStyle" };
+            t.emitCommand({ item: A, argument: S });
           };
           return B("div", {}, [
             B(Fn, {
               editor: t.activeEditor,
-              onSelect: m
+              onSelect: u
             })
           ]);
         }
       }
     ],
     onActivate: () => {
-      ke.disabled.value = !1;
+      Ce.disabled.value = !1;
     },
     onDeactivate: () => {
-      ke.disabled.value = !0;
+      Ce.disabled.value = !0;
     }
-  }), he = (m, E) => {
-    if (E.value.toString() === m)
+  }), he = (u, S) => {
+    if (S.value.toString() === u)
       return B("div", { innerHTML: eo, class: "dropdown-select-icon" });
-  }, de = x({
+  }, de = _({
     type: "dropdown",
     name: "lineHeight",
     tooltip: "Line height",
@@ -1426,30 +1426,30 @@ const x = (t) => {
     // toggleTrackChangesOriginal,
     // toggleTrackChangesFinal,
     G,
-    r,
-    c,
-    s,
     c,
-    i,
     d,
-    u,
+    l,
+    d,
+    i,
+    m,
+    s,
     v,
     b,
-    c,
+    d,
     F,
-    _,
+    x,
     T,
     V,
-    c,
+    d,
     Z,
     be,
     I,
     M,
     H,
     de,
-    c,
-    ke,
-    c,
+    d,
+    Ce,
+    d,
     dt,
     se,
     Le,
@@ -1458,124 +1458,133 @@ const x = (t) => {
     R,
     ne
   ];
-  if (t.config?.superdoc?.config?.modules?.ai || (O = O.filter((m) => m.name.value !== "ai")), o <= $e.md && (O = O.filter((m) => m.type !== "separator")), t.config.pagination || (O = O.filter((m) => m.name.value !== "pageBreakTool")), t.config.mode !== "docx") {
-    const m = O.findIndex((A) => A.name.value === "linkedStyles");
-    O.splice(m - 1, 2);
-    const E = ["ruler", "zoom", "undo", "redo"];
-    O = O.filter((A) => !E.includes(A.name.value));
+  if (t.config?.superdoc?.config?.modules?.ai || (O = O.filter((u) => u.name.value !== "ai")), o <= $e.md && (O = O.filter((u) => u.type !== "separator")), t.config.pagination || (O = O.filter((u) => u.name.value !== "pageBreakTool")), t.config.mode !== "docx") {
+    const u = O.findIndex((A) => A.name.value === "linkedStyles");
+    O.splice(u - 1, 2);
+    const S = ["ruler", "zoom", "undo", "redo"];
+    O = O.filter((A) => !S.includes(A.name.value));
   }
-  const je = [ue, Se, Fe];
-  l || (n === "viewer" && je.push(_e, xe), O = O.filter((m) => !je.includes(m)));
-  const ft = [S, K, R, ne].map((m) => m.name), vt = (m) => ft.includes(m.name), Ee = [], He = [];
+  const je = [ue, Ee, Fe];
+  r || (n === "viewer" && je.push(_e, xe), O = O.filter((u) => !je.includes(u)));
+  const ft = [E, K, R, ne].map((u) => u.name), vt = (u) => ft.includes(u.name), Se = [], He = [];
   let Be = mt + ut;
-  return O.forEach((m) => {
-    const E = pe.get(m.name.value) || pe.get("default");
-    if (o < $e.xl && pt.includes(m.name.value)) {
-      if (Ee.push(m), m.name.value === "linkedStyles") {
+  return O.forEach((u) => {
+    const S = pe.get(u.name.value) || pe.get("default");
+    if (o < $e.xl && pt.includes(u.name.value)) {
+      if (Se.push(u), u.name.value === "linkedStyles") {
         const A = O.findIndex((W) => W.name.value === "linkedStyles");
         O.splice(A + 1, 1);
       }
       return;
     }
-    if (o < $e.sm && ht.includes(m.name.value)) {
-      Ee.push(m);
+    if (o < $e.sm && ht.includes(u.name.value)) {
+      Se.push(u);
       return;
     }
-    if (vt(m)) {
-      He.push(m), Be += E;
+    if (vt(u)) {
+      He.push(u), Be += S;
       return;
     }
-    Be < o ? (He.push(m), Be += E) : Ee.push(m);
+    Be < o ? (He.push(u), Be += S) : Se.push(u);
   }), {
     defaultItems: He,
-    overflowItems: Ee.filter((m) => m.type !== "separator")
+    overflowItems: Se.filter((u) => u.type !== "separator")
   };
 }, ao = [".jpg", ".jpeg", ".png", "image/jpeg", "image/png"], ro = () => {
   let t = document.createElement("input");
   t.type = "file";
-  let l = ao;
-  return t.accept = l.join(","), () => new Promise((n, e) => {
+  let r = ao;
+  return t.accept = r.join(","), () => new Promise((n, e) => {
     t.onchange = async () => {
       const i = t.files;
       if (!i) return n(null);
-      const r = i.item(0);
-      return n(r ? { file: r } : null);
+      const c = i.item(0);
+      return n(c ? { file: c } : null);
     }, t.oncancel = () => n(null), t.onerror = e, t.click();
   });
-}, co = (t) => new Promise((l, o) => {
+}, co = (t) => new Promise((r, o) => {
   let n = new FileReader();
-  n.onload = (e) => l(e.target.result), n.onerror = o, setTimeout(() => n.readAsDataURL(t), 250);
-}), uo = (t, l) => new Promise((o, n) => {
+  n.onload = (e) => r(e.target.result), n.onerror = o, setTimeout(() => n.readAsDataURL(t), 250);
+}), uo = (t, r) => new Promise((o, n) => {
   const e = new window.Image();
   e.onload = () => {
-    const i = document.createElement("canvas"), { width: r, height: a } = mo(
+    const i = document.createElement("canvas"), { width: c, height: a } = mo(
       e.width,
       e.height,
-      l
+      r
     );
-    if (i.width = r, i.height = a, i.getContext("2d").drawImage(e, 0, 0, r, a), typeof t == "string") {
-      const c = i.toDataURL();
-      o(c);
+    if (i.width = c, i.height = a, i.getContext("2d").drawImage(e, 0, 0, c, a), typeof t == "string") {
+      const d = i.toDataURL();
+      o(d);
     } else
-      i.toBlob((c) => {
-        const d = new File([c], t.name, {
+      i.toBlob((d) => {
+        const m = new File([d], t.name, {
           type: t.type,
           lastModified: Date.now()
         });
-        o({ file: d, width: r, height: a });
+        o({ file: m, width: c, height: a });
       });
   }, e.onerror = (i) => n(i), e.src = typeof t == "string" ? t : URL.createObjectURL(t);
-}), mo = (t, l, o) => {
+}), mo = (t, r, o) => {
   const { width: n, height: e } = o.getMaxContentSize();
-  if (!n || !e) return { width: t, height: l };
-  let i = t, r = l;
-  const a = t / l;
-  return l > e && (r = e, i = Math.round(e * a)), i > n && (i = n, r = Math.round(n / a)), { width: i, height: r };
-}, po = async ({ editor: t, view: l, file: o }) => {
+  if (!n || !e) return { width: t, height: r };
+  let i = t, c = r;
+  const a = t / r;
+  return r > e && (c = e, i = Math.round(e * a)), i > n && (i = n, c = Math.round(n / a)), { width: i, height: c };
+}, po = async ({ editor: t, view: r, file: o }) => {
   let n = typeof t.options.handleImageUpload == "function" ? t.options.handleImageUpload : co;
   if ((o.size / (1024 * 1024)).toFixed(4) > 5) {
     window.alert("Image size must be less than 5MB");
     return;
   }
-  let i, r;
+  let i, c;
   try {
-    const u = await uo(o, t);
-    i = u.width, r = u.height, o = u.file;
-  } catch (u) {
-    console.warn("Error processing image:", u);
+    const s = await uo(o, t);
+    i = s.width, c = s.height, o = s.file;
+  } catch (s) {
+    console.warn("Error processing image:", s);
     return;
   }
-  let a = {}, { tr: s, schema: c } = l.state;
-  s.selection.empty || s.deleteSelection();
-  let d = {
+  let a = {}, { tr: l, schema: d } = r.state;
+  l.selection.empty || l.deleteSelection();
+  let m = {
     type: "add",
-    pos: s.selection.from,
+    pos: l.selection.from,
     id: a
   };
-  s.setMeta(Ne, d), l.dispatch(s), n(o).then(
-    (u) => {
-      let b = o.name.replace(" ", "_"), v = kt(l.state, a);
+  l.setMeta(Ne, m), r.dispatch(l), n(o).then(
+    (s) => {
+      let b = o.name.replace(" ", "_"), v = Ct(r.state, a);
       if (v == null)
         return;
-      let y = { type: "remove", id: a }, S = `word/media/${b}`, g = c.nodes.image.create({
-        src: S,
-        size: { width: i, height: r }
+      let y = { type: "remove", id: a }, E = `word/media/${b}`, g = d.nodes.image.create({
+        src: E,
+        size: { width: i, height: c }
       });
-      t.storage.image.media = Object.assign(t.storage.image.media, { [S]: u }), t.options.ydoc && t.commands.addImageToCollaboration({ mediaPath: S, fileData: u }), l.dispatch(
-        l.state.tr.replaceWith(v, v, g).setMeta(Ne, y)
+      t.storage.image.media = Object.assign(t.storage.image.media, { [E]: s }), t.options.ydoc && t.commands.addImageToCollaboration({ mediaPath: E, fileData: s }), r.dispatch(
+        r.state.tr.replaceWith(v, v, g).setMeta(Ne, y)
       );
     },
     () => {
-      let u = { type: "remove", id: a };
-      l.dispatch(s.setMeta(Ne, u));
+      let s = { type: "remove", id: a };
+      r.dispatch(l.setMeta(Ne, s));
     }
   );
 };
 var L, lt, ve, We, at, rt, Pe, ct, fe;
 class Mo extends qt {
+  /**
+   * Creates a new SuperToolbar instance
+   * @param {ToolbarConfig} config - The configuration for the toolbar
+   * @returns {void}
+   */
   constructor(o) {
     super();
     Oe(this, L);
+    /**
+     * Default configuration for the toolbar
+     * @type {ToolbarConfig}
+     */
     Re(this, "config", {
       selector: null,
       toolbarGroups: ["left", "center", "right"],
@@ -1587,91 +1596,216 @@ class Mo extends qt {
       groups: null,
       editor: null,
       aiApiKey: null,
-      aiEndpoint: null
+      aiEndpoint: null,
+      customButtons: []
     });
+    /**
+     * Custom commands that override default behavior
+     * @private
+     * @type {Object.<string, function(CommandItem): void>}
+     */
     Oe(this, ve, {
+      /**
+       * Handles zoom level changes
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {string|number} params.argument - The zoom level (percentage)
+       * @returns {void}
+       */
       setZoom: ({ item: o, argument: n }) => {
         if (!n) return;
         o.onActivate({ zoom: n }), this.emit("superdoc-command", { item: o, argument: n });
         const e = document.querySelector(this.superdoc.config.selector)?.querySelector(".layers");
         if (!e) return;
-        const i = typeof screen.orientation < "u", r = window.matchMedia("(max-width: 834px)").matches;
-        i && r ? (e.style.transformOrigin = "0 0", e.style.transform = `scale(${parseInt(n) / 100})`) : e.style.zoom = parseInt(n) / 100, this.superdoc.superdocStore.activeZoom = parseInt(n);
+        const i = typeof screen.orientation < "u", c = window.matchMedia("(max-width: 834px)").matches;
+        i && c ? (e.style.transformOrigin = "0 0", e.style.transform = `scale(${parseInt(n) / 100})`) : e.style.zoom = parseInt(n) / 100, this.superdoc.superdocStore.activeZoom = parseInt(n);
       },
+      /**
+       * Sets the document mode
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {string} params.argument - The document mode to set
+       * @returns {void}
+       */
       setDocumentMode: ({ item: o, argument: n }) => {
         n && this.emit("superdoc-command", { item: o, argument: n });
       },
+      /**
+       * Sets the font size for text
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {string|number} params.argument - The font size to set
+       * @returns {void}
+       */
       setFontSize: ({ item: o, argument: n }) => {
         z(this, L, fe).call(this, { item: o, argument: n }, () => {
           this.activeEditor?.commands.setFieldAnnotationsFontSize(n, !0);
         });
       },
+      /**
+       * Sets the font family for text
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {string} params.argument - The font family to set
+       * @returns {void}
+       */
       setFontFamily: ({ item: o, argument: n }) => {
         z(this, L, fe).call(this, { item: o, argument: n }, () => {
           this.activeEditor?.commands.setFieldAnnotationsFontFamily(n, !0);
         });
       },
+      /**
+       * Sets the text color
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {string} params.argument - The color to set
+       * @returns {void}
+       */
       setColor: ({ item: o, argument: n }) => {
-        z(this, L, fe).call(this, { item: o, argument: n });
+        z(this, L, fe).call(this, { item: o, argument: n }, () => {
+          this.activeEditor?.commands.setFieldAnnotationsTextColor(n, !0);
+        });
       },
+      /**
+       * Sets the highlight color for text
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {string} params.argument - The highlight color to set
+       * @returns {void}
+       */
       setHighlight: ({ item: o, argument: n }) => {
-        z(this, L, fe).call(this, { item: o, argument: n });
+        z(this, L, fe).call(this, { item: o, argument: n, noArgumentCallback: !0 }, () => {
+          let e = n !== "none" ? n : null;
+          this.activeEditor?.commands.setFieldAnnotationsTextHighlight(e, !0), this.activeEditor?.commands.setCellBackground(e);
+        });
       },
-      toggleRuler: ({ item: o, argument: n }) => {
+      /**
+       * Toggles the ruler visibility
+       * @param {Object} [_params=null] - Command parameters (not used)
+       * @returns {void}
+       */
+      toggleRuler: (o = null) => {
         this.superdoc.toggleRuler();
       },
-      startImageUpload: async ({ item: o, argument: n }) => {
-        let i = await ro()();
-        i?.file && po({
+      /**
+       * Initiates the image upload process
+       * @async
+       * @param {Object} [_params=null - Command parameters (not used)
+       * @returns {Promise<void>}
+       */
+      startImageUpload: async (o = null) => {
+        let e = await ro()();
+        e?.file && po({
           editor: this.activeEditor,
           view: this.activeEditor.view,
-          file: i.file
+          file: e.file
         });
       },
+      /**
+       * Increases text indentation or list level
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {*} params.argument - Command arguments
+       * @returns {void}
+       */
       increaseTextIndent: ({ item: o, argument: n }) => {
         let e = o.command, { state: i } = this.activeEditor;
         if (Ge((a) => a.type.name === "listItem")(i.selection))
           return this.activeEditor.commands.increaseListIndent();
         e in this.activeEditor.commands && this.activeEditor.commands[e](n);
       },
+      /**
+       * Decreases text indentation or list level
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {*} params.argument - Command arguments
+       * @returns {boolean}
+       */
       decreaseTextIndent: ({ item: o, argument: n }) => {
         let e = o.command, { state: i } = this.activeEditor;
         if (Ge((a) => a.type.name === "listItem")(i.selection))
           return this.activeEditor.commands.decreaseListIndent();
         e in this.activeEditor.commands && this.activeEditor.commands[e](n);
       },
+      /**
+       * Toggles bold formatting for text
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {*} params.argument - Command arguments
+       * @returns {void}
+       */
       toggleBold: ({ item: o, argument: n }) => {
         let e = o.command;
         e in this.activeEditor.commands && (this.activeEditor.commands[e](n), this.activeEditor.commands.toggleFieldAnnotationsFormat("bold", !0)), this.updateToolbarState();
       },
+      /**
+       * Toggles italic formatting for text
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {*} params.argument - Command arguments
+       * @returns {void}
+       */
       toggleItalic: ({ item: o, argument: n }) => {
         let e = o.command;
         e in this.activeEditor.commands && (this.activeEditor.commands[e](n), this.activeEditor.commands.toggleFieldAnnotationsFormat("italic", !0)), this.updateToolbarState();
       },
+      /**
+       * Toggles underline formatting for text
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {*} params.argument - Command arguments
+       * @returns {void}
+       */
       toggleUnderline: ({ item: o, argument: n }) => {
         let e = o.command;
         e in this.activeEditor.commands && (this.activeEditor.commands[e](n), this.activeEditor.commands.toggleFieldAnnotationsFormat("underline", !0)), this.updateToolbarState();
       },
+      /**
+       * Toggles link formatting and updates cursor position
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {*} params.argument - Command arguments
+       * @returns {void}
+       */
       toggleLink: ({ item: o, argument: n }) => {
         let e = o.command;
         if (e in this.activeEditor.commands) {
           this.activeEditor.commands[e](n);
-          const { view: i } = this.activeEditor, r = i.state.selection.$to.pos, a = new Ye(i.state.doc.resolve(r)), s = i.state.tr.setSelection(a), c = i.state.apply(s);
-          i.updateState(c), setTimeout(() => {
+          const { view: i } = this.activeEditor, c = i.state.selection.$to.pos, a = new Ye(i.state.doc.resolve(c)), l = i.state.tr.setSelection(a), d = i.state.apply(l);
+          i.updateState(d), setTimeout(() => {
             i.focus();
           }, 100);
         }
         this.updateToolbarState();
       },
+      /**
+       * Inserts a table into the document
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {Object} params.argument - Table configuration
+       * @returns {void}
+       */
       insertTable: ({ item: o, argument: n }) => {
         z(this, L, fe).call(this, { item: o, argument: n });
       },
+      /**
+       * Executes a table-related command
+       * @param {Object} params - Command parameters
+       * @param {CommandItem} params.item - The command item
+       * @param {Object} params.argument - The table command and its parameters
+       * @param {string} params.argument.command - The specific table command to execute
+       * @returns {void}
+       */
       executeTableCommand: ({ item: o, argument: n }) => {
         if (!n) return;
         let e = n.command;
         e in this.activeEditor.commands && this.activeEditor.commands[e](n), this.updateToolbarState();
       }
     });
+    /**
+     * Handler for toolbar resize events
+     * @returns {void}
+     */
     Re(this, "onToolbarResize", () => {
       z(this, L, We).call(this, this, this.config.icons, this.isDev), this.role === "viewer" && z(this, L, Pe).call(this);
     });
@@ -1686,160 +1820,237 @@ class Mo extends qt {
     }
     this.app = Nt(Pt), this.app.directive("click-outside", Ht), this.app.config.globalProperties.$toolbar = this, n && (this.toolbar = this.app.mount(n)), this.activeEditor = o.editor || null, this.updateToolbarState();
   }
+  /**
+   * Log debug information to the console
+   * @param {...*} args - Arguments to log
+   * @returns {void}
+   */
   log(...o) {
     console.debug("[🎨 super-toolbar]", ...o);
   }
+  /**
+   * Set the zoom level
+   * @param {number} percent_int - The zoom percentage as an integer
+   * @returns {void}
+   */
   setZoom(o) {
     const e = [...this.toolbarItems, ...this.overflowItems].find((i) => i.name.value === "zoom");
     Ae(this, ve).setZoom({ item: e, argument: o });
   }
   /**
    * The toolbar expects an active Super Editor instance.
-   * @param {*} editor
+   * @param {Object} editor - The editor instance to attach to the toolbar
+   * @returns {void}
    */
   setActiveEditor(o) {
     this.activeEditor = o, this.activeEditor.on("transaction", this.onEditorTransaction.bind(this));
   }
+  /**
+   * Get toolbar items by group name
+   * @param {string} groupName - The name of the group
+   * @returns {ToolbarItem[]} An array of toolbar items in the specified group
+   */
   getToolbarItemByGroup(o) {
-    return this.toolbarItems.filter((n) => n.group.value === o);
+    return this.toolbarItems.filter((n) => (n.group?.value || "center") === o);
   }
+  /**
+   * Get a toolbar item by name
+   * @param {string} name - The name of the toolbar item
+   * @returns {ToolbarItem|undefined} The toolbar item with the specified name or undefined if not found
+   */
   getToolbarItemByName(o) {
     return this.toolbarItems.find((n) => n.name.value === o);
   }
   /**
-   * Update the toolbar state. Expects a list of marks in the form: { name, attrs }
-   * @param {Object} marks
+   * Update the toolbar state based on the current editor state
+   * Updates active/inactive state of all toolbar items
+   * @returns {void}
    */
   updateToolbarState() {
     if (z(this, L, ct).call(this), z(this, L, at).call(this), z(this, L, rt).call(this), !this.activeEditor || this.documentMode === "viewing") {
       z(this, L, Pe).call(this);
       return;
     }
-    const o = Ct(this.activeEditor), n = _t(this.activeEditor.state);
+    const o = kt(this.activeEditor), n = _t(this.activeEditor.state);
     this.toolbarItems.forEach((e) => {
       if (e.resetDisabled(), e.name.value === "linkedStyles")
         return this.activeEditor && !Ze(this.activeEditor).length ? e.deactivate() : e.activate();
-      const i = o.find((s) => s.name === e.name.value);
+      const i = o.find((l) => l.name === e.name.value);
       i ? e.activate(i.attrs) : e.deactivate();
-      const r = o.find((s) => s.name === "styleId");
-      if (r?.attrs.styleId) {
-        const s = {
+      const c = o.find((l) => l.name === "styleId");
+      if (c?.attrs.styleId) {
+        const l = {
           fontSize: "font-size",
           fontFamily: "font-family",
           bold: "bold",
           textAlign: "textAlign"
-        }, c = this.activeEditor.converter?.linkedStyles.find((d) => d.id === r.attrs.styleId);
-        if (s[e.name.value] in c?.definition.styles) {
-          const d = {
-            [e.name.value]: c?.definition.styles[s[e.name.value]]
+        }, d = this.activeEditor.converter?.linkedStyles.find((m) => m.id === c.attrs.styleId);
+        if (l[e.name.value] in d?.definition.styles) {
+          const m = {
+            [e.name.value]: d?.definition.styles[l[e.name.value]]
           };
-          e.activate(d);
+          e.activate(m);
         }
       }
-      const a = o.find((s) => s.name === "spacing");
+      const a = o.find((l) => l.name === "spacing");
       e.name.value === "lineHeight" && (i?.attrs?.lineHeight || a) && (e.selectedValue.value = i?.attrs?.lineHeight || a.attrs?.spacing?.line || ""), e.name.value === "tableActions" && (e.disabled.value = !n);
     });
   }
   /**
    * React to editor transactions. Might want to debounce this.
+   * @param {Object} params - Transaction parameters
+   * @param {Object} params.editor - The editor instance (not used)
+   * @param {Object} params.transaction - The transaction object
+   * @returns {void}
    */
   onEditorTransaction({ editor: o, transaction: n }) {
     !n.docChanged && !n.selectionSet || this.updateToolbarState();
   }
   /**
-   * Main handler for toolbar commands.
-   *
-   * @param {Object} item is an instance of the useToolbarItem composable
-   * @param {Object} argument is the argument passed to the command
-   */
-  emitCommand({ item: o, argument: n }) {
+   * Main handler for toolbar commands
+   * @param {CommandItem} params - Command parameters
+   * @param {ToolbarItem} params.item - An instance of the useToolbarItem composable
+   * @param {*} [params.argument] - The argument passed to the command
+   * @returns {*} The result of the executed command, undefined if no result is returned
+  */
+  emitCommand({ item: o, argument: n, option: e }) {
     this.activeEditor?.focus();
-    const { command: e } = o;
-    if (e) {
-      if (this.log("(emmitCommand) Command:", e, o, n), e in Ae(this, ve))
-        return Ae(this, ve)[e]({ item: o, argument: n });
-      if (e in this.activeEditor?.commands)
-        this.activeEditor.commands[e](n), this.updateToolbarState();
+    const { command: i } = o;
+    if (i) {
+      if (this.log("(emmitCommand) Command:", i, `
+	item:`, o, `
+	argument:`, n, `
+	option:`, e), i in Ae(this, ve))
+        return Ae(this, ve)[i]({ item: o, argument: n });
+      if (i in this.activeEditor?.commands)
+        this.activeEditor.commands[i](n);
+      else if (typeof i == "function")
+        i({ item: o, argument: n, option: e });
       else
-        throw new Error(`[super-toolbar 🎨] Command not found: ${e}`);
+        throw new Error(`[super-toolbar 🎨] Command not found: ${i}`);
+      this.updateToolbarState();
     }
   }
 }
-L = new WeakSet(), lt = function() {
+L = new WeakSet(), /**
+* Initiate toolbar groups
+* @private
+* @returns {void}
+*/
+lt = function() {
   this.config.groups && !Array.isArray(this.config.groups) && Object.keys(this.config.groups).length && (this.config.toolbarGroups = Object.keys(this.config.groups));
-}, ve = new WeakMap(), We = function(o, n, e = !1) {
-  const i = document.documentElement.clientWidth, { defaultItems: r, overflowItems: a } = lo(o, e, i, this.role, n);
-  let s = [
-    ...r.map((d) => d.name.value),
-    ...a.map((d) => d.name.value)
+}, ve = new WeakMap(), /**
+ * Create toolbar items based on configuration
+ * @private
+ * @param {SuperToolbar} superToolbar - The toolbar instance
+ * @param {Object} icons - Icons to use for toolbar items
+ * @param {boolean} [isDev=false] - Whether in development mode
+ * @returns {void}
+ */
+We = function(o, n, e = !1) {
+  const i = document.documentElement.clientWidth, { defaultItems: c, overflowItems: a } = lo(o, e, i, this.role, n), l = this.config.customButtons || [];
+  l.length && c.push(...l.map((s) => _({ ...s })));
+  let d = [
+    ...c.map((s) => s.name.value),
+    ...a.map((s) => s.name.value)
   ];
-  this.config.groups && (s = Object.values(this.config.groups).flatMap((d) => d));
-  const c = r.filter((d) => s.includes(d.name.value)).filter((d) => !this.config.excludeItems.includes(d.name.value));
-  this.toolbarItems = c, this.overflowItems = a.filter((d) => s.includes(d.name.value));
-}, at = function() {
+  this.config.groups && (d = Object.values(this.config.groups).flatMap((s) => s));
+  const m = c.filter((s) => d.includes(s.name.value)).filter((s) => !this.config.excludeItems.includes(s.name.value));
+  this.toolbarItems = m, this.overflowItems = a.filter((s) => d.includes(s.name.value));
+}, /**
+ * Initialize default fonts from the editor
+ * @private
+ * @returns {void}
+ */
+at = function() {
   if (!this.activeEditor || !this.activeEditor.converter) return;
-  const { typeface: o = "Arial", fontSizePt: n = 12 } = this.activeEditor.converter.getDocumentDefaultStyles() ?? {}, e = this.toolbarItems.find((r) => r.name.value === "fontSize");
+  const { typeface: o = "Arial", fontSizePt: n = 12 } = this.activeEditor.converter.getDocumentDefaultStyles() ?? {}, e = this.toolbarItems.find((c) => c.name.value === "fontSize");
   e && (e.defaultLabel.value = n);
-  const i = this.toolbarItems.find((r) => r.name.value === "fontFamily");
+  const i = this.toolbarItems.find((c) => c.name.value === "fontFamily");
   i && (i.defaultLabel.value = o);
-}, rt = function() {
+}, /**
+ * Update highlight color options based on document colors
+ * @private
+ * @returns {void}
+ */
+rt = function() {
   if (!this.activeEditor || !this.activeEditor.converter || !this.activeEditor.converter.docHiglightColors.size) return;
-  const o = this.toolbarItems.find((a) => a.name.value === "highlight"), n = Vn(), e = 7, i = Array.from(this.activeEditor.converter.docHiglightColors).reduce((a, s, c) => {
-    const d = Math.floor(c / e);
-    return a[d] || (a[d] = []), n.includes(s) || a[d].push(h(s)), a;
-  }, []), r = {
+  const o = this.toolbarItems.find((a) => a.name.value === "highlight"), n = Vn(), e = 7, i = Array.from(this.activeEditor.converter.docHiglightColors).reduce((a, l, d) => {
+    const m = Math.floor(d / e);
+    return a[m] || (a[m] = []), n.includes(l) || a[m].push(h(l)), a;
+  }, []), c = {
     key: "color",
     type: "render",
     render: () => Ve(this, o, i, !0)
   };
-  o.nestedOptions.value = [r];
-}, Pe = function() {
+  o.nestedOptions.value = [c];
+}, /**
+ * Deactivate all toolbar items
+ * @private
+ * @returns {void}
+ */
+Pe = function() {
   this.activeEditor = null, this.toolbarItems.forEach((o) => {
     const { allowWithoutEditor: n } = o;
     n.value || o.setDisabled(!0);
   });
-}, ct = function() {
-  this.activeEditor && (this.undoDepth = xt(this.activeEditor.state), this.redoDepth = St(this.activeEditor.state));
-}, fe = function({ item: o, argument: n }, e) {
+}, /**
+ * Update undo/redo history state in the toolbar
+ * @private
+ * @returns {void}
+ */
+ct = function() {
+  this.activeEditor && (this.undoDepth = xt(this.activeEditor.state), this.redoDepth = Et(this.activeEditor.state));
+}, /**
+ * Run a command that requires an argument
+ * @private
+ * @param {CommandItem} params - Command parameters
+ * @param {ToolbarItem} params.item - The toolbar item
+ * @param {*} params.argument - The argument for the command
+ * @param {boolean} params.noArgumentCallback - Whether to call callback even if argument === 'none'
+ * @param {Function} [callback] - Optional callback to run after the command
+ * @returns {void}
+ */
+fe = function({ item: o, argument: n, noArgumentCallback: e = !1 }, i) {
   if (!n || !this.activeEditor) return;
-  let i = o.command;
-  const r = o.noArgumentCommand;
-  if (n === "none" && r in this.activeEditor?.commands) {
-    this.activeEditor.commands[r](), this.updateToolbarState();
+  let c = o.command;
+  const a = o.noArgumentCommand;
+  if (n === "none" && a in this.activeEditor?.commands) {
+    this.activeEditor.commands[a](), typeof i == "function" && e && i(n), this.updateToolbarState();
     return;
   }
-  i in this.activeEditor?.commands && (this.activeEditor.commands[i](n), typeof e == "function" && e(n), this.updateToolbarState());
+  c in this.activeEditor?.commands && (this.activeEditor.commands[c](n), typeof i == "function" && i(n), this.updateToolbarState());
 };
-function ho(t, l) {
-  if (!t.value || !l?.value?.options?.scale) return;
-  const o = l.value.options.scale, n = t.value.getBoundingClientRect(), e = t.value.querySelectorAll(".pagination-break-wrapper");
+function ho(t, r) {
+  if (!t.value || !r?.value?.options?.scale) return;
+  const o = r.value.options.scale, n = t.value.getBoundingClientRect(), e = t.value.querySelectorAll(".pagination-break-wrapper");
   let i;
-  e.forEach((r) => {
-    const s = (r.getBoundingClientRect().left - n.left) / o * -1 + 1;
-    if (i || (i = s), s !== i) {
-      const c = s - i;
-      r.style.transform = `translateX(${c}px)`;
+  e.forEach((c) => {
+    const l = (c.getBoundingClientRect().left - n.left) / o * -1 + 1;
+    if (i || (i = l), l !== i) {
+      const d = l - i;
+      c.style.transform = `translateX(${d}px)`;
     }
   });
 }
-const fo = (t, l) => {
-  const o = t.clientY, n = t.clientX, { view: e } = l, i = e.dom.getBoundingClientRect();
-  let r = {
+const fo = (t, r) => {
+  const o = t.clientY, n = t.clientX, { view: e } = r, i = e.dom.getBoundingClientRect();
+  let c = {
     left: 0,
     top: o
   }, a = !1;
-  n > i.right ? (r.left = i.left + i.width - 1, a = !0) : n < i.left && (r.left = i.left);
-  const s = e.posAtCoords(r)?.pos;
-  if (s) {
-    let c = s;
+  n > i.right ? (c.left = i.left + i.width - 1, a = !0) : n < i.left && (c.left = i.left);
+  const l = e.posAtCoords(c)?.pos;
+  if (l) {
+    let d = l;
     if (a) {
-      const b = e.state.doc.resolve(s).textOffset, v = e.state.doc.nodeAt(s), S = v?.text?.charAt(b);
-      c = v?.isText && S !== " " ? s - 1 : s;
+      const b = e.state.doc.resolve(l).textOffset, v = e.state.doc.nodeAt(l), E = v?.text?.charAt(b);
+      d = v?.isText && E !== " " ? l - 1 : l;
     }
-    const d = e.state.tr.setSelection(
-      Ye.create(e.state.doc, c)
+    const m = e.state.tr.setSelection(
+      Ye.create(e.state.doc, d)
     );
-    e.dispatch(d), e.focus();
+    e.dispatch(m), e.focus();
   }
 }, vo = { class: "numbering" }, Te = 200, go = "flex-end", yo = {
   __name: "Ruler",
@@ -1858,13 +2069,13 @@ const fo = (t, l) => {
     }
   },
   emits: ["margin-change"],
-  setup(t, { emit: l }) {
-    const o = l, n = t, e = f(null), i = f([]), r = f("#CCCCCC"), a = f("#2563EB66"), s = f(null), c = f(null), d = f(!1), u = f(null), b = Ke({ side: "left", x: 0 }), v = Ke({ side: "right", x: 0 }), y = f(!1), S = f(0);
+  setup(t, { emit: r }) {
+    const o = r, n = t, e = f(null), i = f([]), c = f("#CCCCCC"), a = f("#2563EB66"), l = f(null), d = f(null), m = f(!1), s = f(null), b = Ke({ side: "left", x: 0 }), v = Ke({ side: "right", x: 0 }), y = f(!1), E = f(0);
     let g = 0;
     const F = () => {
       if (n.editor.options.mode !== "docx") return;
       const I = [], { pageMargins: M, pageSize: H } = n.editor.getPageStyles();
-      s.value = H, c.value = M, v.x = H.width * 96 - M.right * 96, b.x = M.left * 96;
+      l.value = H, d.value = M, v.x = H.width * 96 - M.right * 96, b.x = M.left * 96;
       for (let R = 0; R < H.width; R++) {
         const K = `${5.5}px`, ce = H.width - R;
         if (I.push(...$(1, "main", "20%", K, R)), I.push(...$(3, "eighth", "10%", K)), I.push(...$(1, "half", "40%", K)), ce <= 0.5) break;
@@ -1886,77 +2097,77 @@ const fo = (t, l) => {
       backgroundColor: I.color || "#666",
       marginLeft: I.numbering === 0 ? null : I.margin,
       marginRight: I.margin
-    })), _ = j(() => (I) => ({
+    })), x = j(() => (I) => ({
       left: `${(I === "left" ? b : v).x}px`
     })), T = j(() => {
       if (!e.value) return;
       const H = e.value.parentElement.querySelector(".super-editor").getBoundingClientRect();
       return {
-        left: `${u.value.x}px`,
+        left: `${s.value.x}px`,
         minHeight: `${H.height}px`
       };
     }), N = (I) => {
-      d.value = !0, ye();
+      m.value = !0, ye();
       const M = I.currentTarget.id;
-      u.value = M === "left-margin-handle" ? b : v, S.value = u.value.x, g = I.clientX - u.value.x, y.value = !0;
+      s.value = M === "left-margin-handle" ? b : v, E.value = s.value.x, g = I.clientX - s.value.x, y.value = !0;
     }, V = (I) => {
-      if (!d.value) return;
+      if (!m.value) return;
       const M = I.clientX - g;
-      u.value.x = M, u.value.side === "left" ? M <= 0 ? u.value.x = 0 : M >= v.x - Te && (u.value.x = v.x - Te) : M >= s.value.width * 96 ? u.value.x = s.value.width * 96 : M <= b.x + Te && (u.value.x = b.x + Te);
+      s.value.x = M, s.value.side === "left" ? M <= 0 ? s.value.x = 0 : M >= v.x - Te && (s.value.x = v.x - Te) : M >= l.value.width * 96 ? s.value.x = l.value.width * 96 : M <= b.x + Te && (s.value.x = b.x + Te);
     }, te = () => {
-      if (d.value = !1, y.value = !1, Z(), u.value && u.value.x !== S.value) {
+      if (m.value = !1, y.value = !1, Z(), s.value && s.value.x !== E.value) {
         const I = re();
         o("margin-change", {
-          side: u.value.side,
+          side: s.value.side,
           value: I
         });
       }
     }, ye = () => {
-      r.value = a.value;
+      c.value = a.value;
     }, Z = () => {
-      r.value = "#CCC";
-    }, re = () => u.value.side === "left" ? u.value.x / 96 : (s.value.width * 96 - u.value.x) / 96, be = j(() => ({
+      c.value = "#CCC";
+    }, re = () => s.value.side === "left" ? s.value.x / 96 : (l.value.width * 96 - s.value.x) / 96, be = j(() => ({
       "--alignment": go,
-      "--ruler-handle-color": r.value,
+      "--ruler-handle-color": c.value,
       "--ruler-handle-active-color": a.value
     }));
-    return Ce(() => {
+    return ke(() => {
       i.value = F(), window.addEventListener("mousemove", V), window.addEventListener("mouseup", te);
     }), zt(() => {
       window.removeEventListener("mousemove", V), window.removeEventListener("mouseup", te);
-    }), (I, M) => (w(), k("div", {
+    }), (I, M) => (w(), C("div", {
       class: "ruler",
       ref_key: "ruler",
       ref: e,
       style: J(be.value)
     }, [
-      C("div", {
+      k("div", {
         class: "margin-handle handle-left",
         id: "left-margin-handle",
         onMousedown: N,
-        style: J(_.value("left"))
+        style: J(x.value("left"))
       }, null, 36),
-      C("div", {
+      k("div", {
         class: "margin-handle handle-right",
         id: "right-margin-handle",
         onMousedown: N,
-        style: J(_.value("right"))
+        style: J(x.value("right"))
       }, null, 36),
-      y.value ? (w(), k("div", {
+      y.value ? (w(), C("div", {
         key: 0,
         class: "vertical-indicator",
         style: J(T.value)
       }, null, 4)) : Q("", !0),
-      (w(!0), k(U, null, ee(i.value, (H) => (w(), k("div", {
+      (w(!0), C(U, null, ee(i.value, (H) => (w(), C("div", {
         class: oe(H.className),
         style: J(p.value(H))
       }, [
-        C("div", vo, ie(H.numbering), 1),
-        (w(!0), k(U, null, ee(H.elements, (R) => (w(), k("div", {
+        k("div", vo, ie(H.numbering), 1),
+        (w(!0), C(U, null, ee(H.elements, (R) => (w(), C("div", {
           class: oe(R.className),
           style: J(p.value(R))
         }, [
-          (w(!0), k(U, null, ee(R.elements, (G) => (w(), k("div", {
+          (w(!0), C(U, null, ee(R.elements, (G) => (w(), C("div", {
             class: oe(G.className),
             style: J(p.value(G))
           }, null, 6))), 256))
@@ -1964,10 +2175,10 @@ const fo = (t, l) => {
       ], 6))), 256))
     ], 4));
   }
-}, bo = /* @__PURE__ */ q(yo, [["__scopeId", "data-v-ad77036c"]]), wo = { class: "super-editor-container" }, ko = {
+}, bo = /* @__PURE__ */ q(yo, [["__scopeId", "data-v-ad77036c"]]), wo = { class: "super-editor-container" }, Co = {
   key: 1,
   class: "placeholder-editor"
-}, Co = { class: "placeholder-title" }, _o = {
+}, ko = { class: "placeholder-title" }, _o = {
   __name: "SuperEditor",
   props: {
     documentId: {
@@ -1996,39 +2207,39 @@ const fo = (t, l) => {
     "comments-loaded",
     "selection-update"
   ],
-  setup(t, { emit: l }) {
-    const o = l, n = t, e = f(!1), i = nt(null), r = f(null), a = f(null);
-    let s;
-    const c = () => {
-      clearTimeout(s);
-    }, d = (p, _ = 10, T = 500) => {
+  setup(t, { emit: r }) {
+    const o = r, n = t, e = f(!1), i = nt(null), c = f(null), a = f(null);
+    let l;
+    const d = () => {
+      clearTimeout(l);
+    }, m = (p, x = 10, T = 500) => {
       const N = p.getMap("meta"), V = () => {
         const te = N.get("docx");
-        te ? (c(), y({ content: te })) : _ > 0 ? (console.debug(`Waiting for 'docx' data... retries left: ${_}`), s = setTimeout(V, T), _--) : console.warn("Failed to load docx data from meta map.");
+        te ? (d(), y({ content: te })) : x > 0 ? (console.debug(`Waiting for 'docx' data... retries left: ${x}`), l = setTimeout(V, T), x--) : console.warn("Failed to load docx data from meta map.");
       };
       V();
-    }, u = async () => {
+    }, s = async () => {
       try {
-        const [p, _, T, N] = await ze.loadXmlData(n.fileSource);
-        return { content: p, media: _, mediaFiles: T, fonts: N };
+        const [p, x, T, N] = await ze.loadXmlData(n.fileSource);
+        return { content: p, media: x, mediaFiles: T, fonts: N };
       } catch (p) {
         console.debug("Error loading new file data:", p);
       }
     }, b = async () => {
       if (n.fileSource) {
-        const p = await u();
+        const p = await s();
         return y(p);
       } else if (n.options.ydoc && n.options.collaborationProvider) {
         delete n.options.content;
-        const p = n.options.ydoc, _ = n.options.collaborationProvider, T = () => {
-          d(p), _.off("synced", T);
+        const p = n.options.ydoc, x = n.options.collaborationProvider, T = () => {
+          m(p), x.off("synced", T);
         };
-        _.on("synced", T);
+        x.on("synced", T);
       }
     }, v = () => {
-      const p = Et();
-      return n.options.pagination ? p : p.filter((_) => _.name !== "pagination");
-    }, y = async ({ content: p, media: _ = {}, mediaFiles: T = {}, fonts: N = {} } = {}) => {
+      const p = St();
+      return n.options.pagination ? p : p.filter((x) => x.name !== "pagination");
+    }, y = async ({ content: p, media: x = {}, mediaFiles: T = {}, fonts: N = {} } = {}) => {
       i.value = new ze({
         mode: "docx",
         element: a.value,
@@ -2037,7 +2248,7 @@ const fo = (t, l) => {
         externalExtensions: n.options.externalExtensions,
         documentId: n.documentId,
         content: p,
-        media: _,
+        media: x,
         mediaFiles: T,
         fonts: N,
         ...n.options
@@ -2048,50 +2259,50 @@ const fo = (t, l) => {
           e.value = !0;
         }, 150);
       });
-    }, S = (p) => {
+    }, E = (p) => {
       o("editor-keydown", { editor: i.value });
     }, g = (p) => {
       o("editor-click", { editor: i.value });
-      let _ = a.value?.querySelector(".ProseMirror");
-      if (!_ || !i.value)
+      let x = a.value?.querySelector(".ProseMirror");
+      if (!x || !i.value)
         return;
-      !_.contains(p.target) && i.value.isEditable && i.value.view?.focus();
+      !x.contains(p.target) && i.value.isEditable && i.value.view?.focus();
     };
-    Ce(() => {
+    ke(() => {
       b(), (n.options?.suppressSkeletonLoader || !n.options?.collaborationProvider) && (e.value = !0);
     });
     const F = (p) => {
       p.target.classList.contains("ProseMirror") || fo(p, i.value);
-    }, $ = ({ side: p, value: _ }) => {
+    }, $ = ({ side: p, value: x }) => {
       if (!i.value) return;
-      const T = i.value.getPageStyles(), { pageMargins: N } = T, V = { ...N, [p]: _ };
+      const T = i.value.getPageStyles(), { pageMargins: N } = T, V = { ...N, [p]: x };
       i.value?.updatePageStyle({ pageMargins: V });
     };
     return ot(() => {
-      c(), i.value?.destroy(), i.value = null;
-    }), (p, _) => (w(), k("div", wo, [
+      d(), i.value?.destroy(), i.value = null;
+    }), (p, x) => (w(), C("div", wo, [
       t.options.rulers && i.value ? (w(), Vt(bo, {
         key: 0,
         class: "ruler",
         editor: i.value,
         onMarginChange: $
       }, null, 8, ["editor"])) : Q("", !0),
-      C("div", {
+      k("div", {
         class: "super-editor",
         ref_key: "editorWrapper",
-        ref: r,
-        onKeydown: S,
+        ref: c,
+        onKeydown: E,
         onClick: g,
         onMousedown: F
       }, [
-        C("div", {
+        k("div", {
           ref_key: "editorElem",
           ref: a,
           class: "editor-element super-editor__element"
         }, null, 512)
       ], 544),
-      e.value ? Q("", !0) : (w(), k("div", ko, [
-        C("div", Co, [
+      e.value ? Q("", !0) : (w(), C("div", Co, [
+        k("div", ko, [
           P(D(Y), {
             text: "",
             style: { width: "60%" }
@@ -2140,12 +2351,12 @@ const fo = (t, l) => {
 }, Do = /* @__PURE__ */ q(_o, [["__scopeId", "data-v-ff8f86f4"]]), $o = {
   __name: "BasicUpload",
   emits: ["file-change"],
-  setup(t, { emit: l }) {
-    const o = l, n = (e) => {
+  setup(t, { emit: r }) {
+    const o = r, n = (e) => {
       o("file-change", e.target.files[0]);
     };
-    return (e, i) => (w(), k("div", null, [
-      C("input", {
+    return (e, i) => (w(), C("div", null, [
+      k("input", {
         type: "file",
         id: "fileInput",
         onChange: n,
@@ -2153,7 +2364,7 @@ const fo = (t, l) => {
       }, null, 32)
     ]));
   }
-}, xo = ["innerHTML"], So = {
+}, xo = ["innerHTML"], Eo = {
   __name: "SuperInput",
   props: {
     modelValue: {
@@ -2176,16 +2387,16 @@ const fo = (t, l) => {
     }
   },
   emits: ["update:modelValue", "focus", "blur"],
-  setup(t, { emit: l }) {
-    const o = l, n = t, e = nt(), i = f(null), r = f(!1), a = ({ editor: v, transaction: y }) => {
-      const S = v.getHTML();
-      o("update:modelValue", S);
-    }, s = ({ editor: v, transaction: y }) => {
-      r.value = !0, b(), o("focus", { editor: v, transaction: y });
-    }, c = ({ editor: v, transaction: y }) => {
-      r.value = !1, o("blur", { editor: v, transaction: y });
-    }, d = async () => {
-      At.options.placeholder = n.placeholder || "Type something...", n.options.onTransaction = a, n.options.onFocus = s, n.options.onBlur = c, e.value = new ze({
+  setup(t, { emit: r }) {
+    const o = r, n = t, e = nt(), i = f(null), c = f(!1), a = ({ editor: v, transaction: y }) => {
+      const E = v.getHTML();
+      o("update:modelValue", E);
+    }, l = ({ editor: v, transaction: y }) => {
+      c.value = !0, b(), o("focus", { editor: v, transaction: y });
+    }, d = ({ editor: v, transaction: y }) => {
+      c.value = !1, o("blur", { editor: v, transaction: y });
+    }, m = async () => {
+      At.options.placeholder = n.placeholder || "Type something...", n.options.onTransaction = a, n.options.onFocus = l, n.options.onBlur = d, e.value = new ze({
         mode: "text",
         content: document.getElementById("currentContent"),
         element: i.value,
@@ -2193,32 +2404,32 @@ const fo = (t, l) => {
         users: n.users,
         ...n.options
       });
-    }, u = () => {
-      r.value = !0, e.value?.view?.focus();
+    }, s = () => {
+      c.value = !0, e.value?.view?.focus();
     }, b = () => {
       e.value?.setOptions({ users: n.users });
     };
-    return Ce(() => {
-      d();
+    return ke(() => {
+      m();
     }), ot(() => {
       e.value?.destroy(), e.value = null;
-    }), (v, y) => (w(), k("div", {
-      class: oe(["super-editor super-input", { "super-input-active": r.value }]),
-      onClick: ge(u, ["stop", "prevent"])
+    }), (v, y) => (w(), C("div", {
+      class: oe(["super-editor super-input", { "super-input-active": c.value }]),
+      onClick: ge(s, ["stop", "prevent"])
     }, [
-      C("div", {
+      k("div", {
         id: "currentContent",
         style: { display: "none" },
         innerHTML: t.modelValue
       }, null, 8, xo),
-      C("div", {
+      k("div", {
         ref_key: "editorElem",
         ref: i,
         class: "editor-element super-editor__element"
       }, null, 512)
     ], 2));
   }
-}, Ho = /* @__PURE__ */ q(So, [["__scopeId", "data-v-4d5cff52"]]), Bo = {
+}, Ho = /* @__PURE__ */ q(Eo, [["__scopeId", "data-v-4d5cff52"]]), Bo = {
   Node: Mt,
   Attribute: Lt,
   Extension: It,
@@ -2240,11 +2451,11 @@ export {
   zo as TrackChangesBasePluginKey,
   Zo as createZip,
   Vo as fieldAnnotationHelpers,
-  Ct as getActiveFormatting,
+  kt as getActiveFormatting,
   mo as getAllowedImageDimensions,
   Wo as getMarksFromSelection,
   Tt as getRichTextExtensions,
-  Et as getStarterExtensions,
+  St as getStarterExtensions,
   Po as helpers,
   jo as trackChangesHelpers
 };