@dxos/react-ui-editor 0.3.11-main.00a28cb → 0.3.11-main.0252f93
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 +1304 -1092
- 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 +12 -17
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts +13 -5
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +1 -1
- package/dist/types/src/components/TextEditor/comments.stories.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.d.ts +9 -0
- package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -0
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +14 -0
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -0
- package/dist/types/src/extensions/autocomplete.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/automerge.spec.d.ts +2 -0
- package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/automerge.test.d.ts +2 -0
- package/dist/types/src/extensions/automerge/automerge.test.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/defs.d.ts +8 -10
- package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/semaphore.d.ts +7 -6
- package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/update-automerge.d.ts +2 -2
- package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
- package/dist/types/src/extensions/awareness.d.ts +2 -2
- package/dist/types/src/extensions/awareness.d.ts.map +1 -1
- package/dist/types/src/extensions/basic.d.ts +4 -5
- package/dist/types/src/extensions/basic.d.ts.map +1 -1
- package/dist/types/src/extensions/comments.d.ts +23 -15
- package/dist/types/src/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/extensions/cursor.d.ts +3 -3
- package/dist/types/src/extensions/cursor.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 +3 -6
- 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/formatting.d.ts +11 -0
- package/dist/types/src/extensions/markdown/formatting.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 +8 -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 +3 -0
- package/dist/types/src/extensions/markdown/tasklist.d.ts.map +1 -0
- package/dist/types/src/extensions/mention.d.ts.map +1 -1
- 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 +25 -0
- package/dist/types/src/hooks/defs.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +3 -2
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useActionHandler.d.ts +4 -0
- package/dist/types/src/hooks/useActionHandler.d.ts.map +1 -0
- 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 +2 -27
- 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/dist/types/src/util.d.ts +2 -0
- package/dist/types/src/util.d.ts.map +1 -1
- package/package.json +45 -36
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +64 -75
- package/src/components/TextEditor/TextEditor.tsx +103 -71
- package/src/components/TextEditor/comments.stories.tsx +46 -44
- package/src/components/Toolbar/Toolbar.stories.tsx +86 -0
- package/src/components/Toolbar/Toolbar.tsx +115 -0
- package/src/extensions/autocomplete.ts +6 -3
- package/src/extensions/automerge/automerge.spec.tsx +76 -0
- package/src/extensions/automerge/automerge.test.ts +13 -0
- package/src/extensions/automerge/automerge.ts +50 -39
- package/src/extensions/automerge/cursor.ts +3 -3
- package/src/extensions/automerge/defs.ts +11 -36
- package/src/extensions/automerge/semaphore.ts +31 -28
- package/src/extensions/automerge/update-automerge.ts +14 -8
- package/src/extensions/automerge/update-codemirror.ts +5 -5
- package/src/extensions/awareness.ts +17 -17
- package/src/extensions/basic.ts +22 -17
- package/src/extensions/comments.ts +247 -179
- package/src/extensions/cursor.ts +7 -3
- package/src/extensions/index.ts +0 -7
- package/src/extensions/markdown/bundle.ts +20 -30
- package/src/extensions/markdown/code.ts +142 -0
- package/src/extensions/markdown/formatting.ts +159 -0
- package/src/extensions/markdown/heading.ts +59 -0
- package/src/extensions/markdown/highlight.ts +9 -15
- package/src/extensions/markdown/hr.ts +71 -0
- package/src/extensions/markdown/index.ts +8 -0
- package/src/extensions/{link.ts → markdown/link.ts} +5 -2
- package/src/extensions/{tasklist.ts → markdown/tasklist.ts} +48 -34
- package/src/extensions/mention.ts +9 -2
- package/src/hooks/awareness-provider.ts +24 -20
- package/src/hooks/defs.ts +42 -0
- package/src/hooks/index.ts +3 -2
- package/src/hooks/useActionHandler.ts +45 -0
- package/src/hooks/useTextEditor.ts +29 -0
- package/src/hooks/useTextModel.ts +49 -55
- package/src/styles/markdown.ts +9 -10
- package/src/themes/default.ts +1 -3
- package/src/util.ts +26 -3
- 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 +0 -7
- 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 -3
- package/dist/types/src/hooks/automerge.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs.d.ts +0 -27
- 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/hr.ts +0 -72
- 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 -52
- package/src/hooks/yjs.ts +0 -156
- 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/src/extensions/{image.ts → markdown/image.ts} +0 -0
- /package/src/extensions/{table.ts → markdown/table.ts} +0 -0
|
@@ -6,6 +6,19 @@ 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 '../../styles';
|
|
10
|
+
|
|
11
|
+
// TODO(burdon): Reconcile with theme.
|
|
12
|
+
const styles = EditorView.baseTheme({
|
|
13
|
+
'& .cm-task': {
|
|
14
|
+
color: getToken('extend.colors.blue.500'),
|
|
15
|
+
},
|
|
16
|
+
'& .cm-task-checkbox': {
|
|
17
|
+
marginLeft: '4px',
|
|
18
|
+
marginRight: '4px',
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
|
|
9
22
|
class CheckboxWidget extends WidgetType {
|
|
10
23
|
constructor(private _checked: boolean) {
|
|
11
24
|
super();
|
|
@@ -17,6 +30,7 @@ class CheckboxWidget extends WidgetType {
|
|
|
17
30
|
|
|
18
31
|
override toDOM(view: EditorView) {
|
|
19
32
|
const input = document.createElement('input');
|
|
33
|
+
input.className = 'cm-task-checkbox';
|
|
20
34
|
input.type = 'checkbox';
|
|
21
35
|
input.checked = this._checked;
|
|
22
36
|
if (view.state.readOnly) {
|
|
@@ -42,36 +56,8 @@ class CheckboxWidget extends WidgetType {
|
|
|
42
56
|
}
|
|
43
57
|
}
|
|
44
58
|
|
|
45
|
-
const
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
export type TasklistOptions = {};
|
|
49
|
-
|
|
50
|
-
export const tasklist = (options: TasklistOptions = {}) => {
|
|
51
|
-
return ViewPlugin.fromClass(
|
|
52
|
-
class {
|
|
53
|
-
decorations: DecorationSet;
|
|
54
|
-
|
|
55
|
-
constructor(view: EditorView) {
|
|
56
|
-
this.decorations = buildDecorations(view);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
update(update: ViewUpdate) {
|
|
60
|
-
if (update.docChanged || update.viewportChanged || update.selectionSet) {
|
|
61
|
-
this.decorations = buildDecorations(update.view);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
decorations: (v) => v.decorations,
|
|
67
|
-
// TODO(burdon): Is this still required?
|
|
68
|
-
provide: (plugin) =>
|
|
69
|
-
EditorView.atomicRanges.of((view) => {
|
|
70
|
-
return view.plugin(plugin)?.decorations || Decoration.none;
|
|
71
|
-
}),
|
|
72
|
-
},
|
|
73
|
-
);
|
|
74
|
-
};
|
|
59
|
+
const checkedDecoration = Decoration.replace({ widget: new CheckboxWidget(true) });
|
|
60
|
+
const uncheckedDecoration = Decoration.replace({ widget: new CheckboxWidget(false) });
|
|
75
61
|
|
|
76
62
|
const buildDecorations = (view: EditorView): DecorationSet => {
|
|
77
63
|
const builder = new RangeSetBuilder<Decoration>();
|
|
@@ -81,10 +67,13 @@ const buildDecorations = (view: EditorView): DecorationSet => {
|
|
|
81
67
|
for (const { from, to } of view.visibleRanges) {
|
|
82
68
|
syntaxTree(state).iterate({
|
|
83
69
|
enter: (node) => {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
70
|
+
if (node.name === 'TaskMarker') {
|
|
71
|
+
// Check if cursor is inside text.
|
|
72
|
+
if (cursor < node.from || cursor > node.to) {
|
|
73
|
+
const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
|
|
74
|
+
builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
|
|
75
|
+
builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
|
|
76
|
+
}
|
|
88
77
|
}
|
|
89
78
|
},
|
|
90
79
|
from,
|
|
@@ -94,3 +83,28 @@ const buildDecorations = (view: EditorView): DecorationSet => {
|
|
|
94
83
|
|
|
95
84
|
return builder.finish();
|
|
96
85
|
};
|
|
86
|
+
|
|
87
|
+
export type TasklistOptions = {};
|
|
88
|
+
|
|
89
|
+
export const tasklist = (options: TasklistOptions = {}) => {
|
|
90
|
+
return [
|
|
91
|
+
ViewPlugin.fromClass(
|
|
92
|
+
class {
|
|
93
|
+
decorations: DecorationSet;
|
|
94
|
+
constructor(view: EditorView) {
|
|
95
|
+
this.decorations = buildDecorations(view);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
update(update: ViewUpdate) {
|
|
99
|
+
if (update.docChanged || update.viewportChanged || update.selectionSet) {
|
|
100
|
+
this.decorations = buildDecorations(update.view);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
decorations: (value) => value.decorations,
|
|
106
|
+
},
|
|
107
|
+
),
|
|
108
|
+
styles,
|
|
109
|
+
];
|
|
110
|
+
};
|
|
@@ -9,18 +9,25 @@ export type MentionOptions = {
|
|
|
9
9
|
onSearch: (text: string) => string[];
|
|
10
10
|
};
|
|
11
11
|
|
|
12
|
+
// TODO(burdon): Can only have a single autocompletion. Merge configuration with autocomplete.
|
|
12
13
|
export const mention = ({ onSearch }: MentionOptions): Extension => {
|
|
13
14
|
return autocompletion({
|
|
15
|
+
// TODO(burdon): Not working.
|
|
16
|
+
activateOnTyping: true,
|
|
17
|
+
// activateOnTypingDelay: 100,
|
|
18
|
+
// selectOnOpen: true,
|
|
14
19
|
closeOnBlur: false, // For debugging.
|
|
20
|
+
// defaultKeymap: false,
|
|
21
|
+
icons: false,
|
|
15
22
|
override: [
|
|
16
23
|
(context: CompletionContext): CompletionResult | null => {
|
|
24
|
+
console.log(context);
|
|
25
|
+
|
|
17
26
|
const match = context.matchBefore(/@(\w+)?/);
|
|
18
27
|
if (!match || (match.from === match.to && !context.explicit)) {
|
|
19
28
|
return null;
|
|
20
29
|
}
|
|
21
30
|
|
|
22
|
-
console.log(match);
|
|
23
|
-
|
|
24
31
|
return {
|
|
25
32
|
from: match.from,
|
|
26
33
|
options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({ label: `@${value}` })),
|
|
@@ -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();
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type Extension, StateField } from '@codemirror/state';
|
|
6
|
+
|
|
7
|
+
import { type DocAccessor } from '@dxos/echo-schema';
|
|
8
|
+
|
|
9
|
+
// Runtime data structure.
|
|
10
|
+
export type Range = {
|
|
11
|
+
from: number;
|
|
12
|
+
to: number;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
// Persistent data structure.
|
|
16
|
+
export type Comment = {
|
|
17
|
+
id: string;
|
|
18
|
+
cursor?: string;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export type EditorModel = {
|
|
22
|
+
id: string;
|
|
23
|
+
text: () => string;
|
|
24
|
+
extension?: Extension;
|
|
25
|
+
|
|
26
|
+
// TODO(burdon): Remove.
|
|
27
|
+
content: string | DocAccessor;
|
|
28
|
+
|
|
29
|
+
// TODO(burdon): Remove.
|
|
30
|
+
peer?: {
|
|
31
|
+
id: string;
|
|
32
|
+
name?: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* State field makes the model available to other extensions.
|
|
38
|
+
*/
|
|
39
|
+
export const modelState = StateField.define<EditorModel | undefined>({
|
|
40
|
+
create: () => undefined,
|
|
41
|
+
update: (model) => model,
|
|
42
|
+
});
|
package/src/hooks/index.ts
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
export * from './automerge';
|
|
6
5
|
export * from './awareness-provider';
|
|
7
|
-
export * from './
|
|
6
|
+
export * from './defs';
|
|
8
7
|
|
|
8
|
+
export * from './useActionHandler';
|
|
9
|
+
export * from './useTextEditor';
|
|
9
10
|
export * from './useTextModel';
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import type { EditorView } from '@codemirror/view';
|
|
6
|
+
|
|
7
|
+
import type { ToolbarProps } from '../components/Toolbar/Toolbar';
|
|
8
|
+
import { createComment, setHeading, toggleBold, toggleItalic, toggleList, toggleStrikethrough } from '../extensions';
|
|
9
|
+
|
|
10
|
+
export const useActionHandler = (view: EditorView | null): ToolbarProps['onAction'] => {
|
|
11
|
+
return (action) => {
|
|
12
|
+
if (!view) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
switch (action.type) {
|
|
17
|
+
case 'heading':
|
|
18
|
+
setHeading(parseInt(action.data))(view);
|
|
19
|
+
break;
|
|
20
|
+
|
|
21
|
+
case 'bold':
|
|
22
|
+
toggleBold(view);
|
|
23
|
+
break;
|
|
24
|
+
case 'italic':
|
|
25
|
+
toggleItalic(view);
|
|
26
|
+
break;
|
|
27
|
+
case 'strikethrough':
|
|
28
|
+
toggleStrikethrough(view);
|
|
29
|
+
break;
|
|
30
|
+
|
|
31
|
+
case 'list':
|
|
32
|
+
toggleList(view);
|
|
33
|
+
break;
|
|
34
|
+
|
|
35
|
+
case 'comment':
|
|
36
|
+
createComment(view);
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// TODO(burdon): Hack since otherwise focus doesn't leave heading selector.
|
|
41
|
+
setTimeout(() => {
|
|
42
|
+
view.focus();
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
};
|
|
@@ -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,55 +2,19 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import get from 'lodash.get';
|
|
6
6
|
import { useEffect, useState } from 'react';
|
|
7
|
-
import type * as YP from 'y-protocols/awareness';
|
|
8
7
|
|
|
9
|
-
import {
|
|
8
|
+
import { generateName } from '@dxos/display-name';
|
|
9
|
+
import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
|
|
10
|
+
import { invariant } from '@dxos/invariant';
|
|
11
|
+
import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
|
|
10
12
|
import { type Identity } from '@dxos/react-client/halo';
|
|
11
|
-
import type { YText, YXmlFragment } from '@dxos/text-model';
|
|
12
13
|
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* State field makes the model available to other extensions.
|
|
20
|
-
*/
|
|
21
|
-
export const modelState = StateField.define<EditorModel | undefined>({
|
|
22
|
-
create: () => undefined,
|
|
23
|
-
update: (model) => model,
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
export type Range = {
|
|
27
|
-
from: number;
|
|
28
|
-
to: number;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export type CommentRange = {
|
|
32
|
-
id: string;
|
|
33
|
-
cursor: string; // TODO(burdon): Rename range.
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
|
|
37
|
-
export type EditorModel = {
|
|
38
|
-
id: string;
|
|
39
|
-
text: () => string;
|
|
40
|
-
extension?: Extension;
|
|
41
|
-
|
|
42
|
-
// TODO(burdon): Remove.
|
|
43
|
-
content: string | YText | YXmlFragment | DocAccessor;
|
|
44
|
-
|
|
45
|
-
// TODO(burdon): Move into extension.
|
|
46
|
-
awareness?: YP.Awareness;
|
|
47
|
-
|
|
48
|
-
// TODO(burdon): Remove.
|
|
49
|
-
peer?: {
|
|
50
|
-
id: string;
|
|
51
|
-
name?: string;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
14
|
+
import { SpaceAwarenessProvider } from './awareness-provider';
|
|
15
|
+
import { type EditorModel, modelState } from './defs';
|
|
16
|
+
import { automerge, awareness } from '../extensions';
|
|
17
|
+
import { cursorColor } from '../styles';
|
|
54
18
|
|
|
55
19
|
// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
|
|
56
20
|
export type UseTextModelProps = {
|
|
@@ -59,8 +23,6 @@ export type UseTextModelProps = {
|
|
|
59
23
|
text?: TextObject;
|
|
60
24
|
};
|
|
61
25
|
|
|
62
|
-
// TODO(burdon): Remove YJS/Automerge deps (from UI component -- create abstraction; incl. all ECHO/Space deps).
|
|
63
|
-
// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
|
|
64
26
|
export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
|
|
65
27
|
const { identity, space, text } = props;
|
|
66
28
|
const [model, setModel] = useState<EditorModel | undefined>();
|
|
@@ -68,13 +30,45 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
|
|
|
68
30
|
return model;
|
|
69
31
|
};
|
|
70
32
|
|
|
71
|
-
const createModel = (
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
33
|
+
const createModel = ({ space, identity, text }: UseTextModelProps) => {
|
|
34
|
+
invariant(isAutomergeObject(text));
|
|
35
|
+
const obj = text as any as AutomergeTextCompat;
|
|
36
|
+
const doc = getRawDoc(obj, [obj.field]);
|
|
37
|
+
|
|
38
|
+
const awarenessProvider =
|
|
39
|
+
space &&
|
|
40
|
+
new SpaceAwarenessProvider({
|
|
41
|
+
space,
|
|
42
|
+
channel: `automerge.awareness.${obj.id}`,
|
|
43
|
+
info: {
|
|
44
|
+
displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
|
|
45
|
+
color: cursorColor.color,
|
|
46
|
+
lightColor: cursorColor.light,
|
|
47
|
+
},
|
|
48
|
+
peerId: identity?.identityKey.toHex() ?? 'Anonymous',
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
const extensions = [
|
|
52
|
+
//
|
|
53
|
+
modelState.init(() => model),
|
|
54
|
+
automerge({ handle: doc.handle, path: doc.path }),
|
|
55
|
+
];
|
|
56
|
+
if (awarenessProvider) {
|
|
57
|
+
extensions.push(awareness(awarenessProvider));
|
|
79
58
|
}
|
|
59
|
+
|
|
60
|
+
const model: EditorModel = {
|
|
61
|
+
id: obj.id,
|
|
62
|
+
content: doc,
|
|
63
|
+
text: () => get(doc.handle.docSync(), doc.path),
|
|
64
|
+
extension: extensions,
|
|
65
|
+
peer: identity
|
|
66
|
+
? {
|
|
67
|
+
id: identity.identityKey.toHex(),
|
|
68
|
+
name: identity.profile?.displayName,
|
|
69
|
+
}
|
|
70
|
+
: undefined,
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
return model;
|
|
80
74
|
};
|
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
|
@@ -86,11 +86,9 @@ export const defaultTheme: ThemeStyles = {
|
|
|
86
86
|
//
|
|
87
87
|
'.cm-line': {
|
|
88
88
|
paddingInline: 0,
|
|
89
|
-
// TODO(burdon): Other values leave gaps between lines when highlighted.
|
|
90
|
-
// lineHeight: 'normal',
|
|
91
89
|
},
|
|
92
90
|
'.cm-activeLine': {
|
|
93
|
-
background: '
|
|
91
|
+
background: 'transparent',
|
|
94
92
|
},
|
|
95
93
|
|
|
96
94
|
//
|
package/src/util.ts
CHANGED
|
@@ -2,17 +2,40 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import type { Transaction } from '@codemirror/state';
|
|
6
|
+
|
|
5
7
|
import { log } from '@dxos/log';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
10
|
* CodeMirror callbacks swallow errors so wrap handlers.
|
|
9
11
|
*/
|
|
10
|
-
// TODO(burdon):
|
|
12
|
+
// TODO(burdon): EditorView.exceptionSink should catch errors.
|
|
11
13
|
export const callbackWrapper = <T extends Function>(fn: T): T =>
|
|
12
14
|
((...args: any[]) => {
|
|
13
15
|
try {
|
|
14
16
|
return fn(...args);
|
|
15
|
-
} catch (
|
|
16
|
-
log.catch(
|
|
17
|
+
} catch (err) {
|
|
18
|
+
log.catch(err);
|
|
17
19
|
}
|
|
18
20
|
}) as unknown as T;
|
|
21
|
+
|
|
22
|
+
export const logChanges = (trs: readonly Transaction[]) => {
|
|
23
|
+
const changes = trs
|
|
24
|
+
.flatMap((tr) => {
|
|
25
|
+
if (tr.changes.empty) {
|
|
26
|
+
return undefined;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const changes: any[] = [];
|
|
30
|
+
tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) =>
|
|
31
|
+
changes.push(JSON.stringify({ fromA, toA, fromB, toB, inserted: inserted.toString() })),
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
return changes;
|
|
35
|
+
})
|
|
36
|
+
.filter(Boolean);
|
|
37
|
+
|
|
38
|
+
if (changes.length) {
|
|
39
|
+
console.log('changes', changes);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
@@ -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":"AAsDA,eAAO,MAAM,EAAE,+CAiBd,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,7 +0,0 @@
|
|
|
1
|
-
import { ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
|
|
2
|
-
export type TasklistOptions = {};
|
|
3
|
-
export declare const tasklist: (options?: TasklistOptions) => ViewPlugin<{
|
|
4
|
-
decorations: DecorationSet;
|
|
5
|
-
update(update: ViewUpdate): void;
|
|
6
|
-
}>;
|
|
7
|
-
//# sourceMappingURL=tasklist.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tasklist.d.ts","sourceRoot":"","sources":["../../../../src/extensions/tasklist.ts"],"names":[],"mappings":"AAMA,OAAO,EAAsC,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAyCvH,MAAM,MAAM,eAAe,GAAG,EAAE,CAAC;AAEjC,eAAO,MAAM,QAAQ,aAAa,eAAe;;mBAS5B,UAAU;EAe9B,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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"yjs.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/yjs/yjs.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK9C,eAAO,MAAM,GAAG,YAAa,KAAK,cAAc,GAAG,SAAS,4CAG3D,CAAC"}
|