@finema/core 3.7.1 → 3.8.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "3.7.1";
+const version = "3.8.1";
 
 const nuxtAppOptions = {
   head: {
@@ -131,7 +131,12 @@ const module = defineNuxtModule({
             "@vee-validate/valibot",
             "axios",
             "tailwind-variants",
-            "@vueuse/core"
+            "@vueuse/core",
+            "@nuxt/ui > prosemirror-state",
+            "@nuxt/ui > prosemirror-transform",
+            "@nuxt/ui > prosemirror-model",
+            "@nuxt/ui > prosemirror-view",
+            "@nuxt/ui > prosemirror-gapcursor"
           ]
         }
       },

package/dist/runtime/components/Form/InputUploadDropzone/index.vue

@@ -94,12 +94,18 @@ const theme = computed(
     disabled: wrapperProps.value.disabled
   })
 );
-const handleDownloadFile = () => {
-  if (value.value?.url && value.value?.name) {
+const handleDownloadFile = async () => {
+  const fileValue = value.value;
+  if (fileValue instanceof File) {
+    const blobUrl = URL.createObjectURL(fileValue);
     const a = document.createElement("a");
-    a.href = value.value.url;
-    a.download = value.value.name;
+    a.href = blobUrl;
+    a.download = fileValue.name;
+    document.body.appendChild(a);
     a.click();
+    a.remove();
+    URL.revokeObjectURL(blobUrl);
+    return;
   }
 };
 </script>

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadExtension.d.ts

@@ -0,0 +1,9 @@
+import { Node } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            insertImageUpload: () => ReturnType;
+        };
+    }
+}
+export declare const ImageUpload: Node<any, any>;

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadExtension.js

@@ -0,0 +1,38 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import ImageUploadNodeComponent from "./EditorImageUploadNode.vue";
+export const ImageUpload = Node.create({
+  name: "imageUpload",
+  group: "block",
+  atom: true,
+  draggable: true,
+  addAttributes() {
+    return {};
+  },
+  parseHTML() {
+    return [{
+      tag: 'div[data-type="image-upload"]'
+    }];
+  },
+  renderHTML({
+    HTMLAttributes
+  }) {
+    return ["div", mergeAttributes(HTMLAttributes, {
+      "data-type": "image-upload"
+    })];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(ImageUploadNodeComponent);
+  },
+  addCommands() {
+    return {
+      insertImageUpload: () => ({
+        commands
+      }) => {
+        return commands.insertContent({
+          type: this.name
+        });
+      }
+    };
+  }
+});

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.d.vue.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.vue

@@ -0,0 +1,104 @@
+<template>
+  <NodeViewWrapper>
+    <FileUpload
+      v-model="file"
+      accept="image/*"
+      label="Upload an image"
+      description="SVG, PNG, JPG or GIF"
+      :preview="false"
+      class="min-h-48"
+    >
+      <template #leading>
+        <Avatar
+          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
+          size="xl"
+          :ui="{ icon: [loading && 'animate-spin'] }"
+        />
+      </template>
+    </FileUpload>
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed, ref, watch } from "vue";
+import { useUploadLoader } from "#core/composables/useUpload";
+import { _get } from "#core/utils/lodash";
+import { StringHelper } from "#core/utils/StringHelper";
+const props = defineProps({
+  decorations: { type: Array, required: true },
+  selected: { type: Boolean, required: true },
+  updateAttributes: { type: Function, required: true },
+  deleteNode: { type: Function, required: true },
+  node: { type: null, required: true },
+  view: { type: null, required: true },
+  getPos: { type: null, required: true },
+  innerDecorations: { type: null, required: true },
+  editor: { type: Object, required: true },
+  extension: { type: Object, required: true },
+  HTMLAttributes: { type: Object, required: true }
+});
+const options = computed(() => props.extension.options);
+const file = ref(null);
+const loading = ref(false);
+watch(file, async (newFile) => {
+  if (!newFile) return;
+  loading.value = true;
+  if (!options.value.requestOptions) {
+    console.warn("ImageUpload: requestOptions is not configured");
+    loading.value = false;
+    return;
+  }
+  const request = {
+    requestOptions: options.value.requestOptions,
+    pathURL: options.value.uploadPathURL
+  };
+  const uploadLoader = useUploadLoader(request);
+  const formData = new FormData();
+  const bodyKey = options.value.bodyKey || "file";
+  formData.append(bodyKey, newFile);
+  uploadLoader.run({
+    data: formData
+  });
+  const stopSuccessWatch = watch(
+    () => uploadLoader.status.value.isSuccess,
+    (isSuccess) => {
+      if (isSuccess && uploadLoader.data.value) {
+        const responseURL = options.value.responseURL || "url";
+        const url = _get(uploadLoader.data.value, responseURL);
+        if (!url) {
+          console.error("ImageUpload: Could not find URL in response", uploadLoader.data.value);
+          loading.value = false;
+          return;
+        }
+        const pos = props.getPos();
+        if (typeof pos !== "number") {
+          loading.value = false;
+          return;
+        }
+        props.editor.chain().focus().deleteRange({
+          from: pos,
+          to: pos + 1
+        }).setImage({
+          src: url
+        }).run();
+        loading.value = false;
+        stopSuccessWatch();
+        stopErrorWatch();
+      }
+    }
+  );
+  const stopErrorWatch = watch(
+    () => uploadLoader.status.value.isError,
+    (isError) => {
+      if (isError) {
+        const errorMsg = StringHelper.getError(uploadLoader.status.value.errorData);
+        console.error("ImageUpload error:", errorMsg);
+        loading.value = false;
+        stopSuccessWatch();
+        stopErrorWatch();
+      }
+    }
+  );
+});
+</script>

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.vue.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/vue-3';
+declare const __VLS_export: import("vue").DefineComponent<NodeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NodeViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/EditorLinkPopover.d.vue.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor;
+    autoOpen?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/EditorLinkPopover.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  editor: { type: Object, required: true },
+  autoOpen: { type: Boolean, required: false }
+});
+const open = ref(false);
+const url = ref("");
+const active = computed(() => props.editor.isActive("link"));
+const disabled = computed(() => {
+  if (!props.editor.isEditable) return true;
+  const {
+    selection
+  } = props.editor.state;
+  return selection.empty && !props.editor.isActive("link");
+});
+watch(() => props.editor, (editor, _, onCleanup) => {
+  if (!editor) return;
+  const updateUrl = () => {
+    const {
+      href
+    } = editor.getAttributes("link");
+    url.value = href || "";
+  };
+  updateUrl();
+  editor.on("selectionUpdate", updateUrl);
+  onCleanup(() => {
+    editor.off("selectionUpdate", updateUrl);
+  });
+}, {
+  immediate: true
+});
+watch(active, (isActive) => {
+  if (isActive && props.autoOpen) {
+    open.value = true;
+  }
+});
+const setLink = () => {
+  if (!url.value) return;
+  const {
+    selection
+  } = props.editor.state;
+  const isEmpty = selection.empty;
+  const hasCode = props.editor.isActive("code");
+  let chain = props.editor.chain().focus();
+  if (hasCode && !isEmpty) {
+    chain = chain.extendMarkRange("code").setLink({
+      href: url.value
+    });
+  } else {
+    chain = chain.extendMarkRange("link").setLink({
+      href: url.value
+    });
+    if (isEmpty) {
+      chain = chain.insertContent({
+        type: "text",
+        text: url.value
+      });
+    }
+  }
+  chain.run();
+  open.value = false;
+};
+const removeLink = () => {
+  props.editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
+  url.value = "";
+  open.value = false;
+};
+const openLink = () => {
+  if (!url.value) return;
+  window.open(url.value, "_blank", "noopener,noreferrer");
+};
+const handleKeyDown = (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    setLink();
+  }
+};
+</script>
+
+<template>
+  <Popover
+    v-model:open="open"
+    :ui="{ content: 'p-0.5' }"
+  >
+    <Tooltip text="Link">
+      <Button
+        icon="i-lucide-link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+      />
+    </Tooltip>
+
+    <template #content>
+      <Input
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        placeholder="Paste a link..."
+        @keydown="handleKeyDown"
+      >
+        <div class="mr-0.5 flex items-center">
+          <Button
+            icon="i-lucide-corner-down-left"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Apply link"
+            @click="setLink"
+          />
+
+          <Separator
+            orientation="vertical"
+            class="mx-1 h-6"
+          />
+
+          <Button
+            icon="i-lucide-external-link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Open in new window"
+            @click="openLink"
+          />
+
+          <Button
+            icon="i-lucide-trash"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Remove link"
+            @click="removeLink"
+          />
+        </div>
+      </Input>
+    </template>
+  </Popover>
+</template>

package/dist/runtime/components/Form/InputWYSIWYG/EditorLinkPopover.vue.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor;
+    autoOpen?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/index.d.vue.ts

@@ -1,7 +1,19 @@
 import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types';
 declare const __VLS_export: import("vue").DefineComponent<IWYSIWYGFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IWYSIWYGFieldProps> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
-    color: "primary" | "gray";
+    image: {
+        requestOptions?: Omit<import("axios").AxiosRequestConfig, "baseURL"> & {
+            baseURL: string;
+        };
+        uploadPathURL?: string;
+        bodyKey?: string;
+        responseURL?: string;
+        responsePath?: string;
+        responseName?: string;
+        responseSize?: string;
+        responseID?: string;
+        maxSize?: number;
+    };
+    editable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/index.vue

@@ -1,72 +1,78 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
     <div :class="ui.container()">
-      <div
-        v-if="showToolbar"
-        :class="ui.toolbar()"
+      <Editor
+        v-slot="{ editor }"
+        v-model="value"
+        content-type="html"
+        :editable="editable"
+        :placeholder="placeholder"
+        :autofocus="autoFocus"
+        class="min-h-[200px]"
+        :extensions="[
+  TextAlign.configure({
+    types: ['heading', 'paragraph'],
+    alignments: ['left', 'center', 'right', 'justify']
+  }),
+  ImageUpload.configure(image)
+]"
+        :ui="{
+  content: '',
+  base: ['min-h-[200px] w-full sm:px-3 py-1']
+}"
+        :handlers="customHandlers"
       >
-        <div
-          v-for="(items, index) in menuItems"
-          :key="index"
-          :class="ui.toolbarGroup()"
+        <EditorToolbar
+          :editor="editor"
+          :items="toolbarItems"
+          :class="ui.toolbar()"
         >
-          <button
-            v-for="item in items"
-            :key="item.name"
-            :class="[ui.menuItem(), { [ui.menuItemActive()]: item.isActive?.() }]"
-            type="button"
-            :title="item.title"
-            @click="item.action"
-          >
-            <Icon
-              :name="item.icon"
-              :class="ui.icon()"
+          <template #link>
+            <EditorLinkPopover
+              :editor="editor"
+              auto-open
             />
-          </button>
-        </div>
-      </div>
-      <ClientOnly>
-        <EditorContent
+          </template>
+        </EditorToolbar>
+        <EditorToolbar
+          :editor="editor"
+          :items="imageToolbarItems(editor)"
+          layout="bubble"
+          :should-show="({ editor: editor2, view }) => {
+  return editor2.isActive('image') && view.hasFocus();
+}"
+        />
+
+        <EditorSuggestionMenu
           :editor="editor"
-          :class="ui.editorContent()"
+          :items="suggestionItems"
+          :append-to="appendToBody"
         />
-        <template #fallback>
-          <div
-            class="prose min-h-[200px] px-4 py-2"
-            v-html="value"
-          />
-        </template>
-      </ClientOnly>
+      </Editor>
     </div>
   </FieldWrapper>
 </template>
 
 <script setup>
-import { computed, watch } from "vue";
-import { EditorContent, useEditor } from "@tiptap/vue-3";
-import StarterKit from "@tiptap/starter-kit";
-import Underline from "@tiptap/extension-underline";
-import TextAlign from "@tiptap/extension-text-align";
-import Link from "@tiptap/extension-link";
-import Image from "@tiptap/extension-image";
-import Youtube from "@tiptap/extension-youtube";
+import { computed } from "vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { wysiwygTheme } from "#core/theme/wysiwyg";
 import { useUiConfig } from "#core/composables/useConfig";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { ImageUpload } from "./EditorImageUploadExtension";
+import EditorLinkPopover from "./EditorLinkPopover.vue";
 const props = defineProps({
-  editable: { type: Boolean, required: false },
-  autofocus: { type: Boolean, required: false },
-  content: { type: String, required: false },
+  editable: { type: Boolean, required: false, default: () => true },
+  image: { type: Object, required: false, default: () => ({
+    bodyKey: "file",
+    responseURL: "url",
+    responsePath: "path",
+    responseName: "name",
+    responseSize: "size",
+    responseID: "id"
+  }) },
   toolbar: { type: Object, required: false },
-  minHeight: { type: [String, Number], required: false },
-  maxHeight: { type: [String, Number], required: false },
-  size: { type: String, required: false, default: "md" },
-  color: { type: String, required: false, default: "gray" },
-  imageUpload: { type: Object, required: false },
-  linkOptions: { type: Object, required: false },
-  containerUi: { type: null, required: false },
-  image: { type: Object, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -86,196 +92,289 @@ const {
   value,
   wrapperProps
 } = useFieldHOC(props);
-const ui = computed(() => useUiConfig(wysiwygTheme, "wysiwyg")({
-  size: props.size,
-  color: props.color
-}));
-const showToolbar = computed(() => {
-  if (!props.toolbar) return true;
-  return Object.values(props.toolbar).some(Boolean);
-});
-const editor = useEditor({
-  content: value.value,
-  extensions: [
-    StarterKit,
-    Underline,
-    TextAlign.configure({
-      types: ["heading", "paragraph"]
+const ui = computed(() => useUiConfig(wysiwygTheme, "wysiwyg")({}));
+const appendToBody = false ? () => document.body : void 0;
+const customHandlers = {
+  imageUpload: {
+    canExecute: (editor) => editor.can().insertContent({
+      type: "imageUpload"
     }),
-    Link.configure({
-      openOnClick: false
+    execute: (editor) => editor.chain().focus().insertContent({
+      type: "imageUpload"
     }),
-    Image,
-    Youtube
-  ],
-  editorProps: {
-    attributes: {
-      class: "prose px-4 py-2 focus:outline-none min-h-[200px]"
-    }
-  },
-  onUpdate: ({
-    editor: editor2
-  }) => {
-    value.value = editor2.getHTML();
+    isActive: (editor) => editor.isActive("imageUpload"),
+    isDisabled: void 0
   }
-});
-watch(value, (newValue) => {
-  if (editor.value && newValue !== editor.value.getHTML()) {
-    editor.value.commands.setContent(newValue);
-  }
-});
-const toolbarConfig = {
-  format: [
+};
+const imageToolbarItems = (editor) => {
+  const node = editor.state.doc.nodeAt(editor.state.selection.from);
+  return [[{
+    icon: "i-lucide-download",
+    to: node?.attrs?.src,
+    download: true,
+    tooltip: {
+      text: "Download"
+    }
+  }], [{
+    icon: "i-lucide-trash",
+    tooltip: {
+      text: "Delete"
+    },
+    onClick: () => {
+      const {
+        state
+      } = editor;
+      const {
+        selection
+      } = state;
+      const pos = selection.from;
+      const node2 = state.doc.nodeAt(pos);
+      if (node2 && node2.type.name === "image") {
+        editor.chain().focus().deleteRange({
+          from: pos,
+          to: pos + node2.nodeSize
+        }).run();
+      }
+    }
+  }]];
+};
+const toolbarItems = [
+  // Block types
+  [
     {
-      key: "bold",
-      name: "bold",
-      icon: "ph:text-b-bold",
-      action: () => editor.value?.chain().focus().toggleBold().run(),
-      isActive: () => editor.value?.isActive("bold") || false,
-      title: "\u0E15\u0E31\u0E27\u0E2B\u0E19\u0E32"
+      icon: "i-lucide-heading",
+      tooltip: {
+        text: "Headings"
+      },
+      content: {
+        align: "start"
+      },
+      items: [{
+        kind: "heading",
+        level: 1,
+        icon: "i-lucide-heading-1",
+        label: "Heading 1"
+      }, {
+        kind: "heading",
+        level: 2,
+        icon: "i-lucide-heading-2",
+        label: "Heading 2"
+      }, {
+        kind: "heading",
+        level: 3,
+        icon: "i-lucide-heading-3",
+        label: "Heading 3"
+      }, {
+        kind: "heading",
+        level: 4,
+        icon: "i-lucide-heading-4",
+        label: "Heading 4"
+      }]
     },
+    // Text alignment
     {
-      key: "italic",
-      name: "italic",
-      icon: "ph:text-italic",
-      action: () => editor.value?.chain().focus().toggleItalic().run(),
-      isActive: () => editor.value?.isActive("italic") || false,
-      title: "\u0E15\u0E31\u0E27\u0E40\u0E2D\u0E35\u0E22\u0E07"
+      icon: "i-lucide-align-justify",
+      tooltip: {
+        text: "Text Align"
+      },
+      content: {
+        align: "end"
+      },
+      items: [
+        {
+          kind: "textAlign",
+          align: "left",
+          icon: "i-lucide-align-left",
+          label: "Align Left"
+        },
+        {
+          kind: "textAlign",
+          align: "center",
+          icon: "i-lucide-align-center",
+          label: "Align Center"
+        },
+        {
+          kind: "textAlign",
+          align: "right",
+          icon: "i-lucide-align-right",
+          label: "Align Right"
+        },
+        {
+          kind: "textAlign",
+          align: "justify",
+          icon: "i-lucide-align-justify",
+          label: "Align Justify"
+        }
+      ]
     },
     {
-      key: "underline",
-      name: "underline",
-      icon: "ph:text-underline",
-      action: () => editor.value?.chain().focus().toggleUnderline().run(),
-      isActive: () => editor.value?.isActive("underline") || false,
-      title: "\u0E02\u0E35\u0E14\u0E40\u0E2A\u0E49\u0E19\u0E43\u0E15\u0E49"
-    }
-  ],
-  list: [
+      icon: "i-lucide-list",
+      tooltip: {
+        text: "Lists"
+      },
+      content: {
+        align: "start"
+      },
+      items: [{
+        kind: "bulletList",
+        icon: "i-lucide-list",
+        label: "Bullet List"
+      }, {
+        kind: "orderedList",
+        icon: "i-lucide-list-ordered",
+        label: "Ordered List"
+      }]
+    },
     {
-      key: "bulletList",
-      name: "bullet-list",
-      icon: "ph:list-bullets",
-      action: () => editor.value?.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.value?.isActive("bulletList") || false,
-      title: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E2A\u0E31\u0E0D\u0E25\u0E31\u0E01\u0E29\u0E13\u0E4C"
+      kind: "blockquote",
+      icon: "i-lucide-text-quote",
+      tooltip: {
+        text: "Blockquote"
+      }
+    },
+    {
+      kind: "codeBlock",
+      icon: "i-lucide-square-code",
+      tooltip: {
+        text: "Code Block"
+      }
     },
     {
-      key: "orderedList",
-      name: "ordered-list",
-      icon: "ph:list-numbers",
-      action: () => editor.value?.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.value?.isActive("orderedList") || false,
-      title: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E25\u0E33\u0E14\u0E31\u0E1A"
+      kind: "horizontalRule",
+      icon: "i-lucide-separator-horizontal",
+      tooltip: {
+        text: "Horizontal Rule"
+      }
     }
   ],
-  textAlign: [
+  // Text formatting
+  [{
+    kind: "mark",
+    mark: "bold",
+    icon: "i-lucide-bold",
+    tooltip: {
+      text: "Bold"
+    }
+  }, {
+    kind: "mark",
+    mark: "italic",
+    icon: "i-lucide-italic",
+    tooltip: {
+      text: "Italic"
+    }
+  }, {
+    kind: "mark",
+    mark: "underline",
+    icon: "i-lucide-underline",
+    tooltip: {
+      text: "Underline"
+    }
+  }, {
+    kind: "mark",
+    mark: "strike",
+    icon: "i-lucide-strikethrough",
+    tooltip: {
+      text: "Strikethrough"
+    }
+  }, {
+    kind: "mark",
+    mark: "code",
+    icon: "i-lucide-code",
+    tooltip: {
+      text: "Code"
+    }
+  }],
+  // Link & image
+  [
+    {
+      slot: "link"
+    },
+    ...props.image?.requestOptions ? [{
+      kind: "imageUpload",
+      icon: "i-lucide-image"
+    }] : []
+  ],
+  // History controls
+  [{
+    kind: "undo",
+    icon: "i-lucide-undo",
+    tooltip: {
+      text: "Undo"
+    }
+  }, {
+    kind: "redo",
+    icon: "i-lucide-redo",
+    tooltip: {
+      text: "Redo"
+    }
+  }]
+];
+const suggestionItems = [
+  [
+    {
+      type: "label",
+      label: "Text"
+    },
+    {
+      kind: "paragraph",
+      label: "Paragraph",
+      icon: "i-lucide-type"
+    },
     {
-      key: "textAlign",
-      name: "align-left",
-      icon: "ph:text-align-left",
-      action: () => editor.value?.chain().focus().setTextAlign("left").run(),
-      isActive: () => editor.value?.isActive({
-        textAlign: "left"
-      }) || false,
-      title: "\u0E08\u0E31\u0E14\u0E0A\u0E34\u0E14\u0E0B\u0E49\u0E32\u0E22"
+      kind: "heading",
+      level: 1,
+      label: "Heading 1",
+      icon: "i-lucide-heading-1"
     },
     {
-      key: "textAlign",
-      name: "align-center",
-      icon: "ph:text-align-center",
-      action: () => editor.value?.chain().focus().setTextAlign("center").run(),
-      isActive: () => editor.value?.isActive({
-        textAlign: "center"
-      }) || false,
-      title: "\u0E08\u0E31\u0E14\u0E01\u0E36\u0E48\u0E07\u0E01\u0E25\u0E32\u0E07"
+      kind: "heading",
+      level: 2,
+      label: "Heading 2",
+      icon: "i-lucide-heading-2"
     },
     {
-      key: "textAlign",
-      name: "align-right",
-      icon: "ph:text-align-right",
-      action: () => editor.value?.chain().focus().setTextAlign("right").run(),
-      isActive: () => editor.value?.isActive({
-        textAlign: "right"
-      }) || false,
-      title: "\u0E08\u0E31\u0E14\u0E0A\u0E34\u0E14\u0E02\u0E27\u0E32"
+      kind: "heading",
+      level: 3,
+      label: "Heading 3",
+      icon: "i-lucide-heading-3"
     }
   ],
-  media: [
+  [
     {
-      key: "link",
-      name: "link",
-      icon: "ph:link-simple",
-      action: () => {
-        const url = window.prompt("URL");
-        if (url) {
-          editor.value?.chain().focus().setLink({
-            href: url
-          }).run();
-        }
-      },
-      isActive: () => editor.value?.isActive("link") || false,
-      title: "\u0E41\u0E17\u0E23\u0E01\u0E25\u0E34\u0E07\u0E01\u0E4C"
+      type: "label",
+      label: "Lists"
     },
     {
-      key: "image",
-      name: "image",
-      icon: "ph:image",
-      action: () => {
-        const url = window.prompt("URL \u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E");
-        if (url) {
-          editor.value?.chain().focus().setImage({
-            src: url
-          }).run();
-        }
-      },
-      title: "\u0E41\u0E17\u0E23\u0E01\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E"
+      kind: "bulletList",
+      label: "Bullet List",
+      icon: "i-lucide-list"
     },
     {
-      key: "youtube",
-      name: "video",
-      icon: "ph:video-camera",
-      action: () => {
-        const url = window.prompt("URL \u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D");
-        if (url) {
-          editor.value?.chain().focus().setYoutubeVideo({
-            src: url
-          }).run();
-        }
-      },
-      title: "\u0E41\u0E17\u0E23\u0E01\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D"
+      kind: "orderedList",
+      label: "Numbered List",
+      icon: "i-lucide-list-ordered"
     }
   ],
-  history: [
+  [
+    {
+      type: "label",
+      label: "Insert"
+    },
+    {
+      kind: "blockquote",
+      label: "Blockquote",
+      icon: "i-lucide-text-quote"
+    },
     {
-      key: "undo",
-      name: "undo",
-      icon: "ph:arrow-counter-clockwise",
-      action: () => editor.value?.chain().focus().undo().run(),
-      title: "\u0E40\u0E25\u0E34\u0E01\u0E17\u0E33"
+      kind: "codeBlock",
+      label: "Code Block",
+      icon: "i-lucide-square-code"
     },
     {
-      key: "redo",
-      name: "redo",
-      icon: "ph:arrow-clockwise",
-      action: () => editor.value?.chain().focus().redo().run(),
-      title: "\u0E17\u0E33\u0E43\u0E2B\u0E21\u0E48"
+      kind: "horizontalRule",
+      label: "Divider",
+      icon: "i-lucide-separator-horizontal"
     }
   ]
-};
-const menuItems = computed(() => {
-  const items = [];
-  Object.entries(toolbarConfig).forEach(([groupKey, groupItems]) => {
-    const enabledItems = groupItems.filter((item) => {
-      if (groupKey === "textAlign") {
-        return props.toolbar?.textAlign;
-      }
-      return props.toolbar?.[item.key];
-    });
-    if (enabledItems.length > 0) {
-      items.push(enabledItems);
-    }
-  });
-  return items;
-});
+];
 </script>

package/dist/runtime/components/Form/InputWYSIWYG/index.vue.d.ts

@@ -1,7 +1,19 @@
 import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types';
 declare const __VLS_export: import("vue").DefineComponent<IWYSIWYGFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IWYSIWYGFieldProps> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
-    color: "primary" | "gray";
+    image: {
+        requestOptions?: Omit<import("axios").AxiosRequestConfig, "baseURL"> & {
+            baseURL: string;
+        };
+        uploadPathURL?: string;
+        bodyKey?: string;
+        responseURL?: string;
+        responsePath?: string;
+        responseName?: string;
+        responseSize?: string;
+        responseID?: string;
+        maxSize?: number;
+    };
+    editable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/types.d.ts

@@ -3,60 +3,20 @@ import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/
 import type { AxiosRequestConfig } from 'axios';
 export interface IWYSIWYGFieldProps extends IFieldProps {
     editable?: boolean;
-    autofocus?: boolean;
-    content?: string;
-    toolbar?: {
-        bold?: boolean;
-        italic?: boolean;
-        underline?: boolean;
-        strike?: boolean;
-        code?: boolean;
-        heading?: boolean | number[];
-        paragraph?: boolean;
-        bulletList?: boolean;
-        orderedList?: boolean;
-        blockquote?: boolean;
-        codeBlock?: boolean;
-        horizontalRule?: boolean;
-        link?: boolean;
-        image?: {
-            requestOptions?: Omit<AxiosRequestConfig, 'baseURL'> & {
-                baseURL: string;
-            };
-            uploadPathURL?: string;
-            bodyKey?: string;
-            responseURL?: string;
-            responsePath?: string;
-            responseName?: string;
-            responseSize?: string;
-            responseID?: string;
-            accept?: string[] | string;
-            maxSize?: number;
-        } | boolean;
-        youtube?: boolean;
-        textAlign?: boolean;
-        undo?: boolean;
-        redo?: boolean;
-    };
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'gray';
-    imageUpload?: {
-        enabled?: boolean;
-        uploadUrl?: string;
-        maxSize?: number;
-        accept?: string[];
-        headers?: Record<string, string>;
-    };
-    linkOptions?: {
-        openOnClick?: boolean;
-        HTMLAttributes?: Record<string, any>;
-    };
-    containerUi?: any;
     image?: {
-        requestOptions?: any;
+        requestOptions?: Omit<AxiosRequestConfig, 'baseURL'> & {
+            baseURL: string;
+        };
+        uploadPathURL?: string;
+        bodyKey?: string;
+        responseURL?: string;
+        responsePath?: string;
+        responseName?: string;
+        responseSize?: string;
+        responseID?: string;
+        maxSize?: number;
     };
+    toolbar?: {};
 }
 export type IWYSIWYGField = IFormFieldBase<INPUT_TYPES.WYSIWYG, IWYSIWYGFieldProps, {
     change?: (content: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -47,15 +47,7 @@
     "@nuxt/ui": "^4.4.0",
     "@pinia/nuxt": "^0.11.0",
     "@tailwindcss/typography": "^0.5.0-alpha.3",
-    "@tiptap/extension-image": "^3.0.7",
-    "@tiptap/extension-link": "^3.0.7",
-    "@tiptap/extension-text-align": "^3.0.7",
-    "@tiptap/extension-text-style": "^3.0.7",
-    "@tiptap/extension-underline": "^3.0.7",
-    "@tiptap/extension-youtube": "^3.0.7",
-    "@tiptap/pm": "^3.0.7",
-    "@tiptap/starter-kit": "^3.0.7",
-    "@tiptap/vue-3": "^3.0.7",
+    "@tiptap/extension-text-align": "^3.18.0",
     "@vee-validate/nuxt": "^4.15.1",
     "@vee-validate/valibot": "^4.15.1",
     "@vuepic/vue-datepicker": "^11.0.2",
@@ -91,4 +83,4 @@
   "lint-staged": {
     "*": "eslint"
   }
-}
+}

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.d.vue.ts

@@ -1,12 +0,0 @@
-interface Props {
-    options?: {
-        requestOptions?: any;
-    };
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (url: string) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onSubmit?: ((url: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="upload-image-form">
-    <input
-      ref="fileInput"
-      type="file"
-      accept="image/*"
-      @change="handleFileSelect"
-    />
-    <button
-      type="button"
-      @click="handleUpload"
-    >
-      Upload
-    </button>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-const emit = defineEmits(["submit"]);
-const props = defineProps({
-  options: { type: Object, required: false }
-});
-const fileInput = ref();
-const selectedFile = ref(null);
-const handleFileSelect = (event) => {
-  const target = event.target;
-  const file = target.files?.[0];
-  if (file) {
-    selectedFile.value = file;
-  }
-};
-const handleUpload = async () => {
-  if (!selectedFile.value) return;
-  const url = URL.createObjectURL(selectedFile.value);
-  emit("submit", url);
-};
-</script>

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue.d.ts

@@ -1,12 +0,0 @@
-interface Props {
-    options?: {
-        requestOptions?: any;
-    };
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (url: string) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onSubmit?: ((url: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;