diff --git a/package-lock.json b/package-lock.json
index 5e34547..737ab67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1159,6 +1159,20 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@matejmazur/react-katex": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/@matejmazur/react-katex/-/react-katex-3.1.3.tgz",
+ "integrity": "sha512-rBp7mJ9An7ktNoU653BWOYdO4FoR4YNwofHZi+vaytX/nWbIlmHVIF+X8VFOn6c3WYmrLT5FFBjKqCZ1sjR5uQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12",
+ "yarn": ">=1.1"
+ },
+ "peerDependencies": {
+ "katex": ">=0.9",
+ "react": ">=16"
+ }
+ },
"node_modules/@mdx-js/react": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz",
@@ -10747,6 +10761,7 @@
"packages/react-notion-custom": {
"version": "0.0.0",
"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/package.json b/packages/react-notion-custom/package.json
index d1947a2..617b5bd 100644
--- 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
new file mode 100644
index 0000000..f603aae
--- /dev/null
+++ 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 (
+
+ {expression}
+
+ );
+};
+
+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
index 24b675a..b0e4710 100644
--- a/packages/react-notion-custom/src/lib/components/index.ts
+++ b/packages/react-notion-custom/src/lib/components/index.ts
@@ -1,8 +1,9 @@
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,
@@ -10,4 +11,5 @@ export default {
heading_3: Headings,
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
index 43f5bdc..55f4716 100644
--- 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);
}
diff --git a/packages/story/src/stories/equation/equation.json b/packages/story/src/stories/equation/equation.json
new file mode 100644
index 0000000..0b6d2fb
--- /dev/null
+++ b/packages/story/src/stories/equation/equation.json
@@ -0,0 +1,294 @@
+{
+ "object": "page",
+ "id": "591d29d3-cb19-4273-bb3a-82644ed4faa4",
+ "created_time": "2022-12-28T23:30:00.000Z",
+ "last_edited_time": "2023-01-07T04:30:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "cover": {
+ "type": "external",
+ "external": {
+ "url": "https://www.notion.so/images/page-cover/solid_beige.png"
+ }
+ },
+ "icon": null,
+ "parent": {
+ "type": "database_id",
+ "database_id": "be65d799-9e98-4426-86a6-72072991e27b"
+ },
+ "archived": false,
+ "properties": {
+ "HashTags": {
+ "id": "Hhkx",
+ "type": "multi_select",
+ "multi_select": []
+ },
+ "생성 일시": {
+ "id": "J%7C%3BZ",
+ "type": "created_time",
+ "created_time": "2022-12-28T23:30:00.000Z"
+ },
+ "Slug": {
+ "id": "S%3A%7B%3E",
+ "type": "rich_text",
+ "rich_rich_text": [
+ {
+ "type": "text",
+ "text": {
+ "content": "test",
+ "link": null
+ },
+ "annotations": {
+ "bold": false,
+ "italic": false,
+ "strikethrough": false,
+ "underline": false,
+ "code": false,
+ "color": "default"
+ },
+ "plain_text": "test",
+ "href": null
+ }
+ ]
+ },
+ "Description": {
+ "id": "qTV%3E",
+ "type": "rich_text",
+ "rich_rich_text": []
+ },
+ "Status": {
+ "id": "vu%7C%3B",
+ "type": "select",
+ "select": {
+ "id": "|QrX",
+ "name": "Publishable",
+ "color": "green"
+ }
+ },
+ "Name": {
+ "id": "title",
+ "type": "title",
+ "title": [
+ {
+ "type": "text",
+ "text": {
+ "content": "테스트 paragrap",
+ "link": null
+ },
+ "annotations": {
+ "bold": false,
+ "italic": false,
+ "strikethrough": false,
+ "underline": false,
+ "code": false,
+ "color": "default"
+ },
+ "plain_text": "테스트 paragrap",
+ "href": null
+ }
+ ]
+ }
+ },
+ "url": "https://www.notion.so/paragrap-591d29d3cb194273bb3a82644ed4faa4",
+ "blocks": [
+ {
+ "object": "block",
+ "id": "06d7c6ab-cb38-4039-bde8-fec3b85ea728",
+ "parent": {
+ "type": "page_id",
+ "page_id": "591d29d3-cb19-4273-bb3a-82644ed4faa4"
+ },
+ "created_time": "2023-01-07T04:10:00.000Z",
+ "last_edited_time": "2023-01-07T04:10:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": false,
+ "archived": false,
+ "type": "paragraph",
+ "paragraph": {
+ "color": "gray_background",
+ "rich_text": []
+ }
+ },
+ {
+ "object": "block",
+ "id": "e2421c70-1874-4ea7-b7be-16902d4d0dd1",
+ "parent": {
+ "type": "page_id",
+ "page_id": "591d29d3-cb19-4273-bb3a-82644ed4faa4"
+ },
+ "created_time": "2023-01-07T04:07:00.000Z",
+ "last_edited_time": "2023-01-07T04:29:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": false,
+ "archived": false,
+ "type": "equation",
+ "equation": {
+ "expression": "E=mc^2"
+ }
+ },
+ {
+ "object": "block",
+ "id": "e77001a4-9b1b-40ea-9349-a73d022e7d87",
+ "parent": {
+ "type": "page_id",
+ "page_id": "591d29d3-cb19-4273-bb3a-82644ed4faa4"
+ },
+ "created_time": "2023-01-07T03:39:00.000Z",
+ "last_edited_time": "2023-01-07T04:10:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": false,
+ "archived": false,
+ "type": "paragraph",
+ "paragraph": {
+ "color": "gray_background",
+ "rich_text": []
+ }
+ },
+ {
+ "object": "block",
+ "id": "f938d548-9cdb-4250-8f51-2b49af2598f8",
+ "parent": {
+ "type": "page_id",
+ "page_id": "591d29d3-cb19-4273-bb3a-82644ed4faa4"
+ },
+ "created_time": "2023-01-07T04:08:00.000Z",
+ "last_edited_time": "2023-01-07T04:30:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": true,
+ "archived": false,
+ "type": "paragraph",
+ "paragraph": {
+ "color": "gray_background",
+ "rich_text": []
+ },
+ "blocks": [
+ {
+ "object": "block",
+ "id": "4f450777-4131-4750-ae22-fa36f3bd7169",
+ "parent": {
+ "type": "block_id",
+ "block_id": "f938d548-9cdb-4250-8f51-2b49af2598f8"
+ },
+ "created_time": "2023-01-07T03:39:00.000Z",
+ "last_edited_time": "2023-01-07T04:30:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": false,
+ "archived": false,
+ "type": "paragraph",
+ "paragraph": {
+ "color": "blue_background",
+ "rich_text": [
+ {
+ "type": "text",
+ "text": {
+ "content": "nest paragraph",
+ "link": null
+ },
+ "annotations": {
+ "bold": false,
+ "italic": false,
+ "strikethrough": false,
+ "underline": false,
+ "code": false,
+ "color": "default"
+ },
+ "plain_text": "nest paragraph",
+ "href": null
+ }
+ ]
+ }
+ },
+ {
+ "object": "block",
+ "id": "09a029fa-1c75-46fb-a9ed-646a02121255",
+ "parent": {
+ "type": "block_id",
+ "block_id": "f938d548-9cdb-4250-8f51-2b49af2598f8"
+ },
+ "created_time": "2023-01-07T04:09:00.000Z",
+ "last_edited_time": "2023-01-07T04:30:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": false,
+ "archived": false,
+ "type": "equation",
+ "equation": {
+ "expression": "F=ma"
+ }
+ }
+ ]
+ },
+ {
+ "object": "block",
+ "id": "23d49ee9-d260-4b92-9ba8-999570eb91ee",
+ "parent": {
+ "type": "page_id",
+ "page_id": "591d29d3-cb19-4273-bb3a-82644ed4faa4"
+ },
+ "created_time": "2023-01-07T04:30:00.000Z",
+ "last_edited_time": "2023-01-07T04:30:00.000Z",
+ "created_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "last_edited_by": {
+ "object": "user",
+ "id": "95fc0174-8fc6-4114-8e45-f67eacd99f07"
+ },
+ "has_children": false,
+ "archived": false,
+ "type": "paragraph",
+ "paragraph": {
+ "color": "default",
+ "rich_text": []
+ }
+ }
+ ]
+}
diff --git a/packages/story/src/stories/equation/equation.stories.tsx b/packages/story/src/stories/equation/equation.stories.tsx
new file mode 100644
index 0000000..74b2471
--- /dev/null
+++ b/packages/story/src/stories/equation/equation.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Component from "../../lib/Notion";
+import json from "./equation.json";
+
+const blocks = json.blocks as any;
+
+const meta: Meta = {
+ title: "Blocks/Equation",
+ component: Component,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Equation: Story = {
+ args: {
+ title: "Equation",
+ blocks: blocks,
+ },
+};