Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修正 Issue：Code 内 Delete 键可能删除过多内容 & Code 内 回车后光标位置异常 #686

Merged
merged 9 commits into from
Aug 5, 2020
Merged

修正 Issue：Code 内 Delete 键可能删除过多内容 & Code 内 回车后光标位置异常 #686

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
42c3864
Merge pull request #4 from Vanessa219/master
Jul 14, 2020
98d7089
Merge pull request #5 from Vanessa219/master
Jul 17, 2020
8178f14
Merge pull request #6 from Vanessa219/master
Jul 20, 2020
5d334a9
Merge pull request #7 from Vanessa219/master
Jul 29, 2020
34ec365
Merge pull request #8 from Vanessa219/master
Jul 30, 2020
5cb82ac
Merge pull request #9 from Vanessa219/master
Aug 3, 2020
0e46987
fix issue: Code 内删除操作异常
Aug 5, 2020
2f7f8e9
fix issue: 在 Code 内输入换行， 光标位置跳转异常
Aug 5, 2020
aefc839
fix issue: Code 内删除操作异常
Aug 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/ts/undo/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,18 +208,23 @@ class Undo {
private addCaret(vditor: IVditor, setFocus = false) {
let cloneRange: Range;
let range: Range;
let wbrElement: HTMLElement;
if (getSelection().rangeCount !== 0 && !vditor[vditor.currentMode].element.querySelector("wbr")) {
range = getSelection().getRangeAt(0);
if (vditor[vditor.currentMode].element.contains(range.startContainer)) {
cloneRange = range.cloneRange();
const wbrElement = document.createElement("span");
wbrElement = document.createElement("span");
wbrElement.className = "vditor-wbr";
range.insertNode(wbrElement);
}
}
const text = vditor[vditor.currentMode].element.innerHTML;
vditor[vditor.currentMode].element.querySelectorAll(".vditor-wbr").forEach((item) => {
item.outerHTML = "";
if (item === wbrElement) {
item.parentNode.removeChild(item);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. item.parentNode.removeChild(item); 和 item.remove() 感觉都可以
  2. 是不是可以直接把 item.outerHTML = ""; 替换掉了

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

从避免 破坏 Range 和 DOM 树结构上来讲，我支持尽量不使用 outerHTML 来操作 Dom，只要你的业务逻辑上没问题，那这里都不需要判断 item === wbrElement 这个了

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我记得开始也是用的 remove，然后就会出现 range 错误，就改成 outHTML，但是现在我重现不了了，不知道是不是浏览器升级了，还是测试点不对。我先说明注释了吧。

item.parentNode.removeChild(item); 和 item.remove() 这个有具体的区别么？

} else {
item.outerHTML = "";
}
});
if (setFocus && cloneRange) {
setSelectionFocus(cloneRange);
Expand Down