🐛 fix #155

Vanessa219 · Feb 19, 2020 · 66459a3 · 66459a3
1 parent a431cd0
commit 66459a3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@
 
 ### v2.2.2 / 2020-02-19
 
+* [155](https://github.com/Vanessa219/vditor/issues/155) blockquote 插入光标错误 `修复缺陷`
 * [154](https://github.com/Vanessa219/vditor/issues/154) the cursor is disapeared after tab pressed at editor mode `修复缺陷`
 * [153](https://github.com/Vanessa219/vditor/issues/153) Heading toolbar is not working `修复缺陷`
 * [148](https://github.com/Vanessa219/vditor/issues/148) 任务列表退格删除问题 `修复缺陷`

diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -42,6 +42,9 @@ export const highlightToolbar = (vditor: IVditor) => {
         if (range.startContainer.nodeType === 3) {
             typeElement = range.startContainer.parentElement;
         }
+        if (typeElement.classList.contains("vditor-wysiwyg")) {
+            typeElement = typeElement.childNodes[range.startOffset] as HTMLElement;
+        }
 
         // 工具栏高亮和禁用
         const liElement = hasClosestByMatchTag(typeElement, "LI");

diff --git a/src/ts/wysiwyg/toolbarEvent.ts b/src/ts/wysiwyg/toolbarEvent.ts
@@ -1,7 +1,7 @@
 import {Constants} from "../constants";
 import {setSelectionFocus} from "../editor/setSelection";
 import {setCurrentToolbar} from "../toolbar/setCurrentToolbar";
-import {hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestBlock, hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {genAPopover, highlightToolbar} from "./highlightToolbar";
 import {getNextHTML, getPreviousHTML} from "./inlineTag";
@@ -155,13 +155,18 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
         }
 
         if (commandName === "quote") {
-            const quoteElement = hasClosestByMatchTag(range.startContainer, "BLOCKQUOTE");
+            let quoteElement: HTMLElement | boolean
+            if (range.startContainer.nodeType !== 3 &&
+                (range.startContainer as HTMLElement).classList.contains("vditor-wysiwyg")) {
+                quoteElement = range.startContainer.childNodes[range.startOffset] as HTMLElement;
+            } else {
+                quoteElement = hasClosestByMatchTag(range.startContainer, "BLOCKQUOTE");
+            }
             if (quoteElement) {
-                const tempElement = document.createElement("div");
-                tempElement.innerHTML = quoteElement.innerHTML;
-                quoteElement.parentNode.replaceChild(tempElement, quoteElement);
+                range.insertNode(document.createElement("wbr"));
+                quoteElement.outerHTML = `<p data-block="0">${quoteElement.innerHTML}</p>`
+                setRangeByWbr(vditor.wysiwyg.element, range);
             }
-            vditor.wysiwyg.element.focus();
         } else if (commandName === "inline-code") {
             if (!range.collapsed) {
                 document.execCommand("removeFormat", false, "");
@@ -204,8 +209,18 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
         }
 
         if (commandName === "quote") {
-            document.execCommand("formatBlock", false, "BLOCKQUOTE");
-            getSelection().getRangeAt(0).startContainer.parentElement.setAttribute("data-block", "0");
+            let blockElement: HTMLElement | boolean
+            if (range.startContainer.nodeType !== 3 &&
+                (range.startContainer as HTMLElement).classList.contains("vditor-wysiwyg")) {
+                blockElement = range.startContainer.childNodes[range.startOffset] as HTMLElement;
+            } else {
+                blockElement = hasClosestBlock(range.startContainer);
+            }
+            if (blockElement) {
+                range.insertNode(document.createElement("wbr"));
+                blockElement.outerHTML = `<blockquote data-block="0">${blockElement.innerHTML}</blockquote>`;
+                setRangeByWbr(vditor.wysiwyg.element, range);
+            }
         } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
             listToggle(vditor, range, commandName, false);
             useHighlight = false;