Skip to content

Commit 510e755

Browse files
abrehamgezahegnabrehamgezahegn
committed
mirrored block spcing of notion
polished styles equation and table wip
1 parent 33e2fc5 commit 510e755

File tree

12 files changed

+1069
-157
lines changed

12 files changed

+1069
-157
lines changed

‎typescript/examples/vite_basic/public/spacing_test.json‎

Lines changed: 924 additions & 0 deletions
Large diffs are not rendered by default.

‎typescript/examples/vite_basic/src/App.tsx‎

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const App = () => {
99
useEffect(() => {
1010
const loadData = async () => {
1111
try {
12-
const response = await fetch("/test_document.json");
12+
const response = await fetch("/spacing_test.json");
1313
const data = await response.json();
1414
setTestPage(data);
1515
} catch (error) {
@@ -55,46 +55,60 @@ const App = () => {
5555
return (
5656
<div
5757
style={{
58-
padding: "20px",
59-
maxWidth: "800px",
60-
margin: "0 auto",
6158
background: "oklch(20.5% 0 0)",
62-
color: "oklch(90% 0 0)",
63-
display: "flex",
64-
justifyContent: "center",
65-
width: "100vw",
6659
}}
6760
>
68-
<div>
69-
<h1>JSON-DOC Renderer Development</h1>
61+
{/* Floating Dev Mode Button */}
62+
<button
63+
onClick={() => setDevMode(!devMode)}
64+
style={{
65+
position: "fixed",
66+
top: "20px",
67+
right: "20px",
68+
zIndex: 1000,
69+
padding: "8px 16px",
70+
background: devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)",
71+
color: "white",
72+
border: "none",
73+
borderRadius: "4px",
74+
cursor: "pointer",
75+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
76+
transition: "all 0.2s ease",
77+
}}
78+
onMouseEnter={(e) => {
79+
e.currentTarget.style.transform = "scale(1.05)";
80+
}}
81+
onMouseLeave={(e) => {
82+
e.currentTarget.style.transform = "scale(1)";
83+
}}
84+
>
85+
{devMode ? "Disable" : "Enable"} Dev Mode
86+
</button>
7087

71-
<div style={{ marginBottom: "20px" }}>
72-
<button
73-
onClick={() => setDevMode(!devMode)}
74-
style={{
75-
padding: "8px 16px",
76-
background: devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)",
77-
color: "white",
78-
border: "none",
79-
borderRadius: "4px",
80-
cursor: "pointer",
88+
<div
89+
style={{
90+
padding: "20px",
91+
maxWidth: "700px",
92+
margin: "0 auto",
93+
color: "oklch(90% 0 0)",
94+
display: "flex",
95+
justifyContent: "center",
96+
width: "100vw",
97+
}}
98+
>
99+
<div>
100+
<JsonDocRenderer
101+
page={testPage}
102+
theme="dark"
103+
devMode={devMode}
104+
backrefs={testBackrefs}
105+
components={{
106+
page_delimiter: (props) => {
107+
return <PageDelimiter {...props} />;
108+
},
81109
}}
82-
>
83-
{devMode ? "Disable" : "Enable"} Dev Mode
84-
</button>
110+
/>
85111
</div>
86-
87-
<JsonDocRenderer
88-
page={testPage}
89-
theme="dark"
90-
devMode={devMode}
91-
backrefs={testBackrefs}
92-
components={{
93-
page_delimiter: (props) => {
94-
return <PageDelimiter {...props} />;
95-
},
96-
}}
97-
/>
98112
</div>
99113
</div>
100114
);

‎typescript/src/index.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
*/
44

55
// Export utility functions
6-
export {
7-
loadJson,
8-
getNestedValue,
9-
setNestedValue,
10-
deepClone,
11-
} from "./utils/json";
6+
export { loadJson, deepClone } from "./utils/json";
127

138
// Export React renderer components
149
export {

‎typescript/src/renderer/components/blocks/ColumnListBlockRenderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const ColumnListBlockRenderer: React.FC<
2222
>
2323
<div
2424
className="notion-column-list"
25-
style={{ display: "flex", gap: "16px" }}
25+
style={{ display: "flex", gap: "44px", flexWrap: "nowrap" }}
2626
>
2727
{block.children?.map((child, index: number) => {
2828
if (child?.type === "column") {

‎typescript/src/renderer/components/blocks/ListItemBlockRenderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const ListItemBlockRenderer: React.FC<ListItemBlockRendererProps> = ({
3939
{block.type === "bulleted_list_item" && (
4040
<div className="notion-list-item-box-left" />
4141
)}
42-
<div>
42+
<div className="notion-list-content">
4343
<RichTextRenderer richText={listData?.rich_text || []} />
4444
</div>
4545

‎typescript/src/renderer/components/blocks/QuoteBlockRenderer.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,8 @@ export const QuoteBlockRenderer: React.FC<QuoteBlockRendererProps> = ({
2727
data-block-id={block.id}
2828
>
2929
<blockquote>
30-
<div>
31-
<div className="notranslate">
32-
<RichTextRenderer richText={quoteData?.rich_text || []} />
33-
</div>
30+
<div className="notranslate">
31+
<RichTextRenderer richText={quoteData?.rich_text || []} />
3432
</div>
3533
</blockquote>
3634

‎typescript/src/renderer/components/blocks/ToDoBlockRenderer.tsx‎

Lines changed: 5 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -27,54 +27,11 @@ export const ToDoBlockRenderer: React.FC<ToDoBlockRendererProps> = ({
2727
className={`notion-selectable notion-to_do-block ${className || ""}`.trim()}
2828
data-block-id={block.id}
2929
>
30-
<div>
31-
<div className="notion-list-item-box-left">
32-
<div className="pseudoHover pseudoActive">
33-
<div aria-hidden="true">
34-
<svg
35-
aria-hidden="true"
36-
className={isChecked ? "check" : "checkboxSquare"}
37-
role="graphics-symbol"
38-
viewBox="0 0 16 16"
39-
style={{ width: 16, height: 16 }}
40-
>
41-
{isChecked ? (
42-
<path
43-
d="M13.5 2.5l-7 7-3.5-3.5-1.5 1.5 5 5 8.5-8.5z"
44-
fill="currentColor"
45-
/>
46-
) : (
47-
<rect
48-
x="2"
49-
y="2"
50-
width="12"
51-
height="12"
52-
fill="none"
53-
stroke="currentColor"
54-
strokeWidth="1"
55-
/>
56-
)}
57-
</svg>
58-
</div>
59-
<input
60-
type="checkbox"
61-
checked={isChecked}
62-
readOnly
63-
style={{
64-
position: "absolute",
65-
opacity: 0,
66-
pointerEvents: "none",
67-
}}
68-
/>
69-
</div>
70-
</div>
71-
<div>
72-
<div>
73-
<div className="notranslate">
74-
<RichTextRenderer richText={todoData?.rich_text || []} />
75-
</div>
76-
</div>
77-
</div>
30+
<div className="pseudoHover pseudoActive">
31+
<input className="check" type="checkbox" checked={isChecked} readOnly />
32+
</div>
33+
<div className="notranslate">
34+
<RichTextRenderer richText={todoData?.rich_text || []} />
7835
</div>
7936

8037
{/* Render children blocks recursively */}

‎typescript/src/renderer/components/blocks/ToggleBlockRenderer.tsx‎

Lines changed: 67 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -32,61 +32,80 @@ export const ToggleBlockRenderer: React.FC<ToggleBlockRendererProps> = ({
3232
className={`notion-selectable notion-toggle-block${className ? ` ${className}` : ""}`}
3333
data-block-id={block.id}
3434
>
35-
<div>
36-
<div className="notion-list-item-box-left">
37-
<div
38-
aria-expanded={isOpen}
39-
aria-label={isOpen ? "Close" : "Open"}
40-
role="button"
41-
tabIndex={0}
42-
onClick={handleToggle}
43-
onKeyDown={(e) => {
44-
if (e.key === "Enter" || e.key === " ") {
45-
e.preventDefault();
46-
handleToggle();
47-
}
48-
}}
49-
style={{ cursor: "pointer" }}
50-
>
51-
<svg
52-
aria-hidden="true"
53-
className="arrowCaretDownFillSmall"
54-
role="graphics-symbol"
55-
viewBox="0 0 16 16"
56-
style={{
57-
width: 16,
58-
height: 16,
59-
transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
60-
transition: "transform 0.2s ease",
61-
}}
62-
>
63-
<path d="M6 12l6-6H6z" fill="currentColor" />
64-
</svg>
65-
</div>
66-
</div>
67-
<div>
68-
<div>
69-
<div className="notranslate">
70-
<RichTextRenderer richText={toggleData?.rich_text || []} />
71-
</div>
72-
</div>
35+
<div
36+
aria-expanded={isOpen}
37+
aria-label={isOpen ? "Close" : "Open"}
38+
role="button"
39+
tabIndex={0}
40+
onClick={handleToggle}
41+
onKeyDown={(e) => {
42+
if (e.key === "Enter" || e.key === " ") {
43+
e.preventDefault();
44+
handleToggle();
45+
}
46+
}}
47+
style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
48+
>
49+
{/* <svg
50+
aria-hidden="true"
51+
className="arrowCaretDownFillSmall"
52+
role="graphics-symbol"
53+
viewBox="0 0 16 16"
54+
style={{
55+
width: 16,
56+
height: 16,
57+
transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
58+
transition: "transform 0.2s ease",
59+
}}
60+
>
61+
<path d="M6 12l6-6H6z" fill="currentColor" />
62+
</svg> */}
63+
64+
<svg
65+
aria-hidden="true"
66+
role="graphics-symbol"
67+
viewBox="0 0 16 16"
68+
className="arrowCaretDownFillSmall"
69+
style={{
70+
width: "0.8em",
71+
height: "0.8em",
72+
display: "block",
73+
flexShrink: 0,
74+
transition: "transform 200ms ease-out",
75+
// transform: "rotateZ(0deg)",
76+
opacity: 1,
77+
transform: isOpen ? "rotate(360deg)" : "rotate(270deg)",
78+
marginRight: 6,
79+
// tran: "transform 0.2s ease",
80+
}}
81+
>
82+
<path d="M2.835 3.25a.8.8 0 0 0-.69 1.203l5.164 8.854a.8.8 0 0 0 1.382 0l5.165-8.854a.8.8 0 0 0-.691-1.203z"></path>
83+
</svg>
84+
<div className="notranslate">
85+
<RichTextRenderer richText={toggleData?.rich_text || []} />
7386
</div>
7487
</div>
7588

7689
{/* Render children blocks recursively when toggle is open */}
7790
{isOpen && block.children && block.children.length > 0 && (
7891
<div
79-
className="notion-block-children"
80-
style={{ marginLeft: `${depth * 24}px` }}
92+
style={{
93+
marginLeft: 18,
94+
}}
8195
>
82-
{block.children.map((child: any, index: number) => (
83-
<BlockRenderer
84-
key={child.id || index}
85-
block={child}
86-
depth={depth + 1}
87-
components={components}
88-
/>
89-
))}
96+
<div
97+
className="notion-block-children"
98+
style={{ marginLeft: `${depth * 24}px` }}
99+
>
100+
{block.children.map((child: any, index: number) => (
101+
<BlockRenderer
102+
key={child.id || index}
103+
block={child}
104+
depth={depth + 1}
105+
components={components}
106+
/>
107+
))}
108+
</div>
90109
</div>
91110
)}
92111
</div>

‎typescript/src/renderer/styles/base.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@
2323
padding: var(--jsondoc-spacing-sm) 0px;
2424
}
2525

26-
.json-doc-page-content {
27-
margin-top: var(--jsondoc-spacing-lg);
28-
}
29-
3026
/* Base Block Styles */
3127
.notion-selectable {
3228
position: relative;

‎typescript/src/renderer/styles/blocks.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
/* Quote Block */
3838
.notion-quote-block {
39-
padding: var(--jsondoc-spacing-sm) var(--jsondoc-spacing-xs);
39+
padding: var(--jsondoc-spacing-md) var(--jsondoc-spacing-xs);
4040
}
4141

4242
.notion-quote-block blockquote {
@@ -60,9 +60,10 @@
6060
/* To-do Block */
6161
.notion-to_do-block {
6262
display: flex;
63-
align-items: flex-start;
64-
padding: 1px var(--jsondoc-spacing-xs);
63+
align-items: center;
64+
padding: 3px var(--jsondoc-spacing-xs);
6565
margin: 0;
66+
gap: 8px;
6667
}
6768

6869
.notion-to_do-block .checkboxSquare,
@@ -85,15 +86,13 @@
8586

8687
/* Toggle Block */
8788
.notion-toggle-block {
88-
display: flex;
89-
align-items: flex-start;
9089
padding: var(--jsondoc-spacing-sm) var(--jsondoc-spacing-xs);
9190
}
9291

93-
.notion-toggle-block .arrowCaretDownFillSmall {
92+
.notion-toggle-block svg.arrowCaretDownFillSmall {
9493
width: var(--jsondoc-icon-size);
9594
height: var(--jsondoc-icon-size);
96-
color: var(--jsondoc-text-muted);
95+
fill: var(--jsondoc-text-muted);
9796
}
9897

9998
.notion-toggle-content {

0 commit comments

Comments
 (0)