:sparkles: #830

CHANGELOG.md

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

src/assets/scss/_content.scss

@@ -236,7 +236,14 @@
       display: none;
     }
 
-    &__item {
+    ul {
+      list-style: none !important;
+      padding-left: 1em;
+      margin: 0;
+    }
+
+    li > span {
+      display: block;
       padding: 5px 10px;
       cursor: pointer;
       white-space: nowrap;
@@ -246,7 +253,6 @@
 
       &:hover {
         color: var(--toolbar-icon-hover-color);
-        background-color: var(--toolbar-background-color);
       }
     }
 

src/assets/scss/_reset.scss

@@ -500,6 +500,7 @@
 
     ul {
       list-style: none !important;
+      padding-left: 1em;
     }
 
     span {

src/ts/ir/index.ts

@@ -19,6 +19,7 @@ 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;
@@ -162,7 +163,7 @@ class IR {
                     expandMarker(getEditorRange(this.element), vditor);
                 });
             }
-
+            clickToc(event, vditor);
             highlightToolbarIR(vditor);
         });
 

src/ts/outline/index.ts

@@ -13,14 +13,14 @@ export class Outline {
     }
 
     public render(vditor: IVditor) {
-        if (this.element.style.display === "block") {
-            if (vditor.preview.element.style.display === "block") {
-                outlineRender(vditor.preview.element.lastElementChild as HTMLElement,
-                    this.element.lastElementChild, vditor);
-            } else {
-                outlineRender(vditor[vditor.currentMode].element, this.element.lastElementChild, vditor);
-            }
+        let html = "";
+        if (vditor.preview.element.style.display === "block") {
+            html = outlineRender(vditor.preview.element.lastElementChild as HTMLElement,
+                this.element.lastElementChild, vditor);
+        } else {
+            html = outlineRender(vditor[vditor.currentMode].element, this.element.lastElementChild, vditor);
         }
+        return html;
     }
 
     public toggle(vditor: IVditor, show = true) {

src/ts/toolbar/EditMode.ts

@@ -18,6 +18,7 @@ import {
     removeCurrentToolbar,
     showToolbar, toggleSubMenu,
 } from "./setToolbar";
+import {renderToc} from "../util/toc";
 
 export const setEditMode = (vditor: IVditor, type: string, event: Event | string) => {
     let markdownText;
@@ -122,9 +123,7 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
         vditor[vditor.currentMode].element.focus();
         highlightToolbar(vditor);
     }
-    if (typeof event === "string") {
-        vditor.outline.render(vditor);
-    }
+    renderToc(vditor);
     setTypewriterPosition(vditor);
 
     if (vditor.toolbar.elements["edit-mode"]) {

src/ts/util/toc.ts

@@ -1,27 +1,13 @@
 import {mathRender} from "../markdown/mathRender";
 import {hasClosestByClassName, hasClosestByMatchTag} from "./hasClosest";
-import {hasClosestByHeadings} from "./hasClosestByHeadings";
 import {getSelectPosition} from "./selection";
 import {execAfterRender, insertAfterBlock, insertBeforeBlock} from "./fixBrowserBehavior";
 
 export const renderToc = (vditor: IVditor) => {
     const editorElement = vditor[vditor.currentMode].element;
-    let tocHTML = "";
-    Array.from(editorElement.children).forEach((item: HTMLElement) => {
-        if (hasClosestByHeadings(item)) {
-            tocHTML += item.outerHTML;
-        }
-    });
+    let tocHTML = vditor.outline.render(vditor);
     if (tocHTML === "") {
         tocHTML = "[ToC]";
-    } else {
-        const tempElement = document.createElement("div");
-        if (vditor.currentMode === "wysiwyg") {
-            tempElement.innerHTML = vditor.lute.SpinVditorDOM("<p>[ToC]</p>" + tocHTML);
-        } else if (vditor.currentMode === "ir") {
-            tempElement.innerHTML = vditor.lute.SpinVditorIRDOM("<p>[ToC]</p>" + tocHTML);
-        }
-        tocHTML = tempElement.firstElementChild.innerHTML;
     }
     editorElement.querySelectorAll('[data-type="toc-block"]').forEach((item: HTMLElement) => {
         item.innerHTML = tocHTML;

src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -131,6 +131,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             vditor.wysiwyg.popover.innerHTML = "";
             genClose(tocElement, vditor);
             setPopoverPosition(vditor, tocElement);
+            return;
         }
 
         // quote popover

types/index.d.ts

@@ -572,7 +572,7 @@ interface IVditor {
     };
     outline: {
         element: HTMLElement,
-        render(vditor: IVditor): void,
+        render(vditor: IVditor): string,
         toggle(vditor: IVditor, show?: boolean): void,
     };
     toolbar?: {