@harbour-enterprises/superdoc 0.12.2 → 0.12.3

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

@@ -1,34 +1,34 @@
-var yt = Object.defineProperty;
-var Ue = (t) => {
-  throw TypeError(t);
+var wt = Object.defineProperty;
+var qe = (e) => {
+  throw TypeError(e);
 };
-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-DPsjxIiM.js";
-import { C as No, T as zo, l as Vo, n as Wo, k as Po, m as jo } from "./chunks/editor-DPsjxIiM.js";
-import { a1 as Dt, E as $t, a4 as Ht, T as Ye, a as Bt } from "./chunks/converter-v5qDAfvf.js";
-import { O as qo } from "./chunks/converter-v5qDAfvf.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-Dgq1xcbs.js";
-import jt from "./ai-writer.es.js";
-import { D as Ko } from "./chunks/docx-zipper-B5_2puzu.js";
-import { createZip as Zo } from "./file-zipper.es.js";
-var it = { exports: {} };
-(function(t) {
-  var r = Object.prototype.hasOwnProperty, o = "~";
+var Ct = (e, s, t) => s in e ? wt(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var ze = (e, s, t) => Ct(e, typeof s != "symbol" ? s + "" : s, t), Ge = (e, s, t) => s.has(e) || qe("Cannot " + t);
+var Te = (e, s, t) => (Ge(e, s, "read from private field"), t ? t.call(e) : s.get(e)), Re = (e, s, t) => s.has(e) ? qe("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t);
+var N = (e, s, t) => (Ge(e, s, "access private method"), t);
+import { _ as q, a as Ye, b as kt, I as Oe, f as _t, c as Ke, d as xt, i as St, u as Et, r as At, E as Ne, e as Tt, P as Ft, h as It, M as Lt, j as Mt, A as Dt, N as Bt } from "./chunks/editor-C4x0LU8R.js";
+import { C as Vo, T as Po, l as jo, n as Uo, k as qo, m as Go } from "./chunks/editor-C4x0LU8R.js";
+import { a1 as Ht, E as $t, a4 as zt, T as Je, a as Rt } from "./chunks/converter-BJtjyWXx.js";
+import { O as Xo } from "./chunks/converter-BJtjyWXx.js";
+import { ref as h, createElementBlock as k, openBlock as C, createElementVNode as _, unref as M, getCurrentInstance as Ot, computed as j, watch as Nt, onMounted as Ce, createCommentVNode as ee, withDirectives as Qe, withKeys as et, normalizeClass as oe, withModifiers as he, vModelText as tt, createTextVNode as nt, toDisplayString as ie, Fragment as U, renderList as te, normalizeStyle as Q, createVNode as P, h as $, createApp as Wt, reactive as Xe, onUnmounted as Vt, shallowRef as ot, onBeforeUnmount as it, createBlock as Pt } from "vue";
+import { t as Z, s as jt, T as Ut, N as J } from "./chunks/toolbar-C3dMNXWg.js";
+import qt from "./ai-writer.es.js";
+import { D as Yo } from "./chunks/docx-zipper-BVv8YIej.js";
+import { createZip as Qo } from "./file-zipper.es.js";
+var st = { exports: {} };
+(function(e) {
+  var s = Object.prototype.hasOwnProperty, t = "~";
   function n() {
   }
-  Object.create && (n.prototype = /* @__PURE__ */ Object.create(null), new n().__proto__ || (o = !1));
-  function e(l, d, m) {
-    this.fn = l, this.context = d, this.once = m || !1;
+  Object.create && (n.prototype = /* @__PURE__ */ Object.create(null), new n().__proto__ || (t = !1));
+  function o(l, d, u) {
+    this.fn = l, this.context = d, this.once = u || !1;
   }
-  function i(l, d, m, s, b) {
-    if (typeof m != "function")
+  function i(l, d, u, r, w) {
+    if (typeof u != "function")
       throw new TypeError("The listener must be a function");
-    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;
+    var v = new o(u, r || l, w), b = t ? t + d : d;
+    return l._events[b] ? l._events[b].fn ? l._events[b] = [l._events[b], v] : l._events[b].push(v) : (l._events[b] = v, l._eventsCount++), l;
   }
   function c(l, d) {
     --l._eventsCount === 0 ? l._events = new n() : delete l._events[d];
@@ -37,225 +37,229 @@ var it = { exports: {} };
     this._events = new n(), this._eventsCount = 0;
   }
   a.prototype.eventNames = function() {
-    var d = [], m, s;
+    var d = [], u, r;
     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;
+    for (r in u = this._events)
+      s.call(u, r) && d.push(t ? r.slice(1) : r);
+    return Object.getOwnPropertySymbols ? d.concat(Object.getOwnPropertySymbols(u)) : 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;
+    var u = t ? t + d : d, r = this._events[u];
+    if (!r) return [];
+    if (r.fn) return [r.fn];
+    for (var w = 0, v = r.length, b = new Array(v); w < v; w++)
+      b[w] = r[w].fn;
+    return b;
   }, 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;
+    var u = t ? t + d : d, r = this._events[u];
+    return r ? r.fn ? 1 : r.length : 0;
+  }, a.prototype.emit = function(d, u, r, w, v, b) {
+    var y = t ? t + d : d;
+    if (!this._events[y]) return !1;
+    var g = this._events[y], L = arguments.length, D, p;
     if (g.fn) {
-      switch (g.once && this.removeListener(d, g.fn, void 0, !0), F) {
+      switch (g.once && this.removeListener(d, g.fn, void 0, !0), L) {
         case 1:
           return g.fn.call(g.context), !0;
         case 2:
-          return g.fn.call(g.context, m), !0;
+          return g.fn.call(g.context, u), !0;
         case 3:
-          return g.fn.call(g.context, m, s), !0;
+          return g.fn.call(g.context, u, r), !0;
         case 4:
-          return g.fn.call(g.context, m, s, b), !0;
+          return g.fn.call(g.context, u, r, w), !0;
         case 5:
-          return g.fn.call(g.context, m, s, b, v), !0;
+          return g.fn.call(g.context, u, r, w, v), !0;
         case 6:
-          return g.fn.call(g.context, m, s, b, v, y), !0;
+          return g.fn.call(g.context, u, r, w, v, b), !0;
       }
-      for (p = 1, $ = new Array(F - 1); p < F; p++)
-        $[p - 1] = arguments[p];
-      g.fn.apply(g.context, $);
+      for (p = 1, D = new Array(L - 1); p < L; p++)
+        D[p - 1] = arguments[p];
+      g.fn.apply(g.context, D);
     } else {
-      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) {
+      var S = g.length, F;
+      for (p = 0; p < S; p++)
+        switch (g[p].once && this.removeListener(d, g[p].fn, void 0, !0), L) {
           case 1:
             g[p].fn.call(g[p].context);
             break;
           case 2:
-            g[p].fn.call(g[p].context, m);
+            g[p].fn.call(g[p].context, u);
             break;
           case 3:
-            g[p].fn.call(g[p].context, m, s);
+            g[p].fn.call(g[p].context, u, r);
             break;
           case 4:
-            g[p].fn.call(g[p].context, m, s, b);
+            g[p].fn.call(g[p].context, u, r, w);
             break;
           default:
-            if (!$) for (T = 1, $ = new Array(F - 1); T < F; T++)
-              $[T - 1] = arguments[T];
-            g[p].fn.apply(g[p].context, $);
+            if (!D) for (F = 1, D = new Array(L - 1); F < L; F++)
+              D[F - 1] = arguments[F];
+            g[p].fn.apply(g[p].context, D);
         }
     }
     return !0;
-  }, 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;
+  }, a.prototype.on = function(d, u, r) {
+    return i(this, d, u, r, !1);
+  }, a.prototype.once = function(d, u, r) {
+    return i(this, d, u, r, !0);
+  }, a.prototype.removeListener = function(d, u, r, w) {
+    var v = t ? t + d : d;
     if (!this._events[v]) return this;
-    if (!m)
+    if (!u)
       return c(this, v), this;
-    var y = this._events[v];
-    if (y.fn)
-      y.fn === m && (!b || y.once) && (!s || y.context === s) && c(this, v);
+    var b = this._events[v];
+    if (b.fn)
+      b.fn === u && (!w || b.once) && (!r || b.context === r) && c(this, v);
     else {
-      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]);
+      for (var y = 0, g = [], L = b.length; y < L; y++)
+        (b[y].fn !== u || w && !b[y].once || r && b[y].context !== r) && g.push(b[y]);
       g.length ? this._events[v] = g.length === 1 ? g[0] : g : c(this, v);
     }
     return 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 r = t;
-  for (; r; ) {
-    const o = window.getComputedStyle(r).overflowY;
-    if (/(auto|scroll)/.test(o) && r.scrollHeight > r.clientHeight)
-      return r;
-    r = r.parentElement;
+    var u;
+    return d ? (u = t ? t + d : d, this._events[u] && c(this, u)) : (this._events = new n(), this._eventsCount = 0), this;
+  }, a.prototype.off = a.prototype.removeListener, a.prototype.addListener = a.prototype.on, a.prefixed = t, a.EventEmitter = a, e.exports = a;
+})(st);
+var Gt = st.exports;
+const Kt = /* @__PURE__ */ Ht(Gt);
+function Xt(e) {
+  let s = e;
+  for (; s; ) {
+    const t = window.getComputedStyle(s).overflowY;
+    if (/(auto|scroll)/.test(t) && s.scrollHeight > s.clientHeight)
+      return s;
+    s = s.parentElement;
   }
   return document.scrollingElement || document.documentElement;
 }
-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: r.block === "start" ? i : i - o.clientHeight + t.offsetHeight,
-    behavior: r.behavior
+function Zt(e, s = { behavior: "smooth", block: "start" }) {
+  if (!e) return;
+  const t = Xt(e), n = t.getBoundingClientRect(), i = e.getBoundingClientRect().top - n.top + t.scrollTop;
+  t.scrollTo({
+    top: s.block === "start" ? i : i - t.clientHeight + e.offsetHeight,
+    behavior: s.behavior
   });
 }
-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, 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);
-    Ee.value.push(...t.options);
+const x = (e) => {
+  if (!["button", "options", "separator", "dropdown", "overflow"].includes(e.type))
+    throw new Error("Invalid toolbar item type - " + e.type);
+  if (e.type === "button" && !e.defaultLabel && !e.icon)
+    throw new Error("Toolbar button item needs either icon or label - " + e.name);
+  if (!e.name)
+    throw new Error("Invalid toolbar item name - " + e.name);
+  const t = h($t()), n = e.type, o = h(e.name), i = e.command, c = e.noArgumentCommand, a = h(e.icon), l = h(e.group || "center"), d = h(e.allowWithoutEditor), u = h(e.attributes || {}), r = e.disabled || !1, w = h(e.disabled), v = h(!1), b = h(!1), y = h(e.style), g = h(e.isNarrow), L = h(e.isWide), D = h(e.minWidth), p = h(e.suppressActiveHighlight || !1), S = h(e.argument), F = h(null), O = h(null), W = h(e.iconColor), ne = h(e.hasCaret), ue = h(e.dropdownStyles), ve = h(e.tooltip), ge = h(e.tooltipVisible), Y = h(e.tooltipTimeout), T = h(e.defaultLabel), B = h(e.label), H = h(e.hideLabel), z = h(e.inlineTextInputVisible), G = h(e.hasInlineTextInput), K = h(e.markName), ce = h(e.labelAttr), se = h(e.selectedValue), ke = h(e.dropdownValueKey), Ie = h(e.inputRef || null), be = h([]);
+  if (e.options) {
+    if (!Array.isArray(e.options)) throw new Error("Invalid toolbar item options - " + e.options);
+    be.value.push(...e.options);
   }
-  const Fe = (se) => {
-    we(se), !p.value && (v.value = !0);
-  }, Ie = () => {
-    ne(), v.value = !1;
-  }, Le = (se) => {
-    b.value = se;
-  }, Me = () => {
-    b.value = s;
-  }, we = t.onActivate || (() => null), ne = t.onDeactivate || (() => null), De = () => {
-    const se = {};
-    return Object.keys(me).forEach((pe) => {
-      me[pe].value !== void 0 && (se[pe] = me[pe].value);
-    }), se;
-  }, me = {
-    id: o,
-    name: e,
+  const _e = (ae) => {
+    xe(ae), !p.value && (v.value = !0);
+  }, Le = () => {
+    Se(), v.value = !1;
+  }, Me = (ae) => {
+    w.value = ae;
+  }, De = () => {
+    w.value = r;
+  }, xe = e.onActivate || (() => null), Se = e.onDeactivate || (() => null), Ee = () => {
+    const ae = {};
+    return Object.keys(X).forEach((ye) => {
+      X[ye].value !== void 0 && (ae[ye] = X[ye].value);
+    }), ae;
+  }, X = {
+    id: t,
+    name: o,
     type: n,
     command: i,
     noArgumentCommand: c,
     icon: a,
-    tooltip: Z,
+    tooltip: ve,
     group: l,
-    attributes: m,
-    disabled: b,
+    attributes: u,
+    disabled: w,
     active: v,
-    expand: y,
-    nestedOptions: Ee,
-    style: E,
+    expand: b,
+    nestedOptions: be,
+    style: y,
     isNarrow: g,
-    isWide: F,
-    minWidth: $,
-    argument: x,
-    parentItem: N,
-    iconColor: V,
-    hasCaret: te,
-    dropdownStyles: ye,
-    tooltipVisible: re,
-    tooltipTimeout: be,
-    defaultLabel: I,
-    label: M,
+    isWide: L,
+    minWidth: D,
+    argument: S,
+    parentItem: O,
+    iconColor: W,
+    hasCaret: ne,
+    dropdownStyles: ue,
+    tooltipVisible: ge,
+    tooltipTimeout: Y,
+    defaultLabel: T,
+    label: B,
     hideLabel: H,
-    inlineTextInputVisible: R,
+    inlineTextInputVisible: z,
     hasInlineTextInput: G,
     markName: K,
     labelAttr: ce,
-    childItem: T,
+    childItem: F,
     allowWithoutEditor: d,
-    dropdownValueKey: _e,
-    selectedValue: ue,
-    inputRef: xe
+    dropdownValueKey: ke,
+    selectedValue: se,
+    inputRef: Ie
   };
   return {
-    ...me,
-    unref: De,
-    activate: Fe,
-    deactivate: Ie,
-    setDisabled: Le,
-    resetDisabled: Me,
-    onActivate: we,
-    onDeactivate: ne
+    ...X,
+    unref: Ee,
+    activate: _e,
+    deactivate: Le,
+    setDisabled: Me,
+    resetDisabled: De,
+    onActivate: xe,
+    onDeactivate: Se
   };
-}, Xt = { class: "alignment-buttons" }, Zt = ["innerHTML"], Yt = ["innerHTML"], Jt = ["innerHTML"], Qt = ["innerHTML"], en = {
+}, Yt = { class: "alignment-buttons" }, Jt = ["innerHTML"], Qt = ["innerHTML"], en = ["innerHTML"], tn = ["innerHTML"], nn = {
   __name: "AlignmentButtons",
   emits: ["select"],
-  setup(t, { emit: r }) {
-    const o = r, n = (e) => {
-      o("select", e);
+  setup(e, { emit: s }) {
+    const t = s, n = (o) => {
+      t("select", o);
     };
-    return (e, i) => (w(), C("div", Xt, [
-      k("div", {
+    return (o, i) => (C(), k("div", Yt, [
+      _("div", {
         class: "button-icon",
         onClick: i[0] || (i[0] = (c) => n("left")),
-        innerHTML: D(X).alignLeft
-      }, null, 8, Zt),
-      k("div", {
+        innerHTML: M(Z).alignLeft,
+        "data-item": "btn-textAlign-option"
+      }, null, 8, Jt),
+      _("div", {
         class: "button-icon",
         onClick: i[1] || (i[1] = (c) => n("center")),
-        innerHTML: D(X).alignCenter
-      }, null, 8, Yt),
-      k("div", {
+        innerHTML: M(Z).alignCenter,
+        "data-item": "btn-textAlign-option"
+      }, null, 8, Qt),
+      _("div", {
         class: "button-icon",
         onClick: i[2] || (i[2] = (c) => n("right")),
-        innerHTML: D(X).alignRight
-      }, null, 8, Jt),
-      k("div", {
+        innerHTML: M(Z).alignRight,
+        "data-item": "btn-textAlign-option"
+      }, null, 8, en),
+      _("div", {
         class: "button-icon",
         onClick: i[3] || (i[3] = (c) => n("justify")),
-        innerHTML: D(X).alignJustify
-      }, null, 8, Qt)
+        innerHTML: M(Z).alignJustify,
+        "data-item": "btn-textAlign-option"
+      }, null, 8, tn)
     ]));
   }
-}, tn = /* @__PURE__ */ q(en, [["__scopeId", "data-v-d6fae878"]]), nn = { class: "link-input-ctn" }, on = {
+}, on = /* @__PURE__ */ q(nn, [["__scopeId", "data-v-932a4937"]]), sn = { class: "link-input-ctn" }, an = {
   key: 0,
   class: "link-title"
-}, sn = {
+}, ln = {
   key: 1,
   class: "link-title"
-}, ln = {
+}, rn = {
   key: 2,
   class: "link-title"
-}, an = { key: 3 }, rn = { class: "input-row" }, cn = ["innerHTML"], dn = ["onKeydown"], un = ["innerHTML"], mn = { class: "input-row link-buttons" }, pn = ["innerHTML"], hn = {
+}, cn = { key: 3 }, dn = { class: "input-row" }, un = ["innerHTML"], mn = ["onKeydown"], pn = ["innerHTML"], fn = { class: "input-row link-buttons" }, hn = ["innerHTML"], vn = {
   key: 4,
   class: "input-row go-to-anchor clickable"
-}, fn = {
+}, gn = {
   __name: "LinkInput",
   props: {
     initialText: {
@@ -281,88 +285,91 @@ const _ = (t) => {
     }
   },
   emits: ["submit", "cancel"],
-  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 });
+  setup(e, { emit: s }) {
+    const t = s, n = e, { proxy: o } = Ot(), i = () => {
+      if (o?.$submit instanceof Function && o.$submit(), d.value && r.value) {
+        t("submit", { text: l.value, href: u.value });
         return;
       } else if (!d.value) {
-        o("submit", { text: l.value, href: null });
+        t("submit", { text: l.value, href: null });
         return;
       }
       console.debug("[LinkInput] Invalid URL in handleSubmit"), a.value = !0;
     }, 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");
+      t("submit", { text: l.value, href: null });
+    }, a = h(!1), l = h(n.initialText), d = h(n.href), u = j(() => d.value?.startsWith("http") ? d.value : "http://" + d.value), r = j(() => {
+      const p = u.value.split(".").filter(Boolean);
+      return u.value.includes(".") && p.length > 1;
+    }), w = j(() => b.value ? "Apply" : "Remove"), v = j(() => !r.value), b = j(() => !y.value), y = j(() => n.href && !d.value), g = j(() => n.href.startsWith("#")), L = () => {
+      window.open(u.value, "_blank");
     };
-    Ot(
+    Nt(
       () => n.href,
       (p) => {
         d.value = p;
       }
     );
-    const $ = () => {
+    const D = () => {
       const p = document.querySelector(".link-input-ctn input");
       p && p.focus();
     };
-    return ke(() => {
-      n.showInput && $();
-    }), (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", {
+    return Ce(() => {
+      n.showInput && D();
+    }), (p, S) => (C(), k("div", sn, [
+      e.href ? g.value ? (C(), k("div", ln, "Page anchor")) : (C(), k("div", rn, "Edit link")) : (C(), k("div", an, "Add link")),
+      e.showInput && !g.value ? (C(), k("div", cn, [
+        _("div", dn, [
+          _("div", {
             class: "input-icon",
-            innerHTML: D(X).linkInput
-          }, null, 8, cn),
-          Je(k("input", {
+            innerHTML: M(Z).linkInput
+          }, null, 8, un),
+          Qe(_("input", {
             type: "text",
             placeholder: "Type or paste a link",
             class: oe({ error: a.value }),
-            "onUpdate:modelValue": x[0] || (x[0] = (T) => d.value = T),
+            "onUpdate:modelValue": S[0] || (S[0] = (F) => d.value = F),
             onKeydown: [
-              Qe(ge(i, ["stop", "prevent"]), ["enter"]),
-              x[1] || (x[1] = (T) => a.value = !1)
+              et(he(i, ["stop", "prevent"]), ["enter"]),
+              S[1] || (S[1] = (F) => a.value = !1)
             ]
-          }, null, 42, dn), [
-            [et, d.value]
+          }, null, 42, mn), [
+            [tt, d.value]
           ]),
-          k("div", {
-            class: oe(["open-link-icon", { disabled: !s.value }]),
-            innerHTML: D(X).openLink,
-            onClick: F
-          }, null, 10, un)
+          _("div", {
+            class: oe(["open-link-icon", { disabled: !r.value }]),
+            innerHTML: M(Z).openLink,
+            onClick: L,
+            "data-item": "btn-link-open"
+          }, null, 10, pn)
         ]),
-        k("div", mn, [
-          t.href ? (w(), C("button", {
+        _("div", fn, [
+          e.href ? (C(), k("button", {
             key: 0,
             class: "remove-btn",
-            onClick: c
+            onClick: c,
+            "data-item": "btn-link-remove"
           }, [
-            k("div", {
+            _("div", {
               class: "remove-btn__icon",
-              innerHTML: D(X).removeLink
-            }, null, 8, pn),
-            x[3] || (x[3] = tt(" Remove "))
-          ])) : Q("", !0),
-          y.value ? (w(), C("button", {
+              innerHTML: M(Z).removeLink
+            }, null, 8, hn),
+            S[3] || (S[3] = nt(" Remove "))
+          ])) : ee("", !0),
+          b.value ? (C(), k("button", {
             key: 1,
             class: oe(["submit-btn", { "disable-btn": v.value }]),
-            onClick: i
-          }, ie(b.value), 3)) : Q("", !0)
+            onClick: i,
+            "data-item": "btn-link-apply"
+          }, ie(w.value), 3)) : ee("", !0)
         ])
-      ])) : 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)
+      ])) : g.value ? (C(), k("div", vn, [
+        _("a", {
+          onClick: S[2] || (S[2] = he((...F) => e.goToAnchor && e.goToAnchor(...F), ["stop", "prevent"]))
+        }, "Go to " + ie(e.href.startsWith("#_") ? e.href.substring(2) : e.href), 1)
+      ])) : ee("", !0)
     ]));
   }
-}, 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 = {
+}, bn = /* @__PURE__ */ q(gn, [["__scopeId", "data-v-04bac853"]]), yn = { class: "document-mode" }, wn = ["onClick"], Cn = { class: "document-mode-column icon-column" }, kn = ["innerHTML"], _n = { class: "document-mode-column text-column" }, xn = { class: "document-mode-type" }, Sn = { class: "document-mode-description" }, En = {
   __name: "DocumentMode",
   props: {
     options: {
@@ -370,32 +377,33 @@ const _ = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: r }) {
-    const o = r, n = (e) => {
-      o("select", e);
+  setup(e, { emit: s }) {
+    const t = s, n = (o) => {
+      t("select", o);
     };
-    return (e, i) => (w(), C("div", gn, [
-      (w(!0), C(U, null, ee(t.options, (c) => (w(), C("div", {
+    return (o, i) => (C(), k("div", yn, [
+      (C(!0), k(U, null, te(e.options, (c) => (C(), k("div", {
         class: oe(["option-item", { disabled: c.disabled }]),
-        onClick: (a) => n(c)
+        onClick: (a) => n(c),
+        "data-item": "btn-documentMode-option"
       }, [
-        k("div", bn, [
-          k("div", {
+        _("div", Cn, [
+          _("div", {
             class: "icon-column__icon",
             innerHTML: c.icon
-          }, null, 8, wn)
+          }, null, 8, kn)
         ]),
-        k("div", Cn, [
-          k("div", kn, ie(c.label), 1),
-          k("div", _n, ie(c.description), 1)
+        _("div", _n, [
+          _("div", xn, ie(c.label), 1),
+          _("div", Sn, ie(c.description), 1)
         ])
-      ], 10, yn))), 256))
+      ], 10, wn))), 256))
     ]));
   }
-}, En = /* @__PURE__ */ q(xn, [["__scopeId", "data-v-f86e1477"]]), Sn = {
+}, An = /* @__PURE__ */ q(En, [["__scopeId", "data-v-8afd7fbb"]]), Tn = {
   key: 0,
   class: "linked-style-buttons"
-}, An = ["onClick"], Tn = {
+}, Fn = ["onClick"], In = {
   __name: "LinkedStyle",
   props: {
     editor: {
@@ -404,23 +412,24 @@ const _ = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: r }) {
-    const o = r, n = t, e = (i) => {
-      o("select", i);
+  setup(e, { emit: s }) {
+    const t = s, n = e, o = (i) => {
+      t("select", i);
     };
-    return (i, c) => n.editor ? (w(), C("div", Sn, [
-      (w(!0), C(U, null, ee(D(Ze)(t.editor), (a) => (w(), C("div", {
+    return (i, c) => n.editor ? (C(), k("div", Tn, [
+      (C(!0), k(U, null, te(M(Ye)(e.editor), (a) => (C(), k("div", {
         class: "style-item",
-        onClick: (l) => e(a)
+        onClick: (l) => o(a)
       }, [
-        k("div", {
+        _("div", {
           class: "style-name",
-          style: J(D(wt)(a, null, !1))
+          style: Q(M(kt)(a, null, !1)),
+          "data-item": "btn-linkedStyles-option"
         }, ie(a.definition.attrs.name), 5)
-      ], 8, An))), 256))
-    ])) : Q("", !0);
+      ], 8, Fn))), 256))
+    ])) : ee("", !0);
   }
-}, Fn = /* @__PURE__ */ q(Tn, [["__scopeId", "data-v-97e3296a"]]), In = ["onClick"], Ln = ["innerHTML"], Mn = ["innerHTML"], Dn = {
+}, Ln = /* @__PURE__ */ q(In, [["__scopeId", "data-v-44b680e9"]]), Mn = ["onClick"], Dn = ["innerHTML"], Bn = ["innerHTML"], Hn = {
   __name: "IconGridRow",
   props: {
     icons: {
@@ -433,37 +442,37 @@ const _ = (t) => {
     }
   },
   emits: ["select"],
-  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);
+  setup(e, { emit: s }) {
+    const t = s, n = e, o = 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) => {
+      t("select", a.value);
     };
-    return ke(() => {
+    return Ce(() => {
       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", {
+    }), (a, l) => (C(!0), k(U, null, te(e.icons, (d, u) => (C(), k("div", {
       class: "option-row",
-      key: m
+      key: u
     }, [
-      (w(!0), C(U, null, ee(d, (s, b) => (w(), C("div", {
+      (C(!0), k(U, null, te(d, (r, w) => (C(), k("div", {
         class: "option",
-        key: b,
-        onClick: ge((v) => c(s), ["stop", "prevent"])
+        key: w,
+        onClick: he((v) => c(r), ["stop", "prevent"])
       }, [
-        k("div", {
+        _("div", {
           class: "option__icon",
-          innerHTML: s.icon,
-          style: J(s.style)
-        }, null, 12, Ln),
-        e.value(s) ? (w(), C("div", {
+          innerHTML: r.icon,
+          style: Q(r.style)
+        }, null, 12, Dn),
+        o.value(r) ? (C(), k("div", {
           key: 0,
           class: "option__check",
-          innerHTML: D(X).colorOptionCheck,
-          style: J(i(s.value, b))
-        }, null, 12, Mn)) : Q("", !0)
-      ], 8, In))), 128))
+          innerHTML: M(Z).colorOptionCheck,
+          style: Q(i(r.value, w))
+        }, null, 12, Bn)) : ee("", !0)
+      ], 8, Mn))), 128))
     ]))), 128));
   }
-}, Xe = /* @__PURE__ */ q(Dn, [["__scopeId", "data-v-6a2a9a40"]]), $n = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 512c53.2 0 101.4-21.6 136.1-56.6l-298.3-235C140 257.1 128 292.3 128 320c0 106 86 192 192 192zM505.2 370.7c4.4-16.2 6.8-33.1 6.8-50.7c0-91.2-130.2-262.3-166.6-308.3C339.4 4.2 330.5 0 320.9 0l-1.8 0c-9.6 0-18.5 4.2-24.5 11.7C277.8 33 240.7 81.3 205.8 136L38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L505.2 370.7zM224 336c0 44.2 35.8 80 80 80c8.8 0 16 7.2 16 16s-7.2 16-16 16c-61.9 0-112-50.1-112-112c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>
-`, Hn = { class: "options-grid-wrap" }, Bn = ["innerHTML"], Rn = { class: "option-grid-ctn" }, On = {
+}, Ze = /* @__PURE__ */ q(Hn, [["__scopeId", "data-v-6a2a9a40"]]), $n = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 512c53.2 0 101.4-21.6 136.1-56.6l-298.3-235C140 257.1 128 292.3 128 320c0 106 86 192 192 192zM505.2 370.7c4.4-16.2 6.8-33.1 6.8-50.7c0-91.2-130.2-262.3-166.6-308.3C339.4 4.2 330.5 0 320.9 0l-1.8 0c-9.6 0-18.5 4.2-24.5 11.7C277.8 33 240.7 81.3 205.8 136L38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L505.2 370.7zM224 336c0 44.2 35.8 80 80 80c8.8 0 16 7.2 16 16s-7.2 16-16 16c-61.9 0-112-50.1-112-112c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>
+`, zn = { class: "options-grid-wrap" }, Rn = ["innerHTML"], On = { class: "option-grid-ctn" }, Nn = {
   __name: "IconGrid",
   props: {
     icons: {
@@ -484,174 +493,174 @@ const _ = (t) => {
     }
   },
   emits: ["select", "clickoutside"],
-  setup(t, { emit: r }) {
-    const o = r, n = (e) => {
-      o("select", e);
+  setup(e, { emit: s }) {
+    const t = s, n = (o) => {
+      t("select", o);
     };
-    return (e, i) => (w(), C("div", Hn, [
-      t.hasNoneIcon ? (w(), C("div", {
+    return (o, i) => (C(), k("div", zn, [
+      e.hasNoneIcon ? (C(), k("div", {
         key: 0,
         class: "none-option",
         onClick: i[0] || (i[0] = (c) => n("none"))
       }, [
-        k("span", {
-          innerHTML: D($n),
+        _("span", {
+          innerHTML: M($n),
           class: "none-icon"
-        }, null, 8, Bn),
-        i[1] || (i[1] = tt(" None "))
-      ])) : Q("", !0),
-      k("div", Rn, [
-        P(Xe, {
-          icons: t.icons,
-          "active-color": t.activeColor,
+        }, null, 8, Rn),
+        i[1] || (i[1] = nt(" None "))
+      ])) : ee("", !0),
+      _("div", On, [
+        P(Ze, {
+          icons: e.icons,
+          "active-color": e.activeColor,
           onSelect: n
         }, null, 8, ["icons", "active-color"]),
-        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,
+        e.customIcons.flat().length ? (C(), k(U, { key: 0 }, [
+          i[2] || (i[2] = _("span", { class: "option-grid-ctn__subtitle" }, "Custom colors", -1)),
+          P(Ze, {
+            icons: e.customIcons,
+            "active-color": e.activeColor,
             onSelect: n
           }, null, 8, ["icons", "active-color"])
-        ], 64)) : Q("", !0)
+        ], 64)) : ee("", !0)
       ])
     ]));
   }
-}, Nn = /* @__PURE__ */ q(On, [["__scopeId", "data-v-47b783db"]]), zn = (t) => {
-  t.expand.value = !1;
-}, h = (t, r = null) => ({
-  label: r,
-  icon: X.colorOption,
-  value: t,
+}, Wn = /* @__PURE__ */ q(Nn, [["__scopeId", "data-v-47b783db"]]), Vn = (e) => {
+  e.expand.value = !1;
+}, f = (e, s = null) => ({
+  label: s,
+  icon: Z.colorOption,
+  value: e,
   style: {
-    color: t,
+    color: e,
     boxShadow: "0 0 5px 1px rgba(0, 0, 0, 0.1)",
     borderRadius: "50%"
   }
-}), Ve = (t, r, o = [], n = !1) => {
-  const e = (i) => {
-    r.iconColor.value = i, t.emitCommand({ item: r, argument: i }), zn(r);
+}), We = (e, s, t = [], n = !1) => {
+  const o = (i) => {
+    s.iconColor.value = i, e.emitCommand({ item: s, argument: i }), Vn(s);
   };
-  return B("div", {}, [
-    B(Nn, {
-      icons: st,
-      customIcons: o,
-      activeColor: r.iconColor,
+  return $("div", {}, [
+    $(Wn, {
+      icons: at,
+      customIcons: t,
+      activeColor: s.iconColor,
       hasNoneIcon: n,
-      onSelect: e
+      onSelect: o
     })
   ]);
-}, st = [
+}, at = [
   [
-    h("#111111"),
-    h("#333333"),
-    h("#5C5C5C"),
-    h("#858585"),
-    h("#ADADAD"),
-    h("#D6D6D6"),
-    h("#FFFFFF")
+    f("#111111"),
+    f("#333333"),
+    f("#5C5C5C"),
+    f("#858585"),
+    f("#ADADAD"),
+    f("#D6D6D6"),
+    f("#FFFFFF")
   ],
   [
-    h("#860028"),
-    h("#D2003F"),
-    h("#DB3365"),
-    h("#E4668C"),
-    h("#ED99B2"),
-    h("#F6CCD9"),
-    h("#FF004D")
+    f("#860028"),
+    f("#D2003F"),
+    f("#DB3365"),
+    f("#E4668C"),
+    f("#ED99B2"),
+    f("#F6CCD9"),
+    f("#FF004D")
   ],
   [
-    h("#83015E"),
-    h("#CD0194"),
-    h("#D734A9"),
-    h("#E167BF"),
-    h("#EB99D4"),
-    h("#F5CCEA"),
-    h("#FF00A8")
+    f("#83015E"),
+    f("#CD0194"),
+    f("#D734A9"),
+    f("#E167BF"),
+    f("#EB99D4"),
+    f("#F5CCEA"),
+    f("#FF00A8")
   ],
   [
-    h("#8E220A"),
-    h("#DD340F"),
-    h("#E45C3F"),
-    h("#EB856F"),
-    h("#F1AE9F"),
-    h("#F8D6CF"),
-    h("#FF7A00")
+    f("#8E220A"),
+    f("#DD340F"),
+    f("#E45C3F"),
+    f("#EB856F"),
+    f("#F1AE9F"),
+    f("#F8D6CF"),
+    f("#FF7A00")
   ],
   [
-    h("#947D02"),
-    h("#E7C302"),
-    h("#ECCF35"),
-    h("#F1DB67"),
-    h("#F5E79A"),
-    h("#FAF3CC"),
-    h("#FAFF09")
+    f("#947D02"),
+    f("#E7C302"),
+    f("#ECCF35"),
+    f("#F1DB67"),
+    f("#F5E79A"),
+    f("#FAF3CC"),
+    f("#FAFF09")
   ],
   [
-    h("#055432"),
-    h("#07834F"),
-    h("#399C72"),
-    h("#6AB595"),
-    h("#9CCDB9"),
-    h("#CDE6DC"),
-    h("#05F38F")
+    f("#055432"),
+    f("#07834F"),
+    f("#399C72"),
+    f("#6AB595"),
+    f("#9CCDB9"),
+    f("#CDE6DC"),
+    f("#05F38F")
   ],
   [
-    h("#063E7E"),
-    h("#0A60C5"),
-    h("#3B80D1"),
-    h("#6CA0DC"),
-    h("#9DBFE8"),
-    h("#CEDFF3"),
-    h("#21c8ce")
+    f("#063E7E"),
+    f("#0A60C5"),
+    f("#3B80D1"),
+    f("#6CA0DC"),
+    f("#9DBFE8"),
+    f("#CEDFF3"),
+    f("#21c8ce")
   ],
   [
-    h("#3E027A"),
-    h("#6103BF"),
-    h("#8136CC"),
-    h("#A068D9"),
-    h("#C09AE6"),
-    h("#DFCDF2"),
-    h("#A91DFF")
+    f("#3E027A"),
+    f("#6103BF"),
+    f("#8136CC"),
+    f("#A068D9"),
+    f("#C09AE6"),
+    f("#DFCDF2"),
+    f("#A91DFF")
   ]
-], 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 = {
+], Pn = () => at.flat().map((e) => e.value), jn = { class: "toolbar-table-grid-wrapper" }, Un = ["data-cols", "data-rows", "onClick"], qn = { class: "toolbar-table-grid-value" }, Gn = {
   __name: "TableGrid",
   emits: ["select", "clickoutside"],
-  setup(t, { emit: r }) {
-    const o = r, n = f(0), e = f(0), i = (a) => {
+  setup(e, { emit: s }) {
+    const t = s, n = h(0), o = h(0), i = (a) => {
       let l = a.target;
       if (!!l.dataset.grid)
         return;
-      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 < 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");
+      let r = [...l.parentElement.querySelectorAll("[data-item]")], w = parseInt(l.dataset.cols, 10), v = parseInt(l.dataset.rows, 10);
+      o.value = w, n.value = v;
+      for (let b = 0; b < r.length; b++) {
+        let y = r[b], g = parseInt(y.dataset.cols, 10), L = parseInt(y.dataset.rows, 10);
+        g <= w && L <= v ? y.classList.add("selected") : y.classList.remove("selected");
       }
     }, c = ({ cols: a, rows: l }) => {
-      o("select", { cols: a, rows: l });
+      t("select", { cols: a, rows: l });
     };
-    return (a, l) => (w(), C("div", Wn, [
-      k("div", {
+    return (a, l) => (C(), k("div", jn, [
+      _("div", {
         class: "toolbar-table-grid",
         onMouseover: i,
         "data-grid": "true"
       }, [
-        (w(), C(U, null, ee(5, (d) => (w(), C(U, { key: d }, [
-          (w(), C(U, null, ee(5, (m) => k("div", {
+        (C(), k(U, null, te(5, (d) => (C(), k(U, { key: d }, [
+          (C(), k(U, null, te(5, (u) => _("div", {
             class: "toolbar-table-grid__item",
-            key: `${d}_${m}`,
-            "data-cols": m,
+            key: `${d}_${u}`,
+            "data-cols": u,
             "data-rows": d,
             "data-item": "true",
-            onClick: ge((s) => c({ cols: m, rows: d }), ["stop", "prevent"])
-          }, null, 8, Pn)), 64))
+            onClick: he((r) => c({ cols: u, rows: d }), ["stop", "prevent"])
+          }, null, 8, Un)), 64))
         ], 64))), 64))
       ], 32),
-      k("div", jn, ie(n.value) + " x " + ie(e.value), 1)
+      _("div", qn, ie(n.value) + " x " + ie(o.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 = {
+}, Kn = /* @__PURE__ */ q(Gn, [["__scopeId", "data-v-06352ab9"]]), Xn = { class: "toolbar-table-actions" }, Zn = ["onClick", "data-item"], Yn = { class: "toolbar-table-actions__icon" }, Jn = ["innerHTML"], Qn = { class: "toolbar-table-actions__label" }, eo = {
   __name: "TableActions",
   props: {
     options: {
@@ -659,27 +668,28 @@ const _ = (t) => {
     }
   },
   emits: ["select"],
-  setup(t, { emit: r }) {
-    const o = r, n = (e) => {
-      o("select", { command: e.command });
+  setup(e, { emit: s }) {
+    const t = s, n = (o) => {
+      t("select", { command: o.command });
     };
-    return (e, i) => (w(), C("div", Gn, [
-      (w(!0), C(U, null, ee(t.options, (c) => (w(), C("div", {
+    return (o, i) => (C(), k("div", Xn, [
+      (C(!0), k(U, null, te(e.options, (c) => (C(), k("div", {
         class: oe(["toolbar-table-actions__item", { "toolbar-table-actions__item--border": c.bottomBorder }]),
-        onClick: (a) => n(c)
+        onClick: (a) => n(c),
+        "data-item": c.props?.["data-item"] || ""
       }, [
-        k("div", Xn, [
-          k("div", {
+        _("div", Yn, [
+          _("div", {
             class: "toolbar-table-actions__icon-wrapper",
             innerHTML: c.icon
-          }, null, 8, Zn)
+          }, null, 8, Jn)
         ]),
-        k("div", Yn, ie(c.label), 1)
-      ], 10, Kn))), 256))
+        _("div", Qn, ie(c.label), 1)
+      ], 10, Zn))), 256))
     ]));
   }
-}, Qn = /* @__PURE__ */ q(Jn, [["__scopeId", "data-v-9a702d7f"]]), eo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-`, to = { class: "search-input-ctn" }, no = { class: "row" }, oo = ["onKeydown"], io = {
+}, to = /* @__PURE__ */ q(eo, [["__scopeId", "data-v-fdbfb4b0"]]), no = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+`, oo = { class: "search-input-ctn" }, io = { class: "row" }, so = ["onKeydown"], ao = {
   __name: "SearchInput",
   props: {
     searchRef: {
@@ -687,42 +697,87 @@ const _ = (t) => {
     }
   },
   emits: ["submit"],
-  setup(t, { emit: r }) {
-    const o = f(""), n = r, e = () => {
-      n("submit", { value: o.value });
+  setup(e, { emit: s }) {
+    const t = h(""), n = s, o = () => {
+      n("submit", { value: t.value });
     };
-    return (i, c) => (w(), C("div", to, [
-      k("div", no, [
-        Je(k("input", {
-          ref: t.searchRef,
-          "onUpdate:modelValue": c[0] || (c[0] = (a) => o.value = a),
+    return (i, c) => (C(), k("div", oo, [
+      _("div", io, [
+        Qe(_("input", {
+          ref: e.searchRef,
+          "onUpdate:modelValue": c[0] || (c[0] = (a) => t.value = a),
           class: "search-input",
           type: "text",
           name: "search",
           placeholder: "Type search string",
-          onKeydown: Qe(ge(e, ["stop", "prevent"]), ["enter"])
-        }, null, 40, oo), [
-          [et, o.value]
+          onKeydown: et(he(o, ["stop", "prevent"]), ["enter"])
+        }, null, 40, so), [
+          [tt, t.value]
         ])
       ]),
-      k("div", { class: "row submit" }, [
-        k("button", {
+      _("div", { class: "row submit" }, [
+        _("button", {
           class: "submit-btn",
-          onClick: e
+          onClick: o
         }, " Apply ")
       ])
     ]));
   }
-}, so = /* @__PURE__ */ q(io, [["__scopeId", "data-v-af870fbd"]]), ae = (t) => {
-  t.expand.value = !1;
-}, lo = (t, r = !1, o, n, e) => {
-  const i = _({
+}, lo = /* @__PURE__ */ q(ao, [["__scopeId", "data-v-af870fbd"]]), ro = [
+  {
+    label: "Georgia",
+    key: "Georgia, serif",
+    fontWeight: 400,
+    props: {
+      style: { fontFamily: "Georgia, serif" },
+      "data-item": "btn-fontFamily-option"
+    }
+  },
+  {
+    label: "Arial",
+    key: "Arial, sans-serif",
+    fontWeight: 400,
+    props: {
+      style: { fontFamily: "Arial, sans-serif" },
+      "data-item": "btn-fontFamily-option"
+    }
+  },
+  {
+    label: "Courier New",
+    key: "Courier New, monospace",
+    fontWeight: 400,
+    props: {
+      style: { fontFamily: "Courier New, monospace" },
+      "data-item": "btn-fontFamily-option"
+    }
+  },
+  {
+    label: "Times New Roman",
+    key: "Times New Roman, serif",
+    fontWeight: 400,
+    props: {
+      style: { fontFamily: "Times New Roman, serif" },
+      "data-item": "btn-fontFamily-option"
+    }
+  }
+], re = (e) => {
+  e.expand.value = !1;
+}, co = ({
+  superToolbar: e,
+  toolbarIcons: s,
+  toolbarFonts: t,
+  hideButtons: n,
+  availableWidth: o,
+  role: i,
+  isDev: c = !1
+} = {}) => {
+  const a = x({
     type: "button",
     name: "bold",
     command: "toggleBold",
-    icon: e.bold,
+    icon: s.bold,
     tooltip: "Bold"
-  }), c = _({
+  }), l = x({
     type: "dropdown",
     name: "fontFamily",
     tooltip: "Font",
@@ -735,45 +790,12 @@ const _ = (t) => {
     isWide: !0,
     style: { width: "116px" },
     suppressActiveHighlight: !0,
-    options: [
-      {
-        label: "Georgia",
-        key: "Georgia, serif",
-        fontWeight: 400,
-        props: {
-          style: { fontFamily: "Georgia, serif" }
-        }
-      },
-      {
-        label: "Arial",
-        key: "Arial, sans-serif",
-        fontWeight: 400,
-        props: {
-          style: { fontFamily: "Arial, sans-serif" }
-        }
-      },
-      {
-        label: "Courier New",
-        key: "Courier New, monospace",
-        fontWeight: 400,
-        props: {
-          style: { fontFamily: "Courier New, monospace" }
-        }
-      },
-      {
-        label: "Times New Roman",
-        key: "Times New Roman, serif",
-        fontWeight: 400,
-        props: {
-          style: { fontFamily: "Times New Roman, serif" }
-        }
-      }
-    ],
-    onActivate: ({ fontFamily: u }) => {
-      u && (c.label.value = u);
+    options: [...t || ro],
+    onActivate: ({ fontFamily: m }) => {
+      m && (l.label.value = m);
     },
-    onDeactivate: () => c.label.value = c.defaultLabel.value
-  }), a = _({
+    onDeactivate: () => l.label.value = l.defaultLabel.value
+  }), d = x({
     type: "dropdown",
     dropdownStyles: {
       padding: 0,
@@ -781,7 +803,7 @@ const _ = (t) => {
     },
     name: "ai",
     tooltip: "AI text generation",
-    icon: e.ai,
+    icon: s.ai,
     hideLabel: !0,
     hasCaret: !1,
     isWide: !0,
@@ -791,31 +813,31 @@ const _ = (t) => {
         type: "render",
         key: "ai",
         render: () => {
-          let u = "";
-          if (t.activeEditor) {
-            const { state: A } = t.activeEditor, { from: W, to: le, empty: gt } = A.selection;
-            u = gt ? "" : A.doc.textBetween(W, le);
+          let m = "";
+          if (e.activeEditor) {
+            const { state: A } = e.activeEditor, { from: V, to: le, empty: yt } = A.selection;
+            m = yt ? "" : A.doc.textBetween(V, le);
           }
-          return B(
+          return $(
             "div",
             {},
             [
-              B(jt, {
+              $(qt, {
                 handleClose: () => {
-                  ae(a);
+                  re(d);
                 },
-                selectedText: u,
-                editor: t.activeEditor,
-                apiKey: t.config.aiApiKey,
-                endpoint: t.config.aiEndpoint,
-                superToolbar: t
+                selectedText: m,
+                editor: e.activeEditor,
+                apiKey: e.config.aiApiKey,
+                endpoint: e.config.aiEndpoint,
+                superToolbar: e
               })
             ]
           );
         }
       }
     ]
-  }), l = _({
+  }), u = x({
     type: "dropdown",
     name: "fontSize",
     defaultLabel: "12",
@@ -831,47 +853,47 @@ const _ = (t) => {
     isWide: !0,
     command: "setFontSize",
     options: [
-      { label: "8", key: "8pt" },
-      { label: "9", key: "9pt" },
-      { label: "10", key: "10pt" },
-      { label: "11", key: "11pt" },
-      { label: "12", key: "12pt" },
-      { label: "14", key: "14pt" },
-      { label: "18", key: "18pt" },
-      { label: "24", key: "24pt" },
-      { label: "30", key: "30pt" },
-      { label: "36", key: "36pt" },
-      { label: "48", key: "48pt" },
-      { label: "60", key: "60pt" },
-      { label: "72", key: "72pt" },
-      { label: "96", key: "96pt" }
+      { label: "8", key: "8pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "9", key: "9pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "10", key: "10pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "11", key: "11pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "12", key: "12pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "14", key: "14pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "18", key: "18pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "24", key: "24pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "30", key: "30pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "36", key: "36pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "48", key: "48pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "60", key: "60pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "72", key: "72pt", props: { "data-item": "btn-fontSize-option" } },
+      { label: "96", key: "96pt", props: { "data-item": "btn-fontSize-option" } }
     ],
-    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);
+    onActivate: ({ fontSize: m }) => {
+      if (!m) return u.label.value = u.defaultLabel.value;
+      let E = jt(m, 12);
+      E < 8 && (E = 8), E > 96 && (E = 96), u.label.value = String(E);
     },
-    onDeactivate: () => l.label.value = l.defaultLabel.value
-  }), d = _({
+    onDeactivate: () => u.label.value = u.defaultLabel.value
+  }), r = x({
     type: "separator",
     name: "separator",
     isNarrow: !0
-  }), m = _({
+  }), w = x({
     type: "button",
     name: "italic",
     command: "toggleItalic",
-    icon: e.italic,
+    icon: s.italic,
     tooltip: "Italic"
-  }), s = _({
+  }), v = x({
     type: "button",
     name: "underline",
     command: "toggleUnderline",
-    icon: e.underline,
+    icon: s.underline,
     tooltip: "Underline"
-  }), b = _({
+  }), b = x({
     type: "dropdown",
     name: "highlight",
-    icon: e.highlight,
+    icon: s.highlight,
     hideLabel: !0,
     markName: "highlight",
     labelAttr: "color",
@@ -883,17 +905,17 @@ const _ = (t) => {
       {
         key: "color",
         type: "render",
-        render: () => Ve(t, b, [], !0)
+        render: () => We(e, b, [], !0)
       }
     ],
-    onActivate: ({ color: u }) => {
-      b.iconColor.value = u || "";
+    onActivate: ({ color: m }) => {
+      b.iconColor.value = m || "";
     },
     onDeactivate: () => b.iconColor.value = ""
-  }), v = _({
+  }), y = x({
     type: "dropdown",
     name: "color",
-    icon: e.color,
+    icon: s.color,
     hideLabel: !0,
     markName: "textStyle",
     labelAttr: "color",
@@ -904,88 +926,88 @@ const _ = (t) => {
       {
         key: "color",
         type: "render",
-        render: () => Ve(t, v)
+        render: () => We(e, y)
       }
     ],
-    onActivate: ({ color: u }) => {
-      v.iconColor.value = u;
+    onActivate: ({ color: m }) => {
+      y.iconColor.value = m;
     },
-    onDeactivate: () => v.iconColor.value = "#000"
-  }), y = f(null), E = _({
+    onDeactivate: () => y.iconColor.value = "#000"
+  }), g = h(null), L = x({
     type: "dropdown",
     name: "search",
-    icon: e.search,
+    icon: s.search,
     tooltip: "Search",
     group: "right",
-    inputRef: y,
+    inputRef: g,
     options: [
       {
         type: "render",
         key: "searchDropdown",
-        render: () => g()
+        render: () => D()
       }
     ]
-  }), g = () => B("div", {}, [
-    B(so, {
-      onSubmit: ({ value: S }) => {
-        t.activeEditor.commands.search(S);
+  }), D = () => $("div", {}, [
+    $(lo, {
+      onSubmit: ({ value: E }) => {
+        e.activeEditor.commands.search(E);
       },
-      searchRef: y
+      searchRef: g
     })
-  ]), F = _({
+  ]), p = x({
     type: "dropdown",
     name: "link",
     markName: "link",
-    icon: e.link,
+    icon: s.link,
     tooltip: "Link",
     options: [
       {
         type: "render",
         key: "linkDropdown",
-        render: () => $(F)
+        render: () => S(p)
       }
     ],
-    onActivate: ({ href: u }) => {
-      u ? F.attributes.value = { href: u } : F.attributes.value = {}, F.expand.value = !0;
+    onActivate: ({ href: m }) => {
+      m ? p.attributes.value = { href: m } : p.attributes.value = {}, p.expand.value = !0;
     },
     onDeactivate: () => {
-      F.attributes.value = {}, F.expand.value = !1;
+      p.attributes.value = {}, p.expand.value = !1;
     }
   });
-  function $(u) {
-    return B("div", {}, [
-      B(vn, {
+  function S(m) {
+    return $("div", {}, [
+      $(bn, {
         onSubmit: ({ href: A }) => {
-          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);
+          re(m), m.attributes.value.link = { href: A };
+          const V = { ...m, command: "toggleLink" };
+          e.emitCommand({ item: V, argument: { href: A, text: "" } }), A || (m.active.value = !1);
         },
-        href: u.attributes.value.href,
+        href: m.attributes.value.href,
         goToAnchor: () => {
-          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);
+          if (re(m), !e.activeEditor || !m.attributes.value?.href) return;
+          const A = m.attributes.value?.href?.slice(1), le = e.activeEditor.element.querySelector(`a[name='${A}']`);
+          le && Zt(le);
         }
       })
     ]);
   }
-  const p = _({
+  const F = x({
     type: "options",
     name: "linkInput",
     command: "toggleLink"
   });
-  F.childItem = p, p.parentItem = F;
-  const x = _({
+  p.childItem = F, F.parentItem = p;
+  const O = x({
     type: "button",
     name: "image",
     command: "startImageUpload",
-    icon: e.image,
+    icon: s.image,
     tooltip: "Image",
     disabled: !1
-  }), T = _({
+  }), W = x({
     type: "dropdown",
     name: "table",
-    icon: e.table,
+    icon: s.table,
     hideLabel: !0,
     labelAttr: "table",
     tooltip: "Insert table",
@@ -995,106 +1017,117 @@ const _ = (t) => {
       {
         key: "table",
         type: "render",
-        render: () => N(T)
+        render: () => ne(W)
       }
     ]
   });
-  function N(u) {
-    return B("div", {}, [
-      B(qn, {
+  function ne(m) {
+    return $("div", {}, [
+      $(Kn, {
         onSelect: (A) => {
-          t.emitCommand({ item: u, argument: A }), ae(u);
+          e.emitCommand({ item: m, argument: A }), re(m);
         }
       })
     ]);
   }
-  const V = _({
+  const ue = x({
     type: "dropdown",
     name: "tableActions",
     command: "executeTableCommand",
-    icon: e.tableActions,
+    icon: s.tableActions,
     hideLabel: !0,
     disabled: !0,
     options: [
       {
         type: "render",
-        render: () => ye(V)
+        render: () => ge(ue)
       }
     ]
-  }), te = [
+  }), ve = [
     {
       label: "Insert row above",
       command: "addRowBefore",
-      icon: e.addRowBefore
+      icon: s.addRowBefore,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Insert row below",
       command: "addRowAfter",
-      icon: e.addRowAfter
+      icon: s.addRowAfter,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Insert column left",
       command: "addColumnBefore",
-      icon: e.addColumnBefore
+      icon: s.addColumnBefore,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Insert column right",
       command: "addColumnAfter",
-      icon: e.addColumnAfter,
-      bottomBorder: !0
+      icon: s.addColumnAfter,
+      bottomBorder: !0,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Delete row",
       command: "deleteRow",
-      icon: e.deleteRow
+      icon: s.deleteRow,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Delete column",
       command: "deleteColumn",
-      icon: e.deleteColumn
+      icon: s.deleteColumn,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Delete table",
       command: "deleteTable",
-      icon: e.deleteTable
+      icon: s.deleteTable,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Transparent borders",
       command: "deleteCellAndTableBorders",
-      icon: e.deleteBorders,
-      bottomBorder: !0
+      icon: s.deleteBorders,
+      bottomBorder: !0,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Merge cells",
       command: "mergeCells",
-      icon: e.mergeCells
+      icon: s.mergeCells,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Split cell",
       command: "splitCell",
-      icon: e.splitCell
+      icon: s.splitCell,
+      props: { "data-item": "btn-tableActions-option" }
     },
     {
       label: "Fix tables",
       command: "fixTables",
-      icon: e.fixTables
+      icon: s.fixTables,
+      props: { "data-item": "btn-tableActions-option" }
     }
   ];
-  function ye(u) {
-    return B(Qn, {
-      options: te,
-      onSelect: (S) => {
-        ae(u);
-        const { command: A } = S;
-        t.emitCommand({ item: u, argument: { command: A } });
+  function ge(m) {
+    return $(to, {
+      options: ve,
+      onSelect: (E) => {
+        re(m);
+        const { command: A } = E;
+        e.emitCommand({ item: m, argument: { command: A } });
       }
     });
   }
-  const Z = _({
+  const Y = x({
     type: "dropdown",
     name: "textAlign",
     tooltip: "Alignment",
-    icon: e.alignLeft,
+    icon: s.alignLeft,
     command: "setTextAlign",
     hasCaret: !0,
     markName: "textAlign",
@@ -1103,65 +1136,65 @@ const _ = (t) => {
     options: [
       {
         type: "render",
-        render: () => B("div", {}, [
-          B(tn, {
-            onSelect: (S) => {
-              ae(Z);
-              const A = { ...Z, command: "setTextAlign" };
-              A.command = "setTextAlign", t.emitCommand({ item: A, argument: S }), re(Z, S);
+        render: () => $("div", {}, [
+          $(on, {
+            onSelect: (E) => {
+              re(Y);
+              const A = { ...Y, command: "setTextAlign" };
+              A.command = "setTextAlign", e.emitCommand({ item: A, argument: E }), T(Y, E);
             }
           })
         ]),
         key: "alignment"
       }
     ],
-    onActivate: ({ textAlign: u }) => {
-      re(Z, u);
+    onActivate: ({ textAlign: m }) => {
+      T(Y, m);
     },
     onDeactivate: () => {
-      re(Z, "left");
+      T(Y, "left");
     }
-  }), 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;
-    u.icon.value = le;
-  }, be = _({
+  }), T = (m, E) => {
+    let A = E === "both" ? "justify" : E, V = {
+      left: s.alignLeft,
+      right: s.alignRight,
+      center: s.alignCenter,
+      justify: s.alignJustify
+    }, le = V[A] ?? V.left;
+    m.icon.value = le;
+  }, B = x({
     type: "button",
     name: "list",
     command: "toggleBulletList",
-    icon: e.bulletList,
+    icon: s.bulletList,
     tooltip: "Bullet list"
-  }), I = _({
+  }), H = x({
     type: "button",
     name: "numberedlist",
     command: "toggleOrderedList",
-    icon: e.numberedList,
+    icon: s.numberedList,
     tooltip: "Numbered list"
-  }), M = _({
+  }), z = x({
     type: "button",
     name: "indentleft",
     command: "decreaseTextIndent",
-    icon: e.indentLeft,
+    icon: s.indentLeft,
     tooltip: "Left indent",
     disabled: !1
-  }), H = _({
+  }), G = x({
     type: "button",
     name: "indentright",
     command: "increaseTextIndent",
-    icon: e.indentRight,
+    icon: s.indentRight,
     tooltip: "Right indent",
     disabled: !1
-  }), R = _({
+  }), K = x({
     type: "overflow",
     name: "overflow",
     command: "toggleOverflow",
-    icon: e.overflow,
+    icon: s.overflow,
     disabled: !1
-  }), G = _({
+  }), ce = x({
     type: "dropdown",
     name: "zoom",
     allowWithoutEditor: !0,
@@ -1174,116 +1207,116 @@ const _ = (t) => {
     inlineTextInputVisible: !1,
     hasInlineTextInput: !0,
     options: [
-      { label: "50%", key: 0.5 },
-      { label: "75%", key: 0.75 },
-      { label: "90%", key: 0.9 },
-      { label: "100%", key: 1 },
-      { label: "125%", key: 1.25 },
-      { label: "150%", key: 1.5 },
-      { label: "200%", key: 2 }
+      { label: "50%", key: 0.5, props: { "data-item": "btn-zoom-option" } },
+      { label: "75%", key: 0.75, props: { "data-item": "btn-zoom-option" } },
+      { label: "90%", key: 0.9, props: { "data-item": "btn-zoom-option" } },
+      { label: "100%", key: 1, props: { "data-item": "btn-zoom-option" } },
+      { label: "125%", key: 1.25, props: { "data-item": "btn-zoom-option" } },
+      { label: "150%", key: 1.5, props: { "data-item": "btn-zoom-option" } },
+      { label: "200%", key: 2, props: { "data-item": "btn-zoom-option" } }
     ],
-    onActivate: ({ zoom: u }) => {
-      u && (G.label.value = u);
+    onActivate: ({ zoom: m }) => {
+      m && (ce.label.value = m);
     }
-  }), K = _({
+  }), se = x({
     type: "button",
     name: "undo",
     disabled: !0,
     tooltip: "Undo",
     command: "undo",
-    icon: e.undo,
+    icon: s.undo,
     group: "left",
     onDeactivate: () => {
-      K.disabled.value = !t.undoDepth;
+      se.disabled.value = !e.undoDepth;
     }
-  }), ce = _({
+  }), ke = x({
     type: "button",
     disabled: !0,
     name: "redo",
     tooltip: "Redo",
     command: "redo",
-    icon: e.redo,
+    icon: s.redo,
     group: "left",
     onDeactivate: () => {
-      ce.disabled.value = !t.redoDepth;
+      ke.disabled.value = !e.redoDepth;
     }
-  }), ue = _({
+  }), Ie = x({
     type: "button",
     disabled: !1,
     name: "toggleTrackChanges",
     tooltip: "Track Changes",
     command: "toggleTrackChanges",
-    icon: e.trackChanges,
+    icon: s.trackChanges,
     group: "left"
-  }), _e = _({
+  }), be = x({
     type: "button",
     disabled: !1,
     name: "acceptTrackedChangeBySelection",
     tooltip: "Accept changes under selection",
     command: "acceptTrackedChangeBySelection",
-    icon: e.trackChangesAccept,
+    icon: s.trackChangesAccept,
     group: "left"
-  }), xe = _({
+  }), _e = x({
     type: "button",
     disabled: !1,
     name: "rejectTrackedChangeOnSelection",
     tooltip: "Reject changes under selection",
     command: "rejectTrackedChangeOnSelection",
-    icon: e.trackChangesReject,
+    icon: s.trackChangesReject,
     group: "left"
-  }), Ee = _({
+  }), Le = x({
     type: "button",
     disabled: !1,
     name: "toggleTrackChangesShowOriginal",
     tooltip: "Toggle Show Original",
     command: "toggleTrackChangesShowOriginal",
-    icon: e.trackChangesOriginal,
+    icon: s.trackChangesOriginal,
     group: "left"
-  }), Fe = _({
+  }), Me = x({
     type: "button",
     disabled: !1,
     name: "toggleTrackChangesShowFinal",
     tooltip: "Toggle Show Final",
     command: "toggleTrackChangesShowFinal",
-    icon: e.trackChangesFinal,
+    icon: s.trackChangesFinal,
     group: "left"
-  }), Ie = _({
+  }), De = x({
     type: "button",
     name: "clearFormatting",
     command: "clearFormat",
     tooltip: "Clear formatting",
-    icon: e.clearFormatting
+    icon: s.clearFormatting
   });
   [
-    i,
-    m,
-    s,
-    H,
-    M,
-    E,
-    R
-  ].map((u) => u.name);
-  const Le = _({
+    a,
+    w,
+    v,
+    G,
+    z,
+    L,
+    K
+  ].map((m) => m.name);
+  const xe = x({
     type: "button",
     name: "copyFormat",
     tooltip: "Format painter",
-    icon: e.copyFormat,
+    icon: s.copyFormat,
     command: "copyFormat"
-  }), 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 = _({
+  }), Se = (m, E) => m === "editor" ? E : m === "suggester" ? E.filter((A) => A.value === "suggesting") : E.filter((A) => A.value === "viewing"), Ee = (m) => m === "editor" ? "Editing" : m === "suggester" ? "Suggesting" : "Viewing", X = x({
     type: "dropdown",
     name: "documentMode",
     command: "setDocumentMode",
     allowWithoutEditor: !0,
-    icon: e.documentMode,
-    defaultLabel: we(n),
-    label: we(n),
-    hasCaret: n === "editor",
+    icon: s.documentMode,
+    defaultLabel: Ee(i),
+    label: Ee(i),
+    hasCaret: i === "editor",
     isWide: !0,
     style: { display: "flex", justifyContent: "flex-end" },
     inlineTextInputVisible: !1,
     hasInlineTextInput: !1,
     group: "right",
-    disabled: n !== "editor",
+    disabled: i !== "editor",
     attributes: {
       dropdownPosition: "right",
       className: "toolbar-item--doc-mode"
@@ -1291,47 +1324,47 @@ const _ = (t) => {
     options: [
       {
         type: "render",
-        render: () => me(ne)
+        render: () => ye(X)
       }
     ]
-  }), De = [
+  }), ae = [
     {
       label: "Editing",
       value: "editing",
-      icon: e.documentEditingMode,
+      icon: s.documentEditingMode,
       description: "Edit document directly"
     },
     {
       label: "Suggesting",
       value: "suggesting",
-      icon: e.documentSuggestingMode,
+      icon: s.documentSuggestingMode,
       description: "Edits become suggestions"
     },
     {
       label: "Viewing",
       value: "viewing",
-      icon: e.documentViewingMode,
+      icon: s.documentViewingMode,
       description: "View clean version of document only"
     }
   ];
-  function me(u) {
-    const S = Me(n, De);
-    return B(En, {
-      options: S,
+  function ye(m) {
+    const E = Se(i, ae);
+    return $(An, {
+      options: E,
       onSelect: (A) => {
-        ae(u);
-        const { label: W, icon: le } = A;
-        ne.label.value = W, ne.icon.value = le, t.emitCommand({ item: ne, argument: W });
+        re(m);
+        const { label: V, icon: le } = A;
+        X.label.value = V, X.icon.value = le, e.emitCommand({ item: X, argument: V });
       }
     });
   }
-  const se = _({
+  const ut = x({
     type: "button",
     name: "pageBreakTool",
     command: "insertPageBreak",
-    icon: e.pageBreak,
+    icon: s.pageBreak,
     tooltip: "Insert page break"
-  }), pe = /* @__PURE__ */ new Map([
+  }), je = /* @__PURE__ */ new Map([
     ["separator", 20],
     ["zoom", 71],
     ["fontFamily", 118],
@@ -1341,17 +1374,17 @@ const _ = (t) => {
     ["documentMode", 47],
     ["ai", 32],
     ["default", 32]
-  ]), dt = _({
+  ]), mt = x({
     type: "button",
     name: "ruler",
     command: "toggleRuler",
-    icon: e.ruler,
+    icon: s.ruler,
     tooltip: "Show or hide ruler"
-  }), Ce = _({
+  }), we = x({
     type: "dropdown",
     name: "linkedStyles",
     command: "setLinkedStyle",
-    icon: e.paintbrush,
+    icon: s.paintbrush,
     defaultLabel: "Format text",
     label: "Format text",
     hasCaret: !0,
@@ -1367,34 +1400,34 @@ const _ = (t) => {
         type: "render",
         key: "linkedStyle",
         render: () => {
-          const u = (S) => {
-            ae(Ce);
-            const A = { ...Ce, command: "setLinkedStyle" };
-            t.emitCommand({ item: A, argument: S });
+          const m = (E) => {
+            re(we);
+            const A = { ...we, command: "setLinkedStyle" };
+            e.emitCommand({ item: A, argument: E });
           };
-          return B("div", {}, [
-            B(Fn, {
-              editor: t.activeEditor,
-              onSelect: u
+          return $("div", {}, [
+            $(Ln, {
+              editor: e.activeEditor,
+              onSelect: m
             })
           ]);
         }
       }
     ],
     onActivate: () => {
-      Ce.disabled.value = !1;
+      we.disabled.value = !1;
     },
     onDeactivate: () => {
-      Ce.disabled.value = !0;
+      we.disabled.value = !0;
     }
-  }), he = (u, S) => {
-    if (S.value.toString() === u)
-      return B("div", { innerHTML: eo, class: "dropdown-select-icon" });
-  }, de = _({
+  }), me = (m, E) => {
+    if (E.value.toString() === m)
+      return $("div", { innerHTML: no, class: "dropdown-select-icon" });
+  }, de = x({
     type: "dropdown",
     name: "lineHeight",
     tooltip: "Line height",
-    icon: e.lineHeight,
+    icon: s.lineHeight,
     hasCaret: !1,
     hasInlineTextInput: !1,
     inlineTextInputVisible: !1,
@@ -1404,193 +1437,196 @@ const _ = (t) => {
     dropdownValueKey: "key",
     selectedValue: "1",
     options: [
-      { label: "1,0", key: "1", icon: () => he("1", de.selectedValue) },
-      { label: "1,15", key: "1.15", icon: () => he("1.15", de.selectedValue) },
-      { label: "1,5", key: "1.5", icon: () => he("1.5", de.selectedValue) },
-      { label: "2,0", key: "2", icon: () => he("2", de.selectedValue) },
-      { label: "2,5", key: "2.5", icon: () => he("2.5", de.selectedValue) },
-      { label: "3,0", key: "3", icon: () => he("3", de.selectedValue) }
+      { label: "1,0", key: "1", icon: () => me("1", de.selectedValue), props: { "data-item": "btn-lineHeight-option" } },
+      { label: "1,15", key: "1.15", icon: () => me("1.15", de.selectedValue), props: { "data-item": "btn-lineHeight-option" } },
+      { label: "1,5", key: "1.5", icon: () => me("1.5", de.selectedValue), props: { "data-item": "btn-lineHeight-option" } },
+      { label: "2,0", key: "2", icon: () => me("2", de.selectedValue), props: { "data-item": "btn-lineHeight-option" } },
+      { label: "2,5", key: "2.5", icon: () => me("2.5", de.selectedValue), props: { "data-item": "btn-lineHeight-option" } },
+      { label: "3,0", key: "3", icon: () => me("3", de.selectedValue), props: { "data-item": "btn-lineHeight-option" } }
     ]
-  }), $e = {
+  }), Be = {
     sm: 768,
     md: 1024,
     xl: 1410
-  }, ut = 120, mt = 32, pt = ["linkedStyles", "clearFormatting", "copyFormat", "ruler"], ht = ["zoom", "fontFamily", "fontSize", "redo"];
-  let O = [
-    K,
-    ce,
+  }, pt = 120, ft = 32, ht = ["linkedStyles", "clearFormatting", "copyFormat", "ruler"], vt = ["zoom", "fontFamily", "fontSize", "redo"];
+  let R = [
+    se,
+    ke,
     // Dev - tracked changes
     // toggleTrackChanges,
+    be,
     _e,
-    xe,
     // toggleTrackChangesOriginal,
     // toggleTrackChangesFinal,
-    G,
-    c,
-    d,
+    ce,
     l,
-    d,
-    i,
-    m,
-    s,
+    r,
+    u,
+    r,
+    a,
+    w,
     v,
+    y,
     b,
-    d,
-    F,
-    x,
-    T,
-    V,
-    d,
-    Z,
-    be,
-    I,
-    M,
+    r,
+    p,
+    O,
+    W,
+    ue,
+    r,
+    Y,
+    B,
     H,
+    z,
+    G,
     de,
+    r,
+    we,
+    r,
+    mt,
+    ut,
+    xe,
+    De,
     d,
-    Ce,
-    d,
-    dt,
-    se,
-    Le,
-    Ie,
-    a,
-    R,
-    ne
+    K,
+    X
   ];
-  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));
+  if (e.config?.superdoc?.config?.modules?.ai || (R = R.filter((m) => m.name.value !== "ai")), o <= Be.md && n && (R = R.filter((m) => m.type !== "separator")), e.config.pagination || (R = R.filter((m) => m.name.value !== "pageBreakTool")), e.config.mode !== "docx") {
+    const m = R.findIndex((A) => A.name.value === "linkedStyles");
+    R.splice(m - 1, 2);
+    const E = ["ruler", "zoom", "undo", "redo"];
+    R = R.filter((A) => !E.includes(A.name.value));
   }
-  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((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);
+  const Ue = [Ie, Le, Me];
+  c || (i === "viewer" && Ue.push(be, _e), R = R.filter((m) => !Ue.includes(m)));
+  const gt = [L, se, K, X].map((m) => m.name), bt = (m) => gt.includes(m.name), Ae = [], He = [];
+  let $e = ft + pt;
+  return R.forEach((m) => {
+    const E = je.get(m.name.value) || je.get("default");
+    if (o < Be.xl && ht.includes(m.name.value) && n) {
+      if (Ae.push(m), m.name.value === "linkedStyles") {
+        const A = R.findIndex((V) => V.name.value === "linkedStyles");
+        R.splice(A + 1, 1);
       }
       return;
     }
-    if (o < $e.sm && ht.includes(u.name.value)) {
-      Se.push(u);
+    if (o < Be.sm && vt.includes(m.name.value) && n) {
+      Ae.push(m);
       return;
     }
-    if (vt(u)) {
-      He.push(u), Be += S;
+    if (bt(m)) {
+      He.push(m), $e += E;
       return;
     }
-    Be < o ? (He.push(u), Be += S) : Se.push(u);
+    $e < o || !n ? (He.push(m), $e += E) : Ae.push(m);
   }), {
     defaultItems: He,
-    overflowItems: Se.filter((u) => u.type !== "separator")
+    overflowItems: Ae.filter((m) => m.type !== "separator")
   };
-}, ao = [".jpg", ".jpeg", ".png", "image/jpeg", "image/png"], ro = () => {
-  let t = document.createElement("input");
-  t.type = "file";
-  let r = ao;
-  return t.accept = r.join(","), () => new Promise((n, e) => {
-    t.onchange = async () => {
-      const i = t.files;
+}, uo = [".jpg", ".jpeg", ".png", "image/jpeg", "image/png"], mo = () => {
+  let e = document.createElement("input");
+  e.type = "file";
+  let s = uo;
+  return e.accept = s.join(","), () => new Promise((n, o) => {
+    e.onchange = async () => {
+      const i = e.files;
       if (!i) return n(null);
       const c = i.item(0);
       return n(c ? { file: c } : null);
-    }, t.oncancel = () => n(null), t.onerror = e, t.click();
+    }, e.oncancel = () => n(null), e.onerror = o, e.click();
   });
-}, co = (t) => new Promise((r, o) => {
+}, po = (e) => new Promise((s, t) => {
   let n = new FileReader();
-  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: c, height: a } = mo(
-      e.width,
-      e.height,
-      r
+  n.onload = (o) => s(o.target.result), n.onerror = t, setTimeout(() => n.readAsDataURL(e), 250);
+}), fo = (e, s) => new Promise((t, n) => {
+  const o = new window.Image();
+  o.onload = () => {
+    const i = document.createElement("canvas"), { width: c, height: a } = ho(
+      o.width,
+      o.height,
+      s
     );
-    if (i.width = c, i.height = a, i.getContext("2d").drawImage(e, 0, 0, c, a), typeof t == "string") {
+    if (i.width = c, i.height = a, i.getContext("2d").drawImage(o, 0, 0, c, a), typeof e == "string") {
       const d = i.toDataURL();
-      o(d);
+      t(d);
     } else
       i.toBlob((d) => {
-        const m = new File([d], t.name, {
-          type: t.type,
+        const u = new File([d], e.name, {
+          type: e.type,
           lastModified: Date.now()
         });
-        o({ file: m, width: c, height: a });
+        t({ file: u, width: c, height: a });
       });
-  }, e.onerror = (i) => n(i), e.src = typeof t == "string" ? t : URL.createObjectURL(t);
-}), mo = (t, r, o) => {
-  const { width: n, height: e } = o.getMaxContentSize();
-  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) {
+  }, o.onerror = (i) => n(i), o.src = typeof e == "string" ? e : URL.createObjectURL(e);
+}), ho = (e, s, t) => {
+  const { width: n, height: o } = t.getMaxContentSize();
+  if (!n || !o) return { width: e, height: s };
+  let i = e, c = s;
+  const a = e / s;
+  return s > o && (c = o, i = Math.round(o * a)), i > n && (i = n, c = Math.round(n / a)), { width: i, height: c };
+}, vo = async ({ editor: e, view: s, file: t }) => {
+  let n = typeof e.options.handleImageUpload == "function" ? e.options.handleImageUpload : po;
+  if ((t.size / (1024 * 1024)).toFixed(4) > 5) {
     window.alert("Image size must be less than 5MB");
     return;
   }
   let i, c;
   try {
-    const s = await uo(o, t);
-    i = s.width, c = s.height, o = s.file;
-  } catch (s) {
-    console.warn("Error processing image:", s);
+    const r = await fo(t, e);
+    i = r.width, c = r.height, t = r.file;
+  } catch (r) {
+    console.warn("Error processing image:", r);
     return;
   }
-  let a = {}, { tr: l, schema: d } = r.state;
+  let a = {}, { tr: l, schema: d } = s.state;
   l.selection.empty || l.deleteSelection();
-  let m = {
+  let u = {
     type: "add",
     pos: l.selection.from,
     id: a
   };
-  l.setMeta(Ne, m), r.dispatch(l), n(o).then(
-    (s) => {
-      let b = o.name.replace(" ", "_"), v = Ct(r.state, a);
+  l.setMeta(Oe, u), s.dispatch(l), n(t).then(
+    (r) => {
+      let w = t.name.replace(" ", "_"), v = _t(s.state, a);
       if (v == null)
         return;
-      let y = { type: "remove", id: a }, E = `word/media/${b}`, g = d.nodes.image.create({
-        src: E,
+      let b = { type: "remove", id: a }, y = `word/media/${w}`, g = d.nodes.image.create({
+        src: y,
         size: { width: i, height: c }
       });
-      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)
+      e.storage.image.media = Object.assign(e.storage.image.media, { [y]: r }), e.options.ydoc && e.commands.addImageToCollaboration({ mediaPath: y, fileData: r }), s.dispatch(
+        s.state.tr.replaceWith(v, v, g).setMeta(Oe, b)
       );
     },
     () => {
-      let s = { type: "remove", id: a };
-      r.dispatch(l.setMeta(Ne, s));
+      let r = { type: "remove", id: a };
+      s.dispatch(l.setMeta(Oe, r));
     }
   );
 };
-var L, lt, ve, We, at, rt, Pe, ct, fe;
-class Mo extends qt {
+var I, lt, fe, Ve, rt, ct, Pe, dt, pe;
+class Ho extends Kt {
   /**
    * Creates a new SuperToolbar instance
    * @param {ToolbarConfig} config - The configuration for the toolbar
    * @returns {void}
    */
-  constructor(o) {
+  constructor(t) {
     super();
-    Oe(this, L);
+    Re(this, I);
     /**
      * Default configuration for the toolbar
      * @type {ToolbarConfig}
      */
-    Re(this, "config", {
+    ze(this, "config", {
       selector: null,
       toolbarGroups: ["left", "center", "right"],
       role: "editor",
       pagination: !1,
-      icons: { ...X },
+      icons: { ...Z },
+      fonts: null,
+      hideButtons: !0,
+      responsiveToContainer: !1,
       mode: "docx",
       excludeItems: [],
       groups: null,
@@ -1604,7 +1640,7 @@ class Mo extends qt {
      * @private
      * @type {Object.<string, function(CommandItem): void>}
      */
-    Oe(this, ve, {
+    Re(this, fe, {
       /**
        * Handles zoom level changes
        * @param {Object} params - Command parameters
@@ -1612,13 +1648,13 @@ class Mo extends qt {
        * @param {string|number} params.argument - The zoom level (percentage)
        * @returns {void}
        */
-      setZoom: ({ item: o, argument: n }) => {
+      setZoom: ({ item: t, 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;
+        t.onActivate({ zoom: n }), this.emit("superdoc-command", { item: t, argument: n });
+        const o = document.querySelector(this.superdoc.config.selector)?.querySelector(".layers");
+        if (!o) return;
         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);
+        i && c ? (o.style.transformOrigin = "0 0", o.style.transform = `scale(${parseInt(n) / 100})`) : o.style.zoom = parseInt(n) / 100, this.superdoc.superdocStore.activeZoom = parseInt(n);
       },
       /**
        * Sets the document mode
@@ -1627,8 +1663,8 @@ class Mo extends qt {
        * @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 });
+      setDocumentMode: ({ item: t, argument: n }) => {
+        n && this.emit("superdoc-command", { item: t, argument: n });
       },
       /**
        * Sets the font size for text
@@ -1637,8 +1673,8 @@ class Mo extends qt {
        * @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 }, () => {
+      setFontSize: ({ item: t, argument: n }) => {
+        N(this, I, pe).call(this, { item: t, argument: n }, () => {
           this.activeEditor?.commands.setFieldAnnotationsFontSize(n, !0);
         });
       },
@@ -1649,8 +1685,8 @@ class Mo extends qt {
        * @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 }, () => {
+      setFontFamily: ({ item: t, argument: n }) => {
+        N(this, I, pe).call(this, { item: t, argument: n }, () => {
           this.activeEditor?.commands.setFieldAnnotationsFontFamily(n, !0);
         });
       },
@@ -1661,8 +1697,8 @@ class Mo extends qt {
        * @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 }, () => {
+      setColor: ({ item: t, argument: n }) => {
+        N(this, I, pe).call(this, { item: t, argument: n }, () => {
           this.activeEditor?.commands.setFieldAnnotationsTextColor(n, !0);
         });
       },
@@ -1673,10 +1709,10 @@ class Mo extends qt {
        * @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, noArgumentCallback: !0 }, () => {
-          let e = n !== "none" ? n : null;
-          this.activeEditor?.commands.setFieldAnnotationsTextHighlight(e, !0), this.activeEditor?.commands.setCellBackground(e);
+      setHighlight: ({ item: t, argument: n }) => {
+        N(this, I, pe).call(this, { item: t, argument: n, noArgumentCallback: !0 }, () => {
+          let o = n !== "none" ? n : null;
+          this.activeEditor?.commands.setFieldAnnotationsTextHighlight(o, !0), this.activeEditor?.commands.setCellBackground(o);
         });
       },
       /**
@@ -1684,7 +1720,7 @@ class Mo extends qt {
        * @param {Object} [_params=null] - Command parameters (not used)
        * @returns {void}
        */
-      toggleRuler: (o = null) => {
+      toggleRuler: (t = null) => {
         this.superdoc.toggleRuler();
       },
       /**
@@ -1693,12 +1729,12 @@ class Mo extends qt {
        * @param {Object} [_params=null - Command parameters (not used)
        * @returns {Promise<void>}
        */
-      startImageUpload: async (o = null) => {
-        let e = await ro()();
-        e?.file && po({
+      startImageUpload: async (t = null) => {
+        let o = await mo()();
+        o?.file && vo({
           editor: this.activeEditor,
           view: this.activeEditor.view,
-          file: e.file
+          file: o.file
         });
       },
       /**
@@ -1708,11 +1744,11 @@ class Mo extends qt {
        * @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))
+      increaseTextIndent: ({ item: t, argument: n }) => {
+        let o = t.command, { state: i } = this.activeEditor;
+        if (Ke((a) => a.type.name === "listItem")(i.selection))
           return this.activeEditor.commands.increaseListIndent();
-        e in this.activeEditor.commands && this.activeEditor.commands[e](n);
+        o in this.activeEditor.commands && this.activeEditor.commands[o](n);
       },
       /**
        * Decreases text indentation or list level
@@ -1721,11 +1757,11 @@ class Mo extends qt {
        * @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))
+      decreaseTextIndent: ({ item: t, argument: n }) => {
+        let o = t.command, { state: i } = this.activeEditor;
+        if (Ke((a) => a.type.name === "listItem")(i.selection))
           return this.activeEditor.commands.decreaseListIndent();
-        e in this.activeEditor.commands && this.activeEditor.commands[e](n);
+        o in this.activeEditor.commands && this.activeEditor.commands[o](n);
       },
       /**
        * Toggles bold formatting for text
@@ -1734,9 +1770,9 @@ class Mo extends qt {
        * @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();
+      toggleBold: ({ item: t, argument: n }) => {
+        let o = t.command;
+        o in this.activeEditor.commands && (this.activeEditor.commands[o](n), this.activeEditor.commands.toggleFieldAnnotationsFormat("bold", !0)), this.updateToolbarState();
       },
       /**
        * Toggles italic formatting for text
@@ -1745,9 +1781,9 @@ class Mo extends qt {
        * @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();
+      toggleItalic: ({ item: t, argument: n }) => {
+        let o = t.command;
+        o in this.activeEditor.commands && (this.activeEditor.commands[o](n), this.activeEditor.commands.toggleFieldAnnotationsFormat("italic", !0)), this.updateToolbarState();
       },
       /**
        * Toggles underline formatting for text
@@ -1756,9 +1792,9 @@ class Mo extends qt {
        * @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();
+      toggleUnderline: ({ item: t, argument: n }) => {
+        let o = t.command;
+        o in this.activeEditor.commands && (this.activeEditor.commands[o](n), this.activeEditor.commands.toggleFieldAnnotationsFormat("underline", !0)), this.updateToolbarState();
       },
       /**
        * Toggles link formatting and updates cursor position
@@ -1767,11 +1803,11 @@ class Mo extends qt {
        * @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, 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);
+      toggleLink: ({ item: t, argument: n }) => {
+        let o = t.command;
+        if (o in this.activeEditor.commands) {
+          this.activeEditor.commands[o](n);
+          const { view: i } = this.activeEditor, c = i.state.selection.$to.pos, a = new Je(i.state.doc.resolve(c)), l = i.state.tr.setSelection(a), d = i.state.apply(l);
           i.updateState(d), setTimeout(() => {
             i.focus();
           }, 100);
@@ -1785,8 +1821,8 @@ class Mo extends qt {
        * @param {Object} params.argument - Table configuration
        * @returns {void}
        */
-      insertTable: ({ item: o, argument: n }) => {
-        z(this, L, fe).call(this, { item: o, argument: n });
+      insertTable: ({ item: t, argument: n }) => {
+        N(this, I, pe).call(this, { item: t, argument: n });
       },
       /**
        * Executes a table-related command
@@ -1796,70 +1832,80 @@ class Mo extends qt {
        * @param {string} params.argument.command - The specific table command to execute
        * @returns {void}
        */
-      executeTableCommand: ({ item: o, argument: n }) => {
+      executeTableCommand: ({ item: t, argument: n }) => {
         if (!n) return;
-        let e = n.command;
-        e in this.activeEditor.commands && this.activeEditor.commands[e](n), this.updateToolbarState();
+        let o = n.command;
+        o in this.activeEditor.commands && this.activeEditor.commands[o](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);
+    ze(this, "onToolbarResize", () => {
+      N(this, I, Ve).call(this, {
+        superToolbar: this,
+        icons: this.config.icons,
+        fonts: this.config.fonts,
+        hideButtons: this.config.hideButtons,
+        isDev: this.isDev
+      }), this.role === "viewer" && N(this, I, Pe).call(this);
     });
-    this.config = { ...this.config, ...o }, this.toolbarItems = [], this.overflowItems = [], this.documentMode = o.documentMode || "editing", this.isDev = o.isDev || !1, this.superdoc = o.superdoc, this.role = o.role || "editor", this.config.editor && (this.config.mode = this.config.editor.options.mode), this.config.icons = {
-      ...X,
-      ...o.icons
-    }, !this.config.selector && this.config.element && (this.config.selector = this.config.element), z(this, L, lt).call(this), z(this, L, We).call(this, this, this.config.icons, o.isDev);
+    this.config = { ...this.config, ...t }, this.toolbarItems = [], this.overflowItems = [], this.documentMode = t.documentMode || "editing", this.isDev = t.isDev || !1, this.superdoc = t.superdoc, this.role = t.role || "editor", this.toolbarContainer = null, this.config.editor && (this.config.mode = this.config.editor.options.mode), this.config.icons = {
+      ...Z,
+      ...t.icons
+    }, this.config.hideButtons = t.hideButtons ?? !0, this.config.responsiveToContainer = t.responsiveToContainer ?? !1, !this.config.selector && this.config.element && (this.config.selector = this.config.element), this.toolbarContainer = this.getElementBySelector(this.config.selector), this.toolbarContainer && (N(this, I, lt).call(this), N(this, I, Ve).call(this, {
+      superToolbar: this,
+      icons: this.config.icons,
+      fonts: this.config.fonts,
+      hideButtons: this.config.hideButtons,
+      isDev: t.isDev
+    }), this.app = Wt(Ut), this.app.directive("click-outside", zt), this.app.config.globalProperties.$toolbar = this, this.toolbarContainer && (this.toolbar = this.app.mount(this.toolbarContainer)), this.activeEditor = t.editor || null, this.updateToolbarState());
+  }
+  getElementBySelector(t) {
     let n = null;
-    if (this.config.selector && (this.config.selector.startsWith("#") || this.config.selector.startsWith(".") ? n = document.querySelector(this.config.selector) : n = document.getElementById(this.config.selector), !n)) {
-      console.warn(`[super-toolbar 🎨] Element not found: ${this.config.selector}`);
-      return;
-    }
-    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();
+    return t && (t.startsWith("#") || t.startsWith(".") ? n = document.querySelector(t) : n = document.getElementById(t), !n) ? (console.warn(`[super-toolbar 🎨] Element not found: ${t}`), null) : n;
   }
   /**
    * Log debug information to the console
    * @param {...*} args - Arguments to log
    * @returns {void}
    */
-  log(...o) {
-    console.debug("[🎨 super-toolbar]", ...o);
+  log(...t) {
+    console.debug("[🎨 super-toolbar]", ...t);
   }
   /**
    * 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 });
+  setZoom(t) {
+    const o = [...this.toolbarItems, ...this.overflowItems].find((i) => i.name.value === "zoom");
+    Te(this, fe).setZoom({ item: o, argument: t });
   }
   /**
    * The toolbar expects an active Super Editor instance.
    * @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));
+  setActiveEditor(t) {
+    this.activeEditor = t, 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 || "center") === o);
+  getToolbarItemByGroup(t) {
+    return this.toolbarItems.filter((n) => (n.group?.value || "center") === t);
   }
   /**
    * 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);
+  getToolbarItemByName(t) {
+    return this.toolbarItems.find((n) => n.name.value === t);
   }
   /**
    * Update the toolbar state based on the current editor state
@@ -1867,33 +1913,33 @@ class Mo extends qt {
    * @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);
+    if (N(this, I, dt).call(this), N(this, I, rt).call(this), N(this, I, ct).call(this), !this.activeEditor || this.documentMode === "viewing") {
+      N(this, I, Pe).call(this);
       return;
     }
-    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((l) => l.name === e.name.value);
-      i ? e.activate(i.attrs) : e.deactivate();
-      const c = o.find((l) => l.name === "styleId");
+    const t = xt(this.activeEditor), n = St(this.activeEditor.state);
+    this.toolbarItems.forEach((o) => {
+      if (o.resetDisabled(), o.name.value === "linkedStyles")
+        return this.activeEditor && !Ye(this.activeEditor).length ? o.deactivate() : o.activate();
+      const i = t.find((l) => l.name === o.name.value);
+      i ? o.activate(i.attrs) : o.deactivate();
+      const c = t.find((l) => l.name === "styleId");
       if (c?.attrs.styleId) {
         const l = {
           fontSize: "font-size",
           fontFamily: "font-family",
           bold: "bold",
           textAlign: "textAlign"
-        }, 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]]
+        }, d = this.activeEditor.converter?.linkedStyles.find((u) => u.id === c.attrs.styleId);
+        if (l[o.name.value] in d?.definition.styles) {
+          const u = {
+            [o.name.value]: d?.definition.styles[l[o.name.value]]
           };
-          e.activate(m);
+          o.activate(u);
         }
       }
-      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);
+      const a = t.find((l) => l.name === "spacing");
+      o.name.value === "lineHeight" && (i?.attrs?.lineHeight || a) && (o.selectedValue.value = i?.attrs?.lineHeight || a.attrs?.spacing?.line || ""), o.name.value === "tableActions" && (o.disabled.value = !n);
     });
   }
   /**
@@ -1903,7 +1949,7 @@ class Mo extends qt {
    * @param {Object} params.transaction - The transaction object
    * @returns {void}
    */
-  onEditorTransaction({ editor: o, transaction: n }) {
+  onEditorTransaction({ editor: t, transaction: n }) {
     !n.docChanged && !n.selectionSet || this.updateToolbarState();
   }
   /**
@@ -1913,94 +1959,109 @@ class Mo extends qt {
    * @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 }) {
+  emitCommand({ item: t, argument: n, option: o }) {
     this.activeEditor?.focus();
-    const { command: i } = o;
+    const { command: i } = t;
     if (i) {
       if (this.log("(emmitCommand) Command:", i, `
-	item:`, o, `
+	item:`, t, `
 	argument:`, n, `
-	option:`, e), i in Ae(this, ve))
-        return Ae(this, ve)[i]({ item: o, argument: n });
+	option:`, o), i in Te(this, fe))
+        return Te(this, fe)[i]({ item: t, 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 });
+        i({ item: t, argument: n, option: o });
       else
         throw new Error(`[super-toolbar 🎨] Command not found: ${i}`);
       this.updateToolbarState();
     }
   }
 }
-L = new WeakSet(), /**
+I = 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(), /**
+}, fe = 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
+ * @param {SuperToolbar} options.superToolbar - The toolbar instance
+ * @param {Object} options.icons - Icons to use for toolbar items
+ * @param {Array} options.fonts - Fonts for the toolbar item
+ * @param {boolean} options.isDev - 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)
+Ve = function({
+  superToolbar: t,
+  icons: n,
+  fonts: o,
+  hideButtons: i,
+  isDev: c = !1
+} = {}) {
+  const a = document.documentElement.clientWidth, l = this.toolbarContainer.offsetWidth, d = this.config.responsiveToContainer ? l : a, { defaultItems: u, overflowItems: r } = co({
+    superToolbar: t,
+    toolbarIcons: n,
+    toolbarFonts: o,
+    hideButtons: i,
+    availableWidth: d,
+    role: this.role,
+    isDev: c
+  }), w = this.config.customButtons || [];
+  w.length && u.push(...w.map((y) => x({ ...y })));
+  let v = [
+    ...u.map((y) => y.name.value),
+    ...r.map((y) => y.name.value)
   ];
-  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));
+  this.config.groups && (v = Object.values(this.config.groups).flatMap((y) => y));
+  const b = u.filter((y) => v.includes(y.name.value)).filter((y) => !this.config.excludeItems.includes(y.name.value));
+  this.toolbarItems = b, this.overflowItems = r.filter((y) => v.includes(y.name.value));
 }, /**
  * Initialize default fonts from the editor
  * @private
  * @returns {void}
  */
-at = function() {
+rt = function() {
   if (!this.activeEditor || !this.activeEditor.converter) return;
-  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 { typeface: t = "Arial", fontSizePt: n = 12 } = this.activeEditor.converter.getDocumentDefaultStyles() ?? {}, o = this.toolbarItems.find((c) => c.name.value === "fontSize");
+  o && (o.defaultLabel.value = n);
   const i = this.toolbarItems.find((c) => c.name.value === "fontFamily");
-  i && (i.defaultLabel.value = o);
+  i && (i.defaultLabel.value = t);
 }, /**
  * Update highlight color options based on document colors
  * @private
  * @returns {void}
  */
-rt = function() {
+ct = 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, l, d) => {
-    const m = Math.floor(d / e);
-    return a[m] || (a[m] = []), n.includes(l) || a[m].push(h(l)), a;
+  const t = this.toolbarItems.find((a) => a.name.value === "highlight"), n = Pn(), o = 7, i = Array.from(this.activeEditor.converter.docHiglightColors).reduce((a, l, d) => {
+    const u = Math.floor(d / o);
+    return a[u] || (a[u] = []), n.includes(l) || a[u].push(f(l)), a;
   }, []), c = {
     key: "color",
     type: "render",
-    render: () => Ve(this, o, i, !0)
+    render: () => We(this, t, i, !0)
   };
-  o.nestedOptions.value = [c];
+  t.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);
+  this.activeEditor = null, this.toolbarItems.forEach((t) => {
+    const { allowWithoutEditor: n } = t;
+    n.value || t.setDisabled(!0);
   });
 }, /**
  * 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));
+dt = function() {
+  this.activeEditor && (this.undoDepth = Et(this.activeEditor.state), this.redoDepth = At(this.activeEditor.state));
 }, /**
  * Run a command that requires an argument
  * @private
@@ -2011,48 +2072,48 @@ ct = function() {
  * @param {Function} [callback] - Optional callback to run after the command
  * @returns {void}
  */
-fe = function({ item: o, argument: n, noArgumentCallback: e = !1 }, i) {
+pe = function({ item: t, argument: n, noArgumentCallback: o = !1 }, i) {
   if (!n || !this.activeEditor) return;
-  let c = o.command;
-  const a = o.noArgumentCommand;
+  let c = t.command;
+  const a = t.noArgumentCommand;
   if (n === "none" && a in this.activeEditor?.commands) {
-    this.activeEditor.commands[a](), typeof i == "function" && e && i(n), this.updateToolbarState();
+    this.activeEditor.commands[a](), typeof i == "function" && o && i(n), this.updateToolbarState();
     return;
   }
   c in this.activeEditor?.commands && (this.activeEditor.commands[c](n), typeof i == "function" && i(n), this.updateToolbarState());
 };
-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");
+function go(e, s) {
+  if (!e.value || !s?.value?.options?.scale) return;
+  const t = s.value.options.scale, n = e.value.getBoundingClientRect(), o = e.value.querySelectorAll(".pagination-break-wrapper");
   let i;
-  e.forEach((c) => {
-    const l = (c.getBoundingClientRect().left - n.left) / o * -1 + 1;
+  o.forEach((c) => {
+    const l = (c.getBoundingClientRect().left - n.left) / t * -1 + 1;
     if (i || (i = l), l !== i) {
       const d = l - i;
       c.style.transform = `translateX(${d}px)`;
     }
   });
 }
-const fo = (t, r) => {
-  const o = t.clientY, n = t.clientX, { view: e } = r, i = e.dom.getBoundingClientRect();
+const bo = (e, s) => {
+  const t = e.clientY, n = e.clientX, { view: o } = s, i = o.dom.getBoundingClientRect();
   let c = {
     left: 0,
-    top: o
+    top: t
   }, a = !1;
   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;
+  const l = o.posAtCoords(c)?.pos;
   if (l) {
     let d = l;
     if (a) {
-      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 w = o.state.doc.resolve(l).textOffset, v = o.state.doc.nodeAt(l), y = v?.text?.charAt(w);
+      d = v?.isText && y !== " " ? l - 1 : l;
     }
-    const m = e.state.tr.setSelection(
-      Ye.create(e.state.doc, d)
+    const u = o.state.tr.setSelection(
+      Je.create(o.state.doc, d)
     );
-    e.dispatch(m), e.focus();
+    o.dispatch(u), o.focus();
   }
-}, vo = { class: "numbering" }, Te = 200, go = "flex-end", yo = {
+}, yo = { class: "numbering" }, Fe = 200, wo = "flex-end", Co = {
   __name: "Ruler",
   props: {
     orientation: {
@@ -2069,116 +2130,116 @@ const fo = (t, r) => {
     }
   },
   emits: ["margin-change"],
-  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);
+  setup(e, { emit: s }) {
+    const t = s, n = e, o = h(null), i = h([]), c = h("#CCCCCC"), a = h("#2563EB66"), l = h(null), d = h(null), u = h(!1), r = h(null), w = Xe({ side: "left", x: 0 }), v = Xe({ side: "right", x: 0 }), b = h(!1), y = h(0);
     let g = 0;
-    const F = () => {
+    const L = () => {
       if (n.editor.options.mode !== "docx") return;
-      const I = [], { pageMargins: M, pageSize: H } = n.editor.getPageStyles();
-      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;
-        I.push(...$(3, "eighth", "10%", K));
+      const T = [], { pageMargins: B, pageSize: H } = n.editor.getPageStyles();
+      l.value = H, d.value = B, v.x = H.width * 96 - B.right * 96, w.x = B.left * 96;
+      for (let z = 0; z < H.width; z++) {
+        const K = `${5.5}px`, ce = H.width - z;
+        if (T.push(...D(1, "main", "20%", K, z)), T.push(...D(3, "eighth", "10%", K)), T.push(...D(1, "half", "40%", K)), ce <= 0.5) break;
+        T.push(...D(3, "eighth", "10%", K));
       }
-      return I;
-    }, $ = (I, M, H, R, G) => Array.from({ length: I }, (K, ce) => {
-      const ue = {
-        className: `${M}-unit ruler-section`,
+      return T;
+    }, D = (T, B, H, z, G) => Array.from({ length: T }, (K, ce) => {
+      const se = {
+        className: `${B}-unit ruler-section`,
         height: H,
-        margin: R
+        margin: z
       };
-      return G !== void 0 && (ue.numbering = G), ue;
-    }), p = j(() => (I) => ({
+      return G !== void 0 && (se.numbering = G), se;
+    }), p = j(() => (T) => ({
       width: "1px",
       minWidth: "1px",
       maxWidth: "1px",
-      height: I.height,
-      backgroundColor: I.color || "#666",
-      marginLeft: I.numbering === 0 ? null : I.margin,
-      marginRight: I.margin
-    })), 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();
+      height: T.height,
+      backgroundColor: T.color || "#666",
+      marginLeft: T.numbering === 0 ? null : T.margin,
+      marginRight: T.margin
+    })), S = j(() => (T) => ({
+      left: `${(T === "left" ? w : v).x}px`
+    })), F = j(() => {
+      if (!o.value) return;
+      const H = o.value.parentElement.querySelector(".super-editor").getBoundingClientRect();
       return {
-        left: `${s.value.x}px`,
+        left: `${r.value.x}px`,
         minHeight: `${H.height}px`
       };
-    }), N = (I) => {
-      m.value = !0, ye();
-      const M = I.currentTarget.id;
-      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 (!m.value) return;
-      const M = I.clientX - g;
-      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 (m.value = !1, y.value = !1, Z(), s.value && s.value.x !== E.value) {
-        const I = re();
-        o("margin-change", {
-          side: s.value.side,
-          value: I
+    }), O = (T) => {
+      u.value = !0, ue();
+      const B = T.currentTarget.id;
+      r.value = B === "left-margin-handle" ? w : v, y.value = r.value.x, g = T.clientX - r.value.x, b.value = !0;
+    }, W = (T) => {
+      if (!u.value) return;
+      const B = T.clientX - g;
+      r.value.x = B, r.value.side === "left" ? B <= 0 ? r.value.x = 0 : B >= v.x - Fe && (r.value.x = v.x - Fe) : B >= l.value.width * 96 ? r.value.x = l.value.width * 96 : B <= w.x + Fe && (r.value.x = w.x + Fe);
+    }, ne = () => {
+      if (u.value = !1, b.value = !1, ve(), r.value && r.value.x !== y.value) {
+        const T = ge();
+        t("margin-change", {
+          side: r.value.side,
+          value: T
         });
       }
-    }, ye = () => {
+    }, ue = () => {
       c.value = a.value;
-    }, Z = () => {
+    }, ve = () => {
       c.value = "#CCC";
-    }, re = () => s.value.side === "left" ? s.value.x / 96 : (l.value.width * 96 - s.value.x) / 96, be = j(() => ({
-      "--alignment": go,
+    }, ge = () => r.value.side === "left" ? r.value.x / 96 : (l.value.width * 96 - r.value.x) / 96, Y = j(() => ({
+      "--alignment": wo,
       "--ruler-handle-color": c.value,
       "--ruler-handle-active-color": a.value
     }));
-    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(), C("div", {
+    return Ce(() => {
+      i.value = L(), window.addEventListener("mousemove", W), window.addEventListener("mouseup", ne);
+    }), Vt(() => {
+      window.removeEventListener("mousemove", W), window.removeEventListener("mouseup", ne);
+    }), (T, B) => (C(), k("div", {
       class: "ruler",
       ref_key: "ruler",
-      ref: e,
-      style: J(be.value)
+      ref: o,
+      style: Q(Y.value)
     }, [
-      k("div", {
+      _("div", {
         class: "margin-handle handle-left",
         id: "left-margin-handle",
-        onMousedown: N,
-        style: J(x.value("left"))
+        onMousedown: O,
+        style: Q(S.value("left"))
       }, null, 36),
-      k("div", {
+      _("div", {
         class: "margin-handle handle-right",
         id: "right-margin-handle",
-        onMousedown: N,
-        style: J(x.value("right"))
+        onMousedown: O,
+        style: Q(S.value("right"))
       }, null, 36),
-      y.value ? (w(), C("div", {
+      b.value ? (C(), k("div", {
         key: 0,
         class: "vertical-indicator",
-        style: J(T.value)
-      }, null, 4)) : Q("", !0),
-      (w(!0), C(U, null, ee(i.value, (H) => (w(), C("div", {
+        style: Q(F.value)
+      }, null, 4)) : ee("", !0),
+      (C(!0), k(U, null, te(i.value, (H) => (C(), k("div", {
         class: oe(H.className),
-        style: J(p.value(H))
+        style: Q(p.value(H))
       }, [
-        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))
+        _("div", yo, ie(H.numbering), 1),
+        (C(!0), k(U, null, te(H.elements, (z) => (C(), k("div", {
+          class: oe(z.className),
+          style: Q(p.value(z))
         }, [
-          (w(!0), C(U, null, ee(R.elements, (G) => (w(), C("div", {
+          (C(!0), k(U, null, te(z.elements, (G) => (C(), k("div", {
             class: oe(G.className),
-            style: J(p.value(G))
+            style: Q(p.value(G))
           }, null, 6))), 256))
         ], 6))), 256))
       ], 6))), 256))
     ], 4));
   }
-}, bo = /* @__PURE__ */ q(yo, [["__scopeId", "data-v-ad77036c"]]), wo = { class: "super-editor-container" }, Co = {
+}, ko = /* @__PURE__ */ q(Co, [["__scopeId", "data-v-ad77036c"]]), _o = { class: "super-editor-container" }, xo = {
   key: 1,
   class: "placeholder-editor"
-}, ko = { class: "placeholder-title" }, _o = {
+}, So = { class: "placeholder-title" }, Eo = {
   __name: "SuperEditor",
   props: {
     documentId: {
@@ -2207,40 +2268,40 @@ const fo = (t, r) => {
     "comments-loaded",
     "selection-update"
   ],
-  setup(t, { emit: r }) {
-    const o = r, n = t, e = f(!1), i = nt(null), c = f(null), a = f(null);
+  setup(e, { emit: s }) {
+    const t = s, n = e, o = h(!1), i = ot(null), c = h(null), a = h(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 ? (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.");
+    }, u = (p, S = 10, F = 500) => {
+      const O = p.getMap("meta"), W = () => {
+        const ne = O.get("docx");
+        ne ? (d(), b({ content: ne })) : S > 0 ? (console.debug(`Waiting for 'docx' data... retries left: ${S}`), l = setTimeout(W, F), S--) : console.warn("Failed to load docx data from meta map.");
       };
-      V();
-    }, s = async () => {
+      W();
+    }, r = async () => {
       try {
-        const [p, x, T, N] = await ze.loadXmlData(n.fileSource);
-        return { content: p, media: x, mediaFiles: T, fonts: N };
+        const [p, S, F, O] = await Ne.loadXmlData(n.fileSource);
+        return { content: p, media: S, mediaFiles: F, fonts: O };
       } catch (p) {
         console.debug("Error loading new file data:", p);
       }
-    }, b = async () => {
+    }, w = async () => {
       if (n.fileSource) {
-        const p = await s();
-        return y(p);
+        const p = await r();
+        return b(p);
       } else if (n.options.ydoc && n.options.collaborationProvider) {
         delete n.options.content;
-        const p = n.options.ydoc, x = n.options.collaborationProvider, T = () => {
-          m(p), x.off("synced", T);
+        const p = n.options.ydoc, S = n.options.collaborationProvider, F = () => {
+          u(p), S.off("synced", F);
         };
-        x.on("synced", T);
+        S.on("synced", F);
       }
     }, v = () => {
-      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({
+      const p = Tt();
+      return n.options.pagination ? p : p.filter((S) => S.name !== "pagination");
+    }, b = async ({ content: p, media: S = {}, mediaFiles: F = {}, fonts: O = {} } = {}) => {
+      i.value = new Ne({
         mode: "docx",
         element: a.value,
         fileSource: n.fileSource,
@@ -2248,115 +2309,115 @@ const fo = (t, r) => {
         externalExtensions: n.options.externalExtensions,
         documentId: n.documentId,
         content: p,
-        media: x,
-        mediaFiles: T,
-        fonts: N,
+        media: S,
+        mediaFiles: F,
+        fonts: O,
         ...n.options
       }), i.value.on("paginationUpdate", () => {
-        ho(a, i);
+        go(a, i);
       }), i.value.on("collaborationReady", () => {
         setTimeout(() => {
-          e.value = !0;
+          o.value = !0;
         }, 150);
       });
-    }, E = (p) => {
-      o("editor-keydown", { editor: i.value });
+    }, y = (p) => {
+      t("editor-keydown", { editor: i.value });
     }, g = (p) => {
-      o("editor-click", { editor: i.value });
-      let x = a.value?.querySelector(".ProseMirror");
-      if (!x || !i.value)
+      t("editor-click", { editor: i.value });
+      let S = a.value?.querySelector(".ProseMirror");
+      if (!S || !i.value)
         return;
-      !x.contains(p.target) && i.value.isEditable && i.value.view?.focus();
+      !S.contains(p.target) && i.value.isEditable && i.value.view?.focus();
     };
-    ke(() => {
-      b(), (n.options?.suppressSkeletonLoader || !n.options?.collaborationProvider) && (e.value = !0);
+    Ce(() => {
+      w(), (n.options?.suppressSkeletonLoader || !n.options?.collaborationProvider) && (o.value = !0);
     });
-    const F = (p) => {
-      p.target.classList.contains("ProseMirror") || fo(p, i.value);
-    }, $ = ({ side: p, value: x }) => {
+    const L = (p) => {
+      p.target.classList.contains("ProseMirror") || bo(p, i.value);
+    }, D = ({ side: p, value: S }) => {
       if (!i.value) return;
-      const T = i.value.getPageStyles(), { pageMargins: N } = T, V = { ...N, [p]: x };
-      i.value?.updatePageStyle({ pageMargins: V });
+      const F = i.value.getPageStyles(), { pageMargins: O } = F, W = { ...O, [p]: S };
+      i.value?.updatePageStyle({ pageMargins: W });
     };
-    return ot(() => {
+    return it(() => {
       d(), i.value?.destroy(), i.value = null;
-    }), (p, x) => (w(), C("div", wo, [
-      t.options.rulers && i.value ? (w(), Vt(bo, {
+    }), (p, S) => (C(), k("div", _o, [
+      e.options.rulers && i.value ? (C(), Pt(ko, {
         key: 0,
         class: "ruler",
         editor: i.value,
-        onMarginChange: $
-      }, null, 8, ["editor"])) : Q("", !0),
-      k("div", {
+        onMarginChange: D
+      }, null, 8, ["editor"])) : ee("", !0),
+      _("div", {
         class: "super-editor",
         ref_key: "editorWrapper",
         ref: c,
-        onKeydown: E,
+        onKeydown: y,
         onClick: g,
-        onMousedown: F
+        onMousedown: L
       }, [
-        k("div", {
+        _("div", {
           ref_key: "editorElem",
           ref: a,
           class: "editor-element super-editor__element"
         }, null, 512)
       ], 544),
-      e.value ? Q("", !0) : (w(), C("div", Co, [
-        k("div", ko, [
-          P(D(Y), {
+      o.value ? ee("", !0) : (C(), k("div", xo, [
+        _("div", So, [
+          P(M(J), {
             text: "",
             style: { width: "60%" }
           })
         ]),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           repeat: 6
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           style: { width: "60%" }
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           repeat: 6,
           style: { width: "30%", display: "block", margin: "20px" }
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           style: { width: "60%" }
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           repeat: 5
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           style: { width: "30%" }
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           style: { "margin-top": "50px" }
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           repeat: 6
         }),
-        P(D(Y), {
+        P(M(J), {
           text: "",
           style: { width: "70%" }
         })
       ]))
     ]));
   }
-}, Do = /* @__PURE__ */ q(_o, [["__scopeId", "data-v-ff8f86f4"]]), $o = {
+}, $o = /* @__PURE__ */ q(Eo, [["__scopeId", "data-v-ff8f86f4"]]), zo = {
   __name: "BasicUpload",
   emits: ["file-change"],
-  setup(t, { emit: r }) {
-    const o = r, n = (e) => {
-      o("file-change", e.target.files[0]);
+  setup(e, { emit: s }) {
+    const t = s, n = (o) => {
+      t("file-change", o.target.files[0]);
     };
-    return (e, i) => (w(), C("div", null, [
-      k("input", {
+    return (o, i) => (C(), k("div", null, [
+      _("input", {
         type: "file",
         id: "fileInput",
         onChange: n,
@@ -2364,7 +2425,7 @@ const fo = (t, r) => {
       }, null, 32)
     ]));
   }
-}, xo = ["innerHTML"], Eo = {
+}, Ao = ["innerHTML"], To = {
   __name: "SuperInput",
   props: {
     modelValue: {
@@ -2387,75 +2448,75 @@ const fo = (t, r) => {
     }
   },
   emits: ["update:modelValue", "focus", "blur"],
-  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({
+  setup(e, { emit: s }) {
+    const t = s, n = e, o = ot(), i = h(null), c = h(!1), a = ({ editor: v, transaction: b }) => {
+      const y = v.getHTML();
+      t("update:modelValue", y);
+    }, l = ({ editor: v, transaction: b }) => {
+      c.value = !0, w(), t("focus", { editor: v, transaction: b });
+    }, d = ({ editor: v, transaction: b }) => {
+      c.value = !1, t("blur", { editor: v, transaction: b });
+    }, u = async () => {
+      Ft.options.placeholder = n.placeholder || "Type something...", n.options.onTransaction = a, n.options.onFocus = l, n.options.onBlur = d, o.value = new Ne({
         mode: "text",
         content: document.getElementById("currentContent"),
         element: i.value,
-        extensions: Tt(),
+        extensions: It(),
         users: n.users,
         ...n.options
       });
-    }, s = () => {
-      c.value = !0, e.value?.view?.focus();
-    }, b = () => {
-      e.value?.setOptions({ users: n.users });
+    }, r = () => {
+      c.value = !0, o.value?.view?.focus();
+    }, w = () => {
+      o.value?.setOptions({ users: n.users });
     };
-    return ke(() => {
-      m();
-    }), ot(() => {
-      e.value?.destroy(), e.value = null;
-    }), (v, y) => (w(), C("div", {
+    return Ce(() => {
+      u();
+    }), it(() => {
+      o.value?.destroy(), o.value = null;
+    }), (v, b) => (C(), k("div", {
       class: oe(["super-editor super-input", { "super-input-active": c.value }]),
-      onClick: ge(s, ["stop", "prevent"])
+      onClick: he(r, ["stop", "prevent"])
     }, [
-      k("div", {
+      _("div", {
         id: "currentContent",
         style: { display: "none" },
-        innerHTML: t.modelValue
-      }, null, 8, xo),
-      k("div", {
+        innerHTML: e.modelValue
+      }, null, 8, Ao),
+      _("div", {
         ref_key: "editorElem",
         ref: i,
         class: "editor-element super-editor__element"
       }, null, 512)
     ], 2));
   }
-}, Ho = /* @__PURE__ */ q(Eo, [["__scopeId", "data-v-4d5cff52"]]), Bo = {
-  Node: Mt,
-  Attribute: Lt,
-  Extension: It,
-  Plugin: Bt,
-  Mark: Ft
+}, Ro = /* @__PURE__ */ q(To, [["__scopeId", "data-v-4d5cff52"]]), Oo = {
+  Node: Bt,
+  Attribute: Dt,
+  Extension: Mt,
+  Plugin: Rt,
+  Mark: Lt
 };
 export {
-  jt as AIWriter,
-  $o as BasicUpload,
-  No as CommentsPluginKey,
-  Ko as DocxZipper,
-  ze as Editor,
-  Bo as Extensions,
-  qo as SuperConverter,
-  Do as SuperEditor,
-  Ho as SuperInput,
-  Mo as SuperToolbar,
-  Pt as Toolbar,
-  zo as TrackChangesBasePluginKey,
-  Zo as createZip,
-  Vo as fieldAnnotationHelpers,
-  kt as getActiveFormatting,
-  mo as getAllowedImageDimensions,
-  Wo as getMarksFromSelection,
-  Tt as getRichTextExtensions,
-  St as getStarterExtensions,
-  Po as helpers,
-  jo as trackChangesHelpers
+  qt as AIWriter,
+  zo as BasicUpload,
+  Vo as CommentsPluginKey,
+  Yo as DocxZipper,
+  Ne as Editor,
+  Oo as Extensions,
+  Xo as SuperConverter,
+  $o as SuperEditor,
+  Ro as SuperInput,
+  Ho as SuperToolbar,
+  Ut as Toolbar,
+  Po as TrackChangesBasePluginKey,
+  Qo as createZip,
+  jo as fieldAnnotationHelpers,
+  xt as getActiveFormatting,
+  ho as getAllowedImageDimensions,
+  Uo as getMarksFromSelection,
+  It as getRichTextExtensions,
+  Tt as getStarterExtensions,
+  qo as helpers,
+  Go as trackChangesHelpers
 };