Merge pull request 'Move vditor assets to local' (PR#14) from feat-local-asset into dev

Reviewed-on: #14

.gitea/workflows/workflow.yaml

@@ -38,6 +38,10 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/console/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
+      - name: Download Vditor assets
+        run: |
+          chmod a+x download_dist.sh
+          bash download_dist.sh
       - name: Install Frontend Dependencies
         run: |
           ./gradlew pnpmInstall

.github/workflows/workflow.yaml

@@ -41,6 +41,10 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/console/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
+      - name: Download Vditor assets
+        run: |
+          chmod a+x download_dist.sh
+          bash download_dist.sh
       - name: Install Frontend Dependencies
         run: |
           ./gradlew pnpmInstall

README.md

@@ -96,6 +96,12 @@ git clone git@github.com:{your_github_id}/vditor-mde.git
 cd path/to/plugin-starter
 ```
 
+```bash
+# 下载依赖包
+chmod a+x download_dist.sh
+./download_dist.sh
+```
+
 ```bash
 # macOS / Linux
 ./gradlew pnpmInstall

console/.npmrc

@@ -0,0 +1 @@
+@zhengyi:registry=https://git.mczhengyi.top/api/packages/zhengyi/npm/

console/package.json

@@ -14,7 +14,7 @@
     "@halo-dev/components": "^1.7.0",
     "@halo-dev/console-shared": "^2.8.0",
     "canvas-confetti": "^1.6.0",
-    "vditor": "^3.9.6",
+    "@zhengyi/vditor": "^3.9.7",
     "vue": "^3.3.4"
   },
   "devDependencies": {

console/src/i18n/en-US.ts

@@ -1,8 +1,7 @@
-import type {I18nLang} from "@/type/i18n";
+import type { I18nLang } from "@/type/i18n";
 
 const lang: I18nLang = {
-  "insert_image": "Insert Image"
-}
+  insert_image: "Insert Image",
+};
 
-
-export default lang
+export default lang;

console/src/type/editor.d.ts

@@ -15,4 +15,4 @@ export declare type Options = {
   showAttachment: () => void;
   language: string;
   codeBlockPreview: boolean;
-}
+};

console/src/type/i18n.d.ts

@@ -1 +1 @@
-export declare type I18nLang = {[key: string]: string}
+export declare type I18nLang = { [key: string]: string };

console/src/utils/i18n-utils.ts

@@ -1,13 +1,13 @@
 import zhCN from "@/i18n/zh-CN";
-import type {I18nLang} from "@/type/i18n";
+import type { I18nLang } from "@/type/i18n";
 import zhTW from "@/i18n/zh-TW";
 import enUS from "@/i18n/en-US";
 
-const langDict: {[key: string]: I18nLang} = {
-  "zh_CN": zhCN,
-  "zh_TW": zhTW,
-  "en_US": enUS
-}
+const langDict: { [key: string]: I18nLang } = {
+  zh_CN: zhCN,
+  zh_TW: zhTW,
+  en_US: enUS,
+};
 
 /**
  * 获取翻译的文本
@@ -15,5 +15,5 @@ const langDict: {[key: string]: I18nLang} = {
  * @param lang 目标语言
  */
 export function t(key: string, lang: keyof II18n): string {
-  return langDict[lang][key]
+  return langDict[lang][key];
 }

console/src/utils/icon.ts

@@ -1,2 +1 @@
-
-export const mdiImage: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m8.5 13.5l2.5 3l3.5-4.5l4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2"/></svg>`
+export const mdiImage = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m8.5 13.5l2.5 3l3.5-4.5l4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2"/></svg>`;

console/src/utils/vditor-utils.ts

@@ -1,12 +1,13 @@
-import type {Options} from "@/type/editor";
-import {mdiImage} from "@/utils/icon";
-import {t} from "@/utils/i18n-utils";
+import type { Options } from "@/type/editor";
+import { mdiImage } from "@/utils/icon";
+import { t } from "@/utils/i18n-utils";
 
 export function getOptions(options: Options): IOptions {
   return {
     height: "calc(100vh - 56px)",
     mode: options.defaultRenderMode,
     typewriterMode: options.typeWriterMode,
+    cdn: "/plugins/vditor-mde/assets/static",
     icon: "material",
     lang: getLanguage(options.language),
     toolbarConfig: {
@@ -19,35 +20,43 @@ export function getOptions(options: Options): IOptions {
     input: options.input,
     toolbar: getToolbar(options.showAttachment, getLanguage(options.language)),
     counter: {
-      enable: true
+      enable: true,
     },
     preview: {
       markdown: {
         toc: true,
-        codeBlockPreview: options.codeBlockPreview
-      }
+        codeBlockPreview: options.codeBlockPreview,
+      },
     },
     outline: {
       enable: true,
-      position: "left"
+      position: "left",
     },
     fullscreen: {
-      index: 1000
-    }
-  }
+      index: 1000,
+    },
+  };
 }
 
-function getLanguage(lang="zh-CN"):keyof II18n {
+function getLanguage(lang = "zh-CN"): keyof II18n {
   switch (lang) {
-    case "zh-CN": return "zh_CN";
-    case "zh-TW": return "zh_TW";
-    case "en-US": return "en_US";
-    case "es": return "en_US";
-    default: return "zh_CN";
+    case "zh-CN":
+      return "zh_CN";
+    case "zh-TW":
+      return "zh_TW";
+    case "en-US":
+      return "en_US";
+    case "es":
+      return "en_US";
+    default:
+      return "zh_CN";
   }
 }
 
-function getToolbar(showAttachmentCb: () => void, lang: keyof II18n): (string | IMenuItem)[] | undefined {
+function getToolbar(
+  showAttachmentCb: () => void,
+  lang: keyof II18n
+): (string | IMenuItem)[] | undefined {
   return [
     "emoji",
     "headings",
@@ -75,7 +84,7 @@ function getToolbar(showAttachmentCb: () => void, lang: keyof II18n): (string |
       tip: t("insert_image", lang),
       tipPosition: "n",
       hotkey: "⇧⌘P",
-      click: showAttachmentCb
+      click: showAttachmentCb,
     },
     "table",
     "|",
@@ -86,12 +95,7 @@ function getToolbar(showAttachmentCb: () => void, lang: keyof II18n): (string |
     "edit-mode",
     {
       name: "more",
-      toolbar: [
-        "both",
-        "export",
-        "outline",
-        "info",
-        "help"
-      ],
-    },]
+      toolbar: ["both", "export", "outline", "info", "help"],
+    },
+  ];
 }

console/src/views/Vditor.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import Vditor from "vditor";
-import {onMounted, ref} from "vue";
-import "vditor/dist/index.css"
-import type {EditorConfig} from "@/type/editor";
-import {getOptions} from "@/utils/vditor-utils";
-import type {AttachmentLike} from "@halo-dev/console-shared";
+import Vditor from "@zhengyi/vditor";
+import { onMounted, ref } from "vue";
+import "@zhengyi/vditor/dist/index.css";
+import type { EditorConfig } from "@/type/editor";
+import { getOptions } from "@/utils/vditor-utils";
+import type { AttachmentLike } from "@halo-dev/console-shared";
 
 const props = withDefaults(
   defineProps<{
@@ -17,9 +17,9 @@ const props = withDefaults(
   }
 );
 
-const vditor = ref()
-const vditorRef = ref()
-const attachmentSelectorModalShow = ref(false)
+const vditor = ref();
+const vditorRef = ref();
+const attachmentSelectorModalShow = ref(false);
 
 const emit = defineEmits<{
   (event: "update:raw", value: string): void;
@@ -31,12 +31,12 @@ const debounceOnUpdate = () => {
   emit("update:raw", vditor.value.getValue());
   emit("update:content", vditor.value.getHTML() || "");
   emit("update", vditor.value.getValue());
-}
+};
 
 // 选取附件后处理
 const attachmentSelect = (attachments: AttachmentLike[]) => {
   // Reference https://github.com/guqing/willow-mde/blob/4b8e697132f8a8f4b08dd0f92cf10d070cb26793/console/src/components/toolbar/Toolbar.vue#L104
-  attachments.forEach(attachment => {
+  attachments.forEach((attachment) => {
     if (typeof attachment === "string") {
       vditor.value.insertValue(`![](${attachment})`);
     } else if ("url" in attachment) {
@@ -46,41 +46,43 @@ const attachmentSelect = (attachments: AttachmentLike[]) => {
       const { permalink } = attachment.status || {};
       vditor.value.insertValue(`![${displayName}](${permalink})`);
     }
-  })
-}
+  });
+};
 
 onMounted(async () => {
-  let mode: "ir" | "wysiwyg" | "sv" | undefined = "ir"
-  let typeWriterMode: boolean = false
-  let codeBlockPreview: boolean = true
-  
+  let mode: "ir" | "wysiwyg" | "sv" | undefined = "ir";
+  let typeWriterMode = false;
+  let codeBlockPreview = true;
+
   // 实验性功能: 获取当前语言
-  const lang = localStorage.getItem("locale") || "zh-CN"
-  
+  const lang = localStorage.getItem("locale") || "zh-CN";
+
   try {
     const response = await fetch(
       "/apis/api.vditor.mczhengyi.top/editor-options"
     );
     const editorConfig: EditorConfig = await response.json();
-    mode = editorConfig.basic.defaultRenderMode
-    typeWriterMode = editorConfig.basic.typeWriterMode
-    codeBlockPreview = editorConfig.basic.codeBlockPreview
+    mode = editorConfig.basic.defaultRenderMode;
+    typeWriterMode = editorConfig.basic.typeWriterMode;
+    codeBlockPreview = editorConfig.basic.codeBlockPreview;
   } catch (e) {
     // ignore this
   }
-  vditor.value = new Vditor(vditorRef.value, getOptions({
-    defaultRenderMode: mode,
-    typeWriterMode: typeWriterMode,
-    after: () => {
-      vditor.value.setValue(props.raw || "# Title Here")
-    },
-    input: debounceOnUpdate,
-    showAttachment: () => attachmentSelectorModalShow.value = true,
-    language: lang,
-    codeBlockPreview: codeBlockPreview
-  }))
-})
-
+  vditor.value = new Vditor(
+    vditorRef.value,
+    getOptions({
+      defaultRenderMode: mode,
+      typeWriterMode: typeWriterMode,
+      after: () => {
+        vditor.value.setValue(props.raw || "# Title Here");
+      },
+      input: debounceOnUpdate,
+      showAttachment: () => (attachmentSelectorModalShow.value = true),
+      language: lang,
+      codeBlockPreview: codeBlockPreview,
+    })
+  );
+});
 </script>
 
 <template>

download_dist.sh

@@ -0,0 +1,10 @@
+#!/bin/zsh
+
+cd src/main/resources/static
+pwd
+curl -o vditor.tgz \
+ https://git.mczhengyi.top/zhengyi/-/packages/npm/@zhengyi%2Fvditor/3.9.7/files/248
+tar -xzvf vditor.tgz
+mv package/dist .
+rm -rf package
+rm -f vditor.tgz

src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java

@@ -14,7 +14,7 @@ public class ScriptUtils {
 
     public static String basicScript(RenderConfig renderConfig) {
         return """
-                <script src="/plugins/vditor-mde/assets/static/method.min.js"></script>
+                <script src="/plugins/vditor-mde/assets/static/dist/method.min.js"></script>
                 <script src="/plugins/vditor-mde/assets/static/render.js" id="render-script"
                   data-dark="%s" data-mediaRender="%s"></script>
                 """.formatted(renderConfig.getDarkMode(), renderConfig.getMediaRender());

src/main/resources/static/render.js

@@ -1,4 +1,5 @@
-const THEME_PREFIX="https://unpkg.com/vditor@3.9.6/dist/css/content-theme"
+const THEME_PREFIX="/plugins/vditor-mde/assets/static/dist/css/content-theme"
+const CDN = "/plugins/vditor-mde/assets/static"
 
 window.addEventListener("load", () => {
     // 暗色模式初始化
@@ -12,6 +13,7 @@ window.addEventListener("load", () => {
     render("language-abc", Vditor.abcRender)
     render("language-graphviz", Vditor.graphvizRender)
     render("language-flowchart", Vditor.flowchartRender)
+    render("language-halo", Vditor.haloRender)
     // Render Media
     let mediaRenderOption = document.getElementById("render-script").dataset.mediarender
     if (mediaRenderOption==="true") {
@@ -77,9 +79,9 @@ function render(selector, callback, dark=null) {
     for (let i = 0; i < mindmap.length;i++) {
         const el = coverThis(mindmap[i])
         if (dark) {
-            callback(el, "https://unpkg.com/vditor@3.9.6", dark?"dark":"classic")
+            callback(el, CDN, dark?"dark":"classic")
         } else {
-            callback(el)
+            callback(el, CDN)
         }
     }
 }