diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6287ddef..be4e19917 100644
--- 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
new file mode 100755
index 000000000..b67cd1923
--- /dev/null
+++ b/src/assets/icons/mp-wechat.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/scss/_content.scss b/src/assets/scss/_content.scss
index 17f13eaa5..732ae1589 100644
--- 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
index e29ec5910..ee7cd24ff 100644
--- 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 = `
-`;
+
+`;
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") {