🐛 fix #153

Vanessa219 · Feb 19, 2020 · 09294f7 · 09294f7
1 parent acf900c
commit 09294f7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,8 +46,9 @@
 * [81](https://github.com/Vanessa219/vditor/issues/81) 链接和图片嵌套问题 `修复缺陷`
 
 
-### v2.2.1 / 2020-02-18
+### v2.2.2 / 2020-02-19
 
+* [153](https://github.com/Vanessa219/vditor/issues/153) Heading toolbar is not working `修复缺陷`
 * [148](https://github.com/Vanessa219/vditor/issues/148) 任务列表退格删除问题 `修复缺陷`
 * [141](https://github.com/Vanessa219/vditor/issues/141) toolbar 添加箭头，默认表情修改 `改进功能`
 * [140](https://github.com/Vanessa219/vditor/issues/140) *** after shift+enter `修复缺陷`

diff --git a/src/ts/toolbar/Emoji.ts b/src/ts/toolbar/Emoji.ts
@@ -63,6 +63,9 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 event.preventDefault();
                 const value = element.getAttribute("data-value");
                 if (vditor.currentMode === "wysiwyg") {
+                    if (!vditor.wysiwyg.element.contains(getSelection().getRangeAt(0).startContainer)) {
+                        vditor.wysiwyg.element.focus();
+                    }
                     const range = getSelection().getRangeAt(0);
                     if (value.indexOf(":") > -1) {
                         insertHTML(vditor.lute.SpinVditorDOM(value), vditor);

diff --git a/src/ts/toolbar/Headings.ts b/src/ts/toolbar/Headings.ts
@@ -3,6 +3,7 @@ import {insertText} from "../editor/insertText";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {removeHeading, setHeading} from "../wysiwyg/setHeading";
 import {MenuItem} from "./MenuItem";
+import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 
 export class Headings extends MenuItem {
     public element: HTMLElement;
@@ -13,12 +14,12 @@ export class Headings extends MenuItem {
 
         const headingsPanelElement = document.createElement("div");
         headingsPanelElement.className = "vditor-hint vditor-arrow";
-        headingsPanelElement.innerHTML = `<button data-value="# ">Heading 1 ${updateHotkeyTip("<⌘-⌥-1>")}</button>
-<button data-value="## ">Heading 2 ${updateHotkeyTip("<⌘-⌥-2>")}</button>
-<button data-value="### ">Heading 3 ${updateHotkeyTip("<⌘-⌥-3>")}</button>
-<button data-value="#### ">Heading 4 ${updateHotkeyTip("<⌘-⌥-4>")}</button>
-<button data-value="##### ">Heading 5 ${updateHotkeyTip("<⌘-⌥-5>")}</button>
-<button data-value="###### ">Heading 6 ${updateHotkeyTip("<⌘-⌥-6>")}</button>`;
+        headingsPanelElement.innerHTML = `<button data-tag="h1" data-value="# ">Heading 1 ${updateHotkeyTip("&lt;⌘-⌥-1>")}</button>
+<button data-tag="h2" data-value="## ">Heading 2 ${updateHotkeyTip("&lt;⌘-⌥-2>")}</button>
+<button data-tag="h3" data-value="### ">Heading 3 ${updateHotkeyTip("&lt;⌘-⌥-3>")}</button>
+<button data-tag="h4" data-value="#### ">Heading 4 ${updateHotkeyTip("&lt;⌘-⌥-4>")}</button>
+<button data-tag="h5" data-value="##### ">Heading 5 ${updateHotkeyTip("&lt;⌘-⌥-5>")}</button>
+<button data-tag="h6" data-value="###### ">Heading 6 ${updateHotkeyTip("&lt;⌘-⌥-6>")}</button>`;
 
         this.element.appendChild(headingsPanelElement);
 
@@ -30,6 +31,7 @@ export class Headings extends MenuItem {
             const actionBtn = this.element.children[0];
             if (vditor.currentMode === "wysiwyg" && actionBtn.classList.contains("vditor-menu--current")) {
                 removeHeading(vditor);
+                afterRenderEvent(vditor);
             } else {
                 if (headingsPanelElement.style.display === "block") {
                     headingsPanelElement.style.display = "none";
@@ -50,7 +52,8 @@ export class Headings extends MenuItem {
         for (let i = 0; i < 6; i++) {
             headingsPanelElement.children.item(i).addEventListener(getEventName(), (event: Event) => {
                 if (vditor.currentMode === "wysiwyg") {
-                    setHeading(vditor, (event.target as HTMLElement).tagName.toLowerCase());
+                    setHeading(vditor, (event.target as HTMLElement).getAttribute("data-tag"));
+                    afterRenderEvent(vditor);
                 } else {
                     insertText(vditor, (event.target as HTMLElement).getAttribute("data-value"), "",
                         false, true);

diff --git a/src/ts/util/editorCommenEvent.ts b/src/ts/util/editorCommenEvent.ts
@@ -8,6 +8,7 @@ import {isCtrl} from "./compatibility";
 import {getMarkdown} from "./getMarkdown";
 import {hasClosestByMatchTag} from "./hasClosest";
 import {processKeymap} from "./processKeymap";
+import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 
 export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("focus", () => {
@@ -160,6 +161,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
                 } else {
                     setHeading(vditor, tagName);
                 }
+                afterRenderEvent(vditor);
             } else {
                 insertText(vditor,
                     "#".repeat(parseInt(event.code.replace("Digit", ""), 10)) + " ",

diff --git a/src/ts/wysiwyg/setHeading.ts b/src/ts/wysiwyg/setHeading.ts
@@ -1,21 +1,24 @@
-import {highlightToolbar} from "./highlightToolbar";
+import {hasClosestBlock} from "../util/hasClosest";
+import {setRangeByWbr} from "./setRangeByWbr";
 
 export const setHeading = (vditor: IVditor, tagName: string) => {
-    document.execCommand("formatblock", false, tagName);
-    // https://github.com/Vanessa219/vditor/issues/50
     const range = getSelection().getRangeAt(0);
-    if (!range.collapsed && !range.startContainer.isEqualNode(range.endContainer)) {
-        range.setStart(range.endContainer, 0);
+    range.insertNode(document.createElement("wbr"));
+
+    const blockElement = hasClosestBlock(range.startContainer);
+    if (blockElement) {
+        blockElement.outerHTML = `<${tagName} data-block="0">${blockElement.innerHTML}</${tagName}>`;
     }
-    highlightToolbar(vditor);
+    setRangeByWbr(vditor.wysiwyg.element, range);
 };
 
 export const removeHeading = (vditor: IVditor) => {
-    document.execCommand("formatBlock", false, "p");
-    // https://github.com/Vanessa219/vditor/issues/50
     const range = getSelection().getRangeAt(0);
-    if (!range.collapsed && !range.startContainer.isEqualNode(range.endContainer)) {
-        range.setStart(range.endContainer, 0);
+    range.insertNode(document.createElement("wbr"));
+
+    const blockElement = hasClosestBlock(range.startContainer);
+    if (blockElement) {
+        blockElement.outerHTML = `<p data-block="0">${blockElement.innerHTML}</p>`;
     }
-    highlightToolbar(vditor);
+    setRangeByWbr(vditor.wysiwyg.element, range);
 };