:bug: paste

src/ts/editor/index.ts

@@ -1,6 +1,7 @@
 import {uploadFiles} from "../upload/index";
-import {copyEvent, focusEvent, hotkeyEvent, scrollCenter, selectEvent} from "../util/editorCommenEvent";
+import {focusEvent, hotkeyEvent, scrollCenter, selectEvent} from "../util/editorCommenEvent";
 import {getText} from "../util/getText";
+import {getSelectText} from "./getSelectText";
 import {html2md} from "./html2md";
 import {inputEvent} from "./inputEvent";
 import {insertText} from "./insertText";
@@ -22,12 +23,17 @@ class Editor {
         this.bindEvent(vditor);
 
         focusEvent(vditor, this.element);
-        copyEvent(this.element);
         hotkeyEvent(vditor, this.element);
         selectEvent(vditor, this.element);
     }
 
     private bindEvent(vditor: IVditor) {
+        this.element.addEventListener("copy", (event: ClipboardEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+            event.clipboardData.setData("text/plain", getSelectText(this.element));
+        });
+
         this.element.addEventListener("keypress", (event: KeyboardEvent) => {
             if (!event.metaKey && !event.ctrlKey && event.key === "Enter") {
                 insertText(vditor, "\n", "", true);

src/ts/toolbar/MenuItem.ts

@@ -3,6 +3,7 @@ import {setSelectionFocus} from "../editor/setSelection";
 import {i18n} from "../i18n/index";
 import {getEventName} from "../util/getEventName";
 import {hasClosestByMatchTag} from "../util/hasClosest";
+import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 import {highlightToolbar} from "../wysiwyg/highlightToolbar";
 
 export class MenuItem {
@@ -168,6 +169,8 @@ export class MenuItem {
                 if (useHighlight) {
                     highlightToolbar(vditor);
                 }
+
+                afterRenderEvent(vditor);
             } else {
                 insertText(vditor, this.menuItem.prefix || "", this.menuItem.suffix || "",
                     replace, true);

src/ts/undo/WysiwygUndo.ts

@@ -3,6 +3,7 @@ import {disableToolbar} from "../toolbar/disableToolbar";
 import {enableToolbar} from "../toolbar/enableToolbar";
 import {scrollCenter} from "../util/editorCommenEvent";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
+import {processPreCode} from "../wysiwyg/processPreCode";
 import {setRangeByWbr} from "../wysiwyg/setRangeByWbr";
 
 class WysiwygUndo {
@@ -88,10 +89,11 @@ class WysiwygUndo {
         this.lastText = text;
 
         vditor.wysiwyg.element.innerHTML = text;
+        processPreCode(vditor.wysiwyg.element);
         vditor.wysiwyg.element.insertAdjacentElement("beforeend", vditor.wysiwyg.popover);
         setRangeByWbr(vditor.wysiwyg.element, vditor.wysiwyg.element.ownerDocument.createRange());
         scrollCenter(vditor.wysiwyg.element);
-        afterRenderEvent(vditor);
+        afterRenderEvent(vditor, false);
 
         if (this.undoStack.length > 1) {
             enableToolbar(vditor.toolbar.elements, ["undo"]);

src/ts/util/editorCommenEvent.ts

@@ -23,14 +23,6 @@ export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
 
 };
 
-export const copyEvent = (editorElement: HTMLElement) => {
-    editorElement.addEventListener("copy", (event: ClipboardEvent) => {
-        event.stopPropagation();
-        event.preventDefault();
-        event.clipboardData.setData("text/plain", getSelectText(editorElement));
-    });
-};
-
 export const scrollCenter = (editorElement: HTMLElement) => {
     const cursorTop = getCursorPosition(editorElement).top;
     const center = editorElement.clientHeight / 2;

src/ts/util/getText.ts

@@ -5,11 +5,13 @@ export const getText = (vditor: IVditor) => {
         // last char must be a `\n`.
         return code160to32(`${vditor.editor.element.textContent}\n`.replace(/\n\n$/, "\n"));
     } else if (vditor.wysiwyg) {
-        vditor.wysiwyg.element.querySelectorAll("code").forEach((codeElement) => {
+        const cloneEditorElement = document.createElement("pre");
+        cloneEditorElement.innerHTML = vditor.wysiwyg.element.innerHTML;
+        cloneEditorElement.querySelectorAll("code").forEach((codeElement) => {
             codeElement.setAttribute("data-code",
                 decodeURIComponent(codeElement.getAttribute("data-code")));
         });
-        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
+        return vditor.lute.VditorDOM2Md(cloneEditorElement.innerHTML);
     }
     return "";
 };

src/ts/wysiwyg/afterRenderEvent.ts

@@ -1,6 +1,6 @@
 import {getText} from "../util/getText";
 
-export const afterRenderEvent = (vditor: IVditor) => {
+export const afterRenderEvent = (vditor: IVditor, isAddUndoStack = true) => {
     if (vditor.options.counter > 0) {
         vditor.counter.render(getText(vditor).length, vditor.options.counter);
     }
@@ -17,5 +17,7 @@ export const afterRenderEvent = (vditor: IVditor) => {
         vditor.devtools.renderEchart(vditor);
     }
 
-    vditor.wysiwygUndo.addToUndoStack(vditor);
+    if (isAddUndoStack) {
+        vditor.wysiwygUndo.addToUndoStack(vditor);
+    }
 };

src/ts/wysiwyg/index.ts

@@ -1,12 +1,14 @@
 import {getSelectPosition} from "../editor/getSelectPosition";
 import {setSelectionFocus} from "../editor/setSelection";
 import {uploadFiles} from "../upload";
-import {copyEvent, focusEvent, hotkeyEvent, scrollCenter, selectEvent} from "../util/editorCommenEvent";
+import { focusEvent, hotkeyEvent, scrollCenter, selectEvent} from "../util/editorCommenEvent";
+import {getText} from "../util/getText";
 import {hasClosestByClassName, hasClosestByTag} from "../util/hasClosest";
 import {processPasteCode} from "../util/processPasteCode";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {getParentBlock} from "./getParentBlock";
 import {highlightToolbar} from "./highlightToolbar";
+import {insertHTML} from "./insertHTML";
 import {processPreCode} from "./processPreCode";
 import {setRangeByWbr} from "./setRangeByWbr";
 
@@ -34,7 +36,6 @@ class WYSIWYG {
         document.execCommand("DefaultParagraphSeparator", false, "p");
 
         focusEvent(vditor, this.element);
-        copyEvent(this.element);
         hotkeyEvent(vditor, this.element);
         selectEvent(vditor, this.element);
     }
@@ -52,6 +53,12 @@ class WYSIWYG {
             });
         }
 
+        this.element.addEventListener("copy", (event: ClipboardEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+            event.clipboardData.setData("text/plain", getText(vditor));
+        });
+
         this.element.addEventListener("paste", async (event: ClipboardEvent) => {
             event.stopPropagation();
             event.preventDefault();
@@ -78,20 +85,19 @@ class WYSIWYG {
             }
 
             if (textHTML.trim() !== "") {
-                document.execCommand("insertHTML", false, vditor.lute.HTML2VditorDOM(textHTML));
+                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,
+                });
             } 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) {
-
-                const pasteElement = document.createElement("template");
-                pasteElement.innerHTML = vditor.lute.Md2VditorDOM(textPlain);
-
-                const range = getSelection().getRangeAt(0);
-                range.insertNode(pasteElement.content.cloneNode(true));
-                range.collapse(false);
-
-                this.element.insertAdjacentElement("beforeend", this.popover);
-                processPreCode(this.element);
+                insertHTML(vditor.lute.Md2VditorDOM(textPlain), {element: this.element, popover: this.popover});
             }
 
             afterRenderEvent(vditor);
@@ -198,10 +204,7 @@ class WYSIWYG {
                 const vditorHTML = this.element.innerHTML.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(`SpinVditorDOM-argument:[${
-                    vditorHTML.split('<div class="vditor-panel vditor-panel--none"')[0]}]`);
                 this.element.innerHTML = vditor.lute.SpinVditorDOM(vditorHTML);
-                console.log(`SpinVditorDOM-result:[${this.element.innerHTML}]`);
                 this.element.insertAdjacentElement("beforeend", this.popover);
 
                 // 设置光标

src/ts/wysiwyg/insertHTML.ts

@@ -0,0 +1,16 @@
+import {processPreCode} from "./processPreCode";
+
+export const insertHTML = (html: string, editor: {
+    element: HTMLPreElement,
+    popover: HTMLDivElement,
+}) => {
+    const pasteElement = document.createElement("template");
+    pasteElement.innerHTML = html;
+
+    const range = getSelection().getRangeAt(0);
+    range.insertNode(pasteElement.content.cloneNode(true));
+    range.collapse(false);
+
+    editor.element.insertAdjacentElement("beforeend", editor.popover);
+    processPreCode(editor.element);
+};