⬆️ Update vditor 3.9.9 (official)
Build Plugin JAR File / build (push) Has been cancelled Details
Build Plugin JAR File / github-release (push) Has been cancelled Details

Fix https://github.com/justice2001/halo-plugin-vditor/issues/20
Fix #51
This commit is contained in:
zhengyi 2024-01-30 18:41:57 +08:00
parent b074329dc5
commit d48f8aa144
18 changed files with 321 additions and 26 deletions

View File

@ -9,6 +9,8 @@
- ✨ 添加Vditor Debugger设置
- 🐛 修复行内公式渲染的问题 #22
- 🐛 修复操作栏修改属性不生效的问题 #20 \[vditor]
- ⬆️ 修改Vditor为官方版本(Vditor 3.9.9)
### v1.5.1

View File

@ -15,7 +15,7 @@
"@halo-dev/api-client": "^2.11.0",
"@halo-dev/components": "^1.10.0",
"@halo-dev/console-shared": "^2.11.0",
"@zhengyi/vditor": "3.9.10",
"vditor": "3.9.9",
"canvas-confetti": "^1.6.0",
"vue": "^3.3.4"
},

View File

@ -17,12 +17,12 @@ dependencies:
'@halo-dev/console-shared':
specifier: ^2.11.0
version: 2.11.0(vue-router@4.2.5)(vue@3.3.12)
'@zhengyi/vditor':
specifier: 3.9.10
version: 3.9.10
canvas-confetti:
specifier: ^1.6.0
version: 1.9.2
vditor:
specifier: 3.9.9
version: 3.9.9
vue:
specifier: ^3.3.4
version: 3.3.12(typescript@4.7.4)
@ -1117,17 +1117,6 @@ packages:
'@types/node': 16.18.68
dev: true
/@zhengyi/halo-render@1.1.0:
resolution: {integrity: sha512-r+aD7wvdXVRyFcw/yI/PbdIqSsC+Bnql2WSKZa8CK+ntpTvc2tybn6Wxsfw96C71QS+Q/MPe8ufwZBjtRd+hhg==, tarball: https://git.mczhengyi.top/api/packages/zhengyi/npm/%40zhengyi%2Fhalo-render/-/1.1.0/halo-render-1.1.0.tgz}
dev: false
/@zhengyi/vditor@3.9.10:
resolution: {integrity: sha512-8bAUlH4bsuUNbkrxAuxTL0XMNoLre/mab5HF8cR9wND7e/Xj56l2qz7aEARklK6oRtOlCoTYK6JEkLdozUfTkg==, tarball: https://git.mczhengyi.top/api/packages/zhengyi/npm/%40zhengyi%2Fvditor/-/3.9.10/vditor-3.9.10.tgz}
dependencies:
'@zhengyi/halo-render': 1.1.0
diff-match-patch: 1.0.5
dev: false
/abab@2.0.6:
resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
deprecated: Use your platform's native atob() and btoa() methods instead
@ -3717,6 +3706,12 @@ packages:
spdx-expression-parse: 3.0.1
dev: true
/vditor@3.9.9:
resolution: {integrity: sha512-yeUb6E//ppiN0bX85O0sDCZ7tf/b3Lz6CcR8n77mwuZWNYOmJaqG15CfSFHg21NyNFStdN54A3P/s+eq/TkwLg==}
dependencies:
diff-match-patch: 1.0.5
dev: false
/vite@3.2.7(@types/node@16.18.68)(sass@1.69.5):
resolution: {integrity: sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==}
engines: {node: ^14.18.0 || >=16.0.0}

View File

@ -5,6 +5,11 @@ import tips from "@/schema/tips";
import git from "@/schema/git";
import drive from "@/schema/drive";
import gallery from "@/schema/gallery";
import {addScript, addStyle, addStyleSheet} from "@/utils/dom-utils";
declare const HaloJs: {
renderHalo: (content: string, cdn: string) => string;
};
export function getOptions(options: Options): IOptions {
const cdn =
@ -27,7 +32,7 @@ export function getOptions(options: Options): IOptions {
height: "100%",
mode: options.defaultRenderMode,
typewriterMode: options.typeWriterMode,
cdn: cdn,
cdn: "https://cdn.jsdelivr.net/npm/vditor@3.9.9",
icon: "material",
lang: getLanguage(options.language),
toolbarConfig: {
@ -66,6 +71,7 @@ export function getOptions(options: Options): IOptions {
handler: options.uploadImage,
},
debugger: options.config.developer.debugger,
customRenders: getCustomRenders(options),
};
}
@ -180,3 +186,40 @@ function buildQuickInsertToolbar(
toolbar: children,
};
}
/**
*
* @param options
*/
function getCustomRenders(options: Options):
| {
language: string;
render: (element: HTMLElement, vditor: IVditor) => void;
}[]
| undefined {
const renders: {
language: string;
render: (element: HTMLElement, vditor: IVditor) => void;
}[] = [];
// 启用内置渲染器
addScript(
"/plugins/vditor-mde/assets/static/halo-renders/index.js",
"halo-render"
);
addStyleSheet(
"/plugins/vditor-mde/assets/static/halo-renders/index.css",
"halo-render-css"
);
renders.push({
language: "halo",
render: (element: HTMLElement) => {
console.log(element);
element.innerHTML = HaloJs.renderHalo(
element.textContent || "",
"/plugins/vditor-mde/assets/static/halo-renders"
);
},
});
console.log("Renders: ", renders);
return renders;
}

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
cd src/main/resources/static
if exist dist rmdir /s /q dist
echo %cd%
bitsadmin /transfer vditorDownloadJob https://git.mczhengyi.top/zhengyi/-/packages/npm/@zhengyi%%2Fvditor/3.9.10/files/262 %cd%\vditor.tgz
bitsadmin /transfer https://registry.npmjs.org/vditor/-/vditor-3.9.9.tgz %cd%\vditor.tgz
7z x vditor.tgz
7z x vditor.tar
move /y %cd%\package\dist %cd%

View File

@ -4,7 +4,7 @@ cd src/main/resources/static
rm -rf dist
pwd
curl -o vditor.tgz \
https://git.mczhengyi.top/zhengyi/-/packages/npm/@zhengyi%2Fvditor/3.9.10/files/262
https://registry.npmjs.org/vditor/-/vditor-3.9.9.tgz
tar -xzvf vditor.tgz
mv package/dist .
rm -rf package

View File

@ -13,8 +13,8 @@ public class ScriptBuilder {
}
public ScriptBuilder script(String path, String id) {
this.script.append("<script src=\"/plugins/vditor-mde/assets/static/%s?version=${version}\" id=\"vditor-%s\"></script>"
.formatted(path, id));
this.script.append("<script src=\"%s?version=${version}\" id=\"vditor-%s\"></script>"
.formatted(getUrl(path), id));
return this;
}
@ -24,12 +24,20 @@ public class ScriptBuilder {
}
public ScriptBuilder stylesheet(String path, String id) {
this.script.append("<link rel=\"stylesheet\" type=\"text/css\" href=\"/plugins/vditor-mde/assets/static/%s?version=${version}\" id=\"vditor-%s\" />"
.formatted(path, id));
this.script.append("<link rel=\"stylesheet\" type=\"text/css\" href=\"%s?version=${version}\" id=\"vditor-%s\" />"
.formatted(getUrl(path), id));
return this;
}
public String getScript() {
return this.script.toString();
}
private String getUrl(String url) {
if (url.startsWith("http")) {
return url;
} else {
return "/plugins/vditor-mde/assets/static/%s".formatted(url);
}
}
}

View File

@ -12,13 +12,16 @@ public class ScriptUtils {
public static String renderScript(RenderConfig renderConfig) {
ScriptBuilder script = new ScriptBuilder();
script.stylesheet("vditor-render.css", "style")
.script("dist/method.min.js", "methods")
.script("https://cdn.jsdelivr.net/npm/vditor@3.9.9/dist/method.min.js", "methods")
.script("render.js", "render");
if (renderConfig.getMediaRender())
script.script("external/media-render.js", "media");
if (!renderConfig.getDarkMode().equals("disabled")) {
script.script("dark-mode/dark-%s.js".formatted(renderConfig.getDarkMode()), "dark-mode");
}
script.script("halo-renders/index.js", "halo-render-js")
.stylesheet("halo-renders/index.css", "halo-render-css")
.script("external/halo-renders.js", "halo-render");
script.innerScript("initRender()");
return script.getScript();
}

View File

@ -0,0 +1,9 @@
addExternal((conf) => {
document.querySelectorAll(".language-halo").forEach(el => {
// TODO: Vditor未对getHTML的代码进行处理
el.parentElement.outerHTML = HaloJs.renderHalo(
el.textContent,
"/plugins/vditor-mde/assets/static/halo-renders"
);
})
})

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703730875005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7787" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M157.520435 0h708.958984C953.08055-0.058514 1023.443968 69.822161 1023.999854 156.408663v711.182527C1023.443968 954.177692 953.065921 1024.058368 866.479419 1023.999854H157.520435C70.919304 1024.058368 0.555886 954.177692 0 867.59119V156.408663C0.555886 69.822161 70.933933-0.058514 157.520435 0z" fill="#FFFFFF" p-id="7788"></path><path d="M438.008623 167.146033a227.386482 227.386482 0 0 1 237.231509 86.147645 224.372997 224.372997 0 0 1 42.964108 115.858269c1.097143 15.828112 0.6144 31.743995-1.404342 47.469708l-0.906972 2.311314c-28.671996 0.146286-57.05142 6.026971-83.426731 17.261712a226.88911 226.88911 0 0 0-64.146276 42.569136c-5.412571 6.334171-11.746741 11.849141-17.568912 17.876112-20.085026 20.085026-40.857594 40.755194-61.14742 61.235191-5.909942 5.529599-11.029941 11.746741-17.466512 16.764341A211.924084 211.924084 0 0 0 317.147383 424.755139a171.563861 171.563861 0 0 0-41.545137-5.31017l-8.045713-0.512a192.248658 192.248658 0 0 1-1.901714-32.226739 217.951055 217.951055 0 0 1 24.590625-103.292328 227.181682 227.181682 0 0 1 147.777808-116.267869z m38.85348 103.906728a116.443412 116.443412 0 0 0-101.800214 112.552213 115.653469 115.653469 0 0 0 18.168683 65.53599 116.66284 116.66284 0 1 0 83.631531-178.088203z" fill="#2C61E4" p-id="7789"></path><path d="M715.892926 418.932969L716.799898 416.621655v2.311314a211.529113 211.529113 0 0 1 92.964558 401.568857 213.942827 213.942827 0 0 1-147.880208 14.453026 210.826941 210.826941 0 0 1-84.231302-44.470851 52.809135 52.809135 0 0 1-18.066283-40.755194 53.408907 53.408907 0 0 1 67.876562-50.190621 55.120449 55.120449 0 0 1 21.679539 11.746741 104.916099 104.916099 0 1 0 11.936913-169.574376 136.235866 136.235866 0 0 0-24.795425 20.479997L423.350797 774.436461a231.80431 231.80431 0 0 1-31.817139 28.11611 211.426713 211.426713 0 0 1-105.61827 38.85348 212.523855 212.523855 0 0 1-206.204314-112.054841 211.631513 211.631513 0 0 1 111.030842-295.935958 214.235398 214.235398 0 0 1 77.311989-14.467655l8.031084 0.512c12.317255 1.609143 23.639768 7.592227 31.919538 16.852112a53.511307 53.511307 0 0 1-7.738513 78.701703 54.506049 54.506049 0 0 1-29.213253 10.649599 106.013242 106.013242 0 0 0-60.22582 16.471769 104.813699 104.813699 0 0 0 94.661473 185.929116 108.426956 108.426956 0 0 0 42.071765-30.134853c41.954737-40.959994 83.017131-82.812331 124.781696-123.874725 6.436571-5.017599 11.55657-11.234741 17.466512-16.76434 20.085026-20.070397 40.769823-40.755194 61.14742-61.235192 5.822171-6.026971 12.141713-11.55657 17.554283-17.876111a226.88911 226.88911 0 0 1 63.956105-41.954737 215.537341 215.537341 0 0 1 83.426731-17.261712z" fill="#3377F9" p-id="7790"></path><path d="M275.572989 419.444969c14.028798 0.058514 27.984453 1.8432 41.559766 5.31017a211.924084 211.924084 0 0 1 155.20912 149.884322c-41.764565 41.062394-82.82696 82.92936-124.781696 123.889353a106.422842 106.422842 0 0 0 21.67954-41.354965 104.301699 104.301699 0 0 0-6.729142-71.592218 105.515871 105.515871 0 0 0-65.448219-55.617821 111.630613 111.630613 0 0 0-26.009597-4.315428 54.506049 54.506049 0 0 0 29.110853-10.63497 53.511307 53.511307 0 0 0 7.738513-78.701703 51.799764 51.799764 0 0 0-32.329138-16.86674z" fill="#D2402C" p-id="7791"></path></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,234 @@
.halo-render {
margin: 5px;
}
.halo-render .btn {
background-color: #3478CD;
color: #ffffff;
padding: 5px 8px;
text-align: center;
border-radius: 3px;
font-size: 14px;
min-width: 80px;
text-decoration: none;
}
.halo-render .error {
text-align: center;
color: #C31919;
}
.halo-render .invalid-type {
color: red;
font-size: 20px;
text-align: center;
padding: 10px;
background-color: lightpink;
border-radius: 3px;
}
.halo-render .iconfont {
font-family: iconfont, sans-serif;
font-size: 16px;
}
.halo-render-wrapper {
margin: 20px 15px;
}
.tips {
position: relative;
padding: 15px 15px;
border-left-style: solid;
border-left-width: 6px;
border-radius: 3px;
border-left-color: #818181;
background-color: #F4F4F4;
}
.tips.tips:after {
font-family: "iconfont", serif !important;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 50%;
color: #F4F4F4;
background-color: #818181;
display: block;
position: absolute;
left: calc(-10px - 6px / 2);
top: 4px;
content: "\e77e";
}
.tips.tips-warn {
background-color: #FFFAED;
color: #FF8C00;
border-left-color: #FF8C00;
}
.tips.tips-warn.tips.tips-warn:after {
color: #FFFAED;
background-color: #FF8C00;
content: "\e671";
}
.tips.tips-danger {
background-color: #FFEDED;
color: #C31919;
border-left-color: #C31919;
}
.tips.tips-danger.tips.tips-danger:after {
background-color: #C31919;
color: #FFEDED;
content: "\e671";
}
.tips.tips-success {
background-color: #F2FFED;
color: #05B800;
border-left-color: #05B800;
}
.tips.tips-success.tips.tips-success:after {
background-color: #05B800;
color: #F2FFED;
}
.tips.tips-info {
background-color: #F1F7FF;
color: #3478CD;
border-left-color: #3478CD;
}
.tips.tips-info.tips.tips-info:after {
color: #F1F7FF;
background-color: #3478CD;
}
.git {
display: flex;
gap: 10px;
border: 1px solid #ececec;
padding: 10px;
border-radius: 3px;
}
.git .information {
display: flex;
flex-direction: column;
gap: 10px;
}
.git .information .info {
font-size: 14px;
display: flex;
align-items: center;
gap: 15px;
}
.git .information .info .topics {
position: relative;
display: flex;
gap: 5px;
color: #ffffff;
font-size: 12px;
max-width: 30%;
overflow: hidden;
transition: max-width 0.2s;
cursor: pointer;
}
.git .information .info .topics:after {
position: absolute;
display: block;
width: 20px;
height: 30px;
right: 0;
background: linear-gradient(to right, transparent, #ffffff);
content: '';
transition: width 0.2s;
}
.git .information .info .topics:hover:after {
width: 0;
}
.git .information .info .topics:hover {
max-width: 70%;
}
.git .information .info .topics .topic {
background-color: #3478CD;
padding: 3px 5px;
border-radius: 3px;
white-space: nowrap;
}
.git .information .info .language {
display: flex;
align-items: center;
gap: 5px;
}
.git .information .info .language .dot {
width: 14px;
height: 14px;
border-radius: 50%;
}
.git .information .info .count {
display: flex;
align-items: center;
gap: 10px;
}
.git .information .info .count .count-item {
display: flex;
align-items: center;
gap: 5px;
}
.git .information .info .count .icon {
font-size: 18px;
color: #818181;
}
.git .information .description {
font-size: 14px;
}
.git .information .info {
font-size: 14px;
color: #999999;
}
.git .error {
color: darkred;
text-align: center;
}
.git .repo-name a {
font-size: 18px;
color: #3478CD;
text-decoration: none;
}
.git .icon {
font-family: "iconfont", serif;
font-size: 24px;
color: #333333;
}
.drive {
border: 1px solid #F4F4F4;
border-radius: 3px;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.drive .drive-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.drive .drive-info .platform {
display: flex;
align-items: center;
}
.drive .drive-info .platform .drive-icon {
width: 25px;
}
.drive .drive-info .platform span {
font-size: 16px;
margin-left: 3px;
color: #3478CD;
}
.drive .download-info {
display: flex;
flex-direction: column;
align-items: center;
}
.drive .download-info .drive-password {
color: #818181;
font-size: 12px;
margin-top: 5px;
}

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
const THEME_PREFIX="/plugins/vditor-mde/assets/static/themes"
const CDN = "/plugins/vditor-mde/assets/static"
const CDN = "https://cdn.jsdelivr.net/npm/vditor@3.9.9"
/** 拓展处理 ({dark}) => void */
let functionList = []
@ -38,7 +38,6 @@ function render(dark) {
Vditor.abcRender(root, CDN)
Vditor.graphvizRender(root, CDN)
Vditor.flowchartRender(root, CDN)
Vditor.haloRender(root, CDN)
// Run External Plugin
functionList.forEach(func => {
func({