vditor 3.8.7 → 3.8.8

package/dist/method.min.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v3.8.7 - A markdown editor written in TypeScript.
+ * Vditor v3.8.8 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -45,7 +45,7 @@ return /******/ (() => { // webpackBootstrap
 /* harmony export */   "g": () => (/* binding */ Constants)
 /* harmony export */ });
 /* unused harmony export VDITOR_VERSION */
-var _VDITOR_VERSION = (/* unused pure expression or super */ null && ("3.8.7"));
+var _VDITOR_VERSION = (/* unused pure expression or super */ null && ("3.8.8"));
 
 var Constants = /** @class */ (function () {
     function Constants() {
@@ -71,7 +71,7 @@ var Constants = /** @class */ (function () {
         "swift", "ini", "typescript", "vbnet", "yaml",
         "ada", "clojure", "dart", "erb", "fortran", "gradle", "haskell", "julia", "julia-repl", "lisp", "matlab",
         "pgsql", "powershell", "sql_more", "stata", "cmake", "mathematica"];
-    Constants.CDN = "https://cdn.jsdelivr.net/npm/vditor@" + "3.8.7";
+    Constants.CDN = "https://cdn.jsdelivr.net/npm/vditor@" + "3.8.8";
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         codeBlockPreview: true,
@@ -2194,7 +2194,7 @@ var md2html = function (mdText, options) {
     });
 };
 var previewRender = function (previewElement, markdown, options) { return __awaiter(void 0, void 0, void 0, function () {
-    var mergedOptions, html;
+    var mergedOptions, html, i18nScriptPrefix, i18nScriptID_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -2212,7 +2212,14 @@ var previewRender = function (previewElement, markdown, options) { return __awai
                         throw new Error("options.lang error, see https://ld246.com/article/1549638745630#options");
                     }
                     else {
-                        (0,addScript/* addScriptSync */.J)(mergedOptions.cdn + "/dist/js/i18n/" + mergedOptions.lang + ".js", "vditorI18nScript");
+                        i18nScriptPrefix = "vditorI18nScript";
+                        i18nScriptID_1 = i18nScriptPrefix + mergedOptions.lang;
+                        document.querySelectorAll("head script[id^=\"" + i18nScriptPrefix + "\"]").forEach(function (el) {
+                            if (el.id !== i18nScriptID_1) {
+                                document.head.removeChild(el);
+                            }
+                        });
+                        (0,addScript/* addScript */.G)(mergedOptions.cdn + "/dist/js/i18n/" + mergedOptions.lang + ".js", i18nScriptID_1);
                     }
                 }
                 else {

package/dist/ts/ui/initUI.d.ts

@@ -7,3 +7,4 @@ declare global {
 export declare const initUI: (vditor: IVditor) => void;
 export declare const setPadding: (vditor: IVditor) => void;
 export declare const setTypewriterPosition: (vditor: IVditor) => void;
+export declare function UIUnbindListener(): void;

package/dist/ts/wysiwyg/index.d.ts

@@ -9,11 +9,13 @@ declare class WYSIWYG {
     preventInput: boolean;
     composingLock: boolean;
     commentIds: string[];
+    private scrollListener;
     constructor(vditor: IVditor);
     getComments(vditor: IVditor, getData?: boolean): ICommentsData[];
     triggerRemoveComment(vditor: IVditor): void;
     showComment(): void;
     hideComment(): void;
+    unbindListener(): void;
     private copy;
     private bindEvent;
 }

package/dist/types/index.d.ts

@@ -372,7 +372,7 @@ interface IUpload {
     validate?(files: File[]): string | boolean;
 
     /** 自定义上传，当发生错误时返回错误信息 */
-    handler?(files: File[]): string | null;
+    handler?(files: File[]): string | null | Promise<string> | Promise<null>;
 
     /** 对服务端返回的数据进行转换，以满足内置的数据结构 */
     format?(files: File[], responseText: string): string;
@@ -381,7 +381,7 @@ interface IUpload {
     linkToImgFormat?(responseText: string): string;
 
     /** 将上传的文件处理后再返回  */
-    file?(files: File[]): File[];
+    file?(files: File[]): File[] | Promise<File[]>;
 
     /** 图片地址上传后的回调  */
     linkToImgCallback?(responseText: string): void;
@@ -537,7 +537,7 @@ interface IHintData {
 interface IHintExtend {
     key: string;
 
-    hint?(value: string): IHintData[];
+    hint?(value: string): IHintData[] | Promise<IHintData[]>;
 }
 
 /** @link https://ld246.com/article/1549638745630#options-hint */
@@ -747,6 +747,7 @@ interface IVditor {
         triggerRemoveComment(vditor: IVditor): void,
         showComment(): void,
         hideComment(): void,
+        unbindListener(): void,
     };
     ir?: {
         range: Range,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "3.8.7",
+  "version": "3.8.8",
   "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
   "author": "Vanessa <v@b3log.org> (http://vanessa.b3log.org)",
   "homepage": "https://b3log.org/vditor",

package/src/index.ts

@@ -19,7 +19,7 @@ import {Tip} from "./ts/tip/index";
 import {Toolbar} from "./ts/toolbar/index";
 import {disableToolbar, hidePanel} from "./ts/toolbar/setToolbar";
 import {enableToolbar} from "./ts/toolbar/setToolbar";
-import {initUI} from "./ts/ui/initUI";
+import {initUI, UIUnbindListener} from "./ts/ui/initUI";
 import {setCodeTheme} from "./ts/ui/setCodeTheme";
 import {setContentTheme} from "./ts/ui/setContentTheme";
 import {setPreviewMode} from "./ts/ui/setPreviewMode";
@@ -73,7 +73,14 @@ class Vditor extends VditorMethod {
                     "options.lang error, see https://ld246.com/article/1549638745630#options",
                 );
             } else {
-                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript").then(() => {
+                const i18nScriptPrefix = "vditorI18nScript";
+                const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+                document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                    if (el.id !== i18nScriptID) {
+                        document.head.removeChild(el);
+                    }
+                });
+                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID).then(() => {
                     this.init(id as HTMLElement, mergedOptions);
                 });
             }
@@ -322,6 +329,9 @@ class Vditor extends VditorMethod {
         this.vditor.element.removeAttribute("style");
         document.getElementById("vditorIconScript").remove();
         this.clearCache();
+
+        UIUnbindListener();
+        this.vditor.wysiwyg.unbindListener();
     }
 
     /** 获取评论 ID */

package/src/ts/hint/index.ts

@@ -59,8 +59,8 @@ export class Hint {
                 vditor.options.hint.extend.forEach((item) => {
                     if (item.key === this.splitChar) {
                         clearTimeout(this.timeId);
-                        this.timeId = window.setTimeout(() => {
-                            this.genHTML(item.hint(key), key, vditor);
+                        this.timeId = window.setTimeout(async () => {
+                            this.genHTML(await item.hint(key), key, vditor);
                         }, vditor.options.hint.delay);
                     }
                 });
@@ -148,15 +148,24 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
                 return;
             }
         }
-        if (vditor.currentMode === "wysiwyg" && range.startContainer.nodeType !== 3 &&
-            (range.startContainer as HTMLElement).firstElementChild.classList.contains("vditor-input")) {
-            const inputElement = (range.startContainer as HTMLElement).firstElementChild as HTMLInputElement;
-            inputElement.value = value.trimRight();
-            range.selectNodeContents(inputElement);
-            range.collapse(false);
-            inputElement.dispatchEvent(new CustomEvent("input"));
-            this.recentLanguage = value.trimRight();
-            return;
+        if (vditor.currentMode === "wysiwyg" && range.startContainer.nodeType !== 3 ) {
+            const startContainer = range.startContainer as HTMLElement;
+            let inputElement: HTMLInputElement;
+            if (startContainer.classList.contains("vditor-input")) {
+                inputElement = startContainer as HTMLInputElement;
+            } else {
+                inputElement = startContainer.firstElementChild as HTMLInputElement;
+            }
+            if (inputElement && inputElement.classList.contains("vditor-input")) {
+                inputElement.value = value.trimRight();
+                range.selectNodeContents(inputElement);
+                range.collapse(false);
+                // {detail: 1}用于标识这个自定义事件是在编程语言选择后触发的
+                // 用于在鼠标选择语言后，自动聚焦到代码输入框
+                inputElement.dispatchEvent(new CustomEvent("input", {detail: 1}));
+                this.recentLanguage = value.trimRight();
+                return;
+            }
         }
 
         range.setStart(range.startContainer, this.lastIndex);

package/src/ts/markdown/previewRender.ts

@@ -90,7 +90,14 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
                 "options.lang error, see https://ld246.com/article/1549638745630#options",
             );
         } else {
-            addScriptSync(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript");
+            const i18nScriptPrefix = "vditorI18nScript";
+            const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+            document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                if (el.id !== i18nScriptID) {
+                    document.head.removeChild(el);
+                }
+            });
+            addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID);
         }
     } else {
         window.VditorI18n = mergedOptions.i18n;

package/src/ts/preview/index.ts

@@ -23,7 +23,6 @@ export class Preview {
     constructor(vditor: IVditor) {
         this.element = document.createElement("div");
         this.element.className = `vditor-preview`;
-
         const previewElement = document.createElement("div");
         previewElement.className = "vditor-reset";
         if (vditor.options.classes.preview) {

package/src/ts/toolbar/Info.ts

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

package/src/ts/ui/initUI.ts

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

package/src/ts/upload/index.ts

@@ -154,7 +154,7 @@ const uploadFiles =
         }
 
         if (vditor.options.upload.handler) {
-            const isValidate = vditor.options.upload.handler(fileList);
+            const isValidate = await vditor.options.upload.handler(fileList);
             if (typeof isValidate === "string") {
                 vditor.tip.show(isValidate);
                 return;

package/src/ts/util/editorCommonEvent.ts

@@ -22,7 +22,7 @@ export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
         if (vditor.options.focus) {
             vditor.options.focus(getMarkdown(vditor));
         }
-        hidePanel(vditor, ["subToolbar"]);
+        hidePanel(vditor, ["subToolbar", "hint"]);
     });
 };
 
@@ -62,7 +62,7 @@ export const dropEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             if (event.dataTransfer.getData(Constants.DROP_EDITOR)) {
                 // 编辑器内选中文字拖拽
                 execAfterRender(vditor);
-            } else if (event.dataTransfer.types[0] === "Files" || event.dataTransfer.types.includes("text/html")) {
+            } else if (event.dataTransfer.types.includes("Files") || event.dataTransfer.types.includes("text/html")) {
                 // 外部文件拖入编辑器中或者编辑器内选中文字拖拽
                 paste(vditor, event, {
                     pasteCode: (code: string) => {

package/src/ts/util/fixBrowserBehavior.ts

@@ -977,7 +977,7 @@ export const fixCodeBlock = (vditor: IVditor, event: KeyboardEvent, codeRenderEl
     if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey) {
         const codePosition = getSelectPosition(codeRenderElement, vditor[vditor.currentMode].element, range);
         if ((codePosition.start === 0 ||
-            (codePosition.start === 1 && codeRenderElement.innerText === "\n")) // 空代码块，光标在 \n 后
+                (codePosition.start === 1 && codeRenderElement.innerText === "\n")) // 空代码块，光标在 \n 后
             && range.toString() === "") {
             codeRenderElement.parentElement.outerHTML =
                 `<p data-block="0"><wbr>${codeRenderElement.firstElementChild.innerHTML}</p>`;
@@ -1093,7 +1093,7 @@ export const fixTask = (vditor: IVditor, range: Range, event: KeyboardEvent) =>
         if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey && range.toString() === ""
             && range.startOffset === 1
             && ((startContainer.nodeType === 3 && startContainer.previousSibling &&
-                (startContainer.previousSibling as HTMLElement).tagName === "INPUT")
+                    (startContainer.previousSibling as HTMLElement).tagName === "INPUT")
                 || startContainer.nodeType !== 3)) {
             const previousElement = taskItemElement.previousElementSibling;
             taskItemElement.querySelector("input").remove();
@@ -1264,7 +1264,7 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
     } else {
         textHTML = event.dataTransfer.getData("text/html");
         textPlain = event.dataTransfer.getData("text/plain");
-        if (event.dataTransfer.types[0] === "Files") {
+        if (event.dataTransfer.types.includes("Files")) {
             files = event.dataTransfer.items;
         }
     }
@@ -1410,7 +1410,7 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
                 processPaste(vditor, vditor.lute.HTML2Md(tempElement.innerHTML).trimRight());
             }
             vditor.outline.render(vditor);
-        } else if (files.length > 0 && vditor.options.upload.url) {
+        } else if (files.length > 0 && (vditor.options.upload.url || vditor.options.upload.handler)) {
             await uploadFiles(vditor, files);
         } else if (textPlain.trim() !== "" && files.length === 0) {
             if (vditor.currentMode === "ir") {

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -618,7 +618,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     codeElement.className.indexOf("language-") > -1
                         ? codeElement.className.split("-")[1].split(" ")[0]
                         : "";
-                language.oninput = () => {
+                language.oninput = (e: InputEvent) => {
                     if (language.value.trim() !== "") {
                         codeElement.className = `language-${language.value}`;
                     } else {
@@ -631,6 +631,13 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                         processCodeRender(blockRenderElement.lastElementChild as HTMLElement, vditor);
                     }
                     afterRenderEvent(vditor);
+                    // 当鼠标点选语言时，触发自定义input事件
+                    if (e.detail === 1) {
+                        // 选择语言后，输入焦点切换到代码输入框
+                        range.setStart(codeElement.firstChild, 0);
+                        range.collapse(true);
+                        setSelectionFocus(range);
+                    }
                 };
                 language.onkeydown = (event: KeyboardEvent) => {
                     if (event.isComposing) {
@@ -647,17 +654,18 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                         event.preventDefault();
                         return;
                     }
+                    vditor.hint.select(event, vditor);
                     if (
                         !isCtrl(event) &&
                         !event.shiftKey &&
-                        event.altKey &&
                         event.key === "Enter"
                     ) {
                         range.setStart(codeElement.firstChild, 0);
                         range.collapse(true);
                         setSelectionFocus(range);
+                        event.preventDefault();
+                        event.stopPropagation();
                     }
-                    vditor.hint.select(event, vditor);
                 };
                 language.onkeyup = (event: KeyboardEvent) => {
                     if (

package/src/ts/wysiwyg/index.ts

@@ -39,6 +39,7 @@ class WYSIWYG {
     public preventInput: boolean;
     public composingLock = false;
     public commentIds: string[] = [];
+    private scrollListener: () => void;
 
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
@@ -195,6 +196,10 @@ class WYSIWYG {
         this.selectPopover.setAttribute("style", "display:none");
     }
 
+    public unbindListener() {
+        window.removeEventListener("scroll", this.scrollListener);
+    }
+
     private copy(event: ClipboardEvent, vditor: IVditor) {
         const range = getSelection().getRangeAt(0);
         if (range.toString() === "") {
@@ -238,7 +243,8 @@ class WYSIWYG {
     }
 
     private bindEvent(vditor: IVditor) {
-        window.addEventListener("scroll", () => {
+        this.unbindListener();
+        window.addEventListener("scroll", this.scrollListener = () => {
             hidePanel(vditor, ["hint"]);
             if (this.popover.style.display !== "block" || this.selectPopover.style.display !== "block") {
                 return;
@@ -331,7 +337,7 @@ class WYSIWYG {
                 this.preventInput = false;
                 return;
             }
-            if (this.composingLock ||  event.data === "‘" || event.data === "“" || event.data === "《") {
+            if (this.composingLock || event.data === "‘" || event.data === "“" || event.data === "《") {
                 return;
             }
             const range = getSelection().getRangeAt(0);