From c309d6133512c7af1d5839586006912ff788002d Mon Sep 17 00:00:00 2001 From: Moon-DaeSeung Date: Mon, 23 Sep 2024 23:02:26 +0900 Subject: [PATCH] resolve merge conflict --- package-lock.json | 15 + packages/react-notion-custom/package.json | 1 + .../src/lib/components/equation.tsx | 17 + .../src/lib/components/index.ts | 4 +- .../react-notion-custom/src/lib/index.css | 34 +- .../story/src/stories/equation/equation.json | 294 ++++++++++++++++++ .../src/stories/equation/equation.stories.tsx | 20 ++ 7 files changed, 381 insertions(+), 4 deletions(-) create mode 100644 packages/react-notion-custom/src/lib/components/equation.tsx create mode 100644 packages/story/src/stories/equation/equation.json create mode 100644 packages/story/src/stories/equation/equation.stories.tsx 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, + }, +};