Skip to content

Commit accf253

Browse files
matthewlipskiYousefED
matthewlipski
and
YousefED
authored
feat: Dark theme (#171)
* Added first iteration dark theme * website dark mode * Removed some unnecessary styles * Changed how theme is passed to factories * Changed `useDarkTheme` option to `theme` * Removed redundant varible * Added dark theme to editor body * Changed editor theme from class to attribute * Converted mock ID to string and updated snapshots * Updated unit test snapshots * Updated snapshots * Updated snapshots * Updated screenshots * Made keyboard handler tests less flaky * Removed dark mode toggle from website --------- Co-authored-by: yousefed <yousefdardiry@gmail.com>
1 parent 88a09a4 commit accf253

File tree

94 files changed

+798
-587
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+798
-587
lines changed

‎examples/editor/src/App.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.editor {
2-
padding: 0 calc((100% - 731px) / 2);
2+
margin: 0 calc((100% - 731px) / 2);
33
height: 100%;
44
}

‎examples/editor/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ function App() {
1414
class: styles.editor,
1515
"data-test": "editor",
1616
},
17+
theme: "light",
1718
});
1819

1920
// Give tests a way to get prosemirror instance

‎packages/core/src/BlockNoteEditor.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,12 @@ export type BlockNoteEditorOptions = {
8989
* @default true
9090
*/
9191
defaultStyles: boolean;
92+
/**
93+
* Whether to use the light or dark theme.
94+
*
95+
* @default "light"
96+
*/
97+
theme: "light" | "dark";
9298

9399
// tiptap options, undocumented
94100
_tiptapOptions: any;
@@ -157,6 +163,7 @@ export class BlockNoteEditor {
157163
: [...(options._tiptapOptions?.extensions || []), ...extensions],
158164
editorProps: {
159165
attributes: {
166+
"data-theme": options.theme || "light",
160167
...(options.editorDOMAttributes || {}),
161168
class: [
162169
styles.bnEditor,

‎packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
1313
"type": "text",
1414
},
1515
],
16-
"id": 2,
16+
"id": "2",
1717
"props": {
1818
"backgroundColor": "default",
1919
"level": "1",
@@ -30,7 +30,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
3030
"type": "text",
3131
},
3232
],
33-
"id": 1,
33+
"id": "1",
3434
"props": {
3535
"backgroundColor": "default",
3636
"level": "1",
@@ -50,7 +50,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
5050
"type": "text",
5151
},
5252
],
53-
"id": 4,
53+
"id": "4",
5454
"props": {
5555
"backgroundColor": "default",
5656
"level": "2",
@@ -67,7 +67,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
6767
"type": "text",
6868
},
6969
],
70-
"id": 3,
70+
"id": "3",
7171
"props": {
7272
"backgroundColor": "default",
7373
"level": "2",
@@ -79,7 +79,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
7979
{
8080
"children": [],
8181
"content": [],
82-
"id": 0,
82+
"id": "0",
8383
"props": {
8484
"backgroundColor": "default",
8585
"textAlignment": "left",
@@ -103,7 +103,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
103103
"type": "text",
104104
},
105105
],
106-
"id": 2,
106+
"id": "2",
107107
"props": {
108108
"backgroundColor": "default",
109109
"level": "1",
@@ -120,7 +120,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
120120
"type": "text",
121121
},
122122
],
123-
"id": 1,
123+
"id": "1",
124124
"props": {
125125
"backgroundColor": "default",
126126
"textAlignment": "left",
@@ -139,7 +139,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
139139
"type": "text",
140140
},
141141
],
142-
"id": 4,
142+
"id": "4",
143143
"props": {
144144
"backgroundColor": "default",
145145
"level": "2",
@@ -156,7 +156,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
156156
"type": "text",
157157
},
158158
],
159-
"id": 3,
159+
"id": "3",
160160
"props": {
161161
"backgroundColor": "default",
162162
"level": "2",
@@ -168,7 +168,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
168168
{
169169
"children": [],
170170
"content": [],
171-
"id": 0,
171+
"id": "0",
172172
"props": {
173173
"backgroundColor": "default",
174174
"textAlignment": "left",
@@ -190,7 +190,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
190190
"type": "text",
191191
},
192192
],
193-
"id": 1,
193+
"id": "1",
194194
"props": {
195195
"backgroundColor": "default",
196196
"textAlignment": "left",
@@ -201,7 +201,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
201201
{
202202
"children": [],
203203
"content": [],
204-
"id": 0,
204+
"id": "0",
205205
"props": {
206206
"backgroundColor": "default",
207207
"textAlignment": "left",
@@ -223,7 +223,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
223223
"type": "text",
224224
},
225225
],
226-
"id": 1,
226+
"id": "1",
227227
"props": {
228228
"backgroundColor": "default",
229229
"textAlignment": "left",
@@ -234,7 +234,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
234234
{
235235
"children": [],
236236
"content": [],
237-
"id": 0,
237+
"id": "0",
238238
"props": {
239239
"backgroundColor": "default",
240240
"textAlignment": "left",
@@ -258,7 +258,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
258258
"type": "text",
259259
},
260260
],
261-
"id": 2,
261+
"id": "2",
262262
"props": {
263263
"backgroundColor": "default",
264264
"textAlignment": "left",
@@ -283,7 +283,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
283283
"type": "text",
284284
},
285285
],
286-
"id": 1,
286+
"id": "1",
287287
"props": {
288288
"backgroundColor": "default",
289289
"level": "3",
@@ -295,7 +295,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
295295
{
296296
"children": [],
297297
"content": [],
298-
"id": 0,
298+
"id": "0",
299299
"props": {
300300
"backgroundColor": "default",
301301
"textAlignment": "left",
@@ -311,7 +311,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
311311
{
312312
"children": [],
313313
"content": [],
314-
"id": 0,
314+
"id": "0",
315315
"props": {
316316
"backgroundColor": "default",
317317
"textAlignment": "left",
@@ -327,7 +327,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
327327
{
328328
"children": [],
329329
"content": [],
330-
"id": 0,
330+
"id": "0",
331331
"props": {
332332
"backgroundColor": "default",
333333
"textAlignment": "left",
@@ -346,7 +346,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
346346
"type": "text",
347347
},
348348
],
349-
"id": 2,
349+
"id": "2",
350350
"props": {
351351
"backgroundColor": "default",
352352
"level": "1",
@@ -363,7 +363,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
363363
"type": "text",
364364
},
365365
],
366-
"id": 1,
366+
"id": "1",
367367
"props": {
368368
"backgroundColor": "default",
369369
"level": "1",
@@ -383,7 +383,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
383383
"type": "text",
384384
},
385385
],
386-
"id": 4,
386+
"id": "4",
387387
"props": {
388388
"backgroundColor": "default",
389389
"level": "2",
@@ -400,7 +400,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
400400
"type": "text",
401401
},
402402
],
403-
"id": 3,
403+
"id": "3",
404404
"props": {
405405
"backgroundColor": "default",
406406
"level": "2",
@@ -412,7 +412,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
412412
{
413413
"children": [],
414414
"content": [],
415-
"id": 5,
415+
"id": "5",
416416
"props": {
417417
"backgroundColor": "default",
418418
"textAlignment": "left",
@@ -436,7 +436,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
436436
"type": "text",
437437
},
438438
],
439-
"id": 2,
439+
"id": "2",
440440
"props": {
441441
"backgroundColor": "default",
442442
"level": "1",
@@ -453,7 +453,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
453453
"type": "text",
454454
},
455455
],
456-
"id": 1,
456+
"id": "1",
457457
"props": {
458458
"backgroundColor": "default",
459459
"level": "1",
@@ -473,7 +473,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
473473
"type": "text",
474474
},
475475
],
476-
"id": 4,
476+
"id": "4",
477477
"props": {
478478
"backgroundColor": "default",
479479
"level": "2",
@@ -490,7 +490,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
490490
"type": "text",
491491
},
492492
],
493-
"id": 3,
493+
"id": "3",
494494
"props": {
495495
"backgroundColor": "default",
496496
"level": "2",
@@ -502,7 +502,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
502502
{
503503
"children": [],
504504
"content": [],
505-
"id": 0,
505+
"id": "0",
506506
"props": {
507507
"backgroundColor": "default",
508508
"textAlignment": "left",
@@ -528,7 +528,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
528528
"type": "text",
529529
},
530530
],
531-
"id": 2,
531+
"id": "2",
532532
"props": {
533533
"backgroundColor": "default",
534534
"level": "1",
@@ -545,7 +545,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
545545
"type": "text",
546546
},
547547
],
548-
"id": 1,
548+
"id": "1",
549549
"props": {
550550
"backgroundColor": "default",
551551
"level": "1",
@@ -565,7 +565,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
565565
"type": "text",
566566
},
567567
],
568-
"id": 4,
568+
"id": "4",
569569
"props": {
570570
"backgroundColor": "default",
571571
"level": "2",
@@ -582,7 +582,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
582582
"type": "text",
583583
},
584584
],
585-
"id": 3,
585+
"id": "3",
586586
"props": {
587587
"backgroundColor": "default",
588588
"level": "2",
@@ -593,7 +593,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
593593
},
594594
],
595595
"content": [],
596-
"id": 0,
596+
"id": "0",
597597
"props": {
598598
"backgroundColor": "default",
599599
"textAlignment": "left",
@@ -604,7 +604,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
604604
{
605605
"children": [],
606606
"content": [],
607-
"id": 5,
607+
"id": "5",
608608
"props": {
609609
"backgroundColor": "default",
610610
"textAlignment": "left",

0 commit comments

Comments
 (0)