🐛 fix #411

Vanessa219 · May 14, 2020 · 1c95824 · 1c95824
1 parent 9a87e5a
commit 1c95824
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -66,6 +66,7 @@
 
 ### v3.2.6 / 2020-05-xx
 
+* [411](https://github.com/Vanessa219/vditor/issues/411) 复制到微信公众号后代码块背景丢失 `修复缺陷`
 * [410](https://github.com/Vanessa219/vditor/issues/410) not delete inline code(firfox) `修复缺陷`
 * [405](https://github.com/Vanessa219/vditor/issues/405) translated mindmap into Korean `文档相关`
 

diff --git a/src/assets/scss/_reset.scss b/src/assets/scss/_reset.scss
@@ -201,6 +201,10 @@
       }
     }
 
+    pre {
+      margin: 1em 0;
+    }
+
     pre > code {
       margin: 0;
       font-size: 85%;

diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts
@@ -28,12 +28,13 @@ export class Preview {
             previewElement.classList.add(vditor.options.classes.preview);
         }
         previewElement.style.maxWidth = vditor.options.preview.maxWidth + "px";
-        previewElement.addEventListener("copy", () => {
-            // 防止背景色被粘贴到公众号中
-            this.element.style.backgroundColor = "#fff";
-            setTimeout(() => {
-                this.element.style.backgroundColor = "var(--textarea-background-color)";
-            });
+        previewElement.addEventListener("copy", (event) => {
+            const tempElement = document.createElement("div");
+            tempElement.className = "vditor-reset";
+            tempElement.appendChild(getSelection().getRangeAt(0).cloneContents());
+
+            this.copyToWechat(vditor, tempElement);
+            event.preventDefault();
         });
 
         const actionElement = document.createElement("div");
@@ -57,21 +58,7 @@ export class Preview {
             }
 
             if (type === "mp-wechat") {
-                // fix math render
-                document.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => {
-                    item.style.display = "initial";
-                });
-
-                // 防止背景色被粘贴到公众号中
-                this.element.style.backgroundColor = "#fff";
-                const range = this.element.lastElementChild.ownerDocument.createRange();
-                range.selectNode(this.element.lastElementChild);
-                setSelectionFocus(range);
-                document.execCommand("copy");
-                vditor.tip.show("已复制，可到微信公众号平台进行粘贴");
-                range.collapse(true);
-
-                this.element.style.backgroundColor = "var(--textarea-background-color)";
+                this.copyToWechat(vditor, this.element.lastElementChild.cloneNode(true) as HTMLElement);
                 return;
             }
 
@@ -185,4 +172,26 @@ export class Preview {
         abcRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
         mediaRender(vditor.preview.element.lastElementChild as HTMLElement);
     }
+
+    private copyToWechat(vditor: IVditor, copyElement: HTMLElement) {
+        // fix math render
+        copyElement.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => {
+            item.style.display = "initial";
+        });
+        // 防止背景色被粘贴到公众号中
+        copyElement.style.backgroundColor = "#fff";
+        // 代码背景
+        copyElement.querySelectorAll("code").forEach((item) => {
+            item.style.backgroundImage = "none";
+        });
+        this.element.append(copyElement);
+
+        const range = copyElement.ownerDocument.createRange();
+        range.selectNode(copyElement);
+        setSelectionFocus(range);
+        document.execCommand("copy");
+
+        this.element.lastElementChild.remove();
+        vditor.tip.show("已复制，可到微信公众号平台进行粘贴");
+    }
 }