@dxos/react-ui-editor 0.4.8-main.512e4c8 → 0.4.8-main.5cead28
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 +2722 -2630
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts +2 -2
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +2 -2
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/automerge.stories.d.ts.map +1 -1
- package/dist/types/src/{hooks → extensions/awareness}/awareness-provider.d.ts +1 -1
- package/dist/types/src/extensions/awareness/awareness-provider.d.ts.map +1 -0
- package/dist/types/src/extensions/awareness/awareness.d.ts.map +1 -0
- package/dist/types/src/extensions/awareness/index.d.ts +3 -0
- package/dist/types/src/extensions/awareness/index.d.ts.map +1 -0
- package/dist/types/src/extensions/comments.d.ts +1 -1
- package/dist/types/src/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/extensions/cursor.d.ts +1 -1
- package/dist/types/src/extensions/cursor.d.ts.map +1 -1
- package/dist/types/src/{hooks/extension-utils.d.ts → extensions/factories.d.ts} +2 -7
- package/dist/types/src/extensions/factories.d.ts.map +1 -0
- package/dist/types/src/extensions/index.d.ts +3 -0
- package/dist/types/src/extensions/index.d.ts.map +1 -1
- package/dist/types/src/extensions/modes.d.ts +1 -0
- package/dist/types/src/extensions/modes.d.ts.map +1 -1
- package/dist/types/src/extensions/state.d.ts +20 -0
- package/dist/types/src/extensions/state.d.ts.map +1 -0
- package/dist/types/src/{hooks/defs.d.ts → extensions/types.d.ts} +1 -1
- package/dist/types/src/extensions/types.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +1 -3
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useDocAccessor.d.ts +7 -0
- package/dist/types/src/hooks/useDocAccessor.d.ts.map +1 -0
- package/package.json +24 -27
- package/src/components/TextEditor/TextEditor.stories.tsx +21 -11
- package/src/components/TextEditor/TextEditor.tsx +11 -10
- package/src/components/Toolbar/Toolbar.stories.tsx +6 -10
- package/src/extensions/automerge/automerge.stories.tsx +2 -1
- package/src/{hooks → extensions/awareness}/awareness-provider.ts +1 -1
- package/src/extensions/{awareness.ts → awareness/awareness.ts} +1 -1
- package/src/extensions/awareness/index.ts +6 -0
- package/src/extensions/comments.ts +1 -1
- package/src/extensions/cursor.ts +1 -1
- package/src/{hooks/extension-utils.ts → extensions/factories.ts} +3 -21
- package/src/extensions/index.ts +3 -0
- package/src/extensions/markdown/decorate.ts +1 -1
- package/src/extensions/modes.ts +3 -1
- package/src/extensions/state.ts +90 -0
- package/src/{hooks/defs.ts → extensions/types.ts} +1 -0
- package/src/hooks/index.ts +1 -4
- package/src/hooks/useDocAccessor.ts +21 -0
- package/src/hooks/useTextEditor.stories.tsx +4 -4
- package/dist/types/src/extensions/awareness.d.ts.map +0 -1
- package/dist/types/src/hooks/awareness-provider.d.ts.map +0 -1
- package/dist/types/src/hooks/defs.d.ts.map +0 -1
- package/dist/types/src/hooks/extension-utils.d.ts.map +0 -1
- /package/dist/types/src/extensions/{awareness.d.ts → awareness/awareness.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-editor",
|
|
3
|
-
"version": "0.4.8-main.
|
|
3
|
+
"version": "0.4.8-main.5cead28",
|
|
4
4
|
"description": "Document editing experience within a DXOS shell.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"lodash.pick": "^4.4.0",
|
|
38
38
|
"lodash.sortby": "^4.7.0",
|
|
39
39
|
"style-mod": "^4.1.0",
|
|
40
|
-
"@dxos/async": "0.4.8-main.
|
|
41
|
-
"@dxos/
|
|
42
|
-
"@dxos/
|
|
43
|
-
"@dxos/debug": "0.4.8-main.
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/protocols": "0.4.8-main.
|
|
48
|
-
"@dxos/react-async": "0.4.8-main.
|
|
49
|
-
"@dxos/log": "0.4.8-main.
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/react-ui": "0.4.8-main.
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/
|
|
40
|
+
"@dxos/async": "0.4.8-main.5cead28",
|
|
41
|
+
"@dxos/automerge": "0.4.8-main.5cead28",
|
|
42
|
+
"@dxos/display-name": "0.4.8-main.5cead28",
|
|
43
|
+
"@dxos/debug": "0.4.8-main.5cead28",
|
|
44
|
+
"@dxos/context": "0.4.8-main.5cead28",
|
|
45
|
+
"@dxos/invariant": "0.4.8-main.5cead28",
|
|
46
|
+
"@dxos/echo-schema": "0.4.8-main.5cead28",
|
|
47
|
+
"@dxos/protocols": "0.4.8-main.5cead28",
|
|
48
|
+
"@dxos/react-async": "0.4.8-main.5cead28",
|
|
49
|
+
"@dxos/log": "0.4.8-main.5cead28",
|
|
50
|
+
"@dxos/text-model": "0.4.8-main.5cead28",
|
|
51
|
+
"@dxos/react-ui": "0.4.8-main.5cead28",
|
|
52
|
+
"@dxos/react-ui-theme": "0.4.8-main.5cead28",
|
|
53
|
+
"@dxos/util": "0.4.8-main.5cead28"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
|
|
@@ -68,7 +68,6 @@
|
|
|
68
68
|
"@types/react-test-renderer": "^17.0.2",
|
|
69
69
|
"@vitest/browser": "^1.3.1",
|
|
70
70
|
"@vitest/ui": "^1.3.1",
|
|
71
|
-
"deepsignal": "^1.5.0",
|
|
72
71
|
"happy-dom": "^13.3.1",
|
|
73
72
|
"jsdom": "^20.0.1",
|
|
74
73
|
"react": "^18.2.0",
|
|
@@ -78,22 +77,20 @@
|
|
|
78
77
|
"vite-plugin-top-level-await": "^1.4.1",
|
|
79
78
|
"vite-plugin-wasm": "^3.3.0",
|
|
80
79
|
"vitest": "^1.3.1",
|
|
81
|
-
"@dxos/
|
|
82
|
-
"@dxos/
|
|
83
|
-
"@dxos/echo-typegen": "0.4.8-main.
|
|
84
|
-
"@dxos/keyboard": "0.4.8-main.
|
|
85
|
-
"@dxos/random": "0.4.8-main.
|
|
86
|
-
"@dxos/react-
|
|
87
|
-
"@dxos/
|
|
88
|
-
"@dxos/
|
|
80
|
+
"@dxos/echo-signals": "0.4.8-main.5cead28",
|
|
81
|
+
"@dxos/config": "0.4.8-main.5cead28",
|
|
82
|
+
"@dxos/echo-typegen": "0.4.8-main.5cead28",
|
|
83
|
+
"@dxos/keyboard": "0.4.8-main.5cead28",
|
|
84
|
+
"@dxos/random": "0.4.8-main.5cead28",
|
|
85
|
+
"@dxos/react-client": "0.4.8-main.5cead28",
|
|
86
|
+
"@dxos/storybook-utils": "0.4.8-main.5cead28",
|
|
87
|
+
"@dxos/react-ui": "0.4.8-main.5cead28"
|
|
89
88
|
},
|
|
90
89
|
"peerDependencies": {
|
|
91
90
|
"@phosphor-icons/react": "^2.0.5",
|
|
92
|
-
"@vitest/browser": "^1.3.1",
|
|
93
|
-
"@vitest/ui": "^1.3.1",
|
|
94
91
|
"react": "^18.2.0",
|
|
95
92
|
"react-dom": "^18.2.0",
|
|
96
|
-
"@dxos/react-client": "0.4.8-main.
|
|
93
|
+
"@dxos/react-client": "0.4.8-main.5cead28"
|
|
97
94
|
},
|
|
98
95
|
"publishConfig": {
|
|
99
96
|
"access": "public"
|
|
@@ -20,12 +20,16 @@ import { withTheme } from '@dxos/storybook-utils';
|
|
|
20
20
|
|
|
21
21
|
import { TextEditor, type TextEditorProps } from './TextEditor';
|
|
22
22
|
import {
|
|
23
|
+
EditorModes,
|
|
23
24
|
annotations,
|
|
24
25
|
autocomplete,
|
|
25
26
|
blast,
|
|
26
27
|
command,
|
|
27
28
|
comments,
|
|
29
|
+
createBasicExtensions,
|
|
30
|
+
createDataExtensions,
|
|
28
31
|
createMarkdownExtensions,
|
|
32
|
+
createThemeExtensions,
|
|
29
33
|
decorateMarkdown,
|
|
30
34
|
defaultOptions,
|
|
31
35
|
dnd,
|
|
@@ -34,21 +38,17 @@ import {
|
|
|
34
38
|
linkTooltip,
|
|
35
39
|
listener,
|
|
36
40
|
mention,
|
|
37
|
-
|
|
41
|
+
state,
|
|
38
42
|
table,
|
|
39
43
|
typewriter,
|
|
40
|
-
|
|
44
|
+
useComments,
|
|
41
45
|
type CommandAction,
|
|
42
46
|
type CommandOptions,
|
|
47
|
+
type Comment,
|
|
43
48
|
type CommentsOptions,
|
|
49
|
+
type SelectionState,
|
|
44
50
|
} from '../../extensions';
|
|
45
|
-
import {
|
|
46
|
-
type Comment,
|
|
47
|
-
createBasicExtensions,
|
|
48
|
-
createDataExtensions,
|
|
49
|
-
createThemeExtensions,
|
|
50
|
-
useDocAccessor,
|
|
51
|
-
} from '../../hooks';
|
|
51
|
+
import { useDocAccessor } from '../../hooks';
|
|
52
52
|
import translations from '../../translations';
|
|
53
53
|
|
|
54
54
|
faker.seed(101);
|
|
@@ -243,7 +243,7 @@ type StoryProps = {
|
|
|
243
243
|
} & Pick<TextEditorProps, 'extensions'>;
|
|
244
244
|
|
|
245
245
|
const Story = ({
|
|
246
|
-
id = '
|
|
246
|
+
id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
|
|
247
247
|
text,
|
|
248
248
|
comments,
|
|
249
249
|
extensions: _extensions = [],
|
|
@@ -327,8 +327,18 @@ export const Empty = {
|
|
|
327
327
|
render: () => <Story />,
|
|
328
328
|
};
|
|
329
329
|
|
|
330
|
+
const global = new Map<string, SelectionState>();
|
|
331
|
+
|
|
330
332
|
export const Scrolling = {
|
|
331
|
-
render: () =>
|
|
333
|
+
render: () => (
|
|
334
|
+
<Story
|
|
335
|
+
text={str('# Large Document', '', large)}
|
|
336
|
+
extensions={state({
|
|
337
|
+
setState: (id, state) => global.set(id, state),
|
|
338
|
+
getState: (id) => global.get(id),
|
|
339
|
+
})}
|
|
340
|
+
/>
|
|
341
|
+
),
|
|
332
342
|
};
|
|
333
343
|
|
|
334
344
|
export const ScrollingWithImages = {
|
|
@@ -18,7 +18,7 @@ import React, {
|
|
|
18
18
|
import { log } from '@dxos/log';
|
|
19
19
|
import { isNotFalsy } from '@dxos/util';
|
|
20
20
|
|
|
21
|
-
import { documentId, editorMode } from '../../extensions';
|
|
21
|
+
import { documentId, editorMode, focusEvent } from '../../extensions';
|
|
22
22
|
import { logChanges } from '../../util';
|
|
23
23
|
|
|
24
24
|
export type CursorInfo = {
|
|
@@ -34,7 +34,7 @@ export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'ext
|
|
|
34
34
|
id?: string;
|
|
35
35
|
className?: string;
|
|
36
36
|
autoFocus?: boolean;
|
|
37
|
-
scrollTo?: StateEffect<
|
|
37
|
+
scrollTo?: StateEffect<unknown>;
|
|
38
38
|
moveToEndOfLine?: boolean;
|
|
39
39
|
debug?: boolean;
|
|
40
40
|
dataTestId?: string;
|
|
@@ -56,14 +56,14 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
|
|
|
56
56
|
extensions,
|
|
57
57
|
className,
|
|
58
58
|
autoFocus,
|
|
59
|
-
scrollTo = EditorView.scrollIntoView(0),
|
|
59
|
+
scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
|
|
60
60
|
moveToEndOfLine,
|
|
61
61
|
debug,
|
|
62
62
|
dataTestId,
|
|
63
63
|
},
|
|
64
64
|
forwardedRef,
|
|
65
65
|
) => {
|
|
66
|
-
//
|
|
66
|
+
// NOTE: Increments by 2 in strict mode.
|
|
67
67
|
const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
|
|
68
68
|
|
|
69
69
|
// TODO(burdon): Make tabster optional.
|
|
@@ -104,7 +104,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
|
|
|
104
104
|
// Focus.
|
|
105
105
|
EditorView.updateListener.of((update) => {
|
|
106
106
|
update.transactions.forEach((transaction) => {
|
|
107
|
-
if (transaction.isUserEvent(
|
|
107
|
+
if (transaction.isUserEvent(focusEvent)) {
|
|
108
108
|
rootRef.current?.focus();
|
|
109
109
|
}
|
|
110
110
|
});
|
|
@@ -122,6 +122,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
|
|
|
122
122
|
state,
|
|
123
123
|
parent: rootRef.current!,
|
|
124
124
|
scrollTo,
|
|
125
|
+
|
|
125
126
|
// NOTE: Uncomment to debug/monitor all transactions.
|
|
126
127
|
// https://codemirror.net/docs/ref/#view.EditorView.dispatch
|
|
127
128
|
dispatchTransactions: (trs, view) => {
|
|
@@ -132,12 +133,10 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
|
|
|
132
133
|
},
|
|
133
134
|
});
|
|
134
135
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
// Position cursor at end of line.
|
|
138
|
-
if (moveToEndOfLine) {
|
|
136
|
+
// Position cursor at end of first line.
|
|
137
|
+
if (moveToEndOfLine && !(scrollTo || selection)) {
|
|
139
138
|
const { to } = view.state.doc.lineAt(0);
|
|
140
|
-
view
|
|
139
|
+
view.dispatch({ selection: { anchor: to } });
|
|
141
140
|
}
|
|
142
141
|
|
|
143
142
|
// Remove tabster attribute (rely on custom keymap).
|
|
@@ -145,6 +144,8 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
|
|
|
145
144
|
rootRef.current?.removeAttribute('data-tabster');
|
|
146
145
|
}
|
|
147
146
|
|
|
147
|
+
setView(view);
|
|
148
|
+
|
|
148
149
|
return () => {
|
|
149
150
|
view?.destroy();
|
|
150
151
|
setView(null);
|
|
@@ -15,8 +15,12 @@ import { withTheme } from '@dxos/storybook-utils';
|
|
|
15
15
|
|
|
16
16
|
import { Toolbar } from './Toolbar';
|
|
17
17
|
import {
|
|
18
|
+
type Comment,
|
|
18
19
|
decorateMarkdown,
|
|
19
20
|
comments,
|
|
21
|
+
createBasicExtensions,
|
|
22
|
+
createDataExtensions,
|
|
23
|
+
createThemeExtensions,
|
|
20
24
|
formattingKeymap,
|
|
21
25
|
table,
|
|
22
26
|
useComments,
|
|
@@ -24,15 +28,7 @@ import {
|
|
|
24
28
|
createMarkdownExtensions,
|
|
25
29
|
image,
|
|
26
30
|
} from '../../extensions';
|
|
27
|
-
import {
|
|
28
|
-
type Comment,
|
|
29
|
-
createBasicExtensions,
|
|
30
|
-
createDataExtensions,
|
|
31
|
-
createThemeExtensions,
|
|
32
|
-
useActionHandler,
|
|
33
|
-
useDocAccessor,
|
|
34
|
-
useTextEditor,
|
|
35
|
-
} from '../../hooks';
|
|
31
|
+
import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
|
|
36
32
|
import translations from '../../translations';
|
|
37
33
|
|
|
38
34
|
faker.seed(101);
|
|
@@ -80,7 +76,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
|
|
|
80
76
|
<Toolbar.Separator />
|
|
81
77
|
<Toolbar.Extended />
|
|
82
78
|
</Toolbar.Root>
|
|
83
|
-
<div
|
|
79
|
+
<div ref={parentRef} className={textBlockWidth} />;
|
|
84
80
|
</div>
|
|
85
81
|
);
|
|
86
82
|
};
|
|
@@ -17,8 +17,9 @@ import { useThemeContext } from '@dxos/react-ui';
|
|
|
17
17
|
import { withTheme } from '@dxos/storybook-utils';
|
|
18
18
|
|
|
19
19
|
import { automerge } from './automerge';
|
|
20
|
-
import {
|
|
20
|
+
import { useTextEditor } from '../../hooks';
|
|
21
21
|
import translations from '../../translations';
|
|
22
|
+
import { createBasicExtensions, createThemeExtensions } from '../factories';
|
|
22
23
|
|
|
23
24
|
const initialContent = 'Hello world!';
|
|
24
25
|
|
|
@@ -9,7 +9,7 @@ import { log } from '@dxos/log';
|
|
|
9
9
|
import { type Space } from '@dxos/react-client/echo';
|
|
10
10
|
import { type GossipMessage } from '@dxos/react-client/mesh';
|
|
11
11
|
|
|
12
|
-
import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '
|
|
12
|
+
import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
|
|
13
13
|
|
|
14
14
|
type ProtocolMessage =
|
|
15
15
|
| {
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
import { Event } from '@dxos/async';
|
|
17
17
|
import { Context } from '@dxos/context';
|
|
18
18
|
|
|
19
|
-
import { Cursor, type CursorConverter } from '
|
|
19
|
+
import { Cursor, type CursorConverter } from '../cursor';
|
|
20
20
|
|
|
21
21
|
export interface AwarenessProvider {
|
|
22
22
|
remoteStateChange: Event<void>;
|
|
@@ -13,7 +13,7 @@ import { log } from '@dxos/log';
|
|
|
13
13
|
import { nonNullable } from '@dxos/util';
|
|
14
14
|
|
|
15
15
|
import { Cursor } from './cursor';
|
|
16
|
-
import { type Comment, type Range } from '
|
|
16
|
+
import { type Comment, type Range } from './types';
|
|
17
17
|
import { getToken } from '../styles';
|
|
18
18
|
import { callbackWrapper } from '../util';
|
|
19
19
|
|
package/src/extensions/cursor.ts
CHANGED
|
@@ -17,10 +17,9 @@ import {
|
|
|
17
17
|
scrollPastEnd,
|
|
18
18
|
} from '@codemirror/view';
|
|
19
19
|
import defaultsDeep from 'lodash.defaultsdeep';
|
|
20
|
-
import { useMemo } from 'react';
|
|
21
20
|
|
|
22
21
|
import { generateName } from '@dxos/display-name';
|
|
23
|
-
import {
|
|
22
|
+
import { type DocAccessor } from '@dxos/echo-schema';
|
|
24
23
|
import { log } from '@dxos/log';
|
|
25
24
|
import { type Space } from '@dxos/react-client/echo';
|
|
26
25
|
import { type Identity } from '@dxos/react-client/halo';
|
|
@@ -28,8 +27,8 @@ import { type ThemeMode } from '@dxos/react-ui';
|
|
|
28
27
|
import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
|
|
29
28
|
import { hexToHue, isNotFalsy } from '@dxos/util';
|
|
30
29
|
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
30
|
+
import { automerge } from './automerge';
|
|
31
|
+
import { awareness, SpaceAwarenessProvider } from './awareness';
|
|
33
32
|
import { type ThemeStyles } from '../styles';
|
|
34
33
|
import { defaultTheme } from '../themes';
|
|
35
34
|
|
|
@@ -117,9 +116,6 @@ const defaultSlots = {
|
|
|
117
116
|
editor: {
|
|
118
117
|
className: 'w-full bs-full',
|
|
119
118
|
},
|
|
120
|
-
content: {
|
|
121
|
-
className: '!p-2',
|
|
122
|
-
},
|
|
123
119
|
};
|
|
124
120
|
|
|
125
121
|
export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
|
|
@@ -169,17 +165,3 @@ export const createDataExtensions = ({ id, text, space, identity }: DataExtensio
|
|
|
169
165
|
|
|
170
166
|
return extensions;
|
|
171
167
|
};
|
|
172
|
-
|
|
173
|
-
// TODO(burdon): Factor out.
|
|
174
|
-
export const useDocAccessor = <T = any>(
|
|
175
|
-
text: TextObject,
|
|
176
|
-
): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
|
|
177
|
-
return useMemo(
|
|
178
|
-
() => ({
|
|
179
|
-
id: text.id,
|
|
180
|
-
doc: getTextContent(text),
|
|
181
|
-
accessor: createDocAccessor<T>(text),
|
|
182
|
-
}),
|
|
183
|
-
[text],
|
|
184
|
-
);
|
|
185
|
-
};
|
package/src/extensions/index.ts
CHANGED
|
@@ -13,8 +13,11 @@ export * from './cursor';
|
|
|
13
13
|
export * from './cursor-line-margin';
|
|
14
14
|
export * from './doc';
|
|
15
15
|
export * from './dnd';
|
|
16
|
+
export * from './factories';
|
|
16
17
|
export * from './listener';
|
|
17
18
|
export * from './markdown';
|
|
18
19
|
export * from './mention';
|
|
19
20
|
export * from './modes';
|
|
21
|
+
export * from './state';
|
|
22
|
+
export * from './types';
|
|
20
23
|
export * from './typewriter';
|
|
@@ -48,7 +48,7 @@ class CheckboxWidget extends WidgetType {
|
|
|
48
48
|
|
|
49
49
|
override toDOM(view: EditorView) {
|
|
50
50
|
const input = document.createElement('input');
|
|
51
|
-
input.className = 'cm-task-checkbox';
|
|
51
|
+
input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5';
|
|
52
52
|
input.type = 'checkbox';
|
|
53
53
|
input.checked = this._checked;
|
|
54
54
|
if (view.state.readOnly) {
|
package/src/extensions/modes.ts
CHANGED
|
@@ -6,6 +6,8 @@ import { type Extension, Facet } from '@codemirror/state';
|
|
|
6
6
|
import { keymap } from '@codemirror/view';
|
|
7
7
|
import { vim } from '@replit/codemirror-vim';
|
|
8
8
|
|
|
9
|
+
export const focusEvent = 'focus.container';
|
|
10
|
+
|
|
9
11
|
export type EditorMode = 'default' | 'vim' | undefined;
|
|
10
12
|
|
|
11
13
|
export type EditorConfig = {
|
|
@@ -27,7 +29,7 @@ export const EditorModes: { [mode: string]: Extension } = {
|
|
|
27
29
|
key: 'Alt-Escape',
|
|
28
30
|
run: (view) => {
|
|
29
31
|
// Focus container for tab navigation.
|
|
30
|
-
view.dispatch({ userEvent:
|
|
32
|
+
view.dispatch({ userEvent: focusEvent });
|
|
31
33
|
return true;
|
|
32
34
|
},
|
|
33
35
|
},
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type Extension, Transaction } from '@codemirror/state';
|
|
6
|
+
import { EditorView, keymap } from '@codemirror/view';
|
|
7
|
+
|
|
8
|
+
import { debounce } from '@dxos/async';
|
|
9
|
+
import { invariant } from '@dxos/invariant';
|
|
10
|
+
import { isNotFalsy } from '@dxos/util';
|
|
11
|
+
|
|
12
|
+
import { documentId } from './doc';
|
|
13
|
+
|
|
14
|
+
const scrollAnnotation = 'dxos.org/cm/scrolling';
|
|
15
|
+
|
|
16
|
+
// NOTE: Serializable.
|
|
17
|
+
export type SelectionState = {
|
|
18
|
+
scrollTo: {
|
|
19
|
+
from: number;
|
|
20
|
+
};
|
|
21
|
+
selection: {
|
|
22
|
+
anchor: number;
|
|
23
|
+
head?: number;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export type StateOptions = {
|
|
28
|
+
setState: (id: string, state: SelectionState) => void;
|
|
29
|
+
getState: (id: string) => SelectionState | undefined;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const keyPrefix = 'dxos.org/react-ui-editor/state';
|
|
33
|
+
export const localStorageStateStoreAdapter: StateOptions = {
|
|
34
|
+
setState: (id, state) => {
|
|
35
|
+
invariant(id);
|
|
36
|
+
localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
|
|
37
|
+
},
|
|
38
|
+
getState: (id) => {
|
|
39
|
+
invariant(id);
|
|
40
|
+
const state = localStorage.getItem(`${keyPrefix}/${id}`);
|
|
41
|
+
return state ? JSON.parse(state) : undefined;
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Track scrolling and selection state to be restored when switching to document.
|
|
47
|
+
*/
|
|
48
|
+
export const state = ({ getState, setState }: Partial<StateOptions> = {}): Extension => {
|
|
49
|
+
const setStateDebounced = debounce(setState!, 1_000);
|
|
50
|
+
|
|
51
|
+
return [
|
|
52
|
+
// TODO(burdon): Track scrolling (currently only updates when cursor moves).
|
|
53
|
+
EditorView.updateListener.of(({ view, changes, transactions }) => {
|
|
54
|
+
// TODO(burdon): Don't react to initial scroll.
|
|
55
|
+
const id = view.state.facet(documentId);
|
|
56
|
+
if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (setState) {
|
|
61
|
+
const { top } = view.dom.getBoundingClientRect();
|
|
62
|
+
const pos = view.posAtCoords({ x: 0, y: top });
|
|
63
|
+
if (pos !== null) {
|
|
64
|
+
const { anchor, head } = view.state.selection.main;
|
|
65
|
+
setStateDebounced(id, {
|
|
66
|
+
scrollTo: { from: pos, yMargin: 0 },
|
|
67
|
+
selection: { anchor, head },
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}),
|
|
72
|
+
getState &&
|
|
73
|
+
keymap.of([
|
|
74
|
+
{
|
|
75
|
+
key: 'ctrl-r', // TODO(burdon): Setting to jump back to bookmark.
|
|
76
|
+
run: (view) => {
|
|
77
|
+
const state = getState(view.state.facet(documentId));
|
|
78
|
+
if (state) {
|
|
79
|
+
view.dispatch({
|
|
80
|
+
effects: EditorView.scrollIntoView(state.scrollTo.from, { yMargin: 0 }),
|
|
81
|
+
selection: state.selection,
|
|
82
|
+
annotations: Transaction.userEvent.of(scrollAnnotation),
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
return true;
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
]),
|
|
89
|
+
].filter(isNotFalsy);
|
|
90
|
+
};
|
package/src/hooks/index.ts
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useMemo } from 'react';
|
|
6
|
+
|
|
7
|
+
import { createDocAccessor, type DocAccessor, getTextContent, type TextObject } from '@dxos/echo-schema';
|
|
8
|
+
|
|
9
|
+
// TODO(burdon): Factor out.
|
|
10
|
+
export const useDocAccessor = <T = any>(
|
|
11
|
+
text: TextObject,
|
|
12
|
+
): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
|
|
13
|
+
return useMemo(
|
|
14
|
+
() => ({
|
|
15
|
+
id: text.id,
|
|
16
|
+
doc: getTextContent(text),
|
|
17
|
+
accessor: createDocAccessor<T>(text),
|
|
18
|
+
}),
|
|
19
|
+
[text],
|
|
20
|
+
);
|
|
21
|
+
};
|
|
@@ -10,10 +10,10 @@ import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dx
|
|
|
10
10
|
import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
|
|
11
11
|
import { withTheme } from '@dxos/storybook-utils';
|
|
12
12
|
|
|
13
|
-
import { createBasicExtensions, createThemeExtensions } from './extension-utils';
|
|
14
13
|
import { useActionHandler } from './useActionHandler';
|
|
15
14
|
import { useTextEditor } from './useTextEditor';
|
|
16
15
|
import { Toolbar } from '../components';
|
|
16
|
+
import { createBasicExtensions, createThemeExtensions } from '../extensions';
|
|
17
17
|
import {
|
|
18
18
|
type EditorMode,
|
|
19
19
|
EditorModes,
|
|
@@ -67,7 +67,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
|
|
|
67
67
|
<EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
|
|
68
68
|
</Toolbar.Root>
|
|
69
69
|
<div role='none' className='grow overflow-hidden'>
|
|
70
|
-
<div
|
|
70
|
+
<div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
|
|
71
71
|
</div>
|
|
72
72
|
</div>
|
|
73
73
|
);
|
|
@@ -117,7 +117,7 @@ export default {
|
|
|
117
117
|
export const Default = {
|
|
118
118
|
render: () => {
|
|
119
119
|
const { parentRef } = useTextEditor();
|
|
120
|
-
return <div
|
|
120
|
+
return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
|
|
121
121
|
},
|
|
122
122
|
};
|
|
123
123
|
|
|
@@ -127,7 +127,7 @@ export const Basic = {
|
|
|
127
127
|
const { parentRef } = useTextEditor(() => ({
|
|
128
128
|
extensions: [createBasicExtensions({ placeholder: 'Enter text...' }), createThemeExtensions({ themeMode })],
|
|
129
129
|
}));
|
|
130
|
-
return <div
|
|
130
|
+
return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
|
|
131
131
|
},
|
|
132
132
|
};
|
|
133
133
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"awareness.d.ts","sourceRoot":"","sources":["../../../../src/extensions/awareness.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,EAAE,KAAK,SAAS,EAAwB,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAEL,KAAK,aAAa,EAClB,UAAU,EACV,KAAK,WAAW,EAEhB,KAAK,UAAU,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IAEd,eAAe,IAAI,cAAc,EAAE,CAAC;IACpC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAC;CACvD;AAYD,eAAO,MAAM,iBAAiB,6CAE5B,CAAC;AAKH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,oCAA+B,SAQpD,CAAC;AAEF;;GAEG;AACH,qBAAa,yBAA0B,YAAW,WAAW;IACpD,WAAW,EAAE,aAAa,CAAmB;IAEpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IAEtC,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,SAAS,CAAC,CAAqB;gBAE3B,IAAI,EAAE,UAAU;IAS5B,OAAO;IAKP,MAAM,CAAC,MAAM,EAAE,UAAU;IAKzB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,uBAAuB;CA4EhC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"awareness-provider.d.ts","sourceRoot":"","sources":["../../../../src/hooks/awareness-provider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,EAAS,MAAM,aAAa,CAAC;AAIzD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAaxH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqC;IAEnE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAgB;IAEtC,OAAO,CAAC,IAAI,CAAC,CAAU;IACvB,OAAO,CAAC,SAAS,CAAC,CAAe;IACjC,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC,SAAgB,iBAAiB,cAAqB;gBAE1C,MAAM,EAAE,uBAAuB;IAO3C,IAAI;IAqCJ,KAAK;IAML,eAAe,IAAI,cAAc,EAAE;IAInC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI;IAWrD,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,kBAAkB;CAK3B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/defs.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAGF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"extension-utils.d.ts","sourceRoot":"","sources":["../../../../src/hooks/extension-utils.ts"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAehE,OAAO,EAAqC,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEzG,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAS7C;;;GAGG;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF,eAAO,MAAM,qBAAqB,YAAa,sBAAsB,KAAG,SAuBvE,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE;YACP,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH,CAAC;CACH,CAAC;AAWF,eAAO,MAAM,qBAAqB,yCAAyC,sBAAsB,KAAQ,SASxG,CAAC;AAMF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kCAAmC,mBAAmB,KAAG,SAAS,EAsBlG,CAAC;AAGF,eAAO,MAAM,cAAc,kBACnB,UAAU;QACT,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}
|
|
File without changes
|