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

package/editor/index.es.js

@@ -1,1160 +0,0 @@
-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: true,
-  addAttributes() {
-    return {
-      code: {
-        default: ""
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "codeSnippet"
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["codeSnippet", mergeAttributes(HTMLAttributes)];
-  },
-  addNodeView() {
-    return VueNodeViewRenderer(_sfc_main$1);
-  },
-  addCommands() {
-    return {
-      insertCodeSnippet: () => ({ commands }) => {
-        return commands.insertContent({
-          type: "codeSnippet",
-          attrs: { code: "" }
-        });
-      },
-      deleteCodeSnippet: () => ({ commands }) => {
-        return commands.deleteSelection();
-      }
-    };
-  }
-});
-const MentionSectionExtension = Node.create({
-  name: "mentionSection",
-  group: "block",
-  atom: true,
-  addAttributes() {
-    return {
-      title: {
-        default: ""
-      },
-      bodyText: {
-        default: ""
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "mentionSection"
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["mentionSection", mergeAttributes(HTMLAttributes)];
-  },
-  addNodeView() {
-    return VueNodeViewRenderer(_sfc_main$2);
-  },
-  addCommands() {
-    return {
-      insertMentionSection: (title) => ({ commands }) => {
-        return commands.insertContent({
-          type: "mentionSection",
-          attrs: {
-            title,
-            bodyText: null
-          }
-        });
-      },
-      deleteMentionSection: () => ({ commands }) => {
-        return commands.deleteSelection();
-      }
-    };
-  }
-});
-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`
-  ])
-};
-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`
-  ])
-};
-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`
-  ])
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Editor",
-  props: /* @__PURE__ */ mergeModels({
-    modelValue: {},
-    initialValue: {},
-    placeholder: { default: "Tulis" },
-    editorState: { default: "editable" },
-    borderLess: { type: Boolean, default: false },
-    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: false },
-    fetchMentionSuggestionFunction: {},
-    mentionedList: {},
-    editorWrapperClass: {},
-    toolbarWrapperClass: {},
-    contentWrapperClass: {}
-  }, {
-    "modelValue": {},
-    "modelModifiers": {},
-    "mentionedList": {},
-    "mentionedListModifiers": {}
-  }),
-  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 isLoading = shallowRef(false);
-    const registeredMentionList = ref([]);
-    const mentionSectionTitle = shallowRef();
-    const inputPlaceholder = computed(
-      () => {
-        var _a;
-        return props.placeholder ?? "Tulis " + (props.label ? (_a = props.label) == null ? void 0 : _a.toLowerCase() : "");
-      }
-    );
-    const editor = useEditor({
-      content: props.initialValue ?? props.modelValue,
-      onBlur: (e) => emit("blur", e),
-      onFocus: (e) => emit("focus", e),
-      onUpdate: () => {
-        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 (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 (pastedFiles.length) {
-            const validImages = pastedFiles.filter((file) => file.type.startsWith("image/")).filter((file) => validateFileSize(file, 10));
-            await setPreviewImages(validImages);
-          }
-        } catch (error) {
-          console.error("Error pasting images:", error);
-        } finally {
-          pastedFiles = [];
-        }
-      },
-      onSelectionUpdate(selectedEvent) {
-        var _a;
-        const imageSelectedNode = selectedEvent.editor.getAttributes(
-          "image"
-        );
-        (_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: props.editorState === "editable",
-      extensions: [
-        Placeholder.configure({
-          emptyEditorClass: "is-editor-empty !text-general-200 !font-light",
-          placeholder: inputPlaceholder.value,
-          includeChildren: false
-        }),
-        Document.extend({
-          addKeyboardShortcuts() {
-            return {
-              "Mod-\\": () => {
-                this.editor.commands.clearNodes();
-                return this.editor.commands.unsetAllMarks();
-              }
-            };
-          }
-        }),
-        // Blocks
-        Heading,
-        Paragraph,
-        Text,
-        Image.extend({
-          addKeyboardShortcuts() {
-            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: () => setImageDialog(),
-              Backspace: deleteOrBackspace,
-              Delete: deleteOrBackspace
-            };
-          }
-        }).configure({
-          HTMLAttributes: {
-            class: "w-fit max-h-[300px] object-contain"
-          }
-        }),
-        CodeSnippetExtension.extend({
-          addKeyboardShortcuts() {
-            return {
-              "Mod-alt-c": codeSnippetTrigger
-            };
-          }
-        }),
-        MentionSectionExtension,
-        OrderedList.configure({
-          HTMLAttributes: {
-            class: "list-decimal px-3 py-1"
-          }
-        }),
-        BulletList.configure({
-          HTMLAttributes: {
-            class: "list-disc px-3 py-1"
-          }
-        }),
-        ListItem,
-        // Marks
-        Bold,
-        Italic,
-        Underline,
-        Code,
-        Link.extend({
-          addKeyboardShortcuts() {
-            return {
-              "Mod-k": () => openLinkForm()
-            };
-          }
-        }).configure({
-          openOnClick: false
-        }),
-        History,
-        Mention.configure({
-          HTMLAttributes: {
-            class: "bg-primary-200 text-primary-800 rounded-[50px] px-1"
-          },
-          suggestion: {
-            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
-                };
-              });
-            },
-            ...suggestion()
-          }
-        }),
-        FloatingMenu
-      ]
-    });
-    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,
-        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: (_b = headingMenu.value) == null ? void 0 : _b.toggle
-        },
-        {
-          icon: "bold",
-          tooltipText: "Bold | Ctrl + B",
-          active: (_c = editor.value) == null ? void 0 : _c.isActive("bold"),
-          disabled: isInlineCode,
-          onClick: () => {
-            focus();
-            toggleBold();
-          }
-        },
-        {
-          icon: "italic",
-          tooltipText: "Italic | Ctrl + I",
-          active: (_d = editor.value) == null ? void 0 : _d.isActive("italic"),
-          disabled: isInlineCode,
-          onClick: () => {
-            focus();
-            toggleItalic();
-          }
-        },
-        {
-          icon: "underline",
-          class: "mr-3",
-          active: (_e = editor.value) == null ? void 0 : _e.isActive("underline"),
-          tooltipText: "Underline | Ctrl + U",
-          disabled: isInlineCode,
-          onClick: () => {
-            focus();
-            toggleUnderline();
-          }
-        },
-        {
-          icon: "list-unordered",
-          tooltipText: "Bullet List | Ctrl + 7",
-          active: (_f = editor.value) == null ? void 0 : _f.isActive("bullet-list"),
-          onClick: () => {
-            focus();
-            toggleBulletList();
-          }
-        },
-        {
-          icon: "list-ordered",
-          tooltipText: "Numbered List | Ctrl + 8",
-          active: (_g = editor.value) == null ? void 0 : _g.isActive("ordered-list"),
-          class: "mr-3",
-          onClick: () => {
-            focus();
-            toggleOrderedList();
-          }
-        },
-        {
-          icon: "link-m",
-          tooltipText: "Link | Ctrl + K",
-          disabled: ((_h = editor.value) == null ? void 0 : _h.isActive("link")) || linkFormShown.value,
-          onClick: openLinkForm
-        },
-        {
-          icon: "image-add",
-          active: (_i = editor.value) == null ? void 0 : _i.isActive("image"),
-          tooltipText: "Image | Insert",
-          onClick: () => setImageDialog()
-        },
-        {
-          icon: "code-line",
-          active: (_j = editor.value) == null ? void 0 : _j.isActive("code"),
-          tooltipText: "Inline Code | Ctrl + E",
-          onClick: () => {
-            focus();
-            toggleCode();
-          }
-        },
-        {
-          icon: "code-box-line",
-          active: (_k = editor.value) == null ? void 0 : _k.isActive("codeSnippet"),
-          tooltipText: "Code Block | Ctrl + Alt + C",
-          onClick: () => {
-            codeSnippetTrigger();
-          }
-        },
-        {
-          icon: "format-clear",
-          tooltipText: "Clear Formatting Ctrl + \\",
-          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: () => {
-            focus();
-            clearNodes();
-            unsetAllMarks();
-          }
-        }
-      ];
-    });
-    const headings = shallowRef([
-      {
-        label: "Paragraf",
-        class: "p",
-        shortCut: "Ctrl+Alt+P",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setParagraph();
-        }
-      },
-      {
-        label: "Heading 1",
-        class: "heading-1",
-        shortCut: "Ctrl+Alt+1",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 1 });
-        }
-      },
-      {
-        label: "Heading 2",
-        class: "heading-2",
-        shortCut: "Ctrl+Alt+2",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 2 });
-        }
-      },
-      {
-        class: "heading-3",
-        label: "Heading 3",
-        shortCut: "Ctrl+Alt+3",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 3 });
-        }
-      },
-      {
-        label: "Heading 4",
-        class: "heading-4",
-        shortCut: "Ctrl+Alt+4",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 4 });
-        }
-      },
-      {
-        label: "Heading 5",
-        class: "heading-5",
-        shortCut: "Ctrl+Alt+5",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 5 });
-        }
-      },
-      {
-        label: "Heading 6",
-        class: "heading-6",
-        shortCut: "Ctrl+Alt+6",
-        command: () => {
-          var _a, _b;
-          (_a = editor.value) == null ? void 0 : _a.commands.focus();
-          (_b = editor.value) == null ? void 0 : _b.commands.setHeading({ level: 6 });
-        }
-      }
-    ]);
-    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();
-      }
-    };
-    const getSelectedText = () => {
-      if (editor.value) {
-        const { state } = editor.value;
-        const { from, to } = state.selection;
-        return state == null ? void 0 : state.doc.textBetween(from, to, " ");
-      }
-    };
-    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
-        });
-      }
-    };
-    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"
-      });
-      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 } = await props.fetchMentionSuggestionFunction() ?? {};
-          mentionSuggestionList.value = data;
-          isLoading.value = !isLoading.value;
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    };
-    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 } = (_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);
-      }
-    };
-    const editorLoading = () => {
-      isLoading.value = true;
-      setTimeout(() => {
-        isLoading.value = false;
-      }, 100);
-    };
-    __expose({
-      mentionSectionTrigger
-    });
-    watch(
-      () => props.invalid,
-      () => {
-        var _a;
-        (_a = field.validate) == null ? void 0 : _a.call(field);
-      }
-    );
-    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: withCtx(() => [
-            createElementVNode("div", {
-              ref_key: "root",
-              ref: root,
-              class: normalizeClass([
-                "rounded-b text-grayscale-900 w-full",
-                "[&:has(:focus)]:border-general-200 border-general-100",
-                `${_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",
-                `${props.editorWrapperClass}`
-              ]),
-              "data-wv-name": "editor"
-            }, [
-              props.editorState === "editable" ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass([
-                  "border-b-[0.5px] border-inherit px-3 py-1 flex gap-1 bg-general-50",
-                  `${props.toolbarWrapperClass}`
-                ]),
-                "data-wv-section": "toolbar"
-              }, [
-                (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: 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)]",
-                  "[&_.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]",
-                  `${props.contentWrapperClass}`
-                ]),
-                editor: unref(editor),
-                spellcheck: "false"
-              }, null, 8, ["class", "editor"])) : createCommentVNode("", true),
-              createVNode(unref(script), {
-                ref_key: "headingMenu",
-                ref: headingMenu,
-                model: headings.value,
-                popup: ""
-              }, {
-                item: withCtx(({ item }) => {
-                  var _a, _b, _c, _d, _e, _f, _g, _h;
-                  return [
-                    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": ((_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: item.label,
-                      onClick: ($event) => {
-                        var _a2;
-                        return (_a2 = item.command) == null ? void 0 : _a2.call(item, { item, originalEvent: $event });
-                      }
-                    }, [
-                      createTextVNode(toDisplayString(item.label) + " ", 1),
-                      createElementVNode("code", _hoisted_2, toDisplayString(item.shortCut), 1)
-                    ], 10, _hoisted_1)
-                  ];
-                }),
-                _: 1
-              }, 8, ["model"]),
-              unref(editor) && props.editorState === "editable" ? (openBlock(), createBlock(unref(FloatingMenu$1), {
-                key: 2,
-                editor: unref(editor),
-                "should-show": () => {
-                  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: withCtx(() => [
-                  createElementVNode("div", _hoisted_3, [
-                    createVNode(_sfc_main$5, {
-                      onClick: goToNextLine,
-                      icon: "close",
-                      severity: "secondary",
-                      text: "",
-                      "tooltip-text": "Buat text baru dibawah"
-                    })
-                  ])
-                ]),
-                _: 1
-              }, 8, ["editor", "should-show"])) : createCommentVNode("", true),
-              unref(editor) && !linkFormShown.value && props.editorState === "editable" ? (openBlock(), createBlock(unref(FloatingMenu$1), {
-                key: 3,
-                editor: unref(editor),
-                "should-show": () => {
-                  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: withCtx(() => [
-                  createElementVNode("div", _hoisted_4, [
-                    createVNode(_sfc_main$5, {
-                      onClick: openLinkForm,
-                      class: "!w-max",
-                      label: "Edit Tautan",
-                      severity: "secondary",
-                      text: ""
-                    }),
-                    _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"
-                    }),
-                    _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"
-                    }),
-                    _cache[6] || (_cache[6] = createElementVNode("span", { class: "separator" }, null, -1)),
-                    createVNode(_sfc_main$5, {
-                      onClick: copyLink,
-                      icon: "file-copy",
-                      severity: "secondary",
-                      text: "",
-                      "tooltip-text": "Salin tautan"
-                    })
-                  ])
-                ]),
-                _: 1
-              }, 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: 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"])
-                      ]),
-                      createElementVNode("div", _hoisted_8, [
-                        createVNode(_sfc_main$8, {
-                          onClick: _cache[1] || (_cache[1] = ($event) => setImageFunction()),
-                          label: "Simpan",
-                          severity: "secondary"
-                        })
-                      ])
-                    ]),
-                    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"
-                          }),
-                          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)
-                              ])
-                            ]),
-                            _: 1
-                          })
-                        ])
-                      ])
-                    ])
-                  ])
-                ]),
-                _: 1
-              }, 8, ["visible"]),
-              unref(editor) && props.editorState === "editable" ? (openBlock(), createBlock(unref(FloatingMenu$1), {
-                key: 4,
-                editor: unref(editor),
-                "should-show": () => {
-                  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: withCtx(() => [
-                  createElementVNode("div", _hoisted_13, [
-                    createVNode(_sfc_main$5, {
-                      onClick: unsetImage,
-                      icon: "delete-bin",
-                      severity: "secondary",
-                      text: "",
-                      "tooltip-text": "Unset Image"
-                    })
-                  ])
-                ]),
-                _: 1
-              }, 8, ["editor", "should-show"])) : createCommentVNode("", true)
-            ], 2),
-            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"]),
-        createVNode(_sfc_main$b, {
-          ref_key: "editLinkOverlay",
-          ref: editLinkOverlay,
-          pt: {
-            content: {
-              class: ""
-            }
-          },
-          onHide: _cache[3] || (_cache[3] = ($event) => linkFormShown.value = false),
-          "append-to": "self",
-          class: "w-[342px] bg-white p-4"
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$c, {
-              onSubmit: setLinkFunction,
-              class: "!gap-0",
-              "hide-stay-checkbox": ""
-            }, {
-              fields: withCtx(() => {
-                var _a, _b;
-                return [
-                  withDirectives(createVNode(_sfc_main$7, {
-                    "validator-message": { empty: "Masukan tautan yang valid" },
-                    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"]), [
-                    [_directive_focus]
-                  ]),
-                  createVNode(_sfc_main$d, {
-                    value: getInitialAnchorText(),
-                    "field-name": "text",
-                    label: "Teks Tampilan",
-                    placeholder: "Teks untuk ditampilkan",
-                    "use-validator": ""
-                  }, null, 8, ["value"]),
-                  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"
-                  }, null, 8, ["label"])
-                ];
-              }),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 512)
-      ], 64);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};