vditor 3.8.7 → 3.8.11

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.11",
   "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
   "author": "Vanessa <v@b3log.org> (http://vanessa.b3log.org)",
   "homepage": "https://b3log.org/vditor",
@@ -24,7 +24,7 @@
     "@types/diff-match-patch": "^1.0.32",
     "@types/jest": "^26.0.23",
     "@types/puppeteer": "^2.1.5",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^6.4.1",
@@ -34,19 +34,19 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^0.8.2",
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.0",
     "postcss-loader": "^5.2.0",
     "puppeteer": "^1.20.0",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^12.4.0",
     "style-loader": "^1.3.0",
-    "terser-webpack-plugin": "^5.1.2",
+    "terser-webpack-plugin": "^5.3.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^6.2.2",
     "tslint": "^5.20.1",
     "typescript": "^3.9.9",
-    "webpack": "^5.37.0",
+    "webpack": "^5.66.0",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^4.7.0",
+    "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.1.0"
   },
   "license": "MIT",

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/codeRender.ts

@@ -33,13 +33,17 @@ export const codeRender = (element: HTMLElement) => {
             codeText = codeElement.innerText;
         }
 
+        let iconHTML = '<svg><use xlink:href="#vditor-icon-copy"></use></svg>';
+        if (!document.getElementById("vditorIconScript")) {
+            iconHTML = '<svg viewBox="0 0 32 32"><path d="M22.545-0h-17.455c-1.6 0-2.909 1.309-2.909 2.909v20.364h2.909v-20.364h17.455v-2.909zM26.909 5.818h-16c-1.6 0-2.909 1.309-2.909 2.909v20.364c0 1.6 1.309 2.909 2.909 2.909h16c1.6 0 2.909-1.309 2.909-2.909v-20.364c0-1.6-1.309-2.909-2.909-2.909zM26.909 29.091h-16v-20.364h16v20.364z"></path></svg>';
+        }
+
         const divElement = document.createElement("div");
         divElement.className = "vditor-copy";
-        divElement.innerHTML = `<span aria-label="${window.VditorI18n.copy}"
-onmouseover="this.setAttribute('aria-label', '${window.VditorI18n.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', '${window.VditorI18n.copied}')"><svg><use xlink:href="#vditor-icon-copy"></use></svg></span>`;
+onclick="this.previousElementSibling.select();document.execCommand('copy');this.setAttribute('aria-label', '${window.VditorI18n?.copy || "已复制"}')">${iconHTML}</span>`;
         const textarea = document.createElement("textarea");
         textarea.value = code160to32(codeText);
         divElement.insertAdjacentElement("afterbegin", textarea);

package/src/ts/markdown/mathRender.ts

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

package/src/ts/markdown/outlineRender.ts

@@ -38,7 +38,11 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
     const headingsElement = tempElement.firstElementChild.querySelectorAll("li > span[data-target-id]");
     headingsElement.forEach((item, index) => {
         if (item.nextElementSibling && item.nextElementSibling.tagName === "UL") {
-            item.innerHTML = `<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg><span>${item.innerHTML}</span>`;
+            let iconHTML = "<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg>";
+            if (!document.getElementById("vditorIconScript")) {
+                iconHTML = '<svg class="vditor-outline__action" viewBox="0 0 32 32"><path d="M3.76 6.12l12.24 12.213 12.24-12.213 3.76 3.76-16 16-16-16 3.76-3.76z"></path></svg>';
+            }
+            item.innerHTML = `${iconHTML}<span>${item.innerHTML}</span>`;
         } else {
             item.innerHTML = `<svg></svg><span>${item.innerHTML}</span>`;
         }

package/src/ts/markdown/previewRender.ts

@@ -90,12 +90,23 @@ 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);
+                }
+            });
+            await addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID);
         }
     } else {
         window.VditorI18n = mergedOptions.i18n;
     }
 
+    if (mergedOptions.icon) {
+        await addScript(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+    }
+
     setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
     if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");
@@ -126,9 +137,6 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.lazyLoadImage) {
         lazyLoadImageRender(previewElement);
     }
-    if (mergedOptions.icon) {
-        addScript(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
-    }
     previewElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
         const spanElement = hasClosestByMatchTag(event.target, "SPAN");
         if (spanElement && hasClosestByClassName(spanElement, "vditor-toc")) {

package/src/ts/markdown/speechRender.ts

@@ -9,8 +9,12 @@ export const speechRender = (element: HTMLElement, lang: keyof II18n = "zh_CN")
     if (typeof speechSynthesis === "undefined" || typeof SpeechSynthesisUtterance === "undefined") {
         return;
     }
-    const playSVG = '<svg><use xlink:href="#vditor-icon-play"></use></svg>';
-    const pauseSVG = '<svg><use xlink:href="#vditor-icon-pause"></use></svg>';
+    let playSVG = '<svg><use xlink:href="#vditor-icon-play"></use></svg>';
+    let pauseSVG = '<svg><use xlink:href="#vditor-icon-pause"></use></svg>';
+    if (!document.getElementById("vditorIconScript")) {
+        playSVG = '<svg viewBox="0 0 32 32"><path d="M3.436 0l25.128 16-25.128 16v-32z"></path></svg>';
+        pauseSVG = '<svg viewBox="0 0 32 32"><path d="M20.617 0h9.128v32h-9.128v-32zM2.255 32v-32h9.128v32h-9.128z"></path></svg>';
+    }
     let speechDom: HTMLDivElement = document.querySelector(".vditor-speech");
     if (!speechDom) {
         speechDom = document.createElement("div");

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

@@ -108,7 +108,7 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
         if (type.indexOf(".wav") === 0 || type.indexOf(".mp3") === 0 || type.indexOf(".ogg") === 0) {
             if (vditor.currentMode === "wysiwyg") {
                 succFileText += `<div class="vditor-wysiwyg__block" data-type="html-block"
- data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre>`;
+ data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre>\n`;
             } else if (vditor.currentMode === "ir") {
                 succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
             } else {
@@ -123,13 +123,13 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
             || type.indexOf(".svg") === 0
             || type.indexOf(".webp") === 0) {
             if (vditor.currentMode === "wysiwyg") {
-                succFileText += `<img alt="${filename}" src="${path}">`;
+                succFileText += `<img alt="${filename}" src="${path}">\n`;
             } else {
                 succFileText += `![${filename}](${path})\n`;
             }
         } else {
             if (vditor.currentMode === "wysiwyg") {
-                succFileText += `<a href="${path}">${filename}</a>`;
+                succFileText += `<a href="${path}">${filename}</a>\n`;
             } else {
                 succFileText += `[${filename}](${path})\n`;
             }
@@ -154,7 +154,7 @@ const uploadFiles =
         }
 
         if (vditor.options.upload.handler) {
-            const isValidate = vditor.options.upload.handler(fileList);
+            const isValidate = await vditor.options.upload.handler(fileList);
             if (typeof isValidate === "string") {
                 vditor.tip.show(isValidate);
                 return;

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 (
@@ -964,8 +972,6 @@ const linkHotkey = (
 };
 
 export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
-    const lang: keyof II18n | "" = vditor.options.lang;
-    const options: IOptions = vditor.options;
     vditor.wysiwyg.popover.innerHTML = "";
 
     const updateA = () => {
@@ -974,6 +980,7 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
         }
         aElement.setAttribute("href", input1.value);
         aElement.setAttribute("title", input2.value);
+        afterRenderEvent(vditor);
     };
 
     aElement.querySelectorAll("[data-marker]").forEach((item: HTMLElement) => {

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);