Skip to content

Commit 702ee20

Browse files
abrehamgezahegnabrehamgezahegn
committed
checkpoint
1 parent 200a013 commit 702ee20

File tree

6 files changed

+226
-67
lines changed

6 files changed

+226
-67
lines changed

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

Lines changed: 134 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -718,6 +718,138 @@
718718
]
719719
]
720720
}
721+
},
722+
{
723+
"object": "block",
724+
"id": "blk_table_row_4",
725+
"type": "table_row",
726+
"created_time": "2025-06-19T14:04:08.260514Z",
727+
"created_by": {
728+
"object": "user",
729+
"id": "28a08aa3-192b-45e6-b6d3-32b8032d8c7b"
730+
},
731+
"table_row": {
732+
"cells": [
733+
[
734+
{
735+
"type": "text",
736+
"text": {
737+
"content": "This is a very long cell content that should wrap properly within the table cell boundaries and test the word wrapping functionality"
738+
},
739+
"annotations": {},
740+
"plain_text": "This is a very long cell content that should wrap properly within the table cell boundaries and test the word wrapping functionality"
741+
}
742+
],
743+
[
744+
{
745+
"type": "text",
746+
"text": {
747+
"content": "Short"
748+
},
749+
"annotations": {},
750+
"plain_text": "Short"
751+
}
752+
],
753+
[
754+
{
755+
"type": "text",
756+
"text": {
757+
"content": "Medium length content here"
758+
},
759+
"annotations": {},
760+
"plain_text": "Medium length content here"
761+
}
762+
]
763+
]
764+
}
765+
},
766+
{
767+
"object": "block",
768+
"id": "blk_table_row_5",
769+
"type": "table_row",
770+
"created_time": "2025-06-19T14:04:08.260514Z",
771+
"created_by": {
772+
"object": "user",
773+
"id": "28a08aa3-192b-45e6-b6d3-32b8032d8c7b"
774+
},
775+
"table_row": {
776+
"cells": [
777+
[
778+
{
779+
"type": "text",
780+
"text": {
781+
"content": "Normal text"
782+
},
783+
"annotations": {},
784+
"plain_text": "Normal text"
785+
}
786+
],
787+
[
788+
{
789+
"type": "text",
790+
"text": {
791+
"content": "This column has super long content that would normally cause horizontal overflow in a constrained container but should now wrap properly"
792+
},
793+
"annotations": {},
794+
"plain_text": "This column has super long content that would normally cause horizontal overflow in a constrained container but should now wrap properly"
795+
}
796+
],
797+
[
798+
{
799+
"type": "text",
800+
"text": {
801+
"content": "Another cell"
802+
},
803+
"annotations": {},
804+
"plain_text": "Another cell"
805+
}
806+
]
807+
]
808+
}
809+
},
810+
{
811+
"object": "block",
812+
"id": "blk_table_row_6",
813+
"type": "table_row",
814+
"created_time": "2025-06-19T14:04:08.260514Z",
815+
"created_by": {
816+
"object": "user",
817+
"id": "28a08aa3-192b-45e6-b6d3-32b8032d8c7b"
818+
},
819+
"table_row": {
820+
"cells": [
821+
[
822+
{
823+
"type": "text",
824+
"text": {
825+
"content": "URL Test"
826+
},
827+
"annotations": {},
828+
"plain_text": "URL Test"
829+
}
830+
],
831+
[
832+
{
833+
"type": "text",
834+
"text": {
835+
"content": "https://example.com/very-long-url-path/that-might-cause-overflow/if-not-handled-properly"
836+
},
837+
"annotations": {},
838+
"plain_text": "https://example.com/very-long-url-path/that-might-cause-overflow/if-not-handled-properly"
839+
}
840+
],
841+
[
842+
{
843+
"type": "text",
844+
"text": {
845+
"content": "Final column content that has moderate length"
846+
},
847+
"annotations": {},
848+
"plain_text": "Final column content that has moderate length"
849+
}
850+
]
851+
]
852+
}
721853
}
722854
]
723855
},
@@ -890,10 +1022,10 @@
8901022
{
8911023
"type": "text",
8921024
"text": {
893-
"content": "This is a sample image with a caption. Image blocks should have proper spacing above and below."
1025+
"content": "This is a sample image with a caption. Image blocks should thiyyy This is a sample image with a caption. Image blocks should thiyyy"
8941026
},
8951027
"annotations": {},
896-
"plain_text": "This is a sample image with a caption. Image blocks should have proper spacing above and below."
1028+
"plain_text": "This is a sample image with a caption. Image blocks should"
8971029
}
8981030
]
8991031
}

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

Lines changed: 82 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,66 @@ import { JsonDocRenderer, PageDelimiter } from "@textcortex/jsondoc";
22
import "@textcortex/jsondoc/dist/index.css";
33
import { useState, useEffect } from "react";
44

5+
interface FloatingButtonProps {
6+
onClick: () => void;
7+
children: React.ReactNode;
8+
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
9+
offset?: { x: number; y: number };
10+
backgroundColor?: string;
11+
color?: string;
12+
zIndex?: number;
13+
}
14+
15+
const FloatingButton: React.FC<FloatingButtonProps> = ({
16+
onClick,
17+
children,
18+
position = "top-right",
19+
offset = { x: 20, y: 20 },
20+
backgroundColor = "oklch(40% 0.2 250)",
21+
color = "white",
22+
zIndex = 1000,
23+
}) => {
24+
const getPositionStyles = () => {
25+
switch (position) {
26+
case "top-left":
27+
return { top: offset.y, left: offset.x };
28+
case "bottom-right":
29+
return { bottom: offset.y, right: offset.x };
30+
case "bottom-left":
31+
return { bottom: offset.y, left: offset.x };
32+
default:
33+
return { top: offset.y, right: offset.x };
34+
}
35+
};
36+
37+
return (
38+
<button
39+
onClick={onClick}
40+
style={{
41+
position: "fixed",
42+
...getPositionStyles(),
43+
zIndex,
44+
padding: "8px 16px",
45+
background: backgroundColor,
46+
color,
47+
border: "none",
48+
borderRadius: "4px",
49+
cursor: "pointer",
50+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
51+
transition: "all 0.2s ease",
52+
}}
53+
onMouseEnter={(e) => {
54+
e.currentTarget.style.transform = "scale(1.05)";
55+
}}
56+
onMouseLeave={(e) => {
57+
e.currentTarget.style.transform = "scale(1)";
58+
}}
59+
>
60+
{children}
61+
</button>
62+
);
63+
};
64+
565
const App = () => {
666
const [testPage, setTestPage] = useState(null);
767
const [devMode, setDevMode] = useState(false);
@@ -64,85 +124,47 @@ const App = () => {
64124
}}
65125
>
66126
{/* Floating Dev Mode Button */}
67-
<button
127+
<FloatingButton
68128
onClick={() => setDevMode(!devMode)}
69-
style={{
70-
position: "fixed",
71-
top: "20px",
72-
right: "20px",
73-
zIndex: 1000,
74-
padding: "8px 16px",
75-
background: devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)",
76-
color: "white",
77-
border: "none",
78-
borderRadius: "4px",
79-
cursor: "pointer",
80-
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
81-
transition: "all 0.2s ease",
82-
}}
83-
onMouseEnter={(e) => {
84-
e.currentTarget.style.transform = "scale(1.05)";
85-
}}
86-
onMouseLeave={(e) => {
87-
e.currentTarget.style.transform = "scale(1)";
88-
}}
129+
backgroundColor={devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)"}
130+
offset={{ x: 20, y: 20 }}
89131
>
90132
{devMode ? "Disable" : "Enable"} Dev Mode
91-
</button>
133+
</FloatingButton>
92134

93135
{/* Floating Theme Toggle Button */}
94-
<button
136+
<FloatingButton
95137
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
96-
style={{
97-
position: "fixed",
98-
top: "20px",
99-
right: "200px",
100-
zIndex: 1000,
101-
padding: "8px 16px",
102-
background:
103-
theme === "dark" ? "oklch(60% 0.2 50)" : "oklch(40% 0.2 50)",
104-
color: "white",
105-
border: "none",
106-
borderRadius: "4px",
107-
cursor: "pointer",
108-
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
109-
transition: "all 0.2s ease",
110-
}}
111-
onMouseEnter={(e) => {
112-
e.currentTarget.style.transform = "scale(1.05)";
113-
}}
114-
onMouseLeave={(e) => {
115-
e.currentTarget.style.transform = "scale(1)";
116-
}}
138+
backgroundColor={
139+
theme === "dark" ? "oklch(60% 0.2 50)" : "oklch(40% 0.2 50)"
140+
}
141+
offset={{ x: 200, y: 20 }}
117142
>
118143
{theme === "dark" ? "☀️ Light" : "🌙 Dark"} Mode
119-
</button>
144+
</FloatingButton>
120145

121146
<div
122147
style={{
123148
padding: "20px",
124-
maxWidth: "300px",
125-
// background: "oklch(20.5% 0 0)",
149+
maxWidth: "700px",
126150
margin: "0 auto",
127151
color: theme === "dark" ? "oklch(90% 0 0)" : "oklch(10% 0 0)",
128152
display: "flex",
129153
justifyContent: "center",
130154
paddingTop: 160,
131155
}}
132156
>
133-
<div>
134-
<JsonDocRenderer
135-
page={testPage}
136-
theme={theme}
137-
devMode={devMode}
138-
backrefs={testBackrefs}
139-
components={{
140-
page_delimiter: (props) => {
141-
return <PageDelimiter {...props} />;
142-
},
143-
}}
144-
/>
145-
</div>
157+
<JsonDocRenderer
158+
page={testPage}
159+
theme={theme}
160+
devMode={devMode}
161+
backrefs={testBackrefs}
162+
components={{
163+
page_delimiter: (props) => {
164+
return <PageDelimiter {...props} />;
165+
},
166+
}}
167+
/>
146168
</div>
147169
</div>
148170
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const ToDoBlockRenderer: React.FC<ToDoBlockRendererProps> = ({
3030
<div className="pseudoHover pseudoActive">
3131
<input className="check" type="checkbox" checked={isChecked} readOnly />
3232
</div>
33-
<div className="notranslate">
33+
<div className={`notranslate ${isChecked ? 'checked' : ''}`.trim()}>
3434
<RichTextRenderer richText={todoData?.rich_text || []} />
3535
</div>
3636

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export const ToggleBlockRenderer: React.FC<ToggleBlockRendererProps> = ({
5656
viewBox="0 0 16 16"
5757
className="arrowCaretDownFillSmall"
5858
style={{
59-
width: "1.2em",
60-
height: "1.2em",
59+
width: "14px",
60+
height: "14px",
6161
display: "block",
6262
flexShrink: 0,
6363
transition: "transform 200ms ease-out",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@
7777
color: var(--jsondoc-accent-checkbox);
7878
}
7979

80+
.notion-to_do-block .checked {
81+
text-decoration: line-through;
82+
}
83+
8084
.pseudoHover.pseudoActive {
8185
position: relative;
8286
display: flex;

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
line-height: var(--jsondoc-line-height-very-loose);
77
list-style-type: none;
88
display: flex;
9+
margin-bottom: 2px;
910
}
1011

1112
/*
@@ -86,7 +87,7 @@
8687
text-indent: 0px;
8788
font-size: var(--jsondoc-font-size-h2);
8889
line-height: var(--jsondoc-line-height-tight);
89-
margin-left: 12px;
90+
margin-left: 8px;
9091
margin-right: 10px;
9192
margin-bottom: 4px;
9293
}
@@ -105,7 +106,7 @@
105106
font-size: var(--jsondoc-font-size-body);
106107
margin-right: var(--jsondoc-spacing-sm);
107108
text-align: right;
108-
margin-left: 12px;
109+
margin-left: 8px;
109110
margin-right: 10px;
110111
}
111112

0 commit comments

Comments
 (0)