@dxos/react-ui-editor 0.3.11-main.508f304 → 0.3.11-main.514e6e4
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/dist/lib/browser/index.mjs +665 -791
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts +2 -2
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/extensions/awareness.d.ts +1 -3
- package/dist/types/src/extensions/awareness.d.ts.map +1 -1
- package/dist/types/src/extensions/basic.d.ts +2 -2
- package/dist/types/src/extensions/basic.d.ts.map +1 -1
- package/dist/types/src/extensions/comments.d.ts +3 -3
- package/dist/types/src/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/extensions/index.d.ts +0 -7
- package/dist/types/src/extensions/index.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/bundle.d.ts +2 -2
- package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/code.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/heading.d.ts +6 -0
- package/dist/types/src/extensions/markdown/heading.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/hr.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/image.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/index.d.ts +7 -0
- package/dist/types/src/extensions/markdown/index.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/link.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/table.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/tasklist.d.ts.map +1 -0
- package/dist/types/src/hooks/awareness-provider.d.ts +7 -4
- package/dist/types/src/hooks/awareness-provider.d.ts.map +1 -1
- package/dist/types/src/hooks/defs.d.ts +1 -4
- package/dist/types/src/hooks/defs.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +1 -2
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useTextEditor.d.ts +17 -0
- package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -0
- package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
- package/dist/types/src/styles/markdown.d.ts +2 -2
- package/dist/types/src/styles/markdown.d.ts.map +1 -1
- package/dist/types/src/themes/default.d.ts.map +1 -1
- package/package.json +24 -27
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +6 -4
- package/src/components/TextEditor/TextEditor.tsx +12 -15
- package/src/components/TextEditor/comments.stories.tsx +5 -5
- package/src/extensions/awareness.ts +14 -31
- package/src/extensions/basic.ts +3 -3
- package/src/extensions/comments.ts +15 -15
- package/src/extensions/index.ts +0 -7
- package/src/extensions/markdown/bundle.ts +3 -7
- package/src/extensions/markdown/code.ts +127 -0
- package/src/extensions/markdown/heading.ts +59 -0
- package/src/extensions/markdown/highlight.ts +9 -15
- package/src/extensions/{hr.ts → markdown/hr.ts} +3 -4
- package/src/extensions/markdown/index.ts +7 -0
- package/src/extensions/{link.ts → markdown/link.ts} +1 -2
- package/src/extensions/{tasklist.ts → markdown/tasklist.ts} +2 -3
- package/src/hooks/awareness-provider.ts +24 -20
- package/src/hooks/defs.ts +1 -6
- package/src/hooks/index.ts +1 -2
- package/src/hooks/useTextEditor.ts +29 -0
- package/src/hooks/useTextModel.ts +46 -12
- package/src/styles/markdown.ts +9 -10
- package/src/themes/default.ts +0 -2
- package/dist/types/src/components/TextEditor/codemirror.stories.d.ts +0 -12
- package/dist/types/src/components/TextEditor/codemirror.stories.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/yjs.stories.d.ts +0 -12
- package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +0 -1
- package/dist/types/src/extensions/code.d.ts.map +0 -1
- package/dist/types/src/extensions/hr.d.ts.map +0 -1
- package/dist/types/src/extensions/image.d.ts.map +0 -1
- package/dist/types/src/extensions/link.d.ts.map +0 -1
- package/dist/types/src/extensions/table.d.ts.map +0 -1
- package/dist/types/src/extensions/tasklist.d.ts.map +0 -1
- package/dist/types/src/extensions/yjs/cursor.d.ts +0 -4
- package/dist/types/src/extensions/yjs/cursor.d.ts.map +0 -1
- package/dist/types/src/extensions/yjs/index.d.ts +0 -2
- package/dist/types/src/extensions/yjs/index.d.ts.map +0 -1
- package/dist/types/src/extensions/yjs/yjs.d.ts +0 -4
- package/dist/types/src/extensions/yjs/yjs.d.ts.map +0 -1
- package/dist/types/src/extensions/yjs/yjs.test.d.ts +0 -2
- package/dist/types/src/extensions/yjs/yjs.test.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge.d.ts +0 -4
- package/dist/types/src/hooks/automerge.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs.d.ts +0 -28
- package/dist/types/src/hooks/yjs.d.ts.map +0 -1
- package/dist/types/src/testing/index.d.ts +0 -3
- package/dist/types/src/testing/index.d.ts.map +0 -1
- package/dist/types/src/testing/proto/gen/schema.d.ts +0 -15
- package/dist/types/src/testing/proto/gen/schema.d.ts.map +0 -1
- package/dist/types/src/testing/proto/index.d.ts +0 -2
- package/dist/types/src/testing/proto/index.d.ts.map +0 -1
- package/dist/types/src/testing/replicator.d.ts +0 -45
- package/dist/types/src/testing/replicator.d.ts.map +0 -1
- package/src/components/TextEditor/codemirror.stories.ts +0 -115
- package/src/components/TextEditor/yjs.stories.tsx +0 -56
- package/src/extensions/code.ts +0 -104
- package/src/extensions/yjs/cursor.ts +0 -22
- package/src/extensions/yjs/index.ts +0 -5
- package/src/extensions/yjs/yjs.test.ts +0 -35
- package/src/extensions/yjs/yjs.ts +0 -16
- package/src/hooks/automerge.ts +0 -53
- package/src/hooks/yjs.ts +0 -157
- package/src/testing/index.ts +0 -6
- package/src/testing/proto/gen/schema.ts +0 -49
- package/src/testing/proto/index.ts +0 -5
- package/src/testing/proto/schema.proto +0 -15
- package/src/testing/replicator.ts +0 -184
- /package/dist/types/src/extensions/{code.d.ts → markdown/code.d.ts} +0 -0
- /package/dist/types/src/extensions/{hr.d.ts → markdown/hr.d.ts} +0 -0
- /package/dist/types/src/extensions/{image.d.ts → markdown/image.d.ts} +0 -0
- /package/dist/types/src/extensions/{link.d.ts → markdown/link.d.ts} +0 -0
- /package/dist/types/src/extensions/{table.d.ts → markdown/table.d.ts} +0 -0
- /package/dist/types/src/extensions/{tasklist.d.ts → markdown/tasklist.d.ts} +0 -0
- /package/src/extensions/{image.ts → markdown/image.ts} +0 -0
- /package/src/extensions/{table.ts → markdown/table.ts} +0 -0
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { syntaxTree } from '@codemirror/language';
|
|
6
|
+
import { RangeSetBuilder } from '@codemirror/state';
|
|
7
|
+
import {
|
|
8
|
+
ViewPlugin,
|
|
9
|
+
type DecorationSet,
|
|
10
|
+
EditorView,
|
|
11
|
+
type ViewUpdate,
|
|
12
|
+
Decoration,
|
|
13
|
+
type BlockInfo,
|
|
14
|
+
WidgetType,
|
|
15
|
+
} from '@codemirror/view';
|
|
16
|
+
|
|
17
|
+
import { mx } from '@dxos/react-ui-theme';
|
|
18
|
+
|
|
19
|
+
import { getToken } from '../../styles';
|
|
20
|
+
|
|
21
|
+
// TODO(burdon): Reconcile with theme.
|
|
22
|
+
// [aria-readonly="true"]
|
|
23
|
+
const styles = EditorView.baseTheme({
|
|
24
|
+
'& .cm-code': {
|
|
25
|
+
paddingInline: '1rem !important',
|
|
26
|
+
fontFamily: getToken('fontFamily.mono', []).join(','),
|
|
27
|
+
},
|
|
28
|
+
'& .cm-codeblock': {
|
|
29
|
+
display: 'inline-block',
|
|
30
|
+
width: '100%',
|
|
31
|
+
},
|
|
32
|
+
'&light .cm-codeblock, &light .cm-codeblock.cm-activeLine': {
|
|
33
|
+
background: getToken('extend.colors.neutral.25'),
|
|
34
|
+
},
|
|
35
|
+
'&dark .cm-codeblock, &dark .cm-codeblock.cm-activeLine': {
|
|
36
|
+
background: getToken('extend.colors.neutral.850'),
|
|
37
|
+
},
|
|
38
|
+
'& .cm-codeblock-first': {
|
|
39
|
+
borderTopLeftRadius: '.5rem',
|
|
40
|
+
borderTopRightRadius: '.5rem',
|
|
41
|
+
},
|
|
42
|
+
'& .cm-codeblock-last': {
|
|
43
|
+
borderBottomLeftRadius: '.5rem',
|
|
44
|
+
borderBottomRightRadius: '.5rem',
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// TODO(burdon): Start from EditorView.lineBlockAt(pos).
|
|
49
|
+
const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
|
|
50
|
+
const start = lines.findIndex((line) => line.from >= from);
|
|
51
|
+
const end = lines.findIndex((line) => line.to >= to);
|
|
52
|
+
return [start, end];
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
class LineWidget extends WidgetType {
|
|
56
|
+
constructor(private readonly _className: string) {
|
|
57
|
+
super();
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
override toDOM() {
|
|
61
|
+
const el = document.createElement('span');
|
|
62
|
+
el.innerHTML = ' ';
|
|
63
|
+
el.className = mx('cm-code cm-codeblock', this._className);
|
|
64
|
+
return el;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const top = new LineWidget('cm-codeblock-first');
|
|
69
|
+
const bottom = new LineWidget('cm-codeblock-last');
|
|
70
|
+
|
|
71
|
+
const buildDecorations = (view: EditorView): DecorationSet => {
|
|
72
|
+
const builder = new RangeSetBuilder<Decoration>();
|
|
73
|
+
const { state } = view;
|
|
74
|
+
const blocks = view.viewportLineBlocks;
|
|
75
|
+
const cursor = state.selection.main.head;
|
|
76
|
+
|
|
77
|
+
// TODO(burdon): Add copy to clipboard widget.
|
|
78
|
+
for (const { from, to } of view.visibleRanges) {
|
|
79
|
+
syntaxTree(state).iterate({
|
|
80
|
+
enter: (node) => {
|
|
81
|
+
if (node.name === 'FencedCode') {
|
|
82
|
+
const edit = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
|
|
83
|
+
const range = getLineRange(blocks, node.from, node.to);
|
|
84
|
+
for (let i = range[0]; i <= range[1]; i++) {
|
|
85
|
+
const block = blocks[i];
|
|
86
|
+
if (!edit && (i === range[0] || i === range[1])) {
|
|
87
|
+
builder.add(block.from, block.to, Decoration.replace({ widget: i === range[0] ? top : bottom }));
|
|
88
|
+
} else {
|
|
89
|
+
builder.add(
|
|
90
|
+
block.from,
|
|
91
|
+
block.from,
|
|
92
|
+
Decoration.line({
|
|
93
|
+
class: mx('cm-code cm-codeblock'),
|
|
94
|
+
}),
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
from,
|
|
101
|
+
to,
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
return builder.finish();
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
export const code = () => {
|
|
109
|
+
return [
|
|
110
|
+
ViewPlugin.fromClass(
|
|
111
|
+
class {
|
|
112
|
+
decorations: DecorationSet;
|
|
113
|
+
constructor(view: EditorView) {
|
|
114
|
+
this.decorations = buildDecorations(view);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
update(update: ViewUpdate) {
|
|
118
|
+
this.decorations = buildDecorations(update.view);
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
decorations: (value) => value.decorations,
|
|
123
|
+
},
|
|
124
|
+
),
|
|
125
|
+
styles,
|
|
126
|
+
];
|
|
127
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { syntaxTree } from '@codemirror/language';
|
|
6
|
+
import { RangeSetBuilder } from '@codemirror/state';
|
|
7
|
+
import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
|
|
8
|
+
|
|
9
|
+
const buildDecorations = (view: EditorView): DecorationSet => {
|
|
10
|
+
const builder = new RangeSetBuilder<Decoration>();
|
|
11
|
+
const { state } = view;
|
|
12
|
+
const cursor = state.selection.main.head;
|
|
13
|
+
|
|
14
|
+
for (const { from, to } of view.visibleRanges) {
|
|
15
|
+
syntaxTree(state).iterate({
|
|
16
|
+
enter: (node) => {
|
|
17
|
+
switch (node.name) {
|
|
18
|
+
case 'ATXHeading1':
|
|
19
|
+
case 'ATXHeading2':
|
|
20
|
+
case 'ATXHeading3':
|
|
21
|
+
case 'ATXHeading4':
|
|
22
|
+
case 'ATXHeading5':
|
|
23
|
+
case 'ATXHeading6': {
|
|
24
|
+
const mark = node.node.getChild('HeaderMark');
|
|
25
|
+
if (mark) {
|
|
26
|
+
if (view.state.readOnly || cursor < node.from || cursor > node.to) {
|
|
27
|
+
builder.add(mark.from, mark.to + 1, Decoration.replace({}));
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
from,
|
|
34
|
+
to,
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return builder.finish();
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const heading = () => {
|
|
42
|
+
return [
|
|
43
|
+
ViewPlugin.fromClass(
|
|
44
|
+
class {
|
|
45
|
+
decorations: DecorationSet;
|
|
46
|
+
constructor(view: EditorView) {
|
|
47
|
+
this.decorations = buildDecorations(view);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
update(update: ViewUpdate) {
|
|
51
|
+
this.decorations = buildDecorations(update.view);
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
decorations: (value) => value.decorations,
|
|
56
|
+
},
|
|
57
|
+
),
|
|
58
|
+
];
|
|
59
|
+
};
|
|
@@ -128,13 +128,13 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
|
|
|
128
128
|
// Markdown marks.
|
|
129
129
|
{
|
|
130
130
|
tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
|
|
131
|
-
class:
|
|
131
|
+
class: mark,
|
|
132
132
|
},
|
|
133
133
|
|
|
134
134
|
// E.g., code block language (after ```).
|
|
135
135
|
{
|
|
136
136
|
tag: [tags.function(tags.variableName), tags.labelName],
|
|
137
|
-
class:
|
|
137
|
+
class: codeMark,
|
|
138
138
|
},
|
|
139
139
|
|
|
140
140
|
{
|
|
@@ -143,12 +143,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
|
|
|
143
143
|
},
|
|
144
144
|
|
|
145
145
|
// Headings.
|
|
146
|
-
{ tag: tags.heading1, class: heading(1
|
|
147
|
-
{ tag: tags.heading2, class: heading(2
|
|
148
|
-
{ tag: tags.heading3, class: heading(3
|
|
149
|
-
{ tag: tags.heading4, class: heading(4
|
|
150
|
-
{ tag: tags.heading5, class: heading(5
|
|
151
|
-
{ tag: tags.heading6, class: heading(6
|
|
146
|
+
{ tag: tags.heading1, class: heading(1) },
|
|
147
|
+
{ tag: tags.heading2, class: heading(2) },
|
|
148
|
+
{ tag: tags.heading3, class: heading(3) },
|
|
149
|
+
{ tag: tags.heading4, class: heading(4) },
|
|
150
|
+
{ tag: tags.heading5, class: heading(5) },
|
|
151
|
+
{ tag: tags.heading6, class: heading(6) },
|
|
152
152
|
|
|
153
153
|
// Emphasis.
|
|
154
154
|
{ tag: tags.emphasis, class: italic },
|
|
@@ -165,7 +165,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
|
|
|
165
165
|
// However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
|
|
166
166
|
// when a language is specified. In this case, the syntax highlighting extensions will colorize
|
|
167
167
|
// the code, but all other CSS properties will be inherited.
|
|
168
|
-
// IMPORTANT: Therefore, the fenced code block will use the base editor font.
|
|
168
|
+
// IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
|
|
169
169
|
{
|
|
170
170
|
tag: [markdownTags.CodeText, markdownTags.InlineCode],
|
|
171
171
|
class: code,
|
|
@@ -180,12 +180,6 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
|
|
|
180
180
|
tag: [markdownTags.TableCell],
|
|
181
181
|
class: 'font-mono',
|
|
182
182
|
},
|
|
183
|
-
|
|
184
|
-
// Main content, paragraphs, etc.
|
|
185
|
-
// {
|
|
186
|
-
// tag: [tags.content],
|
|
187
|
-
// fontFamily: getToken('fontFamily.body', []).join(','),
|
|
188
|
-
// },
|
|
189
183
|
],
|
|
190
184
|
{
|
|
191
185
|
scope: markdownLanguage,
|
|
@@ -6,7 +6,7 @@ import { syntaxTree } from '@codemirror/language';
|
|
|
6
6
|
import { RangeSetBuilder } from '@codemirror/state';
|
|
7
7
|
import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
|
|
8
8
|
|
|
9
|
-
import { getToken } from '
|
|
9
|
+
import { getToken } from '../../styles';
|
|
10
10
|
|
|
11
11
|
// TODO(burdon): Reconcile with theme.
|
|
12
12
|
const styles = EditorView.baseTheme({
|
|
@@ -51,11 +51,9 @@ const buildDecorations = (view: EditorView): DecorationSet => {
|
|
|
51
51
|
|
|
52
52
|
export const hr = () => {
|
|
53
53
|
return [
|
|
54
|
-
styles,
|
|
55
54
|
ViewPlugin.fromClass(
|
|
56
55
|
class {
|
|
57
56
|
decorations: DecorationSet;
|
|
58
|
-
|
|
59
57
|
constructor(view: EditorView) {
|
|
60
58
|
this.decorations = buildDecorations(view);
|
|
61
59
|
}
|
|
@@ -65,8 +63,9 @@ export const hr = () => {
|
|
|
65
63
|
}
|
|
66
64
|
},
|
|
67
65
|
{
|
|
68
|
-
decorations: (
|
|
66
|
+
decorations: (value) => value.decorations,
|
|
69
67
|
},
|
|
70
68
|
),
|
|
69
|
+
styles,
|
|
71
70
|
];
|
|
72
71
|
};
|
|
@@ -37,7 +37,6 @@ export const link = (options: LinkOptions = {}): Extension => {
|
|
|
37
37
|
ViewPlugin.fromClass(
|
|
38
38
|
class {
|
|
39
39
|
decorations: DecorationSet;
|
|
40
|
-
|
|
41
40
|
constructor(view: EditorView) {
|
|
42
41
|
this.decorations = buildDecorations(view, options);
|
|
43
42
|
}
|
|
@@ -49,7 +48,7 @@ export const link = (options: LinkOptions = {}): Extension => {
|
|
|
49
48
|
}
|
|
50
49
|
},
|
|
51
50
|
{
|
|
52
|
-
decorations: (
|
|
51
|
+
decorations: (value) => value.decorations,
|
|
53
52
|
},
|
|
54
53
|
),
|
|
55
54
|
];
|
|
@@ -6,7 +6,7 @@ import { syntaxTree } from '@codemirror/language';
|
|
|
6
6
|
import { RangeSetBuilder } from '@codemirror/state';
|
|
7
7
|
import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
|
|
8
8
|
|
|
9
|
-
import { getToken } from '
|
|
9
|
+
import { getToken } from '../../styles';
|
|
10
10
|
|
|
11
11
|
// TODO(burdon): Reconcile with theme.
|
|
12
12
|
const styles = EditorView.baseTheme({
|
|
@@ -91,7 +91,6 @@ export const tasklist = (options: TasklistOptions = {}) => {
|
|
|
91
91
|
ViewPlugin.fromClass(
|
|
92
92
|
class {
|
|
93
93
|
decorations: DecorationSet;
|
|
94
|
-
|
|
95
94
|
constructor(view: EditorView) {
|
|
96
95
|
this.decorations = buildDecorations(view);
|
|
97
96
|
}
|
|
@@ -103,7 +102,7 @@ export const tasklist = (options: TasklistOptions = {}) => {
|
|
|
103
102
|
}
|
|
104
103
|
},
|
|
105
104
|
{
|
|
106
|
-
decorations: (
|
|
105
|
+
decorations: (value) => value.decorations,
|
|
107
106
|
},
|
|
108
107
|
),
|
|
109
108
|
styles,
|
|
@@ -29,9 +29,10 @@ export type AwarenessProviderParams = {
|
|
|
29
29
|
info: AwarenessInfo;
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
+
/**
|
|
33
|
+
* Receives and broadcasts profile and cursor position.
|
|
34
|
+
*/
|
|
32
35
|
export class SpaceAwarenessProvider implements AwarenessProvider {
|
|
33
|
-
public readonly remoteStateChange = new Event<void>();
|
|
34
|
-
|
|
35
36
|
private readonly _remoteStates = new Map<string, AwarenessState>();
|
|
36
37
|
|
|
37
38
|
private readonly _space: Space;
|
|
@@ -39,9 +40,11 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
|
|
|
39
40
|
private readonly _peerId: string;
|
|
40
41
|
private readonly _info: AwarenessInfo;
|
|
41
42
|
|
|
42
|
-
private _localState?: AwarenessState;
|
|
43
|
-
private _postTask?: DeferredTask;
|
|
44
43
|
private _ctx?: Context;
|
|
44
|
+
private _postTask?: DeferredTask;
|
|
45
|
+
private _localState?: AwarenessState;
|
|
46
|
+
|
|
47
|
+
public readonly remoteStateChange = new Event<void>();
|
|
45
48
|
|
|
46
49
|
constructor(params: AwarenessProviderParams) {
|
|
47
50
|
this._space = params.space;
|
|
@@ -63,19 +66,20 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
|
|
|
63
66
|
}
|
|
64
67
|
});
|
|
65
68
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
this._ctx.onDispose(
|
|
70
|
+
this._space.listen(this._channel, (message: GossipMessage) => {
|
|
71
|
+
switch (message.payload.kind) {
|
|
72
|
+
case 'query': {
|
|
73
|
+
this._handleQueryMessage();
|
|
74
|
+
break;
|
|
75
|
+
}
|
|
76
|
+
case 'post': {
|
|
77
|
+
this._handlePostMessage(message.payload);
|
|
78
|
+
break;
|
|
79
|
+
}
|
|
71
80
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
break;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
this._ctx.onDispose(unsubscribe);
|
|
81
|
+
}),
|
|
82
|
+
);
|
|
79
83
|
|
|
80
84
|
void this._space
|
|
81
85
|
.postMessage(this._channel, {
|
|
@@ -92,6 +96,10 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
|
|
|
92
96
|
this._postTask = undefined;
|
|
93
97
|
}
|
|
94
98
|
|
|
99
|
+
getRemoteStates(): AwarenessState[] {
|
|
100
|
+
return Array.from(this._remoteStates.values());
|
|
101
|
+
}
|
|
102
|
+
|
|
95
103
|
update(position: AwarenessPosition | undefined): void {
|
|
96
104
|
invariant(this._postTask);
|
|
97
105
|
this._localState = {
|
|
@@ -103,10 +111,6 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
|
|
|
103
111
|
this._postTask.schedule();
|
|
104
112
|
}
|
|
105
113
|
|
|
106
|
-
getRemoteStates(): AwarenessState[] {
|
|
107
|
-
return Array.from(this._remoteStates.values());
|
|
108
|
-
}
|
|
109
|
-
|
|
110
114
|
private _handleQueryMessage() {
|
|
111
115
|
invariant(this._postTask);
|
|
112
116
|
this._postTask.schedule();
|
package/src/hooks/defs.ts
CHANGED
|
@@ -3,10 +3,8 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type Extension, StateField } from '@codemirror/state';
|
|
6
|
-
import type * as YP from 'y-protocols/awareness';
|
|
7
6
|
|
|
8
7
|
import { type DocAccessor } from '@dxos/echo-schema';
|
|
9
|
-
import type { YText, YXmlFragment } from '@dxos/text-model';
|
|
10
8
|
|
|
11
9
|
// Runtime data structure.
|
|
12
10
|
export type Range = {
|
|
@@ -26,10 +24,7 @@ export type EditorModel = {
|
|
|
26
24
|
extension?: Extension;
|
|
27
25
|
|
|
28
26
|
// TODO(burdon): Remove.
|
|
29
|
-
content: string |
|
|
30
|
-
|
|
31
|
-
// TODO(burdon): Move into extension.
|
|
32
|
-
awareness?: YP.Awareness;
|
|
27
|
+
content: string | DocAccessor;
|
|
33
28
|
|
|
34
29
|
// TODO(burdon): Remove.
|
|
35
30
|
peer?: {
|
package/src/hooks/index.ts
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type EditorView } from '@codemirror/view';
|
|
6
|
+
import { type RefCallback, useState } from 'react';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Hook for accessing the editor view.
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const Test = () => {
|
|
13
|
+
* const [editorRef, editorView] = useTextEditor();
|
|
14
|
+
* useEffect(() => {
|
|
15
|
+
* editorView?.focus();
|
|
16
|
+
* }, [editorView]);
|
|
17
|
+
* return <TextEditor ref={editorRef} />;
|
|
18
|
+
* };
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export const useTextEditor = (): [RefCallback<EditorView | null>, EditorView | null] => {
|
|
22
|
+
const [view, setView] = useState<EditorView | null>(null);
|
|
23
|
+
return [
|
|
24
|
+
(ref: EditorView | null) => {
|
|
25
|
+
setView(ref);
|
|
26
|
+
},
|
|
27
|
+
view,
|
|
28
|
+
];
|
|
29
|
+
};
|
|
@@ -2,14 +2,20 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import get from 'lodash.get';
|
|
5
6
|
import { useEffect, useState } from 'react';
|
|
6
7
|
|
|
8
|
+
import { generateName } from '@dxos/display-name';
|
|
9
|
+
import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
|
|
10
|
+
import { invariant } from '@dxos/invariant';
|
|
7
11
|
import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
|
|
8
12
|
import { type Identity } from '@dxos/react-client/halo';
|
|
13
|
+
import { isNotNullOrUndefined } from '@dxos/util';
|
|
9
14
|
|
|
10
|
-
import {
|
|
11
|
-
import { type EditorModel } from './defs';
|
|
12
|
-
import {
|
|
15
|
+
import { SpaceAwarenessProvider } from './awareness-provider';
|
|
16
|
+
import { type EditorModel, modelState } from './defs';
|
|
17
|
+
import { automerge, awareness, AwarenessProvider } from '../extensions';
|
|
18
|
+
import { cursorColor } from '../styles';
|
|
13
19
|
|
|
14
20
|
// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
|
|
15
21
|
export type UseTextModelProps = {
|
|
@@ -25,13 +31,41 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
|
|
|
25
31
|
return model;
|
|
26
32
|
};
|
|
27
33
|
|
|
28
|
-
const createModel = (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
const createModel = ({ space, identity, text }: UseTextModelProps) => {
|
|
35
|
+
invariant(isAutomergeObject(text));
|
|
36
|
+
const obj = text as any as AutomergeTextCompat;
|
|
37
|
+
const doc = getRawDoc(obj, [obj.field]);
|
|
38
|
+
|
|
39
|
+
const awarenessProvider =
|
|
40
|
+
space &&
|
|
41
|
+
new SpaceAwarenessProvider({
|
|
42
|
+
space,
|
|
43
|
+
channel: `automerge.awareness.${obj.id}`,
|
|
44
|
+
info: {
|
|
45
|
+
displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
|
|
46
|
+
color: cursorColor.color,
|
|
47
|
+
lightColor: cursorColor.light,
|
|
48
|
+
},
|
|
49
|
+
peerId: identity?.identityKey.toHex() ?? 'Anonymous',
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const model: EditorModel = {
|
|
53
|
+
id: obj.id,
|
|
54
|
+
content: doc,
|
|
55
|
+
text: () => get(doc.handle.docSync(), doc.path),
|
|
56
|
+
extension: [
|
|
57
|
+
modelState.init(() => model),
|
|
58
|
+
automerge({ handle: doc.handle, path: doc.path }),
|
|
59
|
+
awarenessProvider && AwarenessProvider.of(awarenessProvider),
|
|
60
|
+
awareness(),
|
|
61
|
+
].filter(isNotNullOrUndefined),
|
|
62
|
+
peer: identity
|
|
63
|
+
? {
|
|
64
|
+
id: identity.identityKey.toHex(),
|
|
65
|
+
name: identity.profile?.displayName,
|
|
66
|
+
}
|
|
67
|
+
: undefined,
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
return model;
|
|
37
71
|
};
|
package/src/styles/markdown.ts
CHANGED
|
@@ -8,18 +8,17 @@ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
8
8
|
|
|
9
9
|
// TODO(burdon): Better way to align vertically than negative margin? Font-specific?
|
|
10
10
|
// https://tailwindcss.com/docs/font-weight
|
|
11
|
-
export const headings: Record<HeadingLevel, string
|
|
12
|
-
1:
|
|
13
|
-
2:
|
|
14
|
-
3:
|
|
15
|
-
4:
|
|
16
|
-
5:
|
|
17
|
-
6:
|
|
11
|
+
export const headings: Record<HeadingLevel, string> = {
|
|
12
|
+
1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
|
|
13
|
+
2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
|
|
14
|
+
3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
|
|
15
|
+
4: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-xl',
|
|
16
|
+
5: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-lg',
|
|
17
|
+
6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
export const heading = (level: HeadingLevel
|
|
21
|
-
|
|
22
|
-
return mx(style, readonly && offset);
|
|
20
|
+
export const heading = (level: HeadingLevel) => {
|
|
21
|
+
return headings[level];
|
|
23
22
|
};
|
|
24
23
|
|
|
25
24
|
export const text = 'text-neutral-800 dark:text-neutral-200';
|
package/src/themes/default.ts
CHANGED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { type StoryObj } from '@storybook/html';
|
|
2
|
-
import { Client, type PublicKey } from '@dxos/react-client';
|
|
3
|
-
declare const _default: {
|
|
4
|
-
title: string;
|
|
5
|
-
};
|
|
6
|
-
export default _default;
|
|
7
|
-
export declare const Default: StoryObj<{
|
|
8
|
-
id: number;
|
|
9
|
-
client: Client;
|
|
10
|
-
spaceKey: PublicKey;
|
|
11
|
-
}>;
|
|
12
|
-
//# sourceMappingURL=codemirror.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"codemirror.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/codemirror.stories.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;AAU5D,wBAEE;AAqEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAoBjF,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import '@dxosTheme';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const _default: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: React.ForwardRefExoticComponent<import("./TextEditor").TextEditorProps & React.RefAttributes<import("@codemirror/view").EditorView>>;
|
|
6
|
-
decorators: import("@storybook/react").Decorator[];
|
|
7
|
-
};
|
|
8
|
-
export default _default;
|
|
9
|
-
export declare const Default: {
|
|
10
|
-
render: () => JSX.Element;
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=yjs.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"yjs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/yjs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;AAWxC,wBAIE;AA+BF,eAAO,MAAM,OAAO;;CAGnB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../src/extensions/code.ts"],"names":[],"mappings":"AAsDA,eAAO,MAAM,IAAI,+CAiDhB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hr.d.ts","sourceRoot":"","sources":["../../../../src/extensions/hr.ts"],"names":[],"mappings":"AAmDA,eAAO,MAAM,EAAE,+CAoBd,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/extensions/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAG/G,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA8BlD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/extensions/link.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,mBAAmB,CAAC;AAkBpE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,aAAa,WAAW,KAAQ,SAsDhD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/extensions/table.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AASnH,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,eAAO,MAAM,KAAK,aAAa,YAAY,8BAM1C,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tasklist.d.ts","sourceRoot":"","sources":["../../../../src/extensions/tasklist.ts"],"names":[],"mappings":"AAsFA,MAAM,MAAM,eAAe,GAAG,EAAE,CAAC;AAEjC,eAAO,MAAM,QAAQ,aAAa,eAAe,4CAsBhD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/yjs/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAIzB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAEjD,eAAO,MAAM,eAAe,SAAU,MAAM,KAAG,eAW7C,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/yjs/index.ts"],"names":[],"mappings":"AAIA,cAAc,OAAO,CAAC"}
|