vlite3 1.3.11 → 1.4.2

package/components/Form/composables/useForm.js

@@ -1,18 +1,18 @@
-import { ref as S, shallowRef as H, computed as ee, watch as ae } from "vue";
-import { deepClone as V, initializeFormValues as le, cleanSubmitValues as te, getNestedValue as J, evaluateConditional as $, setNestedValue as j, collectFileFields as se, filterNullCustomFields as ie } from "../utils/form.utils.js";
+import { ref as S, shallowRef as G, computed as ee, watch as ae } from "vue";
+import { deepClone as g, initializeFormValues as le, cleanSubmitValues as te, getNestedValue as J, evaluateConditional as $, setNestedValue as j, collectFileFields as se, filterNullCustomFields as ie } from "../utils/form.utils.js";
 import { useFileUpload as oe } from "./useFileUpload.js";
 import { $t as re } from "../../../utils/i18n.js";
 function Fe(q) {
-  let { schema: K, values: b, isUpdate: F = !1, folderId: U, onSubmit: L } = q;
-  const { handleUploadFile: E } = oe(), n = S(b ? V(b) : {}), y = S({}), I = S(!1), g = S(!1), m = S({}), A = H(K), C = H(
-    b ? V(b) : {}
+  let { schema: K, values: b, isUpdate: F = !1, folderId: E, onSubmit: L } = q;
+  const { handleUploadFile: U } = oe(), n = S(b ? g(b) : {}), y = S({}), I = S(!1), V = S(!1), m = S({}), A = G(K), C = G(
+    b ? g(b) : {}
   ), x = ee(() => {
     const e = A.value;
     return e ? Array.isArray(e[0]) ? e.flat() : e : [];
   }), D = async (e) => {
     try {
       const a = await le(A.value, e, n.value, F);
-      n.value = a, C.value = V(a), g.value = !1;
+      n.value = a, C.value = g(a), V.value = !1;
     } catch (a) {
       console.error("[useForm] Initialization error:", a);
     }
@@ -33,55 +33,59 @@ function Fe(q) {
   }, O = () => {
     y.value = {};
   }, z = (e) => e.when ? $(e.when, N()) : !0, P = (e) => $(e.disabled, N()), W = (e) => $(e.readonly, N()), T = async (e, a = "") => {
-    const o = a ? `${a}.${e.name}` : e.name, i = M(o);
-    let s = "";
+    const r = a ? `${a}.${e.name}` : e.name, s = M(r);
+    let i = "";
     const l = e.labelI18n ? re(e.labelI18n) : typeof e.label == "string" ? e.label : e.name;
-    if (e.required && (i == null || i === "" || Array.isArray(i) && i.length === 0) && (s = `${l} is required`), !s && e.maxFileSize) {
-      const r = e.maxFileSize * 1024 * 1024;
-      if (i != null && i !== "") {
-        const t = Array.isArray(i) ? i : [i];
+    if (e.required) {
+      const o = typeof s == "string" && /<\/?[a-z][^>]*>/i.test(s) && s.replace(/<[^>]*>/g, "").replace(/&nbsp;/gi, " ").trim() === "";
+      (s == null || s === "" || Array.isArray(s) && s.length === 0 || o) && (i = `${l} is required`);
+    }
+    if (!i && e.maxFileSize) {
+      const o = e.maxFileSize * 1024 * 1024;
+      if (s != null && s !== "") {
+        const t = Array.isArray(s) ? s : [s];
         for (const f of t) {
           const v = f instanceof File ? f.size : f?.fileSize || f?.file?.size || f?.size;
-          if (v !== void 0 && v > r) {
-            s = `${l} size must be less than ${e.maxFileSize}MB`;
+          if (v !== void 0 && v > o) {
+            i = `${l} size must be less than ${e.maxFileSize}MB`;
             break;
           }
         }
       }
     }
-    if (!s && (e.type === "file" || e.type === "fileUploader") && (e.props?.multiple || e.maxFiles)) {
-      const r = e.maxFiles || e.props?.maxFiles;
-      r && Array.isArray(i) && i.length > r && (s = `Maximum ${r} files allowed`);
+    if (!i && (e.type === "file" || e.type === "fileUploader") && (e.props?.multiple || e.maxFiles)) {
+      const o = e.maxFiles || e.props?.maxFiles;
+      o && Array.isArray(s) && s.length > o && (i = `Maximum ${o} files allowed`);
     }
-    if (!s && e.validation) {
-      m.value[o] = !0;
+    if (!i && e.validation) {
+      m.value[r] = !0;
       try {
-        s = await e.validation({
-          value: i,
+        i = await e.validation({
+          value: s,
           values: n.value,
           globalValues: n.value,
           isUpdate: F
         });
-      } catch (r) {
-        console.error(`[useForm] Validation error in field ${o}:`, r), s = "Validation failed";
+      } catch (o) {
+        console.error(`[useForm] Validation error in field ${r}:`, o), i = "Validation failed";
       } finally {
-        m.value[o] = !1;
+        m.value[r] = !1;
       }
     }
-    if (s ? y.value[o] = s : delete y.value[o], e.type === "customFields" && e.props?.schema) {
-      const r = e.props.schema, t = Array.isArray(i) ? i : [];
+    if (i ? y.value[r] = i : delete y.value[r], e.type === "customFields" && e.props?.schema) {
+      const o = e.props.schema, t = Array.isArray(s) ? s : [];
       let f = !1;
       for (let v = 0; v < t.length; v++) {
         const d = { values: t[v] || {}, globalValues: n.value, isUpdate: F };
-        for (const u of r) {
+        for (const u of o) {
           const c = !u.when || $(u.when, d), w = $(u.disabled, d);
-          c && !w ? await T(u, `${o}.${v}`) && (f = !0) : delete y.value[`${o}.${v}.${u.name}`];
+          c && !w ? await T(u, `${r}.${v}`) && (f = !0) : delete y.value[`${r}.${v}.${u.name}`];
         }
       }
-      f && !s && (s = "Please fix errors in the list.", y.value[o] = s);
+      f && !i && (i = "Please fix errors in the list.", y.value[r] = i);
     }
-    return s;
-  }, G = async () => {
+    return i;
+  }, H = async () => {
     O();
     let e = !0;
     for (const a of x.value) {
@@ -89,22 +93,22 @@ function Fe(q) {
       await T(a) && (e = !1);
     }
     return e;
-  }, X = async (e, a, o) => {
-    const i = x.value.filter((l) => l.name === e);
-    let s = i.find((l) => z(l));
-    if (!s && i.length > 0 && (s = i[0]), s && (!z(s) || P(s) || W(s))) {
+  }, X = async (e, a, r) => {
+    const s = x.value.filter((l) => l.name === e);
+    let i = s.find((l) => z(l));
+    if (!i && s.length > 0 && (i = s[0]), i && (!z(i) || P(i) || W(i))) {
       console.warn(`[vlite3/useForm] Blocked attempted update to disabled/readonly/hidden field: ${e}`);
       return;
     }
-    if (n.value = j(n.value, e, a), g.value = !0, delete y.value[e], s?.updateValues) {
+    if (n.value = j(n.value, e, a), V.value = !0, delete y.value[e], i?.updateValues) {
       m.value[e] = !0;
       try {
-        const l = await s.updateValues({
+        const l = await i.updateValues({
           value: a,
           // Exposing the explicitly requested value
           values: n.value,
           globalValues: n.value,
-          data: o,
+          data: r,
           isUpdate: F,
           updateError: R
         });
@@ -116,28 +120,28 @@ function Fe(q) {
       }
     }
   }, Y = async () => {
-    const e = V(n.value), a = se(A.value, e, n.value, F), o = (l, r) => {
+    const e = g(n.value), a = se(A.value, e, n.value, F), r = (l, o) => {
       let t = null;
       l instanceof File ? t = l : l && typeof l == "object" && l.file instanceof File && (t = l.file);
       const f = {
         ...typeof l == "object" ? l : {},
-        fileName: l?.fileName || t?.name || r.split("/").pop() || "unknown",
-        fileUrl: r,
+        fileName: l?.fileName || t?.name || o.split("/").pop() || "unknown",
+        fileUrl: o,
         fileType: l?.fileType || t?.type || "application/octet-stream",
         fileSize: l?.fileSize || t?.size || 0
       };
       return delete f.file, delete f.base64, f;
-    }, i = a.map(async (l) => {
-      const { name: r, value: t, field: f } = l;
+    }, s = a.map(async (l) => {
+      const { name: o, value: t, field: f } = l;
       if (l.type === "thumbnailSelector") {
         const d = t, u = Array.isArray(d.images) ? d.images : [], c = d.thumbnail;
-        m.value[r] = !0;
+        m.value[o] = !0;
         try {
           const w = await Promise.all(
             u.map(async (h) => {
               if (h.startsWith("data:image/")) {
                 const B = await (await fetch(h)).blob(), _ = new File([B], `thumbnail-${Date.now()}.${B.type.split("/")[1] || "jpg"}`, { type: B.type });
-                return await E(_, U) || h;
+                return await U(_, E) || h;
               }
               return h;
             })
@@ -147,21 +151,21 @@ function Fe(q) {
             const h = u.indexOf(c);
             h !== -1 && w[h] && (p = w[h]);
           }
-          return { name: r, value: { images: w, thumbnail: p } };
+          return { name: o, value: { images: w, thumbnail: p } };
         } finally {
-          m.value[r] = !1;
+          m.value[o] = !1;
         }
       }
       const v = f.returnFileObject === !0, k = Array.isArray(t) ? t.some(
         (d) => d instanceof File || d && typeof d == "object" && d.file instanceof File
       ) : t instanceof File || t && typeof t == "object" && t.file instanceof File;
-      k && (m.value[r] = !0);
+      k && (m.value[o] = !0);
       try {
         if (Array.isArray(t)) {
           const d = t.map(async (c) => {
             if (c instanceof File || c && typeof c == "object" && c.file instanceof File) {
-              const p = await E(c, U);
-              return p ? v ? o(c, p) : p : null;
+              const p = await U(c, E);
+              return p ? v ? r(c, p) : p : null;
             }
             if (c && typeof c == "object") {
               const p = { ...c };
@@ -169,33 +173,33 @@ function Fe(q) {
             }
             return c;
           }), u = await Promise.all(d);
-          return { name: r, value: u };
+          return { name: o, value: u };
         } else {
           if (t instanceof File || t && typeof t == "object" && t.file instanceof File) {
-            const u = await E(t, U);
+            const u = await U(t, E);
             if (u)
-              return { name: r, value: v ? o(t, u) : u };
+              return { name: o, value: v ? r(t, u) : u };
           } else if (t && typeof t == "object") {
             const u = { ...t };
-            return delete u.file, delete u.base64, { name: r, value: u };
+            return delete u.file, delete u.base64, { name: o, value: u };
           }
           return null;
         }
       } finally {
-        k && (m.value[r] = !1);
+        k && (m.value[o] = !1);
       }
     });
-    return (await Promise.all(i)).forEach((l) => {
+    return (await Promise.all(s)).forEach((l) => {
       l && (Object.assign(e, j(e, l.name, l.value)), n.value = j(n.value, l.name, l.value));
     }), e;
   }, Z = (e) => {
     const a = { ...e };
-    for (const o of x.value)
-      if (z(o) && o.type === "customFields" && o.props?.schema) {
-        const i = J(a, o.name);
-        if (Array.isArray(i)) {
-          const s = ie(i, o.props.schema);
-          Object.assign(a, j(a, o.name, s));
+    for (const r of x.value)
+      if (z(r) && r.type === "customFields" && r.props?.schema) {
+        const s = J(a, r.name);
+        if (Array.isArray(s)) {
+          const i = ie(s, r.props.schema);
+          Object.assign(a, j(a, r.name, i));
         }
       }
     return a;
@@ -204,11 +208,11 @@ function Fe(q) {
     formValues: n,
     errors: y,
     isSubmitting: I,
-    isDirty: g,
+    isDirty: V,
     fieldLoading: m,
     handleFieldChange: X,
     validateField: T,
-    validateAll: G,
+    validateAll: H,
     isFieldVisible: z,
     isFieldDisabled: P,
     isFieldReadonly: W,
@@ -217,10 +221,10 @@ function Fe(q) {
     setFieldError: R,
     clearErrors: O,
     resetForm: () => {
-      n.value = V(C.value), O(), g.value = !1;
+      n.value = g(C.value), O(), V.value = !1;
     },
     handleSubmit: async () => {
-      if (await G()) {
+      if (await H()) {
         I.value = !0;
         try {
           let a = await Y();
@@ -234,7 +238,7 @@ function Fe(q) {
           ), L && await L({
             values: a,
             isUpdate: F
-          }), g.value = !1, C.value = V(a);
+          }), V.value = !1, C.value = g(a);
         } catch (a) {
           throw console.error("[useForm] Submit error:", a), a;
         } finally {

package/components/Form/types.d.ts

@@ -23,7 +23,7 @@ export interface IFormAddon {
 /**
  * Form field types - maps to corresponding UI components
  */
-export type IFormFieldType = 'text' | 'email' | 'password' | 'number' | 'file' | 'fileUploader' | 'tel' | 'url' | 'search' | 'date' | 'dateRangePicker' | 'textarea' | 'time' | 'iconPicker' | 'color' | 'switch' | 'check' | 'customFields' | 'select' | 'multiSelect' | 'choiceBox' | 'avatarUpload' | 'thumbnailSelector' | 'tags' | Component;
+export type IFormFieldType = 'text' | 'email' | 'password' | 'number' | 'file' | 'fileUploader' | 'tel' | 'url' | 'search' | 'date' | 'dateRangePicker' | 'textarea' | 'time' | 'iconPicker' | 'color' | 'switch' | 'check' | 'customFields' | 'select' | 'multiSelect' | 'choiceBox' | 'avatarUpload' | 'thumbnailSelector' | 'tags' | 'richTextEditor' | Component;
 /**
  * Context passed to conditional functions
  */
@@ -84,6 +84,18 @@ export interface IFormCustomFieldsProps {
     headers?: string[];
     draggable?: boolean;
 }
+/**
+ * Layout for grouped schemas (schema: IForm[][]).
+ *
+ * - 'basic'     each group renders as a card with a header/heading and
+ *               a body. This is the default and matches the original
+ *               behavior — fully backward compatible.
+ * - 'accordion' each group renders as an `AccordionItem` with the
+ *               heading as the trigger and the fields inside the body.
+ *               Use it when a form has many groups and you want the
+ *               user to expand only the ones they care about.
+ */
+export type IFormGroupLayout = 'basic' | 'accordion';
 /**
  * Main form field interface
  */
@@ -190,6 +202,14 @@ export interface IFormProps {
     groupsHeadings?: IFormGroupsHeadings;
     /** Descriptions for grouped schemas — static array or `(ctx) => string[]` */
     groupHeadingsDescription?: IFormGroupsHeadings;
+    /**
+     * Layout for grouped schemas (`schema: IForm[][]`).
+     * - `'basic'` (default) — each group is a card with a header and a body
+     * - `'accordion'` — each group is an `AccordionItem` with the heading as the trigger
+     *
+     * Has no effect on flat schemas. Backward compatible.
+     */
+    groupLayout?: IFormGroupLayout;
     /** Timeline steps for multi-step form mode */
     tabs?: IFormStep[];
     /** Submit button text */

package/components/IconPicker.vue.js

@@ -3,11 +3,12 @@ import $ from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import { $t as d } from "../utils/i18n.js";
 /* empty css           */
+/* empty css                                   */
 /* empty css                           */
 import C from "./Button.vue.js";
 import I from "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
-const j = /* @__PURE__ */ g({
+const A = /* @__PURE__ */ g({
   __name: "IconPicker",
   props: {
     btnProps: {},
@@ -130,5 +131,5 @@ const j = /* @__PURE__ */ g({
   }
 });
 export {
-  j as default
+  A as default
 };

package/components/ImportData/ImportStep2.vue.js

@@ -3,6 +3,7 @@ import A from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import { $t as E } from "../../utils/i18n.js";
 /* empty css            */
+/* empty css                                    */
 /* empty css                            */
 import P from "../CheckBox.vue.js";
 const R = { class: "space-y-5" }, U = { class: "text-sm text-muted-foreground" }, q = { class: "border border-border rounded-xl overflow-hidden" }, L = { class: "overflow-x-auto max-h-[440px] always-scroll scrollbar-thin" }, W = { class: "import-table" }, G = { class: "import-thead" }, J = { class: "import-th" }, K = { class: "import-th" }, Q = { class: "import-th" }, T = { class: "import-tbody" }, X = { class: "import-td-header" }, Y = { class: "import-td-dropdown" }, Z = {
@@ -14,7 +15,7 @@ const R = { class: "space-y-5" }, U = { class: "text-sm text-muted-foreground" }
 }, st = { class: "import-td-action" }, ot = { class: "flex justify-center items-center h-full" }, it = {
   key: 0,
   class: "text-center text-sm text-warning font-medium p-4 bg-warning/10 rounded-lg border border-warning/20"
-}, ut = /* @__PURE__ */ V({
+}, vt = /* @__PURE__ */ V({
   __name: "ImportStep2",
   props: {
     headers: {},
@@ -113,5 +114,5 @@ const R = { class: "space-y-5" }, U = { class: "text-sm text-muted-foreground" }
   }
 });
 export {
-  ut as default
+  vt as default
 };

package/components/MultiSelect/composables/useMultiSelectHydration.d.ts

@@ -13,6 +13,8 @@ export declare function useMultiSelectHydration(opts: UseMultiSelectHydrationOpt
     selectedBuffer: import('vue').Ref<Map<any, {
         label: string;
         labelI18n?: string;
+        to?: string;
+        href?: string;
         value?: any;
         subtitle?: string;
         subtitleI18n?: string;
@@ -54,6 +56,8 @@ export declare function useMultiSelectHydration(opts: UseMultiSelectHydrationOpt
     }> & Omit<Map<any, IDropdownOption>, keyof Map<any, any>>, Map<any, IDropdownOption> | (Map<any, {
         label: string;
         labelI18n?: string;
+        to?: string;
+        href?: string;
         value?: any;
         subtitle?: string;
         subtitleI18n?: string;

package/components/NavbarCommandPalette.vue.d.ts

@@ -22,8 +22,8 @@ interface Props {
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     placeholder: string;
-    enabled: boolean;
     items: import('./CommandPalette').CommandPaletteItem[];
+    enabled: boolean;
     menuItems: SidebarMenuItemSchema[];
     maxResultsPerGroup: number;
     shortcutKey: string;

package/components/PermissionMatrix/PermissionTopBar.vue.js

@@ -5,6 +5,7 @@ import y from "../Icon.vue.js";
 import K from "../CheckBox.vue.js";
 import B from "../Dropdown/Dropdown.vue.js";
 import "../../core/config.js";
+/* empty css                                    */
 /* empty css                            */
 const S = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4" }, A = { class: "flex items-center gap-2 flex-1 w-full sm:max-w-lg" }, Q = {
   key: 0,
@@ -15,7 +16,7 @@ const S = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-3
 }, N = ["onClick"], P = { class: "text-sm" }, E = {
   key: 0,
   class: "border-t px-3 py-1.5"
-}, F = { class: "flex items-center gap-3 ml-auto" }, I = /* @__PURE__ */ w({
+}, F = { class: "flex items-center gap-3 ml-auto" }, J = /* @__PURE__ */ w({
   __name: "PermissionTopBar",
   props: {
     searchQuery: {},
@@ -129,5 +130,5 @@ const S = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-3
   }
 });
 export {
-  I as default
+  J as default
 };

package/components/RichTextEditor/RichTextEditor.vue.js

@@ -1,12 +1,12 @@
 import { defineComponent as te, ref as v, shallowRef as ne, watch as oe, computed as h, onMounted as le, onUnmounted as ae, openBlock as C, createElementBlock as L, normalizeClass as re, toDisplayString as I, createCommentVNode as U, createElementVNode as w, createVNode as q, unref as a, normalizeStyle as ie } from "vue";
 /* empty css                         */
-import de from "./RichTextToolbar.vue.js";
-/* empty css                     */
-import se from "./RichTextLinkPopover.vue.js";
-/* empty css                         */
+import se from "./RichTextToolbar.vue2.js";
+/* empty css                    */
+import de from "./RichTextLinkPopover.vue2.js";
+/* empty css                        */
 import { useRichTextImageUpload as ue } from "./composables/useRichTextImageUpload.js";
 import { useRichTextLinks as ce } from "./composables/useRichTextLinks.js";
-const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ge = { class: "rte-body-wrap" }, ye = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({
+const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ye = { class: "rte-body-wrap" }, ge = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({
   __name: "RichTextEditor",
   props: {
     modelValue: { default: "" },
@@ -17,7 +17,8 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
     label: {},
     error: {},
     id: {},
-    readonly: { type: Boolean, default: !1 }
+    readonly: { type: Boolean, default: !1 },
+    tools: {}
   },
   emits: ["update:modelValue", "focus", "blur", "image-removed"],
   setup(o, { emit: N }) {
@@ -33,7 +34,7 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
       justifyRight: !1
     }), S = v("");
     let u = null, c = null, p = !1;
-    function g() {
+    function y() {
       if (p) return;
       const e = window.getSelection();
       if (e && e.rangeCount > 0)
@@ -43,7 +44,7 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
           u = null;
         }
     }
-    function y() {
+    function g() {
       if (!(!u || p))
         try {
           const e = window.getSelection();
@@ -73,19 +74,12 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
       H = t;
     }
     const $ = {
-      saveSelection: g,
-      restoreSelection: y,
+      saveSelection: y,
+      restoreSelection: g,
       onInput: f
     };
     h(() => r.value);
-    const {
-      imageInputRef: z,
-      isUploadingImage: W,
-      triggerImageUpload: Y,
-      onImageFileChange: D,
-      onPaste: j,
-      onDrop: V
-    } = ue(r, $), l = ce({
+    const { imageInputRef: z, isUploadingImage: W, triggerImageUpload: Y, onImageFileChange: D, onPaste: j, onDrop: V } = ue(r, $), l = ce({
       editorRef: r,
       rootRef: A,
       linkPopoverElRef: x,
@@ -104,41 +98,41 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
       T.value = t === "" && !e.querySelector("img");
     }
     function f() {
-      E(), b("update:modelValue", r.value?.innerHTML ?? ""), P(), s();
+      E(), b("update:modelValue", r.value?.innerHTML ?? ""), P(), d();
     }
     function k(e, t) {
       if (!(i.disabled || i.readonly)) {
-        y(), r.value?.focus();
+        g(), r.value?.focus();
         try {
           document.execCommand(e, !1, t ?? void 0);
         } catch {
         }
-        s(), f();
+        d(), f();
       }
     }
     function G(e) {
       if (!(i.disabled || i.readonly)) {
-        y(), r.value?.focus();
+        g(), r.value?.focus();
         try {
           document.execCommand("formatBlock", !1, e);
         } catch {
         }
-        s(), f();
+        d(), f();
       }
     }
     function J() {
       if (!(i.disabled || i.readonly)) {
-        y(), r.value?.focus();
+        g(), r.value?.focus();
         try {
           document.execCommand("removeFormat", !1, void 0), document.execCommand("formatBlock", !1, "div");
         } catch {
         }
-        s(), f();
+        d(), f();
       }
     }
     function Q() {
       if (i.disabled || i.readonly) return;
-      y(), r.value?.focus();
+      g(), r.value?.focus();
       const e = window.getSelection();
       if (!e || e.rangeCount === 0 || e.isCollapsed) return;
       const t = e.getRangeAt(0);
@@ -149,14 +143,14 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
         const n = t.extractContents(), O = document.createElement("code");
         O.appendChild(n), t.insertNode(O), e.removeAllRanges();
       }
-      s(), f();
+      d(), f();
     }
-    function s() {
+    function d() {
       c !== null && cancelAnimationFrame(c), c = requestAnimationFrame(() => {
         c = null, X();
       });
     }
-    function d(e) {
+    function s(e) {
       try {
         return document.queryCommandState(e);
       } catch {
@@ -166,15 +160,15 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
     function X() {
       if (!p) {
         B.value = {
-          bold: d("bold"),
-          italic: d("italic"),
-          underline: d("underline"),
-          strikeThrough: d("strikeThrough"),
-          insertOrderedList: d("insertOrderedList"),
-          insertUnorderedList: d("insertUnorderedList"),
-          justifyLeft: d("justifyLeft"),
-          justifyCenter: d("justifyCenter"),
-          justifyRight: d("justifyRight")
+          bold: s("bold"),
+          italic: s("italic"),
+          underline: s("underline"),
+          strikeThrough: s("strikeThrough"),
+          insertOrderedList: s("insertOrderedList"),
+          insertUnorderedList: s("insertUnorderedList"),
+          justifyLeft: s("justifyLeft"),
+          justifyCenter: s("justifyCenter"),
+          justifyRight: s("justifyRight")
         };
         try {
           S.value = document.queryCommandValue("formatBlock").toLowerCase();
@@ -188,7 +182,7 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
       const e = r.value;
       if (!e) return;
       const t = document.activeElement;
-      t !== e && !e.contains(t) || (g(), s());
+      t !== e && !e.contains(t) || (y(), d());
     }
     function Z(e) {
       if (e.ctrlKey || e.metaKey)
@@ -241,26 +235,27 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
         class: "rte-label"
       }, I(o.label), 9, me)) : U("", !0),
       w("div", ve, [
-        q(de, {
+        q(se, {
           toolbarState: B.value,
           activeBlock: S.value,
           disabled: o.disabled,
           readonly: o.readonly,
           isUploadingImage: a(W),
           label: o.label,
+          tools: o.tools,
           onCommand: k,
           onSetBlock: G,
           onInsertCode: Q,
           onTriggerImageUpload: t[0] || (t[0] = (n) => a(Y)(!(!o.disabled && !o.readonly))),
           onOpenLinkPopover: a(l).openLinkPopover,
           onClearFormat: J
-        }, null, 8, ["toolbarState", "activeBlock", "disabled", "readonly", "isUploadingImage", "label", "onOpenLinkPopover"]),
-        w("div", ge, [
+        }, null, 8, ["toolbarState", "activeBlock", "disabled", "readonly", "isUploadingImage", "label", "tools", "onOpenLinkPopover"]),
+        w("div", ye, [
           w("div", {
             id: m.value,
             ref_key: "editorRef",
             ref: r,
-            class: "rte-editor",
+            class: "rte-editor scrollbar-thin always-scroll",
             style: ie(_.value),
             contenteditable: !o.disabled && !o.readonly ? "true" : "false",
             role: "textbox",
@@ -272,19 +267,19 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
             spellcheck: "true",
             onInputPassive: f,
             onFocus: t[1] || (t[1] = (n) => {
-              R.value = !0, g(), s(), b("focus", n);
+              R.value = !0, y(), d(), b("focus", n);
             }),
             onBlur: t[2] || (t[2] = (n) => {
               R.value = !1, b("blur", n);
             }),
             onKeydown: Z,
-            onKeyupPassive: g,
-            onMouseupPassive: g,
+            onKeyupPassive: y,
+            onMouseupPassive: y,
             onPaste: t[3] || (t[3] = //@ts-ignore
             (...n) => a(j) && a(j)(...n)),
             onDrop: t[4] || (t[4] = //@ts-ignore
             (...n) => a(V) && a(V)(...n))
-          }, null, 44, ye),
+          }, null, 44, ge),
           w("input", {
             ref_key: "imageInputRef",
             ref: z,
@@ -303,7 +298,7 @@ const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { c
             "aria-hidden": "true",
             onClick: t[6] || (t[6] = (n) => r.value?.focus())
           }, I(o.placeholder), 1)) : U("", !0),
-          q(se, {
+          q(de, {
             ref_key: "linkPopoverCompRef",
             ref: x,
             visible: a(l).linkPopover.value.visible,