vditor 3.8.10 → 3.8.13

package/dist/ts/toolbar/Emoji.d.ts

@@ -3,5 +3,5 @@ import { MenuItem } from "./MenuItem";
 export declare class Emoji extends MenuItem {
     element: HTMLElement;
     constructor(vditor: IVditor, menuItem: IMenuItem);
-    _bindEvent(vditor: IVditor, panelElement: HTMLElement): void;
+    private bindEvent;
 }

package/dist/types/index.d.ts

@@ -564,6 +564,8 @@ interface IResize {
 
 /** @link https://ld246.com/article/1549638745630#options */
 interface IOptions {
+    /** RTL */
+    rtl?: boolean;
     /** 历史记录间隔 */
     undoDelay?: number;
     /** 内部调试时使用 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "3.8.10",
+  "version": "3.8.13",
   "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
   "author": "Vanessa <v@b3log.org> (http://vanessa.b3log.org)",
   "homepage": "https://b3log.org/vditor",
@@ -23,30 +23,36 @@
     "@babel/preset-env": "^7.14.2",
     "@types/diff-match-patch": "^1.0.32",
     "@types/jest": "^26.0.23",
+    "@types/node": "^17.0.19",
     "@types/puppeteer": "^2.1.5",
-    "autoprefixer": "^9.8.6",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^5.2.4",
-    "file-loader": "^4.3.0",
+    "eslint": "^8.9.0",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^0.8.2",
-    "node-sass": "^7.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "postcss": "^8.4.12",
     "postcss-loader": "^5.2.0",
+    "prettier": "^2.5.1",
     "puppeteer": "^1.20.0",
-    "sass-loader": "^12.4.0",
+    "sass-loader": "^12.6.0",
     "style-loader": "^1.3.0",
-    "terser-webpack-plugin": "^5.1.2",
+    "terser-webpack-plugin": "^5.3.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^6.2.2",
-    "tslint": "^5.20.1",
     "typescript": "^3.9.9",
-    "webpack": "^5.37.0",
+    "webpack": "^5.66.0",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^4.7.0",
+    "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.1.0"
   },
   "license": "MIT",
@@ -55,7 +61,7 @@
     "url": "https://github.com/Vanessa219/vditor/issues"
   },
   "scripts": {
-    "lint": "tslint --fix -c tslint.json '{src,types}/**/*.ts'",
+    "lint": "eslint --fix --ext src/**/*.ts",
     "test:watch": "jest --watch",
     "test": "jest --coverage",
     "start": "webpack serve --config webpack.start.js",

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/markdown/mathRender.ts

@@ -42,33 +42,35 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
     if (options.math.engine === "KaTeX") {
         addStyle(`${options.cdn}/dist/js/katex/katex.min.css`, "vditorKatexStyle");
         addScript(`${options.cdn}/dist/js/katex/katex.min.js`, "vditorKatexScript").then(() => {
-            mathElements.forEach((mathElement) => {
-                if (mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") ||
-                    mathElement.parentElement.classList.contains("vditor-ir__marker--pre")) {
-                    return;
-                }
-                if (mathElement.getAttribute("data-math")) {
-                    return;
-                }
-                const math = code160to32(mathRenderAdapter.getCode(mathElement));
-                mathElement.setAttribute("data-math", math);
-                try {
-                    mathElement.innerHTML = katex.renderToString(math, {
-                        displayMode: mathElement.tagName === "DIV",
-                        output: "html",
-                    });
-                } catch (e) {
-                    mathElement.innerHTML = e.message;
-                    mathElement.className = "language-math vditor-reset--error";
-                }
+            addScript(`${options.cdn}/dist/js/katex/mhchem.min.js`, "vditorKatexChemScript").then(() => {
+                mathElements.forEach((mathElement) => {
+                    if (mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                        mathElement.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                        return;
+                    }
+                    if (mathElement.getAttribute("data-math")) {
+                        return;
+                    }
+                    const math = code160to32(mathRenderAdapter.getCode(mathElement));
+                    mathElement.setAttribute("data-math", math);
+                    try {
+                        mathElement.innerHTML = katex.renderToString(math, {
+                            displayMode: mathElement.tagName === "DIV",
+                            output: "html",
+                        });
+                    } catch (e) {
+                        mathElement.innerHTML = e.message;
+                        mathElement.className = "language-math vditor-reset--error";
+                    }
 
-                mathElement.addEventListener("copy", (event: ClipboardEvent) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    const vditorMathElement = (event.currentTarget as HTMLElement).closest(".language-math");
-                    event.clipboardData.setData("text/html", vditorMathElement.innerHTML);
-                    event.clipboardData.setData("text/plain",
-                        vditorMathElement.getAttribute("data-math"));
+                    mathElement.addEventListener("copy", (event: ClipboardEvent) => {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        const vditorMathElement = (event.currentTarget as HTMLElement).closest(".language-math");
+                        event.clipboardData.setData("text/html", vditorMathElement.innerHTML);
+                        event.clipboardData.setData("text/plain",
+                            vditorMathElement.getAttribute("data-math"));
+                    });
                 });
             });
         });
@@ -88,7 +90,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
         if (!window.MathJax) {
             window.MathJax = {
                 loader: {
-                    paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
+                    paths: {mathjax: `${options.cdn}/dist/js/mathjax`},
                 },
                 startup: {
                     typeset: false,

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/toolbar/Emoji.ts

@@ -1,5 +1,6 @@
 import {getEventName} from "../util/compatibility";
 import {execAfterRender} from "../util/fixBrowserBehavior";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
 import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
 import {MenuItem} from "./MenuItem";
 import {toggleSubMenu} from "./setToolbar";
@@ -23,26 +24,24 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
  data-key="${key}"><span class="vditor-emojis__icon">${emojiValue}</span></button>`;
             }
         });
-
-        const tailHTML = `<div class="vditor-emojis__tail">
-    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
-</div>`;
-
         panelElement.innerHTML = `<div class="vditor-emojis" style="max-height: ${
             vditor.options.height === "auto" ? "auto" : vditor.options.height as number - 80
-        }px">${commonEmojiHTML}</div>${tailHTML}`;
+        }px">${commonEmojiHTML}</div><div class="vditor-emojis__tail">
+    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
+</div>`;
 
         this.element.appendChild(panelElement);
 
-        toggleSubMenu(vditor, panelElement, this.element.children[0], menuItem.level);
-        this._bindEvent(vditor, panelElement);
+        toggleSubMenu(vditor, panelElement, this.element.firstElementChild, menuItem.level);
+        this.bindEvent(vditor);
     }
 
-    public _bindEvent(vditor: IVditor, panelElement: HTMLElement) {
-        panelElement.querySelectorAll(".vditor-emojis button").forEach((element: HTMLElement) => {
-            element.addEventListener(getEventName(), (event: Event) => {
+    private bindEvent(vditor: IVditor) {
+        this.element.lastElementChild.addEventListener(getEventName(), (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
                 event.preventDefault();
-                const value = element.getAttribute("data-value");
+                const value = btnElement.getAttribute("data-value");
                 const range = getEditorRange(vditor);
                 let html = value;
                 if (vditor.currentMode === "wysiwyg") {
@@ -61,15 +60,15 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 }
                 range.collapse(false);
                 setSelectionFocus(range);
-                panelElement.style.display = "none";
+                (this.element.lastElementChild as HTMLElement).style.display = "none";
                 execAfterRender(vditor);
-            });
-            element.addEventListener("mouseover", (event: Event) => {
-                if ((event.target as HTMLElement).tagName === "BUTTON") {
-                    panelElement.querySelector(".vditor-emojis__tip").innerHTML =
-                        (event.target as HTMLElement).getAttribute("data-key");
-                }
-            });
+            }
+        });
+        this.element.lastElementChild.addEventListener("mouseover", (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
+                this.element.querySelector(".vditor-emojis__tip").innerHTML = btnElement.getAttribute("data-key");
+            }
         });
     }
 }

package/src/ts/ui/initUI.ts

@@ -14,6 +14,10 @@ declare global {
 export const initUI = (vditor: IVditor) => {
     vditor.element.innerHTML = "";
     vditor.element.classList.add("vditor");
+    // 支持 RTL
+    if (vditor.options.rtl) {
+        vditor.element.setAttribute("dir", "rtl")
+    }
     setTheme(vditor);
     setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
     if (typeof vditor.options.height === "number") {

package/src/ts/undo/index.ts

@@ -6,6 +6,7 @@ import {execAfterRender} from "../util/fixBrowserBehavior";
 import {highlightToolbar} from "../util/highlightToolbar";
 import {processCodeRender} from "../util/processCode";
 import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {renderToc} from "../util/toc";
 
 interface IUndo {
     hasUndo: boolean;
@@ -165,6 +166,8 @@ class Undo {
             scrollCenter(vditor);
         }
 
+        renderToc(vditor);
+
         execAfterRender(vditor, {
             enableAddUndoStack: false,
             enableHint: false,

package/src/ts/upload/index.ts

@@ -108,7 +108,7 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
         if (type.indexOf(".wav") === 0 || type.indexOf(".mp3") === 0 || type.indexOf(".ogg") === 0) {
             if (vditor.currentMode === "wysiwyg") {
                 succFileText += `<div class="vditor-wysiwyg__block" data-type="html-block"
- data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre>\n`;
+ data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre><pre class="vditor-wysiwyg__preview" data-render="1"><audio controls="controls" src="${path}"></audio></pre></div>\n`;
             } else if (vditor.currentMode === "ir") {
                 succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
             } else {

package/src/ts/util/Options.ts

@@ -4,6 +4,7 @@ import { merge } from "./merge";
 export class Options {
     public options: IOptions;
     private defaultOptions: IOptions = {
+        rtl: false,
         after: undefined,
         cache: {
             enable: true,
@@ -148,6 +149,10 @@ export class Options {
             if (this.options.comment) {
                 this.defaultOptions.comment = this.options.comment;
             }
+            // 支持不够完善，我先注释了，后期再打开
+            // if (this.options.rtl) {
+            //     this.defaultOptions.rtl = this.options.rtl;
+            // }
         }
 
         const mergedOptions = merge(this.defaultOptions, this.options);