🐛 fix #122

Vanessa219 · Feb 9, 2020 · 1bd06c0 · 1bd06c0
1 parent 2887084
commit 1bd06c0
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,6 +43,7 @@
 ### v2.1.12 / 2020-02-07
 
 * [123](https://github.com/Vanessa219/vditor/issues/123) 加粗、强调前导空格问题 `修复缺陷`
+* [122](https://github.com/Vanessa219/vditor/issues/122) 在 p 中插入代码块 bug `修复缺陷`
 * [118](https://github.com/Vanessa219/vditor/issues/118) Firefox no cursor when ctrl+b pressed `修复缺陷`
 * [117](https://github.com/Vanessa219/vditor/issues/117) cursor moving problem near inline code `修复缺陷`
 * [115](https://github.com/Vanessa219/vditor/issues/115) codeblock difference between ``` and ctrl+u `修复缺陷`

diff --git a/src/ts/undo/WysiwygUndo.ts b/src/ts/undo/WysiwygUndo.ts
@@ -62,16 +62,20 @@ class WysiwygUndo {
 
     public addToUndoStack(vditor: IVditor) {
         // wysiwyg/afterRenderEvent.ts 已经 debounce
-        const range = getSelection().getRangeAt(0).cloneRange()
-        if (getSelection().rangeCount !== 0 && !vditor.wysiwyg.element.querySelector("wbr") &&
-            vditor.wysiwyg.element.contains(range.startContainer)) {
-            range.insertNode(document.createElement("wbr"));
+        let range
+        if (getSelection().rangeCount !== 0 && !vditor.wysiwyg.element.querySelector("wbr")) {
+            range = getSelection().getRangeAt(0).cloneRange()
+            if (vditor.wysiwyg.element.contains(range.startContainer)) {
+                range.insertNode(document.createElement("wbr"));
+            }
         }
         const cloneEditorElement = document.createElement("pre");
         cloneEditorElement.innerHTML = vditor.wysiwyg.element.innerHTML;
         addP2Li(cloneEditorElement);
         const text = vditor.lute.SpinVditorDOM(cloneEditorElement.innerHTML);
-        setRangeByWbr(vditor.wysiwyg.element, range);
+        if (range) {
+            setRangeByWbr(vditor.wysiwyg.element, range);
+        }
         const diff = this.dmp.diff_main(text, this.lastText, true);
         const patchList = this.dmp.patch_make(text, this.lastText, diff);
         if (patchList.length === 0) {

diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
@@ -174,7 +174,7 @@ class WYSIWYG {
             if (event.target.tagName === "INPUT") {
                 return;
             }
-            input(event, vditor, getSelection().getRangeAt(0).cloneRange());
+            input(vditor, getSelection().getRangeAt(0).cloneRange(), event);
         });
 
         this.element.addEventListener("input", (event: IHTMLInputEvent) => {
@@ -255,7 +255,7 @@ class WYSIWYG {
                 return;
             }
 
-            input(event, vditor, range);
+            input(vditor, range, event);
         });
 
         this.element.addEventListener("click", (event: IHTMLInputEvent) => {

diff --git a/src/ts/wysiwyg/input.ts b/src/ts/wysiwyg/input.ts
@@ -12,7 +12,7 @@ import {afterRenderEvent} from "./afterRenderEvent";
 import {processCodeRender} from "./processCodeRender";
 import {setRangeByWbr} from "./setRangeByWbr";
 
-export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) => {
+export const input = (vditor: IVditor, range: Range, event: IHTMLInputEvent) => {
     let blockElement = hasClosestBlock(range.startContainer);
 
     // 列表需要到最顶层

diff --git a/src/ts/wysiwyg/toolbarEvent.ts b/src/ts/wysiwyg/toolbarEvent.ts
@@ -1,12 +1,12 @@
 import {Constants} from "../constants";
 import {setSelectionFocus} from "../editor/setSelection";
 import {setCurrentToolbar} from "../toolbar/setCurrentToolbar";
-import {hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {genAPopover, highlightToolbar} from "./highlightToolbar";
 import {getNextHTML, getPreviousHTML} from "./inlineTag";
-import {processCodeRender} from "./processCodeRender";
 import {setRangeByWbr} from "./setRangeByWbr";
+import {processCodeRender} from "./processCodeRender";
 
 const listToggle = (vditor: IVditor, range: Range, type: string, cancel = true) => {
     const itemElement = hasClosestByMatchTag(range.startContainer, "LI");
@@ -233,18 +233,20 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
             node.setAttribute("data-marker", "```");
             if (range.toString() === "") {
                 node.innerHTML = `<pre><code></code></pre>`;
-                range.insertNode(node);
-                range.selectNodeContents(node.firstChild.firstChild);
-                setSelectionFocus(range);
             } else {
                 node.innerHTML = `<pre><code>${range.toString()}</code></pre>`;
                 range.deleteContents();
-                range.insertNode(node);
-                range.selectNodeContents(node.firstChild.firstChild);
-                setSelectionFocus(range);
             }
-            processCodeRender(node, vditor);
-            (node.querySelector(".vditor-wysiwyg__preview") as HTMLElement).click();
+            range.insertNode(node);
+            const blockElement = hasClosestByAttribute(range.startContainer, 'data-block', '0')
+            if (blockElement) {
+                blockElement.outerHTML = vditor.lute.SpinVditorDOM(blockElement.outerHTML);
+            }
+            setRangeByWbr(vditor.wysiwyg.element, range);
+            const codeRenderElement = hasClosestByClassName(range.startContainer, 'vditor-wysiwyg__block')
+            if (codeRenderElement) {
+                processCodeRender(codeRenderElement, vditor);
+            }
         } else if (commandName === "link") {
             if (range.toString() === "") {
                 const aElement = document.createElement("a");