:sparkles: fix #345

CHANGELOG.md

@@ -56,10 +56,11 @@
 ### TODO
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
-* [345](https://github.com/Vanessa219/vditor/issues/345) 支持预览区域粘贴到公众号 `引入特性`
+* [346](https://github.com/Vanessa219/vditor/issues/346) 内容主题推荐（长期有效） `改进功能`
 
 ### v3.1.20 / 2020-04-2x
 
+* [345](https://github.com/Vanessa219/vditor/issues/345) 支持预览区域粘贴到公众号 `引入特性`
 * [324](https://github.com/Vanessa219/vditor/issues/324) 支持多款主题预览 `引入特性`
 * [325](https://github.com/Vanessa219/vditor/issues/325) 导出功能 `引入特性`
 * [344](https://github.com/Vanessa219/vditor/issues/344) outline 渲染 bug `修复缺陷`

src/assets/icons/mp-wechat.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path d="M6.927 17.719s-3.040-3.431-2.915-6.942c0.16-4.453 4.738-10.257 11.359-10.257 1.884 0 5.653 0 10.328 5.52 0.249 0.302-15.075-3.84-18.772 11.679z"></path>
+<path d="M17.477 9.301s3.946-1.298 7.271-0.178c4.222 1.422 8.693 6.826 6.809 13.182-0.533 1.804-1.609 5.413-8.231 8.32-0.356 0.16 10.613-13.351-5.849-21.323z"></path>
+<path d="M10.944 24.332c-1.938 2.035-3.751 1.742-3.751 1.742l0.578-3.191c-5.235-3.44-6.373-10.328-6.453-10.106-2.444 6.817-0.916 11.377 0.027 13.004 3.315 5.733 11.982 7.351 17.484 3.893 2.969-1.867 4.533-7.057 4.533-7.057-5.298 2.338-9.342 2.569-12.417 1.715z"></path>
+</svg>

src/assets/scss/_content.scss

@@ -116,6 +116,13 @@
         &:focus {
           outline: none;
         }
+
+        svg {
+          fill: currentColor;
+          height: 15px;
+          width: 15px;
+          vertical-align: middle;
+        }
       }
     }
 

src/ts/preview/index.ts

@@ -1,3 +1,4 @@
+import mpWechatSVG from "../../assets/icons/mp-wechat.svg";
 import {i18n} from "../i18n/index";
 import {abcRender} from "../markdown/abcRender";
 import {chartRender} from "../markdown/chartRender";
@@ -9,6 +10,8 @@ import {mathRender} from "../markdown/mathRender";
 import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
 import {getEventName} from "../util/compatibility";
+import {hasClosestByTag} from "../util/hasClosestByHEadings";
+import {setSelectionFocus} from "../util/selection";
 
 export class Preview {
     public element: HTMLElement;
@@ -29,20 +32,37 @@ export class Preview {
         actionElement.className = "vditor-preview__action";
         actionElement.innerHTML = `<button class="vditor-preview__action--current" data-type="desktop">Desktop</button>
 <button data-type="tablet">Tablet</button>
-<button data-type="mobile">Mobile/Wechat</button>`;
+<button data-type="mobile">Mobile/Wechat</button>
+<button data-type="mp-wechat" class="vditor-tooltipped vditor-tooltipped__w" aria-label="复制到公众号">${mpWechatSVG}</button>`;
         this.element.appendChild(actionElement);
         this.element.appendChild(previewElement);
 
         actionElement.addEventListener(getEventName(), (event) => {
-            const btn = event.target as HTMLElement;
-            if (btn.tagName !== "BUTTON") {
+            const btn = hasClosestByTag(event.target as HTMLElement, "BUTTON");
+            if (!btn) {
                 return;
             }
+
             const type = btn.getAttribute("data-type");
             if (type === actionElement.querySelector(".vditor-preview__action--current").getAttribute("data-type")) {
                 return;
             }
 
+            if (type === "mp-wechat") {
+                // fix math render
+                document.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => {
+                    item.style.display = "initial";
+                });
+
+                const range = this.element.lastElementChild.ownerDocument.createRange();
+                range.selectNode(this.element.lastElementChild);
+                setSelectionFocus(range);
+                document.execCommand("copy");
+                vditor.tip.show("已复制，请到微信公众平台粘贴");
+                range.collapse(true);
+                return;
+            }
+
             if (type === "desktop") {
                 previewElement.style.width = "auto";
             } else if (type === "tablet") {