✨ fix #345

Vanessa219 · Apr 29, 2020 · 7fde944 · 7fde944
1 parent 16c8664
commit 7fde944
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/CHANGELOG.md b/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 `修复缺陷`

diff --git a/src/assets/icons/mp-wechat.svg b/src/assets/icons/mp-wechat.svg
diff --git a/src/assets/scss/_content.scss b/src/assets/scss/_content.scss
@@ -116,6 +116,13 @@
         &:focus {
           outline: none;
         }
+
+        svg {
+          fill: currentColor;
+          height: 15px;
+          width: 15px;
+          vertical-align: middle;
+        }
       }
     }
 

diff --git a/src/ts/preview/index.ts b/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") {