@finema/core 3.7.0 → 3.8.0

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="Write, type '/' for commands..."
+        :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;