✨ fix #65

Vanessa219 · Jan 15, 2020 · 4e0ca7e · 4e0ca7e
1 parent b527a7d
commit 4e0ca7e
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 2 deletions.
diff --git 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
@@ -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 = `<ul data-tight="true" data-marker="*" data-block="0">${beforeHTML}</ul>`;
+                        }
+                        taskItemElement.parentElement.outerHTML = `${beforeHTML}<p data-block="0"><wbr>\n</p><ul data-tight="true" data-marker="*" data-block="0">${afterHTML}</ul>`;
+                    } else {
+                        // 变成段落
+                        taskItemElement.parentElement.insertAdjacentHTML("afterend", `<p data-block="0"><wbr>\n</p>`);
+                        if (taskItemElement.parentElement.querySelectorAll('li').length === 1) {
+                            taskItemElement.parentElement.remove();
+                        } else {
+                            taskItemElement.remove();
+                        }
+                    }
+                } else {
+                    // 光标后文字添加到新列表中
+                    range.setEndAfter(taskItemElement.lastChild);
+                    taskItemElement.insertAdjacentHTML("afterend", `<li data-marker="*" class="vditor-task"><input type="checkbox"> <wbr></li>`);
+                    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
@@ -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 += "<wbr>" + taskItemElement.innerHTML.trim();
+            taskItemElement.remove();
+        } else {
+            taskItemElement.parentElement.insertAdjacentHTML("beforebegin",
+                `<p data-block="0"><wbr>${taskItemElement.innerHTML.trim() || "\n"}</p>`);
+            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
@@ -18,6 +18,7 @@ export const setRangeByWbr = (element: HTMLElement, range: Range) => {
             if (wbrElement.previousElementSibling.lastChild) {
                 // <em>text</em><wbr>
                 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 {
                 // <br><wbr>
@@ -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);
 };