@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.
Files changed (56) hide show
  1. package/dist/lib/browser/index.mjs +2722 -2630
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/components/TextEditor/TextEditor.d.ts +2 -2
  5. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  6. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +2 -2
  7. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
  8. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
  9. package/dist/types/src/extensions/automerge/automerge.stories.d.ts.map +1 -1
  10. package/dist/types/src/{hooks → extensions/awareness}/awareness-provider.d.ts +1 -1
  11. package/dist/types/src/extensions/awareness/awareness-provider.d.ts.map +1 -0
  12. package/dist/types/src/extensions/awareness/awareness.d.ts.map +1 -0
  13. package/dist/types/src/extensions/awareness/index.d.ts +3 -0
  14. package/dist/types/src/extensions/awareness/index.d.ts.map +1 -0
  15. package/dist/types/src/extensions/comments.d.ts +1 -1
  16. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  17. package/dist/types/src/extensions/cursor.d.ts +1 -1
  18. package/dist/types/src/extensions/cursor.d.ts.map +1 -1
  19. package/dist/types/src/{hooks/extension-utils.d.ts → extensions/factories.d.ts} +2 -7
  20. package/dist/types/src/extensions/factories.d.ts.map +1 -0
  21. package/dist/types/src/extensions/index.d.ts +3 -0
  22. package/dist/types/src/extensions/index.d.ts.map +1 -1
  23. package/dist/types/src/extensions/modes.d.ts +1 -0
  24. package/dist/types/src/extensions/modes.d.ts.map +1 -1
  25. package/dist/types/src/extensions/state.d.ts +20 -0
  26. package/dist/types/src/extensions/state.d.ts.map +1 -0
  27. package/dist/types/src/{hooks/defs.d.ts → extensions/types.d.ts} +1 -1
  28. package/dist/types/src/extensions/types.d.ts.map +1 -0
  29. package/dist/types/src/hooks/index.d.ts +1 -3
  30. package/dist/types/src/hooks/index.d.ts.map +1 -1
  31. package/dist/types/src/hooks/useDocAccessor.d.ts +7 -0
  32. package/dist/types/src/hooks/useDocAccessor.d.ts.map +1 -0
  33. package/package.json +24 -27
  34. package/src/components/TextEditor/TextEditor.stories.tsx +21 -11
  35. package/src/components/TextEditor/TextEditor.tsx +11 -10
  36. package/src/components/Toolbar/Toolbar.stories.tsx +6 -10
  37. package/src/extensions/automerge/automerge.stories.tsx +2 -1
  38. package/src/{hooks → extensions/awareness}/awareness-provider.ts +1 -1
  39. package/src/extensions/{awareness.ts → awareness/awareness.ts} +1 -1
  40. package/src/extensions/awareness/index.ts +6 -0
  41. package/src/extensions/comments.ts +1 -1
  42. package/src/extensions/cursor.ts +1 -1
  43. package/src/{hooks/extension-utils.ts → extensions/factories.ts} +3 -21
  44. package/src/extensions/index.ts +3 -0
  45. package/src/extensions/markdown/decorate.ts +1 -1
  46. package/src/extensions/modes.ts +3 -1
  47. package/src/extensions/state.ts +90 -0
  48. package/src/{hooks/defs.ts → extensions/types.ts} +1 -0
  49. package/src/hooks/index.ts +1 -4
  50. package/src/hooks/useDocAccessor.ts +21 -0
  51. package/src/hooks/useTextEditor.stories.tsx +4 -4
  52. package/dist/types/src/extensions/awareness.d.ts.map +0 -1
  53. package/dist/types/src/hooks/awareness-provider.d.ts.map +0 -1
  54. package/dist/types/src/hooks/defs.d.ts.map +0 -1
  55. package/dist/types/src/hooks/extension-utils.d.ts.map +0 -1
  56. /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.512e4c8",
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.512e4c8",
41
- "@dxos/context": "0.4.8-main.512e4c8",
42
- "@dxos/automerge": "0.4.8-main.512e4c8",
43
- "@dxos/debug": "0.4.8-main.512e4c8",
44
- "@dxos/display-name": "0.4.8-main.512e4c8",
45
- "@dxos/echo-schema": "0.4.8-main.512e4c8",
46
- "@dxos/invariant": "0.4.8-main.512e4c8",
47
- "@dxos/protocols": "0.4.8-main.512e4c8",
48
- "@dxos/react-async": "0.4.8-main.512e4c8",
49
- "@dxos/log": "0.4.8-main.512e4c8",
50
- "@dxos/react-ui-theme": "0.4.8-main.512e4c8",
51
- "@dxos/react-ui": "0.4.8-main.512e4c8",
52
- "@dxos/util": "0.4.8-main.512e4c8",
53
- "@dxos/text-model": "0.4.8-main.512e4c8"
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/config": "0.4.8-main.512e4c8",
82
- "@dxos/echo-signals": "0.4.8-main.512e4c8",
83
- "@dxos/echo-typegen": "0.4.8-main.512e4c8",
84
- "@dxos/keyboard": "0.4.8-main.512e4c8",
85
- "@dxos/random": "0.4.8-main.512e4c8",
86
- "@dxos/react-ui": "0.4.8-main.512e4c8",
87
- "@dxos/react-client": "0.4.8-main.512e4c8",
88
- "@dxos/storybook-utils": "0.4.8-main.512e4c8"
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.512e4c8"
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
- useComments,
41
+ state,
38
42
  table,
39
43
  typewriter,
40
- EditorModes,
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 = 'test',
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: () => <Story text={str('# Large Document', '', large)} />,
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<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
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
- // TODO(burdon): Increments by 2!
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('focus.container')) {
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
- setView(view);
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?.dispatch({ selection: { anchor: to } });
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 role='textbox' ref={parentRef} className={textBlockWidth} />;
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 { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
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 '../extensions';
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 './cursor';
19
+ import { Cursor, type CursorConverter } from '../cursor';
20
20
 
21
21
  export interface AwarenessProvider {
22
22
  remoteStateChange: Event<void>;
@@ -0,0 +1,6 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ export * from './awareness';
6
+ export * from './awareness-provider';
@@ -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 '../hooks';
16
+ import { type Comment, type Range } from './types';
17
17
  import { getToken } from '../styles';
18
18
  import { callbackWrapper } from '../util';
19
19
 
@@ -4,7 +4,7 @@
4
4
 
5
5
  import { type EditorState, Facet } from '@codemirror/state';
6
6
 
7
- import type { Range } from '../hooks';
7
+ import type { Range } from './types';
8
8
 
9
9
  /**
10
10
  * Converts indexes into the text document into stable peer-independent cursors.
@@ -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 { createDocAccessor, getTextContent, type TextObject, type DocAccessor } from '@dxos/echo-schema';
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 { SpaceAwarenessProvider } from './awareness-provider';
32
- import { automerge, awareness } from '../extensions';
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
- };
@@ -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) {
@@ -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: 'focus.container' });
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
+ };
@@ -9,6 +9,7 @@ export type Range = {
9
9
  };
10
10
 
11
11
  // Persistent data structure.
12
+ // TODO(burdon): Rename annotation?
12
13
  export type Comment = {
13
14
  id: string;
14
15
  cursor?: string;
@@ -2,9 +2,6 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- export * from './awareness-provider';
6
- export * from './defs';
7
- export * from './extension-utils';
8
-
9
5
  export * from './useActionHandler';
6
+ export * from './useDocAccessor';
10
7
  export * from './useTextEditor';
@@ -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 role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
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 role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
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 role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
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"}