Merge branch 'feature/zhihu-formula' into develop

Author: guanpengchn

README.md

@@ -8,10 +8,8 @@
 ## 简介
 
 - 支持自定义样式的 Markdown 编辑器
-- 支持微信公众号排版
-- 支持开源中国、知乎、稀土掘金、博客园和 CSDN 等一系列平台
-- 内容和自定义样式浏览器中实时保存
-- 支持上传图片、脚注、公式
+- 支持微信公众号、知乎、开源中国、稀土掘金、博客园和 CSDN 等一系列平台
+- 更多用户和开发者文档请参考 [Markdown Nice Docs](https://docs.mdnice.com/)
 - 欢迎[在线使用](https://mdnice.com/)
 
 ## 示例
@@ -65,10 +63,6 @@ function App() {
 export default App;
 ```
 
-## 更多文档
-
-更多用户和开发者文档请参考 [Markdown Nice Docs](https://docs.mdnice.com/)
-
 ## 关于
 
 mdnice 社区组建了**微信用户群**，欢迎反馈意见和公众号大佬们一起交流，关注公众号回复「排版」拉你入群。

package.json

@@ -34,8 +34,6 @@
     "markdown-it-implicit-figures": "^0.9.0",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-ruby": "^0.1.1",
-    "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0",
     "markdown-it-table-of-contents": "^0.4.4",
     "mathjax": "^3.0.0",
     "mobx": "^5.9.0",

src/App.js

@@ -11,7 +11,7 @@ import StyleEditor from "./layout/StyleEditor";
 import "./App.css";
 import "./utils/mdMirror.css";
 
-import {LAYOUT_ID} from "./utils/constant";
+import {LAYOUT_ID, BOX_ID} from "./utils/constant";
 import {markdownParser, markdownParserWechat, updateMathjax} from "./utils/helper";
 import pluginCenter from "./utils/pluginCenter";
 import appContext from "./utils/appContext";
@@ -42,24 +42,16 @@ class App extends Component {
         options: {
           renderActions: {
             addMenu: [0, "", ""],
-          },
-        },
-        startup: {
-          ready: () => {
-            window.MathJax.startup.defaultReady();
-            window.MathJax.startup.promise.then(() => {
-              const element = document.getElementById(LAYOUT_ID);
-              let html = element.innerHTML;
-              html = html.replace(
-                /<mjx-container.+?display.+?>(.+?)<\/mjx-container>/g,
-                '<section class="block-equation">$1</section>',
-              );
-              html = html.replace(
-                /<mjx-container.+?>(.+?)<\/mjx-container>/g,
-                '<span class="inline-equation">$1</span>',
-              );
-              element.innerHTML = html;
-            });
+            addContainer: [
+              190,
+              (doc) => {
+                for (const math of doc.math) {
+                  const cls = math.display ? "block-equation" : "inline-equation";
+                  math.typesetRoot.className = cls;
+                  math.typesetRoot.setAttribute("data", math.math);
+                }
+              },
+            ],
           },
         },
       };
@@ -202,7 +194,7 @@ class App extends Component {
               </div>
               <div id="marked-text" className="text-box" onMouseOver={(e) => this.setCurrentIndex(2, e)}>
                 <div
-                  id="wx-box"
+                  id={BOX_ID}
                   className="wx-box"
                   onScroll={this.handleScroll}
                   style={{width: previewType === "pc" ? "100%" : 375}}

src/Lib.js

@@ -1,10 +1,12 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
+import {Result} from "antd";
+import {Provider} from "mobx-react";
+
 import "./index.css";
 
 import App from "./App";
 
-import {Provider} from "mobx-react";
 import content from "./store/content";
 import userInfo from "./store/userInfo";
 import navbar from "./store/navbar";
@@ -13,14 +15,27 @@ import imageHosting from "./store/imageHosting";
 
 import {isPC} from "./utils/helper";
 import appContext from "./utils/appContext";
-import {Result} from "antd";
 import SvgIcon from "./icon";
-import {solveMath, solveHtml} from "./utils/converter";
+import {solveWeChatMath, solveZhihuMath, solveHtml} from "./utils/converter";
+import {LAYOUT_ID} from "./utils/constant";
 
 class Lib extends Component {
-  getHtml() {
-    solveMath();
-    return solveHtml();
+  getWeChatHtml() {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveWeChatMath();
+    const res = solveHtml();
+    layout.innerHTML = html; // 恢复现场
+    return res;
+  }
+
+  getZhihuHtml() {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveZhihuMath();
+    const res = solveHtml();
+    layout.innerHTML = html; // 恢复现场
+    return res;
   }
 
   render() {

src/component/Copy.css

@@ -0,0 +1,7 @@
+.nice-copy {
+  height: 30px;
+}
+
+.nice-copy button {
+  height: 30px;
+}

src/component/Copy.js

@@ -1,8 +1,10 @@
 import React, {Component} from "react";
 import {observer, inject} from "mobx-react";
-import {Button, message, ConfigProvider} from "antd";
+import {message, ConfigProvider, Dropdown, Icon, Menu} from "antd";
 
-import {solveMath, solveHtml, copySafari} from "../utils/converter";
+import {solveWeChatMath, solveZhihuMath, solveHtml, copySafari} from "../utils/converter";
+import {LAYOUT_ID} from "../utils/constant";
+import "./Copy.css";
 
 @inject("content")
 @inject("navbar")
@@ -13,27 +15,49 @@ class Copy extends Component {
   constructor(props) {
     super(props);
     this.html = "";
-    this.state = {
-      loading: false,
-    };
   }
 
-  copy = () => {
-    this.setState({loading: true});
-    solveMath();
+  copyWechat = () => {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveWeChatMath();
     this.html = solveHtml();
-    // FIXED: safari 复制问题
     copySafari(this.html);
     message.success("已复制，请到微信公众平台粘贴");
-    this.setState({loading: false});
+    layout.innerHTML = html; // 恢复现场
+  };
+
+  copyZhihu = () => {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveZhihuMath();
+    this.html = solveHtml();
+    copySafari(this.html);
+    message.success("已复制，请到知乎粘贴");
+    layout.innerHTML = html; // 恢复现场
   };
 
   render() {
+    const menu = (
+      <Menu>
+        <div style={style.menuItem}>
+          <div role="button" style={style.themeItem} onClick={this.copyZhihu} onKeyDown={this.copyZhihu} tabIndex="0">
+            复制到知乎
+          </div>
+        </div>
+      </Menu>
+    );
     return (
       <ConfigProvider autoInsertSpaceInButton={false}>
-        <Button type="primary" style={style.btnHeight} onClick={this.copy} loading={this.state.loading}>
+        <Dropdown.Button
+          onClick={this.copyWechat}
+          overlay={menu}
+          icon={<Icon type="more" style={style.iconSize} />}
+          className="nice-copy"
+          type="primary"
+        >
           复制
-        </Button>
+        </Dropdown.Button>
       </ConfigProvider>
     );
   }
@@ -52,6 +76,27 @@ const style = {
   close: {
     padding: 0,
   },
+  format: {
+    marginRight: 8,
+  },
+  themeItem: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  themeItemAuthor: {
+    color: "gray",
+  },
+  menuItem: {
+    clear: "both",
+    margin: 0,
+    padding: "5px 12px",
+    color: "rgba(0, 0, 0, 0.65)",
+    fontWeight: "normal",
+    fontSize: "14px",
+    lineHeight: "22px",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+  },
 };
 
 export default Copy;

src/component/Dialog/AboutDialog.js

@@ -52,8 +52,7 @@ class AboutDialog extends Component {
         </h3>
 
         <p style={style.lineHeight}>支持自定义样式的 Markdown 编辑器；</p>
-        <p style={style.lineHeight}>支持微信公众号排版；</p>
-        <p style={style.lineHeight}>支持开源中国、知乎、掘金、博客园和CSDN等平台；</p>
+        <p style={style.lineHeight}>支持微信公众号、开源中国、知乎、掘金、博客园和CSDN等平台；</p>
         <h3 style={style.headerMargin}>我们</h3>
         <p style={style.lineHeight}>
           如果你喜欢我们的工具，欢迎关注

src/component/ImageHosting/AliOSS.js

@@ -75,7 +75,11 @@ class AliOSS extends Component {
         <Form.Item label="提示" style={style.formItem}>
           <span>配置好图床信息后请在右上角进行切换</span>
           <br />
-          <a rel="noopener noreferrer" target="_blank" href="https://mp.weixin.qq.com/s/QPsOUkLCsvhqSicTOGaHJg">
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://docs.mdnice.com/#/%E9%98%BF%E9%87%8C%E4%BA%91%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA"
+          >
             阿里云图床配置文档
           </a>
         </Form.Item>

src/component/ImageHosting/QiniuOSS.js

@@ -103,7 +103,11 @@ class QiniuOSS extends Component {
         <Form.Item label="提示" style={style.formItem}>
           <span>配置好图床信息后请在右上角进行切换</span>
           <br />
-          <a rel="noopener noreferrer" target="_blank" href="https://mp.weixin.qq.com/s/_ytSpvKnzEVx0l_LONdnHg">
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://docs.mdnice.com/#/%E4%B8%83%E7%89%9B%E4%BA%91%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA"
+          >
             七牛云图床配置文档
           </a>
         </Form.Item>