✨ Add quick insert for gallery

https://github.com/justice2001/halo-plugin-vditor/issues/15
#45

console/src/i18n/en-US.ts

@@ -24,6 +24,13 @@ const lang: I18nLang = {
   link: "Link",
   password: "Password",
   quick_insert: "Quick Insert",
+  insert_gallery: "Insert Gallery",
+  grid: "Grid",
+  linear: "Linear",
+  image_group: "Image Group",
+  image: "Image",
+  image_alt: "Alt",
+  image_alt_ph: "Use File Name If You Dont Place This",
 };
 
 export default lang;

console/src/i18n/zh-CN.ts

@@ -24,6 +24,13 @@ const lang: I18nLang = {
   link: "链接",
   password: "密码",
   quick_insert: "快速插入",
+  insert_gallery: "插入图集",
+  grid: "九宫格",
+  linear: "线性",
+  image_group: "图片组",
+  image: "图片",
+  image_alt: "图片介绍",
+  image_alt_ph: "不填写此项则默认使用图像文件名",
 };
 
 export default lang;

console/src/i18n/zh-TW.ts

@@ -24,6 +24,13 @@ const lang: I18nLang = {
   link: "鏈接",
   password: "密碼",
   quick_insert: "快速插入",
+  insert_gallery: "插入圖集",
+  grid: "九宮格",
+  linear: "線性",
+  image_group: "圖片組",
+  image: "圖片",
+  image_alt: "圖片介紹",
+  image_alt_ph: "不填寫此項則默認使用影像檔名",
 };
 
 export default lang;

console/src/model/TemplateModal.vue

@@ -31,8 +31,11 @@ const generateCode = () => {
     emit("done", htmlEncode(code));
     return;
   }
-  props.schema.handler && props.schema.handler(data.value);
-  emit("done", null);
+
+  emit(
+    "done",
+    (props.schema.handler && props.schema.handler(data.value)) || null
+  );
 };
 
 // 修改FormKit ID来实现Schema重载

console/src/schema/gallery.ts

@@ -0,0 +1,83 @@
+import type { Schema, SchemaData } from "@/type/editor";
+import { t } from "@/utils/i18n-utils";
+
+const schema: Schema = {
+  type: "template",
+  id: "gallery",
+  icon: "",
+  name: t("insert_gallery"),
+  formKit: [
+    {
+      $formkit: "select",
+      name: "type",
+      label: t("type"),
+      value: "grid",
+      options: {
+        grid: t("grid"),
+        linear: t("linear"),
+      },
+    },
+    {
+      $formkit: "text",
+      name: "title",
+      label: t("title"),
+      value: "",
+    },
+    {
+      $formkit: "repeater",
+      name: "attachments",
+      label: t("image_group"),
+      min: 1,
+      value: [{}],
+      children: [
+        {
+          $formkit: "attachment",
+          name: "attachment",
+          label: t("image"),
+          accepts: ["image/*"],
+          value: "",
+        },
+        {
+          $formkit: "text",
+          name: "attach_title",
+          label: t("image_alt"),
+          value: "",
+          placeholder: t("image_alt_ph"),
+        },
+      ],
+    },
+  ],
+  handler: (data: SchemaData) => {
+    // title type list[]
+    const galleryData = data as GallerySchemaData;
+    let html = `\`\`\`halo\ngallery:${galleryData.type}`;
+    if (galleryData.title) {
+      html += `[${galleryData.title}]`;
+    }
+    html += "\n";
+    galleryData.attachments?.forEach((att) => {
+      let title = "";
+      if (att.attach_title) {
+        title = att.attach_title;
+      } else {
+        const start = att.attachment.lastIndexOf("/");
+        const end = att.attachment.lastIndexOf(".");
+        title = att.attachment.slice(start, end);
+      }
+      html += `![${title}](${att.attachment})\n`;
+    });
+    html += "```";
+    return html;
+  },
+};
+
+export interface GallerySchemaData extends SchemaData {
+  title: string;
+  type: "grid" | "linear";
+  attachments: Array<{
+    attachment: string;
+    attach_title?: string;
+  }>;
+}
+
+export default schema;

console/src/type/editor.d.ts

@@ -22,7 +22,11 @@ export interface Schema {
   // 解析后处理
   afterHandle?: (data: { [key: string]: string }, code: string) => string;
   // 覆盖解析
-  handler?: (data: { [key: string]: string }) => string;
+  handler?: (data: SchemaData) => string;
+}
+
+export interface SchemaData {
+  _id?: string;
 }
 
 export interface QuickInsert {

console/src/utils/vditor-utils.ts

@@ -4,6 +4,7 @@ import { t } from "@/utils/i18n-utils";
 import tips from "@/schema/tips";
 import git from "@/schema/git";
 import drive from "@/schema/drive";
+import gallery from "@/schema/gallery";
 
 export function getOptions(options: Options): IOptions {
   const cdn =
@@ -141,6 +142,11 @@ function getToolbar(
           icon: t("insert_drive"),
           click: () => openModal(drive),
         },
+        {
+          name: "insert_gallery",
+          icon: t("insert_gallery"),
+          click: () => openModal(gallery),
+        },
       ],
     },
     {