vditor 3.8.11 → 3.8.14

package/src/assets/{scss/_tooltipped.scss → less/_tooltipped.less}

@@ -6,11 +6,11 @@
  */
 @keyframes tooltip-appear {
   from {
-    opacity: 0
+    opacity: 0;
   }
 
   to {
-    opacity: 1
+    opacity: 1;
   }
 }
 
@@ -39,7 +39,7 @@
     background: #3b3e43;
     border-radius: 3px;
     line-height: 16px;
-    opacity: 0
+    opacity: 0;
   }
 
   &::before {
@@ -52,7 +52,7 @@
     pointer-events: none;
     content: "";
     border: 5px solid transparent;
-    opacity: 0
+    opacity: 0;
   }
 
   &--hover::before,
@@ -76,7 +76,7 @@
   &__sw::after {
     top: 100%;
     right: 50%;
-    margin-top: 5px
+    margin-top: 5px;
   }
 
   &__s::before,
@@ -86,17 +86,17 @@
     right: 50%;
     bottom: -5px;
     margin-right: -5px;
-    border-bottom-color: #3b3e43
+    border-bottom-color: #3b3e43;
   }
 
   &__se::after {
     right: auto;
     left: 50%;
-    margin-left: -15px
+    margin-left: -15px;
   }
 
   &__sw::after {
-    margin-right: -15px
+    margin-right: -15px;
   }
 
   &__n::after,
@@ -104,7 +104,7 @@
   &__nw::after {
     right: 50%;
     bottom: 100%;
-    margin-bottom: 5px
+    margin-bottom: 5px;
   }
 
   &__n::before,
@@ -114,22 +114,22 @@
     right: 50%;
     bottom: auto;
     margin-right: -5px;
-    border-top-color: #3b3e43
+    border-top-color: #3b3e43;
   }
 
   &__ne::after {
     right: auto;
     left: 50%;
-    margin-left: -15px
+    margin-left: -15px;
   }
 
   &__nw::after {
-    margin-right: -15px
+    margin-right: -15px;
   }
 
   &__s::after,
   &__n::after {
-    transform: translateX(50%)
+    transform: translateX(50%);
   }
 
   &__w::after {
@@ -151,7 +151,7 @@
     bottom: 50%;
     left: 100%;
     margin-left: 5px;
-    transform: translateY(50%)
+    transform: translateY(50%);
   }
 
   &__e::before {
@@ -163,7 +163,7 @@
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-tooltipped:before,
   .vditor-tooltipped:after {
     content: none;

package/src/assets/{scss/_wysiwyg.scss → less/_wysiwyg.less}

@@ -158,11 +158,11 @@
 
   span[data-type="link-ref"],
   sup[data-type="footnotes-ref"] {
-    color: $blurColor;
+    color: @blurColor;
   }
 
   span[data-type="toc-h"] {
-    color: $blurColor;
+    color: @blurColor;
     text-decoration: underline;
   }
 
@@ -177,7 +177,7 @@
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-wysiwyg {
     h1:before,
     h2:before,

package/src/assets/{scss/index.scss → less/index.less}

@@ -1,23 +1,28 @@
-$errorColor: #d23f31 !default;
-$blurColor: #4285f4 !default;
+@errorColor: #d23f31;
+@blurColor: #4285f4;
 
-$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
+@font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans",
+  "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
+  "EmojiSymbols";
+@font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier,
+  monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+  "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
 
-$transition: all .15s ease-in-out !default;
+@transition: all 0.15s ease-in-out;
 
-$max-width: 520px !default;
+@max-width: 520px;
 
 .vditor {
   --border-color: #d1d5da;
   --second-color: rgba(88, 96, 105, 0.36);
 
   --panel-background-color: #fff;
-  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 
   --toolbar-background-color: #f6f8fa;
   --toolbar-icon-color: #586069;
-  --toolbar-icon-hover-color: #{$blurColor};
+  --toolbar-icon-hover-color: @blurColor;
   --toolbar-height: 35px;
   --toolbar-divider-margin-top: 8px;
 
@@ -29,7 +34,7 @@ $max-width: 520px !default;
   --resize-hover-icon-color: var(--panel-background-color);
   --resize-hover-background-color: var(--toolbar-icon-hover-color);
 
-  --count-background-color:rgba(27, 31, 35, .05);
+  --count-background-color: rgba(27, 31, 35, 0.05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
 
@@ -42,10 +47,10 @@ $max-width: 520px !default;
 
   &--dark {
     --border-color: #141414;
-    --second-color: rgba(185, 185, 185, .36);
+    --second-color: rgba(185, 185, 185, 0.36);
 
     --panel-background-color: #24292e;
-    --panel-shadow: 0 1px 2px rgba(255, 255, 255, .2);
+    --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
 
     --toolbar-background-color: #1d2125;
     --toolbar-icon-color: #b9b9b9;
@@ -57,9 +62,9 @@ $max-width: 520px !default;
     --resize-icon-color: var(--border-color);
     --resize-background-color: var(--second-color);
     --resize-hover-icon-color: var(--toolbar-icon-hover-color);
-    --resize-hover-background-color: rgba(185, 185, 185, .86);
+    --resize-hover-background-color: rgba(185, 185, 185, 0.86);
 
-    --count-background-color:  #{rgba($blurColor, .36)};
+    --count-background-color: rgba(@blurColor, 0.36);
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
 
@@ -72,12 +77,12 @@ $max-width: 520px !default;
   }
 }
 
-@import "tooltipped";
-@import "panel";
-@import "toolbar";
-@import "content";
-@import "hint";
-@import "reset";
-@import "wysiwyg";
-@import "ir";
-@import "sv";
+@import "_tooltipped";
+@import "_panel";
+@import "_toolbar";
+@import "_content";
+@import "_hint";
+@import "_reset";
+@import "_wysiwyg";
+@import "_ir";
+@import "_sv";

package/src/index.ts

@@ -1,4 +1,4 @@
-import "./assets/scss/index.scss";
+import "./assets/less/index.less";
 import VditorMethod from "./method";
 import {Constants, VDITOR_VERSION} from "./ts/constants";
 import {DevTools} from "./ts/devtools/index";
@@ -276,7 +276,7 @@ class Vditor extends VditorMethod {
     /** 设置编辑器内容 */
     public setValue(markdown: string, clearStack = false) {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.element.innerHTML = this.vditor.lute.SpinVditorSVDOM(markdown);
+            this.vditor.sv.element.innerHTML = `<div data-block='0'>${this.vditor.lute.SpinVditorSVDOM(markdown)}</div>`;
             processSVAfterRender(this.vditor, {
                 enableAddUndoStack: true,
                 enableHint: false,
@@ -327,7 +327,10 @@ class Vditor extends VditorMethod {
         this.vditor.element.innerHTML = this.vditor.originalInnerHTML;
         this.vditor.element.classList.remove("vditor");
         this.vditor.element.removeAttribute("style");
-        document.getElementById("vditorIconScript").remove();
+        const iconScript = document.getElementById("vditorIconScript")
+        if (iconScript) {
+            iconScript.remove();
+        }
         this.clearCache();
 
         UIUnbindListener();

package/src/ts/constants.ts

@@ -5,60 +5,63 @@ const _VDITOR_VERSION = VDITOR_VERSION;
 export {_VDITOR_VERSION as VDITOR_VERSION};
 
 export abstract class Constants {
-    public static readonly ZWSP: string = "\u200b";
-    public static readonly DROP_EDITOR: string = "application/editor";
-    public static readonly MOBILE_WIDTH: number = 520;
-    public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
-    public static readonly EDIT_TOOLBARS: string[] = ["emoji", "headings", "bold", "italic", "strike", "link", "list",
-        "ordered-list", "outdent", "indent", "check", "line", "quote", "code", "inline-code", "insert-after",
-        "insert-before", "upload", "record", "table"];
-    public static readonly CODE_THEME: string[] = ["abap", "algol", "algol_nu", "arduino", "autumn", "borland", "bw",
-        "colorful", "dracula", "emacs", "friendly", "fruity", "github", "igor", "lovelace", "manni", "monokai",
-        "monokailight", "murphy", "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments",
-        "rainbow_dash", "rrt", "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac",
-        "vim", "vs", "xcode", "ant-design"];
-    public static readonly CODE_LANGUAGES: string[] = ["mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
-        "js", "ts", "html",
-        // common
-        "properties", "apache", "bash", "c", "csharp", "cpp", "css", "coffeescript", "diff", "go", "xml", "http",
-        "json", "java", "javascript", "kotlin", "less", "lua", "makefile", "markdown", "nginx", "objectivec", "php",
-        "php-template", "perl", "plaintext", "python", "python-repl", "r", "ruby", "rust", "scss", "sql", "shell",
-        "swift", "ini", "typescript", "vbnet", "yaml",
-        "ada", "clojure", "dart", "erb", "fortran", "gradle", "haskell", "julia", "julia-repl", "lisp", "matlab",
-        "pgsql", "powershell", "sql_more", "stata", "cmake", "mathematica"];
-    public static readonly CDN = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
-    public static readonly MARKDOWN_OPTIONS = {
-        autoSpace: false,
-        codeBlockPreview: true,
-        fixTermTypo: false,
-        footnotes: true,
-        linkBase: "",
-        linkPrefix: "",
-        listStyle: false,
-        mark: false,
-        mathBlockPreview: true,
-        paragraphBeginningSpace: false,
-        sanitize: true,
-        toc: false,
-    };
-    public static readonly HLJS_OPTIONS = {
-        enable: true,
-        lineNumber: false,
-        style: "github",
-    };
-    public static readonly MATH_OPTIONS: IMath = {
-        engine: "KaTeX",
-        inlineDigit: false,
-        macros: {},
-    };
-    public static readonly THEME_OPTIONS = {
-        current: "light",
-        list: {
-            "ant-design": "Ant Design",
-            "dark": "Dark",
-            "light": "Light",
-            "wechat": "WeChat",
-        },
-        path: `${Constants.CDN}/dist/css/content-theme`,
-    };
+  public static readonly ZWSP: string = "\u200b";
+  public static readonly DROP_EDITOR: string = "application/editor";
+  public static readonly MOBILE_WIDTH: number = 520;
+  public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
+  public static readonly EDIT_TOOLBARS: string[] = ["emoji", "headings", "bold", "italic", "strike", "link", "list",
+    "ordered-list", "outdent", "indent", "check", "line", "quote", "code", "inline-code", "insert-after",
+    "insert-before", "upload", "record", "table"];
+  public static readonly CODE_THEME: string[] = ["abap", "algol", "algol_nu", "arduino", "autumn", "borland", "bw",
+    "colorful", "dracula", "emacs", "friendly", "fruity", "github", "igor", "lovelace", "manni", "monokai",
+    "monokailight", "murphy", "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments",
+    "rainbow_dash", "rrt", "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac",
+    "vim", "vs", "xcode", "ant-design"];
+  public static readonly CODE_LANGUAGES: string[] = ["mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
+    "js", "ts", "html",
+    // common
+    "properties", "apache", "bash", "c", "csharp", "cpp", "css", "coffeescript", "diff", "go", "xml", "http",
+    "json", "java", "javascript", "kotlin", "less", "lua", "makefile", "markdown", "nginx", "objectivec", "php",
+    "php-template", "perl", "plaintext", "python", "python-repl", "r", "ruby", "rust", "scss", "sql", "shell",
+    "swift", "ini", "typescript", "vbnet", "yaml",
+    "ada", "clojure", "dart", "erb", "fortran", "gradle", "haskell", "julia", "julia-repl", "lisp", "matlab",
+    "pgsql", "powershell", "sql_more", "stata", "cmake", "mathematica",
+    // ext
+    "solidity", "yul"
+  ];
+  public static readonly CDN = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
+  public static readonly MARKDOWN_OPTIONS = {
+    autoSpace: false,
+    codeBlockPreview: true,
+    fixTermTypo: false,
+    footnotes: true,
+    linkBase: "",
+    linkPrefix: "",
+    listStyle: false,
+    mark: false,
+    mathBlockPreview: true,
+    paragraphBeginningSpace: false,
+    sanitize: true,
+    toc: false,
+  };
+  public static readonly HLJS_OPTIONS = {
+    enable: true,
+    lineNumber: false,
+    style: "github",
+  };
+  public static readonly MATH_OPTIONS: IMath = {
+    engine: "KaTeX",
+    inlineDigit: false,
+    macros: {},
+  };
+  public static readonly THEME_OPTIONS = {
+    current: "light",
+    list: {
+      "ant-design": "Ant Design",
+      "dark": "Dark",
+      "light": "Light",
+      "wechat": "WeChat",
+    },
+    path: `${Constants.CDN}/dist/css/content-theme`,
+  };
 }

package/src/ts/ir/index.ts

@@ -92,6 +92,11 @@ class IR {
             }
             if (this.preventInput) {
                 this.preventInput = false;
+                processAfterRender(vditor, {
+                  enableAddUndoStack: true,
+                  enableHint: true,
+                  enableInput: true,
+                });
                 return;
             }
             if (this.composingLock || event.data === "‘" || event.data === "“" || event.data === "《") {

package/src/ts/markdown/highlightRender.ts

@@ -3,80 +3,84 @@ import {addScript} from "../util/addScript";
 import {addStyle} from "../util/addStyle";
 
 declare const hljs: {
-    highlightElement(element: Element): void;
+  highlightElement(element: Element): void;
 };
 
 export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Document = document,
                                 cdn = Constants.CDN) => {
-    let style = hljsOption.style;
-    if (!Constants.CODE_THEME.includes(style)) {
-        style = "github";
-    }
-    const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
-    const href = `${cdn}/dist/js/highlight.js/styles/${style}.css`;
-    if (vditorHljsStyle && vditorHljsStyle.href !== href) {
-        vditorHljsStyle.remove();
-    }
-    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
+  let style = hljsOption.style;
+  if (!Constants.CODE_THEME.includes(style)) {
+    style = "github";
+  }
+  const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
+  const href = `${cdn}/dist/js/highlight.js/styles/${style}.css`;
+  if (vditorHljsStyle && vditorHljsStyle.href !== href) {
+    vditorHljsStyle.remove();
+  }
+  addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
 
-    if (hljsOption.enable === false) {
-        return;
-    }
+  if (hljsOption.enable === false) {
+    return;
+  }
 
-    const codes = element.querySelectorAll("pre > code");
-    if (codes.length === 0) {
-        return;
-    }
+  const codes = element.querySelectorAll("pre > code");
+  if (codes.length === 0) {
+    return;
+  }
 
-    addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
+  addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
+    addScript(`${cdn}/dist/js/highlight.js/solidity.min.js`, "vditorHljsSolidityScript").then(() => {
+      addScript(`${cdn}/dist/js/highlight.js/yul.min.js`, "vditorHljsYulScript").then(() => {
         element.querySelectorAll("pre > code").forEach((block) => {
-            // ir & wysiwyg 区域不渲染
-            if (block.parentElement.classList.contains("vditor-ir__marker--pre") ||
-                block.parentElement.classList.contains("vditor-wysiwyg__pre")) {
-                return;
-            }
+          // ir & wysiwyg 区域不渲染
+          if (block.parentElement.classList.contains("vditor-ir__marker--pre") ||
+            block.parentElement.classList.contains("vditor-wysiwyg__pre")) {
+            return;
+          }
 
-            if (block.classList.contains("language-mermaid") || block.classList.contains("language-flowchart") ||
-                block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
-                block.classList.contains("language-plantuml") ||
-                block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
-                block.classList.contains("language-math")) {
-                return;
-            }
-            hljs.highlightElement(block);
+          if (block.classList.contains("language-mermaid") || block.classList.contains("language-flowchart") ||
+            block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
+            block.classList.contains("language-plantuml") ||
+            block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
+            block.classList.contains("language-math")) {
+            return;
+          }
+          hljs.highlightElement(block);
 
-            if (!hljsOption.lineNumber) {
-                return;
-            }
+          if (!hljsOption.lineNumber) {
+            return;
+          }
 
-            block.classList.add("vditor-linenumber");
-            let linenNumberTemp: HTMLDivElement = block.querySelector(".vditor-linenumber__temp");
-            if (!linenNumberTemp) {
-                linenNumberTemp = document.createElement("div");
-                linenNumberTemp.className = "vditor-linenumber__temp";
-                block.insertAdjacentElement("beforeend", linenNumberTemp);
-            }
-            const whiteSpace = getComputedStyle(block).whiteSpace;
-            let isSoftWrap = false;
-            if (whiteSpace === "pre-wrap" || whiteSpace === "pre-line") {
-                isSoftWrap = true;
+          block.classList.add("vditor-linenumber");
+          let linenNumberTemp: HTMLDivElement = block.querySelector(".vditor-linenumber__temp");
+          if (!linenNumberTemp) {
+            linenNumberTemp = document.createElement("div");
+            linenNumberTemp.className = "vditor-linenumber__temp";
+            block.insertAdjacentElement("beforeend", linenNumberTemp);
+          }
+          const whiteSpace = getComputedStyle(block).whiteSpace;
+          let isSoftWrap = false;
+          if (whiteSpace === "pre-wrap" || whiteSpace === "pre-line") {
+            isSoftWrap = true;
+          }
+          let lineNumberHTML = "";
+          const lineList = block.textContent.split(/\r\n|\r|\n/g);
+          lineList.pop();
+          lineList.map((line) => {
+            let lineHeight = "";
+            if (isSoftWrap) {
+              linenNumberTemp.textContent = line || "\n";
+              lineHeight = ` style="height:${linenNumberTemp.getBoundingClientRect().height}px"`;
             }
-            let lineNumberHTML = "";
-            const lineList = block.textContent.split(/\r\n|\r|\n/g);
-            lineList.pop();
-            lineList.map((line) => {
-                let lineHeight = "";
-                if (isSoftWrap) {
-                    linenNumberTemp.textContent = line || "\n";
-                    lineHeight = ` style="height:${linenNumberTemp.getBoundingClientRect().height}px"`;
-                }
-                lineNumberHTML += `<span${lineHeight}></span>`;
-            });
+            lineNumberHTML += `<span${lineHeight}></span>`;
+          });
 
-            linenNumberTemp.style.display = "none";
-            lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
-            block.insertAdjacentHTML("beforeend", lineNumberHTML);
+          linenNumberTemp.style.display = "none";
+          lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
+          block.insertAdjacentHTML("beforeend", lineNumberHTML);
         });
-    });
+      })
+    })
+  });
 
 };

package/src/ts/sv/index.ts

@@ -11,6 +11,7 @@ import {
 import {paste} from "../util/fixBrowserBehavior";
 import {getSelectText} from "../util/getSelectText";
 import {inputEvent} from "./inputEvent";
+import {processAfterRender} from "./process";
 
 class Editor {
     public range: Range;
@@ -91,6 +92,11 @@ class Editor {
             }
             if (this.preventInput) {
                 this.preventInput = false;
+                processAfterRender(vditor, {
+                  enableAddUndoStack: true,
+                  enableHint: true,
+                  enableInput: true,
+                });
                 return;
             }
             inputEvent(vditor, event);

package/src/ts/tip/index.ts

@@ -8,20 +8,28 @@ export class Tip {
 
     public show(text: string, time: number = 6000) {
         this.element.className = "vditor-tip vditor-tip--show";
-
         if (time === 0) {
             this.element.innerHTML = `<div class="vditor-tip__content">${text}
 <div class="vditor-tip__close">X</div></div>`;
             this.element.querySelector(".vditor-tip__close").addEventListener("click", () => {
                 this.hide();
             });
-            return;
+        } else {
+            this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+            setTimeout(() => {
+                this.hide();
+            }, time);
         }
 
-        this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+        // 需在动画结束后才能确定位置
+        this.element.removeAttribute("style")
         setTimeout(() => {
-            this.hide();
-        }, time);
+            const rect = this.element.getBoundingClientRect();
+            if (rect.top < 46) {
+                this.element.style.position = "fixed"
+                this.element.style.top = "46px"
+            }
+        }, 150);
     }
 
     public hide() {