vditor 3.8.13 → 3.8.16

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

@@ -158,11 +158,11 @@
 
   span[data-type="link-ref"],
   sup[data-type="footnotes-ref"] {
-    color: $blurColor;
+    color: @blurColor;
   }
 
   span[data-type="toc-h"] {
-    color: $blurColor;
+    color: @blurColor;
     text-decoration: underline;
   }
 
@@ -177,7 +177,7 @@
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-wysiwyg {
     h1:before,
     h2:before,

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

@@ -29,7 +29,7 @@ export abstract class Constants {
     // ext
     "solidity", "yul"
   ];
-  public static readonly CDN = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
+  public static readonly CDN = `https://unpkg.com/vditor@${VDITOR_VERSION}`;
   public static readonly MARKDOWN_OPTIONS = {
     autoSpace: false,
     codeBlockPreview: true,

package/src/ts/ir/input.ts

@@ -11,6 +11,7 @@ import {processCodeRender} from "../util/processCode";
 import {getSelectPosition, setRangeByWbr} from "../util/selection";
 import {renderToc} from "../util/toc";
 import {processAfterRender} from "./process";
+import {getMarkdown} from "../markdown/getMarkdown";
 
 export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?: InputEvent) => {
     let blockElement = hasClosestBlock(range.startContainer);
@@ -51,6 +52,9 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
         }
 
         if (startSpace) {
+            if (typeof vditor.options.input === "function") {
+                vditor.options.input(getMarkdown(vditor));
+            }
             return;
         }
         if (endSpace) {
@@ -63,6 +67,9 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
                     // FireFox https://github.com/Vanessa219/vditor/issues/239
                     previousNode.classList.remove("vditor-ir__node--expand");
                 }
+                if (typeof vditor.options.input === "function") {
+                    vditor.options.input(getMarkdown(vditor));
+                }
                 return;
             }
         }
@@ -141,21 +148,23 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
             html = blockElement.previousElementSibling.outerHTML + html;
             blockElement.previousElementSibling.remove();
         }
-        // 添加链接引用
-        vditor.ir.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
-            if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
-                html += item.outerHTML;
-                item.remove();
-            }
-        });
+        if (!blockElement.innerText.startsWith("```")) {
+            // 添加链接引用
+            vditor.ir.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
+                if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
+                    html += item.outerHTML;
+                    item.remove();
+                }
+            });
 
-        // 添加脚注
-        vditor.ir.element.querySelectorAll("[data-type='footnotes-block']").forEach((item) => {
-            if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
-                html += item.outerHTML;
-                item.remove();
-            }
-        });
+            // 添加脚注
+            vditor.ir.element.querySelectorAll("[data-type='footnotes-block']").forEach((item) => {
+                if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
+                    html += item.outerHTML;
+                    item.remove();
+                }
+            });
+        }
     } else {
         html = blockElement.innerHTML;
     }

package/src/ts/sv/inputEvent.ts

@@ -140,22 +140,23 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
             html = blockElement.previousElementSibling.textContent + html;
             blockElement.previousElementSibling.remove();
         }
+        if (!blockElement.innerText.startsWith("```")) {
+            // 添加链接引用
+            vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item, index) => {
+                if (index === 0 && item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
+                    html += "\n" + item.parentElement.textContent;
+                    item.parentElement.remove();
+                }
+            });
 
-        // 添加链接引用
-        vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item, index) => {
-            if (index === 0 && item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
-                html += "\n" + item.parentElement.textContent;
-                item.parentElement.remove();
-            }
-        });
-
-        // 添加脚注
-        vditor.sv.element.querySelectorAll("[data-type='footnotes-link']").forEach((item, index) => {
-            if (index === 0 && item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
-                html += "\n" + item.parentElement.textContent;
-                item.parentElement.remove();
-            }
-        });
+            // 添加脚注
+            vditor.sv.element.querySelectorAll("[data-type='footnotes-link']").forEach((item, index) => {
+                if (index === 0 && item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
+                    html += "\n" + item.parentElement.textContent;
+                    item.parentElement.remove();
+                }
+            });
+        }
     }
     html = processSpinVditorSVDOM(html, vditor);
     if (isSVElement) {

package/src/ts/sv/process.ts

@@ -16,13 +16,19 @@ export const processPaste = (vditor: IVditor, text: string) => {
     if (!blockElement) {
         blockElement = vditor.sv.element;
     }
-    const html = "<div data-block='0'>" +
-        vditor.lute.Md2VditorSVDOM(blockElement.textContent).replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
-        "</div>";
+    let spinHTML = vditor.lute.SpinVditorSVDOM(blockElement.textContent)
+    if (spinHTML.indexOf('data-type="footnotes-link"') > -1 ||
+        spinHTML.indexOf('data-type="link-ref-defs-block"') > -1) {
+        spinHTML = "<div data-block='0'>" + spinHTML + "</div>";
+    } else {
+        spinHTML = "<div data-block='0'>" +
+            spinHTML.replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+            "</div>";
+    }
     if (blockElement.isEqualNode(vditor.sv.element)) {
-        blockElement.innerHTML = html;
+        blockElement.innerHTML = spinHTML;
     } else {
-        blockElement.outerHTML = html;
+        blockElement.outerHTML = spinHTML;
     }
     setRangeByWbr(vditor.sv.element, range);
 
@@ -49,9 +55,15 @@ export const getSideByType = (spanNode: Node, type: string, isPrevious = true) =
 
 export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
     log("SpinVditorSVDOM", html, "argument", vditor.options.debugger);
-    html = "<div data-block='0'>" +
-        vditor.lute.SpinVditorSVDOM(html).replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
-        "</div>";
+    const spinHTML = vditor.lute.SpinVditorSVDOM(html)
+    if (spinHTML.indexOf('data-type="footnotes-link"') > -1 ||
+        spinHTML.indexOf('data-type="link-ref-defs-block"') > -1) {
+        html = "<div data-block='0'>" + spinHTML + "</div>";
+    } else {
+        html = "<div data-block='0'>" +
+            spinHTML.replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+            "</div>";
+    }
     log("SpinVditorSVDOM", html, "result", vditor.options.debugger);
     return html;
 };

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/toolbar/Info.ts

@@ -12,7 +12,7 @@ export class Info extends MenuItem {
     <em>下一代的 Markdown 编辑器，为未来而构建</em>
 </p>
 <div style="display: flex;margin-bottom: 14px;flex-wrap: wrap;align-items: center">
-    <img src="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png" style="margin: 0 auto;height: 68px"/>
+    <img src="https://unpkg.com/vditor/dist/images/logo.png" style="margin: 0 auto;height: 68px"/>
     <div>&nbsp;&nbsp;</div>
     <div style="flex: 1;min-width: 250px">
         Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。