@dxos/react-ui-editor 0.3.11-main.2e1a8e1 → 0.3.11-main.2f1331c
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 +1365 -925
- 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 +1 -2
- 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/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.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/package.json +39 -29
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +15 -19
- package/src/components/TextEditor/TextEditor.tsx +45 -25
- package/src/components/TextEditor/automerge.stories.tsx +1 -2
- package/src/components/TextEditor/comments.stories.tsx +8 -8
- 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 -10
- package/src/extensions/automerge/cursor.ts +3 -3
- package/src/extensions/automerge/defs.ts +9 -9
- package/src/extensions/automerge/semaphore.ts +17 -19
- package/src/extensions/automerge/update-automerge.ts +12 -6
- package/src/extensions/automerge/update-codemirror.ts +5 -5
- package/src/extensions/awareness.ts +17 -34
- package/src/extensions/basic.ts +17 -15
- 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} +5 -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 +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 +48 -11
- package/src/styles/markdown.ts +9 -10
- package/src/themes/default.ts +4 -4
- 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.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,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 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';
|
|
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,45 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
|
|
|
25
30
|
return model;
|
|
26
31
|
};
|
|
27
32
|
|
|
28
|
-
const createModel = (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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));
|
|
36
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;
|
|
37
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
|
@@ -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': {
|
|
@@ -86,11 +88,9 @@ export const defaultTheme: ThemeStyles = {
|
|
|
86
88
|
//
|
|
87
89
|
'.cm-line': {
|
|
88
90
|
paddingInline: 0,
|
|
89
|
-
// TODO(burdon): Other values leave gaps between lines when highlighted.
|
|
90
|
-
// lineHeight: 'normal',
|
|
91
91
|
},
|
|
92
92
|
'.cm-activeLine': {
|
|
93
|
-
background: '
|
|
93
|
+
background: 'transparent',
|
|
94
94
|
},
|
|
95
95
|
|
|
96
96
|
//
|
|
@@ -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 +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"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { Observable } from 'lib0/observable';
|
|
2
|
-
import * as YP from 'y-protocols/awareness';
|
|
3
|
-
import { type Doc } from 'yjs';
|
|
4
|
-
import { type Space } from '@dxos/react-client/echo';
|
|
5
|
-
import { type EditorModel } from './defs';
|
|
6
|
-
import { type UseTextModelProps } from './useTextModel';
|
|
7
|
-
export declare const createYjsModel: ({ identity, space, text }: UseTextModelProps) => EditorModel;
|
|
8
|
-
/**
|
|
9
|
-
* Yjs awareness provider on top of a DXOS space.
|
|
10
|
-
*/
|
|
11
|
-
export declare class YAwarenessProvider extends Observable<any> {
|
|
12
|
-
private readonly _space;
|
|
13
|
-
private readonly _awareness;
|
|
14
|
-
private readonly _clientId;
|
|
15
|
-
private readonly _channel;
|
|
16
|
-
constructor({ space, doc, channel, awareness, }: {
|
|
17
|
-
space: Space;
|
|
18
|
-
doc: Doc;
|
|
19
|
-
channel: string;
|
|
20
|
-
awareness?: YP.Awareness;
|
|
21
|
-
});
|
|
22
|
-
get awareness(): YP.Awareness;
|
|
23
|
-
private _handleAwarenessUpdate;
|
|
24
|
-
private _handleSpaceMessage;
|
|
25
|
-
private _readMessage;
|
|
26
|
-
private _handleBeforeUnload;
|
|
27
|
-
}
|
|
28
|
-
//# sourceMappingURL=yjs.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"yjs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/yjs.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAI/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAIrD,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,QAAQ,CAAC;AACtD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,eAAO,MAAM,cAAc,8BAA+B,iBAAiB,KAAG,WAqB7E,CAAC;AAOF;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACrD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAC1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,EACV,KAAK,EACL,GAAG,EACH,OAAO,EACP,SAAS,GACV,EAAE;QACD,KAAK,EAAE,KAAK,CAAC;QACb,GAAG,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC;KAC1B;IA4BD,IAAI,SAAS,IAAI,EAAE,CAAC,SAAS,CAE5B;IAED,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;CAG5B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @generated @dxos/echo-typegen src/testing/proto/schema.proto
|
|
3
|
-
**/
|
|
4
|
-
import * as dxos_echo_schema from "@dxos/echo-schema";
|
|
5
|
-
export declare const types: dxos_echo_schema.TypeCollection;
|
|
6
|
-
export type EditorDocumentProps = {
|
|
7
|
-
content: dxos_echo_schema.Text;
|
|
8
|
-
};
|
|
9
|
-
export declare class EditorDocument extends dxos_echo_schema.TypedObject<EditorDocumentProps> {
|
|
10
|
-
static readonly schema: dxos_echo_schema.Schema;
|
|
11
|
-
static filter(filter?: Partial<EditorDocumentProps> | dxos_echo_schema.OperatorFilter<EditorDocument>): dxos_echo_schema.Filter<EditorDocument>;
|
|
12
|
-
constructor(initValues?: Partial<EditorDocumentProps>, opts?: dxos_echo_schema.TypedObjectOptions);
|
|
13
|
-
content: dxos_echo_schema.Text;
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=schema.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../../../src/testing/proto/gen/schema.ts"],"names":[],"mappings":"AAAA;;IAEI;AAEJ,OAAO,KAAK,gBAAgB,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,KAAK,iCAAwC,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC;CAChC,CAAC;AAEF,qBAAa,cAAe,SAAQ,gBAAgB,CAAC,WAAW,CAAC,mBAAmB,CAAC;IACnF,gBAAwB,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAExD,MAAM,CAAC,MAAM,CACX,MAAM,CAAC,EACH,OAAO,CAAC,mBAAmB,CAAC,GAC5B,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,GAClD,gBAAgB,CAAC,MAAM,CAAC,cAAc,CAAC;gBAQxC,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,EACzC,IAAI,CAAC,EAAE,gBAAgB,CAAC,kBAAkB;IAIpC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC;CACxC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/proto/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Observable } from 'lib0/observable';
|
|
2
|
-
import * as YP from 'y-protocols/awareness';
|
|
3
|
-
import { Doc } from 'yjs';
|
|
4
|
-
import { Event } from '@dxos/async';
|
|
5
|
-
import { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
|
|
6
|
-
import { type EditorModel } from '../hooks';
|
|
7
|
-
type Awareness = YP.Awareness;
|
|
8
|
-
/**
|
|
9
|
-
* Yjs awareness provider in-memory.
|
|
10
|
-
*/
|
|
11
|
-
export declare class AwarenessProvider extends Observable<any> {
|
|
12
|
-
private readonly _remoteUpdate;
|
|
13
|
-
private readonly _awareness;
|
|
14
|
-
private readonly _doc;
|
|
15
|
-
constructor({ update, doc, awareness }: {
|
|
16
|
-
update: Event<Uint8Array>;
|
|
17
|
-
doc: Doc;
|
|
18
|
-
awareness?: Awareness;
|
|
19
|
-
});
|
|
20
|
-
get awareness(): Awareness;
|
|
21
|
-
private _handleDocUpdate;
|
|
22
|
-
private _handleAwarenessUpdate;
|
|
23
|
-
private _handleRemoteUpdate;
|
|
24
|
-
private _readMessage;
|
|
25
|
-
private _handleBeforeUnload;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* This mocks the replication across the swarm.
|
|
29
|
-
*/
|
|
30
|
-
export declare class Replicator {
|
|
31
|
-
private readonly _kind;
|
|
32
|
-
private readonly _update;
|
|
33
|
-
private _peers;
|
|
34
|
-
constructor(_kind: TextKind);
|
|
35
|
-
setPeers(peers: EditorModel[]): void;
|
|
36
|
-
createPeer: (id: string, doc?: Doc) => EditorModel;
|
|
37
|
-
}
|
|
38
|
-
export type UseYjsModelOptions = {
|
|
39
|
-
replicator: Replicator;
|
|
40
|
-
id: string;
|
|
41
|
-
doc?: Doc;
|
|
42
|
-
};
|
|
43
|
-
export declare const useYjsModel: ({ replicator, id, doc }: UseYjsModelOptions) => EditorModel;
|
|
44
|
-
export {};
|
|
45
|
-
//# sourceMappingURL=replicator.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC;AAM9B;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA4BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
|
6
|
-
import { EditorState } from '@codemirror/state';
|
|
7
|
-
import { EditorView } from '@codemirror/view';
|
|
8
|
-
import { type StoryObj } from '@storybook/html';
|
|
9
|
-
import { basicSetup } from 'codemirror';
|
|
10
|
-
import { yCollab } from 'y-codemirror.next';
|
|
11
|
-
|
|
12
|
-
import { EventSubscriptions } from '@dxos/async';
|
|
13
|
-
import { generateName } from '@dxos/display-name';
|
|
14
|
-
import { Client, type PublicKey } from '@dxos/react-client';
|
|
15
|
-
import { type Space, TextObject } from '@dxos/react-client/echo';
|
|
16
|
-
import { type Identity } from '@dxos/react-client/halo';
|
|
17
|
-
import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
|
|
18
|
-
import { YText } from '@dxos/text-model';
|
|
19
|
-
|
|
20
|
-
import { YAwarenessProvider } from '../../hooks';
|
|
21
|
-
import { cursorColor } from '../../styles';
|
|
22
|
-
import { EditorDocument, types as schema } from '../../testing';
|
|
23
|
-
|
|
24
|
-
export default {
|
|
25
|
-
title: 'CodeMirror',
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
const testBuilder = new TestBuilder();
|
|
29
|
-
const views: Record<number, EditorView> = {};
|
|
30
|
-
const subscriptions = new EventSubscriptions();
|
|
31
|
-
|
|
32
|
-
const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identity, space: Space, text: TextObject) => {
|
|
33
|
-
const doc = text.doc;
|
|
34
|
-
const ytext = text.content;
|
|
35
|
-
if (!(ytext instanceof YText) || !doc) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const { awareness } = new YAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
|
|
40
|
-
awareness.setLocalStateField('user', {
|
|
41
|
-
name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
|
|
42
|
-
// TODO(wittjosiah): Pick colours from theme based on identity key.
|
|
43
|
-
color: cursorColor.color,
|
|
44
|
-
colorLight: cursorColor.light,
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
const state = EditorState.create({
|
|
48
|
-
doc: ytext.toString(),
|
|
49
|
-
extensions: [basicSetup, markdown({ base: markdownLanguage }), yCollab(ytext, awareness)],
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
const view = views[id];
|
|
53
|
-
if (view) {
|
|
54
|
-
view.setState(state);
|
|
55
|
-
} else {
|
|
56
|
-
views[id] = new EditorView({ state, parent: editor });
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
if (id === 0) {
|
|
60
|
-
subscriptions.clear();
|
|
61
|
-
subscriptions.add(textGenerator({ text: ytext }));
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
const setupEditor = async (id: number, client: Client, spaceKey: PublicKey, editor: HTMLDivElement) => {
|
|
66
|
-
const space = await client.spaces.get(spaceKey)!;
|
|
67
|
-
const query = space.db.query(EditorDocument.filter());
|
|
68
|
-
query.subscribe(({ objects }) => {
|
|
69
|
-
const text = objects[0]?.content;
|
|
70
|
-
void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
const text = query.objects[0]?.content;
|
|
74
|
-
void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
const setupSpace = async (count: number) => {
|
|
78
|
-
const clients = [...Array(count)].map(() => new Client({ services: testBuilder.createLocal() }));
|
|
79
|
-
await Promise.all(clients.map((client) => client.initialize()));
|
|
80
|
-
await Promise.all(clients.map((client) => client.halo.createIdentity()));
|
|
81
|
-
clients.map((client) => client.spaces.addSchema(schema));
|
|
82
|
-
|
|
83
|
-
const space = await clients[0].spaces.create();
|
|
84
|
-
const text = new TextObject('Hello, Storybook!');
|
|
85
|
-
const document = new EditorDocument({ content: text });
|
|
86
|
-
await space.db.add(document);
|
|
87
|
-
|
|
88
|
-
await joinCommonSpace(clients, space.key);
|
|
89
|
-
|
|
90
|
-
return { clients, spaceKey: space.key };
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
const count = 2;
|
|
94
|
-
|
|
95
|
-
export const Default: StoryObj<{ id: number; client: Client; spaceKey: PublicKey }> = {
|
|
96
|
-
render: ({ id, client, spaceKey }) => {
|
|
97
|
-
const editor = document.createElement('div');
|
|
98
|
-
editor.setAttribute('style', 'min-width: 0; flex: 1; padding: 1rem;');
|
|
99
|
-
void setupEditor(id, client, spaceKey, editor);
|
|
100
|
-
return editor;
|
|
101
|
-
},
|
|
102
|
-
decorators: [
|
|
103
|
-
(story) => {
|
|
104
|
-
const container = document.createElement('div');
|
|
105
|
-
container.setAttribute('style', 'display: flex; justify-content: space-evenly');
|
|
106
|
-
void setupSpace(count).then(({ clients, spaceKey }) => {
|
|
107
|
-
clients.forEach((client, id) => {
|
|
108
|
-
// TODO(wittjosiah): According to the docs these types should be compatible.
|
|
109
|
-
container.appendChild(story({ args: { id, client, spaceKey } }) as HTMLElement);
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
return container;
|
|
113
|
-
},
|
|
114
|
-
],
|
|
115
|
-
};
|