@atom.io/template-react-realtime-text-editor 0.0.11 → 0.0.13
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.
- package/CHANGELOG.md +25 -0
- package/INNOVATIONS.md +242 -113
- package/README.md +75 -39
- package/eslint.config.ts +1 -1
- package/index.html +1 -0
- package/node/http-server.ts +81 -0
- package/node/server.ts +12 -60
- package/node/service.ts +310 -0
- package/package.json +30 -21
- package/playwright.config.ts +34 -0
- package/src/LexicalMarkdownEditor.css +88 -0
- package/src/LexicalMarkdownEditor.module.css +8 -0
- package/src/LexicalMarkdownEditor.tsx +43 -0
- package/src/MarkdownWorkspace.module.css +154 -98
- package/src/MarkdownWorkspace.tsx +163 -296
- package/src/collaboration-client.ts +238 -0
- package/src/document-domain.ts +169 -0
- package/src/globals.css +9 -2
- package/src/incremental-markdown.ts +279 -0
- package/src/main.tsx +30 -9
- package/src/protocol.ts +35 -0
- package/src/virtualization.ts +53 -0
- package/src/workspace-state.ts +275 -0
- package/tests/browser/editor-conformance.spec.ts +806 -0
- package/tests/collaboration.test.tsx +465 -213
- package/tests/incremental-markdown.test.tsx +101 -0
- package/tsconfig.app.json +1 -1
- package/tsconfig.node.json +8 -2
- package/tsconfig.test.json +1 -1
- package/vite.config.ts +13 -9
- package/node/mosaic-atom.ts +0 -88
- package/src/collaboration/mosaic.ts +0 -46
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import {
|
|
2
|
+
MosaicLexicalTextEditor,
|
|
3
|
+
type MosaicLexicalTextEditorClassNames,
|
|
4
|
+
type MosaicLexicalTextEditorProps,
|
|
5
|
+
} from "@atom.io/realtime/react/lexical"
|
|
6
|
+
import type { ReactElement } from "react"
|
|
7
|
+
|
|
8
|
+
import "./LexicalMarkdownEditor.css"
|
|
9
|
+
import css from "./LexicalMarkdownEditor.module.css"
|
|
10
|
+
|
|
11
|
+
export type { RenderedCollaboratorSelection } from "@atom.io/realtime/react/lexical"
|
|
12
|
+
|
|
13
|
+
const classNames = {
|
|
14
|
+
caret: `LexicalMarkdownEditor_caret`,
|
|
15
|
+
contentEditable: `LexicalMarkdownEditor_contentEditable`,
|
|
16
|
+
editor: `LexicalMarkdownEditor_editor`,
|
|
17
|
+
label: `LexicalMarkdownEditor_label`,
|
|
18
|
+
overlays: `LexicalMarkdownEditor_overlays`,
|
|
19
|
+
paragraph: `LexicalMarkdownEditor_paragraph`,
|
|
20
|
+
placeholder: `LexicalMarkdownEditor_placeholder`,
|
|
21
|
+
presence: `LexicalMarkdownEditor_presence`,
|
|
22
|
+
selection: `LexicalMarkdownEditor_selection`,
|
|
23
|
+
} satisfies MosaicLexicalTextEditorClassNames
|
|
24
|
+
|
|
25
|
+
export type LexicalMarkdownEditorProps = Omit<
|
|
26
|
+
MosaicLexicalTextEditorProps,
|
|
27
|
+
`className` | `classNames`
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
/** Template-owned visual treatment for Atom.io's headless Lexical adapter. */
|
|
31
|
+
export function LexicalMarkdownEditor(
|
|
32
|
+
properties: LexicalMarkdownEditorProps,
|
|
33
|
+
): ReactElement {
|
|
34
|
+
return (
|
|
35
|
+
<lexical-markdown-editor className={css.class}>
|
|
36
|
+
<MosaicLexicalTextEditor
|
|
37
|
+
/* @lasertag-adopt-subtree */
|
|
38
|
+
{...properties}
|
|
39
|
+
classNames={classNames}
|
|
40
|
+
/>
|
|
41
|
+
</lexical-markdown-editor>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
@@ -1,16 +1,111 @@
|
|
|
1
1
|
markdown-workspace.class {
|
|
2
|
-
--accent: #
|
|
3
|
-
--border: #
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
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(
|
|
13
|
-
|
|
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
|
|
25
|
-
background:
|
|
26
|
-
box-shadow: 0 0.25rem 1.8rem
|
|
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:
|
|
107
|
-
background:
|
|
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:
|
|
207
|
+
border-color: var(--button-hover-border);
|
|
113
208
|
color: var(--accent);
|
|
114
|
-
background:
|
|
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:
|
|
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:
|
|
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
|
|
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
|
|
188
|
-
background:
|
|
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(
|
|
307
|
+
linear-gradient(
|
|
308
|
+
90deg,
|
|
309
|
+
var(--editor-gutter) 2.75rem,
|
|
310
|
+
transparent 2.75rem
|
|
311
|
+
),
|
|
212
312
|
var(--panel);
|
|
213
313
|
|
|
214
|
-
>
|
|
215
|
-
|
|
216
|
-
|
|
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:
|
|
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:
|
|
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
|
|
325
|
-
color:
|
|
326
|
-
background:
|
|
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
|
|
385
|
+
border: 1px solid var(--code-border);
|
|
334
386
|
border-radius: 0.7rem;
|
|
335
|
-
color:
|
|
336
|
-
background:
|
|
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:
|
|
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:
|
|
351
|
-
background:
|
|
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:
|
|
358
|
-
text-decoration-color:
|
|
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
|
|
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
|
|
481
|
+
border: 1px solid var(--aside-border);
|
|
430
482
|
border-radius: 0.8rem;
|
|
431
|
-
background: linear-gradient(
|
|
483
|
+
background: linear-gradient(
|
|
484
|
+
145deg,
|
|
485
|
+
var(--aside-gradient-start),
|
|
486
|
+
var(--aside-gradient-end)
|
|
487
|
+
);
|
|
432
488
|
|
|
433
489
|
> strong {
|
|
434
|
-
color:
|
|
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:
|
|
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
|
|
510
|
+
border-top: 1px solid var(--chrome-border);
|
|
455
511
|
color: var(--muted);
|
|
456
|
-
background:
|
|
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:
|
|
519
|
+
background: var(--status-idle);
|
|
464
520
|
|
|
465
521
|
&[data-status="live"] {
|
|
466
|
-
background:
|
|
467
|
-
box-shadow: 0 0 0 0.22rem
|
|
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:
|
|
527
|
+
background: var(--status-offline);
|
|
472
528
|
}
|
|
473
529
|
}
|
|
474
530
|
|
|
475
531
|
> strong {
|
|
476
|
-
color:
|
|
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:
|
|
541
|
+
color: var(--error);
|
|
486
542
|
}
|
|
487
543
|
}
|
|
488
544
|
|