vditor 3.8.13 → 3.8.14

package/src/assets/{scss/index.scss → less/index.less}

@@ -1,23 +1,28 @@
-$errorColor: #d23f31 !default;
-$blurColor: #4285f4 !default;
+@errorColor: #d23f31;
+@blurColor: #4285f4;
 
-$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
+@font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans",
+  "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
+  "EmojiSymbols";
+@font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier,
+  monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+  "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
 
-$transition: all .15s ease-in-out !default;
+@transition: all 0.15s ease-in-out;
 
-$max-width: 520px !default;
+@max-width: 520px;
 
 .vditor {
   --border-color: #d1d5da;
   --second-color: rgba(88, 96, 105, 0.36);
 
   --panel-background-color: #fff;
-  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 
   --toolbar-background-color: #f6f8fa;
   --toolbar-icon-color: #586069;
-  --toolbar-icon-hover-color: #{$blurColor};
+  --toolbar-icon-hover-color: @blurColor;
   --toolbar-height: 35px;
   --toolbar-divider-margin-top: 8px;
 
@@ -29,7 +34,7 @@ $max-width: 520px !default;
   --resize-hover-icon-color: var(--panel-background-color);
   --resize-hover-background-color: var(--toolbar-icon-hover-color);
 
-  --count-background-color:rgba(27, 31, 35, .05);
+  --count-background-color: rgba(27, 31, 35, 0.05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
 
@@ -42,10 +47,10 @@ $max-width: 520px !default;
 
   &--dark {
     --border-color: #141414;
-    --second-color: rgba(185, 185, 185, .36);
+    --second-color: rgba(185, 185, 185, 0.36);
 
     --panel-background-color: #24292e;
-    --panel-shadow: 0 1px 2px rgba(255, 255, 255, .2);
+    --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
 
     --toolbar-background-color: #1d2125;
     --toolbar-icon-color: #b9b9b9;
@@ -57,9 +62,9 @@ $max-width: 520px !default;
     --resize-icon-color: var(--border-color);
     --resize-background-color: var(--second-color);
     --resize-hover-icon-color: var(--toolbar-icon-hover-color);
-    --resize-hover-background-color: rgba(185, 185, 185, .86);
+    --resize-hover-background-color: rgba(185, 185, 185, 0.86);
 
-    --count-background-color:  #{rgba($blurColor, .36)};
+    --count-background-color: rgba(@blurColor, 0.36);
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
 
@@ -72,12 +77,12 @@ $max-width: 520px !default;
   }
 }
 
-@import "tooltipped";
-@import "panel";
-@import "toolbar";
-@import "content";
-@import "hint";
-@import "reset";
-@import "wysiwyg";
-@import "ir";
-@import "sv";
+@import "_tooltipped";
+@import "_panel";
+@import "_toolbar";
+@import "_content";
+@import "_hint";
+@import "_reset";
+@import "_wysiwyg";
+@import "_ir";
+@import "_sv";

package/src/index.ts

@@ -1,4 +1,4 @@
-import "./assets/scss/index.scss";
+import "./assets/less/index.less";
 import VditorMethod from "./method";
 import {Constants, VDITOR_VERSION} from "./ts/constants";
 import {DevTools} from "./ts/devtools/index";
@@ -276,7 +276,7 @@ class Vditor extends VditorMethod {
     /** 设置编辑器内容 */
     public setValue(markdown: string, clearStack = false) {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.element.innerHTML = this.vditor.lute.SpinVditorSVDOM(markdown);
+            this.vditor.sv.element.innerHTML = `<div data-block='0'>${this.vditor.lute.SpinVditorSVDOM(markdown)}</div>`;
             processSVAfterRender(this.vditor, {
                 enableAddUndoStack: true,
                 enableHint: false,
@@ -327,7 +327,10 @@ class Vditor extends VditorMethod {
         this.vditor.element.innerHTML = this.vditor.originalInnerHTML;
         this.vditor.element.classList.remove("vditor");
         this.vditor.element.removeAttribute("style");
-        document.getElementById("vditorIconScript").remove();
+        const iconScript = document.getElementById("vditorIconScript")
+        if (iconScript) {
+            iconScript.remove();
+        }
         this.clearCache();
 
         UIUnbindListener();

package/src/ts/tip/index.ts

@@ -8,20 +8,28 @@ export class Tip {
 
     public show(text: string, time: number = 6000) {
         this.element.className = "vditor-tip vditor-tip--show";
-
         if (time === 0) {
             this.element.innerHTML = `<div class="vditor-tip__content">${text}
 <div class="vditor-tip__close">X</div></div>`;
             this.element.querySelector(".vditor-tip__close").addEventListener("click", () => {
                 this.hide();
             });
-            return;
+        } else {
+            this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+            setTimeout(() => {
+                this.hide();
+            }, time);
         }
 
-        this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+        // 需在动画结束后才能确定位置
+        this.element.removeAttribute("style")
         setTimeout(() => {
-            this.hide();
-        }, time);
+            const rect = this.element.getBoundingClientRect();
+            if (rect.top < 46) {
+                this.element.style.position = "fixed"
+                this.element.style.top = "46px"
+            }
+        }, 150);
     }
 
     public hide() {

package/src/ts/ui/initUI.ts

@@ -6,177 +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");
-    // 支持 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";
-    }
-    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/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;
     }
 };