vditor 3.8.12 → 3.8.15

package/src/ts/ui/initUI.ts

@@ -6,173 +6,181 @@ import {setContentTheme} from "./setContentTheme";
 import {setTheme} from "./setTheme";
 
 declare global {
-    interface Window {
-        visualViewport: HTMLElement;
-    }
+  interface Window {
+    visualViewport: HTMLElement;
+  }
 }
 
 export const initUI = (vditor: IVditor) => {
-    vditor.element.innerHTML = "";
-    vditor.element.classList.add("vditor");
-    setTheme(vditor);
-    setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
-    if (typeof vditor.options.height === "number") {
-        vditor.element.style.height = vditor.options.height + "px";
-    }
-    if (typeof vditor.options.minHeight === "number") {
-        vditor.element.style.minHeight = vditor.options.minHeight + "px";
-    }
-    if (typeof vditor.options.width === "number") {
-        vditor.element.style.width = vditor.options.width + "px";
-    } else {
-        vditor.element.style.width = vditor.options.width;
-    }
-
-    vditor.element.appendChild(vditor.toolbar.element);
-
-    const contentElement = document.createElement("div");
-    contentElement.className = "vditor-content";
-
-    if (vditor.options.outline.position === "left") {
-        contentElement.appendChild(vditor.outline.element);
-    }
-
-    contentElement.appendChild(vditor.wysiwyg.element.parentElement);
-
-    contentElement.appendChild(vditor.sv.element);
-
-    contentElement.appendChild(vditor.ir.element.parentElement);
-
-    contentElement.appendChild(vditor.preview.element);
-
-    if (vditor.toolbar.elements.devtools) {
-        contentElement.appendChild(vditor.devtools.element);
-    }
-
-    if (vditor.options.outline.position === "right") {
-        vditor.outline.element.classList.add("vditor-outline--right");
-        contentElement.appendChild(vditor.outline.element);
-    }
-
-    if (vditor.upload) {
-        contentElement.appendChild(vditor.upload.element);
-    }
-
-    if (vditor.options.resize.enable) {
-        contentElement.appendChild(vditor.resize.element);
-    }
-
-    contentElement.appendChild(vditor.hint.element);
-
-    contentElement.appendChild(vditor.tip.element);
-
-    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));
-
-    document.execCommand("DefaultParagraphSeparator", false, "p");
-
-    if (navigator.userAgent.indexOf("iPhone") > -1 && typeof window.visualViewport !== "undefined") {
-        // https://github.com/Vanessa219/vditor/issues/379
-        let pendingUpdate = false;
-        const viewportHandler = (event: Event) => {
-            if (pendingUpdate) {
-                return;
-            }
-            pendingUpdate = true;
-
-            requestAnimationFrame(() => {
-                pendingUpdate = false;
-                const layoutViewport = vditor.toolbar.element;
-                layoutViewport.style.transform = "none";
-                if (layoutViewport.getBoundingClientRect().top < 0) {
-                    layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
-                }
-            });
-        };
-        window.visualViewport.addEventListener("scroll", viewportHandler);
-        window.visualViewport.addEventListener("resize", viewportHandler);
-    }
+  vditor.element.innerHTML = "";
+  vditor.element.classList.add("vditor");
+  // 支持 RTL
+  if (vditor.options.rtl) {
+    vditor.element.setAttribute("dir", "rtl")
+  }
+  setTheme(vditor);
+  setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
+  if (typeof vditor.options.height === "number") {
+    vditor.element.style.height = vditor.options.height + "px";
+  } else {
+    vditor.element.style.height = vditor.options.height;
+  }
+  if (typeof vditor.options.minHeight === "number") {
+    vditor.element.style.minHeight = vditor.options.minHeight + "px";
+  }
+  if (typeof vditor.options.width === "number") {
+    vditor.element.style.width = vditor.options.width + "px";
+  } else {
+    vditor.element.style.width = vditor.options.width;
+  }
+
+  vditor.element.appendChild(vditor.toolbar.element);
+
+  const contentElement = document.createElement("div");
+  contentElement.className = "vditor-content";
+
+  if (vditor.options.outline.position === "left") {
+    contentElement.appendChild(vditor.outline.element);
+  }
+
+  contentElement.appendChild(vditor.wysiwyg.element.parentElement);
+
+  contentElement.appendChild(vditor.sv.element);
+
+  contentElement.appendChild(vditor.ir.element.parentElement);
+
+  contentElement.appendChild(vditor.preview.element);
+
+  if (vditor.toolbar.elements.devtools) {
+    contentElement.appendChild(vditor.devtools.element);
+  }
+
+  if (vditor.options.outline.position === "right") {
+    vditor.outline.element.classList.add("vditor-outline--right");
+    contentElement.appendChild(vditor.outline.element);
+  }
+
+  if (vditor.upload) {
+    contentElement.appendChild(vditor.upload.element);
+  }
+
+  if (vditor.options.resize.enable) {
+    contentElement.appendChild(vditor.resize.element);
+  }
+
+  contentElement.appendChild(vditor.hint.element);
+
+  contentElement.appendChild(vditor.tip.element);
+
+  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));
+
+  document.execCommand("DefaultParagraphSeparator", false, "p");
+
+  if (navigator.userAgent.indexOf("iPhone") > -1 && typeof window.visualViewport !== "undefined") {
+    // https://github.com/Vanessa219/vditor/issues/379
+    let pendingUpdate = false;
+    const viewportHandler = (event: Event) => {
+      if (pendingUpdate) {
+        return;
+      }
+      pendingUpdate = true;
+
+      requestAnimationFrame(() => {
+        pendingUpdate = false;
+        const layoutViewport = vditor.toolbar.element;
+        layoutViewport.style.transform = "none";
+        if (layoutViewport.getBoundingClientRect().top < 0) {
+          layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
+        }
+      });
+    };
+    window.visualViewport.addEventListener("scroll", viewportHandler);
+    window.visualViewport.addEventListener("resize", viewportHandler);
+  }
 };
 
 export const setPadding = (vditor: IVditor) => {
-    const minPadding = window.innerWidth <= Constants.MOBILE_WIDTH ? 10 : 35;
-    if (vditor.wysiwyg.element.parentElement.style.display !== "none") {
-        const padding = (vditor.wysiwyg.element.parentElement.clientWidth
-            - vditor.options.preview.maxWidth) / 2;
-        vditor.wysiwyg.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
-    }
-
-    if (vditor.ir.element.parentElement.style.display !== "none") {
-        const padding = (vditor.ir.element.parentElement.clientWidth
-            - vditor.options.preview.maxWidth) / 2;
-        vditor.ir.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
-    }
-
-    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";
-    }
+  const minPadding = window.innerWidth <= Constants.MOBILE_WIDTH ? 10 : 35;
+  if (vditor.wysiwyg.element.parentElement.style.display !== "none") {
+    const padding = (vditor.wysiwyg.element.parentElement.clientWidth
+      - vditor.options.preview.maxWidth) / 2;
+    vditor.wysiwyg.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
+  }
+
+  if (vditor.ir.element.parentElement.style.display !== "none") {
+    const padding = (vditor.ir.element.parentElement.clientWidth
+      - vditor.options.preview.maxWidth) / 2;
+    vditor.ir.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
+  }
+
+  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";
+  }
 };
 
 export const setTypewriterPosition = (vditor: IVditor) => {
-    if (!vditor.options.typewriterMode) {
-        return;
-    }
-    let height: number = window.innerHeight;
-    if (typeof vditor.options.height === "number") {
-        height = vditor.options.height;
-        if (typeof vditor.options.minHeight === "number") {
-            height = Math.max(height, vditor.options.minHeight);
-        }
-        height = Math.min(window.innerHeight, height);
-    }
-    if (vditor.element.classList.contains("vditor--fullscreen")) {
-        height = window.innerHeight;
-    }
-    // 由于 Firefox padding-bottom bug，只能使用 :after
-    vditor[vditor.currentMode].element.style.setProperty("--editor-bottom",
-        ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
+  if (!vditor.options.typewriterMode) {
+    return;
+  }
+  let height: number = window.innerHeight;
+  if (typeof vditor.options.height === "number") {
+    height = vditor.options.height;
+    if (typeof vditor.options.minHeight === "number") {
+      height = Math.max(height, vditor.options.minHeight);
+    }
+    height = Math.min(window.innerHeight, height);
+  } else {
+    height = vditor.element.clientHeight;
+  }
+  if (vditor.element.classList.contains("vditor--fullscreen")) {
+    height = window.innerHeight;
+  }
+  // 由于 Firefox padding-bottom bug，只能使用 :after
+  vditor[vditor.currentMode].element.style.setProperty("--editor-bottom",
+    ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
 };
 
 let resizeCb: () => void;
 
 export function UIUnbindListener() {
-    window.removeEventListener("resize", resizeCb);
+  window.removeEventListener("resize", resizeCb);
 }
 
 const afterRender = (vditor: IVditor) => {
+  setTypewriterPosition(vditor);
+  UIUnbindListener();
+  window.addEventListener("resize", resizeCb = () => {
+    setPadding(vditor);
     setTypewriterPosition(vditor);
-    UIUnbindListener();
-    window.addEventListener("resize", resizeCb = () => {
-        setPadding(vditor);
-        setTypewriterPosition(vditor);
-    });
-
-    // set default value
-    let initValue = accessLocalStorage() && localStorage.getItem(vditor.options.cache.id);
-    if (!vditor.options.cache.enable || !initValue) {
-        if (vditor.options.value) {
-            initValue = vditor.options.value;
-        } else if (vditor.originalInnerHTML) {
-            initValue = vditor.lute.HTML2Md(vditor.originalInnerHTML);
-        } else if (!vditor.options.cache.enable) {
-            initValue = "";
-        }
-    }
-    return initValue || "";
+  });
+
+  // set default value
+  let initValue = accessLocalStorage() && localStorage.getItem(vditor.options.cache.id);
+  if (!vditor.options.cache.enable || !initValue) {
+    if (vditor.options.value) {
+      initValue = vditor.options.value;
+    } else if (vditor.originalInnerHTML) {
+      initValue = vditor.lute.HTML2Md(vditor.originalInnerHTML);
+    } else if (!vditor.options.cache.enable) {
+      initValue = "";
+    }
+  }
+  return initValue || "";
 };

package/src/ts/ui/setContentTheme.ts

@@ -8,7 +8,7 @@ export const setContentTheme = (contentTheme: string, path: string) => {
     const cssPath = `${path}/${contentTheme}.css`;
     if (!vditorContentTheme) {
         addStyle(cssPath, "vditorContentTheme");
-    } else if (vditorContentTheme.href !== cssPath) {
+    } else if (vditorContentTheme.getAttribute("href") !== cssPath) {
         vditorContentTheme.remove();
         addStyle(cssPath, "vditorContentTheme");
     }

package/src/ts/upload/index.ts

@@ -155,6 +155,9 @@ const uploadFiles =
 
         if (vditor.options.upload.handler) {
             const isValidate = await vditor.options.upload.handler(fileList);
+            if (element) {
+                element.value = "";
+            }
             if (typeof isValidate === "string") {
                 vditor.tip.show(isValidate);
                 return;

package/src/ts/util/Options.ts

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

package/src/ts/util/editorCommonEvent.ts

@@ -99,11 +99,11 @@ export const scrollCenter = (vditor: IVditor) => {
     }
     const editorElement = vditor[vditor.currentMode].element;
     const cursorTop = getCursorPosition(editorElement).top;
-    if (typeof vditor.options.height === "string" && !vditor.element.classList.contains("vditor--fullscreen")) {
+    if (vditor.options.height === "auto" && !vditor.element.classList.contains("vditor--fullscreen")) {
         window.scrollTo(window.scrollX,
             cursorTop + vditor.element.offsetTop + vditor.toolbar.element.offsetHeight - window.innerHeight / 2 + 10);
     }
-    if (typeof vditor.options.height === "number" || vditor.element.classList.contains("vditor--fullscreen")) {
+    if (vditor.options.height !== "auto" || vditor.element.classList.contains("vditor--fullscreen")) {
         editorElement.scrollTop = cursorTop + editorElement.scrollTop - editorElement.clientHeight / 2 + 10;
     }
 };

package/src/ts/util/fixBrowserBehavior.ts

@@ -1252,11 +1252,15 @@ export const fixFirefoxArrowUpTable = (event: KeyboardEvent, blockElement: false
 export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent) & { target: HTMLElement }, callback: {
     pasteCode(code: string): void,
 }) => {
+    if (vditor[vditor.currentMode].element.getAttribute("contenteditable") !== "true") {
+        return;
+    }
     event.stopPropagation();
     event.preventDefault();
     let textHTML;
     let textPlain;
     let files;
+
     if ("clipboardData" in event) {
         textHTML = event.clipboardData.getData("text/html");
         textPlain = event.clipboardData.getData("text/plain");
@@ -1410,8 +1414,32 @@ 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 || vditor.options.upload.handler)) {
-            await uploadFiles(vditor, files);
+        } else if (files.length > 0) {
+            if (vditor.options.upload.url || vditor.options.upload.handler) {
+                await uploadFiles(vditor, files);
+            } else {
+                const fileReader = new FileReader();
+                let file: File;
+                if ("clipboardData" in event) {
+                    files = event.clipboardData.files;
+                    file = files[0];
+                } else if (event.dataTransfer.types.includes("Files")) {
+                    files = event.dataTransfer.items;
+                    file = files[0].getAsFile();
+                }
+                if (file && file.type.startsWith("image")) {
+                    fileReader.readAsDataURL(file);
+                    fileReader.onload = () => {
+                        let imgHTML = ''
+                        if (vditor.currentMode === "wysiwyg") {
+                            imgHTML += `<img alt="${file.name}" src="${fileReader.result.toString()}">\n`;
+                        } else {
+                            imgHTML += `![${file.name}](${fileReader.result.toString()})\n`;
+                        }
+                        document.execCommand("insertHTML", false, imgHTML);
+                    }
+                }
+            }
         } else if (textPlain.trim() !== "" && files.length === 0) {
             if (vditor.currentMode === "ir") {
                 renderers.Md2VditorIRDOM = {renderLinkDest};

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -31,6 +31,7 @@ import {
 } from "../util/selection";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {removeBlockElement} from "./processKeydown";
+import {renderToc} from "../util/toc";
 
 export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
     clearTimeout(vditor.wysiwyg.hlToolbarTimeoutId);
@@ -931,6 +932,9 @@ const genClose = (element: HTMLElement, vditor: IVditor) => {
         element.remove();
         afterRenderEvent(vditor);
         highlightToolbarWYSIWYG(vditor);
+        if (["H1", "H2", "H3", "H4", "H5" ,"H6"].includes(element.tagName)) {
+            renderToc(vditor);
+        }
     };
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", close);
 };

package/src/ts/wysiwyg/index.ts

@@ -335,9 +335,11 @@ class WYSIWYG {
             }
             if (this.preventInput) {
                 this.preventInput = false;
+                afterRenderEvent(vditor);
                 return;
             }
             if (this.composingLock || event.data === "‘" || event.data === "“" || event.data === "《") {
+                afterRenderEvent(vditor);
                 return;
             }
             const range = getSelection().getRangeAt(0);