vditor 3.11.2 → 4.0.0

package/src/assets/less/_reset.less

@@ -70,6 +70,35 @@
             vertical-align: sub;
         }
 
+        figure.vditor-image {
+            margin: 0 0 16px;
+            text-align: center;
+
+            figcaption {
+                font-size: 0.875em;
+                margin-top: 4px;
+                opacity: 0.65;
+                white-space: pre-wrap;
+            }
+        }
+
+        span.vditor-image[data-image-caption] {
+            display: inline-block;
+            max-width: 100%;
+            text-align: center;
+            vertical-align: top;
+
+            &::after {
+                content: attr(data-image-caption);
+                display: block;
+                font-size: 0.875em;
+                line-height: 1.5;
+                margin-top: 4px;
+                opacity: 0.65;
+                white-space: pre-wrap;
+            }
+        }
+
         h1,
         h2,
         h3,
@@ -235,7 +264,8 @@
         .language-markmap,
         .language-abc,
         .language-flowchart,
-        .language-graphviz {
+        .language-graphviz,
+        .language-wavedrom {
             margin-bottom: 16px;
         }
 
@@ -261,7 +291,8 @@
         .language-mermaid,
         .language-markmap,
         .language-flowchart,
-        .language-graphviz {
+        .language-graphviz,
+        .language-wavedrom {
             text-align: center;
         }
 
@@ -617,3 +648,73 @@
         }
     }
 }
+
+.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));
+    position: relative;
+    margin: 0 0 16px;
+    padding: 0.75em 1em;
+    color: inherit;
+    background-color: var(--callout-background-color);
+    border: 0;
+    border-left: 0.25em solid var(--callout-color);
+
+    &[data-subtype="TIP"] {
+        --callout-color: var(--callout-tip-color, #1a7f37);
+        --callout-background-color: var(--callout-tip-background-color, rgba(26, 127, 55, 0.08));
+    }
+
+    &[data-subtype="IMPORTANT"] {
+        --callout-color: var(--callout-important-color, #8250df);
+        --callout-background-color: var(--callout-important-background-color, rgba(130, 80, 223, 0.08));
+    }
+
+    &[data-subtype="WARNING"] {
+        --callout-color: var(--callout-warning-color, #9a6700);
+        --callout-background-color: var(--callout-warning-background-color, rgba(154, 103, 0, 0.08));
+    }
+
+    &[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-info {
+        display: flex;
+        align-items: center;
+        min-height: 1.5em;
+        margin: 0 0 0.5em;
+        color: var(--callout-color);
+        font-weight: 600;
+
+        .callout-icon {
+            display: inline-flex;
+            align-items: center;
+            margin-right: 0.35em;
+        }
+
+        .callout-title {
+            min-width: 1px;
+        }
+
+        .callout-img,
+        > .callout-img {
+            width: 1.2em;
+            height: 1.2em;
+            margin-right: 0.35em;
+            object-fit: contain;
+        }
+    }
+
+    > .callout-content > :last-child,
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.vditor-wysiwyg__callout-marker {
+    display: none;
+}

package/src/assets/less/_sv.less

@@ -20,13 +20,12 @@
   word-break: break-word;
   word-wrap: break-word;
 
-  &[contenteditable="false"] {
+  &:disabled {
     opacity: 0.3;
     cursor: not-allowed;
   }
 
-  &:empty::before {
-    content: attr(placeholder);
+  &::placeholder {
     color: var(--second-color);
   }
 
@@ -34,99 +33,4 @@
     background-color: var(--textarea-background-color);
   }
 
-  &:after {
-    content: "";
-    height: var(--editor-bottom);
-    display: block;
-  }
-
-  span[data-type="newline"] + span[data-type="text"]:empty {
-    display: inherit;
-  }
-
-  .sup {
-    vertical-align: super;
-    font-size: smaller;
-  }
-
-  .strong {
-    font-weight: bold;
-  }
-
-  .em {
-    font-style: italic;
-  }
-
-  .s {
-    text-decoration: line-through;
-  }
-
-  .mark:not(.vditor-sv__marker) {
-    background-color: yellow;
-    color: black;
-  }
-
-  .h1 {
-    font-size: 1.75em;
-    line-height: 44px;
-  }
-
-  .h2 {
-    font-size: 1.55em;
-    line-height: 38px;
-  }
-
-  .h3 {
-    font-size: 1.38em;
-    line-height: 27px;
-  }
-
-  .h4 {
-    font-size: 1.25em;
-    line-height: 25px;
-  }
-
-  .h5 {
-    font-size: 1.13em;
-  }
-
-  .h6 {
-    font-size: 1em;
-  }
-
-  &__marker {
-    color: var(--second-color);
-
-    &--heading {
-      color: var(--ir-heading-color);
-    }
-
-    &--bi {
-      color: var(--ir-bi-color);
-    }
-
-    &--link {
-      color: var(--ir-link-color);
-    }
-
-    &--title {
-      color: var(--ir-title-color);
-    }
-
-    &--bracket {
-      color: var(--ir-bracket-color);
-    }
-
-    &--paren {
-      color: var(--ir-paren-color);
-    }
-
-    &--info {
-      color: var(--ir-heading-color);
-    }
-
-    &--strong {
-      font-weight: bold;
-    }
-  }
 }

package/src/assets/less/_wysiwyg.less

@@ -177,8 +177,38 @@
   }
 }
 
+.vditor-wysiwyg__mobile-toolbar {
+  display: none;
+}
+
 @media screen and (max-width: @max-width) {
   .vditor-wysiwyg {
+    &__mobile-toolbar {
+      display: block;
+      float: left;
+      height: 21px;
+      position: relative;
+      width: 23px;
+    }
+
+    &__mobile-actions {
+      box-sizing: border-box;
+      flex-wrap: wrap;
+      left: 0;
+      padding: 5px;
+      top: 26px;
+      white-space: normal;
+
+      &.vditor-panel--left {
+        left: auto;
+        right: 0;
+      }
+
+      &--open {
+        display: flex;
+      }
+    }
+
     h1:before,
     h2:before,
     h3:before,

package/src/assets/less/index.less

@@ -37,6 +37,16 @@
   --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);
 
   --ir-heading-color: #660e7a;
   --ir-title-color: #808080;
@@ -67,6 +77,16 @@
     --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);
 
     --ir-heading-color: #9876aa;
     --ir-title-color: #808080;

package/src/index.ts

@@ -13,7 +13,6 @@ import {Outline} from "./ts/outline/index";
 import {Preview} from "./ts/preview/index";
 import {Resize} from "./ts/resize/index";
 import {Editor} from "./ts/sv/index";
-import {inputEvent} from "./ts/sv/inputEvent";
 import {processAfterRender as processSVAfterRender, processPaste} from "./ts/sv/process";
 import {Tip} from "./ts/tip/index";
 import {Toolbar} from "./ts/toolbar/index";
@@ -167,10 +166,11 @@ class Vditor extends VditorMethod {
             this.vditor.toolbar.elements,
             Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
         );
-        this.vditor[this.vditor.currentMode].element.setAttribute(
-            "contenteditable",
-            "false",
-        );
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.disabled = true;
+        } else {
+            this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "false");
+        }
     }
 
     /** 解除编辑器禁用 */
@@ -180,7 +180,11 @@ class Vditor extends VditorMethod {
             Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
         );
         this.vditor.undo.resetIcon(this.vditor);
-        this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.disabled = false;
+        } else {
+            this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
+        }
     }
 
     /** 返回选中的字符串 */
@@ -188,7 +192,10 @@ class Vditor extends VditorMethod {
         if (this.vditor.currentMode === "wysiwyg") {
             return getSelectText(this.vditor.wysiwyg.element);
         } else if (this.vditor.currentMode === "sv") {
-            return getSelectText(this.vditor.sv.element);
+            return this.vditor.sv.element.value.substring(
+                this.vditor.sv.element.selectionStart,
+                this.vditor.sv.element.selectionEnd,
+            );
         } else if (this.vditor.currentMode === "ir") {
             return getSelectText(this.vditor.ir.element);
         }
@@ -201,6 +208,15 @@ class Vditor extends VditorMethod {
 
     /** 获取焦点位置 */
     public getCursorPosition() {
+        if (this.vditor.currentMode === "sv") {
+            const element = this.vditor.sv.element;
+            const lineHeight = parseInt(getComputedStyle(element).lineHeight, 10) || 22;
+            const line = element.value.substring(0, element.selectionStart).split("\n").length - 1;
+            return {
+                left: 0,
+                top: line * lineHeight - element.scrollTop,
+            };
+        }
         return getCursorPosition(this.vditor[this.vditor.currentMode].element);
     }
 
@@ -258,6 +274,14 @@ class Vditor extends VditorMethod {
 
     /** 删除选中内容 */
     public deleteValue() {
+        if (this.vditor.currentMode === "sv") {
+            if (this.vditor.sv.element.selectionStart === this.vditor.sv.element.selectionEnd) {
+                return;
+            }
+            processPaste(this.vditor, "");
+            processSVAfterRender(this.vditor);
+            return;
+        }
         if (window.getSelection().isCollapsed) {
             return;
         }
@@ -266,11 +290,23 @@ class Vditor extends VditorMethod {
 
     /** 更新选中内容 */
     public updateValue(value: string) {
+        if (this.vditor.currentMode === "sv") {
+            processPaste(this.vditor, value);
+            processSVAfterRender(this.vditor);
+            return;
+        }
         document.execCommand("insertHTML", false, value);
     }
 
     /** 在焦点处插入内容，并默认进行 Markdown 渲染 */
     public insertValue(value: string, render = true) {
+        if (this.vditor.currentMode === "sv") {
+            processPaste(this.vditor, value);
+            if (render) {
+                processSVAfterRender(this.vditor);
+            }
+            return;
+        }
         const range = getEditorRange(this.vditor);
         range.collapse(true);
         // https://github.com/Vanessa219/vditor/issues/716
@@ -279,12 +315,7 @@ class Vditor extends VditorMethod {
         tmpElement.innerHTML = value;
         range.insertNode(tmpElement.content.cloneNode(true));
         range.collapse(false);
-        if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.preventInput = true;
-            if (render) {
-                inputEvent(this.vditor);
-            }
-        } else if (this.vditor.currentMode === "wysiwyg") {
+        if (this.vditor.currentMode === "wysiwyg") {
             // 由于 https://github.com/Vanessa219/vditor/issues/1566 不能使用 this.vditor.wysiwyg.preventInput = true;
             if (render) {
                 input(this.vditor, getSelection().getRangeAt(0));
@@ -314,7 +345,7 @@ class Vditor extends VditorMethod {
     /** 设置编辑器内容 */
     public setValue(markdown: string, clearStack = false) {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.element.innerHTML = `<div data-block='0'>${this.vditor.lute.SpinVditorSVDOM(markdown)}</div>`;
+            this.vditor.sv.element.value = markdown;
             processSVAfterRender(this.vditor, {
                 enableAddUndoStack: true,
                 enableHint: false,
@@ -525,6 +556,7 @@ class Vditor extends VditorMethod {
         ).then(() => {
             this.vditor.lute = setLute({
                 autoSpace: this.vditor.options.preview.markdown.autoSpace,
+                callout: this.vditor.options.preview.markdown.callout,
                 gfmAutoLink: this.vditor.options.preview.markdown.gfmAutoLink,
                 codeBlockPreview: this.vditor.options.preview.markdown
                     .codeBlockPreview,
@@ -543,6 +575,8 @@ class Vditor extends VditorMethod {
                 paragraphBeginningSpace: this.vditor.options.preview.markdown
                     .paragraphBeginningSpace,
                 sanitize: this.vditor.options.preview.markdown.sanitize,
+                sub: this.vditor.options.preview.markdown.sub,
+                sup: this.vditor.options.preview.markdown.sup,
                 toc: this.vditor.options.preview.markdown.toc,
             });
 

package/src/method.ts

@@ -14,6 +14,7 @@ import {markmapRender} from "./ts/markdown/markmapRender";
 import {mindmapRender} from "./ts/markdown/mindmapRender";
 import {outlineRender} from "./ts/markdown/outlineRender";
 import {plantumlRender} from "./ts/markdown/plantumlRender";
+import {wavedromRender} from "./ts/markdown/wavedromRender";
 import {md2html, previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
 import {previewImage} from "./ts/preview/image";
@@ -30,6 +31,8 @@ class Vditor {
     public static codeRender = codeRender;
     /** 对 graphviz 进行渲染 */
     public static graphvizRender = graphvizRender;
+    /** 对数字波形图进行渲染 */
+    public static wavedromRender = wavedromRender;
     /** 为 element 中的代码块进行高亮渲染 */
     public static highlightRender = highlightRender;
     /** 对数学公式进行渲染 */

package/src/ts/constants.ts

@@ -44,17 +44,19 @@ export abstract class Constants {
         "stackoverflow-light", "tokyo-night-light", "vs", "xcode", "default"];
     public static readonly ALIAS_CODE_LANGUAGES: string[] = [
         // 自定义
-        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap", "smiles",
+        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "wavedrom", "math", "markmap", "smiles",
         // 别名
         "js", "ts", "html", "toml", "c#", "bat"
     ];
     public static readonly CDN = `https://unpkg.com/vditor@${VDITOR_VERSION}`;
     public static readonly MARKDOWN_OPTIONS = {
         autoSpace: false,
+        callout: true,
         gfmAutoLink: true,
         codeBlockPreview: true,
         fixTermTypo: false,
         footnotes: true,
+        imageCaption: false,
         linkBase: "",
         linkPrefix: "",
         listStyle: false,
@@ -62,6 +64,8 @@ export abstract class Constants {
         mathBlockPreview: true,
         paragraphBeginningSpace: false,
         sanitize: true,
+        sub: false,
+        sup: false,
         toc: false,
     };
     public static readonly HLJS_OPTIONS = {

package/src/ts/export/index.ts

@@ -36,6 +36,7 @@ window.addEventListener("message", (e) => {
   Vditor.preview(document.getElementById('preview'), e.data, {
     cdn: "${vditor.options.cdn}",
     markdown: {
+      callout: ${JSON.stringify(vditor.options.preview.markdown.callout)},
       theme: ${JSON.stringify(vditor.options.preview.theme)}
     },
     hljs: {
@@ -73,6 +74,7 @@ export const exportHTML = (vditor: IVditor) => {
     Vditor.markmapRender(previewElement, '${vditor.options.cdn}');
     Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
     Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
+    Vditor.wavedromRender(previewElement, '${vditor.options.cdn}');
     Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.abcRender(previewElement, '${vditor.options.cdn}');

package/src/ts/hint/index.ts

@@ -23,6 +23,10 @@ export class Hint {
     }
 
     public render(vditor: IVditor) {
+        if (vditor.currentMode === "sv") {
+            this.element.style.display = "none";
+            return;
+        }
         if (!window.getSelection().focusNode) {
             return;
         }
@@ -128,6 +132,9 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
 
     public fillEmoji = (element: HTMLElement, vditor: IVditor) => {
         this.element.style.display = "none";
+        if (vditor.currentMode === "sv") {
+            return;
+        }
 
         const value = decodeURIComponent(element.getAttribute("data-value"));
         const range: Range = window.getSelection().getRangeAt(0);
@@ -172,9 +179,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
         range.deleteContents();
 
         if (vditor.options.hint.parse) {
-            if (vditor.currentMode === "sv") {
-                insertHTML(vditor.lute.SpinVditorSVDOM(value), vditor);
-            } else if (vditor.currentMode === "wysiwyg") {
+            if (vditor.currentMode === "wysiwyg") {
                 insertHTML(vditor.lute.SpinVditorDOM(value), vditor);
             } else {
                 insertHTML(vditor.lute.SpinVditorIRDOM(value), vditor);
@@ -182,7 +187,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
         } else {
             insertHTML(value, vditor);
         }
-        if (this.splitChar === ":" && value.indexOf(":") > -1 && vditor.currentMode !== "sv") {
+        if (this.splitChar === ":" && value.indexOf(":") > -1) {
             range.insertNode(document.createTextNode(" "));
         }
         range.collapse(false);

package/src/ts/ir/highlightToolbarIR.ts

@@ -5,12 +5,12 @@ import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {getEditorRange, selectIsEditor} from "../util/selection";
 
 export const highlightToolbarIR = (vditor: IVditor) => {
-    clearTimeout(vditor[vditor.currentMode].hlToolbarTimeoutId);
-    vditor[vditor.currentMode].hlToolbarTimeoutId = window.setTimeout(() => {
-        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+    clearTimeout(vditor.ir.hlToolbarTimeoutId);
+    vditor.ir.hlToolbarTimeoutId = window.setTimeout(() => {
+        if (vditor.ir.element.getAttribute("contenteditable") === "false") {
             return;
         }
-        if (!selectIsEditor(vditor[vditor.currentMode].element)) {
+        if (!selectIsEditor(vditor.ir.element)) {
             return;
         }
 

package/src/ts/ir/index.ts

@@ -11,6 +11,7 @@ import {
 } from "../util/editorCommonEvent";
 import {paste} from "../util/fixBrowserBehavior";
 import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {
     getEditorRange, setRangeByWbr,
     setSelectionFocus,
@@ -22,6 +23,28 @@ import {input} from "./input";
 import {processAfterRender, processHint} from "./process";
 import {hidePanel} from "../toolbar/setToolbar";
 
+const getHeadingMarker = (headingElement: Element) => {
+    return Array.from(headingElement.children).find((item) => item.getAttribute("data-type") === "heading-marker");
+};
+
+const restoreHeadingMarker = (sourceHeading: HTMLElement | false, copiedHeading?: HTMLElement) => {
+    if (!sourceHeading || !copiedHeading || sourceHeading.tagName !== copiedHeading.tagName ||
+        sourceHeading.getAttribute("data-marker") !== copiedHeading.getAttribute("data-marker") ||
+        copiedHeading.textContent.trim() === "" || getHeadingMarker(copiedHeading)) {
+        return;
+    }
+
+    const markerElement = getHeadingMarker(sourceHeading);
+    if (!markerElement) {
+        return;
+    }
+    if (sourceHeading.firstElementChild === markerElement) {
+        copiedHeading.insertBefore(markerElement.cloneNode(true), copiedHeading.firstChild);
+    } else if (sourceHeading.lastElementChild === markerElement) {
+        copiedHeading.appendChild(markerElement.cloneNode(true));
+    }
+};
+
 class IR {
     public range: Range;
     public element: HTMLPreElement;
@@ -61,6 +84,9 @@ class IR {
 
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
+        const copiedHeadings = tempElement.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6");
+        restoreHeadingMarker(hasClosestByHeadings(range.startContainer), copiedHeadings.item(0));
+        restoreHeadingMarker(hasClosestByHeadings(range.endContainer), copiedHeadings.item(copiedHeadings.length - 1));
 
         event.clipboardData.setData("text/plain", vditor.lute.VditorIRDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");