添加数学公式粘贴到知乎编辑器

Author: views63

src/App.js

@@ -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);
+                }
+              },
+            ],
           },
         },
       };

src/component/Copy.js

@@ -2,7 +2,7 @@ import React, {Component} from "react";
 import {observer, inject} from "mobx-react";
 import {Button, message, ConfigProvider} from "antd";
 
-import {solveMath, solveHtml, copySafari} from "../utils/converter";
+import {solveWeChatMath, solveZhihuMath, solveHtml, copySafari} from "../utils/converter";
 
 @inject("content")
 @inject("navbar")
@@ -20,7 +20,8 @@ class Copy extends Component {
 
   copy = () => {
     this.setState({loading: true});
-    solveMath();
+    solveZhihuMath();
+    // solveWeChatMath();
     this.html = solveHtml();
     // FIXED: safari 复制问题
     copySafari(this.html);

src/utils/converter.js

@@ -2,19 +2,22 @@ import juice from "juice";
 import {message} from "antd";
 import {BASIC_THEME_ID, CODE_THEME_ID, MARKDOWN_THEME_ID, LAYOUT_ID} from "./constant";
 
-export const solveMath = () => {
+export const solveWeChatMath = () => {
   const layout = document.getElementById(LAYOUT_ID);
-  const svgArr = layout.getElementsByTagName("svg");
-  for (let i = 0; i < svgArr.length; i++) {
-    const svg = svgArr[i];
-    if (!svg.hasAttribute("style")) {
-      continue;
+  const mjxs = layout.getElementsByTagName("mjx-container");
+  for (let i = 0; i < mjxs.length; i++) {
+    const mjx = mjxs[i];
+    if (!mjx.hasAttribute("data")) {
+      break;
     }
 
+    mjx.removeAttribute("data");
+    mjx.removeAttribute("jax");
+    mjx.removeAttribute("display");
+    mjx.removeAttribute("tabindex");
+    mjx.removeAttribute("ctxtmenu_counter");
+    const svg = mjx.firstChild;
     const width = svg.getAttribute("width");
-    if (width === null) {
-      break;
-    }
     const height = svg.getAttribute("height");
     svg.removeAttribute("width");
     svg.removeAttribute("height");
@@ -23,11 +26,25 @@ export const solveMath = () => {
   }
 };
 
+export const solveZhihuMath = () => {
+  const layout = document.getElementById(LAYOUT_ID);
+  const mjxs = layout.getElementsByTagName("mjx-container");
+  for (let i = 0; i < mjxs.length; i++) {
+    const mjx = mjxs[i];
+    const data = mjx.getAttribute("data");
+    if (!data) {
+      continue;
+    }
+
+    mjx.innerHTML = '<img class="Formula-image" data-eeimg="true" src="" alt="' + data + '">';
+  }
+};
+
 export const solveHtml = () => {
   const element = document.getElementById("wx-box");
   let html = element.innerHTML;
-  html = html.replace(/\s<span class="inline/g, '&nbsp;<span class="inline');
-  html = html.replace(/svg><\/span>\s/g, "svg></span>&nbsp;");
+  html = html.replace(/\s<mjx-container class="inline/g, '&nbsp;<mjx-container class="inline');
+  html = html.replace(/svg><\/mjx-container>\s/g, "svg></mjx-container>&nbsp;");
   const basicStyle = document.getElementById(BASIC_THEME_ID).innerText;
   const markdownStyle = document.getElementById(MARKDOWN_THEME_ID).innerText;
   const codeStyle = document.getElementById(CODE_THEME_ID).innerText;

src/utils/helper.js

@@ -267,16 +267,5 @@ export const addStyleLabel = (styleLabels) => {
 export const updateMathjax = () => {
   window.MathJax.texReset();
   window.MathJax.typesetClear();
-  window.MathJax.typesetPromise()
-    .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;
-    })
-    .catch((err) => console.log(err.message));
+  window.MathJax.typesetPromise();
 };