From 09294f765e3117304237e7600e667d5f6a0c1adb Mon Sep 17 00:00:00 2001 From: Van Date: Wed, 19 Feb 2020 15:44:29 +0800 Subject: [PATCH] :bug: fix #153 --- CHANGELOG.md | 3 ++- src/ts/toolbar/Emoji.ts | 3 +++ src/ts/toolbar/Headings.ts | 17 ++++++++++------- src/ts/util/editorCommenEvent.ts | 2 ++ src/ts/wysiwyg/setHeading.ts | 25 ++++++++++++++----------- 5 files changed, 31 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9cdcb0724..3a702a518 100644 --- 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 index 7f317d431..65a6f6b81 100644 --- 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 index 253ca85b1..e76001124 100644 --- 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 = ` - - - - -`; + headingsPanelElement.innerHTML = ` + + + + +`; 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 index beb5087cf..e2103196b 100644 --- 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 index e4300cf4b..d1e9595a0 100644 --- 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}`; } - 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 = `

${blockElement.innerHTML}

`; } - highlightToolbar(vditor); + setRangeByWbr(vditor.wysiwyg.element, range); };