@dxos/react-ui-editor 0.3.11-main.68db74e → 0.3.11-main.6901f09

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 (188) hide show
  1. package/dist/lib/browser/index.mjs +2651 -1060
  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/MarkdownEditor.stories.d.ts +13 -15
  5. package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
  6. package/dist/types/src/components/TextEditor/TextEditor.d.ts +14 -6
  7. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  8. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +1 -1
  9. package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map +1 -1
  10. package/dist/types/src/components/TextEditor/{yjs.stories.d.ts → hooks.stories.d.ts} +13 -2
  11. package/dist/types/src/components/TextEditor/hooks.stories.d.ts.map +1 -0
  12. package/dist/types/src/components/Toolbar/Toolbar.d.ts +29 -0
  13. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -0
  14. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +25 -0
  15. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -0
  16. package/dist/types/src/components/Toolbar/index.d.ts +2 -0
  17. package/dist/types/src/components/Toolbar/index.d.ts.map +1 -0
  18. package/dist/types/src/components/index.d.ts +1 -0
  19. package/dist/types/src/components/index.d.ts.map +1 -1
  20. package/dist/types/src/extensions/autocomplete.d.ts.map +1 -1
  21. package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -1
  22. package/dist/types/src/extensions/automerge/automerge.spec.d.ts +2 -0
  23. package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map +1 -0
  24. package/dist/types/src/extensions/automerge/automerge.test.d.ts +2 -0
  25. package/dist/types/src/extensions/automerge/automerge.test.d.ts.map +1 -0
  26. package/dist/types/src/extensions/automerge/defs.d.ts +9 -11
  27. package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
  28. package/dist/types/src/extensions/automerge/index.d.ts +0 -1
  29. package/dist/types/src/extensions/automerge/index.d.ts.map +1 -1
  30. package/dist/types/src/extensions/automerge/semaphore.d.ts +8 -12
  31. package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -1
  32. package/dist/types/src/extensions/automerge/update-automerge.d.ts +2 -2
  33. package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
  34. package/dist/types/src/extensions/awareness.d.ts +2 -2
  35. package/dist/types/src/extensions/awareness.d.ts.map +1 -1
  36. package/dist/types/src/extensions/basic.d.ts +4 -5
  37. package/dist/types/src/extensions/basic.d.ts.map +1 -1
  38. package/dist/types/src/extensions/comments.d.ts +40 -19
  39. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  40. package/dist/types/src/extensions/cursor.d.ts +3 -3
  41. package/dist/types/src/extensions/cursor.d.ts.map +1 -1
  42. package/dist/types/src/extensions/index.d.ts +1 -7
  43. package/dist/types/src/extensions/index.d.ts.map +1 -1
  44. package/dist/types/src/extensions/markdown/bundle.d.ts +3 -6
  45. package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -1
  46. package/dist/types/src/extensions/markdown/code.d.ts.map +1 -0
  47. package/dist/types/src/extensions/markdown/formatting.d.ts +57 -0
  48. package/dist/types/src/extensions/markdown/formatting.d.ts.map +1 -0
  49. package/dist/types/src/extensions/markdown/formatting.test.d.ts +3 -0
  50. package/dist/types/src/extensions/markdown/formatting.test.d.ts.map +1 -0
  51. package/dist/types/src/extensions/markdown/heading.d.ts +6 -0
  52. package/dist/types/src/extensions/markdown/heading.d.ts.map +1 -0
  53. package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
  54. package/dist/types/src/extensions/markdown/hr.d.ts.map +1 -0
  55. package/dist/types/src/extensions/markdown/image.d.ts.map +1 -0
  56. package/dist/types/src/extensions/markdown/index.d.ts +8 -0
  57. package/dist/types/src/extensions/markdown/index.d.ts.map +1 -1
  58. package/dist/types/src/extensions/markdown/link.d.ts.map +1 -0
  59. package/dist/types/src/extensions/markdown/table.d.ts.map +1 -0
  60. package/dist/types/src/extensions/markdown/tasklist.d.ts +3 -0
  61. package/dist/types/src/extensions/markdown/tasklist.d.ts.map +1 -0
  62. package/dist/types/src/extensions/mention.d.ts.map +1 -1
  63. package/dist/types/src/extensions/outliner.d.ts +4 -0
  64. package/dist/types/src/extensions/outliner.d.ts.map +1 -0
  65. package/dist/types/src/hooks/awareness-provider.d.ts +7 -4
  66. package/dist/types/src/hooks/awareness-provider.d.ts.map +1 -1
  67. package/dist/types/src/hooks/defs.d.ts +25 -0
  68. package/dist/types/src/hooks/defs.d.ts.map +1 -0
  69. package/dist/types/src/hooks/index.d.ts +4 -2
  70. package/dist/types/src/hooks/index.d.ts.map +1 -1
  71. package/dist/types/src/hooks/useActionHandler.d.ts +4 -0
  72. package/dist/types/src/hooks/useActionHandler.d.ts.map +1 -0
  73. package/dist/types/src/hooks/useEditorView.d.ts +17 -0
  74. package/dist/types/src/hooks/useEditorView.d.ts.map +1 -0
  75. package/dist/types/src/hooks/useTextEditor.d.ts +39 -0
  76. package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -0
  77. package/dist/types/src/hooks/useTextModel.d.ts +14 -27
  78. package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
  79. package/dist/types/src/index.d.ts +1 -1
  80. package/dist/types/src/index.d.ts.map +1 -1
  81. package/dist/types/src/styles/markdown.d.ts +2 -2
  82. package/dist/types/src/styles/markdown.d.ts.map +1 -1
  83. package/dist/types/src/themes/default.d.ts.map +1 -1
  84. package/dist/types/src/util.d.ts +2 -0
  85. package/dist/types/src/util.d.ts.map +1 -1
  86. package/package.json +47 -37
  87. package/src/components/TextEditor/MarkdownEditor.stories.tsx +75 -84
  88. package/src/components/TextEditor/TextEditor.tsx +111 -75
  89. package/src/components/TextEditor/automerge.stories.tsx +1 -2
  90. package/src/components/TextEditor/hooks.stories.tsx +111 -0
  91. package/src/components/Toolbar/Toolbar.stories.tsx +102 -0
  92. package/src/components/Toolbar/Toolbar.tsx +245 -0
  93. package/src/components/Toolbar/index.ts +5 -0
  94. package/src/components/index.ts +1 -0
  95. package/src/extensions/autocomplete.ts +6 -3
  96. package/src/extensions/automerge/automerge.spec.tsx +76 -0
  97. package/src/extensions/automerge/automerge.test.ts +13 -0
  98. package/src/extensions/automerge/automerge.ts +54 -45
  99. package/src/extensions/automerge/cursor.ts +3 -3
  100. package/src/extensions/automerge/defs.ts +13 -34
  101. package/src/extensions/automerge/index.ts +0 -1
  102. package/src/extensions/automerge/semaphore.ts +33 -32
  103. package/src/extensions/automerge/update-automerge.ts +14 -8
  104. package/src/extensions/automerge/update-codemirror.ts +5 -5
  105. package/src/extensions/awareness.ts +22 -18
  106. package/src/extensions/basic.ts +17 -10
  107. package/src/extensions/blast.ts +4 -1
  108. package/src/extensions/comments.ts +328 -167
  109. package/src/extensions/cursor.ts +7 -3
  110. package/src/extensions/index.ts +1 -7
  111. package/src/extensions/markdown/bundle.ts +23 -28
  112. package/src/extensions/markdown/code.ts +150 -0
  113. package/src/extensions/markdown/formatting.test.ts +481 -0
  114. package/src/extensions/markdown/formatting.ts +1198 -0
  115. package/src/extensions/markdown/heading.ts +59 -0
  116. package/src/extensions/markdown/highlight.ts +9 -15
  117. package/src/extensions/markdown/hr.ts +71 -0
  118. package/src/extensions/markdown/index.ts +8 -0
  119. package/src/extensions/{link.ts → markdown/link.ts} +16 -7
  120. package/src/extensions/{tasklist.ts → markdown/tasklist.ts} +48 -33
  121. package/src/extensions/mention.ts +9 -2
  122. package/src/extensions/outliner.ts +12 -0
  123. package/src/hooks/awareness-provider.ts +24 -20
  124. package/src/hooks/defs.ts +42 -0
  125. package/src/hooks/index.ts +5 -2
  126. package/src/hooks/useActionHandler.ts +93 -0
  127. package/src/hooks/useEditorView.ts +29 -0
  128. package/src/hooks/useTextEditor.ts +153 -0
  129. package/src/hooks/useTextModel.ts +66 -56
  130. package/src/index.ts +1 -1
  131. package/src/styles/markdown.ts +9 -10
  132. package/src/themes/default.ts +11 -8
  133. package/src/util.ts +26 -3
  134. package/dist/types/src/components/TextEditor/codemirror.stories.d.ts +0 -12
  135. package/dist/types/src/components/TextEditor/codemirror.stories.d.ts.map +0 -1
  136. package/dist/types/src/components/TextEditor/comments.stories.d.ts +0 -26
  137. package/dist/types/src/components/TextEditor/comments.stories.d.ts.map +0 -1
  138. package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +0 -1
  139. package/dist/types/src/extensions/code.d.ts.map +0 -1
  140. package/dist/types/src/extensions/hr.d.ts.map +0 -1
  141. package/dist/types/src/extensions/image.d.ts.map +0 -1
  142. package/dist/types/src/extensions/link.d.ts.map +0 -1
  143. package/dist/types/src/extensions/table.d.ts.map +0 -1
  144. package/dist/types/src/extensions/tasklist.d.ts +0 -7
  145. package/dist/types/src/extensions/tasklist.d.ts.map +0 -1
  146. package/dist/types/src/extensions/yjs/cursor.d.ts +0 -4
  147. package/dist/types/src/extensions/yjs/cursor.d.ts.map +0 -1
  148. package/dist/types/src/extensions/yjs/index.d.ts +0 -2
  149. package/dist/types/src/extensions/yjs/index.d.ts.map +0 -1
  150. package/dist/types/src/extensions/yjs/yjs.d.ts +0 -4
  151. package/dist/types/src/extensions/yjs/yjs.d.ts.map +0 -1
  152. package/dist/types/src/extensions/yjs/yjs.test.d.ts +0 -2
  153. package/dist/types/src/extensions/yjs/yjs.test.d.ts.map +0 -1
  154. package/dist/types/src/hooks/automerge.d.ts +0 -3
  155. package/dist/types/src/hooks/automerge.d.ts.map +0 -1
  156. package/dist/types/src/hooks/yjs.d.ts +0 -27
  157. package/dist/types/src/hooks/yjs.d.ts.map +0 -1
  158. package/dist/types/src/testing/index.d.ts +0 -3
  159. package/dist/types/src/testing/index.d.ts.map +0 -1
  160. package/dist/types/src/testing/proto/gen/schema.d.ts +0 -15
  161. package/dist/types/src/testing/proto/gen/schema.d.ts.map +0 -1
  162. package/dist/types/src/testing/proto/index.d.ts +0 -2
  163. package/dist/types/src/testing/proto/index.d.ts.map +0 -1
  164. package/dist/types/src/testing/replicator.d.ts +0 -45
  165. package/dist/types/src/testing/replicator.d.ts.map +0 -1
  166. package/src/components/TextEditor/codemirror.stories.ts +0 -115
  167. package/src/components/TextEditor/comments.stories.tsx +0 -315
  168. package/src/components/TextEditor/yjs.stories.tsx +0 -56
  169. package/src/extensions/code.ts +0 -106
  170. package/src/extensions/hr.ts +0 -73
  171. package/src/extensions/yjs/cursor.ts +0 -22
  172. package/src/extensions/yjs/index.ts +0 -5
  173. package/src/extensions/yjs/yjs.test.ts +0 -35
  174. package/src/extensions/yjs/yjs.ts +0 -16
  175. package/src/hooks/automerge.ts +0 -52
  176. package/src/hooks/yjs.ts +0 -156
  177. package/src/testing/index.ts +0 -6
  178. package/src/testing/proto/gen/schema.ts +0 -49
  179. package/src/testing/proto/index.ts +0 -5
  180. package/src/testing/proto/schema.proto +0 -15
  181. package/src/testing/replicator.ts +0 -184
  182. /package/dist/types/src/extensions/{code.d.ts → markdown/code.d.ts} +0 -0
  183. /package/dist/types/src/extensions/{hr.d.ts → markdown/hr.d.ts} +0 -0
  184. /package/dist/types/src/extensions/{image.d.ts → markdown/image.d.ts} +0 -0
  185. /package/dist/types/src/extensions/{link.d.ts → markdown/link.d.ts} +0 -0
  186. /package/dist/types/src/extensions/{table.d.ts → markdown/table.d.ts} +0 -0
  187. /package/src/extensions/{image.ts → markdown/image.ts} +0 -0
  188. /package/src/extensions/{table.ts → markdown/table.ts} +0 -0
@@ -0,0 +1,29 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import { type EditorView } from '@codemirror/view';
6
+ import { type RefCallback, useState } from 'react';
7
+
8
+ /**
9
+ * Hook for accessing the editor view.
10
+ *
11
+ * ```tsx
12
+ * const Test = () => {
13
+ * const [editorRef, editorView] = useEditorView();
14
+ * useEffect(() => {
15
+ * editorView?.focus();
16
+ * }, [editorView]);
17
+ * return <TextEditor ref={editorRef} />;
18
+ * };
19
+ * ```
20
+ */
21
+ export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
22
+ const [view, setView] = useState<EditorView | null>(null);
23
+ return [
24
+ (ref: EditorView | null) => {
25
+ setView(ref);
26
+ },
27
+ view,
28
+ ];
29
+ };
@@ -0,0 +1,153 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import {
6
+ EditorSelection,
7
+ EditorState,
8
+ type EditorStateConfig,
9
+ type Extension,
10
+ type StateEffect,
11
+ } from '@codemirror/state';
12
+ import { EditorView } from '@codemirror/view';
13
+ import { type RefObject, useEffect, useRef, useState } from 'react';
14
+
15
+ import { log } from '@dxos/log';
16
+ import { type ThemeMode } from '@dxos/react-ui';
17
+ import { isNotFalsy } from '@dxos/util';
18
+
19
+ import { type ThemeStyles } from '..//styles';
20
+ import { defaultTheme } from '../themes';
21
+ import { logChanges } from '../util';
22
+
23
+ export type UseTextEditorOptions = {
24
+ autoFocus?: boolean;
25
+ scrollTo?: StateEffect<any>;
26
+ debug?: boolean;
27
+ } & EditorStateConfig;
28
+
29
+ export type UseTextEditor = {
30
+ parentRef: RefObject<HTMLDivElement>;
31
+ view?: EditorView;
32
+ };
33
+
34
+ /**
35
+ * Hook for creating editor.
36
+ */
37
+ export const useTextEditor = ({
38
+ autoFocus,
39
+ scrollTo,
40
+ debug,
41
+ doc,
42
+ selection,
43
+ extensions,
44
+ }: UseTextEditorOptions = {}): UseTextEditor => {
45
+ const onUpdate = useRef<() => void>();
46
+ const [view, setView] = useState<EditorView>();
47
+ const parentRef = useRef<HTMLDivElement>(null);
48
+ useEffect(() => {
49
+ if (parentRef.current) {
50
+ // https://codemirror.net/docs/ref/#state.EditorStateConfig
51
+ const state = EditorState.create({
52
+ doc,
53
+ selection,
54
+ extensions: [
55
+ // TODO(burdon): Doesn't catch errors in keymap functions.
56
+ EditorView.exceptionSink.of((err) => {
57
+ log.catch(err);
58
+ }),
59
+ extensions,
60
+ EditorView.updateListener.of(() => {
61
+ onUpdate.current?.();
62
+ }),
63
+ ].filter(isNotFalsy),
64
+ });
65
+
66
+ // https://codemirror.net/docs/ref/#view.EditorViewConfig
67
+ const view = new EditorView({
68
+ parent: parentRef.current,
69
+ scrollTo,
70
+ state,
71
+ // NOTE: Uncomment to debug/monitor all transactions.
72
+ // https://codemirror.net/docs/ref/#view.EditorView.dispatch
73
+ dispatchTransactions: (trs, view) => {
74
+ if (debug) {
75
+ logChanges(trs);
76
+ }
77
+ view.update(trs);
78
+ },
79
+ });
80
+
81
+ setView(view);
82
+ }
83
+
84
+ return () => {
85
+ view?.destroy();
86
+ };
87
+ }, [parentRef]);
88
+
89
+ useEffect(() => {
90
+ if (view) {
91
+ // Select end of line if not specified.
92
+ if (!selection && !view.state.selection.main.anchor) {
93
+ selection = EditorSelection.single(view.state.doc.line(1).to);
94
+ }
95
+
96
+ // Set selection after first update (since content may rerender on focus).
97
+ // TODO(burdon): BUG on first render may appear in middle of formatted heading.
98
+ // TODO(burdon): Make invisible until first render?
99
+ if (selection || scrollTo) {
100
+ onUpdate.current = () => {
101
+ onUpdate.current = undefined;
102
+ view.dispatch({ selection, effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
103
+ };
104
+ }
105
+
106
+ if (autoFocus) {
107
+ view.focus();
108
+ }
109
+ }
110
+ }, [view, autoFocus, selection, scrollTo]);
111
+
112
+ return { parentRef, view };
113
+ };
114
+
115
+ // TODO(burdon): Factor out extension factories.
116
+
117
+ export type DataExtensionsOptions = {
118
+ readonly?: boolean;
119
+ };
120
+
121
+ // TODO(burdon): Pass in TextObject (remove model).
122
+ export const createDataExtensions = ({ readonly = false } = {}): Extension => {
123
+ return [
124
+ //
125
+ EditorState.readOnly.of(readonly),
126
+ EditorView.editable.of(!readonly),
127
+ ];
128
+ };
129
+
130
+ export type ThemeExtensionsOptions = {
131
+ theme?: ThemeStyles;
132
+ themeMode?: ThemeMode;
133
+ lineWrap?: boolean;
134
+ slots?: {
135
+ editor?: {
136
+ className?: string;
137
+ };
138
+ content?: {
139
+ className?: string;
140
+ };
141
+ };
142
+ };
143
+
144
+ export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
145
+ return [
146
+ //
147
+ EditorView.baseTheme(defaultTheme),
148
+ theme && EditorView.theme(theme),
149
+ EditorView.darkTheme.of(themeMode === 'dark'),
150
+ EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
151
+ EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
152
+ ].filter(isNotFalsy);
153
+ };
@@ -2,55 +2,19 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { StateField, type Extension } from '@codemirror/state';
6
- import { useEffect, useState } from 'react';
7
- import type * as YP from 'y-protocols/awareness';
5
+ import get from 'lodash.get';
6
+ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
8
7
 
9
- import { isAutomergeObject, type DocAccessor, type Space, type TextObject } from '@dxos/react-client/echo';
8
+ import { generateName } from '@dxos/display-name';
9
+ import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
10
+ import { invariant } from '@dxos/invariant';
11
+ import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
10
12
  import { type Identity } from '@dxos/react-client/halo';
11
- import type { YText, YXmlFragment } from '@dxos/text-model';
12
13
 
13
- import { createAutomergeModel } from './automerge';
14
- import { createYjsModel } from './yjs';
15
-
16
- // TODO(burdon): Factor out defs.
17
-
18
- /**
19
- * State field makes the model available to other extensions.
20
- */
21
- export const modelState = StateField.define<EditorModel | undefined>({
22
- create: () => undefined,
23
- update: (model) => model,
24
- });
25
-
26
- export type Range = {
27
- from: number;
28
- to: number;
29
- };
30
-
31
- export type CommentRange = {
32
- id: string;
33
- cursor: string; // TODO(burdon): Rename range.
34
- };
35
-
36
- // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
37
- export type EditorModel = {
38
- id: string;
39
- text: () => string;
40
- extension?: Extension;
41
-
42
- // TODO(burdon): Remove.
43
- content: string | YText | YXmlFragment | DocAccessor;
44
-
45
- // TODO(burdon): Move into extension.
46
- awareness?: YP.Awareness;
47
-
48
- // TODO(burdon): Remove.
49
- peer?: {
50
- id: string;
51
- name?: string;
52
- };
53
- };
14
+ import { SpaceAwarenessProvider } from './awareness-provider';
15
+ import { type EditorModel, modelState } from './defs';
16
+ import { automerge, awareness } from '../extensions';
17
+ import { cursorColor } from '../styles';
54
18
 
55
19
  // TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
56
20
  export type UseTextModelProps = {
@@ -59,8 +23,6 @@ export type UseTextModelProps = {
59
23
  text?: TextObject;
60
24
  };
61
25
 
62
- // TODO(burdon): Remove YJS/Automerge deps (from UI component -- create abstraction; incl. all ECHO/Space deps).
63
- // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
64
26
  export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
65
27
  const { identity, space, text } = props;
66
28
  const [model, setModel] = useState<EditorModel | undefined>();
@@ -68,13 +30,61 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
68
30
  return model;
69
31
  };
70
32
 
71
- const createModel = (props: UseTextModelProps) => {
72
- const { text } = props;
73
- if (isAutomergeObject(text)) {
74
- return createAutomergeModel(props);
75
- } else if (text?.doc) {
76
- return createYjsModel(props);
77
- } else {
78
- return undefined;
33
+ /**
34
+ * For use primarily in stories & tests so the dependence on TextObject can be avoided.
35
+ * @param id
36
+ * @param defaultContent
37
+ */
38
+ export const useInMemoryTextModel = ({
39
+ id,
40
+ defaultContent,
41
+ }: {
42
+ id: string;
43
+ defaultContent?: string;
44
+ }): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
45
+ const [content, setContent] = useState(defaultContent ?? '');
46
+ return { id, content, setContent, text: () => content };
47
+ };
48
+
49
+ const createModel = ({ space, identity, text }: UseTextModelProps) => {
50
+ invariant(isAutomergeObject(text));
51
+ const obj = text as any as AutomergeTextCompat;
52
+ const doc = getRawDoc(obj, [obj.field]);
53
+
54
+ const awarenessProvider =
55
+ space &&
56
+ new SpaceAwarenessProvider({
57
+ space,
58
+ channel: `automerge.awareness.${obj.id}`,
59
+ info: {
60
+ displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
61
+ color: cursorColor.color,
62
+ lightColor: cursorColor.light,
63
+ },
64
+ peerId: identity?.identityKey.toHex() ?? 'Anonymous',
65
+ });
66
+
67
+ const extensions = [
68
+ //
69
+ modelState.init(() => model),
70
+ automerge({ handle: doc.handle, path: doc.path }),
71
+ ];
72
+ if (awarenessProvider) {
73
+ extensions.push(awareness(awarenessProvider));
79
74
  }
75
+
76
+ const model: EditorModel = {
77
+ id: obj.id,
78
+ content: doc,
79
+ text: () => get(doc.handle.docSync(), doc.path),
80
+ extension: extensions,
81
+ peer: identity
82
+ ? {
83
+ id: identity.identityKey.toHex(),
84
+ name: identity.profile?.displayName,
85
+ }
86
+ : undefined,
87
+ };
88
+
89
+ return model;
80
90
  };
package/src/index.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
6
6
  export { Doc, YText, YXmlFragment } from '@dxos/text-model';
7
7
  export { type Extension } from '@codemirror/state';
8
- export { type EditorView } from '@codemirror/view';
8
+ export { type EditorView, keymap } from '@codemirror/view';
9
9
 
10
10
  export * from './components';
11
11
  export * from './extensions';
@@ -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: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl', '-ml-[10px]'],
13
- 2: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl', '-ml-[8px]'],
14
- 3: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl', '-ml-[7px]'],
15
- 4: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-xl', '-ml-[6px]'],
16
- 5: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-lg', '-ml-[5px]'],
17
- 6: ['mbs-4 mbe-2 font-medium text-inherit no-underline', '-ml-[4px]'],
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, readonly?: boolean) => {
21
- const [style, offset] = headings[level];
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';
@@ -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': {
@@ -60,11 +62,11 @@ export const defaultTheme: ThemeStyles = {
60
62
  fontSize: '16px',
61
63
  },
62
64
  '&light .cm-content': {
63
- color: get(tokens, 'extend.colors.neutral.900', 'black'),
65
+ color: get(tokens, 'extend.semanticColors.base.fg.light', 'black'),
64
66
  caretColor: 'black',
65
67
  },
66
68
  '&dark .cm-content': {
67
- color: get(tokens, 'extend.colors.neutral.100', 'white'),
69
+ color: get(tokens, 'extend.semanticColors.base.fg.dark', 'white'),
68
70
  caretColor: 'white',
69
71
  },
70
72
 
@@ -77,8 +79,11 @@ export const defaultTheme: ThemeStyles = {
77
79
  '&dark .cm-cursor, &dark .cm-dropCursor': {
78
80
  borderLeft: '2px solid white',
79
81
  },
80
- '.cm-placeholder': {
81
- fontWeight: 100,
82
+ '&light .cm-placeholder': {
83
+ color: get(tokens, 'extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
84
+ },
85
+ '&dark .cm-placeholder': {
86
+ color: get(tokens, 'extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
82
87
  },
83
88
 
84
89
  //
@@ -86,11 +91,9 @@ export const defaultTheme: ThemeStyles = {
86
91
  //
87
92
  '.cm-line': {
88
93
  paddingInline: 0,
89
- // TODO(burdon): Other values leave gaps between lines when highlighted.
90
- // lineHeight: 'normal',
91
94
  },
92
95
  '.cm-activeLine': {
93
- background: 'inherit',
96
+ background: 'transparent',
94
97
  },
95
98
 
96
99
  //
package/src/util.ts CHANGED
@@ -2,17 +2,40 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
+ import type { Transaction } from '@codemirror/state';
6
+
5
7
  import { log } from '@dxos/log';
6
8
 
7
9
  /**
8
10
  * CodeMirror callbacks swallow errors so wrap handlers.
9
11
  */
10
- // TODO(burdon): Figure out how to systematize this.
12
+ // TODO(burdon): EditorView.exceptionSink should catch errors.
11
13
  export const callbackWrapper = <T extends Function>(fn: T): T =>
12
14
  ((...args: any[]) => {
13
15
  try {
14
16
  return fn(...args);
15
- } catch (error) {
16
- log.catch(error);
17
+ } catch (err) {
18
+ log.catch(err);
17
19
  }
18
20
  }) as unknown as T;
21
+
22
+ export const logChanges = (trs: readonly Transaction[]) => {
23
+ const changes = trs
24
+ .flatMap((tr) => {
25
+ if (tr.changes.empty) {
26
+ return undefined;
27
+ }
28
+
29
+ const changes: any[] = [];
30
+ tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) =>
31
+ changes.push(JSON.stringify({ fromA, toA, fromB, toB, inserted: inserted.toString() })),
32
+ );
33
+
34
+ return changes;
35
+ })
36
+ .filter(Boolean);
37
+
38
+ if (changes.length) {
39
+ console.log('changes', changes);
40
+ }
41
+ };
@@ -1,12 +0,0 @@
1
- import { type StoryObj } from '@storybook/html';
2
- import { Client, type PublicKey } from '@dxos/react-client';
3
- declare const _default: {
4
- title: string;
5
- };
6
- export default _default;
7
- export declare const Default: StoryObj<{
8
- id: number;
9
- client: Client;
10
- spaceKey: PublicKey;
11
- }>;
12
- //# sourceMappingURL=codemirror.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"codemirror.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/codemirror.stories.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;AAU5D,wBAEE;AAqEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAoBjF,CAAC"}
@@ -1,26 +0,0 @@
1
- import '@dxosTheme';
2
- import { type EditorView } from '@codemirror/view';
3
- import React from 'react';
4
- type StoryProps = {
5
- text?: string;
6
- autoCreate?: boolean;
7
- };
8
- declare const _default: {
9
- title: string;
10
- component: React.ForwardRefExoticComponent<import("./TextEditor").TextEditorProps & React.RefAttributes<EditorView>>;
11
- decorators: import("@storybook/react").Decorator[];
12
- render: (args: StoryProps) => JSX.Element;
13
- };
14
- export default _default;
15
- export declare const Default: {
16
- args: {
17
- text: string;
18
- };
19
- };
20
- export declare const Demo: {
21
- args: {
22
- text: string;
23
- autoCreate: boolean;
24
- };
25
- };
26
- //# sourceMappingURL=comments.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"comments.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAG3D,OAAO,KAAwD,MAAM,OAAO,CAAC;AAmM7E,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;mBAoFe,UAAU;;AAJ3B,wBAKE;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAKhB,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,+CAmDhB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"hr.d.ts","sourceRoot":"","sources":["../../../../src/extensions/hr.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,EAAE,+CAsBd,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/extensions/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAG/G,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA8BlD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/extensions/link.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,mBAAmB,CAAC;AAkBpE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,aAAa,WAAW,KAAQ,SAsDhD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/extensions/table.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AASnH,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,eAAO,MAAM,KAAK,aAAa,YAAY,8BAM1C,CAAC"}
@@ -1,7 +0,0 @@
1
- import { ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
2
- export type TasklistOptions = {};
3
- export declare const tasklist: (options?: TasklistOptions) => ViewPlugin<{
4
- decorations: DecorationSet;
5
- update(update: ViewUpdate): void;
6
- }>;
7
- //# sourceMappingURL=tasklist.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tasklist.d.ts","sourceRoot":"","sources":["../../../../src/extensions/tasklist.ts"],"names":[],"mappings":"AAMA,OAAO,EAAsC,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAyCvH,MAAM,MAAM,eAAe,GAAG,EAAE,CAAC;AAEjC,eAAO,MAAM,QAAQ,aAAa,eAAe;;mBAS5B,UAAU;EAc9B,CAAC"}
@@ -1,4 +0,0 @@
1
- import * as Y from 'yjs';
2
- import { type CursorConverter } from '../cursor';
3
- export declare const cursorConverter: (text: Y.Text) => CursorConverter;
4
- //# sourceMappingURL=cursor.d.ts.map
@@ -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,2 +0,0 @@
1
- export * from './yjs';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/yjs/index.ts"],"names":[],"mappings":"AAIA,cAAc,OAAO,CAAC"}
@@ -1,4 +0,0 @@
1
- import type * as YP from 'y-protocols/awareness';
2
- import type { YText } from '@dxos/text-model';
3
- export declare const yjs: (content: YText, awareness?: YP.Awareness) => import("@codemirror/state").Extension[];
4
- //# sourceMappingURL=yjs.d.ts.map
@@ -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,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=yjs.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"yjs.test.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/yjs/yjs.test.ts"],"names":[],"mappings":""}
@@ -1,3 +0,0 @@
1
- import { type EditorModel, type UseTextModelProps } from './useTextModel';
2
- export declare const createAutomergeModel: ({ space, identity, text }: UseTextModelProps) => EditorModel;
3
- //# sourceMappingURL=automerge.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"automerge.d.ts","sourceRoot":"","sources":["../../../../src/hooks/automerge.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,WAAW,EAAc,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAItF,eAAO,MAAM,oBAAoB,8BAA+B,iBAAiB,KAAG,WAqCnF,CAAC"}
@@ -1,27 +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, type UseTextModelProps } from './useTextModel';
6
- export declare const createYjsModel: ({ identity, space, text }: UseTextModelProps) => EditorModel;
7
- /**
8
- * Yjs awareness provider on top of a DXOS space.
9
- */
10
- export declare class YAwarenessProvider extends Observable<any> {
11
- private readonly _space;
12
- private readonly _awareness;
13
- private readonly _clientId;
14
- private readonly _channel;
15
- constructor({ space, doc, channel, awareness, }: {
16
- space: Space;
17
- doc: Doc;
18
- channel: string;
19
- awareness?: YP.Awareness;
20
- });
21
- get awareness(): YP.Awareness;
22
- private _handleAwarenessUpdate;
23
- private _handleSpaceMessage;
24
- private _readMessage;
25
- private _handleBeforeUnload;
26
- }
27
- //# 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,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGtF,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,3 +0,0 @@
1
- export * from './proto';
2
- export * from './replicator';
3
- //# sourceMappingURL=index.d.ts.map
@@ -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,2 +0,0 @@
1
- export * from './gen/schema';
2
- //# sourceMappingURL=index.d.ts.map