:bug: fix #191

CHANGELOG.md

@@ -48,6 +48,7 @@
 ### v2.2.12 / 未发布
 
 * [195](https://github.com/Vanessa219/vditor/pull/195) added korean i18n `引入特性`
+* [191](https://github.com/Vanessa219/vditor/pull/191) backspace problem(Firefox Compatibility) `修复缺陷`
 * [188](https://github.com/Vanessa219/vditor/issues/188) korean character composition at mac chrome `改进功能`
 * [185](https://github.com/Vanessa219/vditor/issues/185) Safari 兼容性修复 `改进功能`
 * [137](https://github.com/Vanessa219/vditor/issues/137) [suggestion] ctrl+g behavior `改进功能`

demo/index-preview.html

@@ -51,7 +51,7 @@
 </h2>
 <h2><a href="index.html">Vditor for you</a></h2>
 <div id="preview" class="preview"></div>
-<textarea id="zh_CNText" style="display:none;">## Guide
+<textarea id="zh_CNText" style="display:none;">## 教程
 
 这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 

demo/index.js

@@ -7,7 +7,6 @@ window.vditor = new Vditor('vditor', {
   placeholder: 'placeholder',
   counter: 100,
   height: 500,
-  lang: 'ko_KR',
   hint: {
     emojiPath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji',
     emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',

src/ts/undo/WysiwygUndo.ts

@@ -49,17 +49,20 @@ class WysiwygUndo {
     }
 
     public recordFirstWbr(vditor: IVditor) {
-        if (this.undoStack.length === 1) {
-            getSelection().getRangeAt(0).insertNode(document.createElement("wbr"));
-            const cloneEditorElement = document.createElement("pre");
-            cloneEditorElement.innerHTML = vditor.wysiwyg.element.innerHTML;
-            addP2Li(cloneEditorElement);
-            this.undoStack[0][0].diffs[0][1] = vditor.lute.SpinVditorDOM(cloneEditorElement.innerHTML);
-            this.lastText = this.undoStack[0][0].diffs[0][1];
-            if (vditor.wysiwyg.element.querySelector("wbr")) {
-                vditor.wysiwyg.element.querySelector("wbr").remove();
-            }
+        if (this.undoStack.length !== 1) {
+            return;
+        }
+        const cloneRange = getSelection().getRangeAt(0).cloneRange();
+        getSelection().getRangeAt(0).insertNode(document.createElement("wbr"));
+        const cloneEditorElement = document.createElement("pre");
+        cloneEditorElement.innerHTML = vditor.wysiwyg.element.innerHTML;
+        addP2Li(cloneEditorElement);
+        this.undoStack[0][0].diffs[0][1] = vditor.lute.SpinVditorDOM(cloneEditorElement.innerHTML);
+        this.lastText = this.undoStack[0][0].diffs[0][1];
+        if (vditor.wysiwyg.element.querySelector("wbr")) {
+            vditor.wysiwyg.element.querySelector("wbr").remove();
         }
+        setSelectionFocus(cloneRange);
     }
 
     public addToUndoStack(vditor: IVditor) {

src/ts/util/compatibility.ts

@@ -51,3 +51,7 @@ export const updateHotkeyTip = (hotkey: string) => {
     }
     return hotkey;
 };
+
+export const isChrome = () => {
+    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+}

src/ts/wysiwyg/setRangeByWbr.ts

@@ -1,5 +1,6 @@
 import {Constants} from "../constants";
 import {setSelectionFocus} from "../editor/setSelection";
+import {isChrome} from "../util/compatibility";
 
 export const setRangeByWbr = (element: HTMLElement, range: Range) => {
     const wbrElement = element.querySelector("wbr");
@@ -21,11 +22,10 @@ export const setRangeByWbr = (element: HTMLElement, range: Range) => {
                 range.setStartBefore(wbrElement);
                 range.collapse(true);
                 setSelectionFocus(range);
-                // fix Chrome set range bug
-                if (wbrElement.previousElementSibling.tagName === "EM" ||
+                // fix Chrome set range bug: **c**
+                if (isChrome() && (wbrElement.previousElementSibling.tagName === "EM" ||
                     wbrElement.previousElementSibling.tagName === "STRONG" ||
-                    wbrElement.previousElementSibling.tagName === "S"
-                ) {
+                    wbrElement.previousElementSibling.tagName === "S")) {
                     range.insertNode(document.createTextNode(Constants.ZWSP));
                     range.collapse(false);
                 }