vditor 4.0.0 → 4.0.2-alpha.0

package/src/assets/less/_reset.less

@@ -152,12 +152,27 @@
             margin-bottom: 16px;
         }
 
-        blockquote {
-            padding: 0 1em;
-            color: #6a737d;
-            border-left: 0.25em solid #eaecef;
+        blockquote:not(.callout) {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            padding: 0 0 0 calc(0.25em + 6px);
+            color: var(--blockquote-text-color, #5f6368);
+            background-color: transparent;
+            border: 0;
             margin: 0 0 16px 0;
 
+            &::before {
+                position: absolute;
+                top: 6px;
+                bottom: 6px;
+                left: 2px;
+                width: 0.25em;
+                content: "";
+                background-color: var(--blockquote-border-color, #e0e0e0);
+                border-radius: 6px;
+            }
+
             & > :first-child {
                 margin-top: 0;
             }
@@ -165,6 +180,13 @@
             & > :last-child {
                 margin-bottom: 0;
             }
+
+            & > p {
+                padding: 4px;
+                margin: 2px 0;
+                line-height: 1.625;
+                border-radius: 6px;
+            }
         }
 
         ins > iframe {
@@ -652,69 +674,99 @@
 .vditor-reset .callout,
 .vditor-wysiwyg blockquote.callout,
 .vditor-ir blockquote.callout {
-    --callout-color: var(--callout-note-color, #0969da);
-    --callout-background-color: var(--callout-note-background-color, rgba(9, 105, 218, 0.08));
+    --callout-color: var(--callout-note-color, #3575f0);
     position: relative;
+    display: flex;
+    flex-direction: column;
     margin: 0 0 16px;
-    padding: 0.75em 1em;
-    color: inherit;
-    background-color: var(--callout-background-color);
+    padding: 0 0 0 calc(0.25em + 6px);
+    color: var(--blockquote-text-color, #5f6368);
     border: 0;
-    border-left: 0.25em solid var(--callout-color);
+
+    &::before {
+        position: absolute;
+        top: 6px;
+        bottom: 6px;
+        left: 2px;
+        width: 0.25em;
+        content: "";
+        background-color: var(--callout-color);
+        border-radius: 6px;
+    }
 
     &[data-subtype="TIP"] {
-        --callout-color: var(--callout-tip-color, #1a7f37);
-        --callout-background-color: var(--callout-tip-background-color, rgba(26, 127, 55, 0.08));
+        --callout-color: var(--callout-tip-color, #65b84d);
     }
 
     &[data-subtype="IMPORTANT"] {
-        --callout-color: var(--callout-important-color, #8250df);
-        --callout-background-color: var(--callout-important-background-color, rgba(130, 80, 223, 0.08));
+        --callout-color: var(--callout-important-color, #8957e5);
     }
 
     &[data-subtype="WARNING"] {
-        --callout-color: var(--callout-warning-color, #9a6700);
-        --callout-background-color: var(--callout-warning-background-color, rgba(154, 103, 0, 0.08));
+        --callout-color: var(--callout-warning-color, #ff9632);
     }
 
     &[data-subtype="CAUTION"] {
-        --callout-color: var(--callout-caution-color, #cf222e);
-        --callout-background-color: var(--callout-caution-background-color, rgba(207, 34, 46, 0.08));
+        --callout-color: var(--callout-caution-color, #d23f31);
     }
 
     > .callout-info {
         display: flex;
         align-items: center;
         min-height: 1.5em;
-        margin: 0 0 0.5em;
+        margin: 2px 0;
+        padding: 4px;
         color: var(--callout-color);
-        font-weight: 600;
 
         .callout-icon {
-            display: inline-flex;
+            display: flex;
             align-items: center;
-            margin-right: 0.35em;
+            justify-content: center;
+            width: 1.2em;
+            height: 1.2em;
+            padding: 4px;
+            line-height: 1.2em;
+            text-align: center;
+            font-variant-emoji: emoji;
+            border-radius: 6px;
+
+            &:empty {
+                display: none;
+            }
         }
 
         .callout-title {
+            flex: 1;
             min-width: 1px;
+            margin-left: 4px;
+            font-size: 114%;
+            font-weight: 500;
+            opacity: 0.86;
         }
 
         .callout-img,
         > .callout-img {
-            width: 1.2em;
             height: 1.2em;
-            margin-right: 0.35em;
-            object-fit: contain;
+            width: 100%;
         }
     }
 
-    > .callout-content > :last-child,
-    > :last-child {
-        margin-bottom: 0;
+    > p:not(.callout-info),
+    > .callout-content > p {
+        padding: 4px;
+        margin: 2px 0;
+        line-height: 1.625;
+        border-radius: 6px;
     }
 }
 
+.vditor-wysiwyg blockquote.callout > .callout-info,
+.vditor-ir blockquote.callout > .callout-info {
+    font-size: 114%;
+    font-weight: 500;
+    opacity: 0.86;
+}
+
 .vditor-wysiwyg__callout-marker {
     display: none;
 }

package/src/assets/less/_wysiwyg.less

@@ -52,6 +52,15 @@
   }
 
   &__block {
+    // Source visibility is serialized both by Lute and by CSSStyleDeclaration.
+    // Keep the preview laid out for asynchronous wrapped line-number measurements.
+    &[data-type="code-block"] > pre:not([style*="display:none"]):not([style*="display: none"]) + .vditor-code__preview {
+      height: 0;
+      min-height: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+
     pre:first-child {
       margin-bottom: -1em;
 

package/src/assets/less/index.less

@@ -37,16 +37,13 @@
   --count-background-color: rgba(27, 31, 35, 0.05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
-  --callout-note-color: #0969da;
-  --callout-note-background-color: rgba(9, 105, 218, 0.08);
-  --callout-tip-color: #1a7f37;
-  --callout-tip-background-color: rgba(26, 127, 55, 0.08);
-  --callout-important-color: #8250df;
-  --callout-important-background-color: rgba(130, 80, 223, 0.08);
-  --callout-warning-color: #9a6700;
-  --callout-warning-background-color: rgba(154, 103, 0, 0.08);
-  --callout-caution-color: #cf222e;
-  --callout-caution-background-color: rgba(207, 34, 46, 0.08);
+  --blockquote-border-color: #e0e0e0;
+  --blockquote-text-color: #5f6368;
+  --callout-note-color: #3575f0;
+  --callout-tip-color: #65b84d;
+  --callout-important-color: #8957e5;
+  --callout-warning-color: #ff9632;
+  --callout-caution-color: #d23f31;
 
   --ir-heading-color: #660e7a;
   --ir-title-color: #808080;
@@ -77,16 +74,13 @@
     --count-background-color: rgba(@blurColor, 0.36);
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
-    --callout-note-color: #58a6ff;
-    --callout-note-background-color: rgba(56, 139, 253, 0.15);
-    --callout-tip-color: #3fb950;
-    --callout-tip-background-color: rgba(46, 160, 67, 0.15);
-    --callout-important-color: #a371f7;
-    --callout-important-background-color: rgba(163, 113, 247, 0.15);
-    --callout-warning-color: #d29922;
-    --callout-warning-background-color: rgba(187, 128, 9, 0.15);
-    --callout-caution-color: #f85149;
-    --callout-caution-background-color: rgba(248, 81, 73, 0.15);
+    --blockquote-border-color: rgba(230, 230, 230, 0.1);
+    --blockquote-text-color: #9aa0a6;
+    --callout-note-color: #3575f0;
+    --callout-tip-color: #65b84d;
+    --callout-important-color: #b388ff;
+    --callout-warning-color: #ff9632;
+    --callout-caution-color: #d23f31;
 
     --ir-heading-color: #9876aa;
     --ir-title-color: #808080;

package/src/index.ts

@@ -557,6 +557,7 @@ class Vditor extends VditorMethod {
             this.vditor.lute = setLute({
                 autoSpace: this.vditor.options.preview.markdown.autoSpace,
                 callout: this.vditor.options.preview.markdown.callout,
+                inlineMath: this.vditor.options.preview.markdown.inlineMath,
                 gfmAutoLink: this.vditor.options.preview.markdown.gfmAutoLink,
                 codeBlockPreview: this.vditor.options.preview.markdown
                     .codeBlockPreview,

package/src/ts/constants.ts

@@ -52,6 +52,7 @@ export abstract class Constants {
     public static readonly MARKDOWN_OPTIONS = {
         autoSpace: false,
         callout: true,
+        inlineMath: true,
         gfmAutoLink: true,
         codeBlockPreview: true,
         fixTermTypo: false,

package/src/ts/export/index.ts

@@ -37,6 +37,7 @@ window.addEventListener("message", (e) => {
     cdn: "${vditor.options.cdn}",
     markdown: {
       callout: ${JSON.stringify(vditor.options.preview.markdown.callout)},
+      inlineMath: ${JSON.stringify(vditor.options.preview.markdown.inlineMath)},
       theme: ${JSON.stringify(vditor.options.preview.theme)}
     },
     hljs: {

package/src/ts/markdown/mediaRender.ts

@@ -1,13 +1,15 @@
 import {getSearch} from "../util/function";
 
-const videoRender = (element: HTMLElement, url: string) => {
-    element.insertAdjacentHTML("afterend", `<video controls="controls" src="${url}"></video>`);
-    element.remove();
-};
-
-const audioRender = (element: HTMLElement, url: string) => {
-    element.insertAdjacentHTML("afterend", `<audio controls="controls" src="${url}"></audio>`);
-    element.remove();
+const replaceMedia = (element: HTMLElement, tag: "video" | "audio" | "iframe", url: string) => {
+    const media = element.ownerDocument.createElement(tag);
+    if (tag === "iframe") {
+        media.className = "iframe__video";
+    } else {
+        media.setAttribute("controls", "controls");
+    }
+    // 链接属性经 DOM 解码后可能包含引号，直接设置属性以保留 URL 的数据语义。
+    media.setAttribute("src", url);
+    element.replaceWith(media);
 };
 
 const iframeRender = (element: HTMLElement, url: string) => {
@@ -21,33 +23,20 @@ const iframeRender = (element: HTMLElement, url: string) => {
     const tedMatch = url.match(/(?:www\.|\/\/)ted\.com\/talks\/(\w+)/);
 
     if (youtubeMatch && youtubeMatch[1].length === 11) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="//www.youtube.com/embed/${youtubeMatch[1] +
-            (youtubeMatch[2] ? "?start=" + youtubeMatch[2] : "")}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `//www.youtube.com/embed/${youtubeMatch[1] +
+            (youtubeMatch[2] ? "?start=" + youtubeMatch[2] : "")}`);
     } else if (youkuMatch && youkuMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="//player.youku.com/embed/${youkuMatch[1]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `//player.youku.com/embed/${youkuMatch[1]}`);
     } else if (qqMatch && qqMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="https://v.qq.com/txp/iframe/player.html?vid=${qqMatch[1]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `https://v.qq.com/txp/iframe/player.html?vid=${qqMatch[1]}`);
     } else if (coubMatch && coubMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="//coub.com/embed/${coubMatch[1]}?muted=false&autostart=false&originalSize=true&startWithHD=true"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe",
+            `//coub.com/embed/${coubMatch[1]}?muted=false&autostart=false&originalSize=true&startWithHD=true`);
     } else if (facebookMatch && facebookMatch[0]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(facebookMatch[0])}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe",
+            `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(facebookMatch[0])}`);
     } else if (dailymotionMatch && dailymotionMatch[2]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="https://www.dailymotion.com/embed/video/${dailymotionMatch[2]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `https://www.dailymotion.com/embed/video/${dailymotionMatch[2]}`);
     } else if (url.indexOf("bilibili.com") > -1 && (url.indexOf("bvid=") > -1 || (bilibiliMatch && bilibiliMatch[1]))) {
         const params: IObject = {
             bvid:  getSearch("bvid", url) || (bilibiliMatch && bilibiliMatch[1]),
@@ -75,13 +64,9 @@ const iframeRender = (element: HTMLElement, url: string) => {
                 src += "&";
             }
         });
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="${src}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", src);
     } else if (tedMatch && tedMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="//embed.ted.com/talks/${tedMatch[1]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `//embed.ted.com/talks/${tedMatch[1]}`);
     }
 };
 
@@ -95,9 +80,9 @@ export const mediaRender = (element: HTMLElement) => {
             return;
         }
         if (url.match(/^.+.(mp4|m4v|ogg|ogv|webm)$/)) {
-            videoRender(aElement, url);
+            replaceMedia(aElement, "video", url);
         } else if (url.match(/^.+.(mp3|wav|flac)$/)) {
-            audioRender(aElement, url);
+            replaceMedia(aElement, "audio", url);
         } else {
             iframeRender(aElement, url);
         }

package/src/ts/markdown/mermaidRender.ts

@@ -13,7 +13,7 @@ export const mermaidRender = (element: (HTMLElement | Document) = document, cdn
     if (mermaidElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.16.1`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.17.2`, "vditorMermaidScript").then(() => {
         const config: any = {
             securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
             altFontFamily: "sans-serif",

package/src/ts/markdown/previewRender.ts

@@ -62,6 +62,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
         const lute = setLute({
             autoSpace: mergedOptions.markdown.autoSpace,
             callout: mergedOptions.markdown.callout,
+            inlineMath: mergedOptions.markdown.inlineMath,
             gfmAutoLink: mergedOptions.markdown.gfmAutoLink,
             codeBlockPreview: mergedOptions.markdown.codeBlockPreview,
             emojiSite: mergedOptions.emojiPath,

package/src/ts/markdown/setLute.ts

@@ -6,6 +6,7 @@ export const setLute = (options: ILuteOptions) => {
     lute.SetInlineMathAllowDigitAfterOpenMarker(options.inlineMathDigit);
     lute.SetAutoSpace(options.autoSpace);
     lute.SetCallout(options.callout);
+    lute.SetInlineMath(options.inlineMath);
     lute.SetToC(options.toc);
     lute.SetFootnotes(options.footnotes);
     lute.SetFixTermTypo(options.fixTermTypo);

package/src/ts/util/processCode.ts

@@ -60,6 +60,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     if (!previewPanel) {
         return;
     }
+    previewPanel.classList.remove("vditor-code__preview");
     if (previewPanel.parentElement.getAttribute("data-type") === "html-block") {
         previewPanel.setAttribute("data-render", "1");
         return;
@@ -95,6 +96,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
             }
         })
         if (!cRender) {
+            previewPanel.classList.add("vditor-code__preview");
             highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
             codeRender(previewPanel, vditor.options.preview.hljs);
         }