feat: equation

notionpresso · Sep 22, 2024 · fa5eb12 · fa5eb12
1 parent 0b29f3b
commit fa5eb12
Show file tree

Hide file tree

Showing 7 changed files with 381 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-notion-custom/package.json b/packages/react-notion-custom/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@matejmazur/react-katex": "^3.1.3",
     "@types/he": "^1.2.3",
     "@types/katex": "^0.16.7",
     "he": "^1.2.0",

diff --git a/packages/react-notion-custom/src/lib/components/equation.tsx b/packages/react-notion-custom/src/lib/components/equation.tsx
@@ -0,0 +1,17 @@
+/**
+ * @link react-katex https://github.com/MatejBransky/react-katex?tab=readme-ov-file
+ */
+import "katex/dist/katex.min.css";
+import TeX from "@matejmazur/react-katex";
+
+import { EquationArgs } from "../types";
+
+const Equation = ({ equation: { expression } }: EquationArgs) => {
+  return (
+    <TeX className="notion-block notion-equation notion-equation-block">
+      {expression}
+    </TeX>
+  );
+};
+
+export default Equation;
diff --git a/packages/react-notion-custom/src/lib/components/index.ts b/packages/react-notion-custom/src/lib/components/index.ts
@@ -1,15 +1,17 @@
+import Equation from "./equation";
 import Heading1 from "./heading-1";
 import Heading2 from "./heading-2";
 import Heading3 from "./heading-3";
 import Paragraph from "./paragraph";
 import Toggle from "./toggle";
 
-export { Heading1, Heading2, Heading3, Paragraph };
+export { Heading1, Heading2, Heading3, Paragraph, Equation };
 
 export default {
   heading_1: Heading1,
   heading_2: Heading2,
   heading_3: Heading3,
   paragraph: Paragraph,
   toggle: Toggle,
+  equation: Equation,
 };
diff --git a/packages/react-notion-custom/src/lib/index.css b/packages/react-notion-custom/src/lib/index.css
@@ -107,6 +107,11 @@
   border-top-width: 8px;
 }
 
+.notion-toggle-title {
+  display: block;
+  width: 100%;
+}
+
 .notion-h-content {
   position: relative;
 
@@ -558,7 +563,30 @@
 .notion-paragraph-content {
   padding: 3px 2px;
 }
-.notion-toggle-title {
-  display: block;
-  width: 100%;
+
+.notion-equation {
+  position: relative;
+  display: inline-flex;
+  color: inherit;
+  fill: inherit;
+  user-select: none;
+  border-radius: 3px;
+  transition: background 20ms ease-in 0s;
+}
+.notion-equation-block {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  overflow: auto;
+  padding: 16px 8px;
+  margin: 2px 0;
+  cursor: pointer;
+}
+.notion-equation:hover {
+  background: var(--bg-color-0);
+}
+.notion-equation:active,
+.notion-equation:focus {
+  background: var(--select-color-2);
 }