From c1038e09a5cabae84180412141d538cf93d1c975 Mon Sep 17 00:00:00 2001
From: Van <lly219@gmail.com>
Date: Wed, 15 Jan 2020 15:18:32 +0800
Subject: [PATCH] :sparkles: fix #75

---
 CHANGELOG.md            |  1 +
 src/ts/wysiwyg/index.ts | 33 ++++++++++++++++++++++++++-------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c171da330..764ba4b4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@
 
 ### v2.1.0 / 2020-01-14
 
+* [75](https://github.com/Vanessa219/vditor/issues/75) 表格输入自动完成优化 `改进功能`
 * [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 可以进行退出代码块进行预览 `改进功能`
diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
index 420423557..cf68357a7 100644
--- a/src/ts/wysiwyg/index.ts
+++ b/src/ts/wysiwyg/index.ts
@@ -360,7 +360,26 @@ class WYSIWYG {
                 }
             }
 
-            // 软换行或者代码块中的换行
+            // 表格自动完成
+            const pElement = hasClosestByMatchTag(range.startContainer, "P");
+            if (pElement) {
+                const pText = String.raw`${pElement.textContent}`.replace(/\\\|/g, "").trim();
+                const pTextList = pText.split("|");
+                if (pText.startsWith("|") && pText.endsWith("|") && pTextList.length > 3) {
+                    let tableHeaderMD = pTextList.map(() => "---").join("|");
+                    tableHeaderMD = pElement.textContent + tableHeaderMD.substring(3, tableHeaderMD.length - 3) + '\n|<wbr>';
+                    log("SpinVditorDOM", tableHeaderMD, "argument", vditor.options.debugger);
+                    tableHeaderMD = vditor.lute.SpinVditorDOM(tableHeaderMD)
+                    log("SpinVditorDOM", tableHeaderMD, "result", vditor.options.debugger);
+                    pElement.outerHTML = tableHeaderMD
+                    event.preventDefault();
+                    setRangeByWbr(vditor.wysiwyg.element, range);
+                    afterRenderEvent(vditor)
+                    return;
+                }
+            }
+
+            // 软换行或者代码块中的换行，不需要软换行处理的需写在该块之上
             const preCodeElement = hasClosestByClassName(range.startContainer, "vditor-wysiwyg__block");
             if ((!event.metaKey && !event.ctrlKey && event.shiftKey && !event.altKey) ||
                 (isPureEnter && preCodeElement)) {
@@ -407,7 +426,7 @@ class WYSIWYG {
                     } else {
                         // 变成段落
                         taskItemElement.parentElement.insertAdjacentHTML("afterend", `<p data-block="0"><wbr>\n</p>`);
-                        if (taskItemElement.parentElement.querySelectorAll('li').length === 1) {
+                        if (taskItemElement.parentElement.querySelectorAll("li").length === 1) {
                             taskItemElement.parentElement.remove();
                         } else {
                             taskItemElement.remove();
@@ -428,11 +447,11 @@ class WYSIWYG {
             // https://github.com/Vanessa219/vditor/issues/48
             const h6Element = hasClosestByMatchTag(range.startContainer, "H6");
             if (h6Element && range.startContainer.textContent.length === range.startOffset) {
-                const pElement = document.createElement("p");
-                pElement.textContent = "\n";
-                pElement.setAttribute("data-block", "0");
-                range.startContainer.parentElement.insertAdjacentElement("afterend", pElement);
-                range.setStart(pElement, 0);
+                const pTempElement = document.createElement("p");
+                pTempElement.textContent = "\n";
+                pTempElement.setAttribute("data-block", "0");
+                range.startContainer.parentElement.insertAdjacentElement("afterend", pTempElement);
+                range.setStart(pTempElement, 0);
                 setSelectionFocus(range);
                 event.preventDefault();
                 scrollCenter(this.element);