:bug: hr 识别为 heading

src/ts/ir/highlightToolbar.ts

@@ -1,5 +1,5 @@
 import {disableToolbar, enableToolbar, removeCurrentToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
-import {hasClosestByAttribute, hasClosestByMatchTag, hasClosestByTag} from "../util/hasClosest";
+import {hasClosestByAttribute, hasClosestByHeadings, hasClosestByMatchTag} from "../util/hasClosest";
 import {getEditorRange, selectIsEditor} from "../util/selection";
 
 export const highlightToolbar = (vditor: IVditor) => {
@@ -26,8 +26,8 @@ export const highlightToolbar = (vditor: IVditor) => {
             typeElement = typeElement.childNodes[range.startOffset] as HTMLElement;
         }
 
-        const headingElement = hasClosestByTag(typeElement, "H");
-        if (headingElement && headingElement.tagName.length === 2) {
+        const headingElement = hasClosestByHeadings(typeElement);
+        if (headingElement) {
             setCurrentToolbar(vditor.toolbar.elements, ["headings"]);
         }
 

src/ts/ir/process.ts

@@ -79,7 +79,7 @@ export const processAfterRender = (vditor: IVditor, options = {
 };
 
 export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
-    const codeElement = previewPanel.querySelector("code")
+    const codeElement = previewPanel.querySelector("code");
     if (!codeElement) {
         return;
     }
@@ -105,7 +105,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         codeRender(previewPanel, vditor.options.lang);
     }
 
-    previewPanel.setAttribute('data-render', '1');
+    previewPanel.setAttribute("data-render", "1");
 };
 
 export const processHeading = (vditor: IVditor, value: string) => {

src/ts/util/fixBrowserBehavior.ts

@@ -9,7 +9,7 @@ import {
     getTopList,
     hasClosestBlock,
     hasClosestByAttribute,
-    hasClosestByClassName,
+    hasClosestByClassName, hasClosestByHeadings,
     hasClosestByMatchTag,
 } from "./hasClosest";
 import {getLastNode} from "./hasClosest";
@@ -326,7 +326,7 @@ export const renderToc = (editorElement: HTMLPreElement) => {
     }
     let tocHTML = "";
     Array.from(editorElement.children).forEach((item: HTMLElement) => {
-        if (item.tagName.indexOf("H") === 0 && item.tagName.length === 2 && item.textContent.trim() !== "") {
+        if (hasClosestByHeadings(item)) {
             const space = new Array((parseInt(item.tagName.substring(1), 10) - 1) * 2).fill(" ").join("");
             tocHTML += `${space}<span data-type="toc-h">${item.textContent.trim()}</span><br>`;
         }

src/ts/util/hasClosest.ts

@@ -1,3 +1,11 @@
+export const hasClosestByHeadings = (element: Node) => {
+    const headingElement = hasClosestByTag(element, "H");
+    if (headingElement && headingElement.tagName.length === 2 && headingElement.tagName !== "HR") {
+       return headingElement;
+    }
+    return false;
+};
+
 export const hasClosestByTag = (element: Node, nodeName: string) => {
     if (!element) {
         return false;

src/ts/wysiwyg/highlightToolbar.ts

@@ -14,7 +14,7 @@ import {isCtrl, updateHotkeyTip} from "../util/compatibility";
 import {listIndent, listOutdent, setTableAlign} from "../util/fixBrowserBehavior";
 import {
     hasClosestByAttribute,
-    hasClosestByClassName,
+    hasClosestByClassName, hasClosestByHeadings,
     hasClosestByMatchTag,
     hasClosestByTag,
     hasTopClosestByTag,
@@ -90,6 +90,7 @@ export const highlightToolbar = (vditor: IVditor) => {
             setCurrentToolbar(vditor.toolbar.elements, ["link"]);
         }
         const tableElement = hasClosestByMatchTag(typeElement, "TABLE") as HTMLTableElement;
+        const headingElement = hasClosestByHeadings(typeElement) as HTMLElement;
         if (hasClosestByMatchTag(typeElement, "CODE")) {
             if (hasClosestByMatchTag(typeElement, "PRE")) {
                 disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
@@ -100,7 +101,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                     "list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
                 setCurrentToolbar(vditor.toolbar.elements, ["inline-code"]);
             }
-        } else if (hasClosestByTag(typeElement, "H")) {
+        } else if (headingElement) {
             disableToolbar(vditor.toolbar.elements, ["bold"]);
             setCurrentToolbar(vditor.toolbar.elements, ["headings"]);
         } else if (tableElement) {
@@ -528,8 +529,7 @@ export const highlightToolbar = (vditor: IVditor) => {
             });
         }
 
-        let headingElement = hasClosestByTag(typeElement, "H") as HTMLElement;
-        if (headingElement && headingElement.tagName.length === 2) {
+        if (headingElement) {
             vditor.wysiwyg.popover.innerHTML = "";
 
             const inputWrap = document.createElement("span");
@@ -559,8 +559,6 @@ export const highlightToolbar = (vditor: IVditor) => {
             genClose(vditor.wysiwyg.popover, headingElement, vditor);
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
             setPopoverPosition(vditor, headingElement);
-        } else {
-            headingElement = undefined;
         }
 
         // a popover
@@ -738,7 +736,7 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
 };
 
 export const genImagePopover = (event: Event, vditor: IVditor) => {
-    let imgElement = event.target as HTMLImageElement
+    let imgElement = event.target as HTMLImageElement;
     vditor.wysiwyg.popover.innerHTML = "";
     const updateImg = () => {
         imgElement.setAttribute("src", inputElement.value);
@@ -803,4 +801,4 @@ export const genImagePopover = (event: Event, vditor: IVditor) => {
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", aHrefWrap);
 
     setPopoverPosition(vditor, imgElement);
-}
+};

src/ts/wysiwyg/index.ts

@@ -5,10 +5,11 @@ import {focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommenEvent";
 import {isHeadingMD, isHrMD, renderToc} from "../util/fixBrowserBehavior";
 import {
     hasClosestBlock, hasClosestByAttribute,
-    hasClosestByClassName, hasClosestByMatchTag,
+    hasClosestByClassName, hasClosestByHeadings, hasClosestByMatchTag,
 } from "../util/hasClosest";
 import {processPasteCode} from "../util/processPasteCode";
 import {
+    getEditorRange,
     getSelectPosition,
     insertHTML,
     setRangeByWbr,
@@ -225,9 +226,8 @@ class WYSIWYG {
         });
 
         this.element.addEventListener("compositionend", (event: InputEvent) => {
-            const blockElement = hasClosestBlock(getSelection().getRangeAt(0).startContainer);
-            if (blockElement && blockElement.tagName.indexOf("H") === 0 && blockElement.textContent === ""
-                && blockElement.tagName.length === 2) {
+            const headingElement = hasClosestByHeadings(getSelection().getRangeAt(0).startContainer);
+            if (headingElement && headingElement.textContent === "") {
                 // heading 为空删除 https://github.com/Vanessa219/vditor/issues/150
                 renderToc(this.element);
                 return;
@@ -280,8 +280,8 @@ class WYSIWYG {
                 }
             }
 
-            if (blockElement.tagName.indexOf("H") === 0 && blockElement.textContent === ""
-                && blockElement.tagName.length === 2) {
+            const headingElement = hasClosestByHeadings(getSelection().getRangeAt(0).startContainer);
+            if (headingElement && headingElement.textContent === "") {
                 // heading 为空删除 https://github.com/Vanessa219/vditor/issues/150
                 renderToc(this.element);
                 return;
@@ -308,7 +308,7 @@ class WYSIWYG {
             }
 
             if (event.target.tagName === "IMG") {
-                genImagePopover(event, vditor)
+                genImagePopover(event, vditor);
                 return;
             }
 
@@ -337,7 +337,7 @@ class WYSIWYG {
                 vditor.wysiwyg.element.innerHTML = "";
             }
 
-            const range = getSelection().getRangeAt(0);
+            const range = getEditorRange(this.element);
 
             if (event.key === "Backspace") {
                 // firefox headings https://github.com/Vanessa219/vditor/issues/211

src/ts/wysiwyg/input.ts

@@ -2,7 +2,7 @@ import {isToC, renderToc} from "../util/fixBrowserBehavior";
 import {
     getTopList,
     hasClosestBlock, hasClosestByAttribute,
-    hasClosestByClassName,
+    hasClosestByClassName, hasClosestByHeadings,
     hasClosestByTag,
 } from "../util/hasClosest";
 import {log} from "../util/log";
@@ -47,7 +47,7 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
             previousAEmptyElement.remove();
         }
 
-        if (blockElement.tagName.indexOf("H") === 0 && blockElement.tagName.length === 2) {
+        if (hasClosestByHeadings(blockElement)) {
             renderToc(vditor.wysiwyg.element);
         }
 

src/ts/wysiwyg/processKeydown.ts

@@ -13,8 +13,8 @@ import {
 import {
     hasClosestBlock,
     hasClosestByAttribute,
-    hasClosestByClassName,
-    hasClosestByMatchTag, hasClosestByTag,
+    hasClosestByClassName, hasClosestByHeadings,
+    hasClosestByMatchTag,
     hasTopClosestByTag,
 } from "../util/hasClosest";
 import {matchHotKey} from "../util/hotKey";
@@ -122,8 +122,8 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     }
 
     // h1-h6
-    const headingElement = hasClosestByTag(startContainer, "H");
-    if (headingElement && headingElement.tagName.length === 2) {
+    const headingElement = hasClosestByHeadings(startContainer);
+    if (headingElement) {
         if (headingElement.tagName === "H6" && startContainer.textContent.length === range.startOffset &&
             !isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Enter") {
             // enter: H6 回车解析问题 https://github.com/Vanessa219/vditor/issues/48