@dxos/react-ui-editor 0.3.11-main.c244d7e → 0.3.11-main.c865ffb
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 +1385 -929
- 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 +7 -11
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts +3 -2
- 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/automerge.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/{yjs.stories.d.ts → hooks.stories.d.ts} +13 -2
- package/dist/types/src/components/TextEditor/hooks.stories.d.ts.map +1 -0
- package/dist/types/src/components/Toolbar/Toolbar.d.ts +25 -0
- package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -0
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +23 -0
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -0
- package/dist/types/src/components/Toolbar/index.d.ts +2 -0
- package/dist/types/src/components/Toolbar/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.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 +5 -5
- package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/semaphore.d.ts +2 -1
- package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
- package/dist/types/src/extensions/awareness.d.ts +2 -4
- 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 +9 -5
- 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/formatting.d.ts +13 -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.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 +1 -4
- package/dist/types/src/hooks/defs.d.ts.map +1 -1
- 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/useEditorView.d.ts +17 -0
- package/dist/types/src/hooks/useEditorView.d.ts.map +1 -0
- package/dist/types/src/hooks/useTextEditor.d.ts +39 -0
- package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -0
- package/dist/types/src/hooks/useTextModel.d.ts +12 -0
- package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/src/index.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 +46 -36
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +41 -46
- package/src/components/TextEditor/TextEditor.tsx +46 -27
- package/src/components/TextEditor/automerge.stories.tsx +1 -2
- package/src/components/TextEditor/hooks.stories.tsx +106 -0
- package/src/components/Toolbar/Toolbar.stories.tsx +90 -0
- package/src/components/Toolbar/Toolbar.tsx +166 -0
- package/src/components/Toolbar/index.ts +5 -0
- package/src/components/index.ts +1 -0
- package/src/extensions/automerge/automerge.spec.tsx +76 -0
- package/src/extensions/automerge/automerge.test.ts +13 -0
- package/src/extensions/automerge/automerge.ts +44 -11
- package/src/extensions/automerge/cursor.ts +3 -3
- package/src/extensions/automerge/defs.ts +9 -9
- package/src/extensions/automerge/semaphore.ts +18 -24
- package/src/extensions/automerge/update-automerge.ts +12 -6
- package/src/extensions/automerge/update-codemirror.ts +5 -5
- package/src/extensions/awareness.ts +21 -35
- package/src/extensions/basic.ts +17 -15
- package/src/extensions/blast.ts +4 -1
- package/src/extensions/comments.ts +126 -78
- package/src/extensions/index.ts +0 -7
- package/src/extensions/markdown/bundle.ts +9 -8
- package/src/extensions/markdown/code.ts +150 -0
- package/src/extensions/markdown/formatting.ts +188 -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 +8 -0
- package/src/extensions/{link.ts → markdown/link.ts} +13 -4
- package/src/extensions/{tasklist.ts → markdown/tasklist.ts} +2 -3
- package/src/extensions/mention.ts +6 -4
- package/src/hooks/awareness-provider.ts +24 -20
- package/src/hooks/defs.ts +1 -6
- package/src/hooks/index.ts +3 -2
- package/src/hooks/useActionHandler.ts +62 -0
- package/src/hooks/useEditorView.ts +29 -0
- package/src/hooks/useTextEditor.ts +153 -0
- package/src/hooks/useTextModel.ts +65 -12
- package/src/index.ts +1 -1
- package/src/styles/markdown.ts +9 -10
- package/src/themes/default.ts +9 -6
- 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/comments.stories.d.ts +0 -26
- package/dist/types/src/components/TextEditor/comments.stories.d.ts.map +0 -1
- 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/comments.stories.tsx +0 -357
- 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
|
@@ -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
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
export * from './automerge';
|
|
6
5
|
export * from './awareness-provider';
|
|
7
6
|
export * from './defs';
|
|
8
|
-
export * from './yjs';
|
|
9
7
|
|
|
8
|
+
export * from './useActionHandler';
|
|
9
|
+
export * from './useEditorView';
|
|
10
|
+
export * from './useTextEditor';
|
|
10
11
|
export * from './useTextModel';
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import type { EditorView } from '@codemirror/view';
|
|
6
|
+
|
|
7
|
+
import type { ToolbarProps } from '../components';
|
|
8
|
+
import {
|
|
9
|
+
createComment,
|
|
10
|
+
insertCodeblock,
|
|
11
|
+
insertTable,
|
|
12
|
+
setHeading,
|
|
13
|
+
toggleBold,
|
|
14
|
+
toggleItalic,
|
|
15
|
+
toggleList,
|
|
16
|
+
toggleStrikethrough,
|
|
17
|
+
} from '../extensions';
|
|
18
|
+
|
|
19
|
+
export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
|
|
20
|
+
return (action) => {
|
|
21
|
+
if (!view) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
switch (action.type) {
|
|
26
|
+
case 'heading':
|
|
27
|
+
setHeading(parseInt(action.data))(view);
|
|
28
|
+
break;
|
|
29
|
+
|
|
30
|
+
case 'bold':
|
|
31
|
+
toggleBold(view);
|
|
32
|
+
break;
|
|
33
|
+
case 'italic':
|
|
34
|
+
toggleItalic(view);
|
|
35
|
+
break;
|
|
36
|
+
case 'strikethrough':
|
|
37
|
+
toggleStrikethrough(view);
|
|
38
|
+
break;
|
|
39
|
+
|
|
40
|
+
case 'list':
|
|
41
|
+
toggleList(view);
|
|
42
|
+
break;
|
|
43
|
+
|
|
44
|
+
case 'codeblock':
|
|
45
|
+
insertCodeblock(view);
|
|
46
|
+
break;
|
|
47
|
+
case 'table':
|
|
48
|
+
insertTable(view);
|
|
49
|
+
break;
|
|
50
|
+
|
|
51
|
+
case 'comment':
|
|
52
|
+
createComment(view);
|
|
53
|
+
break;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// TODO(burdon): Hack otherwise remains on heading selector.
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
view.focus();
|
|
59
|
+
view.dispatch({ selection: view.state.selection });
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
};
|
|
@@ -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] = useEditorView();
|
|
14
|
+
* useEffect(() => {
|
|
15
|
+
* editorView?.focus();
|
|
16
|
+
* }, [editorView]);
|
|
17
|
+
* return <TextEditor ref={editorRef} />;
|
|
18
|
+
* };
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export const useEditorView = (): [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
|
+
};
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import {
|
|
6
|
+
EditorSelection,
|
|
7
|
+
EditorState,
|
|
8
|
+
type EditorStateConfig,
|
|
9
|
+
type Extension,
|
|
10
|
+
type StateEffect,
|
|
11
|
+
} from '@codemirror/state';
|
|
12
|
+
import { EditorView } from '@codemirror/view';
|
|
13
|
+
import { type RefObject, useEffect, useRef, useState } from 'react';
|
|
14
|
+
|
|
15
|
+
import { log } from '@dxos/log';
|
|
16
|
+
import { type ThemeMode } from '@dxos/react-ui';
|
|
17
|
+
import { isNotFalsy } from '@dxos/util';
|
|
18
|
+
|
|
19
|
+
import { type ThemeStyles } from '..//styles';
|
|
20
|
+
import { defaultTheme } from '../themes';
|
|
21
|
+
import { logChanges } from '../util';
|
|
22
|
+
|
|
23
|
+
export type UseTextEditorOptions = {
|
|
24
|
+
autoFocus?: boolean;
|
|
25
|
+
scrollTo?: StateEffect<any>;
|
|
26
|
+
debug?: boolean;
|
|
27
|
+
} & EditorStateConfig;
|
|
28
|
+
|
|
29
|
+
export type UseTextEditor = {
|
|
30
|
+
parentRef: RefObject<HTMLDivElement>;
|
|
31
|
+
view?: EditorView;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Hook for creating editor.
|
|
36
|
+
*/
|
|
37
|
+
export const useTextEditor = ({
|
|
38
|
+
autoFocus,
|
|
39
|
+
scrollTo,
|
|
40
|
+
debug,
|
|
41
|
+
doc,
|
|
42
|
+
selection,
|
|
43
|
+
extensions,
|
|
44
|
+
}: UseTextEditorOptions = {}): UseTextEditor => {
|
|
45
|
+
const onUpdate = useRef<() => void>();
|
|
46
|
+
const [view, setView] = useState<EditorView>();
|
|
47
|
+
const parentRef = useRef<HTMLDivElement>(null);
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (parentRef.current) {
|
|
50
|
+
// https://codemirror.net/docs/ref/#state.EditorStateConfig
|
|
51
|
+
const state = EditorState.create({
|
|
52
|
+
doc,
|
|
53
|
+
selection,
|
|
54
|
+
extensions: [
|
|
55
|
+
// TODO(burdon): Doesn't catch errors in keymap functions.
|
|
56
|
+
EditorView.exceptionSink.of((err) => {
|
|
57
|
+
log.catch(err);
|
|
58
|
+
}),
|
|
59
|
+
extensions,
|
|
60
|
+
EditorView.updateListener.of(() => {
|
|
61
|
+
onUpdate.current?.();
|
|
62
|
+
}),
|
|
63
|
+
].filter(isNotFalsy),
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
// https://codemirror.net/docs/ref/#view.EditorViewConfig
|
|
67
|
+
const view = new EditorView({
|
|
68
|
+
parent: parentRef.current,
|
|
69
|
+
scrollTo,
|
|
70
|
+
state,
|
|
71
|
+
// NOTE: Uncomment to debug/monitor all transactions.
|
|
72
|
+
// https://codemirror.net/docs/ref/#view.EditorView.dispatch
|
|
73
|
+
dispatchTransactions: (trs, view) => {
|
|
74
|
+
if (debug) {
|
|
75
|
+
logChanges(trs);
|
|
76
|
+
}
|
|
77
|
+
view.update(trs);
|
|
78
|
+
},
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
setView(view);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return () => {
|
|
85
|
+
view?.destroy();
|
|
86
|
+
};
|
|
87
|
+
}, [parentRef]);
|
|
88
|
+
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (view) {
|
|
91
|
+
// Select end of line if not specified.
|
|
92
|
+
if (!selection && !view.state.selection.main.anchor) {
|
|
93
|
+
selection = EditorSelection.single(view.state.doc.line(1).to);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Set selection after first update (since content may rerender on focus).
|
|
97
|
+
// TODO(burdon): BUG on first render may appear in middle of formatted heading.
|
|
98
|
+
// TODO(burdon): Make invisible until first render?
|
|
99
|
+
if (selection || scrollTo) {
|
|
100
|
+
onUpdate.current = () => {
|
|
101
|
+
onUpdate.current = undefined;
|
|
102
|
+
view.dispatch({ selection, effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
if (autoFocus) {
|
|
107
|
+
view.focus();
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}, [view, autoFocus, selection, scrollTo]);
|
|
111
|
+
|
|
112
|
+
return { parentRef, view };
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
// TODO(burdon): Factor out extension factories.
|
|
116
|
+
|
|
117
|
+
export type DataExtensionsOptions = {
|
|
118
|
+
readonly?: boolean;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
// TODO(burdon): Pass in TextObject (remove model).
|
|
122
|
+
export const createDataExtensions = ({ readonly = false } = {}): Extension => {
|
|
123
|
+
return [
|
|
124
|
+
//
|
|
125
|
+
EditorState.readOnly.of(readonly),
|
|
126
|
+
EditorView.editable.of(!readonly),
|
|
127
|
+
];
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
export type ThemeExtensionsOptions = {
|
|
131
|
+
theme?: ThemeStyles;
|
|
132
|
+
themeMode?: ThemeMode;
|
|
133
|
+
lineWrap?: boolean;
|
|
134
|
+
slots?: {
|
|
135
|
+
editor?: {
|
|
136
|
+
className?: string;
|
|
137
|
+
};
|
|
138
|
+
content?: {
|
|
139
|
+
className?: string;
|
|
140
|
+
};
|
|
141
|
+
};
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
|
|
145
|
+
return [
|
|
146
|
+
//
|
|
147
|
+
EditorView.baseTheme(defaultTheme),
|
|
148
|
+
theme && EditorView.theme(theme),
|
|
149
|
+
EditorView.darkTheme.of(themeMode === 'dark'),
|
|
150
|
+
EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
|
|
151
|
+
EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
|
|
152
|
+
].filter(isNotFalsy);
|
|
153
|
+
};
|
|
@@ -2,14 +2,19 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import get from 'lodash.get';
|
|
6
|
+
import { type Dispatch, type SetStateAction, 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';
|
|
9
13
|
|
|
10
|
-
import {
|
|
11
|
-
import { type EditorModel } from './defs';
|
|
12
|
-
import {
|
|
14
|
+
import { SpaceAwarenessProvider } from './awareness-provider';
|
|
15
|
+
import { type EditorModel, modelState } from './defs';
|
|
16
|
+
import { automerge, awareness } from '../extensions';
|
|
17
|
+
import { cursorColor } from '../styles';
|
|
13
18
|
|
|
14
19
|
// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
|
|
15
20
|
export type UseTextModelProps = {
|
|
@@ -25,13 +30,61 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
|
|
|
25
30
|
return model;
|
|
26
31
|
};
|
|
27
32
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
/**
|
|
34
|
+
* For use primarily in stories & tests so the dependence on TextObject can be avoided.
|
|
35
|
+
* @param id
|
|
36
|
+
* @param defaultContent
|
|
37
|
+
*/
|
|
38
|
+
export const useInMemoryTextModel = ({
|
|
39
|
+
id,
|
|
40
|
+
defaultContent,
|
|
41
|
+
}: {
|
|
42
|
+
id: string;
|
|
43
|
+
defaultContent?: string;
|
|
44
|
+
}): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
|
|
45
|
+
const [content, setContent] = useState(defaultContent ?? '');
|
|
46
|
+
return { id, content, setContent, text: () => content };
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const createModel = ({ space, identity, text }: UseTextModelProps) => {
|
|
50
|
+
invariant(isAutomergeObject(text));
|
|
51
|
+
const obj = text as any as AutomergeTextCompat;
|
|
52
|
+
const doc = getRawDoc(obj, [obj.field]);
|
|
53
|
+
|
|
54
|
+
const awarenessProvider =
|
|
55
|
+
space &&
|
|
56
|
+
new SpaceAwarenessProvider({
|
|
57
|
+
space,
|
|
58
|
+
channel: `automerge.awareness.${obj.id}`,
|
|
59
|
+
info: {
|
|
60
|
+
displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
|
|
61
|
+
color: cursorColor.color,
|
|
62
|
+
lightColor: cursorColor.light,
|
|
63
|
+
},
|
|
64
|
+
peerId: identity?.identityKey.toHex() ?? 'Anonymous',
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
const extensions = [
|
|
68
|
+
//
|
|
69
|
+
modelState.init(() => model),
|
|
70
|
+
automerge({ handle: doc.handle, path: doc.path }),
|
|
71
|
+
];
|
|
72
|
+
if (awarenessProvider) {
|
|
73
|
+
extensions.push(awareness(awarenessProvider));
|
|
36
74
|
}
|
|
75
|
+
|
|
76
|
+
const model: EditorModel = {
|
|
77
|
+
id: obj.id,
|
|
78
|
+
content: doc,
|
|
79
|
+
text: () => get(doc.handle.docSync(), doc.path),
|
|
80
|
+
extension: extensions,
|
|
81
|
+
peer: identity
|
|
82
|
+
? {
|
|
83
|
+
id: identity.identityKey.toHex(),
|
|
84
|
+
name: identity.profile?.displayName,
|
|
85
|
+
}
|
|
86
|
+
: undefined,
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
return model;
|
|
37
90
|
};
|
package/src/index.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
|
|
6
6
|
export { Doc, YText, YXmlFragment } from '@dxos/text-model';
|
|
7
7
|
export { type Extension } from '@codemirror/state';
|
|
8
|
-
export { type EditorView } from '@codemirror/view';
|
|
8
|
+
export { type EditorView, keymap } from '@codemirror/view';
|
|
9
9
|
|
|
10
10
|
export * from './components';
|
|
11
11
|
export * from './extensions';
|
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
|
@@ -49,9 +49,11 @@ export const defaultTheme: ThemeStyles = {
|
|
|
49
49
|
'&.cm-focused': {
|
|
50
50
|
outline: 'none',
|
|
51
51
|
},
|
|
52
|
+
|
|
52
53
|
'.cm-scroller': {
|
|
53
|
-
overflow: 'visible',
|
|
54
|
+
// overflow: 'visible',
|
|
54
55
|
fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
|
|
56
|
+
lineHeight: 1.4,
|
|
55
57
|
},
|
|
56
58
|
|
|
57
59
|
'.cm-content': {
|
|
@@ -77,8 +79,11 @@ export const defaultTheme: ThemeStyles = {
|
|
|
77
79
|
'&dark .cm-cursor, &dark .cm-dropCursor': {
|
|
78
80
|
borderLeft: '2px solid white',
|
|
79
81
|
},
|
|
80
|
-
'.cm-placeholder': {
|
|
81
|
-
|
|
82
|
+
'&light .cm-placeholder': {
|
|
83
|
+
color: get(tokens, 'extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
|
|
84
|
+
},
|
|
85
|
+
'&dark .cm-placeholder': {
|
|
86
|
+
color: get(tokens, 'extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
|
|
82
87
|
},
|
|
83
88
|
|
|
84
89
|
//
|
|
@@ -86,11 +91,9 @@ export const defaultTheme: ThemeStyles = {
|
|
|
86
91
|
//
|
|
87
92
|
'.cm-line': {
|
|
88
93
|
paddingInline: 0,
|
|
89
|
-
// TODO(burdon): Other values leave gaps between lines when highlighted.
|
|
90
|
-
// lineHeight: 'normal',
|
|
91
94
|
},
|
|
92
95
|
'.cm-activeLine': {
|
|
93
|
-
background: '
|
|
96
|
+
background: 'transparent',
|
|
94
97
|
},
|
|
95
98
|
|
|
96
99
|
//
|
|
@@ -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,26 +0,0 @@
|
|
|
1
|
-
import '@dxosTheme';
|
|
2
|
-
import { type EditorView } from '@codemirror/view';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
type StoryProps = {
|
|
5
|
-
text?: string;
|
|
6
|
-
autoCreate?: boolean;
|
|
7
|
-
};
|
|
8
|
-
declare const _default: {
|
|
9
|
-
title: string;
|
|
10
|
-
component: React.ForwardRefExoticComponent<import("./TextEditor").TextEditorProps & React.RefAttributes<EditorView>>;
|
|
11
|
-
decorators: import("@storybook/react").Decorator[];
|
|
12
|
-
render: (args: StoryProps) => JSX.Element;
|
|
13
|
-
};
|
|
14
|
-
export default _default;
|
|
15
|
-
export declare const Default: {
|
|
16
|
-
args: {
|
|
17
|
-
text: string;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
export declare const Testing: {
|
|
21
|
-
args: {
|
|
22
|
-
text: string;
|
|
23
|
-
autoCreate: boolean;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=comments.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"comments.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAG3D,OAAO,KAAwD,MAAM,OAAO,CAAC;AA6M7E,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;mBAoHe,UAAU;;AAJ3B,wBAKE;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"yjs.test.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/yjs/yjs.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"automerge.d.ts","sourceRoot":"","sources":["../../../../src/hooks/automerge.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,QAAQ,CAAC;AACtD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,oBAAoB,8BAA+B,iBAAiB,KAAG,WAqCnF,CAAC"}
|