From 8cf103932ef514f836d27e386a8b942be7be9715 Mon Sep 17 00:00:00 2001
From: zhengyi <admin@mczhengyi.top>
Date: Sat, 27 Jan 2024 17:39:06 +0800
Subject: [PATCH] :sparkles: Add settings for vditor debugger

Fix: https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/issues/56
---
 CHANGELOG.md                                |  1 +
 console/src/type/editor.d.ts                |  3 +++
 console/src/utils/config-utils.ts           | 10 ++++++++--
 console/src/utils/vditor-utils.ts           |  1 +
 console/src/views/Vditor.vue                |  2 +-
 src/main/resources/extensions/settings.yaml | 10 +++++++++-
 6 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7949798..3649e99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ### v1.5.2
 
+- ✨ 添加Vditor Debugger设置
 - 🐛 修复行内公式渲染的问题 #22
 
 ### v1.5.1
diff --git a/console/src/type/editor.d.ts b/console/src/type/editor.d.ts
index 6611ff3..6999ebf 100644
--- a/console/src/type/editor.d.ts
+++ b/console/src/type/editor.d.ts
@@ -1,3 +1,5 @@
+import type {EditorConfig} from "@/utils/config-utils";
+
 export declare type Options = {
   defaultRenderMode: "ir" | "wysiwyg" | "sv" | undefined;
   typeWriterMode: boolean;
@@ -10,6 +12,7 @@ export declare type Options = {
   openModal: (schema: Schema) => void;
   quickInsertList: QuickInsert[];
   enableQuickInsert: boolean;
+  config: EditorConfig;
 };
 
 export interface Schema {
diff --git a/console/src/utils/config-utils.ts b/console/src/utils/config-utils.ts
index 6bc2927..900351d 100644
--- a/console/src/utils/config-utils.ts
+++ b/console/src/utils/config-utils.ts
@@ -11,6 +11,9 @@ export declare type EditorConfig = {
   extension: {
     allowImageType: string;
   };
+  developer: {
+    debugger: boolean;
+  };
 };
 
 export const defaultEditorConfig: EditorConfig = {
@@ -25,5 +28,8 @@ export const defaultEditorConfig: EditorConfig = {
   },
   extension: {
     allowImageType: "png,jpg,jpeg,bmp,gif,webp,svg",
-  }
-}
+  },
+  developer: {
+    debugger: false,
+  },
+};
diff --git a/console/src/utils/vditor-utils.ts b/console/src/utils/vditor-utils.ts
index 12ecf7f..191a6d0 100644
--- a/console/src/utils/vditor-utils.ts
+++ b/console/src/utils/vditor-utils.ts
@@ -65,6 +65,7 @@ export function getOptions(options: Options): IOptions {
     upload: {
       handler: options.uploadImage,
     },
+    debugger: options.config.developer.debugger,
   };
 }
 
diff --git a/console/src/views/Vditor.vue b/console/src/views/Vditor.vue
index f63603c..b77cd61 100644
--- a/console/src/views/Vditor.vue
+++ b/console/src/views/Vditor.vue
@@ -1 +1 @@
-<script setup lang="ts">
import Vditor from "@zhengyi/vditor";
import { onMounted, onUnmounted, ref } from "vue";
import "@zhengyi/vditor/dist/index.css";
import type { Schema } from "@/type/editor";
import { getOptions } from "@/utils/vditor-utils";
import type { AttachmentLike } from "@halo-dev/console-shared";
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";
import {quickInsertInject} from "@/utils/quick-insert-utils";
import {addStyle} from "@/utils/dom-utils";
import {getCursor, setCursor} from "@/utils/cursor-utils";
import {defaultEditorConfig, type EditorConfig} from "@/utils/config-utils";

const props = withDefaults(
  defineProps<{
    raw?: string;
    content: string;
    uploadImage?: (file: File) => Promise<Attachment>;
  }>(),
  {
    raw: "",
    content: "",
    uploadImage: undefined,
  }
);

const vditor = ref();
const vditorRef = ref();
const vditorLoaded = ref(false);
const attachmentSelectorModalShow = ref(false);
// 特殊插入框， 当前支持none/tips/git
// 自定义插入
const customInsertOpen = ref(false);
const customInsertSchema = ref<Schema>(joeProgress);
let lastSelectionRange: Range| undefined = undefined;
// Image Upload
let imageUploadCursor: Range | undefined
let imageUploadLock = false
let allowImageUpload: string[] = []

const emit = defineEmits<{
  (event: "update:raw", value: string): void;
  (event: "update:content", value: string): void;
  (event: "update", value: string): void;
}>();

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) => {
    if (typeof attachment === "string") {
      vditor.value.insertValue(`![](${attachment})`);
    } else if ("url" in attachment) {
      vditor.value.insertValue(`![${attachment.type}](${attachment.url})`);
    } else if ("spec" in attachment) {
      const { displayName } = attachment.spec;
      const { permalink } = attachment.status || {};
      vditor.value.insertValue(`![${displayName}](${permalink})`);
    }
  });
};

onUnmounted(async () => {
  document
    .querySelectorAll("script[id^='vditor']")
    .forEach((el) => el.remove());
  document.querySelectorAll("link[id^='vditor']").forEach((el) => el.remove());
  vditorLoaded.value = false;
});

onMounted(async () => {
  // 实验性功能: 获取当前语言
  const lang = localStorage.getItem("locale") || "zh-CN";
  let editorConfig: EditorConfig;
  try {
    const response = await fetch(
      "/apis/api.vditor.mczhengyi.top/editor-options"
    );
    editorConfig = await response.json();
  } catch (e) {
    // ignore this
    editorConfig = defaultEditorConfig;
  }
  // Assign allowImage
  allowImageUpload = allowImageUpload.concat(editorConfig.extension.allowImageType.split(",").map(i => i.trim()))
  console.log("ALLOW", allowImageUpload)
  // 禁用HTML代码块隐藏
  if (editorConfig.basic.disableHTMLBlockPreview)
    addStyle("[data-type=html-block] pre {display: block!important;}\n" + 
      ".vditor-ir__node[data-type=html-block] .vditor-ir__marker {height: auto; width: auto; display: inline;}", "vditor-mde-hide-html")

  const qil = await fetchAllQuickInsert(editorConfig.basic.quickInsertUrl);
  qil.forEach(q => {
    quickInsertInject(q.inject || [], q.provider);
  })
  vditor.value = new Vditor(
    vditorRef.value,
    getOptions({
      defaultRenderMode: editorConfig.basic.defaultRenderMode,
      typeWriterMode: editorConfig.basic.typeWriterMode,
      after: () => {
        vditor.value.setValue(props.raw || "# Title Here");
        vditorLoaded.value = true;
      },
      input: debounceOnUpdate,
      showAttachment: () => (attachmentSelectorModalShow.value = true),
      language: lang,
      codeBlockPreview: editorConfig.basic.codeBlockPreview,
      uploadImage: (files: File[]) => {
        console.log("UPLOAD IMAGE")
        if (imageUploadLock) {
          vditor.value.tip("当前已经存在正在上传的文件，请等待上传完成", 2000)
          return 
        }
        // Save cursor
        imageUploadCursor = getCursor()
        // Check extension name
        const extendName = files[0].name
          .slice(files[0].name.lastIndexOf(".") + 1)
          .toLowerCase();
        if (allowImageUpload.indexOf(extendName) === -1) {
          vditor.value.tip("不允许上传该类型图片!", 2000);
          return null;
        }
        // Upload
        if (props.uploadImage) {
          vditor.value.tip("正在上传图片...", 2000);
          props.uploadImage(files[0]).then((res: Attachment) => {
            vditor.value.disabled()
            // Move cursor
            const tmpCursor = getCursor()
            setCursor(imageUploadCursor)
            imageUploadCursor = undefined
            // Insert
            vditor.value.insertValue(
              `\n\n![${res.spec.displayName}](${res.status.permalink})\n\n`
            );
            // Restore cursor
            setCursor(tmpCursor)
            vditor.value.enable()
          });
        }
        return null;
      },
      openModal: (schema: Schema) => {
        lastSelectionRange = getCursor()
        customInsertSchema.value = schema;
        customInsertOpen.value = true;
      },
      enableQuickInsert: editorConfig.basic.enableQuickInsert,
      quickInsertList: qil,
    })
  );
});

const update = (val: string | null) => {
  setCursor(lastSelectionRange)
  if (!val) {
    vditor.value.tip("未知错误，插入失败", 3000);
  } else {
    vditor.value.focus()
    vditor.value.insertValue(`\n\n${val}\n\n`);
  }
  customInsertOpen.value = false;
};
</script>

<template>
  <div id="plugin-vditor-mde">
    <VLoading v-if="!vditorLoaded" style="height: 100%" />
    <div id="vditor" ref="vditorRef"></div>
    <TemplateModal
      :open="customInsertOpen"
      :schema="customInsertSchema"
      @close="customInsertOpen = false"
      @done="update"
    />

    <AttachmentSelectorModal
      v-model:visible="attachmentSelectorModalShow"
      :accepts="['image/*']"
      :max="1"
      @select="attachmentSelect"
    />
  </div>
</template>

<style>
#plugin-vditor-mde ol {
  list-style: decimal;
}

/** Fix Link color in wysiwyg mode */

#plugin-vditor-mde a {
  color: #3478CD;
}

/** Fix content was covered by vditor panel in wysiwyg mode  */
#plugin-vditor-mde button,
#plugin-vditor-mde input {
  line-height: normal;
}

.insert-modals label {
  width: 100%;
  display: flex;
}

.insert-modals label span {
  width: 60px;
  text-align: right;
}

.insert-modals select {
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-left: 10px;
  flex: 1;
}

.insert-modals textarea {
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-left: 10px;
  flex: 1;
}

.insert-modals input[type="text"] {
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-left: 10px;
  flex: 1;
  padding: 8px 10px;
}
</style>
\ No newline at end of file
+<script setup lang="ts">
import Vditor from "@zhengyi/vditor";
import { onMounted, onUnmounted, ref } from "vue";
import "@zhengyi/vditor/dist/index.css";
import type { Schema } from "@/type/editor";
import { getOptions } from "@/utils/vditor-utils";
import type { AttachmentLike } from "@halo-dev/console-shared";
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";
import {quickInsertInject} from "@/utils/quick-insert-utils";
import {addStyle} from "@/utils/dom-utils";
import {getCursor, setCursor} from "@/utils/cursor-utils";
import {defaultEditorConfig, type EditorConfig} from "@/utils/config-utils";

const props = withDefaults(
  defineProps<{
    raw?: string;
    content: string;
    uploadImage?: (file: File) => Promise<Attachment>;
  }>(),
  {
    raw: "",
    content: "",
    uploadImage: undefined,
  }
);

const vditor = ref();
const vditorRef = ref();
const vditorLoaded = ref(false);
const attachmentSelectorModalShow = ref(false);
// 特殊插入框， 当前支持none/tips/git
// 自定义插入
const customInsertOpen = ref(false);
const customInsertSchema = ref<Schema>(joeProgress);
let lastSelectionRange: Range| undefined = undefined;
// Image Upload
let imageUploadCursor: Range | undefined
let imageUploadLock = false
let allowImageUpload: string[] = []

const emit = defineEmits<{
  (event: "update:raw", value: string): void;
  (event: "update:content", value: string): void;
  (event: "update", value: string): void;
}>();

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) => {
    if (typeof attachment === "string") {
      vditor.value.insertValue(`![](${attachment})`);
    } else if ("url" in attachment) {
      vditor.value.insertValue(`![${attachment.type}](${attachment.url})`);
    } else if ("spec" in attachment) {
      const { displayName } = attachment.spec;
      const { permalink } = attachment.status || {};
      vditor.value.insertValue(`![${displayName}](${permalink})`);
    }
  });
};

onUnmounted(async () => {
  document
    .querySelectorAll("script[id^='vditor']")
    .forEach((el) => el.remove());
  document.querySelectorAll("link[id^='vditor']").forEach((el) => el.remove());
  vditorLoaded.value = false;
});

onMounted(async () => {
  // 实验性功能: 获取当前语言
  const lang = localStorage.getItem("locale") || "zh-CN";
  let editorConfig: EditorConfig;
  try {
    const response = await fetch(
      "/apis/api.vditor.mczhengyi.top/editor-options"
    );
    editorConfig = await response.json();
  } catch (e) {
    // ignore this
    editorConfig = defaultEditorConfig;
  }
  // Assign allowImage
  allowImageUpload = allowImageUpload.concat(editorConfig.extension.allowImageType.split(",").map(i => i.trim()))
  console.log("ALLOW", allowImageUpload)
  // 禁用HTML代码块隐藏
  if (editorConfig.basic.disableHTMLBlockPreview)
    addStyle("[data-type=html-block] pre {display: block!important;}\n" + 
      ".vditor-ir__node[data-type=html-block] .vditor-ir__marker {height: auto; width: auto; display: inline;}", "vditor-mde-hide-html")

  const qil = await fetchAllQuickInsert(editorConfig.basic.quickInsertUrl);
  qil.forEach(q => {
    quickInsertInject(q.inject || [], q.provider);
  })
  vditor.value = new Vditor(
    vditorRef.value,
    getOptions({
      defaultRenderMode: editorConfig.basic.defaultRenderMode,
      typeWriterMode: editorConfig.basic.typeWriterMode,
      after: () => {
        vditor.value.setValue(props.raw || "# Title Here");
        vditorLoaded.value = true;
      },
      input: debounceOnUpdate,
      showAttachment: () => (attachmentSelectorModalShow.value = true),
      language: lang,
      codeBlockPreview: editorConfig.basic.codeBlockPreview,
      uploadImage: (files: File[]) => {
        console.log("UPLOAD IMAGE")
        if (imageUploadLock) {
          vditor.value.tip("当前已经存在正在上传的文件，请等待上传完成", 2000)
          return 
        }
        // Save cursor
        imageUploadCursor = getCursor()
        // Check extension name
        const extendName = files[0].name
          .slice(files[0].name.lastIndexOf(".") + 1)
          .toLowerCase();
        if (allowImageUpload.indexOf(extendName) === -1) {
          vditor.value.tip("不允许上传该类型图片!", 2000);
          return null;
        }
        // Upload
        if (props.uploadImage) {
          vditor.value.tip("正在上传图片...", 2000);
          props.uploadImage(files[0]).then((res: Attachment) => {
            vditor.value.disabled()
            // Move cursor
            const tmpCursor = getCursor()
            setCursor(imageUploadCursor)
            imageUploadCursor = undefined
            // Insert
            vditor.value.insertValue(
              `\n\n![${res.spec.displayName}](${res.status.permalink})\n\n`
            );
            // Restore cursor
            setCursor(tmpCursor)
            vditor.value.enable()
          });
        }
        return null;
      },
      openModal: (schema: Schema) => {
        lastSelectionRange = getCursor()
        customInsertSchema.value = schema;
        customInsertOpen.value = true;
      },
      enableQuickInsert: editorConfig.basic.enableQuickInsert,
      quickInsertList: qil,
      config: editorConfig,
    })
  );
});

const update = (val: string | null) => {
  setCursor(lastSelectionRange)
  if (!val) {
    vditor.value.tip("未知错误，插入失败", 3000);
  } else {
    vditor.value.focus()
    vditor.value.insertValue(`\n\n${val}\n\n`);
  }
  customInsertOpen.value = false;
};
</script>

<template>
  <div id="plugin-vditor-mde">
    <VLoading v-if="!vditorLoaded" style="height: 100%" />
    <div id="vditor" ref="vditorRef"></div>
    <TemplateModal
      :open="customInsertOpen"
      :schema="customInsertSchema"
      @close="customInsertOpen = false"
      @done="update"
    />

    <AttachmentSelectorModal
      v-model:visible="attachmentSelectorModalShow"
      :accepts="['image/*']"
      :max="1"
      @select="attachmentSelect"
    />
  </div>
</template>

<style>
#plugin-vditor-mde ol {
  list-style: decimal;
}

/** Fix Link color in wysiwyg mode */

#plugin-vditor-mde a {
  color: #3478CD;
}

/** Fix content was covered by vditor panel in wysiwyg mode  */
#plugin-vditor-mde button,
#plugin-vditor-mde input {
  line-height: normal;
}

.insert-modals label {
  width: 100%;
  display: flex;
}

.insert-modals label span {
  width: 60px;
  text-align: right;
}

.insert-modals select {
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-left: 10px;
  flex: 1;
}

.insert-modals textarea {
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-left: 10px;
  flex: 1;
}

.insert-modals input[type="text"] {
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-left: 10px;
  flex: 1;
  padding: 8px 10px;
}
</style>
\ No newline at end of file
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
index 503af78..55cbc18 100644
--- a/src/main/resources/extensions/settings.yaml
+++ b/src/main/resources/extensions/settings.yaml
@@ -88,4 +88,12 @@ spec:
               name: onlyMarkdown
               label: "仅在Markdown模式下渲染"
               help: "启用该功能将仅在Markdown格式的文章下注入渲染脚本"
-              value: true
\ No newline at end of file
+              value: true
+        - group: developer
+          label: 开发者设置
+          formSchema:
+            - $formkit: checkbox
+              name: debugger
+              label: "启用Debugger"
+              help: "启动Vditor编辑器的Debugger模式，一般用于开发者使用"
+              value: false
\ No newline at end of file