@fewangsit/wangsvue-fats 1.0.1-rc.9 → 2.0.0-alpha.1

package/editor/index.es.js

@@ -0,0 +1,968 @@
+import { defineComponent as De, useModel as ve, inject as Oe, onMounted as je, shallowRef as x, ref as R, reactive as Ke, computed as X, watch as ge, resolveDirective as We, openBlock as f, createElementBlock as E, Fragment as Y, createVNode as c, withCtx as v, createElementVNode as d, normalizeClass as _, renderList as be, createBlock as U, mergeProps as ze, createCommentVNode as D, unref as r, createTextVNode as Ge, toDisplayString as he, withDirectives as qe, mergeModels as ye, nextTick as Je } from "vue";
+import { B as Qe } from "../vendor/@tiptap/extension-bold/dist/index.es.js";
+import { B as Xe } from "../vendor/@tiptap/extension-bullet-list/dist/index.es.js";
+import { C as Ye } from "../vendor/@tiptap/extension-code/dist/index.es.js";
+import { D as Ze } from "../vendor/@tiptap/extension-document/dist/index.es.js";
+import { a as et } from "../vendor/@tiptap/extension-floating-menu/dist/index.es.js";
+import { H as tt } from "../vendor/@tiptap/extension-heading/dist/index.es.js";
+import { H as at } from "../vendor/@tiptap/extension-history/dist/index.es.js";
+import { I as ot } from "../vendor/@tiptap/extension-image/dist/index.es.js";
+import { I as lt } from "../vendor/@tiptap/extension-italic/dist/index.es.js";
+import { L as nt } from "../vendor/@tiptap/extension-link/dist/index.es.js";
+import { L as it } 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 st } from "../vendor/@tiptap/extension-ordered-list/dist/index.es.js";
+import { P as dt } from "../vendor/@tiptap/extension-paragraph/dist/index.es.js";
+import { P as ct } from "../vendor/@tiptap/extension-placeholder/dist/index.es.js";
+import { T as ut } from "../vendor/@tiptap/extension-text/dist/index.es.js";
+import { U as mt } from "../vendor/@tiptap/extension-underline/dist/index.es.js";
+import { V as _e, a as pt, u as ft, E as vt, F as Z } from "../vendor/@tiptap/vue-3/dist/index.es.js";
+import { s as gt } from "../vendor/primevue/menu/menu.esm.es.js";
+import { u as bt } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { N as ke, b as Ce } from "../vendor/@tiptap/core/dist/index.es.js";
+import { _ as ht } from "../codesnippetadapter/index.es.js";
+import { _ as M } from "../editorbutton/index.es.js";
+import { _ as yt } from "../mentionsection/index.es.js";
+import { t as xt } from "../vendor/tippy.js/dist/tippy.esm.es.js";
+import { _ as _t } from "../mentionlist/index.es.js";
+import { v as kt } from "../utils/addAttachment.util.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";
+const It = ke.create({
+  name: "codeSnippet",
+  group: "block",
+  atom: !0,
+  addAttributes() {
+    return {
+      code: {
+        default: ""
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "codeSnippet"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: s }) {
+    return ["codeSnippet", Ce(s)];
+  },
+  addNodeView() {
+    return _e(ht);
+  },
+  addCommands() {
+    return {
+      insertCodeSnippet: () => ({ commands: s }) => s.insertContent({
+        type: "codeSnippet",
+        attrs: { code: "" }
+      }),
+      deleteCodeSnippet: () => ({ commands: s }) => s.deleteSelection()
+    };
+  }
+}), Bt = ke.create({
+  name: "mentionSection",
+  group: "block",
+  atom: !0,
+  addAttributes() {
+    return {
+      title: {
+        default: ""
+      },
+      bodyText: {
+        default: ""
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mentionSection"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: s }) {
+    return ["mentionSection", Ce(s)];
+  },
+  addNodeView() {
+    return _e(yt);
+  },
+  addCommands() {
+    return {
+      insertMentionSection: (s) => ({ commands: g }) => g.insertContent({
+        type: "mentionSection",
+        attrs: {
+          title: s,
+          bodyText: null
+        }
+      }),
+      deleteMentionSection: () => ({ commands: s }) => s.deleteSelection()
+    };
+  }
+}), Ht = () => ({
+  render: () => {
+    let s, g;
+    return {
+      onStart(m) {
+        s = new pt(_t, {
+          props: {
+            items: m.items,
+            command: m.command
+          },
+          editor: m.editor
+        }), m.clientRect && (g = xt("body", {
+          getReferenceClientRect: m.clientRect,
+          appendTo: () => document.body,
+          content: s.element,
+          showOnCreate: !0,
+          interactive: !0,
+          trigger: "manual",
+          placement: "bottom-start"
+        }));
+      },
+      onUpdate(m) {
+        s.updateProps(m), m.clientRect && g[0].setProps({
+          getReferenceClientRect: m.clientRect
+        });
+      },
+      onKeyDown(m) {
+        return m.event.key === "Escape" ? (g[0].hide(), !0) : s.ref.onKeyDown(m.event);
+      },
+      onExit() {
+        g[0].destroy(), s.destroy();
+      }
+    };
+  }
+}), Vt = ["title", "onClick"], Pt = { class: "!text-[9px] !leading-3 !h-max !font-normal" }, Nt = {
+  class: /* @__PURE__ */ _([
+    "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"
+  ])
+}, $t = {
+  class: /* @__PURE__ */ _([
+    "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"
+  ])
+}, 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__ */ _([
+    "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"
+  ])
+}, Ta = /* @__PURE__ */ De({
+  __name: "Editor",
+  props: /* @__PURE__ */ ye({
+    modelValue: {},
+    initialValue: {},
+    placeholder: { default: "Tulis" },
+    editorState: { default: "editable" },
+    borderLess: { type: Boolean, default: !1 },
+    label: {},
+    useValidator: { type: Boolean },
+    fieldName: {},
+    labelClass: {},
+    fieldInfo: {},
+    validatorMessageClass: {},
+    validatorMessage: {},
+    mandatory: { type: Boolean },
+    invalid: { type: Boolean },
+    showOptionalText: { type: Boolean, default: void 0 },
+    isImageUploadBase64: { type: Boolean, default: !1 },
+    fetchMentionSuggestionFunction: {},
+    mentionedList: {},
+    editorWrapperClass: {},
+    toolbarWrapperClass: {},
+    contentWrapperClass: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {},
+    mentionedList: {},
+    mentionedListModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ye(["update:modelValue", "postImageLocal", "deleteImageLocal", "blur", "focus", "update:mentionedList"], ["update:modelValue", "update:mentionedList"]),
+  setup(s, { expose: g, emit: m }) {
+    const l = s, V = m;
+    ve(s, "modelValue");
+    const we = ve(s, "mentionedList"), Se = Oe("preset", {}).menu;
+    je(() => {
+      l.useValidator && (Object.assign(
+        b,
+        bt(
+          () => l.fieldName ?? "editorInput",
+          (t) => Je(() => Ne(t))
+        )
+      ), l.initialValue != null && (b.value = l.initialValue), l.modelValue != null && (b.value = l.modelValue)), Re();
+    });
+    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(
+      () => {
+        var t;
+        return l.placeholder ?? "Tulis " + (l.label ? (t = l.label) == null ? void 0 : t.toLowerCase() : "");
+      }
+    ), a = ft({
+      content: l.initialValue ?? l.modelValue,
+      onBlur: (t) => V("blur", t),
+      onFocus: (t) => V("focus", t),
+      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()) ?? {};
+      },
+      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));
+        try {
+          if (e.length) {
+            const i = e.filter((u) => u.type.startsWith("image/")).filter((u) => kt(u, 10));
+            await le(i);
+          }
+        } catch (i) {
+          console.error("Error pasting images:", i);
+        } finally {
+          e = [];
+        }
+      },
+      onSelectionUpdate(t) {
+        var n;
+        const e = t.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;
+      },
+      editable: l.editorState === "editable",
+      extensions: [
+        ct.configure({
+          emptyEditorClass: "is-editor-empty !text-general-200 dark:!text-general-600 !font-light",
+          placeholder: Ae.value,
+          includeChildren: !1
+        }),
+        Ze.extend({
+          addKeyboardShortcuts() {
+            return {
+              "Mod-\\": () => (this.editor.commands.clearNodes(), this.editor.commands.unsetAllMarks())
+            };
+          }
+        }),
+        // Blocks
+        tt,
+        dt,
+        ut,
+        ot.extend({
+          addKeyboardShortcuts() {
+            const t = () => {
+              const { node: e } = this.editor.state.selection;
+              return e && e.type.name === "image" && e.attrs.title === "localImage" ? (ne(), !0) : !1;
+            };
+            return {
+              Insert: () => oe(),
+              Backspace: t,
+              Delete: t
+            };
+          }
+        }).configure({
+          HTMLAttributes: {
+            class: "w-fit max-h-[300px] object-contain"
+          }
+        }),
+        It.extend({
+          addKeyboardShortcuts() {
+            return {
+              "Mod-alt-c": ie
+            };
+          }
+        }),
+        Bt,
+        st.configure({
+          HTMLAttributes: {
+            class: "list-decimal px-3 py-1"
+          }
+        }),
+        Xe.configure({
+          HTMLAttributes: {
+            class: "list-disc px-3 py-1"
+          }
+        }),
+        it,
+        // Marks
+        Qe,
+        lt,
+        mt,
+        Ye,
+        nt.extend({
+          addKeyboardShortcuts() {
+            return {
+              "Mod-k": () => J()
+            };
+          }
+        }).configure({
+          openOnClick: !1
+        }),
+        at,
+        rt.configure({
+          HTMLAttributes: {
+            class: "bg-primary-200 dark:bg-primary-300 text-primary-800 dark: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
+              }));
+            },
+            ...Ht()
+          }
+        }),
+        et
+      ]
+    }), Le = X(() => {
+      var S, y, A, L, I, B, H, F, W, se, de, ce, ue, me, pe, fe;
+      if (!a.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");
+      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
+        },
+        {
+          icon: "bold",
+          tooltipText: "Bold | Ctrl + B",
+          active: (A = a.value) == null ? void 0 : A.isActive("bold"),
+          disabled: h,
+          onClick: () => {
+            e(), t();
+          }
+        },
+        {
+          icon: "italic",
+          tooltipText: "Italic | Ctrl + I",
+          active: (L = a.value) == null ? void 0 : L.isActive("italic"),
+          disabled: h,
+          onClick: () => {
+            e(), n();
+          }
+        },
+        {
+          icon: "underline",
+          class: "mr-3",
+          active: (I = a.value) == null ? void 0 : I.isActive("underline"),
+          tooltipText: "Underline | Ctrl + U",
+          disabled: h,
+          onClick: () => {
+            e(), o();
+          }
+        },
+        {
+          icon: "list-unordered",
+          tooltipText: "Bullet List | Ctrl + 7",
+          active: (B = a.value) == null ? void 0 : B.isActive("bullet-list"),
+          onClick: () => {
+            e(), i();
+          }
+        },
+        {
+          icon: "list-ordered",
+          tooltipText: "Numbered List | Ctrl + 8",
+          active: (H = a.value) == null ? void 0 : H.isActive("ordered-list"),
+          class: "mr-3",
+          onClick: () => {
+            e(), p();
+          }
+        },
+        {
+          icon: "link-m",
+          tooltipText: "Link | Ctrl + K",
+          disabled: ((F = a.value) == null ? void 0 : F.isActive("link")) || O.value,
+          onClick: J
+        },
+        {
+          icon: "image-add",
+          active: (W = a.value) == null ? void 0 : W.isActive("image"),
+          tooltipText: "Image | Insert",
+          onClick: () => oe()
+        },
+        {
+          icon: "code-line",
+          active: (se = a.value) == null ? void 0 : se.isActive("code"),
+          tooltipText: "Inline Code | Ctrl + E",
+          onClick: () => {
+            e(), u();
+          }
+        },
+        {
+          icon: "code-box-line",
+          active: (de = a.value) == null ? void 0 : de.isActive("codeSnippet"),
+          tooltipText: "Code Block | Ctrl + Alt + C",
+          onClick: () => {
+            ie();
+          }
+        },
+        {
+          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")),
+          onClick: () => {
+            e(), w(), C();
+          }
+        }
+      ];
+    }), Me = x([
+      {
+        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();
+        }
+      },
+      {
+        label: "Heading 1",
+        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 });
+        }
+      },
+      {
+        label: "Heading 2",
+        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 });
+        }
+      },
+      {
+        class: "heading-3",
+        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 });
+        }
+      },
+      {
+        label: "Heading 4",
+        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 });
+        }
+      },
+      {
+        label: "Heading 5",
+        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 });
+        }
+      },
+      {
+        label: "Heading 6",
+        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 });
+        }
+      }
+    ]), 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();
+      }
+    }, 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, " ");
+      }
+    }, 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
+        });
+    }, 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,
+        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, re();
+    }, 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;
+        try {
+          const { data: t } = await l.fetchMentionSuggestionFunction() ?? {};
+          j.value = t, k.value = !k.value;
+        } catch (t) {
+          console.error(t);
+        }
+      }
+    }, 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;
+    }, re = () => {
+      a.value.commands.createParagraphNear();
+    }, Ee = (t) => {
+      var e;
+      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);
+      }
+    }, Ue = () => {
+      k.value = !0, setTimeout(() => {
+        k.value = !1;
+      }, 100);
+    };
+    return ge(
+      () => l.invalid,
+      () => {
+        var t;
+        (t = b.validate) == null || t.call(b);
+      }
+    ), ge($, () => {
+      we.value = $.value;
+    }), g({
+      mentionSectionTrigger: Ee
+    }), (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
+        }, {
+          default: v(() => [
+            d("div", {
+              ref_key: "root",
+              ref: ae,
+              class: _([
+                "rounded-b text-grayscale-900 dark:text-grayscale-100 w-full",
+                "[&:has(:focus)]:border-general-200 border-general-100",
+                `${t.borderLess || t.editorState === "readonly" ? "border-none" : "border-[0.5px]"}`,
+                // Inline Code
+                "[&_code]:bg-primary-100",
+                // TODO: Dark mode
+                "[&_code]:rounded-md",
+                "[&_code]:p-[0.25em_0.3em]",
+                "[&_code]:text-[0.85rem]",
+                "[&_code]:!font-source-code-pro",
+                `${l.editorWrapperClass}`
+              ]),
+              "data-wv-name": "editor"
+            }, [
+              l.editorState === "editable" ? (f(), E("div", {
+                key: 0,
+                class: _([
+                  "border-b-[0.5px] border-inherit px-3 py-1 flex gap-1 bg-general-50 dark:bg-grayscale-800",
+                  `${l.toolbarWrapperClass}`
+                ]),
+                "data-wv-section": "toolbar"
+              }, [
+                (f(!0), E(Y, null, be(Le.value, (o) => (f(), U(M, ze({ ref_for: !0 }, o, {
+                  key: o.icon,
+                  class: [{ "!bg-primary-50 ": o.active }, o.class]
+                }), null, 16, ["class"]))), 128))
+              ], 2)) : D("", !0),
+              k.value ? D("", !0) : (f(), U(r(vt), {
+                key: 1,
+                class: _([
+                  `${l.editorState === "editable" ? "px-3 py-2" : ""} [&_*]:outline-none`,
+                  "[&_.is-editor-empty:first-child::before]:text-general-200",
+                  "dark:[&_.is-editor-empty:first-child::before]:text-general-600",
+                  "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+                  "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+                  "[&_.is-editor-empty:first-child::before]:font-normal",
+                  "[&_.is-editor-empty:first-child::before]:pointer-events-none",
+                  "[&_.is-editor-empty:first-child::before]:float-left",
+                  "[&_.is-editor-empty:first-child::before]:h-0",
+                  // Anchor
+                  "[&_a]:hover:underline transition-transform duration-75",
+                  "[&_a]:text-link",
+                  "[&_a]:cursor-pointer",
+                  // Bold
+                  "[&_b]:font-bold",
+                  "[&_strong]:font-bold",
+                  // Image
+                  "[&_img.ProseMirror-selectednode]:!outline-[0.5px]",
+                  "[&_img.ProseMirror-selectednode]:!outline-link",
+                  "[&_img.ProseMirror-selectednode]:!outline-offset-1",
+                  "[&_img.ProseMirror-selectednode]:!rounded-sm",
+                  "[&_img]:my-2",
+                  // Inline Code
+                  "[&_*:has(code)]:my-[0.25rem]",
+                  `${l.contentWrapperClass}`
+                ]),
+                editor: r(a),
+                spellcheck: "false"
+              }, null, 8, ["class", "editor"])),
+              c(r(gt), {
+                ref_key: "headingMenu",
+                ref: te,
+                model: Me.value,
+                popup: ""
+              }, {
+                item: v(({ item: o }) => {
+                  var i, u, p, C, w, h, S, y;
+                  return [
+                    d("a", {
+                      class: _([
+                        ...(i = r(Se)) == null ? void 0 : i.action.class,
+                        o.class,
+                        "flex items-center !justify-between h-[30px]",
+                        {
+                          // TODO: Dark mode
+                          "bg-primary-50": ((u = r(a)) == null ? void 0 : u.isActive("heading", { level: 1 })) && o.label === "Heading 1" || ((p = r(a)) == null ? void 0 : p.isActive("heading", { level: 2 })) && o.label === "Heading 2" || ((C = r(a)) == null ? void 0 : C.isActive("heading", { level: 3 })) && o.label === "Heading 3" || ((w = r(a)) == null ? void 0 : w.isActive("heading", { level: 4 })) && o.label === "Heading 4" || ((h = r(a)) == null ? void 0 : h.isActive("heading", { level: 5 })) && o.label === "Heading 5" || ((S = r(a)) == null ? void 0 : S.isActive("heading", { level: 6 })) && o.label === "Heading 6" || ((y = r(a)) == null ? void 0 : y.isActive("paragraph")) && o.label === "Paragraf"
+                        }
+                      ]),
+                      title: o.label,
+                      onClick: (A) => {
+                        var L;
+                        return (L = o.command) == null ? void 0 : L.call(o, { item: o, originalEvent: A });
+                      }
+                    }, [
+                      Ge(he(o.label) + " ", 1),
+                      d("code", Pt, he(o.shortCut), 1)
+                    ], 10, Vt)
+                  ];
+                }),
+                _: 1
+              }, 8, ["model"]),
+              r(a) && l.editorState === "editable" ? (f(), U(r(Z), {
+                key: 2,
+                editor: r(a),
+                "should-show": () => {
+                  var o, i;
+                  return ((o = r(a)) == null ? void 0 : o.isActive("codeSnippet")) || ((i = r(a)) == null ? void 0 : i.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: re,
+                      icon: "close",
+                      severity: "secondary",
+                      text: "",
+                      "tooltip-text": "Buat text baru dibawah"
+                    })
+                  ])
+                ]),
+                _: 1
+              }, 8, ["editor", "should-show"])) : D("", !0),
+              r(a) && !O.value && l.editorState === "editable" ? (f(), U(r(Z), {
+                key: 3,
+                editor: r(a),
+                "should-show": () => {
+                  var o;
+                  return (o = r(a)) == null ? void 0 : o.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,
+                      class: "!w-max",
+                      label: "Edit Tautan",
+                      severity: "secondary",
+                      text: ""
+                    }),
+                    e[4] || (e[4] = d("span", { class: "separator" }, null, -1)),
+                    c(M, {
+                      onClick: Ie,
+                      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,
+                      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,
+                      icon: "file-copy",
+                      severity: "secondary",
+                      text: "",
+                      "tooltip-text": "Salin tautan"
+                    })
+                  ])
+                ]),
+                _: 1
+              }, 8, ["editor", "should-show"])) : D("", !0),
+              c(Ct, {
+                visible: G.value,
+                "onUpdate:visible": e[2] || (e[2] = (o) => G.value = o),
+                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),
+                          class: "w-[269px]",
+                          label: "URL Gambar"
+                        }, null, 8, ["model-value"])
+                      ]),
+                      d("div", Ut, [
+                        c(ee, {
+                          onClick: e[1] || (e[1] = (o) => Q()),
+                          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, be(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, {
+                            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,
+                                  class: "opacity-0 absolute top-0 bottom-0 left-0 right-0",
+                                  type: "file"
+                                }, null, 32)
+                              ])
+                            ]),
+                            _: 1
+                          })
+                        ])
+                      ])
+                    ])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["visible"]),
+              r(a) && l.editorState === "editable" ? (f(), U(r(Z), {
+                key: 4,
+                editor: r(a),
+                "should-show": () => {
+                  var o;
+                  return !!((o = r(a)) != null && o.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,
+                      icon: "delete-bin",
+                      severity: "secondary",
+                      text: "",
+                      "tooltip-text": "Unset Image"
+                    })
+                  ])
+                ]),
+                _: 1
+              }, 8, ["editor", "should-show"])) : D("", !0)
+            ], 2),
+            c(Tt, {
+              class: _(t.validatorMessageClass),
+              message: b.errorMessage
+            }, null, 8, ["class", "message"])
+          ]),
+          _: 1
+        }, 8, ["info", "label", "label-class", "mandatory", "show-optional-text"]),
+        c(Mt, {
+          ref_key: "editLinkOverlay",
+          ref: z,
+          pt: {
+            content: {
+              class: ""
+            }
+          },
+          onHide: e[3] || (e[3] = (o) => O.value = !1),
+          "append-to": "self",
+          class: "w-[342px] bg-white p-4"
+        }, {
+          default: v(() => [
+            c(St, {
+              onSubmit: $e,
+              class: "!gap-0",
+              "hide-stay-checkbox": ""
+            }, {
+              fields: v(() => {
+                var o, i;
+                return [
+                  qe(c(xe, {
+                    "validator-message": { empty: "Masukan tautan yang valid" },
+                    value: (o = K.value) == null ? void 0 : o.href,
+                    "field-name": "url",
+                    label: "Tempel Tautan",
+                    mandatory: "",
+                    placeholder: "Tempel tautan baru",
+                    "use-validator": ""
+                  }, null, 8, ["value"]), [
+                    [n]
+                  ]),
+                  c(Lt, {
+                    value: Te(),
+                    "field-name": "text",
+                    label: "Teks Tampilan",
+                    placeholder: "Teks untuk ditampilkan",
+                    "use-validator": ""
+                  }, null, 8, ["value"]),
+                  c(ee, {
+                    label: (i = r(a)) != null && i.isActive("link") ? "Simpan" : "Tambahkan",
+                    class: "w-max ml-auto",
+                    severity: "secondary",
+                    type: "submit"
+                  }, null, 8, ["label"])
+                ];
+              }),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 512)
+      ], 64);
+    };
+  }
+});
+export {
+  Ta as _
+};
+//# sourceMappingURL=index.es.js.map