:bug: fix #31

CHANGELOG.md

@@ -37,16 +37,16 @@
 
 * [3](https://github.com/Vanessa219/vditor/issues/3) 编辑预览同步滚动改进 `enhancement`
 * [4](https://github.com/Vanessa219/vditor/issues/4) 添加支持思维导图的功能 `enhancement`
-* [31](https://github.com/Vanessa219/vditor/issues/31) merge list `bug`
-* [38](https://github.com/Vanessa219/vditor/issues/38) 有序列表顺序错误 `修复缺陷`
 
 ### v2.0.12 / 2020-01-05
 
+* [38](https://github.com/Vanessa219/vditor/issues/38) 有序列表顺序错误 `修复缺陷`
 * [37](https://github.com/Vanessa219/vditor/issues/37) 为 wysiwyg 代码块添加快捷键 `引入特性`
 * [36](https://github.com/Vanessa219/vditor/issues/36) two 'enter' at code block `修复缺陷`
 * [35](https://github.com/Vanessa219/vditor/issues/35) no cursor after tab `修复缺陷`
-* [32](https://github.com/Vanessa219/vditor/issues/32) 反斜杠转义处理 `修复缺陷`
 * [33](https://github.com/Vanessa219/vditor/issues/33) 插入链接优化 `improvement`
+* [32](https://github.com/Vanessa219/vditor/issues/32) 反斜杠转义处理 `修复缺陷`
+* [31](https://github.com/Vanessa219/vditor/issues/31) merge list `bug`
 * [30](https://github.com/Vanessa219/vditor/issues/30) 添加 option.value `enhancement`
 * [29](https://github.com/Vanessa219/vditor/issues/29) 添加 debugger，为开发时显示日志 `enhancement`
 * [28](https://github.com/Vanessa219/vditor/issues/28) wysiwyg 时代码块、流程图等直接进行渲染，不展示源码 `enhancement`

src/ts/util/hasClosest.ts

@@ -108,7 +108,14 @@ export const hasClosestByClassName = (element: Node, className: string) => {
     return isClosest && e;
 };
 
-export const hasTopClosestByTag = (element: HTMLElement, nodeName: string) => {
+export const hasTopClosestByTag = (element: Node, nodeName: string) => {
+    if (!element) {
+        return false;
+    }
+    if (element.nodeType === 3) {
+        element = element.parentElement;
+    }
+
     let closest = hasClosestByTag(element, nodeName);
     let parentClosest: boolean | HTMLElement = false;
     if (closest) {

src/ts/wysiwyg/highlightToolbar.ts

@@ -96,8 +96,7 @@ export const highlightToolbar = (vditor: IVditor) => {
         }
         if (topListElement) {
             vditor.wysiwyg.popover.innerHTML = "";
-
-            const outdent = document.createElement("sapn");
+            const outdent = document.createElement("button");
             outdent.innerHTML = outdentSVG;
             outdent.setAttribute("aria-label", i18n[vditor.options.lang].unindent);
             outdent.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
@@ -105,12 +104,15 @@ export const highlightToolbar = (vditor: IVditor) => {
                 document.execCommand("outdent", false);
             };
 
-            const indent = document.createElement("sapn");
+            const indent = document.createElement("button");
             indent.innerHTML = indentSVG;
             indent.setAttribute("aria-label", i18n[vditor.options.lang].indent);
             indent.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
             indent.onclick = () => {
+                const cloneRange = getSelection().getRangeAt(0).cloneRange()
                 document.execCommand("indent", false);
+                // fix 空列表缩进光标会飘逸
+                setSelectionFocus(cloneRange)
             };
 
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", outdent);

src/ts/wysiwyg/input.ts

@@ -1,4 +1,10 @@
-import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag, hasClosestByTag} from "../util/hasClosest";
+import {
+    hasClosestBlock,
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+    hasClosestByTag,
+    hasTopClosestByTag
+} from "../util/hasClosest";
 import {log} from "../util/log";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {processCodeRender} from "./processCodeRender";
@@ -6,6 +12,17 @@ import {setRangeByWbr} from "./setRangeByWbr";
 
 export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) => {
     let blockElement = hasClosestBlock(range.startContainer);
+
+    // 列表需要到最顶层
+    const topUlElement = hasTopClosestByTag(range.startContainer, "UL");
+    const topOlElement = hasTopClosestByTag(range.startContainer, "OL");
+    let topListElement = topUlElement;
+    if (topOlElement && (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))) {
+        topListElement = topOlElement;
+    }
+    if (topListElement) {
+        blockElement = topListElement
+    }
     if (!blockElement) {
         // 使用顶级块元素，应使用 innerHTML
         blockElement = vditor.wysiwyg.element;