vditor 3.10.1 → 3.10.3

package/src/index.ts

@@ -60,6 +60,10 @@ class Vditor extends VditorMethod {
             } else if (!options.cache.id) {
                 options.cache.id = `vditor${id}`;
             }
+            if (!document.getElementById(id)) {
+                this.showErrorTip(`Failed to get element by id: ${id}`);
+                return;
+            }
             id = document.getElementById(id);
         }
 
@@ -83,9 +87,7 @@ class Vditor extends VditorMethod {
                 addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID).then(() => {
                     this.init(id as HTMLElement, mergedOptions);
                 }).catch(error => {
-                    const tip = new Tip();
-                    document.body.appendChild(tip.element);
-                    tip.show(`GET ${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js net::ERR_ABORTED 404 (Not Found)`, 0)
+                    this.showErrorTip(`GET ${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js net::ERR_ABORTED 404 (Not Found)`);
                 });
             }
         } else {
@@ -94,6 +96,12 @@ class Vditor extends VditorMethod {
         }
     }
 
+    private showErrorTip(error: string) {
+        const tip = new Tip();
+        document.body.appendChild(tip.element);
+        tip.show(error, 0)
+    }
+
     /** 设置主题 */
     public setTheme(
         theme: "dark" | "classic",

package/src/ts/export/index.ts

@@ -75,7 +75,7 @@ export const exportHTML = (vditor: IVditor) => {
     Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.abcRender(previewElement, '${vditor.options.cdn}');
-    Vditor.mediaRender(previewElement);
+    ${vditor.options.preview.render.media.enable ? 'Vditor.mediaRender(previewElement);' : ""}
     Vditor.speechRender(previewElement);
 </script>
 <script src="${vditor.options.cdn}/dist/js/icons/${vditor.options.icon}.js"></script></body></html>`;

package/src/ts/markdown/mediaRender.ts

@@ -1,3 +1,5 @@
+import {getSearch} from "../util/function";
+
 const videoRender = (element: HTMLElement, url: string) => {
     element.insertAdjacentHTML("afterend", `<video controls="controls" src="${url}"></video>`);
     element.remove();
@@ -46,10 +48,35 @@ const iframeRender = (element: HTMLElement, url: string) => {
             `<iframe class="iframe__video"
  src="https://www.dailymotion.com/embed/video/${dailymotionMatch[2]}"></iframe>`);
         element.remove();
-    } else if (bilibiliMatch && bilibiliMatch[1]) {
+    } else if (url.indexOf("bilibili.com") > -1 && (url.indexOf("bvid=") > -1 || (bilibiliMatch && bilibiliMatch[1]))) {
+        const params: IObject = {
+            bvid:  getSearch("bvid", url) || (bilibiliMatch && bilibiliMatch[1]),
+            page: "1",
+            high_quality: "1",
+            as_wide: "1",
+            allowfullscreen: "true",
+            autoplay: "0"
+        };
+        new URL(url.startsWith("http") ? url : "https:" + url).search.split("&").forEach((item, index) => {
+            if (!item) {
+                return;
+            }
+            if (index === 0) {
+                item = item.substr(1);
+            }
+            const keyValue = item.split("=");
+            params[keyValue[0]] = keyValue[1];
+        });
+        let src = "https://player.bilibili.com/player.html?";
+        const keys = Object.keys(params);
+        keys.forEach((key, index) => {
+            src += `${key}=${params[key]}`;
+            if (index < keys.length - 1) {
+                src += "&";
+            }
+        });
         element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="//player.bilibili.com/player.html?bvid=${bilibiliMatch[1]}"></iframe>`);
+            `<iframe class="iframe__video" src="${src}"></iframe>`);
         element.remove();
     } else if (tedMatch && tedMatch[1]) {
         element.insertAdjacentHTML("afterend",

package/src/ts/markdown/mermaidRender.ts

@@ -1,10 +1,11 @@
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 import {mermaidRenderAdapter} from "./adapterRender";
+import {genUUID} from "../util/function";
 
 declare const mermaid: {
     initialize(options: any): void,
-    init(options: any, element: Element): void,
+    render(id: string, text: string): { svg: string }
 };
 
 export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
@@ -12,7 +13,7 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
     if (mermaidElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=10.8.0`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js`, "vditorMermaidScript").then(() => {
         const config: any = {
             securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
             altFontFamily: "sans-serif",
@@ -26,7 +27,8 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
                 useMaxWidth: true,
                 diagramMarginX: 8,
                 diagramMarginY: 8,
-                boxMargin: 8
+                boxMargin: 8,
+                showSequenceNumbers: true // Mermaid 时序图增加序号 https://github.com/siyuan-note/siyuan/pull/6992 https://mermaid.js.org/syntax/sequenceDiagram.html#sequencenumbers
             },
             gantt: {
                 leftPadding: 75,
@@ -37,12 +39,21 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
             config.theme = "dark";
         }
         mermaid.initialize(config);
-        mermaidElements.forEach((item) => {
+        mermaidElements.forEach(async (item) => {
             const code = mermaidRenderAdapter.getCode(item);
             if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
-            mermaid.init(undefined, item);
+            const id = "mermaid"+genUUID()
+            try {
+                const mermaidData = await mermaid.render(id, item.textContent);
+                item.innerHTML = mermaidData.svg;
+            } catch (e) {
+                const errorElement = document.querySelector("#" + id);
+                item.innerHTML = `${errorElement.outerHTML}<br>
+<div style="text-align: left"><small>${e.message.replace(/\n/, "<br>")}</small></div>`;
+                errorElement.parentElement.remove();
+            }
             item.setAttribute("data-processed", "true");
         });
     });

package/src/ts/markdown/plantumlRender.ts

@@ -22,7 +22,7 @@ export const plantumlRender = (element: (HTMLElement | Document) = document, cdn
                 return;
             }
             try {
-                e.innerHTML = `<img src="http://www.plantuml.com/plantuml/svg/~1${plantumlEncoder.encode(text)}">`;
+                e.innerHTML = `<object type="image/svg+xml" data="https://www.plantuml.com/plantuml/svg/~1${plantumlEncoder.encode(text)}"/>`;
             } catch (error) {
                 e.className = "vditor-reset--error";
                 e.innerHTML = `plantuml render error: <br>${error}`;

package/src/ts/markdown/previewRender.ts

@@ -35,6 +35,11 @@ const mergeOptions = (options?: IPreviewOptions) => {
         speech: {
             enable: false,
         },
+        render: {
+            media: {
+                enable: true,
+            }
+        },
         theme: Constants.THEME_OPTIONS,
     };
     if (options.cdn) {
@@ -133,7 +138,9 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     plantumlRender(previewElement, mergedOptions.cdn);
     abcRender(previewElement, mergedOptions.cdn);
-    mediaRender(previewElement);
+    if (mergedOptions.render.media.enable) {
+        mediaRender(previewElement);
+    }
     if (mergedOptions.speech.enable) {
         speechRender(previewElement);
     }

package/src/ts/preview/index.ts

@@ -231,7 +231,9 @@ export class Preview {
         mindmapRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         plantumlRender(vditor.preview.previewElement, vditor.options.cdn);
         abcRender(vditor.preview.previewElement, vditor.options.cdn);
-        mediaRender(vditor.preview.previewElement);
+        if (vditor.options.preview.render.media.enable) {
+            mediaRender(vditor.preview.previewElement);
+        }
         vditor.options.customRenders.forEach((item) => {
             item.render(vditor.preview.previewElement, vditor);
         })

package/src/ts/util/Options.ts

@@ -59,6 +59,11 @@ export class Options {
             maxWidth: 800,
             mode: "both",
             theme: Constants.THEME_OPTIONS,
+            render: {
+                media: {
+                    enable: true,
+                }
+            }
         },
         link: {
             isOpen: true,
@@ -150,6 +155,9 @@ export class Options {
             if (this.options.preview?.theme?.list) {
                 this.defaultOptions.preview.theme.list = this.options.preview.theme.list;
             }
+            if (this.options.preview?.render?.media?.enable) {
+                this.defaultOptions.preview.render.media.enable = this.options.preview.render.media.enable;
+            }
             if (this.options.hint?.emoji) {
                 this.defaultOptions.hint.emoji = this.options.hint.emoji;
             }

package/src/ts/util/function.ts

@@ -1,3 +1,11 @@
 export const genUUID = () => ([1e7].toString() + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
     (parseInt(c, 10) ^ (window.crypto.getRandomValues(new Uint32Array(1))[0] & (15 >> (parseInt(c, 10) / 4)))).toString(16)
 );
+
+export const getSearch = (key: string, link = window.location.search) => {
+    const params = link.substring(link.indexOf("?"));
+    const hashIndex = params.indexOf("#");
+    // REF https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
+    const urlSearchParams = new URLSearchParams(params.substring(0, hashIndex >= 0 ? hashIndex : undefined));
+    return urlSearchParams.get(key);
+};