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") {