Skip to content

Commit 39512f3

Browse files
timolinstobiaslins
timolins
and
tobiaslins
committed
Refactor renderer & more
- Rewrite renderer from ground up - Improve typings - Add callout support - Export types at root level - Add image caption support Co-authored-by: Tobias Lins <me@tobi.sh>
1 parent fd28633 commit 39512f3

File tree

12 files changed

+463
-345
lines changed

12 files changed

+463
-345
lines changed

‎README.md

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,15 @@ const Page = ({ page }) => {
3131

3232
return (
3333
<div className="notion" style={{ maxWidth: 768, color: "rgb(55, 53, 47)" }}>
34-
<NotionRenderer
35-
level={0}
36-
blockMap={page.blocks || []}
37-
currentID={page.id}
38-
/>
34+
<NotionRenderer blockMap={blockMap} />
3935
</div>
4036
);
4137
};
4238
export default Page;
4339
```
4440

41+
Example Next.JS using react-notion can be found in folder `/example`
42+
4543
## Currently supported block types:
4644

4745
- [x] Text
@@ -55,13 +53,10 @@ export default Page;
5553
- [x] iFrames
5654
- [x] Videos
5755
- [x] Divider
56+
- [x] Callouts
57+
- [x] Image Captions
5858

5959
Missing
6060

6161
- [ ] Checkboxes
62-
- [ ] Callouts
63-
- [ ] Image Captions
6462
- [ ] Toggle Lists
65-
66-
67-
Thanks for the prior of work by ![samwightt](https://github.com/samwightt) (child rendering algorithm)

‎example/mock/page.json

Lines changed: 122 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"role": "editor",
66
"value": {
77
"id": "79c956db-2466-4214-8f15-fcfbf12b14d3",
8-
"version": 160,
8+
"version": 170,
99
"type": "page",
1010
"properties": {
1111
"#d[3": [["Development"]],
@@ -21,7 +21,10 @@
2121
"content": [
2222
"aa8626da-731c-4daf-9913-900f389be557",
2323
"49e11055-d6e5-4e9b-8bb0-5346000d08e6",
24+
"2f406abb-4b84-4eab-ba42-b6cfc0c8c8c8",
2425
"2aa7571b-1ad7-4f98-a3de-1531e1867b53",
26+
"11be7a6c-abfe-4649-9a2a-e9e276efd97f",
27+
"5b8df3ee-6717-40f5-a0fe-a54f0c8ab510",
2528
"06388e4b-4991-4aea-8370-6fb64f9aaec1",
2629
"3b2a79c5-e7d9-4830-8d3c-5237be59ef63",
2730
"c12bc11a-09ba-4ae5-ae65-dce2042b89df",
@@ -41,7 +44,7 @@
4144
"block_locked_by": "38159360-3514-4f55-8058-80cd8b9f6114"
4245
},
4346
"created_time": 1586804760000,
44-
"last_edited_time": 1587220200000,
47+
"last_edited_time": 1587234000000,
4548
"parent_id": "88e8a119-c174-4108-86d4-b265eeab4baa",
4649
"parent_table": "collection",
4750
"alive": true,
@@ -146,11 +149,11 @@
146149
"role": "editor",
147150
"value": {
148151
"id": "896c7f87-e588-4232-8da7-b794971072f1",
149-
"version": 13,
152+
"version": 17,
150153
"type": "header",
151-
"properties": { "title": [["Test"]] },
154+
"properties": { "title": [["H1"]] },
152155
"created_time": 1587211803706,
153-
"last_edited_time": 1587212040000,
156+
"last_edited_time": 1587233880000,
154157
"parent_id": "7750799d-6c03-4dbe-9032-3ecd6e0056cc",
155158
"parent_table": "block",
156159
"alive": true,
@@ -194,11 +197,11 @@
194197
"role": "editor",
195198
"value": {
196199
"id": "2f731a82-0870-4e3b-9c8b-20b69a3a0f1d",
197-
"version": 14,
200+
"version": 18,
198201
"type": "sub_header",
199-
"properties": { "title": [["Test"]] },
202+
"properties": { "title": [["H2"]] },
200203
"created_time": 1587211805898,
201-
"last_edited_time": 1587212040000,
204+
"last_edited_time": 1587233880000,
202205
"parent_id": "7750799d-6c03-4dbe-9032-3ecd6e0056cc",
203206
"parent_table": "block",
204207
"alive": true,
@@ -212,11 +215,11 @@
212215
"role": "editor",
213216
"value": {
214217
"id": "d693cb9c-0e6b-4304-a087-97f7152e2d33",
215-
"version": 14,
218+
"version": 19,
216219
"type": "sub_sub_header",
217-
"properties": { "title": [["Test"]] },
220+
"properties": { "title": [["H3"]] },
218221
"created_time": 1587211807816,
219-
"last_edited_time": 1587212040000,
222+
"last_edited_time": 1587233880000,
220223
"parent_id": "7750799d-6c03-4dbe-9032-3ecd6e0056cc",
221224
"parent_table": "block",
222225
"alive": true,
@@ -230,11 +233,28 @@
230233
"role": "editor",
231234
"value": {
232235
"id": "49e11055-d6e5-4e9b-8bb0-5346000d08e6",
233-
"version": 15,
236+
"version": 28,
234237
"type": "text",
235-
"properties": { "title": [["Test"]] },
238+
"properties": { "title": [["Normal Text"]] },
236239
"created_time": 1587211800000,
237-
"last_edited_time": 1587211800000,
240+
"last_edited_time": 1587233880000,
241+
"parent_id": "79c956db-2466-4214-8f15-fcfbf12b14d3",
242+
"parent_table": "block",
243+
"alive": true,
244+
"created_by_table": "notion_user",
245+
"created_by_id": "38159360-3514-4f55-8058-80cd8b9f6114",
246+
"last_edited_by_table": "notion_user",
247+
"last_edited_by_id": "38159360-3514-4f55-8058-80cd8b9f6114"
248+
}
249+
},
250+
"2f406abb-4b84-4eab-ba42-b6cfc0c8c8c8": {
251+
"role": "editor",
252+
"value": {
253+
"id": "2f406abb-4b84-4eab-ba42-b6cfc0c8c8c8",
254+
"version": 9,
255+
"type": "text",
256+
"created_time": 1587233880000,
257+
"last_edited_time": 1587233880000,
238258
"parent_id": "79c956db-2466-4214-8f15-fcfbf12b14d3",
239259
"parent_table": "block",
240260
"alive": true,
@@ -248,12 +268,11 @@
248268
"role": "editor",
249269
"value": {
250270
"id": "2aa7571b-1ad7-4f98-a3de-1531e1867b53",
251-
"version": 17,
271+
"version": 49,
252272
"type": "bulleted_list",
253-
"properties": { "title": [["test"]] },
254-
"content": ["4278696d-ba43-416a-a76b-5f0c7e501e9f"],
273+
"properties": { "title": [["1 - Level 1"]] },
255274
"created_time": 1587211832058,
256-
"last_edited_time": 1587212040000,
275+
"last_edited_time": 1587234000000,
257276
"parent_id": "79c956db-2466-4214-8f15-fcfbf12b14d3",
258277
"parent_table": "block",
259278
"alive": true,
@@ -263,16 +282,93 @@
263282
"last_edited_by_id": "38159360-3514-4f55-8058-80cd8b9f6114"
264283
}
265284
},
266-
"4278696d-ba43-416a-a76b-5f0c7e501e9f": {
285+
"11be7a6c-abfe-4649-9a2a-e9e276efd97f": {
267286
"role": "editor",
268287
"value": {
269-
"id": "4278696d-ba43-416a-a76b-5f0c7e501e9f",
270-
"version": 32,
288+
"id": "11be7a6c-abfe-4649-9a2a-e9e276efd97f",
289+
"version": 36,
271290
"type": "bulleted_list",
272-
"properties": { "title": [["test"]] },
273-
"created_time": 1587211800000,
274-
"last_edited_time": 1587212040000,
275-
"parent_id": "2aa7571b-1ad7-4f98-a3de-1531e1867b53",
291+
"properties": { "title": [["2 - Level 1"]] },
292+
"created_time": 1587233940000,
293+
"last_edited_time": 1587233940000,
294+
"parent_id": "79c956db-2466-4214-8f15-fcfbf12b14d3",
295+
"parent_table": "block",
296+
"alive": true,
297+
"created_by_table": "notion_user",
298+
"created_by_id": "38159360-3514-4f55-8058-80cd8b9f6114",
299+
"last_edited_by_table": "notion_user",
300+
"last_edited_by_id": "38159360-3514-4f55-8058-80cd8b9f6114"
301+
}
302+
},
303+
"5b8df3ee-6717-40f5-a0fe-a54f0c8ab510": {
304+
"role": "editor",
305+
"value": {
306+
"id": "5b8df3ee-6717-40f5-a0fe-a54f0c8ab510",
307+
"version": 24,
308+
"type": "bulleted_list",
309+
"properties": { "title": [["3 - Level 1"]] },
310+
"content": [
311+
"4a28e478-de9e-4cfc-ad2d-0bf73200a4f6",
312+
"c8513a33-60bd-49d0-b404-173fca41a8c0"
313+
],
314+
"created_time": 1587233940000,
315+
"last_edited_time": 1587233940000,
316+
"parent_id": "79c956db-2466-4214-8f15-fcfbf12b14d3",
317+
"parent_table": "block",
318+
"alive": true,
319+
"created_by_table": "notion_user",
320+
"created_by_id": "38159360-3514-4f55-8058-80cd8b9f6114",
321+
"last_edited_by_table": "notion_user",
322+
"last_edited_by_id": "38159360-3514-4f55-8058-80cd8b9f6114"
323+
}
324+
},
325+
"4a28e478-de9e-4cfc-ad2d-0bf73200a4f6": {
326+
"role": "editor",
327+
"value": {
328+
"id": "4a28e478-de9e-4cfc-ad2d-0bf73200a4f6",
329+
"version": 28,
330+
"type": "bulleted_list",
331+
"properties": { "title": [["1 - Level 2"]] },
332+
"created_time": 1587233940000,
333+
"last_edited_time": 1587233940000,
334+
"parent_id": "5b8df3ee-6717-40f5-a0fe-a54f0c8ab510",
335+
"parent_table": "block",
336+
"alive": true,
337+
"created_by_table": "notion_user",
338+
"created_by_id": "38159360-3514-4f55-8058-80cd8b9f6114",
339+
"last_edited_by_table": "notion_user",
340+
"last_edited_by_id": "38159360-3514-4f55-8058-80cd8b9f6114"
341+
}
342+
},
343+
"c8513a33-60bd-49d0-b404-173fca41a8c0": {
344+
"role": "editor",
345+
"value": {
346+
"id": "c8513a33-60bd-49d0-b404-173fca41a8c0",
347+
"version": 22,
348+
"type": "bulleted_list",
349+
"properties": { "title": [["2 - Level 2"]] },
350+
"content": ["0a8c9fcc-182d-4200-87e2-b91719c62cdf"],
351+
"created_time": 1587233940000,
352+
"last_edited_time": 1587233940000,
353+
"parent_id": "5b8df3ee-6717-40f5-a0fe-a54f0c8ab510",
354+
"parent_table": "block",
355+
"alive": true,
356+
"created_by_table": "notion_user",
357+
"created_by_id": "38159360-3514-4f55-8058-80cd8b9f6114",
358+
"last_edited_by_table": "notion_user",
359+
"last_edited_by_id": "38159360-3514-4f55-8058-80cd8b9f6114"
360+
}
361+
},
362+
"0a8c9fcc-182d-4200-87e2-b91719c62cdf": {
363+
"role": "editor",
364+
"value": {
365+
"id": "0a8c9fcc-182d-4200-87e2-b91719c62cdf",
366+
"version": 23,
367+
"type": "bulleted_list",
368+
"properties": { "title": [["1 - Level 3 "]] },
369+
"created_time": 1587233940000,
370+
"last_edited_time": 1587234000000,
371+
"parent_id": "c8513a33-60bd-49d0-b404-173fca41a8c0",
276372
"parent_table": "block",
277373
"alive": true,
278374
"created_by_table": "notion_user",
@@ -503,7 +599,7 @@
503599
"https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb"
504600
]
505601
],
506-
"caption": [["Image caption"]]
602+
"caption": [["Image", [["h", "pink"]]], [" caption"]]
507603
},
508604
"format": {
509605
"block_width": 336,

‎example/pages/index.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ const {
66
} = pageData as LoadPageChunkData;
77

88
const Home = () => (
9-
<div style={{ maxWidth: 760, margin: "0 auto" }}>
9+
<div
10+
style={{
11+
maxWidth: 708,
12+
margin: "0 auto",
13+
color: "rgb(55, 53, 47)",
14+
fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"`
15+
}}
16+
>
1017
<NotionRenderer blockMap={blockMap} />
1118
</div>
1219
);

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "0.1.4",
2+
"version": "0.1.5",
33
"license": "MIT",
44
"main": "dist/index.js",
55
"typings": "dist/index.d.ts",
@@ -54,5 +54,8 @@
5454
"tsdx": "^0.13.2",
5555
"tslib": "^1.11.1",
5656
"typescript": "^3.8.3"
57+
},
58+
"dependencies": {
59+
"prismjs": "^1.20.0"
5760
}
5861
}

0 commit comments

Comments
 (0)