🐛 fix #567

Vanessa219 · Jul 16, 2020 · 2db0c12 · 2db0c12
1 parent 351fc49
commit 2db0c12
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 227 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -65,10 +65,10 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 * [346](https://github.com/Vanessa219/vditor/issues/346) 内容主题推荐（长期有效） `改进功能`
-* [567](https://github.com/Vanessa219/vditor/issues/567) SV 模式块引用嵌套列表、代码块问题 `修复缺陷`
 
 ### v3.3.7 / 2020-07-xx
 
+* [567](https://github.com/Vanessa219/vditor/issues/567) SV 模式块引用嵌套列表、代码块问题 `修复缺陷`
 * [563](https://github.com/Vanessa219/vditor/issues/563) SV 模式列表项下的代码块问题 `修复缺陷`
 * [579](https://github.com/Vanessa219/vditor/issues/579) 样式调整 `改进功能`
 * [575](https://github.com/Vanessa219/vditor/issues/575) 编辑器存在 form 中，情景菜单会出发提交事件 `修复缺陷`

diff --git a/src/ts/sv/inputEvent.ts b/src/ts/sv/inputEvent.ts
@@ -1,11 +1,15 @@
 import {scrollCenter} from "../util/editorCommonEvent";
-import {hasClosestByAttribute, hasTopClosestByAttribute} from "../util/hasClosest";
+import {hasClosestByAttribute} from "../util/hasClosest";
 import {getSelectPosition, setRangeByWbr} from "../util/selection";
 import {processAfterRender, processSpinVditorSVDOM} from "./process";
 
 export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
     const range = getSelection().getRangeAt(0).cloneRange();
-    let blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
+    let startContainer = range.startContainer;
+    if (range.startContainer.nodeType !== 3 && (range.startContainer as HTMLElement).tagName === "DIV") {
+        startContainer = range.startContainer.childNodes[range.startOffset - 1];
+    }
+    let blockElement = hasClosestByAttribute(startContainer, "data-block", "0");
     // 不调用 lute 解析
     if (blockElement && event && (event.inputType === "deleteContentBackward" || event.data === " ")) {
         // 开始可以输入空格
@@ -28,40 +32,16 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
             processAfterRender(vditor);
             return;
         }
-        //  list item marker 删除或空格
+        // 删除或空格不解析，否则会 format 回去
         if ((event.data === " " || event.inputType === "deleteContentBackward") &&
-            (hasClosestByAttribute(range.startContainer, "data-type", "li-marker") ||
-                hasClosestByAttribute(range.startContainer, "data-type", "task-marker")
+            (hasClosestByAttribute(startContainer, "data-type", "padding") // 场景：b 前进行删除 [> 1. a\n>   b]
+                || hasClosestByAttribute(startContainer, "data-type", "li-marker")  // 场景：删除最后一个字符 [* 1\n* ]
+                || hasClosestByAttribute(startContainer, "data-type", "task-marker")  // 场景：删除最后一个字符 [* [ ] ]
+                || hasClosestByAttribute(startContainer, "data-type", "blockquote-marker")  // 场景：删除最后一个字符 [> ]
             )) {
             processAfterRender(vditor);
             return;
         }
-        // heading marker 删除或空格
-        const headingElement = hasClosestByAttribute(range.startContainer, "data-type", "heading-marker");
-        if (headingElement && (event.data === " " || event.inputType === "deleteContentBackward")) {
-            processAfterRender(vditor);
-            return;
-        }
-        // blockquote marker 删除或空格
-        const blockquoteElement = hasClosestByAttribute(range.startContainer, "data-type", "blockquote-marker");
-        if (blockquoteElement && (event.data === " " || event.inputType === "deleteContentBackward")) {
-            processAfterRender(vditor);
-            return;
-        }
-        // block code marker 删除
-        const blockCodeElement =
-            hasClosestByAttribute(range.startContainer, "data-type", "code-block");
-        if (blockCodeElement && event.inputType === "deleteContentBackward") {
-            const startIndex = getSelectPosition(blockElement, vditor.sv.element, range).start;
-            if (startIndex <= 2 || startIndex === blockCodeElement.textContent.length - 1) {
-                if (blockElement.querySelectorAll(".vditor-sv__marker").length < 2) {
-                    blockElement.querySelector(".vditor-sv__marker")?.remove();
-                    blockElement.setAttribute("data-type", "p");
-                }
-                processAfterRender(vditor);
-                return;
-            }
-        }
     }
     if (blockElement && blockElement.textContent.trimRight() === "$$") {
         // 内联数学公式
@@ -71,7 +51,7 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
     if (!blockElement) {
         blockElement = vditor.sv.element;
     }
-    const footnotesElement = hasClosestByAttribute(range.startContainer, "data-type", "footnotes-block");
+    const footnotesElement = hasClosestByAttribute(startContainer, "data-type", "footnotes-block");
     if (footnotesElement) {
         // 修改脚注
         blockElement = footnotesElement;
@@ -80,22 +60,10 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
         // 修改链接引用
         blockElement = vditor.sv.element;
     }
-    if (hasClosestByAttribute(range.startContainer, "data-type", "footnotes-link")) {
+    if (hasClosestByAttribute(startContainer, "data-type", "footnotes-link")) {
         // 修改脚注角标
         blockElement = vditor.sv.element;
     }
-    // 有 blockquote 需到 blockquote
-    const blockquoteElement = hasTopClosestByAttribute(blockElement, "data-type", "blockquote");
-    if (blockquoteElement) {
-        blockElement = blockquoteElement;
-    }
-    // 列表需到顶层
-    const topListElement = hasTopClosestByAttribute(blockElement, "data-type", "ol") ||
-        hasTopClosestByAttribute(blockElement, "data-type", "ul") ||
-        hasTopClosestByAttribute(blockElement, "data-type", "task");
-    if (topListElement) {
-        blockElement = topListElement;
-    }
     // 添加光标位置
     if (blockElement.textContent.indexOf(Lute.Caret) === -1) {
         // 点击工具栏会插入 Caret
@@ -119,6 +87,11 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
     if (isSVElement) {
         html = blockElement.textContent;
     } else {
+        // 添加前一个块元素
+        if (blockElement.previousElementSibling) {
+            html = blockElement.previousElementSibling.textContent + html;
+            blockElement.previousElementSibling.remove();
+        }
         // 添加链接引用
         const allLinkRefDefsElement = vditor.sv.element.querySelector("[data-type='link-ref-defs-block']");
         if (allLinkRefDefsElement && !blockElement.isEqualNode(allLinkRefDefsElement)) {

diff --git a/src/ts/sv/process.ts b/src/ts/sv/process.ts
@@ -1,10 +1,10 @@
 import {getMarkdown} from "../markdown/getMarkdown";
 import {accessLocalStorage} from "../util/compatibility";
 import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
+import {log} from "../util/log";
 import {getEditorRange, setRangeByWbr} from "../util/selection";
 import {highlightToolbarSV} from "./highlightToolbarSV";
 import {inputEvent} from "./inputEvent";
-import {log} from "../util/log";
 
 export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
     log("SpinVditorSVDOM", html, "argument", vditor.options.debugger);
@@ -13,21 +13,19 @@ export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
         "</div>";
     log("SpinVditorSVDOM", html, "result", vditor.options.debugger);
     return html;
-}
+};
 
-export const getBlockquoteMarkers = (pElement: HTMLElement) => {
-    let markerText = ''
-    const previousElement = pElement.previousElementSibling
-    if (previousElement) {
-        if (previousElement.getAttribute("data-type") === "li-marker") {
-            // >   * 2 中的 [   * ]
-            markerText = previousElement.previousElementSibling.textContent + previousElement.textContent + markerText
-        } else if (previousElement.getAttribute("data-type") === "blockquote-marker") {
-            // >   * > 3 中的 [> ]
-            markerText = previousElement.textContent + markerText;
-        }
-        // previousElement = '';
+export const processPreviousMarkers = (textElement: HTMLElement) => {
+    let previousElement = textElement.previousElementSibling;
+    let markerText = "";
+    while (previousElement && (previousElement.getAttribute("data-type") === "li-marker" ||
+        previousElement.getAttribute("data-type") === "blockquote-marker" ||
+        previousElement.getAttribute("data-type") === "task-marker" ||
+        previousElement.getAttribute("data-type") === "padding")) {
+        markerText = previousElement.textContent + markerText;
+        previousElement = previousElement.previousElementSibling;
     }
+    return markerText;
 };
 
 export const processAfterRender = (vditor: IVditor, options = {