✨ Read custom insert via absolute path

https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/issues/36
#11

console/src/i18n/en-US.ts

@@ -23,6 +23,7 @@ const lang: I18nLang = {
   title: "Title",
   link: "Link",
   password: "Password",
+  quick_insert: "Quick Insert",
 };
 
 export default lang;

console/src/i18n/zh-CN.ts

@@ -23,6 +23,7 @@ const lang: I18nLang = {
   title: "标题",
   link: "链接",
   password: "密码",
+  quick_insert: "快速插入",
 };
 
 export default lang;

console/src/i18n/zh-TW.ts

@@ -23,6 +23,7 @@ const lang: I18nLang = {
   title: "標題",
   link: "鏈接",
   password: "密碼",
+  quick_insert: "快速插入",
 };
 
 export default lang;

console/src/type/editor.d.ts

@@ -17,6 +17,8 @@ export declare type Options = {
   codeBlockPreview: boolean;
   uploadImage?: (files: File[]) => string | null | Promise;
   openModal: (schema: Schema) => void;
+  quickInsertList: QuickInsert[];
+  enableQuickInsert: boolean;
 };
 
 export interface Schema {
@@ -31,3 +33,16 @@ export interface Schema {
   // 覆盖解析
   handler?: (data: { [key: string]: string }) => string;
 }
+
+export interface QuickInsert {
+  // 展示名称
+  name: string;
+  // 鼠标移入时的提示文本
+  tip: string;
+  // 提供者
+  provider: string;
+  // 插入按钮的图标
+  icon: string;
+  // 配置结构
+  schema: Schema[];
+}

console/src/utils/fetch-utils.ts

@@ -0,0 +1,14 @@
+import type {QuickInsert} from "@/type/editor";
+
+export const fetchAllQuickInsert = async (): Promise<QuickInsert[]> => {
+  const quickInsertList: QuickInsert[] = [];
+  // Get Default Path
+  try {
+    const response = await fetch("/plugins/vditor-mde/assets/static/test.json");
+    const quickInsertJson: QuickInsert = await response.json();
+    quickInsertList.push(quickInsertJson);
+  } catch (e) {
+    // ignore this
+  }
+  return quickInsertList;
+};

console/src/utils/vditor-utils.ts

@@ -1,5 +1,5 @@
-import type {Options, Schema} from "@/type/editor";
-import {mdiGrid, mdiImage} from "@/utils/icon";
+import type {Options, QuickInsert, Schema} from "@/type/editor";
+import { mdiGrid, mdiImage } from "@/utils/icon";
 import { t } from "@/utils/i18n-utils";
 import tips from "@/schema/tips";
 import git from "@/schema/git";
@@ -10,6 +10,18 @@ export function getOptions(options: Options): IOptions {
     `${window.location.protocol}//${window.location.host}` +
     `/plugins/vditor-mde/assets/static`;
   console.log(`Your CDN IS: ${cdn}`);
+  // Get Toolbar
+  const toolbar = getToolbar(
+    options.showAttachment,
+    options.openModal,
+    getLanguage(options.language)
+  );
+  if (options.enableQuickInsert) {
+    options.quickInsertList.forEach((insert: QuickInsert) => {
+      toolbar.splice(-1, 0, buildQuickInsertToolbar(options.openModal, insert));
+    });
+  }
+  // Build Options
   return {
     height: "100%",
     mode: options.defaultRenderMode,
@@ -25,11 +37,7 @@ export function getOptions(options: Options): IOptions {
     },
     after: options.after,
     input: options.input,
-    toolbar: getToolbar(
-      options.showAttachment,
-      options.openModal,
-      getLanguage(options.language)
-    ),
+    toolbar: toolbar,
     counter: {
       enable: true,
     },
@@ -75,7 +83,7 @@ function getToolbar(
   showAttachmentCb: () => void,
   openModal: (schema: Schema) => void,
   lang: keyof II18n
-): (string | IMenuItem)[] | undefined {
+): (string | IMenuItem)[] {
   return [
     "emoji",
     "headings",
@@ -141,3 +149,24 @@ function getToolbar(
     },
   ];
 }
+
+function buildQuickInsertToolbar(
+  openModal: (schema: Schema) => void,
+  quickInsertList: QuickInsert
+): IMenuItem {
+  const children: IMenuItem[] = [];
+  quickInsertList.schema.forEach((sch: Schema) => {
+    children.push({
+      icon: (sch.icon || "") + sch.name,
+      name: sch.id,
+      click: () => openModal(sch),
+    });
+  });
+  return {
+    name: quickInsertList.name,
+    tip: quickInsertList.tip,
+    icon: quickInsertList.icon,
+    tipPosition: "n",
+    toolbar: children,
+  };
+}

console/src/views/Vditor.vue

@@ -9,6 +9,7 @@ import type { Attachment } from "@halo-dev/api-client";
 import { VLoading } from "@halo-dev/components";
 import TemplateModal from "@/model/TemplateModal.vue";
 import joeProgress from "@/schema/joe-progress";
+import {fetchAllQuickInsert} from "@/utils/fetch-utils";
 
 const props = withDefaults(
   defineProps<{
@@ -97,6 +98,8 @@ onMounted(async () => {
   } catch (e) {
     // ignore this
   }
+
+  const qil = await fetchAllQuickInsert();
   vditor.value = new Vditor(
     vditorRef.value,
     getOptions({
@@ -133,6 +136,8 @@ onMounted(async () => {
         customInsertSchema.value = schema;
         customInsertOpen.value = true;
       },
+      enableQuickInsert: true,
+      quickInsertList: qil,
     })
   );
 });

src/main/resources/static/test.json

@@ -0,0 +1,31 @@
+{
+    "name": "Joe Theme",
+    "tip": "Joe自定义模块",
+    "provider": "halo-theme-joe-3.0",
+    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M480-80q-26 0-47-12.5T400-126q-33 0-56.5-23.5T320-206v-142q-59-39-94.5-103T190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 77-35.5 140T640-348v142q0 33-23.5 56.5T560-126q-12 21-33 33.5T480-80Zm-80-126h160v-36H400v36Zm0-76h160v-38H400v38Zm-8-118h58v-108l-88-88 42-42 76 76 76-76 42 42-88 88v108h58q54-26 88-76.5T690-590q0-88-61-149t-149-61q-88 0-149 61t-61 149q0 63 34 113.5t88 76.5Zm88-162Zm0-38Z\"/></svg>",
+    "schema": [
+        {
+            "type": "template",
+            "id": "joe-progress",
+            "icon": "",
+            "name": "进度条",
+            "formKit": [
+                {
+                    "$formkit": "text",
+                    "name": "percentage",
+                    "label": "进度",
+                    "help": "This is the percentage for progress bar.",
+                    "value": "0"
+                },
+                {
+                    "$formkit": "color",
+                    "name": "color",
+                    "label": "颜色",
+                    "help": "This is the color for progress bar.",
+                    "value": "#ffffff"
+                }
+            ],
+            "template": "<joe-progress percentage=\"$percentage$%\" color=\"$color$\"></joe-progress>"
+        }
+    ]
+}