:sparkles: fix #69

CHANGELOG.md

@@ -44,6 +44,7 @@
 ### v2.1.0 / 2020-01-14
 
 * [73](https://github.com/Vanessa219/vditor/issues/73) 添加链接卡片样式 `引入特性`
+* [69](https://github.com/Vanessa219/vditor/issues/69) 渲染块按 esc 可以进行退出代码块进行预览 `改进功能`
 
 ### v2.0.15 / 2020-01-11
 
@@ -59,7 +60,7 @@
 * [51](https://github.com/Vanessa219/vditor/issues/51) 引用多层嵌套无法一次性回到最外层 `引入特性`
 * [50](https://github.com/Vanessa219/vditor/issues/50) 标题前的段落结尾为 `\n` 时，标题的选中和取消会关联到 `\n` `修复缺陷`
 * [48](https://github.com/Vanessa219/vditor/issues/48) H6 回车 解析问题 `修复缺陷`
-* [47](https://github.com/Vanessa219/vditor/issues/47) <details> 改进 `功能改进`
+* [47](https://github.com/Vanessa219/vditor/issues/47) <details> 改进 `改进功能`
 * [46](https://github.com/Vanessa219/vditor/issues/46) add row 添加快捷键 `引入特性`
 * [45](https://github.com/Vanessa219/vditor/issues/45) 为列表 indent 和 outdent 添加快捷键 `引入特性`
 * [44](https://github.com/Vanessa219/vditor/issues/44) Unorderlist + Link 会缩进 `修复缺陷`

src/ts/util/editorCommenEvent.ts

@@ -6,7 +6,7 @@ import {getCursorPosition} from "../hint/getCursorPosition";
 import {deleteKey, tabKey} from "../wysiwyg/processKeydown";
 import {getCurrentLinePosition} from "./getCurrentLinePosition";
 import {getMarkdown} from "./getMarkdown";
-import {hasClosestByClassName} from "./hasClosest";
+import {hasClosestByAttribute, hasClosestByClassName} from "./hasClosest";
 
 export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("focus", () => {
@@ -93,6 +93,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             return;
         }
         const hintElement = vditor.hint && vditor.hint.element;
+        const range = getSelection().getRangeAt(0);
 
         vditor.undo.recordFirstPosition(vditor);
 
@@ -108,6 +109,14 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             if (hintElement && hintElement.style.display === "block") {
                 hintElement.style.display = "none";
             }
+            if (vditor.currentMode === "wysiwyg") {
+                const blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
+                if (blockElement) {
+                    vditor.wysiwyg.popover.style.display = "none";
+                    (blockElement.firstElementChild as HTMLElement).style.display = "none";
+                    vditor.wysiwyg.element.blur();
+                }
+            }
             return;
         }
 
@@ -214,7 +223,6 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
         }
 
         // 行级代码块中 ctrl + a，近对当前代码块进行全选
-        const range = getSelection().getRangeAt(0);
         if (vditor.currentMode === "wysiwyg" && range.startContainer.parentElement.tagName === "CODE" &&
             hasClosestByClassName(range.startContainer, "vditor-wysiwyg__block")) {
             if (processKeymap("⌘-a", event, () => {
@@ -288,14 +296,14 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             });
             processKeymap("⌘-⇧-e", event, () => {
                 const itemElement: HTMLElement = vditor.wysiwyg.popover.querySelector('[data-type="insert-after"]')
-                || vditor.wysiwyg.popover.querySelector('[data-type="indent"]');
+                    || vditor.wysiwyg.popover.querySelector('[data-type="indent"]');
                 if (itemElement) {
                     itemElement.click();
                 }
             });
             processKeymap("⌘-⇧-s", event, () => {
                 const itemElement: HTMLElement = vditor.wysiwyg.popover.querySelector('[data-type="insert-before"]')
-                || vditor.wysiwyg.popover.querySelector('[data-type="outdent"]');
+                    || vditor.wysiwyg.popover.querySelector('[data-type="outdent"]');
                 if (itemElement) {
                     itemElement.click();
                 }

src/ts/wysiwyg/index.ts

@@ -318,21 +318,21 @@ class WYSIWYG {
             }
 
             const range = getSelection().getRangeAt(0).cloneRange();
-            const isPureEnter = !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey
+            const isPureEnter = !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 
             // TABLE
             const cellElement = hasClosestByMatchTag(range.startContainer, "TD") ||
                 hasClosestByMatchTag(range.startContainer, "TH");
             if (cellElement) {
                 if (isPureEnter || (!event.metaKey && !event.ctrlKey && event.shiftKey && !event.altKey)) {
-                    const brElement = document.createElement("br")
+                    const brElement = document.createElement("br");
                     if (!cellElement.lastChild ||
-                        (cellElement.lastChild.nodeType === 3 && cellElement.lastChild.textContent !== '')) {
-                        cellElement.appendChild(document.createElement("br"))
+                        (cellElement.lastChild.nodeType === 3 && cellElement.lastChild.textContent !== "")) {
+                        cellElement.appendChild(document.createElement("br"));
                     }
                     range.insertNode(brElement);
                     range.setStartAfter(brElement);
-                    range.collapse(false)
+                    range.collapse(false);
                     setSelectionFocus(range);
                     afterRenderEvent(vditor);
                     event.preventDefault();

src/ts/wysiwyg/processCodeRender.ts

@@ -71,7 +71,7 @@ export const processCodeRender = (blockElement: HTMLElement, vditor: IVditor) =>
         }
     } else if (blockType.indexOf("html") > -1) {
         const tempHTML = innerHTML.replace(/&/g, "&")
-            .replace(/&lt;/g, "<").replace(/&gt;/g, ">")
+            .replace(/&lt;/g, "<").replace(/&gt;/g, ">");
         if (blockType === "html-inline") {
             previewPanel.innerHTML = codeSVG + tempHTML;
             return;

src/ts/wysiwyg/processKeydown.ts

@@ -9,7 +9,7 @@ export const deleteKey = (vditor: IVditor, event: KeyboardEvent) => {
 
     if (startContainer.nodeType === 3 && range.startOffset === 0) {
         // 光标位于第零个位置进行删除
-        if (startContainer.parentElement.tagName === "CODE" &&
+        if (range.collapsed && startContainer.parentElement.tagName === "CODE" &&
             startContainer.parentElement.parentElement.parentElement.classList
                 .contains("vditor-wysiwyg__block") && !startContainer.previousSibling) {
             // 光标位于渲染代码块内，仅删除代码块，内容保持不变