vditor 3.8.11 → 3.8.14

package/src/ts/toolbar/Emoji.ts

@@ -1,5 +1,6 @@
 import {getEventName} from "../util/compatibility";
 import {execAfterRender} from "../util/fixBrowserBehavior";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
 import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
 import {MenuItem} from "./MenuItem";
 import {toggleSubMenu} from "./setToolbar";
@@ -23,26 +24,24 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
  data-key="${key}"><span class="vditor-emojis__icon">${emojiValue}</span></button>`;
             }
         });
-
-        const tailHTML = `<div class="vditor-emojis__tail">
-    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
-</div>`;
-
         panelElement.innerHTML = `<div class="vditor-emojis" style="max-height: ${
             vditor.options.height === "auto" ? "auto" : vditor.options.height as number - 80
-        }px">${commonEmojiHTML}</div>${tailHTML}`;
+        }px">${commonEmojiHTML}</div><div class="vditor-emojis__tail">
+    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
+</div>`;
 
         this.element.appendChild(panelElement);
 
-        toggleSubMenu(vditor, panelElement, this.element.children[0], menuItem.level);
-        this._bindEvent(vditor, panelElement);
+        toggleSubMenu(vditor, panelElement, this.element.firstElementChild, menuItem.level);
+        this.bindEvent(vditor);
     }
 
-    public _bindEvent(vditor: IVditor, panelElement: HTMLElement) {
-        panelElement.querySelectorAll(".vditor-emojis button").forEach((element: HTMLElement) => {
-            element.addEventListener(getEventName(), (event: Event) => {
+    private bindEvent(vditor: IVditor) {
+        this.element.lastElementChild.addEventListener(getEventName(), (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
                 event.preventDefault();
-                const value = element.getAttribute("data-value");
+                const value = btnElement.getAttribute("data-value");
                 const range = getEditorRange(vditor);
                 let html = value;
                 if (vditor.currentMode === "wysiwyg") {
@@ -61,15 +60,15 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 }
                 range.collapse(false);
                 setSelectionFocus(range);
-                panelElement.style.display = "none";
+                (this.element.lastElementChild as HTMLElement).style.display = "none";
                 execAfterRender(vditor);
-            });
-            element.addEventListener("mouseover", (event: Event) => {
-                if ((event.target as HTMLElement).tagName === "BUTTON") {
-                    panelElement.querySelector(".vditor-emojis__tip").innerHTML =
-                        (event.target as HTMLElement).getAttribute("data-key");
-                }
-            });
+            }
+        });
+        this.element.lastElementChild.addEventListener("mouseover", (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
+                this.element.querySelector(".vditor-emojis__tip").innerHTML = btnElement.getAttribute("data-key");
+            }
         });
     }
 }

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/undo/index.ts

@@ -6,6 +6,7 @@ import {execAfterRender} from "../util/fixBrowserBehavior";
 import {highlightToolbar} from "../util/highlightToolbar";
 import {processCodeRender} from "../util/processCode";
 import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {renderToc} from "../util/toc";
 
 interface IUndo {
     hasUndo: boolean;
@@ -165,6 +166,8 @@ class Undo {
             scrollCenter(vditor);
         }
 
+        renderToc(vditor);
+
         execAfterRender(vditor, {
             enableAddUndoStack: false,
             enableHint: false,

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>\n`;
+ data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre><pre class="vditor-wysiwyg__preview" data-render="1"><audio controls="controls" src="${path}"></audio></pre></div>\n`;
             } else if (vditor.currentMode === "ir") {
                 succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
             } else {

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