@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/editor/index.es.js

@@ -1,44 +1,44 @@
-import { defineComponent as De, mergeModels as ve, inject as Oe, useModel as ge, onMounted as je, reactive as Ke, shallowRef as x, ref as R, computed as X, watch as be, resolveDirective as We, createElementBlock as E, openBlock as f, Fragment as Y, createVNode as c, withCtx as v, createElementVNode as d, normalizeClass as _, createCommentVNode as U, createBlock as D, renderList as he, mergeProps as ze, unref as s, createTextVNode as Ge, toDisplayString as ye, withDirectives as qe, nextTick as Je } from "vue";
-import { u as Qe } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { B as Xe } from "../vendor/@tiptap/extension-bold/dist/index.es.js";
-import { B as Ye } from "../vendor/@tiptap/extension-bullet-list/dist/index.es.js";
-import { C as Ze } from "../vendor/@tiptap/extension-code/dist/index.es.js";
-import { D as et } from "../vendor/@tiptap/extension-document/dist/index.es.js";
-import { F as tt } from "../vendor/@tiptap/extension-floating-menu/dist/index.es.js";
-import { H as at } from "../vendor/@tiptap/extension-heading/dist/index.es.js";
-import { H as ot } from "../vendor/@tiptap/extension-history/dist/index.es.js";
-import { I as lt } from "../vendor/@tiptap/extension-image/dist/index.es.js";
-import { I as nt } from "../vendor/@tiptap/extension-italic/dist/index.es.js";
-import { L as it } from "../vendor/@tiptap/extension-link/dist/index.es.js";
-import { L as st } from "../vendor/@tiptap/extension-list-item/dist/index.es.js";
-import { M as rt } from "../vendor/@tiptap/extension-mention/dist/index.es.js";
-import { O as dt } from "../vendor/@tiptap/extension-ordered-list/dist/index.es.js";
-import { P as ct } from "../vendor/@tiptap/extension-paragraph/dist/index.es.js";
-import { P as ut } from "../vendor/@tiptap/extension-placeholder/dist/index.es.js";
-import { T as mt } from "../vendor/@tiptap/extension-text/dist/index.es.js";
-import { U as pt } from "../vendor/@tiptap/extension-underline/dist/index.es.js";
-import { V as _e, a as ft, u as vt, E as gt, F as Z } from "../vendor/@tiptap/vue-3/dist/index.es.js";
-import { N as ke, m as Ce } from "../vendor/@tiptap/core/dist/index.es.js";
-import { _ as bt } from "../codesnippetadapter/index.es.js";
-import { _ as ht } from "../mentionsection/index.es.js";
-import { t as yt } from "../vendor/tippy.js/dist/tippy.esm.es.js";
-import { _ as xt } from "../mentionlist/index.es.js";
-import { a as _t } from "../utils/addAttachment.util.es.js";
-import { s as kt } from "../vendor/primevue/menu/menu.esm.es.js";
-import { _ as ee } from "../button/index.es.js";
-import { _ as Ct } from "../dialog/index.es.js";
-import { _ as wt } from "../fieldwrapper/index.es.js";
-import { _ as St } from "../form/index.es.js";
-import { _ as At } from "../icon/index.es.js";
-import { _ as Lt } from "../inputtext/index.es.js";
-import { _ as xe } from "../inputurl/index.es.js";
-import { _ as Mt } from "../overlaypanel/index.es.js";
-import { _ as Tt } from "../validatormessage/index.es.js";
-import { _ as M } from "../editorbutton/index.es.js";
-const It = ke.create({
+import { defineComponent, mergeModels, inject, useModel, onMounted, reactive, shallowRef, ref, computed, watch, resolveDirective, createElementBlock, openBlock, Fragment, createVNode, withCtx, createElementVNode, normalizeClass, createCommentVNode, createBlock, renderList, mergeProps, unref, createTextVNode, toDisplayString, withDirectives, nextTick } from "vue";
+import { u as useField } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { B as Bold } from "../vendor/@tiptap/extension-bold/dist/index.es.js";
+import { B as BulletList } from "../vendor/@tiptap/extension-bullet-list/dist/index.es.js";
+import { C as Code } from "../vendor/@tiptap/extension-code/dist/index.es.js";
+import { D as Document } from "../vendor/@tiptap/extension-document/dist/index.es.js";
+import { F as FloatingMenu } from "../vendor/@tiptap/extension-floating-menu/dist/index.es.js";
+import { H as Heading } from "../vendor/@tiptap/extension-heading/dist/index.es.js";
+import { H as History } from "../vendor/@tiptap/extension-history/dist/index.es.js";
+import { I as Image } from "../vendor/@tiptap/extension-image/dist/index.es.js";
+import { I as Italic } from "../vendor/@tiptap/extension-italic/dist/index.es.js";
+import { L as Link } from "../vendor/@tiptap/extension-link/dist/index.es.js";
+import { L as ListItem } from "../vendor/@tiptap/extension-list-item/dist/index.es.js";
+import { M as Mention } from "../vendor/@tiptap/extension-mention/dist/index.es.js";
+import { O as OrderedList } from "../vendor/@tiptap/extension-ordered-list/dist/index.es.js";
+import { P as Paragraph } from "../vendor/@tiptap/extension-paragraph/dist/index.es.js";
+import { P as Placeholder } from "../vendor/@tiptap/extension-placeholder/dist/index.es.js";
+import { T as Text } from "../vendor/@tiptap/extension-text/dist/index.es.js";
+import { U as Underline } from "../vendor/@tiptap/extension-underline/dist/index.es.js";
+import { V as VueNodeViewRenderer, a as VueRenderer, u as useEditor, E as EditorContent, F as FloatingMenu$1 } from "../vendor/@tiptap/vue-3/dist/index.es.js";
+import { N as Node, m as mergeAttributes } from "../vendor/@tiptap/core/dist/index.es.js";
+import { _ as _sfc_main$1 } from "../codesnippetadapter/index.es.js";
+import { _ as _sfc_main$2 } from "../mentionsection/index.es.js";
+import { t as tippy } from "../vendor/tippy.js/dist/tippy.esm.es.js";
+import { _ as _sfc_main$3 } from "../mentionlist/index.es.js";
+import { v as validateFileSize } from "../utils/addAttachment.util.es.js";
+import { s as script } from "../vendor/primevue/menu/menu.esm.es.js";
+import { _ as _sfc_main$8 } from "../button/index.es.js";
+import { _ as _sfc_main$6 } from "../dialog/index.es.js";
+import { _ as _sfc_main$4 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$c } from "../form/index.es.js";
+import { _ as _sfc_main$9 } from "../icon/index.es.js";
+import { _ as _sfc_main$d } from "../inputtext/index.es.js";
+import { _ as _sfc_main$7 } from "../inputurl/index.es.js";
+import { _ as _sfc_main$b } from "../overlaypanel/index.es.js";
+import { _ as _sfc_main$a } from "../validatormessage/index.es.js";
+import { _ as _sfc_main$5 } from "../editorbutton/index.es.js";
+const CodeSnippetExtension = Node.create({
   name: "codeSnippet",
   group: "block",
-  atom: !0,
+  atom: true,
   addAttributes() {
     return {
       code: {
@@ -53,25 +53,30 @@ const It = ke.create({
       }
     ];
   },
-  renderHTML({ HTMLAttributes: r }) {
-    return ["codeSnippet", Ce(r)];
+  renderHTML({ HTMLAttributes }) {
+    return ["codeSnippet", mergeAttributes(HTMLAttributes)];
   },
   addNodeView() {
-    return _e(bt);
+    return VueNodeViewRenderer(_sfc_main$1);
   },
   addCommands() {
     return {
-      insertCodeSnippet: () => ({ commands: r }) => r.insertContent({
-        type: "codeSnippet",
-        attrs: { code: "" }
-      }),
-      deleteCodeSnippet: () => ({ commands: r }) => r.deleteSelection()
+      insertCodeSnippet: () => ({ commands }) => {
+        return commands.insertContent({
+          type: "codeSnippet",
+          attrs: { code: "" }
+        });
+      },
+      deleteCodeSnippet: () => ({ commands }) => {
+        return commands.deleteSelection();
+      }
     };
   }
-}), Bt = ke.create({
+});
+const MentionSectionExtension = Node.create({
   name: "mentionSection",
   group: "block",
-  atom: !0,
+  atom: true,
   addAttributes() {
     return {
       title: {
@@ -89,90 +94,125 @@ const It = ke.create({
       }
     ];
   },
-  renderHTML({ HTMLAttributes: r }) {
-    return ["mentionSection", Ce(r)];
+  renderHTML({ HTMLAttributes }) {
+    return ["mentionSection", mergeAttributes(HTMLAttributes)];
   },
   addNodeView() {
-    return _e(ht);
+    return VueNodeViewRenderer(_sfc_main$2);
   },
   addCommands() {
     return {
-      insertMentionSection: (r) => ({ commands: g }) => g.insertContent({
-        type: "mentionSection",
-        attrs: {
-          title: r,
-          bodyText: null
-        }
-      }),
-      deleteMentionSection: () => ({ commands: r }) => r.deleteSelection()
-    };
-  }
-}), Ht = () => ({
-  render: () => {
-    let r, g;
-    return {
-      onStart(m) {
-        r = new ft(xt, {
-          props: {
-            items: m.items,
-            command: m.command
-          },
-          editor: m.editor
-        }), m.clientRect && (g = yt("body", {
-          getReferenceClientRect: m.clientRect,
-          appendTo: () => document.body,
-          content: r.element,
-          showOnCreate: !0,
-          interactive: !0,
-          trigger: "manual",
-          placement: "bottom-start"
-        }));
-      },
-      onUpdate(m) {
-        r.updateProps(m), m.clientRect && g[0].setProps({
-          getReferenceClientRect: m.clientRect
+      insertMentionSection: (title) => ({ commands }) => {
+        return commands.insertContent({
+          type: "mentionSection",
+          attrs: {
+            title,
+            bodyText: null
+          }
         });
       },
-      onKeyDown(m) {
-        return m.event.key === "Escape" ? (g[0].hide(), !0) : r.ref.onKeyDown(m.event);
-      },
-      onExit() {
-        g[0].destroy(), r.destroy();
+      deleteMentionSection: () => ({ commands }) => {
+        return commands.deleteSelection();
       }
     };
   }
-}), Vt = ["title", "onClick"], Pt = { class: "!text-[9px] !leading-3 !h-max !font-normal" }, Nt = {
-  class: /* @__PURE__ */ _([
+});
+const suggestion = () => {
+  return {
+    render: () => {
+      let component;
+      let popup;
+      return {
+        onStart(props) {
+          component = new VueRenderer(_sfc_main$3, {
+            props: {
+              items: props.items,
+              command: props.command
+            },
+            editor: props.editor
+          });
+          if (!props.clientRect) {
+            return;
+          }
+          popup = tippy("body", {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start"
+          });
+        },
+        onUpdate(props) {
+          component.updateProps(props);
+          if (!props.clientRect) {
+            return;
+          }
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect
+          });
+        },
+        onKeyDown(props) {
+          if (props.event.key === "Escape") {
+            popup[0].hide();
+            return true;
+          }
+          return component.ref.onKeyDown(props.event);
+        },
+        onExit() {
+          popup[0].destroy();
+          component.destroy();
+        }
+      };
+    }
+  };
+};
+const _hoisted_1 = ["title", "onClick"];
+const _hoisted_2 = { class: "!text-[9px] !leading-3 !h-max !font-normal" };
+const _hoisted_3 = {
+  class: /* @__PURE__ */ normalizeClass([
     "flex gap-2 bg-white border-[0.5px] px-2 py-1 rounded-sm",
-    "[&_.separator::after]:content-['|']",
-    "[&_.separator::after]:text-xl",
-    "[&_.separator::after]:font-thin",
-    "[&_.separator]:h-6"
+    `[&_.separator::after]:content-['|']`,
+    `[&_.separator::after]:text-xl`,
+    `[&_.separator::after]:font-thin`,
+    `[&_.separator]:h-6`
   ])
-}, $t = {
-  class: /* @__PURE__ */ _([
+};
+const _hoisted_4 = {
+  class: /* @__PURE__ */ normalizeClass([
     "flex gap-2 bg-white border-[0.5px] px-2 py-1 rounded-sm",
-    "[&_.separator::after]:content-['|']",
-    "[&_.separator::after]:text-xl",
-    "[&_.separator::after]:font-thin",
-    "[&_.separator]:h-6"
+    `[&_.separator::after]:content-['|']`,
+    `[&_.separator::after]:text-xl`,
+    `[&_.separator::after]:font-thin`,
+    `[&_.separator]:h-6`
   ])
-}, Ft = { class: "flex flex-col gap-4" }, Rt = { class: "flex gap-2" }, Et = { class: "flex-1" }, Ut = { class: "flex items-end" }, Dt = { class: "flex flex-wrap justify-center gap-2" }, Ot = ["src"], jt = { class: "flex flex-col justify-center w-28 h-28 items-center" }, Kt = { class: "relative py-[7px] px-3" }, Wt = {
-  class: /* @__PURE__ */ _([
+};
+const _hoisted_5 = { class: "flex flex-col gap-4" };
+const _hoisted_6 = { class: "flex gap-2" };
+const _hoisted_7 = { class: "flex-1" };
+const _hoisted_8 = { class: "flex items-end" };
+const _hoisted_9 = { class: "flex flex-wrap justify-center gap-2" };
+const _hoisted_10 = ["src"];
+const _hoisted_11 = { class: "flex flex-col justify-center w-28 h-28 items-center" };
+const _hoisted_12 = { class: "relative py-[7px] px-3" };
+const _hoisted_13 = {
+  class: /* @__PURE__ */ normalizeClass([
     "flex gap-2 bg-white border-[0.5px] px-2 py-1 rounded-sm",
-    "[&_.separator::after]:content-['|']",
-    "[&_.separator::after]:text-xl",
-    "[&_.separator::after]:font-thin",
-    "[&_.separator]:h-6"
+    `[&_.separator::after]:content-['|']`,
+    `[&_.separator::after]:text-xl`,
+    `[&_.separator::after]:font-thin`,
+    `[&_.separator]:h-6`
   ])
-}, Ta = /* @__PURE__ */ De({
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Editor",
-  props: /* @__PURE__ */ ve({
+  props: /* @__PURE__ */ mergeModels({
     modelValue: {},
     initialValue: {},
     placeholder: { default: "Tulis" },
     editorState: { default: "editable" },
-    borderLess: { type: Boolean, default: !1 },
+    borderLess: { type: Boolean, default: false },
     label: {},
     useValidator: { type: Boolean },
     fieldName: {},
@@ -183,107 +223,155 @@ const It = ke.create({
     mandatory: { type: Boolean },
     invalid: { type: Boolean },
     showOptionalText: { type: Boolean, default: void 0 },
-    isImageUploadBase64: { type: Boolean, default: !1 },
+    isImageUploadBase64: { type: Boolean, default: false },
     fetchMentionSuggestionFunction: {},
     mentionedList: {},
     editorWrapperClass: {},
     toolbarWrapperClass: {},
     contentWrapperClass: {}
   }, {
-    modelValue: {},
-    modelModifiers: {},
-    mentionedList: {},
-    mentionedListModifiers: {}
+    "modelValue": {},
+    "modelModifiers": {},
+    "mentionedList": {},
+    "mentionedListModifiers": {}
   }),
-  emits: /* @__PURE__ */ ve(["update:modelValue", "postImageLocal", "deleteImageLocal", "blur", "focus", "update:mentionedList"], ["update:modelValue", "update:mentionedList"]),
-  setup(r, { expose: g, emit: m }) {
-    const we = Oe("preset", {}).menu, l = r, V = m;
-    ge(r, "modelValue");
-    const Se = ge(r, "mentionedList");
-    je(() => {
-      l.useValidator && (Object.assign(
-        b,
-        Qe(
-          () => l.fieldName ?? "editorInput",
-          (t) => Je(() => Ne(t))
-        )
-      ), l.initialValue != null && (b.value = l.initialValue), l.modelValue != null && (b.value = l.modelValue)), Re();
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "postImageLocal", "deleteImageLocal", "blur", "focus", "update:mentionedList"], ["update:modelValue", "update:mentionedList"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const MenuPreset = inject("preset", {}).menu;
+    const props = __props;
+    const emit = __emit;
+    useModel(__props, "modelValue");
+    const modelMentionedList = useModel(__props, "mentionedList");
+    onMounted(() => {
+      if (props.useValidator) {
+        Object.assign(
+          field,
+          useField(
+            () => props.fieldName ?? "editorInput",
+            (value) => {
+              return nextTick(() => {
+                return setValidatorMessage(value);
+              });
+            }
+          )
+        );
+        if (props.initialValue != null) field.value = props.initialValue;
+        if (props.modelValue != null) field.value = props.modelValue;
+      }
+      fetchMentionSuggestionFunction();
+    });
+    const linkFormShown = shallowRef(false);
+    const headingMenu = ref();
+    const editLinkOverlay = ref();
+    const root = ref();
+    const previewImages = ref([]);
+    const imageDialogUploader = shallowRef(false);
+    const inputURLImage = shallowRef();
+    const selectedImage = shallowRef();
+    const mentionSuggestionList = shallowRef();
+    const field = reactive({
+      value: props.modelValue
     });
-    const O = x(!1), te = R(), z = R(), ae = R(), P = R([]), G = x(!1), T = x(), N = x(), j = x(), b = Ke({
-      value: l.modelValue
-    }), k = x(!1), $ = R([]), q = x(), Ae = X(
+    const isLoading = shallowRef(false);
+    const registeredMentionList = ref([]);
+    const mentionSectionTitle = shallowRef();
+    const inputPlaceholder = computed(
       () => {
-        var t;
-        return l.placeholder ?? "Tulis " + (l.label ? (t = l.label) == null ? void 0 : t.toLowerCase() : "");
+        var _a;
+        return props.placeholder ?? "Tulis " + (props.label ? (_a = props.label) == null ? void 0 : _a.toLowerCase() : "");
       }
-    ), a = vt({
-      content: l.initialValue ?? l.modelValue,
-      onBlur: (t) => V("blur", t),
-      onFocus: (t) => V("focus", t),
+    );
+    const editor = useEditor({
+      content: props.initialValue ?? props.modelValue,
+      onBlur: (e) => emit("blur", e),
+      onFocus: (e) => emit("focus", e),
       onUpdate: () => {
-        var t, e;
-        V("update:modelValue", ((t = a.value) == null ? void 0 : t.getJSON()) ?? {}), b.value = ((e = a.value) == null ? void 0 : e.getJSON()) ?? {};
+        var _a, _b;
+        emit("update:modelValue", ((_a = editor.value) == null ? void 0 : _a.getJSON()) ?? {});
+        field.value = ((_b = editor.value) == null ? void 0 : _b.getJSON()) ?? {};
       },
-      onPaste: async (t) => {
-        let e = [];
-        const { items: n } = t.clipboardData, o = (i) => new Promise((u) => {
-          if (i.kind === "file") {
-            const p = i.getAsFile();
-            p && e.push(p), u();
-          } else
-            u();
-        });
-        await Promise.all(Array.from(n).map(o));
+      onPaste: async (e) => {
+        let pastedFiles = [];
+        const { items } = e.clipboardData;
+        const processItem = (item) => {
+          return new Promise((resolve) => {
+            if (item.kind === "file") {
+              const file = item.getAsFile();
+              if (file) {
+                pastedFiles.push(file);
+              }
+              resolve();
+            } else {
+              resolve();
+            }
+          });
+        };
+        await Promise.all(Array.from(items).map(processItem));
         try {
-          if (e.length) {
-            const i = e.filter((u) => u.type.startsWith("image/")).filter((u) => _t(u, 10));
-            await le(i);
+          if (pastedFiles.length) {
+            const validImages = pastedFiles.filter((file) => file.type.startsWith("image/")).filter((file) => validateFileSize(file, 10));
+            await setPreviewImages(validImages);
           }
-        } catch (i) {
-          console.error("Error pasting images:", i);
+        } catch (error) {
+          console.error("Error pasting images:", error);
         } finally {
-          e = [];
+          pastedFiles = [];
         }
       },
-      onSelectionUpdate(t) {
-        var n;
-        const e = t.editor.getAttributes(
+      onSelectionUpdate(selectedEvent) {
+        var _a;
+        const imageSelectedNode = selectedEvent.editor.getAttributes(
           "image"
         );
-        (n = a.value) == null || n.state.doc.descendants((o) => {
-          o.type.name === "mention" && $.value.push(o.attrs.id);
-        }), $.value = Array.from(
-          new Set($.value)
-        ), e.title === "localImage" ? N.value = e : N.value = void 0;
+        (_a = editor.value) == null ? void 0 : _a.state.doc.descendants((node) => {
+          if (node.type.name === "mention") {
+            registeredMentionList.value.push(node.attrs.id);
+          }
+        });
+        registeredMentionList.value = Array.from(
+          new Set(registeredMentionList.value)
+        );
+        if (imageSelectedNode.title === "localImage") {
+          selectedImage.value = imageSelectedNode;
+        } else {
+          selectedImage.value = void 0;
+        }
       },
-      editable: l.editorState === "editable",
+      editable: props.editorState === "editable",
       extensions: [
-        ut.configure({
+        Placeholder.configure({
           emptyEditorClass: "is-editor-empty !text-general-200 !font-light",
-          placeholder: Ae.value,
-          includeChildren: !1
+          placeholder: inputPlaceholder.value,
+          includeChildren: false
         }),
-        et.extend({
+        Document.extend({
           addKeyboardShortcuts() {
             return {
-              "Mod-\\": () => (this.editor.commands.clearNodes(), this.editor.commands.unsetAllMarks())
+              "Mod-\\": () => {
+                this.editor.commands.clearNodes();
+                return this.editor.commands.unsetAllMarks();
+              }
             };
           }
         }),
         // Blocks
-        at,
-        ct,
-        mt,
-        lt.extend({
+        Heading,
+        Paragraph,
+        Text,
+        Image.extend({
           addKeyboardShortcuts() {
-            const t = () => {
-              const { node: e } = this.editor.state.selection;
-              return e && e.type.name === "image" && e.attrs.title === "localImage" ? (ne(), !0) : !1;
+            const deleteOrBackspace = () => {
+              const { node } = this.editor.state.selection;
+              if (node && node.type.name === "image" && node.attrs.title === "localImage") {
+                unsetImage();
+                return true;
+              }
+              return false;
             };
             return {
-              Insert: () => oe(),
-              Backspace: t,
-              Delete: t
+              Insert: () => setImageDialog(),
+              Backspace: deleteOrBackspace,
+              Delete: deleteOrBackspace
             };
           }
         }).configure({
@@ -291,170 +379,186 @@ const It = ke.create({
             class: "w-fit max-h-[300px] object-contain"
           }
         }),
-        It.extend({
+        CodeSnippetExtension.extend({
           addKeyboardShortcuts() {
             return {
-              "Mod-alt-c": ie
+              "Mod-alt-c": codeSnippetTrigger
             };
           }
         }),
-        Bt,
-        dt.configure({
+        MentionSectionExtension,
+        OrderedList.configure({
           HTMLAttributes: {
             class: "list-decimal px-3 py-1"
           }
         }),
-        Ye.configure({
+        BulletList.configure({
           HTMLAttributes: {
             class: "list-disc px-3 py-1"
           }
         }),
-        st,
+        ListItem,
         // Marks
-        Xe,
-        nt,
-        pt,
-        Ze,
-        it.extend({
+        Bold,
+        Italic,
+        Underline,
+        Code,
+        Link.extend({
           addKeyboardShortcuts() {
             return {
-              "Mod-k": () => J()
+              "Mod-k": () => openLinkForm()
             };
           }
         }).configure({
-          openOnClick: !1
+          openOnClick: false
         }),
-        ot,
-        rt.configure({
+        History,
+        Mention.configure({
           HTMLAttributes: {
             class: "bg-primary-200 text-primary-800 rounded-[50px] px-1"
           },
           suggestion: {
-            items({ query: t }) {
-              return ((j == null ? void 0 : j.value) ?? []).filter((e) => e == null ? void 0 : e.fullName.toLowerCase().includes(t.toLowerCase())).map((e) => ({
-                id: e == null ? void 0 : e._id,
-                label: e == null ? void 0 : e.fullName,
-                nickName: e.nickName,
-                profilePicture: e.profilePicture
-              }));
+            items({ query }) {
+              return ((mentionSuggestionList == null ? void 0 : mentionSuggestionList.value) ?? []).filter((item) => {
+                return item == null ? void 0 : item.fullName.toLowerCase().includes(query.toLowerCase());
+              }).map((item) => {
+                return {
+                  id: item == null ? void 0 : item._id,
+                  label: item == null ? void 0 : item.fullName,
+                  nickName: item.nickName,
+                  profilePicture: item.profilePicture
+                };
+              });
             },
-            ...Ht()
+            ...suggestion()
           }
         }),
-        tt
+        FloatingMenu
       ]
-    }), Le = X(() => {
-      var S, y, A, L, I, B, H, F, W, re, de, ce, ue, me, pe, fe;
-      if (!a.value) return [];
+    });
+    const toolbars = computed(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      if (!editor.value) return [];
       const {
-        toggleBold: t,
-        focus: e,
-        toggleItalic: n,
-        toggleUnderline: o,
-        toggleBulletList: i,
-        toggleCode: u,
-        toggleOrderedList: p,
-        unsetAllMarks: C,
-        clearNodes: w
-      } = a.value.commands, h = (S = a.value) == null ? void 0 : S.isActive("code");
+        toggleBold,
+        focus,
+        toggleItalic,
+        toggleUnderline,
+        toggleBulletList,
+        toggleCode,
+        toggleOrderedList,
+        unsetAllMarks,
+        clearNodes
+      } = editor.value.commands;
+      const isInlineCode = (_a = editor.value) == null ? void 0 : _a.isActive("code");
       return [
         {
           label: "Aa",
           iconPos: "right",
           icon: "arrow-down",
           class: "!gap-0 !w-[50px] !p-0 !m-0 [&_span]:leading-[22px]",
-          onClick: (y = te.value) == null ? void 0 : y.toggle
+          onClick: (_b = headingMenu.value) == null ? void 0 : _b.toggle
         },
         {
           icon: "bold",
           tooltipText: "Bold | Ctrl + B",
-          active: (A = a.value) == null ? void 0 : A.isActive("bold"),
-          disabled: h,
+          active: (_c = editor.value) == null ? void 0 : _c.isActive("bold"),
+          disabled: isInlineCode,
           onClick: () => {
-            e(), t();
+            focus();
+            toggleBold();
           }
         },
         {
           icon: "italic",
           tooltipText: "Italic | Ctrl + I",
-          active: (L = a.value) == null ? void 0 : L.isActive("italic"),
-          disabled: h,
+          active: (_d = editor.value) == null ? void 0 : _d.isActive("italic"),
+          disabled: isInlineCode,
           onClick: () => {
-            e(), n();
+            focus();
+            toggleItalic();
           }
         },
         {
           icon: "underline",
           class: "mr-3",
-          active: (I = a.value) == null ? void 0 : I.isActive("underline"),
+          active: (_e = editor.value) == null ? void 0 : _e.isActive("underline"),
           tooltipText: "Underline | Ctrl + U",
-          disabled: h,
+          disabled: isInlineCode,
           onClick: () => {
-            e(), o();
+            focus();
+            toggleUnderline();
           }
         },
         {
           icon: "list-unordered",
           tooltipText: "Bullet List | Ctrl + 7",
-          active: (B = a.value) == null ? void 0 : B.isActive("bullet-list"),
+          active: (_f = editor.value) == null ? void 0 : _f.isActive("bullet-list"),
           onClick: () => {
-            e(), i();
+            focus();
+            toggleBulletList();
           }
         },
         {
           icon: "list-ordered",
           tooltipText: "Numbered List | Ctrl + 8",
-          active: (H = a.value) == null ? void 0 : H.isActive("ordered-list"),
+          active: (_g = editor.value) == null ? void 0 : _g.isActive("ordered-list"),
           class: "mr-3",
           onClick: () => {
-            e(), p();
+            focus();
+            toggleOrderedList();
           }
         },
         {
           icon: "link-m",
           tooltipText: "Link | Ctrl + K",
-          disabled: ((F = a.value) == null ? void 0 : F.isActive("link")) || O.value,
-          onClick: J
+          disabled: ((_h = editor.value) == null ? void 0 : _h.isActive("link")) || linkFormShown.value,
+          onClick: openLinkForm
         },
         {
           icon: "image-add",
-          active: (W = a.value) == null ? void 0 : W.isActive("image"),
+          active: (_i = editor.value) == null ? void 0 : _i.isActive("image"),
           tooltipText: "Image | Insert",
-          onClick: () => oe()
+          onClick: () => setImageDialog()
         },
         {
           icon: "code-line",
-          active: (re = a.value) == null ? void 0 : re.isActive("code"),
+          active: (_j = editor.value) == null ? void 0 : _j.isActive("code"),
           tooltipText: "Inline Code | Ctrl + E",
           onClick: () => {
-            e(), u();
+            focus();
+            toggleCode();
           }
         },
         {
           icon: "code-box-line",
-          active: (de = a.value) == null ? void 0 : de.isActive("codeSnippet"),
+          active: (_k = editor.value) == null ? void 0 : _k.isActive("codeSnippet"),
           tooltipText: "Code Block | Ctrl + Alt + C",
           onClick: () => {
-            ie();
+            codeSnippetTrigger();
           }
         },
         {
           icon: "format-clear",
           tooltipText: "Clear Formatting Ctrl + \\",
-          disabled: !((ce = a.value) != null && ce.isActive("bold")) && !((ue = a.value) != null && ue.isActive("underline")) && !((me = a.value) != null && me.isActive("italic")) && !((pe = a.value) != null && pe.isActive("code")) && !((fe = a.value) != null && fe.isActive("heading")),
+          disabled: !((_l = editor.value) == null ? void 0 : _l.isActive("bold")) && !((_m = editor.value) == null ? void 0 : _m.isActive("underline")) && !((_n = editor.value) == null ? void 0 : _n.isActive("italic")) && !((_o = editor.value) == null ? void 0 : _o.isActive("code")) && !((_p = editor.value) == null ? void 0 : _p.isActive("heading")),
           onClick: () => {
-            e(), w(), C();
+            focus();
+            clearNodes();
+            unsetAllMarks();
           }
         }
       ];
-    }), Me = x([
+    });
+    const headings = shallowRef([
       {
         label: "Paragraf",
         class: "p",
         shortCut: "Ctrl+Alt+P",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setParagraph();
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setParagraph();
         }
       },
       {
@@ -462,8 +566,9 @@ const It = ke.create({
         class: "heading-1",
         shortCut: "Ctrl+Alt+1",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setHeading({ level: 1 });
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 1 });
         }
       },
       {
@@ -471,8 +576,9 @@ const It = ke.create({
         class: "heading-2",
         shortCut: "Ctrl+Alt+2",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setHeading({ level: 2 });
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 2 });
         }
       },
       {
@@ -480,8 +586,9 @@ const It = ke.create({
         label: "Heading 3",
         shortCut: "Ctrl+Alt+3",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setHeading({ level: 3 });
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 3 });
         }
       },
       {
@@ -489,8 +596,9 @@ const It = ke.create({
         class: "heading-4",
         shortCut: "Ctrl+Alt+4",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setHeading({ level: 4 });
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 4 });
         }
       },
       {
@@ -498,8 +606,9 @@ const It = ke.create({
         class: "heading-5",
         shortCut: "Ctrl+Alt+5",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setHeading({ level: 5 });
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 5 });
         }
       },
       {
@@ -507,180 +616,265 @@ const It = ke.create({
         class: "heading-6",
         shortCut: "Ctrl+Alt+6",
         command: () => {
-          var t, e;
-          (t = a.value) == null || t.commands.focus(), (e = a.value) == null || e.commands.setHeading({ level: 6 });
+          var _a, _b;
+          (_a = editor.value) == null ? void 0 : _a.commands.focus();
+          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 6 });
         }
       }
-    ]), K = X(() => {
-      var t;
-      return (t = a.value) == null ? void 0 : t.getAttributes("link");
-    }), Te = () => {
-      var n;
-      const { href: t } = K.value, e = (n = a.value) == null ? void 0 : n.view.dom.querySelector(`[href="${t}"]`);
-      return Ve() || e && (e == null ? void 0 : e.textContent) !== t && e.textContent || void 0;
-    }, Ie = () => {
-      var t;
-      window.open((t = K.value) == null ? void 0 : t.href, "_blank");
-    }, Be = () => {
-      var t;
-      window.navigator.clipboard.writeText((t = K.value) == null ? void 0 : t.href);
-    }, He = () => {
-      var t;
-      if (a.value) {
-        const { unsetLink: e, focus: n } = ((t = a.value) == null ? void 0 : t.commands) ?? {};
-        n(), e();
+    ]);
+    const currentActiveLink = computed(() => {
+      var _a;
+      return (_a = editor.value) == null ? void 0 : _a.getAttributes("link");
+    });
+    const getInitialAnchorText = () => {
+      var _a;
+      const { href } = currentActiveLink.value;
+      const anchor = (_a = editor.value) == null ? void 0 : _a.view.dom.querySelector(`[href="${href}"]`);
+      return getSelectedText() || (anchor && (anchor == null ? void 0 : anchor.textContent) !== href ? anchor.textContent || void 0 : void 0);
+    };
+    const openLinkInNewTab = () => {
+      var _a;
+      window.open((_a = currentActiveLink.value) == null ? void 0 : _a.href, "_blank");
+    };
+    const copyLink = () => {
+      var _a;
+      window.navigator.clipboard.writeText((_a = currentActiveLink.value) == null ? void 0 : _a.href);
+    };
+    const unsetLinkFunction = () => {
+      var _a;
+      if (editor.value) {
+        const { unsetLink, focus } = ((_a = editor.value) == null ? void 0 : _a.commands) ?? {};
+        focus();
+        unsetLink();
       }
-    }, Ve = () => {
-      if (a.value) {
-        const { state: t } = a.value, { from: e, to: n } = t.selection;
-        return t == null ? void 0 : t.doc.textBetween(e, n, " ");
+    };
+    const getSelectedText = () => {
+      if (editor.value) {
+        const { state } = editor.value;
+        const { from, to } = state.selection;
+        return state == null ? void 0 : state.doc.textBetween(from, to, " ");
       }
-    }, oe = () => (G.value = !0, !1), le = async (t) => {
-      if (l.isImageUploadBase64) {
-        const e = await Fe(t[0]);
-        Q(e);
-      } else
-        V("postImageLocal", {
-          image: t[0],
-          setImageCb: Q
+    };
+    const setImageDialog = () => {
+      imageDialogUploader.value = true;
+      return false;
+    };
+    const setPreviewImages = async (files) => {
+      if (props.isImageUploadBase64) {
+        const convertRes = await convertBase64(files[0]);
+        setImageFunction(convertRes);
+      } else {
+        emit("postImageLocal", {
+          image: files[0],
+          setImageCb: setImageFunction
         });
-    }, Pe = (t) => {
-      const { files: e } = t.target;
-      le(e);
-    }, Ne = (t = {}) => {
-      if (typeof l.validatorMessage == "string" && l.invalid)
-        return l.validatorMessage;
-      if (typeof l.validatorMessage != "string") {
-        const { empty: e } = l.validatorMessage ?? {};
-        if (t.content === void 0 && l.mandatory && e)
-          return e ?? !0;
       }
-      return !0;
-    }, J = (t) => {
-      var o, i, u, p;
-      const e = t ?? {
-        currentTarget: (i = (o = ae.value) == null ? void 0 : o.querySelector(".ic-link-m")) == null ? void 0 : i.closest("button")
-      }, { dom: n } = ((u = a.value) == null ? void 0 : u.view) ?? {};
-      return (p = z.value) == null || p.toggle(e, n), !0;
-    }, $e = ({ formValues: t }) => {
-      var C, w;
-      if (!a.value) return !1;
-      const { setLink: e, insertContent: n, focus: o } = a.value.commands, { url: i, text: u } = t, { state: p } = a.value;
-      return o(), e({
-        href: i,
+    };
+    const changeImages = (event) => {
+      const { files } = event.target;
+      setPreviewImages(files);
+    };
+    const setValidatorMessage = (value = {}) => {
+      if (typeof props.validatorMessage === "string" && props.invalid) {
+        return props.validatorMessage;
+      } else if (typeof props.validatorMessage !== "string") {
+        const { empty } = props.validatorMessage ?? {};
+        if (value.content === void 0 && props.mandatory && empty) {
+          return empty ?? true;
+        }
+      }
+      return true;
+    };
+    const openLinkForm = (e) => {
+      var _a, _b, _c, _d;
+      const event = e ?? {
+        currentTarget: (_b = (_a = root.value) == null ? void 0 : _a.querySelector(".ic-link-m")) == null ? void 0 : _b.closest("button")
+      };
+      const { dom } = ((_c = editor.value) == null ? void 0 : _c.view) ?? {};
+      (_d = editLinkOverlay.value) == null ? void 0 : _d.toggle(event, dom);
+      return true;
+    };
+    const setLinkFunction = ({ formValues }) => {
+      var _a, _b;
+      if (!editor.value) return false;
+      const { setLink, insertContent, focus } = editor.value.commands;
+      const { url, text } = formValues;
+      const { state } = editor.value;
+      focus();
+      setLink({
+        href: url,
         target: "_blank",
         rel: "nofollow"
-      }), (C = a.value) != null && C.isActive("link") ? a.value.chain().focus().command(({ tr: h, state: S }) => {
-        const { $from: y, $to: A } = S.selection, L = p.schema.marks.link;
-        let I = y.start(), B = A.end();
-        return p.doc.nodesBetween(y.pos, A.pos, (H, F) => {
-          H.isText && H.marks.some((W) => W.type === L) && (I = Math.min(I, F), B = Math.max(B, F + H.nodeSize));
-        }), h.insertText(u || i, I, B), !0;
-      }).run() : p.selection.empty && n(u || i), (w = z.value) == null || w.hide(), O.value = !1, !0;
-    }, Q = (t) => {
-      var e, n, o, i;
-      (e = a.value) == null || e.commands.focus(), t && (l.isImageUploadBase64 ? (n = a.value) == null || n.commands.setImage({
-        src: t,
-        title: "localImageBase64"
-      }) : (o = a.value) == null || o.commands.setImage({ src: t, title: "localImage" }), P.value = Array.from(
-        /* @__PURE__ */ new Set([...P.value, t])
-      )), T.value && ((i = a.value) == null || i.commands.setImage({ src: T.value }), P.value = Array.from(
-        /* @__PURE__ */ new Set([...P.value, T.value])
-      )), T.value = void 0, se();
-    }, ne = () => {
-      var t;
-      N.value && N.value.title === "localImage" && V("deleteImageLocal", N.value), (t = a.value) == null || t.commands.deleteSelection();
-    }, Fe = (t) => new Promise((e, n) => {
-      const o = new FileReader();
-      o.readAsDataURL(t), o.onload = () => {
-        e(o.result);
-      }, o.onerror = (i) => {
-        n(i);
-      };
-    }), Re = async () => {
-      if (l.fetchMentionSuggestionFunction) {
-        k.value = !k.value;
+      });
+      if ((_a = editor.value) == null ? void 0 : _a.isActive("link")) {
+        editor.value.chain().focus().command(({ tr, state: currState }) => {
+          const { $from, $to } = currState.selection;
+          const linkMark = state.schema.marks.link;
+          let start = $from.start(), end = $to.end();
+          state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+            if (node.isText && node.marks.some((mark) => mark.type === linkMark)) {
+              start = Math.min(start, pos);
+              end = Math.max(end, pos + node.nodeSize);
+            }
+          });
+          tr.insertText(text || url, start, end);
+          return true;
+        }).run();
+      } else if (state.selection.empty) {
+        insertContent(text || url);
+      }
+      (_b = editLinkOverlay.value) == null ? void 0 : _b.hide();
+      linkFormShown.value = false;
+      return true;
+    };
+    const setImageFunction = (imageUrl) => {
+      var _a, _b, _c, _d;
+      (_a = editor.value) == null ? void 0 : _a.commands.focus();
+      if (imageUrl) {
+        if (props.isImageUploadBase64) {
+          (_b = editor.value) == null ? void 0 : _b.commands.setImage({
+            src: imageUrl,
+            title: "localImageBase64"
+          });
+        } else {
+          (_c = editor.value) == null ? void 0 : _c.commands.setImage({ src: imageUrl, title: "localImage" });
+        }
+        previewImages.value = Array.from(
+          /* @__PURE__ */ new Set([...previewImages.value, imageUrl])
+        );
+      }
+      if (inputURLImage.value) {
+        (_d = editor.value) == null ? void 0 : _d.commands.setImage({ src: inputURLImage.value });
+        previewImages.value = Array.from(
+          /* @__PURE__ */ new Set([...previewImages.value, inputURLImage.value])
+        );
+      }
+      inputURLImage.value = void 0;
+      goToNextLine();
+    };
+    const unsetImage = () => {
+      var _a;
+      if (selectedImage.value && selectedImage.value.title === "localImage") {
+        emit("deleteImageLocal", selectedImage.value);
+      }
+      (_a = editor.value) == null ? void 0 : _a.commands.deleteSelection();
+    };
+    const convertBase64 = (file) => {
+      return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(file);
+        fileReader.onload = () => {
+          resolve(fileReader.result);
+        };
+        fileReader.onerror = (error) => {
+          reject(error);
+        };
+      });
+    };
+    const fetchMentionSuggestionFunction = async () => {
+      if (props.fetchMentionSuggestionFunction) {
+        isLoading.value = !isLoading.value;
         try {
-          const { data: t } = await l.fetchMentionSuggestionFunction() ?? {};
-          j.value = t, k.value = !k.value;
-        } catch (t) {
-          console.error(t);
+          const { data } = await props.fetchMentionSuggestionFunction() ?? {};
+          mentionSuggestionList.value = data;
+          isLoading.value = !isLoading.value;
+        } catch (error) {
+          console.error(error);
         }
       }
-    }, ie = () => {
-      var n, o;
-      const { insertCodeSnippet: t, deleteCodeSnippet: e } = (n = a.value) == null ? void 0 : n.commands;
-      return (o = a.value) != null && o.isActive("codeSnippet") ? e() : t(), !1;
-    }, se = () => {
-      a.value.commands.createParagraphNear();
-    }, Ee = (t) => {
-      var e;
+    };
+    const codeSnippetTrigger = () => {
+      var _a, _b;
+      const { insertCodeSnippet, deleteCodeSnippet } = (_a = editor.value) == null ? void 0 : _a.commands;
+      if ((_b = editor.value) == null ? void 0 : _b.isActive("codeSnippet")) {
+        deleteCodeSnippet();
+      } else {
+        insertCodeSnippet();
+      }
+      return false;
+    };
+    const goToNextLine = () => {
+      editor.value.commands.createParagraphNear();
+    };
+    const mentionSectionTrigger = (title) => {
+      var _a;
       try {
-        const { insertMentionSection: n } = (e = a.value) == null ? void 0 : e.commands;
-        n(t), q.value !== t && q.value !== void 0 && Ue(), q.value = t;
-      } catch (n) {
-        console.error(n);
+        const { insertMentionSection } = (_a = editor.value) == null ? void 0 : _a.commands;
+        insertMentionSection(title);
+        if (mentionSectionTitle.value !== title && mentionSectionTitle.value !== void 0) {
+          editorLoading();
+        }
+        mentionSectionTitle.value = title;
+      } catch (error) {
+        console.error(error);
       }
-    }, Ue = () => {
-      k.value = !0, setTimeout(() => {
-        k.value = !1;
+    };
+    const editorLoading = () => {
+      isLoading.value = true;
+      setTimeout(() => {
+        isLoading.value = false;
       }, 100);
     };
-    return g({
-      mentionSectionTrigger: Ee
-    }), be(
-      () => l.invalid,
+    __expose({
+      mentionSectionTrigger
+    });
+    watch(
+      () => props.invalid,
       () => {
-        var t;
-        (t = b.validate) == null || t.call(b);
+        var _a;
+        (_a = field.validate) == null ? void 0 : _a.call(field);
       }
-    ), be($, () => {
-      Se.value = $.value;
-    }), (t, e) => {
-      const n = We("focus");
-      return f(), E(Y, null, [
-        c(wt, {
-          info: t.fieldInfo,
-          label: l.label,
-          "label-class": l.labelClass,
-          mandatory: l.mandatory,
-          "show-optional-text": l.showOptionalText
+    );
+    watch(registeredMentionList, () => {
+      modelMentionedList.value = registeredMentionList.value;
+    });
+    return (_ctx, _cache) => {
+      const _directive_focus = resolveDirective("focus");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$4, {
+          info: _ctx.fieldInfo,
+          label: props.label,
+          "label-class": props.labelClass,
+          mandatory: props.mandatory,
+          "show-optional-text": props.showOptionalText
         }, {
-          default: v(() => [
-            d("div", {
+          default: withCtx(() => [
+            createElementVNode("div", {
               ref_key: "root",
-              ref: ae,
-              class: _([
+              ref: root,
+              class: normalizeClass([
                 "rounded-b text-grayscale-900 w-full",
                 "[&:has(:focus)]:border-general-200 border-general-100",
-                `${t.borderLess || t.editorState === "readonly" ? "border-none" : "border-[0.5px]"}`,
+                `${_ctx.borderLess || _ctx.editorState === "readonly" ? "border-none" : "border-[0.5px]"}`,
                 // Inline Code
                 "[&_code]:bg-primary-100",
                 "[&_code]:rounded-md",
                 "[&_code]:p-[0.25em_0.3em]",
                 "[&_code]:text-[0.85rem]",
                 "[&_code]:!font-source-code-pro",
-                `${l.editorWrapperClass}`
+                `${props.editorWrapperClass}`
               ]),
               "data-wv-name": "editor"
             }, [
-              l.editorState === "editable" ? (f(), E("div", {
+              props.editorState === "editable" ? (openBlock(), createElementBlock("div", {
                 key: 0,
-                class: _([
+                class: normalizeClass([
                   "border-b-[0.5px] border-inherit px-3 py-1 flex gap-1 bg-general-50",
-                  `${l.toolbarWrapperClass}`
+                  `${props.toolbarWrapperClass}`
                 ]),
                 "data-wv-section": "toolbar"
               }, [
-                (f(!0), E(Y, null, he(Le.value, (o) => (f(), D(M, ze({ ref_for: !0 }, o, {
-                  key: o.icon,
-                  class: [{ "!bg-primary-50 ": o.active }, o.class]
-                }), null, 16, ["class"]))), 128))
-              ], 2)) : U("", !0),
-              k.value ? U("", !0) : (f(), D(s(gt), {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(toolbars.value, (tool) => {
+                  return openBlock(), createBlock(_sfc_main$5, mergeProps({ ref_for: true }, tool, {
+                    key: tool.icon,
+                    class: [{ "!bg-primary-50 ": tool.active }, tool.class]
+                  }), null, 16, ["class"]);
+                }), 128))
+              ], 2)) : createCommentVNode("", true),
+              !isLoading.value ? (openBlock(), createBlock(unref(EditorContent), {
                 key: 1,
-                class: _([
-                  `${l.editorState === "editable" ? "px-3 py-2" : ""} [&_*]:outline-none`,
+                class: normalizeClass([
+                  `${props.editorState === "editable" ? "px-3 py-2" : ""} [&_*]:outline-none`,
                   "[&_.is-editor-empty:first-child::before]:text-general-200",
                   "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
                   "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
@@ -703,57 +897,57 @@ const It = ke.create({
                   "[&_img]:my-2",
                   // Inline Code
                   "[&_*:has(code)]:my-[0.25rem]",
-                  `${l.contentWrapperClass}`
+                  `${props.contentWrapperClass}`
                 ]),
-                editor: s(a),
+                editor: unref(editor),
                 spellcheck: "false"
-              }, null, 8, ["class", "editor"])),
-              c(s(kt), {
+              }, null, 8, ["class", "editor"])) : createCommentVNode("", true),
+              createVNode(unref(script), {
                 ref_key: "headingMenu",
-                ref: te,
-                model: Me.value,
+                ref: headingMenu,
+                model: headings.value,
                 popup: ""
               }, {
-                item: v(({ item: o }) => {
-                  var i, u, p, C, w, h, S, y;
+                item: withCtx(({ item }) => {
+                  var _a, _b, _c, _d, _e, _f, _g, _h;
                   return [
-                    d("a", {
-                      class: _([
-                        ...(i = s(we)) == null ? void 0 : i.action.class,
-                        o.class,
+                    createElementVNode("a", {
+                      class: normalizeClass([
+                        ...(_a = unref(MenuPreset)) == null ? void 0 : _a.action.class,
+                        item.class,
                         "flex items-center !justify-between h-[30px]",
                         {
-                          "bg-primary-50": ((u = s(a)) == null ? void 0 : u.isActive("heading", { level: 1 })) && o.label === "Heading 1" || ((p = s(a)) == null ? void 0 : p.isActive("heading", { level: 2 })) && o.label === "Heading 2" || ((C = s(a)) == null ? void 0 : C.isActive("heading", { level: 3 })) && o.label === "Heading 3" || ((w = s(a)) == null ? void 0 : w.isActive("heading", { level: 4 })) && o.label === "Heading 4" || ((h = s(a)) == null ? void 0 : h.isActive("heading", { level: 5 })) && o.label === "Heading 5" || ((S = s(a)) == null ? void 0 : S.isActive("heading", { level: 6 })) && o.label === "Heading 6" || ((y = s(a)) == null ? void 0 : y.isActive("paragraph")) && o.label === "Paragraf"
+                          "bg-primary-50": ((_b = unref(editor)) == null ? void 0 : _b.isActive("heading", { level: 1 })) && item.label === "Heading 1" || ((_c = unref(editor)) == null ? void 0 : _c.isActive("heading", { level: 2 })) && item.label === "Heading 2" || ((_d = unref(editor)) == null ? void 0 : _d.isActive("heading", { level: 3 })) && item.label === "Heading 3" || ((_e = unref(editor)) == null ? void 0 : _e.isActive("heading", { level: 4 })) && item.label === "Heading 4" || ((_f = unref(editor)) == null ? void 0 : _f.isActive("heading", { level: 5 })) && item.label === "Heading 5" || ((_g = unref(editor)) == null ? void 0 : _g.isActive("heading", { level: 6 })) && item.label === "Heading 6" || ((_h = unref(editor)) == null ? void 0 : _h.isActive("paragraph")) && item.label === "Paragraf"
                         }
                       ]),
-                      title: o.label,
-                      onClick: (A) => {
-                        var L;
-                        return (L = o.command) == null ? void 0 : L.call(o, { item: o, originalEvent: A });
+                      title: item.label,
+                      onClick: ($event) => {
+                        var _a2;
+                        return (_a2 = item.command) == null ? void 0 : _a2.call(item, { item, originalEvent: $event });
                       }
                     }, [
-                      Ge(ye(o.label) + " ", 1),
-                      d("code", Pt, ye(o.shortCut), 1)
-                    ], 10, Vt)
+                      createTextVNode(toDisplayString(item.label) + " ", 1),
+                      createElementVNode("code", _hoisted_2, toDisplayString(item.shortCut), 1)
+                    ], 10, _hoisted_1)
                   ];
                 }),
                 _: 1
               }, 8, ["model"]),
-              s(a) && l.editorState === "editable" ? (f(), D(s(Z), {
+              unref(editor) && props.editorState === "editable" ? (openBlock(), createBlock(unref(FloatingMenu$1), {
                 key: 2,
-                editor: s(a),
+                editor: unref(editor),
                 "should-show": () => {
-                  var o, i;
-                  return ((o = s(a)) == null ? void 0 : o.isActive("codeSnippet")) || ((i = s(a)) == null ? void 0 : i.isActive("mentionSection"));
+                  var _a, _b;
+                  return ((_a = unref(editor)) == null ? void 0 : _a.isActive("codeSnippet")) || ((_b = unref(editor)) == null ? void 0 : _b.isActive("mentionSection"));
                 },
                 "tippy-options": { placement: "top", zIndex: 9 },
                 class: "-mt-1.5 shadow-panel",
                 "plugin-key": "editLinkToolbar"
               }, {
-                default: v(() => [
-                  d("div", Nt, [
-                    c(M, {
-                      onClick: se,
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_3, [
+                    createVNode(_sfc_main$5, {
+                      onClick: goToNextLine,
                       icon: "close",
                       severity: "secondary",
                       text: "",
@@ -762,46 +956,46 @@ const It = ke.create({
                   ])
                 ]),
                 _: 1
-              }, 8, ["editor", "should-show"])) : U("", !0),
-              s(a) && !O.value && l.editorState === "editable" ? (f(), D(s(Z), {
+              }, 8, ["editor", "should-show"])) : createCommentVNode("", true),
+              unref(editor) && !linkFormShown.value && props.editorState === "editable" ? (openBlock(), createBlock(unref(FloatingMenu$1), {
                 key: 3,
-                editor: s(a),
+                editor: unref(editor),
                 "should-show": () => {
-                  var o;
-                  return (o = s(a)) == null ? void 0 : o.isActive("link");
+                  var _a;
+                  return (_a = unref(editor)) == null ? void 0 : _a.isActive("link");
                 },
                 "tippy-options": { placement: "bottom", zIndex: 9 },
                 class: "-mt-1.5 shadow-panel",
                 "plugin-key": "editLinkToolbar"
               }, {
-                default: v(() => [
-                  d("div", $t, [
-                    c(M, {
-                      onClick: J,
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_sfc_main$5, {
+                      onClick: openLinkForm,
                       class: "!w-max",
                       label: "Edit Tautan",
                       severity: "secondary",
                       text: ""
                     }),
-                    e[4] || (e[4] = d("span", { class: "separator" }, null, -1)),
-                    c(M, {
-                      onClick: Ie,
+                    _cache[4] || (_cache[4] = createElementVNode("span", { class: "separator" }, null, -1)),
+                    createVNode(_sfc_main$5, {
+                      onClick: openLinkInNewTab,
                       icon: "external-link",
                       severity: "secondary",
                       text: "",
                       "tooltip-text": "Buka di tab baru"
                     }),
-                    e[5] || (e[5] = d("span", { class: "separator" }, null, -1)),
-                    c(M, {
-                      onClick: He,
+                    _cache[5] || (_cache[5] = createElementVNode("span", { class: "separator" }, null, -1)),
+                    createVNode(_sfc_main$5, {
+                      onClick: unsetLinkFunction,
                       icon: "link-unlink-m",
                       severity: "secondary",
                       text: "",
                       "tooltip-text": "Lepas tautan"
                     }),
-                    e[6] || (e[6] = d("span", { class: "separator" }, null, -1)),
-                    c(M, {
-                      onClick: Be,
+                    _cache[6] || (_cache[6] = createElementVNode("span", { class: "separator" }, null, -1)),
+                    createVNode(_sfc_main$5, {
+                      onClick: copyLink,
                       icon: "file-copy",
                       severity: "secondary",
                       text: "",
@@ -810,53 +1004,55 @@ const It = ke.create({
                   ])
                 ]),
                 _: 1
-              }, 8, ["editor", "should-show"])) : U("", !0),
-              c(Ct, {
-                visible: G.value,
-                "onUpdate:visible": e[2] || (e[2] = (o) => G.value = o),
+              }, 8, ["editor", "should-show"])) : createCommentVNode("", true),
+              createVNode(_sfc_main$6, {
+                visible: imageDialogUploader.value,
+                "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => imageDialogUploader.value = $event),
                 class: "w-[400px]",
                 header: "Pilih Gambar"
               }, {
-                default: v(() => [
-                  d("div", Ft, [
-                    d("div", Rt, [
-                      d("div", Et, [
-                        c(xe, {
-                          "model-value": T.value,
-                          "onUpdate:modelValue": e[0] || (e[0] = (o) => T.value = o),
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_5, [
+                    createElementVNode("div", _hoisted_6, [
+                      createElementVNode("div", _hoisted_7, [
+                        createVNode(_sfc_main$7, {
+                          "model-value": inputURLImage.value,
+                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputURLImage.value = $event),
                           class: "w-[269px]",
                           label: "URL Gambar"
                         }, null, 8, ["model-value"])
                       ]),
-                      d("div", Ut, [
-                        c(ee, {
-                          onClick: e[1] || (e[1] = (o) => Q()),
+                      createElementVNode("div", _hoisted_8, [
+                        createVNode(_sfc_main$8, {
+                          onClick: _cache[1] || (_cache[1] = ($event) => setImageFunction()),
                           label: "Simpan",
                           severity: "secondary"
                         })
                       ])
                     ]),
-                    d("div", null, [
-                      e[8] || (e[8] = d("p", null, "Baru Saja Ditambahkan", -1)),
-                      d("div", Dt, [
-                        (f(!0), E(Y, null, he(P.value, (o, i) => (f(), E("img", {
-                          key: i,
-                          src: o,
-                          alt: "preview",
-                          class: "w-28 h-28 object-scale-down rounded-lg"
-                        }, null, 8, Ot))), 128)),
-                        d("div", jt, [
-                          c(At, {
+                    createElementVNode("div", null, [
+                      _cache[8] || (_cache[8] = createElementVNode("p", null, "Baru Saja Ditambahkan", -1)),
+                      createElementVNode("div", _hoisted_9, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(previewImages.value, (previewImage, index) => {
+                          return openBlock(), createElementBlock("img", {
+                            key: index,
+                            src: previewImage,
+                            alt: "preview",
+                            class: "w-28 h-28 object-scale-down rounded-lg"
+                          }, null, 8, _hoisted_10);
+                        }), 128)),
+                        createElementVNode("div", _hoisted_11, [
+                          createVNode(_sfc_main$9, {
                             class: "!w-[70px] !h-[70px]",
                             icon: "upload-2",
                             severity: "primary"
                           }),
-                          c(ee, { severity: "secondary" }, {
-                            default: v(() => [
-                              d("div", Kt, [
-                                e[7] || (e[7] = d("p", null, "Cari Gambar", -1)),
-                                d("input", {
-                                  onChange: Pe,
+                          createVNode(_sfc_main$8, { severity: "secondary" }, {
+                            default: withCtx(() => [
+                              createElementVNode("div", _hoisted_12, [
+                                _cache[7] || (_cache[7] = createElementVNode("p", null, "Cari Gambar", -1)),
+                                createElementVNode("input", {
+                                  onChange: changeImages,
                                   class: "opacity-0 absolute top-0 bottom-0 left-0 right-0",
                                   type: "file"
                                 }, null, 32)
@@ -871,21 +1067,21 @@ const It = ke.create({
                 ]),
                 _: 1
               }, 8, ["visible"]),
-              s(a) && l.editorState === "editable" ? (f(), D(s(Z), {
+              unref(editor) && props.editorState === "editable" ? (openBlock(), createBlock(unref(FloatingMenu$1), {
                 key: 4,
-                editor: s(a),
+                editor: unref(editor),
                 "should-show": () => {
-                  var o;
-                  return !!((o = s(a)) != null && o.isActive("image"));
+                  var _a;
+                  return !!((_a = unref(editor)) == null ? void 0 : _a.isActive("image"));
                 },
                 "tippy-options": { placement: "top", zIndex: 9 },
                 class: "-mt-1.5 shadow-panel",
                 "plugin-key": "editImageToolbar"
               }, {
-                default: v(() => [
-                  d("div", Wt, [
-                    c(M, {
-                      onClick: ne,
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_13, [
+                    createVNode(_sfc_main$5, {
+                      onClick: unsetImage,
                       icon: "delete-bin",
                       severity: "secondary",
                       text: "",
@@ -894,56 +1090,56 @@ const It = ke.create({
                   ])
                 ]),
                 _: 1
-              }, 8, ["editor", "should-show"])) : U("", !0)
+              }, 8, ["editor", "should-show"])) : createCommentVNode("", true)
             ], 2),
-            c(Tt, {
-              class: _(t.validatorMessageClass),
-              message: b.errorMessage
+            createVNode(_sfc_main$a, {
+              class: normalizeClass(_ctx.validatorMessageClass),
+              message: field.errorMessage
             }, null, 8, ["class", "message"])
           ]),
           _: 1
         }, 8, ["info", "label", "label-class", "mandatory", "show-optional-text"]),
-        c(Mt, {
+        createVNode(_sfc_main$b, {
           ref_key: "editLinkOverlay",
-          ref: z,
+          ref: editLinkOverlay,
           pt: {
             content: {
               class: ""
             }
           },
-          onHide: e[3] || (e[3] = (o) => O.value = !1),
+          onHide: _cache[3] || (_cache[3] = ($event) => linkFormShown.value = false),
           "append-to": "self",
           class: "w-[342px] bg-white p-4"
         }, {
-          default: v(() => [
-            c(St, {
-              onSubmit: $e,
+          default: withCtx(() => [
+            createVNode(_sfc_main$c, {
+              onSubmit: setLinkFunction,
               class: "!gap-0",
               "hide-stay-checkbox": ""
             }, {
-              fields: v(() => {
-                var o, i;
+              fields: withCtx(() => {
+                var _a, _b;
                 return [
-                  qe(c(xe, {
+                  withDirectives(createVNode(_sfc_main$7, {
                     "validator-message": { empty: "Masukan tautan yang valid" },
-                    value: (o = K.value) == null ? void 0 : o.href,
+                    value: (_a = currentActiveLink.value) == null ? void 0 : _a.href,
                     "field-name": "url",
                     label: "Tempel Tautan",
                     mandatory: "",
                     placeholder: "Tempel tautan baru",
                     "use-validator": ""
                   }, null, 8, ["value"]), [
-                    [n]
+                    [_directive_focus]
                   ]),
-                  c(Lt, {
-                    value: Te(),
+                  createVNode(_sfc_main$d, {
+                    value: getInitialAnchorText(),
                     "field-name": "text",
                     label: "Teks Tampilan",
                     placeholder: "Teks untuk ditampilkan",
                     "use-validator": ""
                   }, null, 8, ["value"]),
-                  c(ee, {
-                    label: (i = s(a)) != null && i.isActive("link") ? "Simpan" : "Tambahkan",
+                  createVNode(_sfc_main$8, {
+                    label: ((_b = unref(editor)) == null ? void 0 : _b.isActive("link")) ? "Simpan" : "Tambahkan",
                     class: "w-max ml-auto",
                     severity: "secondary",
                     type: "submit"
@@ -960,5 +1156,5 @@ const It = ke.create({
   }
 });
 export {
-  Ta as _
+  _sfc_main as _
 };