diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4263232b..c171da330 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,8 @@
* [73](https://github.com/Vanessa219/vditor/issues/73) 添加链接卡片样式 `引入特性`
* [70](https://github.com/Vanessa219/vditor/issues/70) 所见即所得模式下Table按钮重复点击会导致table嵌套，另外希望标题支持快捷键调整大小 `引入特性`
* [69](https://github.com/Vanessa219/vditor/issues/69) 渲染块按 esc 可以进行退出代码块进行预览 `改进功能`
+* [68](https://github.com/Vanessa219/vditor/issues/68) 列表标记符自动优化 `改进功能`
+* [65](https://github.com/Vanessa219/vditor/issues/65) 任务列表回车、删除优化 `改进功能`
### v2.0.15 / 2020-01-11
diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
index 1f0000753..420423557 100644
--- a/src/ts/wysiwyg/index.ts
+++ b/src/ts/wysiwyg/index.ts
@@ -17,6 +17,7 @@ import {highlightToolbar} from "./highlightToolbar";
import {input} from "./input";
import {insertHTML} from "./insertHTML";
import {processCodeRender} from "./processCodeRender";
+import {setRangeByWbr} from "./setRangeByWbr";
class WYSIWYG {
public element: HTMLPreElement;
@@ -122,7 +123,7 @@ class WYSIWYG {
// process code
const code = processPasteCode(textHTML, textPlain, "wysiwyg");
- const range = getSelection().getRangeAt(0)
+ const range = getSelection().getRangeAt(0);
if (event.target.tagName === "CODE") {
// 粘贴在代码位置
const position = getSelectPosition(event.target);
@@ -131,7 +132,7 @@ class WYSIWYG {
setSelectionByPosition(position.start + textPlain.length, position.start + textPlain.length,
event.target.parentElement);
} else if (code) {
- const pElement = hasClosestByMatchTag(range.startContainer, "P")
+ const pElement = hasClosestByMatchTag(range.startContainer, "P");
if (pElement) {
range.setStartAfter(pElement);
}
@@ -379,6 +380,51 @@ class WYSIWYG {
return;
}
+ // task list
+ const taskItemElement = hasClosestByClassName(range.startContainer, "vditor-task");
+ if (taskItemElement) {
+ if (taskItemElement.lastChild.textContent.trim() === "") {
+ if (taskItemElement.nextElementSibling) {
+ // 用段落隔断
+ let afterHTML = "";
+ let beforeHTML = "";
+ let isAfter = false;
+ taskItemElement.parentElement.querySelectorAll("li").forEach((liElement) => {
+ if (liElement.isEqualNode(taskItemElement)) {
+ isAfter = true;
+ } else {
+ if (isAfter) {
+ afterHTML += liElement.outerHTML;
+ } else {
+ beforeHTML += liElement.outerHTML;
+ }
+ }
+ });
+ if (beforeHTML) {
+ beforeHTML = ``;
+ }
+ taskItemElement.parentElement.outerHTML = `${beforeHTML}\n
`;
+ } else {
+ // 变成段落
+ taskItemElement.parentElement.insertAdjacentHTML("afterend", `\n
`);
+ if (taskItemElement.parentElement.querySelectorAll('li').length === 1) {
+ taskItemElement.parentElement.remove();
+ } else {
+ taskItemElement.remove();
+ }
+ }
+ } else {
+ // 光标后文字添加到新列表中
+ range.setEndAfter(taskItemElement.lastChild);
+ taskItemElement.insertAdjacentHTML("afterend", ` `);
+ document.querySelector("wbr").after(range.extractContents());
+ }
+ setRangeByWbr(vditor.wysiwyg.element, range);
+ event.preventDefault();
+ afterRenderEvent(vditor);
+ return;
+ }
+
// https://github.com/Vanessa219/vditor/issues/48
const h6Element = hasClosestByMatchTag(range.startContainer, "H6");
if (h6Element && range.startContainer.textContent.length === range.startOffset) {
diff --git a/src/ts/wysiwyg/processKeydown.ts b/src/ts/wysiwyg/processKeydown.ts
index bd7c9c821..47b87cc20 100644
--- a/src/ts/wysiwyg/processKeydown.ts
+++ b/src/ts/wysiwyg/processKeydown.ts
@@ -2,6 +2,7 @@ import {setSelectionFocus} from "../editor/setSelection";
import {hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
import {afterRenderEvent} from "./afterRenderEvent";
import {processCodeRender} from "./processCodeRender";
+import {setRangeByWbr} from "./setRangeByWbr";
export const deleteKey = (vditor: IVditor, event: KeyboardEvent) => {
const range = getSelection().getRangeAt(0);
@@ -83,6 +84,33 @@ export const deleteKey = (vditor: IVditor, event: KeyboardEvent) => {
event.preventDefault();
}
}
+
+ // task list
+ const taskItemElement = hasClosestByClassName(startContainer, "vditor-task");
+ if (taskItemElement && range.collapsed &&
+ ((startContainer.nodeType === 3 && range.startOffset === 1 &&
+ (startContainer.previousSibling as HTMLElement).tagName === "INPUT") ||
+ startContainer.nodeType !== 3)) {
+
+ const previousElement = taskItemElement.previousElementSibling;
+ taskItemElement.querySelector("input").remove();
+ if (previousElement) {
+ previousElement.innerHTML += "" + taskItemElement.innerHTML.trim();
+ taskItemElement.remove();
+ } else {
+ taskItemElement.parentElement.insertAdjacentHTML("beforebegin",
+ `${taskItemElement.innerHTML.trim() || "\n"}
`);
+ if (taskItemElement.nextElementSibling) {
+ taskItemElement.remove();
+ } else {
+ taskItemElement.parentElement.remove();
+ }
+ }
+ setRangeByWbr(vditor.wysiwyg.element, range);
+ afterRenderEvent(vditor);
+ event.preventDefault();
+ return;
+ }
};
export const tabKey = (vditor: IVditor, event: KeyboardEvent) => {
diff --git a/src/ts/wysiwyg/setRangeByWbr.ts b/src/ts/wysiwyg/setRangeByWbr.ts
index 713ae7503..e2f44bf31 100644
--- a/src/ts/wysiwyg/setRangeByWbr.ts
+++ b/src/ts/wysiwyg/setRangeByWbr.ts
@@ -18,6 +18,7 @@ export const setRangeByWbr = (element: HTMLElement, range: Range) => {
if (wbrElement.previousElementSibling.lastChild) {
// text
range.setStartBefore(wbrElement);
+ range.collapse(true);
setSelectionFocus(range);
// fix Chrome set range bug
if (wbrElement.previousElementSibling.tagName === "EM") {
@@ -27,6 +28,7 @@ export const setRangeByWbr = (element: HTMLElement, range: Range) => {
} else if (wbrElement.previousElementSibling.tagName === "S") {
document.execCommand("strikeThrough", false, "");
}
+ wbrElement.remove();
return;
} else {
//
@@ -37,6 +39,7 @@ export const setRangeByWbr = (element: HTMLElement, range: Range) => {
range.setStart(wbrElement.previousSibling, wbrElement.previousSibling.textContent.length);
}
}
+ range.collapse(true);
wbrElement.remove();
setSelectionFocus(range);
};