🐛 fix #80

Vanessa219 · Jan 21, 2020 · 369a393 · 369a393
1 parent d7c9325
commit 369a393
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,11 +41,11 @@
 * [65](https://github.com/Vanessa219/vditor/issues/65) 任务列表回车、删除优化 `改进功能`
 * [78](https://github.com/Vanessa219/vditor/issues/78) 链接所见即所得渲染问题 `改进功能`
 * [79](https://github.com/Vanessa219/vditor/issues/79) 链接所见即所得渲染问题 `改进功能`
-* [80](https://github.com/Vanessa219/vditor/issues/80) ctrl+z
 * [81](https://github.com/Vanessa219/vditor/issues/81) 链接和图片嵌套问题 `修复缺陷`
 
 ### v2.1.2 / 2020-01-21
 
+* [80](https://github.com/Vanessa219/vditor/issues/80) 第一次 ctrl+z 无法设置光标 `修复缺陷`
 * [82](https://github.com/Vanessa219/vditor/issues/82) 文字拖动 `修复缺陷`
 * [74](https://github.com/Vanessa219/vditor/issues/74) anchor 中移除 . `改进功能`
 * [75](https://github.com/Vanessa219/vditor/issues/75) 表格输入自动完成优化 `改进功能`

diff --git a/src/ts/types/index.d.ts b/src/ts/types/index.d.ts
@@ -276,7 +276,8 @@ interface IVditor {
     wysiwygUndo: {
         redo(vditor: IVditor): void
         undo(vditor: IVditor): void
-        addToUndoStack(vditor: IVditor): void,
+        addToUndoStack(vditor: IVditor): void
+        recordFirstWbr(vditor: IVditor): void,
     };
     wysiwyg: {
         element: HTMLPreElement,

diff --git a/src/ts/undo/WysiwygUndo.ts b/src/ts/undo/WysiwygUndo.ts
@@ -46,9 +46,23 @@ class WysiwygUndo {
         this.renderDiff(state, vditor, true);
     }
 
+    public recordFirstWbr(vditor: IVditor) {
+        if (this.undoStack.length === 1) {
+            getSelection().getRangeAt(0).insertNode(document.createElement("wbr"));
+            this.undoStack[0][0].diffs[0][1] = vditor.lute.SpinVditorDOM(vditor.wysiwyg.element.innerHTML);
+            this.lastText = this.undoStack[0][0].diffs[0][1];
+        }
+    }
+
     public addToUndoStack(vditor: IVditor) {
         // wysiwyg/afterRenderEvent.ts 已经 debounce
+        if (getSelection().rangeCount !== 0 && !vditor.wysiwyg.element.querySelector("wbr")) {
+            getSelection().getRangeAt(0).insertNode(document.createElement("wbr"));
+        }
         const text = vditor.lute.SpinVditorDOM(vditor.wysiwyg.element.innerHTML);
+        if (vditor.wysiwyg.element.querySelector("wbr")) {
+            vditor.wysiwyg.element.querySelector("wbr").remove();
+        }
         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/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -377,7 +377,7 @@ export const highlightToolbar = (vditor: IVditor) => {
         if ((range.startContainer.nodeType !== 3 && range.startContainer.childNodes.length > range.startOffset &&
             range.startContainer.childNodes[range.startOffset].nodeName === "IMG") ||
             (range.startContainer.nodeType === 3 && range.startContainer.textContent.length === range.startOffset &&
-                range.startContainer.nextSibling.nodeType !== 3 &&
+                range.startContainer.nextSibling && range.startContainer.nextSibling.nodeType !== 3 &&
                 (range.startContainer as HTMLElement).nextElementSibling.tagName === "IMG")) {
             // 光标在图片前面，或在文字后面
             imgElement = range.startContainer.childNodes[range.startOffset] as HTMLImageElement ||
@@ -556,7 +556,7 @@ const genInsertBefore = (range: Range, element: HTMLElement, vditor: IVditor) =>
         setSelectionFocus(range);
         const node = document.createElement("p");
         node.setAttribute("data-block", "0");
-        node.innerHTML = "\n";
+        node.innerHTML = "\u200b\n";
         range.insertNode(node);
         range.collapse(true);
         setSelectionFocus(range);
@@ -578,7 +578,7 @@ const genInsertAfter = (range: Range, element: HTMLElement, vditor: IVditor) =>
         setSelectionFocus(range);
         const node = document.createElement("p");
         node.setAttribute("data-block", "0");
-        node.innerHTML = "\n";
+        node.innerHTML = "\u200b\n";
         range.insertNode(node);
         range.collapse(true);
         setSelectionFocus(range);

diff --git a/src/ts/wysiwyg/input.ts b/src/ts/wysiwyg/input.ts
@@ -66,8 +66,7 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) =>
         vditor.wysiwyg.element.querySelectorAll("wbr").forEach((wbr) => {
             wbr.remove();
         });
-        const wbrNode = document.createElement("wbr");
-        range.insertNode(wbrNode);
+        range.insertNode(document.createElement("wbr"));
 
         if (topListElement) {
             addP2Li(topListElement);

diff --git a/src/ts/wysiwyg/processKeydown.ts b/src/ts/wysiwyg/processKeydown.ts
@@ -99,6 +99,8 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     // TODO deleteKey and 上下左右遇到块预览的处理重构
     const range = getSelection().getRangeAt(0);
     const startContainer = range.startContainer;
+    // 添加第一次记录 undo 的光标
+    vditor.wysiwygUndo.recordFirstWbr(vditor);
 
     // 表格自动完成
     const pElement = hasClosestByMatchTag(range.startContainer, "P");