🎨 #217

Vanessa219 · Mar 11, 2020 · 38539b2 · 38539b2
1 parent 4046c63
commit 38539b2
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -51,6 +51,7 @@
 
 ### v2.3.0 / 未发布
 
+* [217](https://github.com/Vanessa219/vditor/issues/217) ToC 添加悬浮菜单及 bug 修复 `修复缺陷`
 * [216](https://github.com/Vanessa219/vditor/issues/216) subtoolbar 向下溢出 `修复缺陷`
 
 ### v2.2.19 / 2020-03-10

diff --git a/src/assets/scss/_wysiwyg.scss b/src/assets/scss/_wysiwyg.scss
@@ -106,31 +106,30 @@
     float: left;
     padding-right: 4px;
     margin-left: -29px;
-    content: 'h1';
+    content: 'H1';
     font-size: 0.85rem;
     font-weight: normal;
-    text-transform: uppercase;
     color: var(--second-color);
   }
 
   h2:before {
-    content: 'h2';
+    content: 'H2';
   }
 
   h3:before {
-    content: 'h3';
+    content: 'H3';
   }
 
   h4:before {
-    content: 'h4';
+    content: 'H4';
   }
 
   h5:before {
-    content: 'h5';
+    content: 'H5';
   }
 
   h6:before {
-    content: 'h6';
+    content: 'H6';
   }
 
   div[data-type="link-ref-defs-block"]:before {

diff --git a/src/ts/types/index.d.ts b/src/ts/types/index.d.ts
@@ -12,7 +12,7 @@ interface ILuteRender {
                 Type: number,
             },
         }
-    }, entering: boolean) => [string, number];
+    },               entering: boolean) => [string, number];
 }
 
 interface ILute {

diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -114,6 +114,30 @@ export const highlightToolbar = (vditor: IVditor) => {
             disableToolbar(vditor.toolbar.elements, ["table"]);
         }
 
+        // toc popover
+        let tocElement = hasClosestByClassName(typeElement, "vditor-toc") as HTMLElement;
+        if (!tocElement) {
+            const blockElement = hasClosestByAttribute(typeElement, "data-block", "0");
+            if (blockElement) {
+                if (blockElement.nextElementSibling?.classList.contains("vditor-toc")) {
+                    tocElement = blockElement.nextElementSibling as HTMLElement
+                }
+                if (blockElement.previousElementSibling?.classList.contains("vditor-toc")) {
+                    tocElement = blockElement.previousElementSibling as HTMLElement
+                }
+            }
+        }
+        if (tocElement) {
+            vditor.wysiwyg.popover.innerHTML = "";
+            const insertBefore = genInsertBefore(range, tocElement, vditor);
+            const insertAfter = genInsertAfter(range, tocElement, vditor);
+            const close = genClose(vditor.wysiwyg.popover, tocElement, vditor);
+            vditor.wysiwyg.popover.insertAdjacentElement("beforeend", close);
+            vditor.wysiwyg.popover.insertAdjacentElement("beforeend", insertBefore);
+            vditor.wysiwyg.popover.insertAdjacentElement("beforeend", insertAfter);
+            setPopoverPosition(vditor, tocElement);
+        }
+
         // quote popover
         const blockquoteElement = hasClosestByTag(typeElement, "BLOCKQUOTE") as HTMLTableElement;
         if (blockquoteElement) {
@@ -414,11 +438,6 @@ export const highlightToolbar = (vditor: IVditor) => {
             setPopoverPosition(vditor, tableElement);
         }
 
-        // a popover
-        if (aElement) {
-            genAPopover(vditor, aElement);
-        }
-
         // link ref popover
         const linkRefElement = hasClosestByAttribute(typeElement, "data-type", "link-ref");
         if (linkRefElement) {
@@ -693,8 +712,13 @@ export const highlightToolbar = (vditor: IVditor) => {
             headingElement = undefined;
         }
 
+        // a popover
+        if (aElement) {
+            genAPopover(vditor, aElement);
+        }
+
         if (!blockquoteElement && !imgElement && !topListElement && !tableElement && !blockRenderElement && !aElement
-            && !linkRefElement && !footnotesRefElement && !headingElement) {
+            && !linkRefElement && !footnotesRefElement && !headingElement && !tocElement) {
             vditor.wysiwyg.popover.style.display = "none";
         }