@dxos/react-ui-editor 0.3.11-main.f437bee → 0.3.11-main.f4c1077

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 (197) hide show
  1. package/dist/lib/browser/index.mjs +2776 -1291
  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 +13 -10
  7. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  8. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +4 -4
  9. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
  10. package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map +1 -1
  11. package/dist/types/src/components/TextEditor/{yjs.stories.d.ts → hooks.stories.d.ts} +13 -2
  12. package/dist/types/src/components/TextEditor/hooks.stories.d.ts.map +1 -0
  13. package/dist/types/src/components/Toolbar/Toolbar.d.ts +29 -0
  14. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -0
  15. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +25 -0
  16. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -0
  17. package/dist/types/src/components/Toolbar/index.d.ts +2 -0
  18. package/dist/types/src/components/Toolbar/index.d.ts.map +1 -0
  19. package/dist/types/src/components/index.d.ts +1 -0
  20. package/dist/types/src/components/index.d.ts.map +1 -1
  21. package/dist/types/src/extensions/autocomplete.d.ts.map +1 -1
  22. package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -1
  23. package/dist/types/src/extensions/automerge/automerge.spec.d.ts +2 -0
  24. package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map +1 -0
  25. package/dist/types/src/extensions/automerge/automerge.test.d.ts +2 -0
  26. package/dist/types/src/extensions/automerge/automerge.test.d.ts.map +1 -0
  27. package/dist/types/src/extensions/automerge/cursor.d.ts +1 -1
  28. package/dist/types/src/extensions/automerge/cursor.d.ts.map +1 -1
  29. package/dist/types/src/extensions/automerge/defs.d.ts +9 -11
  30. package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
  31. package/dist/types/src/extensions/automerge/index.d.ts +0 -1
  32. package/dist/types/src/extensions/automerge/index.d.ts.map +1 -1
  33. package/dist/types/src/extensions/automerge/semaphore.d.ts +8 -12
  34. package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -1
  35. package/dist/types/src/extensions/automerge/update-automerge.d.ts +2 -2
  36. package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
  37. package/dist/types/src/extensions/awareness.d.ts +2 -2
  38. package/dist/types/src/extensions/awareness.d.ts.map +1 -1
  39. package/dist/types/src/extensions/basic.d.ts +4 -5
  40. package/dist/types/src/extensions/basic.d.ts.map +1 -1
  41. package/dist/types/src/extensions/comments.d.ts +41 -20
  42. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  43. package/dist/types/src/{util → extensions}/cursor.d.ts +10 -2
  44. package/dist/types/src/extensions/cursor.d.ts.map +1 -0
  45. package/dist/types/src/extensions/index.d.ts +2 -7
  46. package/dist/types/src/extensions/index.d.ts.map +1 -1
  47. package/dist/types/src/extensions/markdown/bundle.d.ts +3 -6
  48. package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -1
  49. package/dist/types/src/extensions/markdown/code.d.ts.map +1 -0
  50. package/dist/types/src/extensions/markdown/formatting.d.ts +58 -0
  51. package/dist/types/src/extensions/markdown/formatting.d.ts.map +1 -0
  52. package/dist/types/src/extensions/markdown/formatting.test.d.ts +3 -0
  53. package/dist/types/src/extensions/markdown/formatting.test.d.ts.map +1 -0
  54. package/dist/types/src/extensions/markdown/heading.d.ts +6 -0
  55. package/dist/types/src/extensions/markdown/heading.d.ts.map +1 -0
  56. package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
  57. package/dist/types/src/extensions/markdown/hr.d.ts.map +1 -0
  58. package/dist/types/src/extensions/markdown/image.d.ts.map +1 -0
  59. package/dist/types/src/extensions/markdown/index.d.ts +8 -0
  60. package/dist/types/src/extensions/markdown/index.d.ts.map +1 -1
  61. package/dist/types/src/extensions/markdown/link.d.ts.map +1 -0
  62. package/dist/types/src/extensions/markdown/table.d.ts.map +1 -0
  63. package/dist/types/src/extensions/markdown/tasklist.d.ts.map +1 -0
  64. package/dist/types/src/extensions/mention.d.ts.map +1 -1
  65. package/dist/types/src/extensions/outliner.d.ts +4 -0
  66. package/dist/types/src/extensions/outliner.d.ts.map +1 -0
  67. package/dist/types/src/hooks/awareness-provider.d.ts +7 -4
  68. package/dist/types/src/hooks/awareness-provider.d.ts.map +1 -1
  69. package/dist/types/src/hooks/defs.d.ts +25 -0
  70. package/dist/types/src/hooks/defs.d.ts.map +1 -0
  71. package/dist/types/src/hooks/index.d.ts +4 -2
  72. package/dist/types/src/hooks/index.d.ts.map +1 -1
  73. package/dist/types/src/hooks/useActionHandler.d.ts +4 -0
  74. package/dist/types/src/hooks/useActionHandler.d.ts.map +1 -0
  75. package/dist/types/src/hooks/useEditorView.d.ts +17 -0
  76. package/dist/types/src/hooks/useEditorView.d.ts.map +1 -0
  77. package/dist/types/src/hooks/useTextEditor.d.ts +39 -0
  78. package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -0
  79. package/dist/types/src/hooks/useTextModel.d.ts +14 -32
  80. package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
  81. package/dist/types/src/index.d.ts +1 -1
  82. package/dist/types/src/index.d.ts.map +1 -1
  83. package/dist/types/src/styles/markdown.d.ts +2 -2
  84. package/dist/types/src/styles/markdown.d.ts.map +1 -1
  85. package/dist/types/src/themes/default.d.ts.map +1 -1
  86. package/dist/types/src/util.d.ts +7 -0
  87. package/dist/types/src/util.d.ts.map +1 -0
  88. package/package.json +48 -37
  89. package/src/components/TextEditor/MarkdownEditor.stories.tsx +83 -92
  90. package/src/components/TextEditor/TextEditor.stories.tsx +10 -43
  91. package/src/components/TextEditor/TextEditor.tsx +115 -89
  92. package/src/components/TextEditor/automerge.stories.tsx +1 -2
  93. package/src/components/TextEditor/hooks.stories.tsx +111 -0
  94. package/src/components/Toolbar/Toolbar.stories.tsx +102 -0
  95. package/src/components/Toolbar/Toolbar.tsx +264 -0
  96. package/src/components/Toolbar/index.ts +5 -0
  97. package/src/components/index.ts +1 -0
  98. package/src/extensions/autocomplete.ts +6 -3
  99. package/src/extensions/automerge/automerge.spec.tsx +76 -0
  100. package/src/extensions/automerge/automerge.test.ts +13 -0
  101. package/src/extensions/automerge/automerge.ts +55 -46
  102. package/src/extensions/automerge/cursor.ts +5 -4
  103. package/src/extensions/automerge/defs.ts +13 -34
  104. package/src/extensions/automerge/index.ts +0 -1
  105. package/src/extensions/automerge/semaphore.ts +33 -32
  106. package/src/extensions/automerge/update-automerge.ts +14 -8
  107. package/src/extensions/automerge/update-codemirror.ts +5 -5
  108. package/src/extensions/awareness.ts +46 -49
  109. package/src/extensions/basic.ts +17 -10
  110. package/src/extensions/blast.ts +4 -1
  111. package/src/extensions/comments.ts +331 -265
  112. package/src/extensions/cursor.ts +50 -0
  113. package/src/extensions/index.ts +2 -7
  114. package/src/extensions/markdown/bundle.ts +23 -28
  115. package/src/extensions/markdown/code.ts +150 -0
  116. package/src/extensions/markdown/formatting.test.ts +482 -0
  117. package/src/extensions/markdown/formatting.ts +1237 -0
  118. package/src/extensions/markdown/heading.ts +59 -0
  119. package/src/extensions/markdown/highlight.ts +9 -23
  120. package/src/extensions/markdown/hr.ts +71 -0
  121. package/src/extensions/{image.ts → markdown/image.ts} +2 -2
  122. package/src/extensions/markdown/index.ts +8 -0
  123. package/src/extensions/{link.ts → markdown/link.ts} +20 -11
  124. package/src/extensions/{table.ts → markdown/table.ts} +2 -2
  125. package/src/extensions/markdown/tasklist.ts +110 -0
  126. package/src/extensions/mention.ts +9 -2
  127. package/src/extensions/outliner.ts +12 -0
  128. package/src/hooks/awareness-provider.ts +24 -20
  129. package/src/hooks/defs.ts +42 -0
  130. package/src/hooks/index.ts +5 -2
  131. package/src/hooks/useActionHandler.ts +93 -0
  132. package/src/hooks/useEditorView.ts +29 -0
  133. package/src/hooks/useTextEditor.ts +153 -0
  134. package/src/hooks/useTextModel.ts +66 -59
  135. package/src/index.ts +1 -1
  136. package/src/styles/markdown.ts +9 -12
  137. package/src/themes/default.ts +26 -56
  138. package/src/util.ts +41 -0
  139. package/dist/types/src/components/TextEditor/codemirror.stories.d.ts +0 -12
  140. package/dist/types/src/components/TextEditor/codemirror.stories.d.ts.map +0 -1
  141. package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +0 -1
  142. package/dist/types/src/extensions/code.d.ts.map +0 -1
  143. package/dist/types/src/extensions/hr.d.ts.map +0 -1
  144. package/dist/types/src/extensions/image.d.ts.map +0 -1
  145. package/dist/types/src/extensions/link.d.ts.map +0 -1
  146. package/dist/types/src/extensions/table.d.ts.map +0 -1
  147. package/dist/types/src/extensions/tasklist.d.ts.map +0 -1
  148. package/dist/types/src/extensions/yjs/cursor.d.ts +0 -4
  149. package/dist/types/src/extensions/yjs/cursor.d.ts.map +0 -1
  150. package/dist/types/src/extensions/yjs/index.d.ts +0 -2
  151. package/dist/types/src/extensions/yjs/index.d.ts.map +0 -1
  152. package/dist/types/src/extensions/yjs/yjs.d.ts +0 -4
  153. package/dist/types/src/extensions/yjs/yjs.d.ts.map +0 -1
  154. package/dist/types/src/extensions/yjs/yjs.test.d.ts +0 -2
  155. package/dist/types/src/extensions/yjs/yjs.test.d.ts.map +0 -1
  156. package/dist/types/src/hooks/automerge.d.ts +0 -3
  157. package/dist/types/src/hooks/automerge.d.ts.map +0 -1
  158. package/dist/types/src/hooks/yjs.d.ts +0 -27
  159. package/dist/types/src/hooks/yjs.d.ts.map +0 -1
  160. package/dist/types/src/testing/index.d.ts +0 -3
  161. package/dist/types/src/testing/index.d.ts.map +0 -1
  162. package/dist/types/src/testing/proto/gen/schema.d.ts +0 -15
  163. package/dist/types/src/testing/proto/gen/schema.d.ts.map +0 -1
  164. package/dist/types/src/testing/proto/index.d.ts +0 -2
  165. package/dist/types/src/testing/proto/index.d.ts.map +0 -1
  166. package/dist/types/src/testing/replicator.d.ts +0 -45
  167. package/dist/types/src/testing/replicator.d.ts.map +0 -1
  168. package/dist/types/src/util/cursor.d.ts.map +0 -1
  169. package/dist/types/src/util/index.d.ts +0 -3
  170. package/dist/types/src/util/index.d.ts.map +0 -1
  171. package/dist/types/src/util/util.d.ts +0 -5
  172. package/dist/types/src/util/util.d.ts.map +0 -1
  173. package/src/components/TextEditor/codemirror.stories.ts +0 -115
  174. package/src/components/TextEditor/yjs.stories.tsx +0 -56
  175. package/src/extensions/code.ts +0 -98
  176. package/src/extensions/hr.ts +0 -73
  177. package/src/extensions/tasklist.ts +0 -119
  178. package/src/extensions/yjs/cursor.ts +0 -21
  179. package/src/extensions/yjs/index.ts +0 -5
  180. package/src/extensions/yjs/yjs.test.ts +0 -35
  181. package/src/extensions/yjs/yjs.ts +0 -16
  182. package/src/hooks/automerge.ts +0 -52
  183. package/src/hooks/yjs.ts +0 -178
  184. package/src/testing/index.ts +0 -6
  185. package/src/testing/proto/gen/schema.ts +0 -49
  186. package/src/testing/proto/index.ts +0 -5
  187. package/src/testing/proto/schema.proto +0 -15
  188. package/src/testing/replicator.ts +0 -184
  189. package/src/util/cursor.ts +0 -29
  190. package/src/util/index.ts +0 -6
  191. package/src/util/util.ts +0 -18
  192. /package/dist/types/src/extensions/{code.d.ts → markdown/code.d.ts} +0 -0
  193. /package/dist/types/src/extensions/{hr.d.ts → markdown/hr.d.ts} +0 -0
  194. /package/dist/types/src/extensions/{image.d.ts → markdown/image.d.ts} +0 -0
  195. /package/dist/types/src/extensions/{link.d.ts → markdown/link.d.ts} +0 -0
  196. /package/dist/types/src/extensions/{table.d.ts → markdown/table.d.ts} +0 -0
  197. /package/dist/types/src/extensions/{tasklist.d.ts → markdown/tasklist.d.ts} +0 -0
@@ -0,0 +1,59 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { syntaxTree } from '@codemirror/language';
6
+ import { RangeSetBuilder } from '@codemirror/state';
7
+ import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
8
+
9
+ const buildDecorations = (view: EditorView): DecorationSet => {
10
+ const builder = new RangeSetBuilder<Decoration>();
11
+ const { state } = view;
12
+ const cursor = state.selection.main.head;
13
+
14
+ for (const { from, to } of view.visibleRanges) {
15
+ syntaxTree(state).iterate({
16
+ enter: (node) => {
17
+ switch (node.name) {
18
+ case 'ATXHeading1':
19
+ case 'ATXHeading2':
20
+ case 'ATXHeading3':
21
+ case 'ATXHeading4':
22
+ case 'ATXHeading5':
23
+ case 'ATXHeading6': {
24
+ const mark = node.node.getChild('HeaderMark');
25
+ if (mark) {
26
+ if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
27
+ builder.add(mark.from, mark.to + 1, Decoration.replace({}));
28
+ }
29
+ }
30
+ }
31
+ }
32
+ },
33
+ from,
34
+ to,
35
+ });
36
+ }
37
+
38
+ return builder.finish();
39
+ };
40
+
41
+ export const heading = () => {
42
+ return [
43
+ ViewPlugin.fromClass(
44
+ class {
45
+ decorations: DecorationSet;
46
+ constructor(view: EditorView) {
47
+ this.decorations = buildDecorations(view);
48
+ }
49
+
50
+ update(update: ViewUpdate) {
51
+ this.decorations = buildDecorations(update.view);
52
+ }
53
+ },
54
+ {
55
+ decorations: (value) => value.decorations,
56
+ },
57
+ ),
58
+ ];
59
+ };
@@ -31,7 +31,6 @@ export const markdownTags = {
31
31
  CodeText: Tag.define(),
32
32
  EmphasisMark: Tag.define(),
33
33
  HeaderMark: Tag.define(),
34
- // HorizontalRule: Tag.define(),
35
34
  InlineCode: Tag.define(),
36
35
  LinkLabel: Tag.define(),
37
36
  LinkReference: Tag.define(),
@@ -129,13 +128,13 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
129
128
  // Markdown marks.
130
129
  {
131
130
  tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
132
- class: readonly ? 'hidden' : mark,
131
+ class: mark,
133
132
  },
134
133
 
135
134
  // E.g., code block language (after ```).
136
135
  {
137
136
  tag: [tags.function(tags.variableName), tags.labelName],
138
- class: readonly ? 'hidden' : codeMark,
137
+ class: codeMark,
139
138
  },
140
139
 
141
140
  {
@@ -144,12 +143,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
144
143
  },
145
144
 
146
145
  // Headings.
147
- { tag: tags.heading1, class: heading(1, readonly) },
148
- { tag: tags.heading2, class: heading(2, readonly) },
149
- { tag: tags.heading3, class: heading(3, readonly) },
150
- { tag: tags.heading4, class: heading(4, readonly) },
151
- { tag: tags.heading5, class: heading(5, readonly) },
152
- { tag: tags.heading6, class: heading(6, readonly) },
146
+ { tag: tags.heading1, class: heading(1) },
147
+ { tag: tags.heading2, class: heading(2) },
148
+ { tag: tags.heading3, class: heading(3) },
149
+ { tag: tags.heading4, class: heading(4) },
150
+ { tag: tags.heading5, class: heading(5) },
151
+ { tag: tags.heading6, class: heading(6) },
153
152
 
154
153
  // Emphasis.
155
154
  { tag: tags.emphasis, class: italic },
@@ -166,7 +165,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
166
165
  // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
167
166
  // when a language is specified. In this case, the syntax highlighting extensions will colorize
168
167
  // the code, but all other CSS properties will be inherited.
169
- // IMPORTANT: Therefore, the fenced code block will use the base editor font.
168
+ // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
170
169
  {
171
170
  tag: [markdownTags.CodeText, markdownTags.InlineCode],
172
171
  class: code,
@@ -177,23 +176,10 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
177
176
  class: blockquote,
178
177
  },
179
178
 
180
- // TODO(burdon): Replace with extension.
181
- // {
182
- // tag: [markdownTags.HorizontalRule],
183
- // class: mx(horizontalRule, readonly && '-indent-[100rem]'),
184
- // },
185
-
186
- // TODO(burdon): Only if being edited.
187
179
  {
188
180
  tag: [markdownTags.TableCell],
189
181
  class: 'font-mono',
190
182
  },
191
-
192
- // Main content, paragraphs, etc.
193
- // {
194
- // tag: [tags.content],
195
- // fontFamily: getToken('fontFamily.body', []).join(','),
196
- // },
197
183
  ],
198
184
  {
199
185
  scope: markdownLanguage,
@@ -0,0 +1,71 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { syntaxTree } from '@codemirror/language';
6
+ import { RangeSetBuilder } from '@codemirror/state';
7
+ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
8
+
9
+ import { getToken } from '../../styles';
10
+
11
+ // TODO(burdon): Reconcile with theme.
12
+ const styles = EditorView.baseTheme({
13
+ '& .cm-hr': {
14
+ // Note that block-level decorations should not have vertical margins,
15
+ borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
16
+ },
17
+ });
18
+
19
+ class HorizontalRuleWidget extends WidgetType {
20
+ override toDOM() {
21
+ const el = document.createElement('div');
22
+ el.className = 'cm-hr';
23
+ return el;
24
+ }
25
+ }
26
+
27
+ const decoration = Decoration.replace({ widget: new HorizontalRuleWidget() });
28
+
29
+ const buildDecorations = (view: EditorView): DecorationSet => {
30
+ const builder = new RangeSetBuilder<Decoration>();
31
+ const { state } = view;
32
+ const cursor = state.selection.main.head;
33
+
34
+ for (const { from, to } of view.visibleRanges) {
35
+ syntaxTree(state).iterate({
36
+ enter: (node) => {
37
+ if (node.name === 'HorizontalRule') {
38
+ // Check if cursor is inside text.
39
+ if (cursor <= node.from || cursor >= node.to) {
40
+ builder.add(node.from, node.to, decoration);
41
+ }
42
+ }
43
+ },
44
+ from,
45
+ to,
46
+ });
47
+ }
48
+
49
+ return builder.finish();
50
+ };
51
+
52
+ export const hr = () => {
53
+ return [
54
+ ViewPlugin.fromClass(
55
+ class {
56
+ decorations: DecorationSet;
57
+ constructor(view: EditorView) {
58
+ this.decorations = buildDecorations(view);
59
+ }
60
+
61
+ update(update: ViewUpdate) {
62
+ this.decorations = buildDecorations(update.view);
63
+ }
64
+ },
65
+ {
66
+ decorations: (value) => value.decorations,
67
+ },
68
+ ),
69
+ styles,
70
+ ];
71
+ };
@@ -72,11 +72,11 @@ class ImageWidget extends WidgetType {
72
72
  super();
73
73
  }
74
74
 
75
- override eq(other: WidgetType) {
75
+ override eq(other: this) {
76
76
  return this._url === (other as any as ImageWidget)._url;
77
77
  }
78
78
 
79
- toDOM(view: EditorView) {
79
+ override toDOM(view: EditorView) {
80
80
  const img = document.createElement('img');
81
81
  img.setAttribute('src', this._url);
82
82
  img.setAttribute('class', 'cm-image');
@@ -3,4 +3,12 @@
3
3
  //
4
4
 
5
5
  export * from './bundle';
6
+ export * from './code';
7
+ export * from './formatting';
8
+ export * from './heading';
6
9
  export * from './highlight';
10
+ export * from './hr';
11
+ export * from './image';
12
+ export * from './link';
13
+ export * from './table';
14
+ export * from './tasklist';
@@ -6,13 +6,13 @@
6
6
  import { syntaxTree } from '@codemirror/language';
7
7
  import { type Extension, RangeSetBuilder } from '@codemirror/state';
8
8
  import {
9
+ hoverTooltip,
9
10
  Decoration,
11
+ type DecorationSet,
10
12
  type EditorView,
11
- WidgetType,
12
- hoverTooltip,
13
13
  ViewPlugin,
14
14
  type ViewUpdate,
15
- type DecorationSet,
15
+ WidgetType,
16
16
  } from '@codemirror/view';
17
17
  import { type SyntaxNode } from '@lezer/common';
18
18
 
@@ -22,6 +22,7 @@ import { tooltipContent } from '@dxos/react-ui-theme';
22
22
  // https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
23
23
  // https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
24
24
 
25
+ // TODO(burdon): Callback to dynamically lookup title of linked pages.
25
26
  export type LinkOptions = {
26
27
  link?: boolean;
27
28
  onHover?: (el: Element, url: string) => void;
@@ -37,7 +38,6 @@ export const link = (options: LinkOptions = {}): Extension => {
37
38
  ViewPlugin.fromClass(
38
39
  class {
39
40
  decorations: DecorationSet;
40
-
41
41
  constructor(view: EditorView) {
42
42
  this.decorations = buildDecorations(view, options);
43
43
  }
@@ -49,7 +49,7 @@ export const link = (options: LinkOptions = {}): Extension => {
49
49
  }
50
50
  },
51
51
  {
52
- decorations: (v) => v.decorations,
52
+ decorations: (value) => value.decorations,
53
53
  },
54
54
  ),
55
55
  ];
@@ -65,10 +65,12 @@ export const link = (options: LinkOptions = {}): Extension => {
65
65
  for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
66
66
  link = node.name === 'Link' ? node : null;
67
67
  }
68
+
68
69
  const url = link && link.getChild('URL');
69
70
  if (!url || !link) {
70
71
  return null;
71
72
  }
73
+
72
74
  const urlText = view.state.sliceDoc(url.from, url.to);
73
75
  return {
74
76
  pos: link.from,
@@ -89,15 +91,18 @@ export const link = (options: LinkOptions = {}): Extension => {
89
91
  };
90
92
 
91
93
  class LinkButton extends WidgetType {
92
- constructor(private readonly _url: string, private readonly _onAttach: LinkOptions['onRender']) {
94
+ constructor(
95
+ private readonly _url: string,
96
+ private readonly _onAttach: LinkOptions['onRender'],
97
+ ) {
93
98
  super();
94
99
  }
95
100
 
96
- override eq(other: LinkButton) {
101
+ override eq(other: this) {
97
102
  return this._url === other._url;
98
103
  }
99
104
 
100
- toDOM(view: EditorView) {
105
+ override toDOM(view: EditorView) {
101
106
  const el = document.createElement('span');
102
107
  this._onAttach!(el, this._url);
103
108
  return el;
@@ -105,15 +110,18 @@ class LinkButton extends WidgetType {
105
110
  }
106
111
 
107
112
  class LinkText extends WidgetType {
108
- constructor(private readonly _text: string, private readonly _url?: string) {
113
+ constructor(
114
+ private readonly _text: string,
115
+ private readonly _url?: string,
116
+ ) {
109
117
  super();
110
118
  }
111
119
 
112
- override eq(other: LinkText) {
120
+ override eq(other: this) {
113
121
  return this._url === other._url;
114
122
  }
115
123
 
116
- toDOM(view: EditorView) {
124
+ override toDOM(view: EditorView) {
117
125
  const link = document.createElement('a');
118
126
  link.setAttribute('class', 'cm-link');
119
127
  link.textContent = this._text;
@@ -158,6 +166,7 @@ const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet
158
166
  return false;
159
167
  }
160
168
 
169
+ // TODO(burdon): Don't expand if moving cursor up/down.
161
170
  if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
162
171
  builder.add(
163
172
  node.from,
@@ -97,14 +97,14 @@ class TableWidget extends WidgetType {
97
97
  super();
98
98
  }
99
99
 
100
- override eq(other: TableWidget) {
100
+ override eq(other: this) {
101
101
  return (
102
102
  this._table.header?.join() === other._table.header?.join() &&
103
103
  this._table.rows?.join() === other._table.rows?.join()
104
104
  );
105
105
  }
106
106
 
107
- toDOM(view: EditorView) {
107
+ override toDOM(view: EditorView) {
108
108
  const table = document.createElement('table');
109
109
 
110
110
  {
@@ -0,0 +1,110 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { syntaxTree } from '@codemirror/language';
6
+ import { RangeSetBuilder } from '@codemirror/state';
7
+ import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
8
+
9
+ import { getToken } from '../../styles';
10
+
11
+ // TODO(burdon): Reconcile with theme.
12
+ const styles = EditorView.baseTheme({
13
+ '& .cm-task': {
14
+ color: getToken('extend.colors.blue.500'),
15
+ },
16
+ '& .cm-task-checkbox': {
17
+ marginLeft: '4px',
18
+ marginRight: '4px',
19
+ },
20
+ });
21
+
22
+ class CheckboxWidget extends WidgetType {
23
+ constructor(private _checked: boolean) {
24
+ super();
25
+ }
26
+
27
+ override eq(other: this) {
28
+ return this._checked === other._checked;
29
+ }
30
+
31
+ override toDOM(view: EditorView) {
32
+ const input = document.createElement('input');
33
+ input.className = 'cm-task-checkbox';
34
+ input.type = 'checkbox';
35
+ input.checked = this._checked;
36
+ if (view.state.readOnly) {
37
+ input.setAttribute('disabled', 'true');
38
+ } else {
39
+ input.onmousedown = (event: Event) => {
40
+ const pos = view.posAtDOM(input);
41
+ const text = view.state.sliceDoc(pos, pos + 3);
42
+ if (text === (this._checked ? '[x]' : '[ ]')) {
43
+ view.dispatch({
44
+ changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
45
+ });
46
+ event.preventDefault();
47
+ }
48
+ };
49
+ }
50
+
51
+ return input;
52
+ }
53
+
54
+ override ignoreEvent() {
55
+ return false;
56
+ }
57
+ }
58
+
59
+ const checkedDecoration = Decoration.replace({ widget: new CheckboxWidget(true) });
60
+ const uncheckedDecoration = Decoration.replace({ widget: new CheckboxWidget(false) });
61
+
62
+ const buildDecorations = (view: EditorView): DecorationSet => {
63
+ const builder = new RangeSetBuilder<Decoration>();
64
+ const { state } = view;
65
+ const cursor = state.selection.main.head;
66
+
67
+ for (const { from, to } of view.visibleRanges) {
68
+ syntaxTree(state).iterate({
69
+ enter: (node) => {
70
+ if (node.name === 'TaskMarker') {
71
+ // Check if cursor is inside text.
72
+ if (cursor < node.from || cursor > node.to) {
73
+ const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
74
+ builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
75
+ builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
76
+ }
77
+ }
78
+ },
79
+ from,
80
+ to,
81
+ });
82
+ }
83
+
84
+ return builder.finish();
85
+ };
86
+
87
+ export type TasklistOptions = {};
88
+
89
+ export const tasklist = (options: TasklistOptions = {}) => {
90
+ return [
91
+ ViewPlugin.fromClass(
92
+ class {
93
+ decorations: DecorationSet;
94
+ constructor(view: EditorView) {
95
+ this.decorations = buildDecorations(view);
96
+ }
97
+
98
+ update(update: ViewUpdate) {
99
+ if (update.docChanged || update.viewportChanged || update.selectionSet) {
100
+ this.decorations = buildDecorations(update.view);
101
+ }
102
+ }
103
+ },
104
+ {
105
+ decorations: (value) => value.decorations,
106
+ },
107
+ ),
108
+ styles,
109
+ ];
110
+ };
@@ -9,18 +9,25 @@ export type MentionOptions = {
9
9
  onSearch: (text: string) => string[];
10
10
  };
11
11
 
12
+ // TODO(burdon): Can only have a single autocompletion. Merge configuration with autocomplete.
12
13
  export const mention = ({ onSearch }: MentionOptions): Extension => {
13
14
  return autocompletion({
15
+ // TODO(burdon): Not working.
16
+ activateOnTyping: true,
17
+ // activateOnTypingDelay: 100,
18
+ // selectOnOpen: true,
14
19
  closeOnBlur: false, // For debugging.
20
+ // defaultKeymap: false,
21
+ icons: false,
15
22
  override: [
16
23
  (context: CompletionContext): CompletionResult | null => {
24
+ console.log(context);
25
+
17
26
  const match = context.matchBefore(/@(\w+)?/);
18
27
  if (!match || (match.from === match.to && !context.explicit)) {
19
28
  return null;
20
29
  }
21
30
 
22
- console.log(match);
23
-
24
31
  return {
25
32
  from: match.from,
26
33
  options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({ label: `@${value}` })),
@@ -0,0 +1,12 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import { type Extension } from '@codemirror/state';
6
+
7
+ export type OutlinerOptions = {};
8
+
9
+ // TODO(burdon): Experimental component: multiple hierarchical draggable editor sections.
10
+ export const outliner = (options: OutlinerOptions = {}): Extension => {
11
+ return [];
12
+ };
@@ -29,9 +29,10 @@ export type AwarenessProviderParams = {
29
29
  info: AwarenessInfo;
30
30
  };
31
31
 
32
+ /**
33
+ * Receives and broadcasts profile and cursor position.
34
+ */
32
35
  export class SpaceAwarenessProvider implements AwarenessProvider {
33
- public readonly remoteStateChange = new Event<void>();
34
-
35
36
  private readonly _remoteStates = new Map<string, AwarenessState>();
36
37
 
37
38
  private readonly _space: Space;
@@ -39,9 +40,11 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
39
40
  private readonly _peerId: string;
40
41
  private readonly _info: AwarenessInfo;
41
42
 
42
- private _localState?: AwarenessState;
43
- private _postTask?: DeferredTask;
44
43
  private _ctx?: Context;
44
+ private _postTask?: DeferredTask;
45
+ private _localState?: AwarenessState;
46
+
47
+ public readonly remoteStateChange = new Event<void>();
45
48
 
46
49
  constructor(params: AwarenessProviderParams) {
47
50
  this._space = params.space;
@@ -63,19 +66,20 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
63
66
  }
64
67
  });
65
68
 
66
- const unsubscribe = this._space.listen(this._channel, (message: GossipMessage) => {
67
- switch (message.payload.kind) {
68
- case 'query': {
69
- this._handleQueryMessage();
70
- break;
69
+ this._ctx.onDispose(
70
+ this._space.listen(this._channel, (message: GossipMessage) => {
71
+ switch (message.payload.kind) {
72
+ case 'query': {
73
+ this._handleQueryMessage();
74
+ break;
75
+ }
76
+ case 'post': {
77
+ this._handlePostMessage(message.payload);
78
+ break;
79
+ }
71
80
  }
72
- case 'post': {
73
- this._handlePostMessage(message.payload);
74
- break;
75
- }
76
- }
77
- });
78
- this._ctx.onDispose(unsubscribe);
81
+ }),
82
+ );
79
83
 
80
84
  void this._space
81
85
  .postMessage(this._channel, {
@@ -92,6 +96,10 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
92
96
  this._postTask = undefined;
93
97
  }
94
98
 
99
+ getRemoteStates(): AwarenessState[] {
100
+ return Array.from(this._remoteStates.values());
101
+ }
102
+
95
103
  update(position: AwarenessPosition | undefined): void {
96
104
  invariant(this._postTask);
97
105
  this._localState = {
@@ -103,10 +111,6 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
103
111
  this._postTask.schedule();
104
112
  }
105
113
 
106
- getRemoteStates(): AwarenessState[] {
107
- return Array.from(this._remoteStates.values());
108
- }
109
-
110
114
  private _handleQueryMessage() {
111
115
  invariant(this._postTask);
112
116
  this._postTask.schedule();
@@ -0,0 +1,42 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import { type Extension, StateField } from '@codemirror/state';
6
+
7
+ import { type DocAccessor } from '@dxos/echo-schema';
8
+
9
+ // Runtime data structure.
10
+ export type Range = {
11
+ from: number;
12
+ to: number;
13
+ };
14
+
15
+ // Persistent data structure.
16
+ export type Comment = {
17
+ id: string;
18
+ cursor?: string;
19
+ };
20
+
21
+ export type EditorModel = {
22
+ id: string;
23
+ text: () => string;
24
+ extension?: Extension;
25
+
26
+ // TODO(burdon): Remove.
27
+ content: string | DocAccessor;
28
+
29
+ // TODO(burdon): Remove.
30
+ peer?: {
31
+ id: string;
32
+ name?: string;
33
+ };
34
+ };
35
+
36
+ /**
37
+ * State field makes the model available to other extensions.
38
+ */
39
+ export const modelState = StateField.define<EditorModel | undefined>({
40
+ create: () => undefined,
41
+ update: (model) => model,
42
+ });
@@ -2,7 +2,10 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- export * from './automerge';
6
5
  export * from './awareness-provider';
6
+ export * from './defs';
7
+
8
+ export * from './useActionHandler';
9
+ export * from './useEditorView';
10
+ export * from './useTextEditor';
7
11
  export * from './useTextModel';
8
- export * from './yjs';