vditor 3.8.5 → 3.8.9

package/src/ts/markdown/codeRender.ts

@@ -1,7 +1,6 @@
-import {i18n} from "../i18n/index";
 import {code160to32} from "../util/code160to32";
 
-export const codeRender = (element: HTMLElement, lang: keyof II18n = "zh_CN") => {
+export const codeRender = (element: HTMLElement) => {
     element.querySelectorAll("pre > code").forEach((e: HTMLElement, index: number) => {
         if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
             e.parentElement.classList.contains("vditor-ir__marker--pre")) {
@@ -11,7 +10,7 @@ export const codeRender = (element: HTMLElement, lang: keyof II18n = "zh_CN") =>
             e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
             e.classList.contains("language-plantuml") ||
             e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
-            e.classList.contains("language-math") ) {
+            e.classList.contains("language-math")) {
             return;
         }
 
@@ -36,11 +35,11 @@ export const codeRender = (element: HTMLElement, lang: keyof II18n = "zh_CN") =>
 
         const divElement = document.createElement("div");
         divElement.className = "vditor-copy";
-        divElement.innerHTML = `<span aria-label="${i18n[lang].copy}"
-onmouseover="this.setAttribute('aria-label', '${i18n[lang].copy}')"
+        divElement.innerHTML = `<span aria-label="${window.VditorI18n.copy}"
+onmouseover="this.setAttribute('aria-label', '${window.VditorI18n.copy}')"
 class="vditor-tooltipped vditor-tooltipped__w"
 onclick="this.previousElementSibling.select();document.execCommand('copy');` +
-            `this.setAttribute('aria-label', '${i18n[lang].copied}')"><svg><use xlink:href="#vditor-icon-copy"></use></svg></span>`;
+            `this.setAttribute('aria-label', '${window.VditorI18n.copied}')"><svg><use xlink:href="#vditor-icon-copy"></use></svg></span>`;
         const textarea = document.createElement("textarea");
         textarea.value = code160to32(codeText);
         divElement.insertAdjacentElement("afterbegin", textarea);

package/src/ts/markdown/flowchartRender.ts

@@ -1,12 +1,13 @@
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {flowchartRenderAdapter} from "./adapterRender";
 
 declare const flowchart: {
     parse(text: string): { drawSVG: (type: HTMLElement) => void };
 };
 
 export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const flowchartElements = element.querySelectorAll(".language-flowchart");
+    const flowchartElements = flowchartRenderAdapter.getElements(element);
     if (flowchartElements.length === 0) {
         return;
     }
@@ -15,7 +16,7 @@ export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
             if (item.getAttribute("data-processed") === "true") {
                 return;
             }
-            const flowchartObj = flowchart.parse(item.textContent);
+            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
             item.innerHTML = "";
             flowchartObj.drawSVG(item);
             item.setAttribute("data-processed", "true");

package/src/ts/markdown/graphvizRender.ts

@@ -1,42 +1,44 @@
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {graphvizRenderAdapter} from "./adapterRender";
 
 declare class Viz {
     public renderSVGElement: (code: string) => Promise<any>;
 
-    constructor({}: { worker: Worker });
+    constructor({ }: { worker: Worker });
 }
 
 export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const graphvizElements = element.querySelectorAll(".language-graphviz");
+    const graphvizElements = graphvizRenderAdapter.getElements(element);
 
     if (graphvizElements.length === 0) {
         return;
     }
     addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
         graphvizElements.forEach((e: HTMLDivElement) => {
+            const code = graphvizRenderAdapter.getCode(e);
             if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
                 e.parentElement.classList.contains("vditor-ir__marker--pre")) {
                 return;
             }
 
-            if (e.getAttribute("data-processed") === "true" || e.textContent.trim() === "") {
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
 
             try {
                 const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
-                    {type: "application/javascript"});
+                    { type: "application/javascript" });
                 const url = window.URL || window.webkitURL;
                 const blobUrl = url.createObjectURL(blob);
                 const worker = new Worker(blobUrl);
-                new Viz({worker})
-                    .renderSVGElement(e.textContent).then((result: HTMLElement) => {
-                    e.innerHTML = result.outerHTML;
-                }).catch((error) => {
-                    e.innerHTML = `graphviz render error: <br>${error}`;
-                    e.className = "vditor-reset--error";
-                });
+                new Viz({ worker })
+                    .renderSVGElement(code).then((result: HTMLElement) => {
+                        e.innerHTML = result.outerHTML;
+                    }).catch((error) => {
+                        e.innerHTML = `graphviz render error: <br>${error}`;
+                        e.className = "vditor-reset--error";
+                    });
             } catch (e) {
                 console.error("graphviz error", e);
             }

package/src/ts/markdown/mathRender.ts

@@ -2,6 +2,7 @@ import {Constants} from "../constants";
 import {addScript, addScriptSync} from "../util/addScript";
 import {addStyle} from "../util/addStyle";
 import {code160to32} from "../util/code160to32";
+import {mathRenderAdapter} from "./adapterRender";
 
 declare const katex: {
     renderToString(math: string, option: {
@@ -17,7 +18,7 @@ declare global {
 }
 
 export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
-    const mathElements = element.querySelectorAll(".language-math");
+    const mathElements = mathRenderAdapter.getElements(element);
 
     if (mathElements.length === 0) {
         return;
@@ -49,7 +50,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
                 if (mathElement.getAttribute("data-math")) {
                     return;
                 }
-                const math = code160to32(mathElement.textContent);
+                const math = code160to32(mathRenderAdapter.getCode(mathElement));
                 mathElement.setAttribute("data-math", math);
                 try {
                     mathElement.innerHTML = katex.renderToString(math, {
@@ -87,7 +88,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,
@@ -120,7 +121,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
             });
         };
         window.MathJax.startup.promise.then(() => {
-            const chains: any [] = [];
+            const chains: any[] = [];
             for (let i = 0; i < mathElements.length; i++) {
                 const mathElement = mathElements[i];
                 if (!mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") &&

package/src/ts/markdown/mermaidRender.ts

@@ -1,5 +1,6 @@
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {mermaidRenderAdapter} from "./adapterRender";
 
 declare const mermaid: {
     initialize(options: any): void,
@@ -7,7 +8,7 @@ declare const mermaid: {
 };
 
 export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
-    const mermaidElements = element.querySelectorAll(".language-mermaid");
+    const mermaidElements = mermaidRenderAdapter.getElements(element);
     if (mermaidElements.length === 0) {
         return;
     }
@@ -115,7 +116,8 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
         }
         mermaid.initialize(config);
         mermaidElements.forEach((item) => {
-            if (item.getAttribute("data-processed") === "true" || item.textContent.trim() === "") {
+            const code = mermaidRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
             mermaid.init(undefined, item);

package/src/ts/markdown/mindmapRender.ts

@@ -1,12 +1,13 @@
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {mindmapRenderAdapter} from "./adapterRender";
 
 declare const echarts: {
     init(element: HTMLElement, theme?: string): IEChart;
 };
 
 export const mindmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
-    const mindmapElements = element.querySelectorAll(".language-mindmap");
+    const mindmapElements = mindmapRenderAdapter.getElements(element);
     if (mindmapElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             mindmapElements.forEach((e: HTMLDivElement) => {
@@ -14,7 +15,7 @@ export const mindmapRender = (element: (HTMLElement | Document) = document, cdn
                     e.parentElement.classList.contains("vditor-ir__marker--pre")) {
                     return;
                 }
-                const text = e.getAttribute("data-code");
+                const text = mindmapRenderAdapter.getCode(e);
                 if (!text) {
                     return;
                 }

package/src/ts/markdown/plantumlRender.ts

@@ -1,12 +1,13 @@
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {plantumlRenderAdapter} from "./adapterRender";
 
 declare const plantumlEncoder: {
     encode(options: string): string,
 };
 
 export const plantumlRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
-    const plantumlElements = element.querySelectorAll(".language-plantuml");
+    const plantumlElements = plantumlRenderAdapter.getElements(element);
     if (plantumlElements.length === 0) {
         return;
     }
@@ -16,7 +17,7 @@ export const plantumlRender = (element: (HTMLElement | Document) = document, cdn
                 e.parentElement.classList.contains("vditor-ir__marker--pre")) {
                 return;
             }
-            const text = e.textContent.trim();
+            const text = plantumlRenderAdapter.getCode(e).trim();
             if (!text) {
                 return;
             }

package/src/ts/markdown/previewRender.ts

@@ -1,6 +1,6 @@
 import {Constants} from "../constants";
 import {setContentTheme} from "../ui/setContentTheme";
-import {addScript} from "../util/addScript";
+import {addScript, addScriptSync} from "../util/addScript";
 import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {merge} from "../util/merge";
 import {abcRender} from "./abcRender";
@@ -24,7 +24,9 @@ const mergeOptions = (options?: IPreviewOptions) => {
         anchor: 0,
         cdn: Constants.CDN,
         customEmoji: {},
-        emojiPath: `${(options && options.emojiPath) || Constants.CDN}/dist/images/emoji`,
+        emojiPath: `${
+            (options && options.emojiPath) || Constants.CDN
+        }/dist/images/emoji`,
         hljs: Constants.HLJS_OPTIONS,
         icon: "ant",
         lang: "zh_CN",
@@ -81,11 +83,31 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     }
     previewElement.innerHTML = html;
     previewElement.classList.add("vditor-reset");
+
+    if (!mergedOptions.i18n) {
+        if (!["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+            throw new Error(
+                "options.lang error, see https://ld246.com/article/1549638745630#options",
+            );
+        } else {
+            const i18nScriptPrefix = "vditorI18nScript";
+            const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+            document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                if (el.id !== i18nScriptID) {
+                    document.head.removeChild(el);
+                }
+            });
+            await addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID);
+        }
+    } else {
+        window.VditorI18n = mergedOptions.i18n;
+    }
+
     setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
     if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");
     }
-    codeRender(previewElement, mergedOptions.lang);
+    codeRender(previewElement);
     highlightRender(mergedOptions.hljs, previewElement, mergedOptions.cdn);
     mathRender(previewElement, {
         cdn: mergedOptions.cdn,
@@ -100,7 +122,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     abcRender(previewElement, mergedOptions.cdn);
     mediaRender(previewElement);
     if (mergedOptions.speech.enable) {
-        speechRender(previewElement, mergedOptions.lang);
+        speechRender(previewElement);
     }
     if (mergedOptions.anchor !== 0) {
         anchorRender(mergedOptions.anchor);

package/src/ts/preview/image.ts

@@ -1,5 +1,3 @@
-import {i18n} from "../i18n";
-
 export const previewImage = (oldImgElement: HTMLImageElement, lang: keyof II18n = "zh_CN", theme = "classic") => {
     const oldImgRect = oldImgElement.getBoundingClientRect();
     const height = 36;
@@ -7,10 +5,10 @@ export const previewImage = (oldImgElement: HTMLImageElement, lang: keyof II18n
     <div class="vditor-img__bar">
       <span class="vditor-img__btn" data-deg="0">
         <svg><use xlink:href="#vditor-icon-redo"></use></svg>
-        ${i18n[lang].spin}
+        ${window.VditorI18n.spin}
       </span>
       <span class="vditor-img__btn"  onclick="this.parentElement.parentElement.outerHTML = '';document.body.style.overflow = ''">
-        X &nbsp;${i18n[lang].close}
+        X &nbsp;${window.VditorI18n.close}
       </span>
     </div>
     <div class="vditor-img__img" onclick="this.parentElement.outerHTML = '';document.body.style.overflow = ''">

package/src/ts/preview/index.ts

@@ -1,4 +1,3 @@
-import {i18n} from "../i18n/index";
 import {abcRender} from "../markdown/abcRender";
 import {chartRender} from "../markdown/chartRender";
 import {codeRender} from "../markdown/codeRender";
@@ -24,7 +23,6 @@ export class Preview {
     constructor(vditor: IVditor) {
         this.element = document.createElement("div");
         this.element.className = `vditor-preview`;
-
         const previewElement = document.createElement("div");
         previewElement.className = "vditor-reset";
         if (vditor.options.classes.preview) {
@@ -199,8 +197,7 @@ export class Preview {
         const time = (new Date().getTime() - startTime);
         if ((new Date().getTime() - startTime) > 2600) {
             // https://github.com/b3log/vditor/issues/67
-            vditor.tip.show(i18n[vditor.options.lang].performanceTip.replace("${x}",
-                time.toString()));
+            vditor.tip.show(window.VditorI18n.performanceTip.replace("${x}", time.toString()));
             vditor.preview.element.setAttribute("data-type", "renderPerformance");
         } else if (vditor.preview.element.getAttribute("data-type") === "renderPerformance") {
             vditor.tip.hide();
@@ -210,7 +207,7 @@ export class Preview {
         if (cmtFocusElement) {
             cmtFocusElement.classList.remove("vditor-comment--focus");
         }
-        codeRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.lang);
+        codeRender(vditor.preview.element.lastElementChild as HTMLElement);
         highlightRender(vditor.options.preview.hljs, vditor.preview.element.lastElementChild as HTMLElement,
             vditor.options.cdn);
         mermaidRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);

package/src/ts/toolbar/EditMode.ts

@@ -1,5 +1,4 @@
 import {Constants} from "../constants";
-import {i18n} from "../i18n";
 import {processAfterRender} from "../ir/process";
 import {getMarkdown} from "../markdown/getMarkdown";
 import {mathRender} from "../markdown/mathRender";
@@ -157,9 +156,9 @@ export class EditMode extends MenuItem {
 
         const panelElement = document.createElement("div");
         panelElement.className = `vditor-hint${menuItem.level === 2 ? "" : " vditor-panel--arrow"}`;
-        panelElement.innerHTML = `<button data-mode="wysiwyg">${i18n[vditor.options.lang].wysiwyg} &lt;${updateHotkeyTip("⌥⌘7")}></button>
-<button data-mode="ir">${i18n[vditor.options.lang].instantRendering} &lt;${updateHotkeyTip("⌥⌘8")}></button>
-<button data-mode="sv">${i18n[vditor.options.lang].splitView} &lt;${updateHotkeyTip("⌥⌘9")}></button>`;
+        panelElement.innerHTML = `<button data-mode="wysiwyg">${window.VditorI18n.wysiwyg} &lt;${updateHotkeyTip("⌥⌘7")}></button>
+<button data-mode="ir">${window.VditorI18n.instantRendering} &lt;${updateHotkeyTip("⌥⌘8")}></button>
+<button data-mode="sv">${window.VditorI18n.splitView} &lt;${updateHotkeyTip("⌥⌘9")}></button>`;
 
         this.element.appendChild(panelElement);
 

package/src/ts/toolbar/Headings.ts

@@ -15,12 +15,12 @@ export class Headings extends MenuItem {
 
         const panelElement = document.createElement("div");
         panelElement.className = "vditor-hint vditor-panel--arrow";
-        panelElement.innerHTML = `<button data-tag="h1" data-value="# ">Heading 1 ${updateHotkeyTip("&lt;⌥⌘1>")}</button>
-<button data-tag="h2" data-value="## ">Heading 2 &lt;${updateHotkeyTip("⌥⌘2")}></button>
-<button data-tag="h3" data-value="### ">Heading 3 &lt;${updateHotkeyTip("⌥⌘3")}></button>
-<button data-tag="h4" data-value="#### ">Heading 4 &lt;${updateHotkeyTip("⌥⌘4")}></button>
-<button data-tag="h5" data-value="##### ">Heading 5 &lt;${updateHotkeyTip("⌥⌘5")}></button>
-<button data-tag="h6" data-value="###### ">Heading 6 &lt;${updateHotkeyTip("⌥⌘6")}></button>`;
+        panelElement.innerHTML = `<button data-tag="h1" data-value="# ">${window.VditorI18n.heading1} ${updateHotkeyTip("&lt;⌥⌘1>")}</button>
+<button data-tag="h2" data-value="## ">${window.VditorI18n.heading2} &lt;${updateHotkeyTip("⌥⌘2")}></button>
+<button data-tag="h3" data-value="### ">${window.VditorI18n.heading3} &lt;${updateHotkeyTip("⌥⌘3")}></button>
+<button data-tag="h4" data-value="#### ">${window.VditorI18n.heading4} &lt;${updateHotkeyTip("⌥⌘4")}></button>
+<button data-tag="h5" data-value="##### ">${window.VditorI18n.heading5} &lt;${updateHotkeyTip("⌥⌘5")}></button>
+<button data-tag="h6" data-value="###### ">${window.VditorI18n.heading6} &lt;${updateHotkeyTip("⌥⌘6")}></button>`;
 
         this.element.appendChild(panelElement);
 

package/src/ts/toolbar/Info.ts

@@ -16,7 +16,7 @@ export class Info extends MenuItem {
     <div>&nbsp;&nbsp;</div>
     <div style="flex: 1;min-width: 250px">
         Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。
-        它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供<a target="_blank" href="https://b3log.org/siyuan">桌面版</a>。
+        它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。
     </div>
 </div>
 <div style="display: flex;flex-wrap: wrap;">

package/src/ts/toolbar/MenuItem.ts

@@ -1,5 +1,4 @@
 import {Constants} from "../constants";
-import {i18n} from "../i18n/index";
 import {processToolbar} from "../ir/process";
 import {processToolbar as processToolbarSV} from "../sv/process";
 import {getEventName} from "../util/compatibility";
@@ -19,8 +18,7 @@ export class MenuItem {
         if (menuItem.level === 2) {
             hotkey = menuItem.hotkey ? ` <${updateHotkeyTip(menuItem.hotkey)}>` : "";
         }
-        const tip = menuItem.tip ?
-            menuItem.tip + hotkey : i18n[vditor.options.lang][menuItem.name] + hotkey;
+        const tip = menuItem.tip ? menuItem.tip + hotkey : `${window.VditorI18n[menuItem.name]}${hotkey}`;
         const tagName = menuItem.name === "upload" ? "div" : "button";
         if (menuItem.level === 2) {
             this.element.innerHTML = `<${tagName} data-type="${menuItem.name}">${tip}</${tagName}>`;

package/src/ts/toolbar/Record.ts

@@ -1,5 +1,4 @@
 import {Constants} from "../constants";
-import {i18n} from "../i18n/index";
 import {uploadFiles} from "../upload/index";
 import {getEventName} from "../util/compatibility";
 import {RecordMedia} from "../util/RecordMedia";
@@ -34,11 +33,11 @@ export class Record extends MenuItem {
                         mediaRecorder.cloneChannelData(left, right);
                     };
                     mediaRecorder.startRecordingNewWavFile();
-                    vditor.tip.show(i18n[vditor.options.lang].recording);
+                    vditor.tip.show(window.VditorI18n.recording);
                     editorElement.setAttribute("contenteditable", "false");
                     this.element.children[0].classList.add("vditor-menu--current");
                 }).catch(() => {
-                    vditor.tip.show(i18n[vditor.options.lang]["record-tip"]);
+                    vditor.tip.show(window.VditorI18n["record-tip"]);
                 });
                 return;
             }
@@ -51,7 +50,7 @@ export class Record extends MenuItem {
                 uploadFiles(vditor, [file]);
                 this.element.children[0].classList.remove("vditor-menu--current");
             } else {
-                vditor.tip.show(i18n[vditor.options.lang].recording);
+                vditor.tip.show(window.VditorI18n.recording);
                 editorElement.setAttribute("contenteditable", "false");
                 mediaRecorder.startRecordingNewWavFile();
                 this.element.children[0].classList.add("vditor-menu--current");

package/src/ts/ui/initUI.ts

@@ -1,5 +1,6 @@
 import {Constants} from "../constants";
 import {setEditMode} from "../toolbar/EditMode";
+import {hidePanel} from "../toolbar/setToolbar";
 import {accessLocalStorage} from "../util/compatibility";
 import {setContentTheme} from "./setContentTheme";
 import {setTheme} from "./setTheme";
@@ -67,13 +68,17 @@ export const initUI = (vditor: IVditor) => {
 
     vditor.element.appendChild(contentElement);
 
+    contentElement.addEventListener("click", () => {
+        hidePanel(vditor, ["subToolbar"]);
+    });
+
     if (vditor.toolbar.elements.export) {
         // for export pdf
         vditor.element.insertAdjacentHTML("beforeend",
             '<iframe style="width: 100%;height: 0;border: 0"></iframe>');
     }
 
-    setEditMode(vditor, vditor.options.mode, afterRender(vditor, contentElement));
+    setEditMode(vditor, vditor.options.mode, afterRender(vditor));
 
     document.execCommand("DefaultParagraphSeparator", false, "p");
 
@@ -114,10 +119,13 @@ export const setPadding = (vditor: IVditor) => {
         vditor.ir.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
     }
 
-    if (vditor.preview.element.style.display !== "block" || vditor.currentMode === "sv") {
+    if (vditor.preview.element.style.display !== "block") {
         vditor.toolbar.element.style.paddingLeft = Math.max(5,
             parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) +
             (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
+    } else {
+        vditor.toolbar.element.style.paddingLeft = (5 +
+            (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
     }
 };
 
@@ -141,10 +149,16 @@ export const setTypewriterPosition = (vditor: IVditor) => {
         ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
 };
 
-const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
-    setTypewriterPosition(vditor);
+let resizeCb: () => void;
+
+export function UIUnbindListener() {
+    window.removeEventListener("resize", resizeCb);
+}
 
-    window.addEventListener("resize", () => {
+const afterRender = (vditor: IVditor) => {
+    setTypewriterPosition(vditor);
+    UIUnbindListener();
+    window.addEventListener("resize", resizeCb = () => {
         setPadding(vditor);
         setTypewriterPosition(vditor);
     });

package/src/ts/upload/index.ts

@@ -1,4 +1,3 @@
-import {i18n} from "../i18n/index";
 import {getEditorRange, setSelectionFocus} from "../util/selection";
 import {getElement} from "./getElement";
 import {setHeaders} from "./setHeaders";
@@ -20,19 +19,20 @@ const validateFile = (vditor: IVditor, files: File[]) => {
     const uploadFileList = [];
     let errorTip = "";
     let uploadingStr = "";
-    const lang: keyof II18n = vditor.options.lang;
+    const lang: keyof II18n | "" = vditor.options.lang;
+    const options: IOptions = vditor.options;
 
     for (let iMax = files.length, i = 0; i < iMax; i++) {
         const file = files[i];
         let validate = true;
 
         if (!file.name) {
-            errorTip += `<li>${i18n[lang].nameEmpty}</li>`;
+            errorTip += `<li>${window.VditorI18n.nameEmpty}</li>`;
             validate = false;
         }
 
         if (file.size > vditor.options.upload.max) {
-            errorTip += `<li>${file.name} ${i18n[lang].over} ${vditor.options.upload.max / 1024 / 1024}M</li>`;
+            errorTip += `<li>${file.name} ${window.VditorI18n.over} ${vditor.options.upload.max / 1024 / 1024}M</li>`;
             validate = false;
         }
 
@@ -56,14 +56,14 @@ const validateFile = (vditor: IVditor, files: File[]) => {
             });
 
             if (!isAccept) {
-                errorTip += `<li>${file.name} ${i18n[lang].fileTypeError}</li>`;
+                errorTip += `<li>${file.name} ${window.VditorI18n.fileTypeError}</li>`;
                 validate = false;
             }
         }
 
         if (validate) {
             uploadFileList.push(file);
-            uploadingStr += `<li>${filename} ${i18n[lang].uploading}</li>`;
+            uploadingStr += `<li>${filename} ${window.VditorI18n.uploading}</li>`;
         }
     }
 
@@ -87,7 +87,7 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
         response.data.errFiles.forEach((data: string) => {
             const lastIndex = data.lastIndexOf(".");
             const filename = vditor.options.upload.filename(data.substr(0, lastIndex)) + data.substr(lastIndex);
-            errorTip += `<li>${filename} ${i18n[vditor.options.lang].uploadError}</li>`;
+            errorTip += `<li>${filename} ${window.VditorI18n.uploadError}</li>`;
         });
         errorTip += "</ul>";
     }
@@ -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>`;
+ data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre>\n`;
             } else if (vditor.currentMode === "ir") {
                 succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
             } else {
@@ -123,13 +123,13 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
             || type.indexOf(".svg") === 0
             || type.indexOf(".webp") === 0) {
             if (vditor.currentMode === "wysiwyg") {
-                succFileText += `<img alt="${filename}" src="${path}">`;
+                succFileText += `<img alt="${filename}" src="${path}">\n`;
             } else {
                 succFileText += `![${filename}](${path})\n`;
             }
         } else {
             if (vditor.currentMode === "wysiwyg") {
-                succFileText += `<a href="${path}">${filename}</a>`;
+                succFileText += `<a href="${path}">${filename}</a>\n`;
             } else {
                 succFileText += `[${filename}](${path})\n`;
             }
@@ -154,7 +154,7 @@ const uploadFiles =
         }
 
         if (vditor.options.upload.handler) {
-            const isValidate = vditor.options.upload.handler(fileList);
+            const isValidate = await vditor.options.upload.handler(fileList);
             if (typeof isValidate === "string") {
                 vditor.tip.show(isValidate);
                 return;