zhengyi
/
halo-plugin-vditor
1
1
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 15 Wiki Activity

🎨 Format code

This commit is contained in:
zhengyi 2023-12-18 23:34:47 +08:00
parent f68244538c
commit 4d0303445e
8 changed files with 81 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -30,7 +30,7 @@ log/
nbproject/private/
build/
nbbuild/
dist/
./dist/
nbdist/
.nb-gradle/

9
console/src/i18n/en-US.ts
View File

@ -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;

2
console/src/type/editor.d.ts vendored
View File

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

2
console/src/type/i18n.d.ts vendored
View File

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

14
console/src/utils/i18n-utils.ts
View File

@ -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];
}

3
console/src/utils/icon.ts
View File

@ -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>`;

55
console/src/utils/vditor-utils.ts
View File

@ -1,6 +1,6 @@
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 {
@ -19,35 +19,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 +83,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 +94,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"],
},
];
}

72
console/src/views/Vditor.vue
View File

@ -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 "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>