vditor - npm Package Compare versions

Comparing version 3.8.5 to 3.8.6

dist/index.d.ts

@@ -17,3 +17,3 @@ /// <reference types="./types" />
     /** 获取编辑器当前编辑模式 */
-    getCurrentMode(): "wysiwyg" | "sv" | "ir";
+    getCurrentMode(): "sv" | "wysiwyg" | "ir";
     /** 聚焦到编辑器 */
@@ -46,2 +46,4 @@ focus(): void;
     html2md(value: string): string;
+    /** markdown 转 JSON 输出 */
+    exportJSON(value: string): string;
     /** 获取 HTML */
@@ -73,3 +75,4 @@ getHTML(): string;
     removeCommentIds(removeIds: string[]): void;
+    private init;
 }
 export default Vditor;

dist/method.d.ts

 /// <reference types="./types" />
+import * as adapterRender from "./ts/markdown/adapterRender";
 declare class Vditor {
     /** 点击图片放大 */
+    static adapterRender: typeof adapterRender;
+    /** 点击图片放大 */
     static previewImage: (oldImgElement: HTMLImageElement, lang?: "en_US" | "ja_JP" | "ko_KR" | "ru_RU" | "zh_CN" | "zh_TW", theme?: string) => void;
     /** 为 element 中的代码块添加复制按钮 */
-    static codeRender: (element: HTMLElement, lang?: "en_US" | "ja_JP" | "ko_KR" | "ru_RU" | "zh_CN" | "zh_TW") => void;
+    static codeRender: (element: HTMLElement) => void;
     /** 对 graphviz 进行渲染 */
@@ -8,0 +11,0 @@ static graphvizRender: (element: HTMLElement, cdn?: string) => void;

dist/ts/markdown/codeRender.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="./types" />
-export declare const codeRender: (element: HTMLElement, lang?: keyof II18n) => void;
+export declare const codeRender: (element: HTMLElement) => void;

package.json

 {
   "name": "vditor",
-  "version": "3.8.5",
+  "version": "3.8.6",
   "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
@@ -5,0 +5,0 @@ "author": "Vanessa <[e-mail]> (http://vanessa.b3log.org)",

README.md

@@ -14,5 +14,5 @@ <p align="center">
 <a title="Hits" target="_blank" href="https://github.com/88250/hits"><img src="https://hits.b3log.org/Vanessa219/vditor.svg"></a> <br><br>
-<a title="GitHub Watchers" target="_blank" href="https://github.com/Vanessa219/vditor/watchers"><img src="https://img.shields.io/github/watchers/Vanessa219/vditor.svg?label=Watchers&style=social"></a>  
-<a title="GitHub Stars" target="_blank" href="https://github.com/Vanessa219/vditor/stargazers"><img src="https://img.shields.io/github/stars/Vanessa219/vditor.svg?label=Stars&style=social"></a>  
-<a title="GitHub Forks" target="_blank" href="https://github.com/Vanessa219/vditor/network/members"><img src="https://img.shields.io/github/forks/Vanessa219/vditor.svg?label=Forks&style=social"></a>  
+<a title="GitHub Watchers" target="_blank" href="https://github.com/Vanessa219/vditor/watchers"><img src="https://img.shields.io/github/watchers/Vanessa219/vditor.svg?label=Watchers&style=social"></a>
+<a title="GitHub Stars" target="_blank" href="https://github.com/Vanessa219/vditor/stargazers"><img src="https://img.shields.io/github/stars/Vanessa219/vditor.svg?label=Stars&style=social"></a>
+<a title="GitHub Forks" target="_blank" href="https://github.com/Vanessa219/vditor/network/members"><img src="https://img.shields.io/github/forks/Vanessa219/vditor.svg?label=Forks&style=social"></a>
 <a title="Author GitHub Followers" target="_blank" href="https://github.com/vanessa219"><img src="https://img.shields.io/github/followers/vanessa219.svg?label=Followers&style=social"></a>
@@ -27,3 +27,3 @@ </p>
 
-[Vditor](https://b3log.org/vditor) 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供[桌面版](https://b3log.org/siyuan)。
+[Vditor](https://b3log.org/vditor) 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular、Svelte，提供[桌面版](https://b3log.org/siyuan)。
 
@@ -158,2 +158,3 @@ 欢迎到 [Vditor 官方讨论区](https://ld246.com/tag/vditor)了解更多。同时也欢迎关注 B3log 开源社区微信公众号 `B3log开源`：
 * [CommonJS Render](https://github.com/Vanessa219/vditor/blob/master/demo/render.js)
+* [在Svelte中使用](https://github.com/HerbertHe/svelte-vditor-demo)
 
@@ -200,2 +201,3 @@ ### 主题
 | - | - | - |
+| i18n | 多语言，参见 ITips | - |
 | undoDelay | 历史记录间隔 | - |
@@ -207,3 +209,3 @@ | after | 编辑器异步渲染完成后的回调方法 | - |
 | placeholder | 输入区域为空时的提示 | '' |
-| lang | 多语言：en_US, ja_JP, ko_KR, ru_RU, zh_CN, zh_TW | 'zh_CN' |
+| lang | 语言种类：en_US, ja_JP, ko_KR, ru_RU, zh_CN, zh_TW | 'zh_CN' |
 | input(value: string) | 输入后触发  | - |
@@ -270,3 +272,3 @@ | focus(value: string) | 聚焦后触发 | - |
 | enable | 是否启用计数器 | false |
-| tipPosition(length: number, counter: options.counter): void | 字数统计回调 | - |
+| after(length: number, counter: options.counter): void | 字数统计回调 | - |
 | max | 允许输入的最大值 | - |
@@ -387,15 +389,15 @@ | type | 统计类型：'markdown', 'text' | 'markdown' |
 ```js
-// POST data  
-xhr.send(formData);  // formData = FormData.append("file[]", File)  
-// return data  
-{  
- "msg": "",  
- "code": 0,  
- "data": {  
- "errFiles": ['filename', 'filename2'],  
- "succMap": {  
-   "filename3": "filepath3",  
-   "filename3": "filepath3"  
-   }  
- }  
+// POST data
+xhr.send(formData);  // formData = FormData.append("file[]", File)
+// return data
+{
+ "msg": "",
+ "code": 0,
+ "data": {
+ "errFiles": ['filename', 'filename2'],
+ "succMap": {
+   "filename3": "filepath3",
+   "filename3": "filepath3"
+   }
+ }
 }
@@ -407,12 +409,12 @@ ```
 ```js
-// POST data  
-xhr.send(JSON.stringify({url: src})); // src 为站外图片地址  
-// return data  
-{  
- msg: '',  
- code: 0,  
- data : {  
-   originalURL: '',  
-   url: ''  
- }  
+// POST data
+xhr.send(JSON.stringify({url: src})); // src 为站外图片地址
+// return data
+{
+ msg: '',
+ code: 0,
+ data : {
+   originalURL: '',
+   url: ''
+ }
 }
@@ -497,2 +499,3 @@ ```
 | - | - |
+| exportJSON(markdown: string) | 根据 Markdown 获取对应 JSON |
 | getValue() | 获取 Markdown 内容 |
@@ -536,3 +539,3 @@ | getHTML() | 获取 HTML 内容 |
 ```js
-import VditorPreview from 'vditor/dist/method.min'  
+import VditorPreview from 'vditor/dist/method.min'
 VditorPreview.mermaidRender(document)
@@ -549,6 +552,6 @@ ```
   anchor?: number;  // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0
-  customEmoji?: { [key: string]: string };    // 自定义 emoji，默认为 {}  
-  lang?: (keyof II18nLang);    // 语言，默认为 'zh_CN'  
-  emojiPath?: string;    // 表情图片路径 
-  hljs?: IHljs; // 参见 options.preview.hljs 
+  customEmoji?: { [key: string]: string };    // 自定义 emoji，默认为 {}
+  lang?: (keyof II18nLang);    // 语言，默认为 'zh_CN'
+  emojiPath?: string;    // 表情图片路径
+  hljs?: IHljs; // 参见 options.preview.hljs
   speech?: {  // 对选中后的内容进行阅读
@@ -575,3 +578,3 @@ enable?: boolean,
 | flowchartRender(element: HTMLElement, cdn = options.cdn) | flowchart 渲染 |
-| codeRender(element: HTMLElement, lang: (keyof II18nLang) = "zh_CN") | 为 element 中的代码块添加复制按钮 |
+| codeRender(element: HTMLElement) | 为 element 中的代码块添加复制按钮 |
 | chartRender(element: (HTMLElement \| Document) = document, cdn = options.cdn, theme = options.theme) | 图表渲染 |
@@ -578,0 +581,0 @@ | mindmapRender(element: (HTMLElement \| Document) = document, cdn = options.cdn, theme = options.theme) | 脑图渲染 |

src/index.ts

@@ -6,3 +6,2 @@ import "./assets/scss/index.scss";
 import {Hint} from "./ts/hint/index";
-import {i18n} from "./ts/i18n/index";
 import {IR} from "./ts/ir/index";
@@ -14,3 +13,3 @@ import {input as irInput} from "./ts/ir/input";
 import {setLute} from "./ts/markdown/setLute";
-import {Outline} from "./ts/outline";
+import {Outline} from "./ts/outline/index";
 import {Preview} from "./ts/preview/index";
@@ -21,3 +20,3 @@ import {Resize} from "./ts/resize/index";
 import {processAfterRender as processSVAfterRender} from "./ts/sv/process";
-import {Tip} from "./ts/tip";
+import {Tip} from "./ts/tip/index";
 import {Toolbar} from "./ts/toolbar/index";
@@ -31,3 +30,3 @@ import {disableToolbar, hidePanel} from "./ts/toolbar/setToolbar";
 import {setTheme} from "./ts/ui/setTheme";
-import {Undo} from "./ts/undo";
+import {Undo} from "./ts/undo/index";
 import {Upload} from "./ts/upload/index";
@@ -39,4 +38,4 @@ import {addScript, addScriptSync} from "./ts/util/addScript";
 import {getCursorPosition, getEditorRange} from "./ts/util/selection";
-import {WYSIWYG} from "./ts/wysiwyg";
 import {afterRenderEvent} from "./ts/wysiwyg/afterRenderEvent";
+import {WYSIWYG} from "./ts/wysiwyg/index";
 import {input} from "./ts/wysiwyg/input";
@@ -46,3 +45,2 @@ import {renderDomByMd} from "./ts/wysiwyg/renderDomByMd";
 class Vditor extends VditorMethod {
-
     public readonly version: string;
@@ -77,72 +75,26 @@ public vditor: IVditor;
 
-        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");
+        // 支持自定义国际化
+        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 {
+                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript").then(() => {
+                    this.init(id as HTMLElement, mergedOptions);
+                });
+            }
+        } else {
+            window.VditorI18n = mergedOptions.i18n;
+            this.init(id, mergedOptions);
         }
-
-        this.vditor = {
-            currentMode: mergedOptions.mode,
-            element: id,
-            hint: new Hint(mergedOptions.hint.extend),
-            lute: undefined,
-            options: mergedOptions,
-            originalInnerHTML: id.innerHTML,
-            outline: new Outline(i18n[mergedOptions.lang].outline),
-            tip: new Tip(),
-        };
-
-        this.vditor.sv = new Editor(this.vditor);
-        this.vditor.undo = new Undo();
-        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
-        this.vditor.ir = new IR(this.vditor);
-        this.vditor.toolbar = new Toolbar(this.vditor);
-
-        if (mergedOptions.resize.enable) {
-            this.vditor.resize = new Resize(this.vditor);
-        }
-
-        if (this.vditor.toolbar.elements.devtools) {
-            this.vditor.devtools = new DevTools();
-        }
-
-        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
-            this.vditor.upload = new Upload();
-        }
-
-        addScript(options._lutePath || `${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript")
-            .then(() => {
-                this.vditor.lute = setLute({
-                    autoSpace: this.vditor.options.preview.markdown.autoSpace,
-                    codeBlockPreview: this.vditor.options.preview.markdown.codeBlockPreview,
-                    emojiSite: this.vditor.options.hint.emojiPath,
-                    emojis: this.vditor.options.hint.emoji,
-                    fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
-                    footnotes: this.vditor.options.preview.markdown.footnotes,
-                    headingAnchor: false,
-                    inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
-                    linkBase: this.vditor.options.preview.markdown.linkBase,
-                    linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
-                    listStyle: this.vditor.options.preview.markdown.listStyle,
-                    mark: this.vditor.options.preview.markdown.mark,
-                    mathBlockPreview: this.vditor.options.preview.markdown.mathBlockPreview,
-                    paragraphBeginningSpace: this.vditor.options.preview.markdown.paragraphBeginningSpace,
-                    sanitize: this.vditor.options.preview.markdown.sanitize,
-                    toc: this.vditor.options.preview.markdown.toc,
-                });
-
-                this.vditor.preview = new Preview(this.vditor);
-
-                initUI(this.vditor);
-
-                if (mergedOptions.after) {
-                    mergedOptions.after();
-                }
-                if (mergedOptions.icon) {
-                    // 防止初始化 2 个编辑器时加载 2 次
-                    addScriptSync(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
-                }
-            });
     }
 
     /** 设置主题 */
-    public setTheme(theme: "dark" | "classic", contentTheme?: string, codeTheme?: string, contentThemePath?: string) {
+    public setTheme(
+        theme: "dark" | "classic",
+        contentTheme?: string,
+        codeTheme?: string,
+        contentThemePath?: string,
+    ) {
         this.vditor.options.theme = theme;
@@ -195,5 +147,10 @@ setTheme(this.vditor);
         hidePanel(this.vditor, ["subToolbar", "hint", "popover"]);
-        disableToolbar(this.vditor.toolbar.elements, Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen",
-            "edit-mode"]));
-        this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "false");
+        disableToolbar(
+            this.vditor.toolbar.elements,
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
+        );
+        this.vditor[this.vditor.currentMode].element.setAttribute(
+            "contenteditable",
+            "false",
+        );
     }
@@ -203,4 +160,6 @@
     public enable() {
-        enableToolbar(this.vditor.toolbar.elements, Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen",
-            "edit-mode"]));
+        enableToolbar(
+            this.vditor.toolbar.elements,
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
+        );
         this.vditor.undo.resetIcon(this.vditor);
@@ -249,4 +208,5 @@ this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
         if (!this.vditor.options.cache.id) {
-            throw new Error("need options.cache.id, see https://ld246.com/article/1549638745630#options");
-            return;
+            throw new Error(
+                "need options.cache.id, see https://ld246.com/article/1549638745630#options",
+            );
         }
@@ -261,2 +221,7 @@ this.vditor.options.cache.enable = true;
 
+    /** markdown 转 JSON 输出 */
+    public exportJSON(value: string) {
+        return this.vditor.lute.RenderJSON(value);
+    }
+
     /** 获取 HTML */
@@ -332,4 +297,5 @@ public getHTML() {
             this.vditor.ir.element.innerHTML = this.vditor.lute.Md2VditorIRDOM(markdown);
-            this.vditor.ir.element.querySelectorAll(".vditor-ir__preview[data-render='2']").forEach(
-                (item: HTMLElement) => {
+            this.vditor.ir.element
+                .querySelectorAll(".vditor-ir__preview[data-render='2']")
+                .forEach((item: HTMLElement) => {
                     processCodeRender(item, this.vditor);
@@ -394,9 +360,13 @@ });
         };
-        this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-            hlItem(item);
-        });
-        if (this.vditor.preview.element.style.display !== "none") {
-            this.vditor.preview.element.querySelectorAll(".vditor-comment").forEach((item) => {
+        this.vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment")
+            .forEach((item) => {
                 hlItem(item);
             });
+        if (this.vditor.preview.element.style.display !== "none") {
+            this.vditor.preview.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    hlItem(item);
+                });
         }
@@ -417,9 +387,13 @@ }
         };
-        this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-            unHlItem(item);
-        });
-        if (this.vditor.preview.element.style.display !== "none") {
-            this.vditor.preview.element.querySelectorAll(".vditor-comment").forEach((item) => {
+        this.vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment")
+            .forEach((item) => {
                 unHlItem(item);
             });
+        if (this.vditor.preview.element.style.display !== "none") {
+            this.vditor.preview.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    unHlItem(item);
+                });
         }
@@ -450,9 +424,13 @@ }
         removeIds.forEach((removeId) => {
-            this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-                removeItem(item, removeId);
-            });
-            if (this.vditor.preview.element.style.display !== "none") {
-                this.vditor.preview.element.querySelectorAll(".vditor-comment").forEach((item) => {
+            this.vditor.wysiwyg.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
                     removeItem(item, removeId);
                 });
+            if (this.vditor.preview.element.style.display !== "none") {
+                this.vditor.preview.element
+                    .querySelectorAll(".vditor-comment")
+                    .forEach((item) => {
+                        removeItem(item, removeId);
+                    });
             }
@@ -466,4 +444,75 @@ });
     }
+
+    private init(id: HTMLElement, mergedOptions: IOptions) {
+        this.vditor = {
+            currentMode: mergedOptions.mode,
+            element: id,
+            hint: new Hint(mergedOptions.hint.extend),
+            lute: undefined,
+            options: mergedOptions,
+            originalInnerHTML: id.innerHTML,
+            outline: new Outline(window.VditorI18n.outline),
+            tip: new Tip(),
+        };
+
+        this.vditor.sv = new Editor(this.vditor);
+        this.vditor.undo = new Undo();
+        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
+        this.vditor.ir = new IR(this.vditor);
+        this.vditor.toolbar = new Toolbar(this.vditor);
+
+        if (mergedOptions.resize.enable) {
+            this.vditor.resize = new Resize(this.vditor);
+        }
+
+        if (this.vditor.toolbar.elements.devtools) {
+            this.vditor.devtools = new DevTools();
+        }
+
+        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
+            this.vditor.upload = new Upload();
+        }
+
+        addScript(
+            mergedOptions._lutePath ||
+            `${mergedOptions.cdn}/dist/js/lute/lute.min.js`,
+            "vditorLuteScript",
+        ).then(() => {
+            this.vditor.lute = setLute({
+                autoSpace: this.vditor.options.preview.markdown.autoSpace,
+                codeBlockPreview: this.vditor.options.preview.markdown
+                    .codeBlockPreview,
+                emojiSite: this.vditor.options.hint.emojiPath,
+                emojis: this.vditor.options.hint.emoji,
+                fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
+                footnotes: this.vditor.options.preview.markdown.footnotes,
+                headingAnchor: false,
+                inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
+                linkBase: this.vditor.options.preview.markdown.linkBase,
+                linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
+                listStyle: this.vditor.options.preview.markdown.listStyle,
+                mark: this.vditor.options.preview.markdown.mark,
+                mathBlockPreview: this.vditor.options.preview.markdown
+                    .mathBlockPreview,
+                paragraphBeginningSpace: this.vditor.options.preview.markdown
+                    .paragraphBeginningSpace,
+                sanitize: this.vditor.options.preview.markdown.sanitize,
+                toc: this.vditor.options.preview.markdown.toc,
+            });
+
+            this.vditor.preview = new Preview(this.vditor);
+
+            initUI(this.vditor);
+
+            if (mergedOptions.after) {
+                mergedOptions.after();
+            }
+            if (mergedOptions.icon) {
+                // 防止初始化 2 个编辑器时加载 2 次
+                addScriptSync(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+            }
+        });
+    }
 }
 
 export default Vditor;

src/method.ts

 import {abcRender} from "./ts/markdown/abcRender";
+import * as adapterRender from "./ts/markdown/adapterRender";
 import {chartRender} from "./ts/markdown/chartRender";
@@ -16,8 +17,11 @@ import {codeRender} from "./ts/markdown/codeRender";
 import {speechRender} from "./ts/markdown/speechRender";
-import { previewImage } from "./ts/preview/image";
-import { setCodeTheme } from "./ts/ui/setCodeTheme";
+import {previewImage} from "./ts/preview/image";
+import {setCodeTheme} from "./ts/ui/setCodeTheme";
 import {setContentTheme} from "./ts/ui/setContentTheme";
+
 class Vditor {
 
     /** 点击图片放大 */
+    public static adapterRender = adapterRender;
+    /** 点击图片放大 */
     public static previewImage = previewImage;
@@ -24,0 +28,0 @@ /** 为 element 中的代码块添加复制按钮 */

src/ts/export/index.ts

@@ -1,2 +0,1 @@
-import {i18n} from "../i18n";
 import {getHTML} from "../markdown/getHTML";
@@ -16,3 +15,3 @@ import {getMarkdown} from "../markdown/getMarkdown";
     } else {
-        vditor.tip.show(i18n[vditor.options.lang].downloadTip, 0);
+        vditor.tip.show(window.VditorI18n.downloadTip, 0);
     }
@@ -27,3 +26,3 @@ };
 export const exportPDF = (vditor: IVditor) => {
-    vditor.tip.show(i18n[vditor.options.lang].generate, 3800);
+    vditor.tip.show(window.VditorI18n.generate, 3800);
     const iframe = document.querySelector("iframe");
@@ -61,2 +60,3 @@ iframe.contentDocument.open();
     const html = `<html><head><link rel="stylesheet" type="text/css" href="${vditor.options.cdn}/dist/index.css"/>
+<script src="${vditor.options.cdn}/dist/js/i18n/${vditor.options.lang}.js"></script>
 <script src="${vditor.options.cdn}/dist/method.min.js"></script></head>
@@ -67,3 +67,3 @@ <body><div class="vditor-reset" id="preview">${content}</div>
     Vditor.setContentTheme('${vditor.options.preview.theme.current}', '${vditor.options.preview.theme.path}');
-    Vditor.codeRender(previewElement, '${vditor.options.lang}');
+    Vditor.codeRender(previewElement);
     Vditor.highlightRender(${JSON.stringify(vditor.options.preview.hljs)}, previewElement, '${vditor.options.cdn}');
@@ -81,4 +81,6 @@ Vditor.mathRender(previewElement, {
     Vditor.mediaRender(previewElement);
-</script></body></html>`;
+    Vditor.speechRender(previewElement);
+</script>
+<script src="${vditor.options.cdn}/dist/js/icons/${vditor.options.icon}.js"></script></body></html>`;
     download(vditor, html, content.substr(0, 10) + ".html");
 };

src/ts/markdown/abcRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {abcRenderAdapter} from "./adapterRender";
 
@@ -9,3 +10,3 @@ declare const ABCJS: {
 export const abcRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
-    const abcElements = element.querySelectorAll(".language-abc");
+    const abcElements = abcRenderAdapter.getElements(element);
     if (abcElements.length > 0) {
@@ -21,3 +22,3 @@ addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
                 }
-                ABCJS.renderAbc(item, item.textContent.trim());
+                ABCJS.renderAbc(item, abcRenderAdapter.getCode(item).trim());
                 item.style.overflowX = "auto";
@@ -24,0 +25,0 @@ item.setAttribute("data-processed", "true");

src/ts/markdown/chartRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {chartRenderAdapter} from "./adapterRender";
 
@@ -9,3 +10,3 @@ declare const echarts: {
 export const chartRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
-    const echartsElements = element.querySelectorAll(".language-echarts");
+    const echartsElements = chartRenderAdapter.getElements(element);
     if (echartsElements.length > 0) {
@@ -19,3 +20,3 @@ addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
 
-                const text = e.innerText.trim();
+                const text = chartRenderAdapter.getCode(e).trim();
                 if (!text) {
@@ -22,0 +23,0 @@ return;

src/ts/markdown/codeRender.ts

@@ -1,5 +0,4 @@
-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) => {
@@ -14,3 +13,3 @@ if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
             e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
-            e.classList.contains("language-math") ) {
+            e.classList.contains("language-math")) {
             return;
@@ -40,7 +39,7 @@ }
         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");
@@ -47,0 +46,0 @@ textarea.value = code160to32(codeText);

src/ts/markdown/flowchartRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {flowchartRenderAdapter} from "./adapterRender";
 
@@ -9,3 +10,3 @@ declare const flowchart: {
 export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const flowchartElements = element.querySelectorAll(".language-flowchart");
+    const flowchartElements = flowchartRenderAdapter.getElements(element);
     if (flowchartElements.length === 0) {
@@ -19,3 +20,3 @@ return;
             }
-            const flowchartObj = flowchart.parse(item.textContent);
+            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
             item.innerHTML = "";
@@ -22,0 +23,0 @@ flowchartObj.drawSVG(item);

src/ts/markdown/graphvizRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {graphvizRenderAdapter} from "./adapterRender";
 
@@ -7,7 +8,7 @@ declare class Viz {
 
-    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);
 
@@ -19,2 +20,3 @@ if (graphvizElements.length === 0) {
         graphvizElements.forEach((e: HTMLDivElement) => {
+            const code = graphvizRenderAdapter.getCode(e);
             if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
@@ -25,3 +27,3 @@ e.parentElement.classList.contains("vditor-ir__marker--pre")) {
 
-            if (e.getAttribute("data-processed") === "true" || e.textContent.trim() === "") {
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
@@ -32,13 +34,13 @@ }
                 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) {
@@ -45,0 +47,0 @@ console.error("graphviz error", e);

src/ts/markdown/mathRender.ts

@@ -5,2 +5,3 @@ import {Constants} from "../constants";
 import {code160to32} from "../util/code160to32";
+import {mathRenderAdapter} from "./adapterRender";
 
@@ -21,3 +22,3 @@ declare const katex: {
 export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
-    const mathElements = element.querySelectorAll(".language-math");
+    const mathElements = mathRenderAdapter.getElements(element);
 
@@ -54,3 +55,3 @@ if (mathElements.length === 0) {
                 }
-                const math = code160to32(mathElement.textContent);
+                const math = code160to32(mathRenderAdapter.getCode(mathElement));
                 mathElement.setAttribute("data-math", math);
@@ -93,3 +94,3 @@ try {
                 loader: {
-                    paths: {mathjax: `${options.cdn}/dist/js/mathjax`},
+                    paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
                 },
@@ -127,3 +128,3 @@ startup: {
         window.MathJax.startup.promise.then(() => {
-            const chains: any [] = [];
+            const chains: any[] = [];
             for (let i = 0; i < mathElements.length; i++) {
@@ -130,0 +131,0 @@ const mathElement = mathElements[i];

src/ts/markdown/mermaidRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {mermaidRenderAdapter} from "./adapterRender";
 
@@ -10,3 +11,3 @@ 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) {
@@ -119,3 +120,4 @@ return;
         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;
@@ -122,0 +124,0 @@ }

src/ts/markdown/mindmapRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {mindmapRenderAdapter} from "./adapterRender";
 
@@ -9,3 +10,3 @@ declare const echarts: {
 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) {
@@ -18,3 +19,3 @@ addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
                 }
-                const text = e.getAttribute("data-code");
+                const text = mindmapRenderAdapter.getCode(e);
                 if (!text) {
@@ -21,0 +22,0 @@ return;

src/ts/markdown/plantumlRender.ts

 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {plantumlRenderAdapter} from "./adapterRender";
 
@@ -9,3 +10,3 @@ declare const plantumlEncoder: {
 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) {
@@ -20,3 +21,3 @@ return;
             }
-            const text = e.textContent.trim();
+            const text = plantumlRenderAdapter.getCode(e).trim();
             if (!text) {
@@ -23,0 +24,0 @@ return;

src/ts/markdown/previewRender.ts

 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";
@@ -27,3 +27,5 @@ import {merge} from "../util/merge";
         customEmoji: {},
-        emojiPath: `${(options && options.emojiPath) || Constants.CDN}/dist/images/emoji`,
+        emojiPath: `${
+            (options && options.emojiPath) || Constants.CDN
+        }/dist/images/emoji`,
         hljs: Constants.HLJS_OPTIONS,
@@ -85,2 +87,15 @@ icon: "ant",
     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 {
+            addScriptSync(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript");
+        }
+    } else {
+        window.VditorI18n = mergedOptions.i18n;
+    }
+
     setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
@@ -90,3 +105,3 @@ if (mergedOptions.anchor === 1) {
     }
-    codeRender(previewElement, mergedOptions.lang);
+    codeRender(previewElement);
     highlightRender(mergedOptions.hljs, previewElement, mergedOptions.cdn);
@@ -106,3 +121,3 @@ mathRender(previewElement, {
     if (mergedOptions.speech.enable) {
-        speechRender(previewElement, mergedOptions.lang);
+        speechRender(previewElement);
     }
@@ -109,0 +124,0 @@ if (mergedOptions.anchor !== 0) {

src/ts/preview/image.ts

@@ -1,3 +0,1 @@
-import {i18n} from "../i18n";
-
 export const previewImage = (oldImgElement: HTMLImageElement, lang: keyof II18n = "zh_CN", theme = "classic") => {
@@ -10,6 +8,6 @@ const oldImgRect = oldImgElement.getBoundingClientRect();
         <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>
@@ -16,0 +14,0 @@ </div>

src/ts/preview/index.ts

@@ -1,2 +0,1 @@
-import {i18n} from "../i18n/index";
 import {abcRender} from "../markdown/abcRender";
@@ -202,4 +201,3 @@ import {chartRender} from "../markdown/chartRender";
             // 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");
@@ -214,3 +212,3 @@ } else if (vditor.preview.element.getAttribute("data-type") === "renderPerformance") {
         }
-        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,
@@ -217,0 +215,0 @@ vditor.options.cdn);

src/ts/toolbar/EditMode.ts

 import {Constants} from "../constants";
-import {i18n} from "../i18n";
 import {processAfterRender} from "../ir/process";
@@ -160,5 +159,5 @@ import {getMarkdown} from "../markdown/getMarkdown";
         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>`;
 
@@ -165,0 +164,0 @@ this.element.appendChild(panelElement);

src/ts/toolbar/Headings.ts

@@ -18,8 +18,8 @@ import {Constants} from "../constants";
         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>`;
 
@@ -26,0 +26,0 @@ this.element.appendChild(panelElement);

src/ts/toolbar/MenuItem.ts

 import {Constants} from "../constants";
-import {i18n} from "../i18n/index";
 import {processToolbar} from "../ir/process";
@@ -22,4 +21,3 @@ import {processToolbar as processToolbarSV} from "../sv/process";
         }
-        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";
@@ -26,0 +24,0 @@ if (menuItem.level === 2) {

src/ts/toolbar/Record.ts

 import {Constants} from "../constants";
-import {i18n} from "../i18n/index";
 import {uploadFiles} from "../upload/index";
@@ -37,7 +36,7 @@ import {getEventName} from "../util/compatibility";
                     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"]);
                 });
@@ -55,3 +54,3 @@ return;
             } else {
-                vditor.tip.show(i18n[vditor.options.lang].recording);
+                vditor.tip.show(window.VditorI18n.recording);
                 editorElement.setAttribute("contenteditable", "false");
@@ -58,0 +57,0 @@ mediaRecorder.startRecordingNewWavFile();

src/ts/upload/index.ts

@@ -1,2 +0,1 @@
-import {i18n} from "../i18n/index";
 import {getEditorRange, setSelectionFocus} from "../util/selection";
@@ -23,3 +22,4 @@ import {getElement} from "./getElement";
     let uploadingStr = "";
-    const lang: keyof II18n = vditor.options.lang;
+    const lang: keyof II18n | "" = vditor.options.lang;
+    const options: IOptions = vditor.options;
 
@@ -31,3 +31,3 @@ for (let iMax = files.length, i = 0; i < iMax; i++) {
         if (!file.name) {
-            errorTip += `<li>${i18n[lang].nameEmpty}</li>`;
+            errorTip += `<li>${window.VditorI18n.nameEmpty}</li>`;
             validate = false;
@@ -37,3 +37,3 @@ }
         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;
@@ -62,3 +62,3 @@ }
             if (!isAccept) {
-                errorTip += `<li>${file.name} ${i18n[lang].fileTypeError}</li>`;
+                errorTip += `<li>${file.name} ${window.VditorI18n.fileTypeError}</li>`;
                 validate = false;
@@ -70,3 +70,3 @@ }
             uploadFileList.push(file);
-            uploadingStr += `<li>${filename} ${i18n[lang].uploading}</li>`;
+            uploadingStr += `<li>${filename} ${window.VditorI18n.uploading}</li>`;
         }
@@ -95,3 +95,3 @@ }
             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>`;
         });
@@ -98,0 +98,0 @@ errorTip += "</ul>";

src/ts/util/Options.ts

@@ -1,3 +0,3 @@
-import {Constants} from "../constants";
-import {merge} from "./merge";
+import { Constants } from "../constants";
+import { merge } from "./merge";
 
@@ -109,3 +109,4 @@ export class Options {
                 ],
-            }],
+            },
+        ],
         toolbarConfig: {
@@ -156,3 +157,5 @@ hide: false,
         if (mergedOptions.cache.enable && !mergedOptions.cache.id) {
-            throw new Error("need options.cache.id, see https://ld246.com/article/1549638745630#options");
+            throw new Error(
+                "need options.cache.id, see https://ld246.com/article/1549638745630#options",
+            );
         }
@@ -164,192 +167,242 @@
     private mergeToolbar(toolbar: Array<string | IMenuItem>) {
-        const toolbarItem = [{
-            icon: '<svg><use xlink:href="#vditor-icon-export"></use></svg>',
-            name: "export",
-            tipPosition: "ne",
-        }, {
-            hotkey: "⌘E",
-            icon: '<svg><use xlink:href="#vditor-icon-emoji"></use></svg>',
-            name: "emoji",
-            tipPosition: "ne",
-        }, {
-            hotkey: "⌘H",
-            icon: '<svg><use xlink:href="#vditor-icon-headings"></use></svg>',
-            name: "headings",
-            tipPosition: "ne",
-        }, {
-            hotkey: "⌘B",
-            icon: '<svg><use xlink:href="#vditor-icon-bold"></use></svg>',
-            name: "bold",
-            prefix: "**",
-            suffix: "**",
-            tipPosition: "ne",
-        }, {
-            hotkey: "⌘I",
-            icon: '<svg><use xlink:href="#vditor-icon-italic"></use></svg>',
-            name: "italic",
-            prefix: "*",
-            suffix: "*",
-            tipPosition: "ne",
-        }, {
-            hotkey: "⌘D",
-            icon: '<svg><use xlink:href="#vditor-icon-strike"></use></svg>',
-            name: "strike",
-            prefix: "~~",
-            suffix: "~~",
-            tipPosition: "ne",
-        }, {
-            hotkey: "⌘K",
-            icon: '<svg><use xlink:href="#vditor-icon-link"></use></svg>',
-            name: "link",
-            prefix: "[",
-            suffix: "](https://)",
-            tipPosition: "n",
-        }, {
-            name: "|",
-        }, {
-            hotkey: "⌘L",
-            icon: '<svg><use xlink:href="#vditor-icon-list"></use></svg>',
-            name: "list",
-            prefix: "* ",
-            tipPosition: "n",
-        }, {
-            hotkey: "⌘O",
-            icon: '<svg><use xlink:href="#vditor-icon-ordered-list"></use></svg>',
-            name: "ordered-list",
-            prefix: "1. ",
-            tipPosition: "n",
-        }, {
-            hotkey: "⌘J",
-            icon: '<svg><use xlink:href="#vditor-icon-check"></use></svg>',
-            name: "check",
-            prefix: "* [ ] ",
-            tipPosition: "n",
-        }, {
-            hotkey: "⇧⌘I",
-            icon: '<svg><use xlink:href="#vditor-icon-outdent"></use></svg>',
-            name: "outdent",
-            tipPosition: "n",
-        }, {
-            hotkey: "⇧⌘O",
-            icon: '<svg><use xlink:href="#vditor-icon-indent"></use></svg>',
-            name: "indent",
-            tipPosition: "n",
-        }, {
-            name: "|",
-        }, {
-            hotkey: "⌘;",
-            icon: '<svg><use xlink:href="#vditor-icon-quote"></use></svg>',
-            name: "quote",
-            prefix: "> ",
-            tipPosition: "n",
-        }, {
-            hotkey: "⇧⌘H",
-            icon: '<svg><use xlink:href="#vditor-icon-line"></use></svg>',
-            name: "line",
-            prefix: "---",
-            tipPosition: "n",
-        }, {
-            hotkey: "⌘U",
-            icon: '<svg><use xlink:href="#vditor-icon-code"></use></svg>',
-            name: "code",
-            prefix: "```",
-            suffix: "\n```",
-            tipPosition: "n",
-        }, {
-            hotkey: "⌘G",
-            icon: '<svg><use xlink:href="#vditor-icon-inline-code"></use></svg>',
-            name: "inline-code",
-            prefix: "`",
-            suffix: "`",
-            tipPosition: "n",
-        }, {
-            hotkey: "⇧⌘B",
-            icon: '<svg><use xlink:href="#vditor-icon-before"></use></svg>',
-            name: "insert-before",
-            tipPosition: "n",
-        }, {
-            hotkey: "⇧⌘E",
-            icon: '<svg><use xlink:href="#vditor-icon-after"></use></svg>',
-            name: "insert-after",
-            tipPosition: "n",
-        }, {
-            name: "|",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-upload"></use></svg>',
-            name: "upload",
-            tipPosition: "n",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-record"></use></svg>',
-            name: "record",
-            tipPosition: "n",
-        }, {
-            hotkey: "⌘M",
-            icon: '<svg><use xlink:href="#vditor-icon-table"></use></svg>',
-            name: "table",
-            prefix: "| col1",
-            suffix: " | col2 | col3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |",
-            tipPosition: "n",
-        }, {
-            name: "|",
-        }, {
-            hotkey: "⌘Z",
-            icon: '<svg><use xlink:href="#vditor-icon-undo"></use></svg>',
-            name: "undo",
-            tipPosition: "nw",
-        }, {
-            hotkey: "⌘Y",
-            icon: '<svg><use xlink:href="#vditor-icon-redo"></use></svg>',
-            name: "redo",
-            tipPosition: "nw",
-        }, {
-            name: "|",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-more"></use></svg>',
-            name: "more",
-            tipPosition: "e",
-        }, {
-            hotkey: "⌘'",
-            icon: '<svg><use xlink:href="#vditor-icon-fullscreen"></use></svg>',
-            name: "fullscreen",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-edit"></use></svg>',
-            name: "edit-mode",
-            tipPosition: "nw",
-        }, {
-            hotkey: "⌘P",
-            icon: '<svg><use xlink:href="#vditor-icon-both"></use></svg>',
-            name: "both",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-preview"></use></svg>',
-            name: "preview",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-align-center"></use></svg>',
-            name: "outline",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-theme"></use></svg>',
-            name: "content-theme",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-code-theme"></use></svg>',
-            name: "code-theme",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-bug"></use></svg>',
-            name: "devtools",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-info"></use></svg>',
-            name: "info",
-            tipPosition: "nw",
-        }, {
-            icon: '<svg><use xlink:href="#vditor-icon-help"></use></svg>',
-            name: "help",
-            tipPosition: "nw",
-        }, {
-            name: "br",
-        }];
+        const toolbarItem = [
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-export"></use></svg>',
+                name: "export",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘E",
+                icon: '<svg><use xlink:href="#vditor-icon-emoji"></use></svg>',
+                name: "emoji",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘H",
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-headings"></use></svg>',
+                name: "headings",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘B",
+                icon: '<svg><use xlink:href="#vditor-icon-bold"></use></svg>',
+                name: "bold",
+                prefix: "**",
+                suffix: "**",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘I",
+                icon: '<svg><use xlink:href="#vditor-icon-italic"></use></svg>',
+                name: "italic",
+                prefix: "*",
+                suffix: "*",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘D",
+                icon: '<svg><use xlink:href="#vditor-icon-strike"></use></svg>',
+                name: "strike",
+                prefix: "~~",
+                suffix: "~~",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘K",
+                icon: '<svg><use xlink:href="#vditor-icon-link"></use></svg>',
+                name: "link",
+                prefix: "[",
+                suffix: "](https://)",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                hotkey: "⌘L",
+                icon: '<svg><use xlink:href="#vditor-icon-list"></use></svg>',
+                name: "list",
+                prefix: "* ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘O",
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-ordered-list"></use></svg>',
+                name: "ordered-list",
+                prefix: "1. ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘J",
+                icon: '<svg><use xlink:href="#vditor-icon-check"></use></svg>',
+                name: "check",
+                prefix: "* [ ] ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘I",
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-outdent"></use></svg>',
+                name: "outdent",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘O",
+                icon: '<svg><use xlink:href="#vditor-icon-indent"></use></svg>',
+                name: "indent",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                hotkey: "⌘;",
+                icon: '<svg><use xlink:href="#vditor-icon-quote"></use></svg>',
+                name: "quote",
+                prefix: "> ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘H",
+                icon: '<svg><use xlink:href="#vditor-icon-line"></use></svg>',
+                name: "line",
+                prefix: "---",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘U",
+                icon: '<svg><use xlink:href="#vditor-icon-code"></use></svg>',
+                name: "code",
+                prefix: "```",
+                suffix: "\n```",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘G",
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-inline-code"></use></svg>',
+                name: "inline-code",
+                prefix: "`",
+                suffix: "`",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘B",
+                icon: '<svg><use xlink:href="#vditor-icon-before"></use></svg>',
+                name: "insert-before",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘E",
+                icon: '<svg><use xlink:href="#vditor-icon-after"></use></svg>',
+                name: "insert-after",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-upload"></use></svg>',
+                name: "upload",
+                tipPosition: "n",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-record"></use></svg>',
+                name: "record",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘M",
+                icon: '<svg><use xlink:href="#vditor-icon-table"></use></svg>',
+                name: "table",
+                prefix: "| col1",
+                suffix:
+                    " | col2 | col3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                hotkey: "⌘Z",
+                icon: '<svg><use xlink:href="#vditor-icon-undo"></use></svg>',
+                name: "undo",
+                tipPosition: "nw",
+            },
+            {
+                hotkey: "⌘Y",
+                icon: '<svg><use xlink:href="#vditor-icon-redo"></use></svg>',
+                name: "redo",
+                tipPosition: "nw",
+            },
+            {
+                name: "|",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-more"></use></svg>',
+                name: "more",
+                tipPosition: "e",
+            },
+            {
+                hotkey: "⌘'",
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-fullscreen"></use></svg>',
+                name: "fullscreen",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-edit"></use></svg>',
+                name: "edit-mode",
+                tipPosition: "nw",
+            },
+            {
+                hotkey: "⌘P",
+                icon: '<svg><use xlink:href="#vditor-icon-both"></use></svg>',
+                name: "both",
+                tipPosition: "nw",
+            },
+            {
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-preview"></use></svg>',
+                name: "preview",
+                tipPosition: "nw",
+            },
+            {
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-align-center"></use></svg>',
+                name: "outline",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-theme"></use></svg>',
+                name: "content-theme",
+                tipPosition: "nw",
+            },
+            {
+                icon:
+                    '<svg><use xlink:href="#vditor-icon-code-theme"></use></svg>',
+                name: "code-theme",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-bug"></use></svg>',
+                name: "devtools",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-info"></use></svg>',
+                name: "info",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-help"></use></svg>',
+                name: "help",
+                tipPosition: "nw",
+            },
+            {
+                name: "br",
+            },
+        ];
         const toolbarResult: IMenuItem[] = [];
@@ -359,6 +412,12 @@ toolbar.forEach((menuItem: IMenuItem) => {
             toolbarItem.forEach((defaultMenuItem: IMenuItem) => {
-                if (typeof menuItem === "string" && defaultMenuItem.name === menuItem) {
+                if (
+                    typeof menuItem === "string" &&
+                    defaultMenuItem.name === menuItem
+                ) {
                     currentMenuItem = defaultMenuItem;
                 }
-                if (typeof menuItem === "object" && defaultMenuItem.name === menuItem.name) {
+                if (
+                    typeof menuItem === "object" &&
+                    defaultMenuItem.name === menuItem.name
+                ) {
                     currentMenuItem = Object.assign({}, defaultMenuItem, menuItem);
@@ -365,0 +424,0 @@ }

src/ts/util/processCode.ts

@@ -86,3 +86,3 @@ import {abcRender} from "../markdown/abcRender";
         highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
-        codeRender(previewPanel, vditor.options.lang);
+        codeRender(previewPanel);
     }
@@ -89,0 +89,0 @@

src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

 import {Constants} from "../constants";
-import {i18n} from "../i18n";
 import {disableToolbar} from "../toolbar/setToolbar";
@@ -22,5 +21,13 @@ import {enableToolbar} from "../toolbar/setToolbar";
 } from "../util/hasClosest";
-import {hasClosestByHeadings, hasClosestByTag} from "../util/hasClosestByHeadings";
+import {
+    hasClosestByHeadings,
+    hasClosestByTag,
+} from "../util/hasClosestByHeadings";
 import {processCodeRender} from "../util/processCode";
-import {getEditorRange, selectIsEditor, setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {
+    getEditorRange,
+    selectIsEditor,
+    setRangeByWbr,
+    setSelectionFocus,
+} from "../util/selection";
 import {afterRenderEvent} from "./afterRenderEvent";
@@ -32,3 +39,5 @@ import {removeBlockElement} from "./processKeydown";
     vditor.wysiwyg.hlToolbarTimeoutId = window.setTimeout(() => {
-        if (vditor.wysiwyg.element.getAttribute("contenteditable") === "false") {
+        if (
+            vditor.wysiwyg.element.getAttribute("contenteditable") === "false"
+        ) {
             return;
@@ -48,4 +57,7 @@ }
         } else {
-            typeElement = typeElement.childNodes[range.startOffset >= typeElement.childNodes.length ?
-                typeElement.childNodes.length - 1 : range.startOffset] as HTMLElement;
+            typeElement = typeElement.childNodes[
+                range.startOffset >= typeElement.childNodes.length
+                    ? typeElement.childNodes.length - 1
+                    : range.startOffset
+                ] as HTMLElement;
         }
@@ -80,11 +92,20 @@
 
-        if (hasClosestByMatchTag(typeElement, "B") || hasClosestByMatchTag(typeElement, "STRONG")) {
+        if (
+            hasClosestByMatchTag(typeElement, "B") ||
+            hasClosestByMatchTag(typeElement, "STRONG")
+        ) {
             setCurrentToolbar(vditor.toolbar.elements, ["bold"]);
         }
 
-        if (hasClosestByMatchTag(typeElement, "I") || hasClosestByMatchTag(typeElement, "EM")) {
+        if (
+            hasClosestByMatchTag(typeElement, "I") ||
+            hasClosestByMatchTag(typeElement, "EM")
+        ) {
             setCurrentToolbar(vditor.toolbar.elements, ["italic"]);
         }
 
-        if (hasClosestByMatchTag(typeElement, "STRIKE") || hasClosestByMatchTag(typeElement, "S")) {
+        if (
+            hasClosestByMatchTag(typeElement, "STRIKE") ||
+            hasClosestByMatchTag(typeElement, "S")
+        ) {
             setCurrentToolbar(vditor.toolbar.elements, ["strike"]);
@@ -94,5 +115,7 @@ }
         // comments
-        vditor.wysiwyg.element.querySelectorAll(".vditor-comment--focus").forEach((item) => {
-            item.classList.remove("vditor-comment--focus");
-        });
+        vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment--focus")
+            .forEach((item) => {
+                item.classList.remove("vditor-comment--focus");
+            });
         const commentElement = hasClosestByClassName(typeElement, "vditor-comment");
@@ -102,3 +125,5 @@ if (commentElement) {
             if (ids.length > 1 && commentElement.nextSibling.isSameNode(commentElement.nextElementSibling)) {
-                const nextIds = commentElement.nextElementSibling.getAttribute("data-cmtids").split(" ");
+                const nextIds = commentElement.nextElementSibling
+                    .getAttribute("data-cmtids")
+                    .split(" ");
                 ids.find((id) => {
@@ -111,7 +136,9 @@ if (nextIds.includes(id)) {
             }
-            vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-                if (item.getAttribute("data-cmtids").indexOf(ids[0]) > -1) {
-                    item.classList.add("vditor-comment--focus");
-                }
-            });
+            vditor.wysiwyg.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    if (item.getAttribute("data-cmtids").indexOf(ids[0]) > -1) {
+                        item.classList.add("vditor-comment--focus");
+                    }
+                });
         }
@@ -127,8 +154,37 @@
             if (hasClosestByMatchTag(typeElement, "PRE")) {
-                disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
-                    "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"]);
+                disableToolbar(vditor.toolbar.elements, [
+                    "headings",
+                    "bold",
+                    "italic",
+                    "strike",
+                    "line",
+                    "quote",
+                    "list",
+                    "ordered-list",
+                    "check",
+                    "code",
+                    "inline-code",
+                    "upload",
+                    "link",
+                    "table",
+                    "record",
+                ]);
                 setCurrentToolbar(vditor.toolbar.elements, ["code"]);
             } else {
-                disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
-                    "list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
+                disableToolbar(vditor.toolbar.elements, [
+                    "headings",
+                    "bold",
+                    "italic",
+                    "strike",
+                    "line",
+                    "quote",
+                    "list",
+                    "ordered-list",
+                    "check",
+                    "code",
+                    "upload",
+                    "link",
+                    "table",
+                    "record",
+                ]);
                 setCurrentToolbar(vditor.toolbar.elements, ["inline-code"]);
@@ -175,2 +231,4 @@ }
         if (tableElement) {
+            const lang: keyof II18n | "" = vditor.options.lang;
+            const options: IOptions = vditor.options;
             vditor.wysiwyg.popover.innerHTML = "";
@@ -215,5 +273,9 @@ const updateTable = () => {
                             if (tableElement.querySelector("tbody")) {
-                                tableElement.querySelector("tbody").insertAdjacentHTML("beforeend", rowHTML);
+                                tableElement
+                                    .querySelector("tbody")
+                                    .insertAdjacentHTML("beforeend", rowHTML);
                             } else {
-                                tableElement.querySelector("thead").insertAdjacentHTML("afterend", rowHTML + "</tr>");
+                                tableElement
+                                    .querySelector("thead")
+                                    .insertAdjacentHTML("afterend", rowHTML + "</tr>");
                             }
@@ -262,7 +324,8 @@ }
             left.setAttribute("type", "button");
-            left.setAttribute("aria-label", i18n[vditor.options.lang].alignLeft +
-                "<" + updateHotkeyTip("⇧⌘L") + ">");
+            left.setAttribute("aria-label", window.VditorI18n.alignLeft + "<" + updateHotkeyTip("⇧⌘L") + ">");
             left.setAttribute("data-type", "left");
-            left.innerHTML = '<svg><use xlink:href="#vditor-icon-align-left"></use></svg>';
-            left.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n" +
+            left.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-align-left"></use></svg>';
+            left.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n" +
                 (alignType === "left" ? " vditor-icon--current" : "");
@@ -275,7 +338,8 @@ left.onclick = () => {
             center.setAttribute("type", "button");
-            center.setAttribute("aria-label", i18n[vditor.options.lang].alignCenter +
-                "<" + updateHotkeyTip("⇧⌘C") + ">");
+            center.setAttribute("aria-label", window.VditorI18n.alignCenter + "<" + updateHotkeyTip("⇧⌘C") + ">");
             center.setAttribute("data-type", "center");
-            center.innerHTML = '<svg><use xlink:href="#vditor-icon-align-center"></use></svg>';
-            center.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n" +
+            center.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-align-center"></use></svg>';
+            center.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n" +
                 (alignType === "center" ? " vditor-icon--current" : "");
@@ -288,7 +352,8 @@ center.onclick = () => {
             right.setAttribute("type", "button");
-            right.setAttribute("aria-label", i18n[vditor.options.lang].alignRight +
-                "<" + updateHotkeyTip("⇧⌘R") + ">");
+            right.setAttribute("aria-label", window.VditorI18n.alignRight + "<" + updateHotkeyTip("⇧⌘R") + ">");
             right.setAttribute("data-type", "right");
-            right.innerHTML = '<svg><use xlink:href="#vditor-icon-align-right"></use></svg>';
-            right.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n" +
+            right.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-align-right"></use></svg>';
+            right.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n" +
                 (alignType === "right" ? " vditor-icon--current" : "");
@@ -301,10 +366,13 @@ right.onclick = () => {
             insertRowElement.setAttribute("type", "button");
-            insertRowElement.setAttribute("aria-label", i18n[vditor.options.lang].insertRowBelow +
-                "<" + updateHotkeyTip("⌘=") + ">");
+            insertRowElement.setAttribute("aria-label", window.VditorI18n.insertRowBelow + "<" + updateHotkeyTip("⌘=") + ">");
             insertRowElement.setAttribute("data-type", "insertRow");
-            insertRowElement.innerHTML = '<svg><use xlink:href="#vditor-icon-insert-row"></use></svg>';
-            insertRowElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+            insertRowElement.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-insert-row"></use></svg>';
+            insertRowElement.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             insertRowElement.onclick = () => {
-                const startContainer = getSelection().getRangeAt(0).startContainer;
-                const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+                const startContainer = getSelection().getRangeAt(0)
+                    .startContainer;
+                const cellElement =
+                    hasClosestByMatchTag(startContainer, "TD") ||
                     hasClosestByMatchTag(startContainer, "TH");
@@ -318,10 +386,14 @@ if (cellElement) {
             insertRowBElement.setAttribute("type", "button");
-            insertRowBElement.setAttribute("aria-label", i18n[vditor.options.lang].insertRowAbove +
-                "<" + updateHotkeyTip("⇧⌘F") + ">");
+            insertRowBElement.setAttribute("aria-label",
+                window.VditorI18n.insertRowAbove + "<" + updateHotkeyTip("⇧⌘F") + ">");
             insertRowBElement.setAttribute("data-type", "insertRow");
-            insertRowBElement.innerHTML = '<svg><use xlink:href="#vditor-icon-insert-rowb"></use></svg>';
-            insertRowBElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+            insertRowBElement.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-insert-rowb"></use></svg>';
+            insertRowBElement.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             insertRowBElement.onclick = () => {
-                const startContainer = getSelection().getRangeAt(0).startContainer;
-                const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+                const startContainer = getSelection().getRangeAt(0)
+                    .startContainer;
+                const cellElement =
+                    hasClosestByMatchTag(startContainer, "TD") ||
                     hasClosestByMatchTag(startContainer, "TH");
@@ -335,10 +407,13 @@ if (cellElement) {
             insertColumnElement.setAttribute("type", "button");
-            insertColumnElement.setAttribute("aria-label", i18n[vditor.options.lang].insertColumnRight +
-                "<" + updateHotkeyTip("⇧⌘=") + ">");
+            insertColumnElement.setAttribute("aria-label", window.VditorI18n.insertColumnRight + "<" + updateHotkeyTip("⇧⌘=") + ">");
             insertColumnElement.setAttribute("data-type", "insertColumn");
-            insertColumnElement.innerHTML = '<svg><use xlink:href="#vditor-icon-insert-column"></use></svg>';
-            insertColumnElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+            insertColumnElement.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-insert-column"></use></svg>';
+            insertColumnElement.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             insertColumnElement.onclick = () => {
-                const startContainer = getSelection().getRangeAt(0).startContainer;
-                const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+                const startContainer = getSelection().getRangeAt(0)
+                    .startContainer;
+                const cellElement =
+                    hasClosestByMatchTag(startContainer, "TD") ||
                     hasClosestByMatchTag(startContainer, "TH");
@@ -352,10 +427,13 @@ if (cellElement) {
             insertColumnBElement.setAttribute("type", "button");
-            insertColumnBElement.setAttribute("aria-label", i18n[vditor.options.lang].insertColumnLeft +
-                "<" + updateHotkeyTip("⇧⌘G") + ">");
+            insertColumnBElement.setAttribute("aria-label", window.VditorI18n.insertColumnLeft + "<" + updateHotkeyTip("⇧⌘G") + ">");
             insertColumnBElement.setAttribute("data-type", "insertColumn");
-            insertColumnBElement.innerHTML = '<svg><use xlink:href="#vditor-icon-insert-columnb"></use></svg>';
-            insertColumnBElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+            insertColumnBElement.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-insert-columnb"></use></svg>';
+            insertColumnBElement.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             insertColumnBElement.onclick = () => {
-                const startContainer = getSelection().getRangeAt(0).startContainer;
-                const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+                const startContainer = getSelection().getRangeAt(0)
+                    .startContainer;
+                const cellElement =
+                    hasClosestByMatchTag(startContainer, "TD") ||
                     hasClosestByMatchTag(startContainer, "TH");
@@ -369,10 +447,13 @@ if (cellElement) {
             deleteRowElement.setAttribute("type", "button");
-            deleteRowElement.setAttribute("aria-label", i18n[vditor.options.lang]["delete-row"] +
-                "<" + updateHotkeyTip("⌘-") + ">");
+            deleteRowElement.setAttribute("aria-label", window.VditorI18n["delete-row"] + "<" + updateHotkeyTip("⌘-") + ">");
             deleteRowElement.setAttribute("data-type", "deleteRow");
-            deleteRowElement.innerHTML = '<svg><use xlink:href="#vditor-icon-delete-row"></use></svg>';
-            deleteRowElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+            deleteRowElement.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-delete-row"></use></svg>';
+            deleteRowElement.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             deleteRowElement.onclick = () => {
-                const startContainer = getSelection().getRangeAt(0).startContainer;
-                const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+                const startContainer = getSelection().getRangeAt(0)
+                    .startContainer;
+                const cellElement =
+                    hasClosestByMatchTag(startContainer, "TD") ||
                     hasClosestByMatchTag(startContainer, "TH");
@@ -386,10 +467,13 @@ if (cellElement) {
             deleteColumnElement.setAttribute("type", "button");
-            deleteColumnElement.setAttribute("aria-label", i18n[vditor.options.lang]["delete-column"] +
-                "<" + updateHotkeyTip("⇧⌘-") + ">");
+            deleteColumnElement.setAttribute("aria-label", window.VditorI18n["delete-column"] + "<" + updateHotkeyTip("⇧⌘-") + ">");
             deleteColumnElement.setAttribute("data-type", "deleteColumn");
-            deleteColumnElement.innerHTML = '<svg><use xlink:href="#vditor-icon-delete-column"></use></svg>';
-            deleteColumnElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+            deleteColumnElement.innerHTML =
+                '<svg><use xlink:href="#vditor-icon-delete-column"></use></svg>';
+            deleteColumnElement.className =
+                "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             deleteColumnElement.onclick = () => {
-                const startContainer = getSelection().getRangeAt(0).startContainer;
-                const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+                const startContainer = getSelection().getRangeAt(0)
+                    .startContainer;
+                const cellElement =
+                    hasClosestByMatchTag(startContainer, "TD") ||
                     hasClosestByMatchTag(startContainer, "TH");
@@ -402,3 +486,3 @@ if (cellElement) {
             const inputWrap = document.createElement("span");
-            inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].row);
+            inputWrap.setAttribute("aria-label", window.VditorI18n.row);
             inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -412,3 +496,3 @@ const input = document.createElement("input");
             input.style.textAlign = "center";
-            input.setAttribute("placeholder", i18n[vditor.options.lang].row);
+            input.setAttribute("placeholder", window.VditorI18n.row);
             input.value = tableElement.rows.length.toString();
@@ -432,3 +516,3 @@ input.oninput = () => {
             const input2Wrap = document.createElement("span");
-            input2Wrap.setAttribute("aria-label", i18n[vditor.options.lang].column);
+            input2Wrap.setAttribute("aria-label", window.VditorI18n.column);
             input2Wrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -442,3 +526,3 @@ const input2 = document.createElement("input");
             input2.style.textAlign = "center";
-            input2.setAttribute("placeholder", i18n[vditor.options.lang].column);
+            input2.setAttribute("placeholder", window.VditorI18n.column);
             input2.value = tableElement.rows[0].cells.length.toString();
@@ -488,7 +572,8 @@ input2.oninput = () => {
         if (footnotesRefElement) {
+            const lang: keyof II18n | "" = vditor.options.lang;
+            const options: IOptions = vditor.options;
             vditor.wysiwyg.popover.innerHTML = "";
 
             const inputWrap = document.createElement("span");
-            inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].footnoteRef +
-                "<" + updateHotkeyTip("⌥Enter") + ">");
+            inputWrap.setAttribute("aria-label", window.VditorI18n.footnoteRef + "<" + updateHotkeyTip("⌥Enter") + ">");
             inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -498,3 +583,3 @@ const input = document.createElement("input");
             input.className = "vditor-input";
-            input.setAttribute("placeholder", i18n[vditor.options.lang].footnoteRef + "<" + updateHotkeyTip("⌥Enter") + ">");
+            input.setAttribute("placeholder", window.VditorI18n.footnoteRef + "<" + updateHotkeyTip("⌥Enter") + ">");
             input.style.width = "120px";
@@ -511,3 +596,8 @@ input.value = footnotesRefElement.getAttribute("data-footnotes-label");
                 }
-                if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
+                if (
+                    !isCtrl(event) &&
+                    !event.shiftKey &&
+                    event.altKey &&
+                    event.key === "Enter"
+                ) {
                     range.selectNodeContents(footnotesRefElement);
@@ -529,3 +619,8 @@ range.collapse(false);
         // block popover: math-inline, math-block, html-block, html-inline, code-block, html-entity
-        if (blockRenderElement && blockRenderElement.getAttribute("data-type").indexOf("block") > -1) {
+        if (
+            blockRenderElement &&
+            blockRenderElement.getAttribute("data-type").indexOf("block") > -1
+        ) {
+            const lang: keyof II18n | "" = vditor.options.lang;
+            const options: IOptions = vditor.options;
             vditor.wysiwyg.popover.innerHTML = "";
@@ -538,4 +633,3 @@ genUp(range, blockRenderElement, vditor);
                 const languageWrap = document.createElement("span");
-                languageWrap.setAttribute("aria-label", i18n[vditor.options.lang].language +
-                    "<" + updateHotkeyTip("⌥Enter") + ">");
+                languageWrap.setAttribute("aria-label", window.VditorI18n.language + "<" + updateHotkeyTip("⌥Enter") + ">");
                 languageWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -545,9 +639,12 @@ const language = document.createElement("input");
 
-                const codeElement = blockRenderElement.firstElementChild.firstElementChild;
+                const codeElement =
+                    blockRenderElement.firstElementChild.firstElementChild;
 
                 language.className = "vditor-input";
                 language.setAttribute("placeholder",
-                    i18n[vditor.options.lang].language + "<" + updateHotkeyTip("⌥Enter") + ">");
-                language.value = codeElement.className.indexOf("language-") > -1 ?
-                    codeElement.className.split("-")[1].split(" ")[0] : "";
+                    window.VditorI18n.language + "<" + updateHotkeyTip("⌥Enter") + ">");
+                language.value =
+                    codeElement.className.indexOf("language-") > -1
+                        ? codeElement.className.split("-")[1].split(" ")[0]
+                        : "";
                 language.oninput = () => {
@@ -561,3 +658,4 @@ if (language.value.trim() !== "") {
                     if (blockRenderElement.lastElementChild.classList.contains("vditor-wysiwyg__preview")) {
-                        blockRenderElement.lastElementChild.innerHTML = blockRenderElement.firstElementChild.innerHTML;
+                        blockRenderElement.lastElementChild.innerHTML =
+                            blockRenderElement.firstElementChild.innerHTML;
                         processCodeRender(blockRenderElement.lastElementChild as HTMLElement, vditor);
@@ -574,3 +672,6 @@ }
                     }
-                    if (event.key === "Escape" && vditor.hint.element.style.display === "block") {
+                    if (
+                        event.key === "Escape" &&
+                        vditor.hint.element.style.display === "block"
+                    ) {
                         vditor.hint.element.style.display = "none";
@@ -580,3 +681,8 @@ event.preventDefault();
                     }
-                    if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
+                    if (
+                        !isCtrl(event) &&
+                        !event.shiftKey &&
+                        event.altKey &&
+                        event.key === "Enter"
+                    ) {
                         range.setStart(codeElement.firstChild, 0);
@@ -589,4 +695,9 @@ range.collapse(true);
                 language.onkeyup = (event: KeyboardEvent) => {
-                    if (event.isComposing || event.key === "Enter" || event.key === "ArrowUp" || event.key === "Escape"
-                        || event.key === "ArrowDown") {
+                    if (
+                        event.isComposing ||
+                        event.key === "Enter" ||
+                        event.key === "ArrowUp" ||
+                        event.key === "Escape" ||
+                        event.key === "ArrowDown"
+                    ) {
                         return;
@@ -612,6 +723,8 @@ }
             if (!blockRenderElement) {
-                vditor.wysiwyg.element.querySelectorAll(".vditor-wysiwyg__preview").forEach((itemElement) => {
-                    const previousElement = itemElement.previousElementSibling as HTMLElement;
-                    previousElement.style.display = "none";
-                });
+                vditor.wysiwyg.element
+                    .querySelectorAll(".vditor-wysiwyg__preview")
+                    .forEach((itemElement) => {
+                        const previousElement = itemElement.previousElementSibling as HTMLElement;
+                        previousElement.style.display = "none";
+                    });
             }
@@ -640,3 +753,8 @@ blockRenderElement = undefined;
                 }
-                if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
+                if (
+                    !isCtrl(event) &&
+                    !event.shiftKey &&
+                    event.altKey &&
+                    event.key === "Enter"
+                ) {
                     range.selectNodeContents(headingElement);
@@ -663,6 +781,18 @@ range.collapse(false);
 
-        if (!blockquoteElement && !liElement && !tableElement && !blockRenderElement && !aElement
-            && !linkRefElement && !footnotesRefElement && !headingElement && !tocElement) {
+        if (
+            !blockquoteElement &&
+            !liElement &&
+            !tableElement &&
+            !blockRenderElement &&
+            !aElement &&
+            !linkRefElement &&
+            !footnotesRefElement &&
+            !headingElement &&
+            !tocElement
+        ) {
             const blockElement = hasClosestByAttribute(typeElement, "data-block", "0");
-            if (blockElement && blockElement.parentElement.isEqualNode(vditor.wysiwyg.element)) {
+            if (
+                blockElement &&
+                blockElement.parentElement.isEqualNode(vditor.wysiwyg.element)
+            ) {
                 vditor.wysiwyg.popover.innerHTML = "";
@@ -680,5 +810,7 @@ genUp(range, blockElement, vditor);
         // 反斜杠特殊处理
-        vditor.wysiwyg.element.querySelectorAll('span[data-type="backslash"] > span').forEach((item: HTMLElement) => {
-            item.style.display = "none";
-        });
+        vditor.wysiwyg.element
+            .querySelectorAll('span[data-type="backslash"] > span')
+            .forEach((item: HTMLElement) => {
+                item.style.display = "none";
+            });
         const backslashElement = hasClosestByAttribute(range.startContainer, "data-type", "backslash");
@@ -688,3 +820,2 @@ if (backslashElement) {
         }
-
     }, 200);
@@ -701,3 +832,4 @@ };
     vditor.wysiwyg.popover.style.display = "block";
-    vditor.wysiwyg.popover.style.top = Math.max(-8, targetElement.offsetTop - 21 - vditor.wysiwyg.element.scrollTop) + "px";
+    vditor.wysiwyg.popover.style.top =
+        Math.max(-8, targetElement.offsetTop - 21 - vditor.wysiwyg.element.scrollTop) + "px";
     vditor.wysiwyg.popover.style.left =
@@ -726,3 +858,3 @@ Math.min(targetElement.offsetLeft, vditor.wysiwyg.element.clientWidth - vditor.wysiwyg.popover.clientWidth) + "px";
     const inputWrap = document.createElement("span");
-    inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].textIsNotEmpty);
+    inputWrap.setAttribute("aria-label", window.VditorI18n.textIsNotEmpty);
     inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -732,5 +864,6 @@ const input = document.createElement("input");
     input.className = "vditor-input";
-    input.setAttribute("placeholder", i18n[vditor.options.lang].textIsNotEmpty);
+    input.setAttribute("placeholder", window.VditorI18n.textIsNotEmpty);
     input.style.width = "120px";
-    input.value = linkRefElement.getAttribute("alt") || linkRefElement.textContent;
+    input.value =
+        linkRefElement.getAttribute("alt") || linkRefElement.textContent;
     input.oninput = () => {
@@ -747,3 +880,3 @@ updateLinkRef();
     const input1Wrap = document.createElement("span");
-    input1Wrap.setAttribute("aria-label", i18n[vditor.options.lang].linkRef);
+    input1Wrap.setAttribute("aria-label", window.VditorI18n.linkRef);
     input1Wrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -753,3 +886,3 @@ const input1 = document.createElement("input");
     input1.className = "vditor-input";
-    input1.setAttribute("placeholder", i18n[vditor.options.lang].linkRef);
+    input1.setAttribute("placeholder", window.VditorI18n.linkRef);
     input1.value = linkRefElement.getAttribute("data-link-label");
@@ -774,3 +907,7 @@ input1.oninput = () => {
     const previousElement = element.previousElementSibling;
-    if (!previousElement || (!element.parentElement.isEqualNode(vditor.wysiwyg.element) && element.tagName !== "LI")) {
+    if (
+        !previousElement ||
+        (!element.parentElement.isEqualNode(vditor.wysiwyg.element) &&
+            element.tagName !== "LI")
+    ) {
         return;
@@ -781,4 +918,3 @@ }
     upElement.setAttribute("data-type", "up");
-    upElement.setAttribute("aria-label", i18n[vditor.options.lang].up +
-        "<" + updateHotkeyTip("⇧⌘U") + ">");
+    upElement.setAttribute("aria-label", window.VditorI18n.up + "<" + updateHotkeyTip("⇧⌘U") + ">");
     upElement.innerHTML = '<svg><use xlink:href="#vditor-icon-up"></use></svg>';
@@ -799,3 +935,7 @@ upElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
     const nextElement = element.nextElementSibling;
-    if (!nextElement || (!element.parentElement.isEqualNode(vditor.wysiwyg.element) && element.tagName !== "LI")) {
+    if (
+        !nextElement ||
+        (!element.parentElement.isEqualNode(vditor.wysiwyg.element) &&
+            element.tagName !== "LI")
+    ) {
         return;
@@ -806,6 +946,7 @@ }
     downElement.setAttribute("data-type", "down");
-    downElement.setAttribute("aria-label", i18n[vditor.options.lang].down +
-        "<" + updateHotkeyTip("⇧⌘D") + ">");
-    downElement.innerHTML = '<svg><use xlink:href="#vditor-icon-down"></use></svg>';
-    downElement.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
+    downElement.setAttribute("aria-label", window.VditorI18n.down + "<" + updateHotkeyTip("⇧⌘D") + ">");
+    downElement.innerHTML =
+        '<svg><use xlink:href="#vditor-icon-down"></use></svg>';
+    downElement.className =
+        "vditor-icon vditor-tooltipped vditor-tooltipped__n";
     downElement.onclick = () => {
@@ -826,5 +967,5 @@ range.insertNode(document.createElement("wbr"));
     close.setAttribute("data-type", "remove");
-    close.setAttribute("aria-label", i18n[vditor.options.lang].remove +
-        "<" + updateHotkeyTip("⇧⌘X") + ">");
-    close.innerHTML = '<svg><use xlink:href="#vditor-icon-trashcan"></use></svg>';
+    close.setAttribute("aria-label", window.VditorI18n.remove + "<" + updateHotkeyTip("⇧⌘X") + ">");
+    close.innerHTML =
+        '<svg><use xlink:href="#vditor-icon-trashcan"></use></svg>';
     close.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
@@ -842,4 +983,8 @@ close.onclick = () => {
 
-const linkHotkey = (vditor: IVditor, element: HTMLElement, event: KeyboardEvent,
-                    nextInputElement: HTMLInputElement) => {
+const linkHotkey = (
+    vditor: IVditor,
+    element: HTMLElement,
+    event: KeyboardEvent,
+    nextInputElement: HTMLInputElement,
+) => {
     if (event.isComposing) {
@@ -854,3 +999,8 @@ return;
     }
-    if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
+    if (
+        !isCtrl(event) &&
+        !event.shiftKey &&
+        event.altKey &&
+        event.key === "Enter"
+    ) {
         const range = getEditorRange(vditor);
@@ -867,2 +1017,4 @@ // firefox 不会打断 link https://github.com/Vanessa219/vditor/issues/193
 export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
+    const lang: keyof II18n | "" = vditor.options.lang;
+    const options: IOptions = vditor.options;
     vditor.wysiwyg.popover.innerHTML = "";
@@ -882,3 +1034,3 @@
     const inputWrap = document.createElement("span");
-    inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].textIsNotEmpty);
+    inputWrap.setAttribute("aria-label", window.VditorI18n.textIsNotEmpty);
     inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -888,3 +1040,3 @@ const input = document.createElement("input");
     input.className = "vditor-input";
-    input.setAttribute("placeholder", i18n[vditor.options.lang].textIsNotEmpty);
+    input.setAttribute("placeholder", window.VditorI18n.textIsNotEmpty);
     input.style.width = "120px";
@@ -903,3 +1055,3 @@ input.value = aElement.innerHTML || "";
     const input1Wrap = document.createElement("span");
-    input1Wrap.setAttribute("aria-label", i18n[vditor.options.lang].link);
+    input1Wrap.setAttribute("aria-label", window.VditorI18n.link);
     input1Wrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -909,3 +1061,3 @@ const input1 = document.createElement("input");
     input1.className = "vditor-input";
-    input1.setAttribute("placeholder", i18n[vditor.options.lang].link);
+    input1.setAttribute("placeholder", window.VditorI18n.link);
     input1.value = aElement.getAttribute("href") || "";
@@ -923,3 +1075,3 @@ input1.oninput = () => {
     const input2Wrap = document.createElement("span");
-    input2Wrap.setAttribute("aria-label", i18n[vditor.options.lang].tooltipText);
+    input2Wrap.setAttribute("aria-label", window.VditorI18n.tooltipText);
     input2Wrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -929,3 +1081,3 @@ const input2 = document.createElement("input");
     input2.className = "vditor-input";
-    input2.setAttribute("placeholder", i18n[vditor.options.lang].tooltipText);
+    input2.setAttribute("placeholder", window.VditorI18n.tooltipText);
     input2.style.width = "60px";
@@ -960,3 +1112,3 @@ input2.value = aElement.getAttribute("title") || "";
     const inputWrap = document.createElement("span");
-    inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].imageURL);
+    inputWrap.setAttribute("aria-label", window.VditorI18n.imageURL);
     inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -966,3 +1118,3 @@ const inputElement = document.createElement("input");
     inputElement.className = "vditor-input";
-    inputElement.setAttribute("placeholder", i18n[vditor.options.lang].imageURL);
+    inputElement.setAttribute("placeholder", window.VditorI18n.imageURL);
     inputElement.value = imgElement.getAttribute("src") || "";
@@ -977,3 +1129,3 @@ inputElement.oninput = () => {
     const altWrap = document.createElement("span");
-    altWrap.setAttribute("aria-label", i18n[vditor.options.lang].alternateText);
+    altWrap.setAttribute("aria-label", window.VditorI18n.alternateText);
     altWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -983,3 +1135,3 @@ const alt = document.createElement("input");
     alt.className = "vditor-input";
-    alt.setAttribute("placeholder", i18n[vditor.options.lang].alternateText);
+    alt.setAttribute("placeholder", window.VditorI18n.alternateText);
     alt.style.width = "52px";
@@ -995,3 +1147,3 @@ alt.value = imgElement.getAttribute("alt") || "";
     const titleWrap = document.createElement("span");
-    titleWrap.setAttribute("aria-label", i18n[vditor.options.lang].title);
+    titleWrap.setAttribute("aria-label", window.VditorI18n.title);
     titleWrap.className = "vditor-tooltipped vditor-tooltipped__n";
@@ -1001,3 +1153,3 @@ const title = document.createElement("input");
     title.className = "vditor-input";
-    title.setAttribute("placeholder", i18n[vditor.options.lang].title);
+    title.setAttribute("placeholder", window.VditorI18n.title);
     title.value = imgElement.getAttribute("title") || "";
@@ -1004,0 +1156,0 @@ title.oninput = () => {

src/ts/wysiwyg/index.ts

 import {Constants} from "../constants";
-import {i18n} from "../i18n";
 import {hidePanel} from "../toolbar/setToolbar";
@@ -52,3 +51,3 @@ import {isCtrl, isFirefox} from "../util/compatibility";
 <div class="vditor-panel vditor-panel--none">
-    <button type="button" aria-label="${i18n[vditor.options.lang].comment}" class="vditor-icon vditor-tooltipped vditor-tooltipped__n">
+    <button type="button" aria-label="${window.VditorI18n.comment}" class="vditor-icon vditor-tooltipped vditor-tooltipped__n">
         <svg><use xlink:href="#vditor-icon-comment"></use></svg>
@@ -55,0 +54,0 @@ </button>

No alert changes

Improved metrics

Total package byte prevSize

17228572

increased by1.75%

Number of package files

419

increased by1.7%

Lines of code

79627

increased by1.99%

Number of lines in readme file

650

increased by0.46%

No dependency changes