resolve merge conflict

Author: Moon-DaeSeung

package-lock.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",

packages/react-notion-custom/package.json

@@ -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;

packages/react-notion-custom/src/lib/components/equation.tsx

@@ -1,13 +1,15 @@
 import Headings from "./headings";
 import Paragraph from "./paragraph";
 import Toggle from "./toggle";
+import Equation from "./equation";
 
-export { Headings, Paragraph, Toggle };
+export { Headings, Paragraph, Toggle, Equation };
 
 export default {
   heading_1: Headings,
   heading_2: Headings,
   heading_3: Headings,
   paragraph: Paragraph,
   toggle: Toggle,
+  equation: Equation,
 };

packages/react-notion-custom/src/lib/components/index.ts

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