🐛 列表松散模式

Vanessa219 · Jan 7, 2020 · ed0c5a4 · ed0c5a4
1 parent 897b749
commit ed0c5a4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 9 deletions.
diff --git a/src/ts/toolbar/Record.ts b/src/ts/toolbar/Record.ts
@@ -17,7 +17,7 @@ export class Record extends MenuItem {
         let mediaRecorder: MediaRecorder;
         this.element.children[0].addEventListener(getEventName(), (event) => {
             event.preventDefault();
-            const editorElement = vditor.currentMode === "wysiwyg" ? vditor.wysiwyg.element : vditor.editor.element
+            const editorElement = vditor.currentMode === "wysiwyg" ? vditor.wysiwyg.element : vditor.editor.element;
             if (!mediaRecorder) {
                 navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
                     mediaRecorder = new MediaRecorder(mediaStream);

diff --git a/src/ts/wysiwyg/addP2Li.ts b/src/ts/wysiwyg/addP2Li.ts
@@ -0,0 +1,23 @@
+export const addP2Li = (listElement: Element) => {
+    listElement.querySelectorAll("li").forEach((liElement: HTMLElement) => {
+        let tempNodes = [];
+        let node = liElement.firstChild as HTMLElement;
+        while (node) {
+            if (node.nodeType === 3) {
+                tempNodes.push(node);
+            } else if (node.tagName !== "UL" && node.tagName !== "OL" &&
+                node.tagName !== "BLOCKQUOTE" && node.tagName !== "P") {
+                tempNodes.push(node);
+            } else if (tempNodes.length > 0) {
+                const pElement = document.createElement("p");
+                tempNodes.forEach((nodeItem) => {
+                    pElement.appendChild(nodeItem);
+                });
+                node.insertAdjacentElement('beforebegin', pElement)
+                tempNodes = [];
+            }
+
+            node = node.nextSibling as HTMLElement;
+        }
+    });
+};
diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
@@ -101,7 +101,7 @@ class WYSIWYG {
                 `<a href="${textPlain}">${textPlain}</a>` ||
                 textHTML.replace(/<(|\/)(html|body|meta)[^>]*?>/ig, "").trim() ===
                 `<!--StartFragment--><a href="${textPlain}">${textPlain}</a><!--EndFragment-->`) {
-                textHTML = '';
+                textHTML = "";
             }
 
             // process word

diff --git a/src/ts/wysiwyg/input.ts b/src/ts/wysiwyg/input.ts
@@ -6,6 +6,7 @@ import {
     hasTopClosestByTag,
 } from "../util/hasClosest";
 import {log} from "../util/log";
+import {addP2Li} from "./addP2Li";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {processCodeRender} from "./processCodeRender";
 import {setRangeByWbr} from "./setRangeByWbr";
@@ -21,6 +22,7 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) =>
         topListElement = topOlElement;
     }
     if (topListElement) {
+        addP2Li(topListElement);
         blockElement = topListElement;
     }
     if (!blockElement) {
@@ -71,10 +73,12 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) =>
                 const listPrevElement = listElement.previousElementSibling;
                 const listNextElement = listElement.nextElementSibling;
                 if (listPrevElement && (listPrevElement.tagName === "UL" || listPrevElement.tagName === "OL")) {
+                    addP2Li(listPrevElement);
                     vditorHTML = listPrevElement.outerHTML + vditorHTML;
                     listPrevElement.remove();
                 }
                 if (listNextElement && (listNextElement.tagName === "UL" || listNextElement.tagName === "OL")) {
+                    addP2Li(listNextElement);
                     vditorHTML = vditorHTML + listNextElement.outerHTML;
                     listNextElement.remove();
                 }

diff --git a/src/ts/wysiwyg/insertHTML.ts b/src/ts/wysiwyg/insertHTML.ts
@@ -1,7 +1,7 @@
 export const insertHTML = (html: string, vditor: IVditor) => {
     // 使用 lute 方法会添加 p 元素，只有一个 p 元素的时候进行删除
-    const tempElement = document.createElement('div')
-    tempElement.innerHTML = html
+    const tempElement = document.createElement("div");
+    tempElement.innerHTML = html;
     const pElements = tempElement.querySelectorAll("p");
     if (pElements.length === 1) {
         html = pElements[0].innerHTML.trim();

diff --git a/src/ts/wysiwyg/renderDomByMd.ts b/src/ts/wysiwyg/renderDomByMd.ts
@@ -1,6 +1,5 @@
 import {enableToolbar} from "../toolbar/enableToolbar";
 import {removeCurrentToolbar} from "../toolbar/removeCurrentToolbar";
-import {log} from "../util/log";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {processCodeRender} from "./processCodeRender";
 
@@ -11,10 +10,7 @@ export const renderDomByMd = (vditor: IVditor, md: string) => {
     enableToolbar(vditor.toolbar.elements, allToolbar);
 
     const editorElement = vditor.wysiwyg.element;
-    const innerHTML = vditor.lute.Md2VditorDOM(md) || '<p data-block="0">\n</p>';
-    log("Md2VditorDOM", md, "arguments", vditor.options.debugger);
-    log("Md2VditorDOM", innerHTML, "result", vditor.options.debugger);
-    editorElement.innerHTML = innerHTML;
+    editorElement.innerHTML = vditor.lute.Md2VditorDOM(md) || '<p data-block="0">\n</p>';
 
     editorElement.querySelectorAll(".vditor-wysiwyg__block").forEach((blockElement: HTMLElement) => {
         processCodeRender(blockElement, vditor);