feat: add mathjax css

Dup4 · Jun 8, 2022 · a811fd2 · a811fd2
1 parent d7fd683
commit a811fd2
Show file tree

Hide file tree

Showing 13 changed files with 1,000 additions and 34 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,16 +6,17 @@
     "antfu",
     "arithmatex",
     "bumpp",
+    "camelcase",
     "esmo",
     "esno",
     "mathjax",
     "mkdocs",
     "nextui",
+    "nprogress",
     "pnpm",
     "typecheck",
     "vite",
-    "vitest",
-    "nprogress"
+    "vitest"
   ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {

diff --git a/packages/mathjax-render-react/build.config.ts b/packages/mathjax-render-react/build.config.ts
@@ -1,4 +1,8 @@
-import { defineBuildConfig } from "unbuild";
+import { BuildContext, defineBuildConfig } from "unbuild";
+import { RollupOptions } from "rollup";
+
+import postcss from "rollup-plugin-postcss";
+import camelcase from "camelcase";
 
 export default defineBuildConfig({
   entries: ["src/index"],
@@ -7,4 +11,17 @@ export default defineBuildConfig({
   rollup: {
     emitCJS: true,
   },
+  hooks: {
+    "rollup:options": (ctx: BuildContext, options: RollupOptions): void => {
+      options.plugins.push(
+        postcss({
+          inject: true,
+          use: ["less"],
+          namedExports(name) {
+            return camelcase(name);
+          },
+        }),
+      );
+    },
+  },
 });
diff --git a/packages/mathjax-render-react/package.json b/packages/mathjax-render-react/package.json
@@ -50,7 +50,13 @@
   "devDependencies": {
     "@types/react": "^18.0.11",
     "@types/react-dom": "^18.0.5",
+    "camelcase": "^7.0.0",
+    "less": "^4.1.2",
+    "postcss": "^8.4.14",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react-dom": "^18.1.0",
+    "rollup": "^2.75.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "4.7.3"
   }
 }
diff --git a/packages/mathjax-render-react/src/MathJaxNode.tsx b/packages/mathjax-render-react/src/MathJaxNode.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Options, Tex2SVG } from "mathjax-render/browser";
+import style from "./mathjaxNode.module.less";
 
 export interface MathJaxNodeProps extends Options {
   tex: string;
@@ -9,11 +10,26 @@ export interface MathJaxNodeProps extends Options {
 export const MathJaxNode: React.FC<MathJaxNodeProps> = (props) => {
   const { tex, display, ...options } = props;
 
+  if (!options.nodeClassNameList) {
+    options.nodeClassNameList = [];
+    options.nodeClassNameList.push(
+      style.MathJax,
+      display ? style.block : style.inline,
+    );
+  }
+
+  if (!options.errorMessageClassNameList) {
+    options.errorMessageClassNameList = [];
+    options.errorMessageClassNameList.push(style.MathJax, style.errorMessage);
+  }
+
+  const html = Tex2SVG(tex, display, options).outerHTML;
+
   if (display) {
     return (
       <div
         dangerouslySetInnerHTML={{
-          __html: Tex2SVG(tex, display, options).outerHTML,
+          __html: html,
         }}
       ></div>
     );
@@ -22,7 +38,7 @@ export const MathJaxNode: React.FC<MathJaxNodeProps> = (props) => {
   return (
     <span
       dangerouslySetInnerHTML={{
-        __html: Tex2SVG(tex, display, options).outerHTML,
+        __html: html,
       }}
     ></span>
   );

diff --git a/packages/mathjax-render-react/src/index.ts b/packages/mathjax-render-react/src/index.ts
@@ -0,0 +1 @@
+export * from "./mathjaxNode";
diff --git a/packages/mathjax-render-react/src/index.tsx b/packages/mathjax-render-react/src/index.tsx
diff --git a/packages/mathjax-render-react/src/mathjaxNode.module.less b/packages/mathjax-render-react/src/mathjaxNode.module.less
@@ -0,0 +1,27 @@
+.MathJax {
+  &.inline {
+    font-size: 16px;
+  }
+
+  &.block {
+    overflow: auto;
+    overflow-y: hidden;
+    font-size: 18px;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  &.error-message {
+    font-weight: bold;
+    display: inline-block;
+    border: 2px solid #000;
+    padding: 0 4px;
+    text-align: left;
+  }
+}
diff --git a/packages/mathjax-render-react/tsconfig.json b/packages/mathjax-render-react/tsconfig.json
@@ -1,10 +1,11 @@
 {
   "extends": "../../tsconfig.base.json",
   "include": [
-    "src"
+    "src",
+    "typings.d.ts",
   ],
   "compilerOptions": {
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": [
       "DOM"
     ],
@@ -16,6 +17,6 @@
       "mathjax-render/browser": [
         "../mathjax-render/src/browser"
       ]
-    }
+    },
   }
 }
diff --git a/packages/mathjax-render-react/typings.d.ts b/packages/mathjax-render-react/typings.d.ts
@@ -0,0 +1 @@
+declare module "*.module.less";
diff --git a/packages/mathjax-render/package.json b/packages/mathjax-render/package.json
@@ -26,7 +26,10 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./browser": "./dist/esm/browser/index.mjs"
+    "./browser": {
+      "import": "./dist/esm/browser/index.mjs",
+      "types": "./dist/esm/browser/index.d.ts"
+    }
   },
   "browser": {
     "./dist/index.cjs": "./dist/esm/browser/index.ts",

diff --git a/packages/mathjax-render/src/browser/Tex2SVG.ts b/packages/mathjax-render/src/browser/Tex2SVG.ts
@@ -58,6 +58,7 @@ export function Tex2SVG(math: string, display: boolean, options?: Options) {
     if (options?.errorMessageClassNameList) {
       message.classList.add(...options.errorMessageClassNameList);
     } else {
+      // default style
       message.style.fontWeight = "bold";
       message.style.display = "inline-block";
       message.style.border = "2px solid #000";

diff --git a/packages/mathjax-render/src/common/CSS.ts b/packages/mathjax-render/src/common/CSS.ts
@@ -131,5 +131,4 @@ foreignObject[data-mjx-xml] {
 .MathJax path {
   stroke-width: 3;
 }
-
 `;