.gitea/workflows/workflow.yaml

@@ -3,9 +3,6 @@ name: Build Plugin JAR File
 on:
   push:
     branches: [ main, dev ]
-  release:
-    types:
-      - created
 
 jobs:
   build:
@@ -41,15 +38,21 @@ 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
       - name: Build with Gradle
         run: |
           # Set the version with tag name when releasing
-          version=${{ github.event.release.tag_name }}
-          version=${version#v}
-          sed -i "s/version=.*-SNAPSHOT$/version=$version/1" gradle.properties
+          if [ $GITHUB_REF_NAME == "main" ]; then
+            version=${{ github.event.release.tag_name }}
+            version=${version#v}
+            sed -i "s/version=.*-SNAPSHOT$/version=$version/1" gradle.properties
+          fi
           ./gradlew clean build -x test
       - name: Archive plugin-starter jar
         uses: actions/upload-artifact@v3

.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.8",
     "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>

doc/halo.md

@@ -0,0 +1,71 @@
+# Halo-Vditor语法介绍
+
+> 当前halo-render还在测试中，halo-render也可以接入任何markdown编辑器中，
+> 在维护过程中，我会尽量保证语法保持不变
+
+[Halo-Vditor](https://git.mczhengyi.top/zhengyi/vditor)在原版
+Vditor基础上添加了[HaloRender](https://git.mczhengyi.top/zhengyi/halo-render)
+的支持，实现了部分适用于博客编写的拓展语法。
+
+## 支持语法
+
+Halo Vditor的基本语法规则为：
+
+```markdown
+    ```halo
+    <类型>:<参数>
+    <内容>
+    ```
+```
+
+### 多彩Tips
+
+![Colorful Tips](assets/colorful-tips.png)
+
+语法:
+```markdown
+tips:<类型>
+<内容>
+```
+
+类型可以是:
+
+- `-` 不填写类型时默认为灰色
+- `warn` 警告类型
+- `danger` 危险类型
+- `success` 成功类型
+- `info` 提示类型
+
+同时内容支持HTML文本，Render将不会对内容进行转译
+
+**示例**
+
+```markdown
+tips:info
+Support HTML
+<div style="color: #aaaa00;">This is HTML Code</div>
+```
+
+### Git仓库
+
+Git 仓库功能可以在页面上为用户展示仓库的信息。该功能暂时仅支持
+Github仓库，后续会添加对gitea、gitee的支持。
+
+![Git Repo](assets/git-repo.png)
+
+语法:
+
+```markdown
+git:[<网址>@<平台>/<所有者>/<仓库>]
+```
+
+- `网址` 保留功能。
+- `平台` 当前版本仅支持github
+
+> 当使用github平台时无需填写网址，但要保留@符号
+
+**示例**
+
+```markdown
+git:[@github/justice2001/halo-plugin-vditor]
+```

download_dist.sh

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

gradle.properties

@@ -1 +1 @@
-version=1.1.0-SNAPSHOT
+version=1.3.0-SNAPSHOT

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)
         }
     }
 }