vditor 3.11.3 → 4.0.1

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/_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,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

@@ -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,
@@ -526,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/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/markdown/getMarkdown.ts

@@ -2,11 +2,11 @@ import {code160to32} from "../util/code160to32";
 
 export const getMarkdown = (vditor: IVditor) => {
     if (vditor.currentMode === "sv") {
-        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
+        return code160to32(`${vditor.sv.element.value}\n`.replace(/\n\n$/, "\n"));
     } else if (vditor.currentMode === "wysiwyg") {
-        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
+        return code160to32(vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML));
     } else if (vditor.currentMode === "ir") {
-        return vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML);
+        return code160to32(vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML));
     }
     return "";
 };