@atom.io/template-react-realtime-text-editor 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/INNOVATIONS.md +242 -113
  3. package/README.md +75 -39
  4. package/eslint.config.ts +1 -1
  5. package/index.html +1 -0
  6. package/node/http-server.ts +81 -0
  7. package/node/server.ts +12 -60
  8. package/node/service.ts +310 -0
  9. package/package.json +30 -21
  10. package/playwright.config.ts +34 -0
  11. package/src/LexicalMarkdownEditor.css +88 -0
  12. package/src/LexicalMarkdownEditor.module.css +8 -0
  13. package/src/LexicalMarkdownEditor.tsx +43 -0
  14. package/src/MarkdownWorkspace.module.css +154 -98
  15. package/src/MarkdownWorkspace.tsx +163 -296
  16. package/src/collaboration-client.ts +238 -0
  17. package/src/document-domain.ts +169 -0
  18. package/src/globals.css +9 -2
  19. package/src/incremental-markdown.ts +279 -0
  20. package/src/main.tsx +30 -9
  21. package/src/protocol.ts +35 -0
  22. package/src/virtualization.ts +53 -0
  23. package/src/workspace-state.ts +275 -0
  24. package/tests/browser/editor-conformance.spec.ts +806 -0
  25. package/tests/collaboration.test.tsx +465 -213
  26. package/tests/incremental-markdown.test.tsx +101 -0
  27. package/tsconfig.app.json +1 -1
  28. package/tsconfig.node.json +8 -2
  29. package/tsconfig.test.json +1 -1
  30. package/vite.config.ts +13 -9
  31. package/node/mosaic-atom.ts +0 -88
  32. package/src/collaboration/mosaic.ts +0 -46
package/src/MarkdownWorkspace.module.css CHANGED
@@ -1,16 +1,111 @@
1
1
  markdown-workspace.class {
2
- --accent: #6d50ea;
3
- --border: #dfdce8;
4
- --ink: #292936;
5
- --muted: #817e90;
6
- --paper: #fffefa;
7
- --panel: #faf9fc;
2
+ --accent: #aa91ff;
3
+ --aside-border: #4f426f;
4
+ --aside-body: #b8afc5;
5
+ --aside-gradient-end: #201b2d;
6
+ --aside-gradient-start: #29223a;
7
+ --aside-title: #c5b6ff;
8
+ --avatar-ring: #1c1922;
9
+ --border: #393441;
10
+ --button-background: #25212c;
11
+ --button-hover-background: #302840;
12
+ --button-hover-border: #6f6195;
13
+ --button-ink: #d4cedd;
14
+ --chrome: #19171f;
15
+ --chrome-border: #302c38;
16
+ --chrome-glass: #19171fe6;
17
+ --code-background: #121016;
18
+ --code-border: #463f50;
19
+ --code-ink: #f1edff;
20
+ --editor-gutter: #211e28;
21
+ --editor-ink: #e5dfea;
22
+ --editor-placeholder: #88818f;
23
+ --error: #ff91ad;
24
+ --footer-ink: #c4bdca;
25
+ --heading: #f4effa;
26
+ --ink: #f1edf7;
27
+ --inline-code-background: #2c2540;
28
+ --inline-code-ink: #cbbcff;
29
+ --link: #baa6ff;
30
+ --link-underline: #7565af;
31
+ --muted: #aaa4b7;
32
+ --overlay-outline: #121016c9;
33
+ --paper: #1c1922;
34
+ --pane-heading: #211e28;
35
+ --pane-heading-border: #37323f;
36
+ --panel: #18161d;
37
+ --preview-ink: #d9d4e0;
38
+ --quote-background: #272132;
39
+ --quote-border: #8e75ef;
40
+ --quote-ink: #c8bfd7;
41
+ --shadow: #00000038;
42
+ --status-idle: #736d7c;
43
+ --status-live: #4bd5a4;
44
+ --status-live-ring: #4bd5a429;
45
+ --status-offline: #f0a75a;
46
+ --strong-ink: #fffaff;
47
+ --workspace: #121016;
48
+ --workspace-glow: #2c2147;
8
49
  display: grid;
9
50
  grid-template-rows: auto minmax(0, 1fr) auto;
10
51
  min-height: 100svh;
11
52
  background:
12
- radial-gradient(circle at 80% 0%, #eee9ff 0, transparent 28rem),
13
- #f3f2f7;
53
+ radial-gradient(
54
+ circle at 80% 0%,
55
+ var(--workspace-glow) 0,
56
+ transparent 28rem
57
+ ),
58
+ var(--workspace);
59
+
60
+ @media (prefers-color-scheme: light) {
61
+ --accent: #6d50ea;
62
+ --aside-border: #e3dcff;
63
+ --aside-body: #6d6680;
64
+ --aside-gradient-end: #f1edff;
65
+ --aside-gradient-start: #f9f7ff;
66
+ --aside-title: #5941b4;
67
+ --avatar-ring: white;
68
+ --border: #dfdce8;
69
+ --button-background: white;
70
+ --button-hover-background: #f8f6ff;
71
+ --button-hover-border: #bdb4df;
72
+ --button-ink: #565363;
73
+ --chrome: #faf9fc;
74
+ --chrome-border: #e5e2ec;
75
+ --chrome-glass: #fbfaffe6;
76
+ --code-background: #302c3a;
77
+ --code-border: #e2deea;
78
+ --code-ink: #ede9ff;
79
+ --editor-gutter: #f8f6fb;
80
+ --editor-ink: #383542;
81
+ --editor-placeholder: #9c98a6;
82
+ --error: #a5435e;
83
+ --footer-ink: #5f5b69;
84
+ --heading: #282430;
85
+ --ink: #292936;
86
+ --inline-code-background: #f0ecff;
87
+ --inline-code-ink: #6547d6;
88
+ --link: #6547d6;
89
+ --link-underline: #b9abf2;
90
+ --muted: #817e90;
91
+ --overlay-outline: #ffffffb8;
92
+ --paper: #fffefa;
93
+ --pane-heading: #fcfbfd;
94
+ --pane-heading-border: #ebe8ef;
95
+ --panel: #faf9fc;
96
+ --preview-ink: #37333d;
97
+ --quote-background: #f7f4ff;
98
+ --quote-border: #b5a5f6;
99
+ --quote-ink: #5d566b;
100
+ --shadow: #2b21450c;
101
+ --status-idle: #aaa5b3;
102
+ --status-live: #21a879;
103
+ --status-live-ring: #21a8791c;
104
+ --status-offline: #df8c35;
105
+ --strong-ink: #332d42;
106
+ --workspace: #f3f2f7;
107
+ --workspace-glow: #eee9ff;
108
+ }
14
109
 
15
110
  > header {
16
111
  display: grid;
@@ -21,9 +116,9 @@ markdown-workspace.class {
21
116
  z-index: 3;
22
117
  min-height: 5.4rem;
23
118
  padding: 0.75rem 1.5rem;
24
- border-bottom: 1px solid #e5e2ec;
25
- background: color-mix(in srgb, #fbfaff 90%, transparent);
26
- box-shadow: 0 0.25rem 1.8rem #3023510a;
119
+ border-bottom: 1px solid var(--chrome-border);
120
+ background: var(--chrome-glass);
121
+ box-shadow: 0 0.25rem 1.8rem var(--shadow);
27
122
  backdrop-filter: blur(1.5rem);
28
123
 
29
124
  > brand-lockup {
@@ -103,15 +198,15 @@ markdown-workspace.class {
103
198
  padding: 0.4rem 0.68rem;
104
199
  border: 1px solid var(--border);
105
200
  border-radius: 0.65rem;
106
- color: #565363;
107
- background: white;
201
+ color: var(--button-ink);
202
+ background: var(--button-background);
108
203
  font-size: 0.73rem;
109
204
  font-weight: 700;
110
205
 
111
206
  &:hover:not(:disabled) {
112
- border-color: #bdb4df;
207
+ border-color: var(--button-hover-border);
113
208
  color: var(--accent);
114
- background: #f8f6ff;
209
+ background: var(--button-hover-background);
115
210
  }
116
211
 
117
212
  &:disabled {
@@ -127,7 +222,7 @@ markdown-workspace.class {
127
222
  padding: 0.27rem 0.35rem;
128
223
  border: 1px solid var(--border);
129
224
  border-radius: 99rem;
130
- background: white;
225
+ background: var(--button-background);
131
226
 
132
227
  > avatar-dot {
133
228
  display: grid;
@@ -145,7 +240,7 @@ markdown-workspace.class {
145
240
  max-width: 8rem;
146
241
  border: 0;
147
242
  outline: 0;
148
- color: #4a4755;
243
+ color: var(--button-ink);
149
244
  background: transparent;
150
245
  font-size: 0.72rem;
151
246
  font-weight: 700;
@@ -169,7 +264,7 @@ markdown-workspace.class {
169
264
  border: 1px solid var(--border);
170
265
  border-radius: 1.1rem;
171
266
  background: var(--paper);
172
- box-shadow: 0 0.9rem 2.4rem #2b21450c;
267
+ box-shadow: 0 0.9rem 2.4rem var(--shadow);
173
268
  }
174
269
 
175
270
  > editor-pane,
@@ -184,8 +279,8 @@ markdown-workspace.class {
184
279
  justify-content: space-between;
185
280
  min-height: 3.15rem;
186
281
  padding: 0.75rem 1rem;
187
- border-bottom: 1px solid #ebe8ef;
188
- background: #fcfbfd;
282
+ border-bottom: 1px solid var(--pane-heading-border);
283
+ background: var(--pane-heading);
189
284
 
190
285
  > span {
191
286
  color: var(--muted);
@@ -206,62 +301,19 @@ markdown-workspace.class {
206
301
 
207
302
  > editor-surface {
208
303
  position: relative;
304
+ overflow: auto;
209
305
  min-height: 0;
210
306
  background:
211
- linear-gradient(90deg, #f8f6fb 2.75rem, transparent 2.75rem),
307
+ linear-gradient(
308
+ 90deg,
309
+ var(--editor-gutter) 2.75rem,
310
+ transparent 2.75rem
311
+ ),
212
312
  var(--panel);
213
313
 
214
- > textarea {
215
- position: absolute;
216
- inset: 0;
217
- z-index: 1;
218
- width: 100%;
219
- height: 100%;
220
- resize: none;
221
- padding: 1.45rem 1.45rem 8rem 3.7rem;
222
- border: 0;
223
- outline: 0;
224
- color: #383542;
225
- background: transparent;
226
- caret-color: var(--accent);
227
- font-family: "DM Mono", monospace;
228
- font-size: 0.83rem;
229
- line-height: 1.72rem;
230
- tab-size: 2;
231
-
232
- &:disabled {
233
- opacity: 0.58;
234
- }
235
- }
236
-
237
- > caret-layer {
238
- position: absolute;
239
- inset: 0;
240
- z-index: 2;
241
- overflow: hidden;
242
- pointer-events: none;
243
-
244
- > remote-caret {
245
- position: absolute;
246
- top: calc(1.45rem + var(--caret-line) * 1.72rem);
247
- left: calc(3.7rem + var(--caret-column) * 0.5rem);
248
- width: 2px;
249
- height: 1.25rem;
250
- background: var(--person-color);
251
-
252
- > span {
253
- position: absolute;
254
- top: -1.05rem;
255
- left: 0;
256
- padding: 0.14rem 0.35rem;
257
- border-radius: 0.3rem 0.3rem 0.3rem 0;
258
- color: white;
259
- background: var(--person-color);
260
- font-size: 0.56rem;
261
- font-weight: 800;
262
- white-space: nowrap;
263
- }
264
- }
314
+ > virtual-spacer {
315
+ display: block;
316
+ inline-size: 1px;
265
317
  }
266
318
  }
267
319
  }
@@ -279,7 +331,7 @@ markdown-workspace.class {
279
331
  > article {
280
332
  overflow: auto;
281
333
  padding: clamp(1.6rem, 4vw, 4rem);
282
- color: #37333d;
334
+ color: var(--preview-ink);
283
335
  font-family: "Newsreader", Georgia, serif;
284
336
  font-size: 1.05rem;
285
337
  line-height: 1.72;
@@ -291,7 +343,7 @@ markdown-workspace.class {
291
343
  > h5,
292
344
  > h6 {
293
345
  margin: 1.8em 0 0.55em;
294
- color: #282430;
346
+ color: var(--heading);
295
347
  font-weight: 650;
296
348
  letter-spacing: -0.025em;
297
349
  line-height: 1.1;
@@ -321,41 +373,41 @@ markdown-workspace.class {
321
373
 
322
374
  > blockquote {
323
375
  padding: 0.75rem 1.1rem;
324
- border-left: 3px solid #b5a5f6;
325
- color: #5d566b;
326
- background: #f7f4ff;
376
+ border-left: 3px solid var(--quote-border);
377
+ color: var(--quote-ink);
378
+ background: var(--quote-background);
327
379
  font-style: italic;
328
380
  }
329
381
 
330
382
  > pre {
331
383
  overflow: auto;
332
384
  padding: 1rem 1.15rem;
333
- border: 1px solid #e2deea;
385
+ border: 1px solid var(--code-border);
334
386
  border-radius: 0.7rem;
335
- color: #ede9ff;
336
- background: #302c3a;
387
+ color: var(--code-ink);
388
+ background: var(--code-background);
337
389
  font-family: "DM Mono", monospace;
338
390
  font-size: 0.76rem;
339
391
  line-height: 1.65;
340
392
  }
341
393
 
342
394
  strong {
343
- color: #332d42;
395
+ color: var(--strong-ink);
344
396
  font-weight: 650;
345
397
  }
346
398
 
347
399
  code:not(pre code) {
348
400
  padding: 0.15em 0.35em;
349
401
  border-radius: 0.25rem;
350
- color: #6547d6;
351
- background: #f0ecff;
402
+ color: var(--inline-code-ink);
403
+ background: var(--inline-code-background);
352
404
  font-family: "DM Mono", monospace;
353
405
  font-size: 0.8em;
354
406
  }
355
407
 
356
408
  a {
357
- color: #6547d6;
358
- text-decoration-color: #b9abf2;
409
+ color: var(--link);
410
+ text-decoration-color: var(--link-underline);
359
411
  text-underline-offset: 0.15em;
360
412
  }
361
413
  }
@@ -393,7 +445,7 @@ markdown-workspace.class {
393
445
  place-items: center;
394
446
  width: 2rem;
395
447
  aspect-ratio: 1;
396
- border: 2px solid white;
448
+ border: 2px solid var(--avatar-ring);
397
449
  border-radius: 50%;
398
450
  color: white;
399
451
  background: var(--person-color);
@@ -426,18 +478,22 @@ markdown-workspace.class {
426
478
  > aside {
427
479
  margin-top: auto;
428
480
  padding: 0.9rem;
429
- border: 1px solid #e3dcff;
481
+ border: 1px solid var(--aside-border);
430
482
  border-radius: 0.8rem;
431
- background: linear-gradient(145deg, #f9f7ff, #f1edff);
483
+ background: linear-gradient(
484
+ 145deg,
485
+ var(--aside-gradient-start),
486
+ var(--aside-gradient-end)
487
+ );
432
488
 
433
489
  > strong {
434
- color: #5941b4;
490
+ color: var(--aside-title);
435
491
  font-size: 0.7rem;
436
492
  }
437
493
 
438
494
  > p {
439
495
  margin: 0.4rem 0 0;
440
- color: #6d6680;
496
+ color: var(--aside-body);
441
497
  font-size: 0.65rem;
442
498
  line-height: 1.55;
443
499
  }
@@ -451,29 +507,29 @@ markdown-workspace.class {
451
507
  gap: 0.45rem;
452
508
  min-height: 2.6rem;
453
509
  padding: 0.55rem 1.5rem;
454
- border-top: 1px solid #e2dfe8;
510
+ border-top: 1px solid var(--chrome-border);
455
511
  color: var(--muted);
456
- background: #faf9fc;
512
+ background: var(--chrome);
457
513
  font-size: 0.66rem;
458
514
 
459
515
  > span {
460
516
  width: 0.48rem;
461
517
  aspect-ratio: 1;
462
518
  border-radius: 50%;
463
- background: #aaa5b3;
519
+ background: var(--status-idle);
464
520
 
465
521
  &[data-status="live"] {
466
- background: #21a879;
467
- box-shadow: 0 0 0 0.22rem #21a8791c;
522
+ background: var(--status-live);
523
+ box-shadow: 0 0 0 0.22rem var(--status-live-ring);
468
524
  }
469
525
 
470
526
  &[data-status="offline"] {
471
- background: #df8c35;
527
+ background: var(--status-offline);
472
528
  }
473
529
  }
474
530
 
475
531
  > strong {
476
- color: #5f5b69;
532
+ color: var(--footer-ink);
477
533
  font-weight: 700;
478
534
  }
479
535
 
@@ -482,7 +538,7 @@ markdown-workspace.class {
482
538
  }
483
539
 
484
540
  > output {
485
- color: #a5435e;
541
+ color: var(--error);
486
542
  }
487
543
  }
488
544