:rotating_light:

CHANGELOG.md

@@ -88,7 +88,7 @@
 
 ### v3.7.0 / 2020-11-xx
 
-* [497](https://github.com/Vanessa219/vditor/issues/497) 大纲折叠 `改进功能`
+* [479](https://github.com/Vanessa219/vditor/issues/479) 大纲折叠 `改进功能`
 * [830](https://github.com/Vanessa219/vditor/issues/830) ToC 优化 `改进功能`
 * [828](https://github.com/Vanessa219/vditor/issues/828) 为 Vditor.preview 添加 mode 设置 `修复缺陷`
 * 文档修改

demo/index.js

@@ -119,6 +119,9 @@ window.vditor = new Vditor('vditor', {
     token: 'test',
     url: '/api/upload/editor',
     linkToImgUrl: '/api/upload/fetch',
+    handler (files) {
+      console.log(files)
+    },
     filename (name) {
       return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
         replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').

src/ts/ir/index.ts

@@ -15,11 +15,11 @@ import {
     getEditorRange, setRangeByWbr,
     setSelectionFocus,
 } from "../util/selection";
+import {clickToc} from "../util/toc";
 import {expandMarker} from "./expandMarker";
 import {highlightToolbarIR} from "./highlightToolbarIR";
 import {input} from "./input";
 import {processAfterRender, processHint} from "./process";
-import {clickToc} from "../util/toc";
 
 class IR {
     public element: HTMLPreElement;

src/ts/ir/processKeydown.ts

@@ -21,9 +21,9 @@ import {
 import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {matchHotKey} from "../util/hotKey";
 import {getEditorRange, getSelectPosition, setSelectionFocus} from "../util/selection";
+import {keydownToc} from "../util/toc";
 import {expandMarker} from "./expandMarker";
 import {processAfterRender, processHeading} from "./process";
-import {keydownToc} from "../util/toc";
 
 export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     vditor.ir.composingLock = event.isComposing;

src/ts/markdown/outlineRender.ts

@@ -15,7 +15,8 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
         }
     });
     if (tocHTML === "") {
-        return ""
+        targetElement.innerHTML = "";
+        return "";
     }
     const tempElement = document.createElement("div");
     if (vditor) {
@@ -31,15 +32,20 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
         lute.SetToC(true);
         tempElement.innerHTML = lute.HTML2VditorDOM("<p>[ToC]</p>" + tocHTML);
     }
-    tempElement.firstElementChild.querySelectorAll("li > span[data-target-id]").forEach((item, index) => {
+    const headingsElement = tempElement.firstElementChild.querySelectorAll("li > span[data-target-id]")
+    headingsElement.forEach((item, index) => {
         if (item.nextElementSibling && item.nextElementSibling.tagName === "UL") {
-            item.insertAdjacentHTML("afterbegin", "<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg>")
+            item.insertAdjacentHTML("afterbegin", "<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg>");
         } else {
-            item.insertAdjacentHTML("afterbegin", "<svg class='vditor-outline__action'></svg>")
+            item.insertAdjacentHTML("afterbegin", "<svg class='vditor-outline__action'></svg>");
         }
         item.setAttribute("data-target-id", ids[index]);
     });
     tocHTML = tempElement.firstElementChild.innerHTML;
+    if (headingsElement.length === 0) {
+        targetElement.innerHTML = "";
+        return tocHTML;
+    }
     targetElement.innerHTML = tocHTML;
     if (vditor) {
         mathRender(targetElement as HTMLElement, {

src/ts/markdown/previewRender.ts

@@ -1,6 +1,7 @@
 import {Constants} from "../constants";
 import {setContentTheme} from "../ui/setContentTheme";
 import {addScript} from "../util/addScript";
+import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {merge} from "../util/merge";
 import {abcRender} from "./abcRender";
 import {anchorRender} from "./anchorRender";
@@ -16,7 +17,6 @@ import {mermaidRender} from "./mermaidRender";
 import {mindmapRender} from "./mindmapRender";
 import {setLute} from "./setLute";
 import {speechRender} from "./speechRender";
-import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption: IPreviewOptions = {
@@ -115,11 +115,12 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     previewElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
         const spanElement = hasClosestByMatchTag(event.target, "SPAN");
         if (spanElement && hasClosestByClassName(spanElement, "vditor-toc")) {
-            const headingElement = previewElement.querySelector("#" + spanElement.getAttribute("data-target-id")) as HTMLElement;
+            const headingElement =
+                previewElement.querySelector("#" + spanElement.getAttribute("data-target-id")) as HTMLElement;
             if (headingElement) {
                 window.scrollTo(window.scrollX, headingElement.offsetTop);
             }
             return;
         }
-    })
+    });
 };

src/ts/preview/index.ts

@@ -11,9 +11,9 @@ import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {getEventName} from "../util/compatibility";
+import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {hasClosestByTag} from "../util/hasClosestByHeadings";
 import {setSelectionFocus} from "../util/selection";
-import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 
 export class Preview {
     public element: HTMLElement;
@@ -40,13 +40,14 @@ export class Preview {
         previewElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
             const spanElement = hasClosestByMatchTag(event.target, "SPAN");
             if (spanElement && hasClosestByClassName(spanElement, "vditor-toc")) {
-                const headingElement = previewElement.querySelector("#" + spanElement.getAttribute("data-target-id")) as HTMLElement;
+                const headingElement =
+                    previewElement.querySelector("#" + spanElement.getAttribute("data-target-id")) as HTMLElement;
                 if (headingElement) {
                     this.element.scrollTop = headingElement.offsetTop;
                 }
                 return;
             }
-        })
+        });
 
         const actions = vditor.options.preview.actions;
         const actionElement = document.createElement("div");

src/ts/toolbar/EditMode.ts

@@ -8,6 +8,7 @@ import {setPadding, setTypewriterPosition} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {highlightToolbar} from "../util/highlightToolbar";
 import {processCodeRender} from "../util/processCode";
+import {renderToc} from "../util/toc";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
 import {
@@ -18,7 +19,6 @@ import {
     removeCurrentToolbar,
     showToolbar, toggleSubMenu,
 } from "./setToolbar";
-import {renderToc} from "../util/toc";
 
 export const setEditMode = (vditor: IVditor, type: string, event: Event | string) => {
     let markdownText;

src/ts/util/toc.ts

@@ -1,7 +1,7 @@
 import {mathRender} from "../markdown/mathRender";
+import {execAfterRender, insertAfterBlock, insertBeforeBlock} from "./fixBrowserBehavior";
 import {hasClosestByClassName, hasClosestByMatchTag} from "./hasClosest";
 import {getSelectPosition} from "./selection";
-import {execAfterRender, insertAfterBlock, insertBeforeBlock} from "./fixBrowserBehavior";
 
 export const renderToc = (vditor: IVditor) => {
     if (vditor.currentMode === "sv") {
@@ -47,7 +47,8 @@ export const keydownToc = (blockElement: HTMLElement, vditor: IVditor, event: Ke
     // toc 前无元素，插入空块
     if (blockElement.previousElementSibling &&
         blockElement.previousElementSibling.classList.contains("vditor-toc")) {
-        if (event.key === "Backspace" && getSelectPosition(blockElement, vditor[vditor.currentMode].element, range).start === 0) {
+        if (event.key === "Backspace" &&
+            getSelectPosition(blockElement, vditor[vditor.currentMode].element, range).start === 0) {
             blockElement.previousElementSibling.remove();
             execAfterRender(vditor);
             return true;
@@ -60,7 +61,8 @@ export const keydownToc = (blockElement: HTMLElement, vditor: IVditor, event: Ke
     if (blockElement.nextElementSibling &&
         blockElement.nextElementSibling.classList.contains("vditor-toc")) {
         if (event.key === "Delete" &&
-            getSelectPosition(blockElement, vditor[vditor.currentMode].element, range).start >= blockElement.textContent.trimRight().length) {
+            getSelectPosition(blockElement, vditor[vditor.currentMode].element, range).start
+            >= blockElement.textContent.trimRight().length) {
             blockElement.nextElementSibling.remove();
             execAfterRender(vditor);
             return true;
@@ -78,4 +80,4 @@ export const keydownToc = (blockElement: HTMLElement, vditor: IVditor, event: Ke
             return true;
         }
     }
-}
+};

src/ts/wysiwyg/processKeydown.ts

@@ -20,11 +20,11 @@ import {
 import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {matchHotKey} from "../util/hotKey";
 import {getEditorRange, getSelectPosition, setSelectionFocus} from "../util/selection";
+import {keydownToc} from "../util/toc";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {nextIsCode} from "./inlineTag";
 import {removeHeading, setHeading} from "./setHeading";
 import {showCode} from "./showCode";
-import {keydownToc} from "../util/toc";
 
 export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     // Chrome firefox 触发 compositionend 机制不一致 https://github.com/Vanessa219/vditor/issues/188