-
24 |
-
25 | 26 | 30 | {marker} 31 | 32 |36 | {children} 37 |
33 |
35 |34 |
38 |
20 |
30 | );
31 | };
32 |
33 | export default Callout;
34 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/code/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import copyToClipboard from "clipboard-copy";
3 | import RichText from "../internal/rich-text";
4 | import Prisim from "prismjs";
5 | import "prismjs/themes/prism.css";
6 | import loadDart from "./support-language/dart";
7 | import loadElixir from "./support-language/elixir";
8 | import loadGo from "./support-language/go";
9 | import loadJava from "./support-language/java";
10 | import loadKotlin from "./support-language/kotlin";
11 | import loadMarkdown from "./support-language/markdown";
12 | import loadPython from "./support-language/python";
13 | import loadSql from "./support-language/sql";
14 | import loadTypescript from "./support-language/typescript";
15 | import type { CodeArgs } from "../../types";
16 |
17 | [
18 | loadDart,
19 | loadTypescript,
20 | loadElixir,
21 | loadGo,
22 | loadJava,
23 | loadKotlin,
24 | loadMarkdown,
25 | loadPython,
26 | loadSql,
27 | ].forEach((load) => load(Prisim));
28 |
29 | const Code = ({ ...props }: CodeArgs) => {
30 | const {
31 | code: { caption, rich_text: texts, language },
32 | } = props;
33 | const [showTooltip, setShowTooltip] = useState(false);
34 | const content = texts.map(({ plain_text }) => plain_text).join("");
35 |
36 | useEffect(() => {
37 | let timer: NodeJS.Timeout;
38 | if (showTooltip) {
39 | timer = setTimeout(() => {
40 | setShowTooltip(false);
41 | }, 2000);
42 | }
43 | return () => clearTimeout(timer);
44 | }, [showTooltip]);
45 |
46 | const handleCopy = () => {
47 | copyToClipboard(content);
48 | setShowTooltip(true);
49 | };
50 |
51 | return (
52 |
21 |
24 |
28 | {children}
29 |
25 |
27 |
54 |
84 | {caption.length !== 0 && (
85 |
55 |
72 |
56 | {language.replace(/^[a-z]/, (char) => char.toUpperCase())}
57 |
58 |
71 |
73 |
82 |
83 |
93 |
95 | {"Copied"}
94 |
14 | {children}
15 |
16 | );
17 | };
18 |
19 | export default ColumnList;
20 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/column.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Column: React.FC<{ children: React.ReactNode }> = ({ children }) => {
4 | return (
5 | <>
6 | {children}
7 |
8 |
9 | );
10 | };
11 |
12 | export default Column;
13 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/divider.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DividerArgs } from "../types";
3 |
4 | type DividerProps = DividerArgs;
5 |
6 | const Divider: React.FC
9 |
10 |
11 | );
12 | };
13 |
14 | export default Divider;
15 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/equation.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @link react-katex https://github.com/MatejBransky/react-katex?tab=readme-ov-file
3 | */
4 | import "katex/dist/katex.min.css";
5 | import TeX from "@matejmazur/react-katex";
6 |
7 | import { EquationArgs } from "../types";
8 |
9 | const Equation = ({ equation: { expression } }: EquationArgs) => {
10 | return (
11 | 10 |
15 |
20 | );
21 | }
22 | return null;
23 | }
24 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/headings.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useCallback, useMemo, useState } from "react";
4 | import type { HeadingsArgs, HeadingConfig } from "../types";
5 | import { getColorCss } from "../utils";
6 | import RichText from "./internal/rich-text";
7 |
8 | type HeadingsProps = {
9 | children?: React.ReactNode;
10 | } & HeadingsArgs;
11 |
12 | const Headings: React.FC
16 | {type} Blocks are
17 | not yet supported.
18 |
19 |
44 | {is_toggleable ? (
45 | <>
46 |
66 |
68 | )}
69 |
70 | );
71 | };
72 |
73 | export default Headings;
74 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/arrow_back.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/arrow_forward.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/close.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/download.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/index.ts:
--------------------------------------------------------------------------------
1 | import ArrowBack from "./arrow_back.svg";
2 | import ArrowForward from "./arrow_forward.svg";
3 | import Close from "./close.svg";
4 | import Download from "./download.svg";
5 | import Minus from "./minus.svg";
6 | import Plus from "./plus.svg";
7 |
8 | export default {
9 | ArrowBack,
10 | ArrowForward,
11 | Close,
12 | Download,
13 | Minus,
14 | Plus,
15 | };
16 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/minus.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/assets/plus.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/hooks/image-viewer/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./use-cursor-visibility";
2 | export * from "./use-image-navigation";
3 | export * from "./use-image-scale";
4 | export * from "./use-prevent-scroll";
5 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useCallback } from "react";
2 |
3 | export const useCursorVisibility = () => {
4 | const [isCursorVisible, setIsCursorVisible] = useState(true);
5 | const cursorTimeOutRef = useRef
47 |
56 |
59 |
61 |
62 | {children}
63 |
64 | ) : (
65 | setIsVisible(true)}
24 | onMouseLeave={() => setIsVisible(false)}
25 | className="notion-image-viewer-tooltip-container"
26 | >
27 | {children}
28 | {!disabled && (
29 |
30 | {isVisible && (
31 |
41 |
45 | )}
46 |
47 | )}
48 |
49 | );
50 | };
51 |
52 | export default ImageViewerToolsToolTip;
53 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/image/image-viewer-tools.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { motion } from "framer-motion";
4 | import { handleDownload } from "./lib";
5 |
6 | import Icon from "./assets";
7 | import Tooltip from "./image-viewer-tools-tooltip";
8 |
9 | type ImageViewerToolsProps = {
10 | url: string;
11 | currentImageIndex: number;
12 | imageLength: number;
13 | scaleInputRef: React.MutableRefObject{content}
42 | 43 |{hint}
44 |
59 |
64 |
72 |
73 |
74 |
79 |
87 |
88 |
89 |
90 |
91 |
92 |
95 |
96 |
97 | {isScaleFocus ? (
98 |
124 |
127 |
128 |
129 |
130 |
137 |
138 |
103 |
113 | %
114 |
115 | ) : (
116 |
122 | )}
123 |
45 | {url ? (
46 |
52 | 
53 |
54 | ) : (
55 |
58 |
59 | {caption.length !== 0 && (
60 | unsupported type: {type}
56 | )} 57 |{acc};
61 | default:
62 | return acc;
63 | }
64 | },
65 | {source},
66 | );
67 | };
68 |
69 | return <>{renderText(content)};
70 | }
71 |
72 | function Equation({ props }: { props: EquationArgs }) {
73 | const {
74 | equation: { expression },
75 | } = props;
76 |
77 | return (
78 | <>
79 | -
26 |
-
27 | 28 | 32 | {marker} 33 | 34 |38 | {children} 39 |
35 |
37 |36 |
40 |
17 |
22 | );
23 | };
24 |
25 | export default Paragraph;
26 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/quote.tsx:
--------------------------------------------------------------------------------
1 | import type { QuoteArgs } from "..";
2 | import { getColorCss } from "../utils";
3 | import RichText from "./internal/rich-text";
4 |
5 | type QuoteProps = {
6 | children: React.ReactNode;
7 | } & QuoteArgs;
8 |
9 | const Quote: React.FC
18 |
16 |
23 | );
24 | };
25 |
26 | export default Quote;
27 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/table-row.tsx:
--------------------------------------------------------------------------------
1 | import { type TableRowArgs } from "../types";
2 | import RichText from "./internal/rich-text";
3 |
4 | type TableRowProps = {
5 | children: React.ReactNode;
6 | } & TableRowArgs;
7 |
8 | const TableRow: React.FC
17 |
22 |
18 |
38 |
49 | );
50 | };
51 |
52 | interface CheckBoxProps {
53 | checked: boolean;
54 | }
55 |
56 | const DefaultCheckBox: React.FC
42 | {checkboxElement}
43 |
47 | {otherChildren}
48 |
44 |
59 |
98 | );
99 | };
100 |
101 | const TodoCheckBox: React.FC<{ children?: React.ReactNode }> = ({
102 | children,
103 | }) => <>{children};
104 |
105 | Todo.CheckBox = TodoCheckBox;
106 |
107 | export default Todo;
108 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useCallback } from "react";
4 | import type { ToggleArgs } from "../types";
5 | import { getColorCss } from "../utils";
6 | import RichText from "./internal/rich-text";
7 |
8 | type ToggleProps = {
9 | children?: React.ReactNode;
10 | isOpen?: boolean;
11 | onChangeOpen?: (open: boolean) => void;
12 | } & ToggleArgs;
13 |
14 | const Toggle: React.FC
66 | {checked ? (
67 |
81 | ) : (
82 |
95 | )}
96 |
97 |
51 |
62 | );
63 | };
64 |
65 | type DefaultToggleIconProps = {
66 | open: boolean;
67 | };
68 |
69 | const DefaultToggleIcon = ({ open }: DefaultToggleIconProps) => {
70 | return (
71 |
52 |
55 |
59 |
60 | {otherChildren}
61 |
56 |
74 |
75 |
76 | );
77 | };
78 |
79 | const ToggleIcon: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
80 | <>{children}
81 | );
82 |
83 | Toggle.Icon = ToggleIcon;
84 |
85 | export default Toggle;
86 |
--------------------------------------------------------------------------------
/packages/core/src/lib/components/video.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import RichText from "./internal/rich-text";
3 | import { VideoArgs } from "../types";
4 | import { getYoutubeId } from "../utils";
5 |
6 | type VideoProps = VideoArgs;
7 | const Video: React.FCunsupported embedded video
;
29 | }
30 | } else {
31 | return unsupported video
;
32 | }
33 | };
34 |
35 | return (
36 |
37 |
44 | );
45 | };
46 |
47 | export default Video;
48 |
--------------------------------------------------------------------------------
/packages/core/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | import "./index.css";
2 |
3 | export { default as Notion } from "./notion";
4 | export * from "./types";
5 | export * from "./components/index";
6 |
--------------------------------------------------------------------------------
/packages/core/src/lib/notion.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useMemo } from "react";
2 | import type { Block, ContextedBlock } from "./types";
3 | import components from "./components";
4 | import Fallback from "./components/fallback";
5 |
6 | type ComponentProvider = Record{renderVideoContent()}
38 | {caption.length !== 0 && (
39 |
40 |
42 | )}
43 | {children}
25 | {title}
; 35 | } 36 | 37 | function Cover({ src, alt = "notion cover" }: { src?: string; alt?: string }) { 38 | if (!src) return null; 39 | 40 | return ( 41 |
42 | 
43 |
44 | );
45 | }
46 |
47 | function Blocks({ blocks }: { blocks: Block[] }) {
48 | const contextedBlocks = useMemo(
49 | () => resolveToContextedBlocks(blocks),
50 | [blocks],
51 | );
52 | return