✨ fix #28

Vanessa219 · Dec 31, 2019 · d64e2a3 · d64e2a3
1 parent 759cc91
commit d64e2a3
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -37,7 +37,7 @@
 * [3](https://github.com/Vanessa219/vditor/issues/3) 编辑预览同步滚动改进 `enhancement`
 * [4](https://github.com/Vanessa219/vditor/issues/4) 添加支持思维导图的功能 `enhancement`
 
-### v2.0.4 / 2019-12-29
+### v2.0.4 / 2019-12-31
 
 * [28](https://github.com/Vanessa219/vditor/issues/28) wysiwyg 时代码块、流程图等直接进行渲染，不展示源码 `enhancement`
 * [26](https://github.com/Vanessa219/vditor/issues/26) wysiwyg 性能优化 `enhancement`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A markdown editor written in TypeScript",
   "author": " Vanessa <[email protected]> (http://vanessa.b3log.org)",
   "homepage": "https://hacpai.com/tag/vditor",

diff --git a/src/js/lute/lute.min.js b/src/js/lute/lute.min.js
diff --git a/src/ts/markdown/md2html.ts b/src/ts/markdown/md2html.ts
@@ -10,9 +10,8 @@ export const loadLuteJs = async (vditor: IVditor | string) => {
     } else if (typeof vditor === "object" && vditor.options.cdn) {
         cdn = vditor.options.cdn;
     }
-    // addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
-    // addScript(`/src/js/lute/lute.min.js`, "vditorLuteScript");
-    addScript(`http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
+    addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
+    // addScript(`http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
 
     if (vditor && typeof vditor === "object" && !vditor.lute) {
         vditor.lute = Lute.New();

diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
@@ -26,6 +26,7 @@ class WYSIWYG {
             this.element.style.display = "none";
         }
 
+        this.element.innerHTML = '<p data-block="0"></p>';
         const popover = document.createElement("div");
         popover.className = "vditor-panel vditor-panel--none";
         popover.setAttribute("contenteditable", "false");
@@ -91,30 +92,35 @@ class WYSIWYG {
             if (doc.body) {
                 textHTML = doc.body.innerHTML;
             }
+
             // process code
             const code = processPasteCode(textHTML, textPlain, "wysiwyg");
-            if (code) {
+            if (event.target.tagName === "CODE") {
+                // 粘贴在代码位置
+                insertHTML(textPlain, this.element);
+                event.target.setAttribute("data-code", encodeURIComponent(event.target.innerText));
+            } else if (code) {
                 insertHTML(`<div class="vditor-wysiwyg__block" data-type="code-block"><pre><code data-code="${
-                    encodeURIComponent(code)}"></code></pre></div>`, {
-                    element: this.element,
-                    popover: this.popover,
-                }, event.target, textPlain);
+                    encodeURIComponent(code)}"></code></pre></div>`, this.element);
             } else {
                 if (textHTML.trim() !== "") {
                     const tempElement = document.createElement("div");
                     tempElement.innerHTML = textHTML;
                     tempElement.querySelectorAll("[style]").forEach((e) => {
                         e.removeAttribute("style");
                     });
-                    insertHTML(vditor.lute.HTML2VditorDOM(tempElement.innerHTML), {
-                        element: this.element,
-                        popover: this.popover,
-                    }, event.target, textPlain);
+                    insertHTML(vditor.lute.HTML2VditorDOM(tempElement.innerHTML), this.element);
                 } else if (event.clipboardData.files.length > 0 && vditor.options.upload.url) {
                     uploadFiles(vditor, event.clipboardData.files);
                 } else if (textPlain.trim() !== "" && event.clipboardData.files.length === 0) {
-                    insertHTML(vditor.lute.Md2VditorDOM(textPlain), {element: this.element, popover: this.popover},
-                        event.target, textPlain);
+                    let vditorDomHTML = vditor.lute.Md2VditorDOM(textPlain);
+                    const tempElement = document.createElement("div");
+                    tempElement.innerHTML = vditorDomHTML;
+                    const pElements = tempElement.querySelectorAll("p");
+                    if (pElements.length === 1) {
+                        vditorDomHTML = pElements[0].innerHTML;
+                    }
+                    insertHTML(vditorDomHTML, this.element);
                 }
             }
 

diff --git a/src/ts/wysiwyg/input.ts b/src/ts/wysiwyg/input.ts
@@ -61,9 +61,7 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) =>
         vditorHTML = vditorHTML.replace(/<\/strong><strong data-marker="\W{2}">/g, "")
             .replace(/<\/em><em data-marker="\W{1}">/g, "")
             .replace(/<\/s><s data-marker="~{1,2}">/g, "");
-        console.log(vditorHTML);
         vditorHTML = vditor.lute.SpinVditorDOM(vditorHTML) || '<p data-block="0"></p>';
-        console.log(vditorHTML);
         if (blockElement.isEqualNode(vditor.wysiwyg.element)) {
             blockElement.innerHTML = vditorHTML;
         } else {
@@ -74,10 +72,8 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) =>
         setRangeByWbr(vditor.wysiwyg.element, range);
 
         blockElement = getBlockByRange(range);
-
-        // 对返回值中包含 inline-code, inline math 的进行 decode
-        const codeElements = blockElement.querySelectorAll("code");
-        if (codeElements.length > 0) {
+        if (blockElement && blockElement.querySelectorAll("code").length > 0) {
+            // 对返回值中包含 inline-code, inline math 的进行 decode
             processCodeData(blockElement);
         }
     }

diff --git a/src/ts/wysiwyg/insertHTML.ts b/src/ts/wysiwyg/insertHTML.ts
@@ -1,11 +1,8 @@
 import {processCodeData} from "./processCodeData";
 
-export const insertHTML = (html: string, editor: {
-    element: HTMLPreElement,
-    popover: HTMLDivElement,
-},                         targetElement: HTMLElement, textPlain: string) => {
+export const insertHTML = (html: string, editor: HTMLElement) => {
     const pasteElement = document.createElement("template");
-    pasteElement.innerHTML = targetElement.tagName === "CODE" ? textPlain : html;
+    pasteElement.innerHTML = html;
 
     const range = getSelection().getRangeAt(0);
     if (!range.collapsed) {
@@ -14,10 +11,5 @@ export const insertHTML = (html: string, editor: {
     range.insertNode(pasteElement.content.cloneNode(true));
     range.collapse(false);
 
-    if (targetElement.tagName === "CODE") {
-        targetElement.setAttribute("data-code", encodeURIComponent(targetElement.innerText));
-    } else {
-        processCodeData(editor.element);
-    }
-
+    processCodeData(editor);
 };
diff --git a/src/ts/wysiwyg/renderDomByMd.ts b/src/ts/wysiwyg/renderDomByMd.ts
@@ -11,7 +11,7 @@ export const renderDomByMd = (vditor: IVditor, md: string) => {
     enableToolbar(vditor.toolbar.elements, allToolbar);
 
     const editorElement = vditor.wysiwyg.element;
-    editorElement.innerHTML = vditor.lute.Md2VditorDOM(md);
+    editorElement.innerHTML = vditor.lute.Md2VditorDOM(md) || '<p data-block="0"></p>';
     processCodeData(editorElement);
 
     editorElement.querySelectorAll(".vditor-wysiwyg__block").forEach((blockElement: HTMLElement) => {