@dxos/react-ui-editor 0.6.11 → 0.6.12-main.568932b

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 (116) hide show
  1. package/dist/lib/browser/chunk-AZWYO7TE.mjs +148 -0
  2. package/dist/lib/browser/chunk-AZWYO7TE.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +153 -270
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/state/index.mjs +17 -0
  7. package/dist/lib/browser/state/index.mjs.map +7 -0
  8. package/dist/lib/node/chunk-5RSKGJRI.cjs +169 -0
  9. package/dist/lib/node/chunk-5RSKGJRI.cjs.map +7 -0
  10. package/dist/lib/node/index.cjs +5480 -0
  11. package/dist/lib/node/index.cjs.map +7 -0
  12. package/dist/lib/node/meta.json +1 -0
  13. package/dist/lib/node/state/index.cjs +39 -0
  14. package/dist/lib/node/state/index.cjs.map +7 -0
  15. package/dist/lib/node-esm/chunk-RCIWLRIY.mjs +150 -0
  16. package/dist/lib/node-esm/chunk-RCIWLRIY.mjs.map +7 -0
  17. package/dist/lib/node-esm/index.mjs +5472 -0
  18. package/dist/lib/node-esm/index.mjs.map +7 -0
  19. package/dist/lib/node-esm/meta.json +1 -0
  20. package/dist/lib/node-esm/state/index.mjs +18 -0
  21. package/dist/lib/node-esm/state/index.mjs.map +7 -0
  22. package/dist/types/src/TextEditor.stories.d.ts +4 -1
  23. package/dist/types/src/TextEditor.stories.d.ts.map +1 -1
  24. package/dist/types/src/defaults.d.ts.map +1 -1
  25. package/dist/types/src/extensions/autocomplete.d.ts +2 -1
  26. package/dist/types/src/extensions/autocomplete.d.ts.map +1 -1
  27. package/dist/types/src/extensions/automerge/automerge.test.d.ts.map +1 -1
  28. package/dist/types/src/extensions/automerge/cursor.d.ts +1 -1
  29. package/dist/types/src/extensions/automerge/cursor.d.ts.map +1 -1
  30. package/dist/types/src/extensions/awareness/awareness.d.ts +2 -2
  31. package/dist/types/src/extensions/awareness/awareness.d.ts.map +1 -1
  32. package/dist/types/src/extensions/command/state.d.ts +2 -2
  33. package/dist/types/src/extensions/command/state.d.ts.map +1 -1
  34. package/dist/types/src/extensions/comments.d.ts +1 -1
  35. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  36. package/dist/types/src/extensions/debug.d.ts +2 -2
  37. package/dist/types/src/extensions/debug.d.ts.map +1 -1
  38. package/dist/types/src/extensions/folding.d.ts.map +1 -1
  39. package/dist/types/src/extensions/index.d.ts +0 -4
  40. package/dist/types/src/extensions/index.d.ts.map +1 -1
  41. package/dist/types/src/extensions/markdown/decorate.d.ts.map +1 -1
  42. package/dist/types/src/extensions/markdown/formatting.test.d.ts.map +1 -1
  43. package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
  44. package/dist/types/src/extensions/markdown/link.d.ts +1 -1
  45. package/dist/types/src/extensions/markdown/link.d.ts.map +1 -1
  46. package/dist/types/src/extensions/markdown/styles.d.ts.map +1 -1
  47. package/dist/types/src/extensions/modes.d.ts +3 -3
  48. package/dist/types/src/extensions/modes.d.ts.map +1 -1
  49. package/dist/types/src/extensions/util/overlap.d.ts +1 -1
  50. package/dist/types/src/extensions/util/overlap.d.ts.map +1 -1
  51. package/dist/types/src/extensions/util/react.d.ts +1 -1
  52. package/dist/types/src/extensions/util/react.d.ts.map +1 -1
  53. package/dist/types/src/hooks/useTextEditor.d.ts +1 -1
  54. package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -1
  55. package/dist/types/src/index.d.ts +1 -0
  56. package/dist/types/src/index.d.ts.map +1 -1
  57. package/dist/types/src/{extensions → state}/cursor.d.ts +2 -2
  58. package/dist/types/src/state/cursor.d.ts.map +1 -0
  59. package/dist/types/src/state/doc.d.ts +5 -0
  60. package/dist/types/src/state/doc.d.ts.map +1 -0
  61. package/dist/types/src/state/index.d.ts +6 -0
  62. package/dist/types/src/state/index.d.ts.map +1 -0
  63. package/dist/types/src/state/state.d.ts.map +1 -0
  64. package/dist/types/src/state/types.d.ts.map +1 -0
  65. package/dist/types/src/state/util.d.ts +3 -0
  66. package/dist/types/src/state/util.d.ts.map +1 -0
  67. package/dist/types/src/styles/markdown.d.ts +1 -2
  68. package/dist/types/src/styles/markdown.d.ts.map +1 -1
  69. package/dist/types/src/styles/theme.d.ts.map +1 -1
  70. package/package.json +54 -37
  71. package/src/TextEditor.stories.tsx +22 -17
  72. package/src/defaults.ts +0 -2
  73. package/src/extensions/annotations.ts +1 -1
  74. package/src/extensions/autocomplete.ts +9 -8
  75. package/src/extensions/automerge/automerge.stories.tsx +1 -1
  76. package/src/extensions/automerge/{automerge.spec.tsx → automerge.test.tsx} +1 -0
  77. package/src/extensions/automerge/automerge.ts +2 -2
  78. package/src/extensions/automerge/cursor.ts +1 -1
  79. package/src/extensions/awareness/awareness.ts +3 -5
  80. package/src/extensions/command/state.ts +3 -4
  81. package/src/extensions/comments.ts +37 -43
  82. package/src/extensions/debug.ts +2 -2
  83. package/src/extensions/folding.tsx +4 -2
  84. package/src/extensions/index.ts +0 -4
  85. package/src/extensions/markdown/changes.test.ts +1 -3
  86. package/src/extensions/markdown/decorate.ts +49 -6
  87. package/src/extensions/markdown/formatting.test.ts +1 -3
  88. package/src/extensions/markdown/highlight.ts +0 -5
  89. package/src/extensions/markdown/link.ts +3 -2
  90. package/src/extensions/markdown/parser.test.ts +1 -2
  91. package/src/extensions/markdown/styles.ts +10 -0
  92. package/src/extensions/markdown/table.ts +3 -3
  93. package/src/extensions/modes.ts +6 -5
  94. package/src/extensions/util/overlap.ts +1 -1
  95. package/src/extensions/util/react.tsx +5 -1
  96. package/src/hooks/useTextEditor.ts +3 -2
  97. package/src/index.ts +1 -0
  98. package/src/{extensions → state}/cursor.ts +3 -6
  99. package/src/state/doc.ts +10 -0
  100. package/src/state/index.ts +11 -0
  101. package/src/{extensions → state}/state.ts +1 -0
  102. package/src/state/util.ts +13 -0
  103. package/src/styles/markdown.ts +1 -3
  104. package/src/styles/theme.ts +3 -1
  105. package/dist/types/src/extensions/automerge/automerge.spec.d.ts +0 -2
  106. package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map +0 -1
  107. package/dist/types/src/extensions/cursor.d.ts.map +0 -1
  108. package/dist/types/src/extensions/doc.d.ts +0 -6
  109. package/dist/types/src/extensions/doc.d.ts.map +0 -1
  110. package/dist/types/src/extensions/state.d.ts.map +0 -1
  111. package/dist/types/src/extensions/types.d.ts.map +0 -1
  112. package/src/extensions/automerge/automerge.test.ts +0 -13
  113. package/src/extensions/doc.ts +0 -17
  114. /package/dist/types/src/{extensions → state}/state.d.ts +0 -0
  115. /package/dist/types/src/{extensions → state}/types.d.ts +0 -0
  116. /package/src/{extensions → state}/types.ts +0 -0
@@ -1,9 +1,8 @@
1
1
  export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
2
2
  export declare const theme: {
3
- mark: string;
4
3
  code: string;
5
4
  codeMark: string;
6
- blockquote: string;
5
+ mark: string;
7
6
  heading: (level: HeadingLevel) => string;
8
7
  };
9
8
  //# sourceMappingURL=markdown.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAYjD,eAAO,MAAM,KAAK;;;;;qBAMC,YAAY;CAG9B,CAAC"}
1
+ {"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAYjD,eAAO,MAAM,KAAK;;;;qBAIC,YAAY;CAG9B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,WA6M1B,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,WA+M1B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-editor",
3
- "version": "0.6.11",
3
+ "version": "0.6.12-main.568932b",
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",
@@ -9,7 +9,19 @@
9
9
  "exports": {
10
10
  ".": {
11
11
  "browser": "./dist/lib/browser/index.mjs",
12
+ "node": {
13
+ "require": "./dist/lib/node/index.cjs",
14
+ "default": "./dist/lib/node-esm/index.mjs"
15
+ },
12
16
  "types": "./dist/types/src/index.d.ts"
17
+ },
18
+ "./state": {
19
+ "browser": "./dist/lib/browser/state/index.mjs",
20
+ "node": {
21
+ "require": "./dist/lib/node/state/index.cjs",
22
+ "default": "./dist/lib/node-esm/state/index.mjs"
23
+ },
24
+ "types": "./dist/types/src/state/index.d.ts"
13
25
  }
14
26
  },
15
27
  "types": "dist/types/src/index.d.ts",
@@ -21,23 +33,24 @@
21
33
  "src"
22
34
  ],
23
35
  "dependencies": {
24
- "@codemirror/autocomplete": "^6.18.0",
25
- "@codemirror/commands": "^6.6.0",
36
+ "@codemirror/autocomplete": "^6.18.1",
37
+ "@codemirror/commands": "^6.6.2",
26
38
  "@codemirror/lang-javascript": "^6.2.2",
27
- "@codemirror/lang-markdown": "^6.2.5",
28
- "@codemirror/language": "^6.10.2",
39
+ "@codemirror/lang-markdown": "^6.3.0",
40
+ "@codemirror/language": "^6.10.3",
29
41
  "@codemirror/language-data": "^6.5.1",
30
- "@codemirror/lint": "^6.8.1",
42
+ "@codemirror/lint": "^6.8.2",
31
43
  "@codemirror/search": "^6.5.6",
32
44
  "@codemirror/state": "^6.4.1",
33
45
  "@codemirror/theme-one-dark": "^6.1.2",
34
- "@codemirror/view": "^6.29.1",
46
+ "@codemirror/view": "^6.34.1",
35
47
  "@fluentui/react-tabster": "^9.19.0",
36
- "@lezer/common": "^1.2.1",
37
- "@lezer/highlight": "^1.2.0",
38
- "@lezer/markdown": "^1.3.0",
48
+ "@lezer/common": "^1.2.2",
49
+ "@lezer/generator": "^1.7.1",
50
+ "@lezer/highlight": "^1.2.1",
51
+ "@lezer/markdown": "^1.3.1",
39
52
  "@radix-ui/react-context": "^1.0.0",
40
- "@replit/codemirror-vim": "^6.0.14",
53
+ "@replit/codemirror-vim": "^6.2.1",
41
54
  "@replit/codemirror-vscode-keymap": "^6.0.2",
42
55
  "codemirror": "^6.0.1",
43
56
  "lib0": "^0.2.65",
@@ -47,19 +60,19 @@
47
60
  "lodash.sortby": "^4.7.0",
48
61
  "react-dropzone": "^14.2.3",
49
62
  "style-mod": "^4.1.0",
50
- "@dxos/async": "0.6.11",
51
- "@dxos/automerge": "0.6.11",
52
- "@dxos/context": "0.6.11",
53
- "@dxos/debug": "0.6.11",
54
- "@dxos/display-name": "0.6.11",
55
- "@dxos/echo-schema": "0.6.11",
56
- "@dxos/log": "0.6.11",
57
- "@dxos/react-ui": "0.6.11",
58
- "@dxos/react-ui-theme": "0.6.11",
59
- "@dxos/protocols": "0.6.11",
60
- "@dxos/react-hooks": "0.6.11",
61
- "@dxos/util": "0.6.11",
62
- "@dxos/invariant": "0.6.11"
63
+ "@dxos/async": "0.6.12-main.568932b",
64
+ "@dxos/automerge": "0.6.12-main.568932b",
65
+ "@dxos/debug": "0.6.12-main.568932b",
66
+ "@dxos/context": "0.6.12-main.568932b",
67
+ "@dxos/display-name": "0.6.12-main.568932b",
68
+ "@dxos/invariant": "0.6.12-main.568932b",
69
+ "@dxos/echo-schema": "0.6.12-main.568932b",
70
+ "@dxos/log": "0.6.12-main.568932b",
71
+ "@dxos/protocols": "0.6.12-main.568932b",
72
+ "@dxos/react-hooks": "0.6.12-main.568932b",
73
+ "@dxos/react-ui-theme": "0.6.12-main.568932b",
74
+ "@dxos/react-ui": "0.6.12-main.568932b",
75
+ "@dxos/util": "0.6.12-main.568932b"
63
76
  },
64
77
  "devDependencies": {
65
78
  "@phosphor-icons/react": "^2.1.5",
@@ -67,6 +80,8 @@
67
80
  "@testing-library/dom": "^8.17.1",
68
81
  "@testing-library/react": "^13.4.0",
69
82
  "@testing-library/user-event": "^14.4.3",
83
+ "@types/chai": "^4.2.15",
84
+ "@types/chai-dom": "^1.11.0",
70
85
  "@types/lodash.defaultsdeep": "^4.6.6",
71
86
  "@types/lodash.get": "^4.4.7",
72
87
  "@types/lodash.merge": "^4.6.6",
@@ -74,29 +89,31 @@
74
89
  "@types/react": "~18.2.0",
75
90
  "@types/react-dom": "~18.2.0",
76
91
  "@types/react-test-renderer": "^17.0.2",
92
+ "chai": "^4.4.1",
93
+ "chai-dom": "^1.11.0",
77
94
  "happy-dom": "^13.3.1",
78
95
  "jsdom": "^24.0.0",
96
+ "mocha": "^10.6.0",
79
97
  "react": "~18.2.0",
80
98
  "react-dom": "~18.2.0",
81
99
  "react-test-renderer": "~18.2.0",
82
- "vite": "^5.3.4",
100
+ "vite": "5.4.7",
83
101
  "vite-plugin-top-level-await": "^1.4.1",
84
102
  "vite-plugin-wasm": "^3.3.0",
85
- "@dxos/automerge": "0.6.11",
86
- "@dxos/config": "0.6.11",
87
- "@dxos/echo-signals": "0.6.11",
88
- "@dxos/echo-typegen": "0.6.11",
89
- "@dxos/keyboard": "0.6.11",
90
- "@dxos/random": "0.6.11",
91
- "@dxos/react-client": "0.6.11",
92
- "@dxos/react-ui": "0.6.11",
93
- "@dxos/storybook-utils": "0.6.11"
103
+ "@dxos/automerge": "0.6.12-main.568932b",
104
+ "@dxos/config": "0.6.12-main.568932b",
105
+ "@dxos/echo-signals": "0.6.12-main.568932b",
106
+ "@dxos/keyboard": "0.6.12-main.568932b",
107
+ "@dxos/random": "0.6.12-main.568932b",
108
+ "@dxos/react-client": "0.6.12-main.568932b",
109
+ "@dxos/storybook-utils": "0.6.12-main.568932b",
110
+ "@dxos/react-ui": "0.6.12-main.568932b"
94
111
  },
95
112
  "peerDependencies": {
96
113
  "@phosphor-icons/react": "^2.1.5",
97
- "react": "^18.0.0",
98
- "react-dom": "^18.0.0",
99
- "@dxos/react-client": "0.6.11"
114
+ "react": "~18.2.0",
115
+ "react-dom": "~18.2.0",
116
+ "@dxos/react-client": "0.6.12-main.568932b"
100
117
  },
101
118
  "publishConfig": {
102
119
  "access": "public"
@@ -3,6 +3,7 @@
3
3
  //
4
4
 
5
5
  import '@dxos-theme';
6
+
6
7
  import { javascript } from '@codemirror/lang-javascript';
7
8
  import { markdown } from '@codemirror/lang-markdown';
8
9
  import { openSearchPanel } from '@codemirror/search';
@@ -46,18 +47,16 @@ import {
46
47
  linkTooltip,
47
48
  listener,
48
49
  mention,
49
- state,
50
50
  table,
51
51
  typewriter,
52
52
  type CommandAction,
53
- type Comment,
54
53
  type CommentsOptions,
55
- type EditorSelectionState,
56
54
  debugTree,
57
55
  type DebugNode,
58
56
  } from './extensions';
59
57
  import { renderRoot } from './extensions/util';
60
58
  import { useTextEditor, type UseTextEditorProps } from './hooks';
59
+ import { type Comment, type EditorSelectionState, state } from './state';
61
60
  import translations from './translations';
62
61
 
63
62
  faker.seed(101);
@@ -164,8 +163,8 @@ const content = {
164
163
  '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
165
164
  '',
166
165
  '> This is ...',
167
- '> ... a multi-line ...',
168
- '> block quote.',
166
+ '... a multi-line ...',
167
+ 'block quote.',
169
168
  '',
170
169
  ),
171
170
 
@@ -254,7 +253,7 @@ const renderLinkButton = (el: Element, url: string) => {
254
253
  // Story
255
254
  //
256
255
 
257
- type DebugMode = 'syntax' | 'raw';
256
+ type DebugMode = 'raw' | 'tree' | 'raw+tree';
258
257
 
259
258
  type StoryProps = {
260
259
  id?: string;
@@ -317,16 +316,16 @@ const Story = ({
317
316
  return (
318
317
  <div className='flex w-full'>
319
318
  <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
320
- {debug === 'raw' && (
321
- <div className='w-[800px] border-l border-separator overflow-auto'>
322
- <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
323
- </div>
324
- )}
325
- {debug === 'syntax' && (
326
- <div className='w-[800px] border-l border-separator overflow-auto'>
327
- <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
328
- {JSON.stringify(tree, null, 2)}
329
- </pre>
319
+ {debug && (
320
+ <div className='flex flex-col w-[800px] border-l border-separator divide-y divide-separator overflow-auto'>
321
+ {(debug === 'raw' || debug === 'raw+tree') && (
322
+ <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
323
+ )}
324
+ {(debug === 'tree' || debug === 'raw+tree') && (
325
+ <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
326
+ {JSON.stringify(tree, null, 2)}
327
+ </pre>
328
+ )}
330
329
  </div>
331
330
  )}
332
331
  </div>
@@ -452,6 +451,12 @@ export const ScrollTo = {
452
451
  // Markdown
453
452
  //
454
453
 
454
+ export const Blockquote = {
455
+ render: () => (
456
+ <Story text={str('> Blockquote', 'continuation', content.footer)} extensions={decorateMarkdown()} debug='raw' />
457
+ ),
458
+ };
459
+
455
460
  export const Headings = {
456
461
  render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
457
462
  };
@@ -486,7 +491,7 @@ export const OrderedList = {
486
491
  };
487
492
 
488
493
  export const TaskList = {
489
- render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw' />,
494
+ render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />,
490
495
  };
491
496
 
492
497
  export const Table = {
package/src/defaults.ts CHANGED
@@ -8,8 +8,6 @@ import { mx } from '@dxos/react-ui-theme';
8
8
 
9
9
  import { fontMono } from './styles';
10
10
 
11
- // TODO(burdon): Define scrollMargins for fixed gutter?
12
- // https://codemirror.net/docs/ref/#view.EditorView^scrollMargins
13
11
  const margin = '!mt-[1rem]';
14
12
 
15
13
  /**
@@ -7,7 +7,7 @@ import { Decoration, EditorView } from '@codemirror/view';
7
7
 
8
8
  import { isNotFalsy } from '@dxos/util';
9
9
 
10
- import { Cursor } from './cursor';
10
+ import { Cursor } from '../state';
11
11
 
12
12
  type Annotation = {
13
13
  cursor: string;
@@ -2,10 +2,6 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- // https://codemirror.net/examples/autocompletion
6
- // https://codemirror.net/docs/ref/#autocomplete.autocompletion
7
- // https://codemirror.net/docs/ref/#autocomplete.Completion
8
-
9
5
  import {
10
6
  autocompletion,
11
7
  completionKeymap,
@@ -15,6 +11,7 @@ import {
15
11
  type CompletionResult,
16
12
  } from '@codemirror/autocomplete';
17
13
  import { markdownLanguage } from '@codemirror/lang-markdown';
14
+ import { type Extension } from '@codemirror/state';
18
15
  import { keymap } from '@codemirror/view';
19
16
 
20
17
  export type AutocompleteResult = Completion;
@@ -25,11 +22,15 @@ export type AutocompleteOptions = {
25
22
  onSearch?: (text: string) => Completion[];
26
23
  };
27
24
 
25
+ // https://codemirror.net/examples/autocompletion
26
+ // https://codemirror.net/docs/ref/#autocomplete.autocompletion
27
+ // https://codemirror.net/docs/ref/#autocomplete.Completion
28
+
28
29
  /**
29
30
  * Autocomplete extension.
30
31
  */
31
- export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}) => {
32
- const extentions = [
32
+ export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
33
+ const extensions: Extension[] = [
33
34
  // https://codemirror.net/docs/ref/#view.keymap
34
35
  // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
35
36
  // TODO(burdon): Set custom keymap.
@@ -50,7 +51,7 @@ export const autocomplete = ({ activateOnTyping, override, onSearch }: Autocompl
50
51
  ];
51
52
 
52
53
  if (onSearch) {
53
- extentions.push(
54
+ extensions.push(
54
55
  // TODO(burdon): Optional decoration via addToOptions
55
56
  markdownLanguage.data.of({
56
57
  autocomplete: (context: CompletionContext): CompletionResult | null => {
@@ -68,5 +69,5 @@ export const autocomplete = ({ activateOnTyping, override, onSearch }: Autocompl
68
69
  );
69
70
  }
70
71
 
71
- return extentions;
72
+ return extensions;
72
73
  };
@@ -129,7 +129,7 @@ export const WithEcho = {
129
129
  count={2}
130
130
  component={EchoStory}
131
131
  createSpace
132
- onCreateSpace={async (space) => {
132
+ onSpaceCreated={async ({ space }) => {
133
133
  space.db.add(
134
134
  create({
135
135
  type: 'test',
@@ -5,6 +5,7 @@
5
5
  import { EditorState } from '@codemirror/state';
6
6
  import { EditorView } from '@codemirror/view';
7
7
  import { render, screen } from '@testing-library/react';
8
+ // TODO(wittjosiah): Move to vitest expect.
8
9
  import chai, { expect } from 'chai';
9
10
  import chaiDom from 'chai-dom';
10
11
  import get from 'lodash.get';
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright 2023 DXOS.org
2
+ // Copyright 2024 DXOS.org
3
3
  // Copyright 2024 Automerge
4
4
  // Ref: https://github.com/automerge/automerge-codemirror
5
5
  //
@@ -13,7 +13,7 @@ import { type DocAccessor } from '@dxos/react-client/echo';
13
13
  import { cursorConverter } from './cursor';
14
14
  import { updateHeadsEffect, isReconcile, type State } from './defs';
15
15
  import { Syncer } from './sync';
16
- import { Cursor } from '../cursor';
16
+ import { Cursor } from '../../state';
17
17
 
18
18
  export const automerge = (accessor: DocAccessor): Extension => {
19
19
  const syncState = StateField.define<State>({
@@ -5,7 +5,7 @@
5
5
  import { log } from '@dxos/log';
6
6
  import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
7
7
 
8
- import { type CursorConverter } from '../cursor';
8
+ import { type CursorConverter } from '../../state';
9
9
 
10
10
  export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
11
11
  toCursor: (pos, assoc) => {
@@ -2,7 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { Annotation, Facet, type Extension, RangeSet, type Range } from '@codemirror/state';
5
+ import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
6
6
  import {
7
7
  Decoration,
8
8
  type DecorationSet,
@@ -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 { singleValueFacet, Cursor, type CursorConverter } from '../../state';
20
20
 
21
21
  export interface AwarenessProvider {
22
22
  remoteStateChange: Event<void>;
@@ -38,9 +38,7 @@ const dummyProvider: AwarenessProvider = {
38
38
  update: () => {},
39
39
  };
40
40
 
41
- export const awarenessProvider = Facet.define<AwarenessProvider, AwarenessProvider>({
42
- combine: (providers) => providers[0] ?? dummyProvider,
43
- });
41
+ export const awarenessProvider = singleValueFacet<AwarenessProvider>(dummyProvider);
44
42
 
45
43
  // TODO(dmaretskyi): Specify the users that actually changed. Currently, we recalculate positions for every user.
46
44
  const RemoteSelectionChangedAnnotation = Annotation.define();
@@ -2,7 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { Facet, StateEffect, StateField } from '@codemirror/state';
5
+ import { StateEffect, StateField } from '@codemirror/state';
6
6
  import {
7
7
  type Command,
8
8
  type EditorView,
@@ -13,14 +13,13 @@ import {
13
13
  } from '@codemirror/view';
14
14
 
15
15
  import { type CommandOptions } from './command';
16
+ import { singleValueFacet } from '../../state';
16
17
 
17
18
  type CommandState = {
18
19
  tooltip?: Tooltip | null;
19
20
  };
20
21
 
21
- export const commandConfig = Facet.define<CommandOptions, Required<CommandOptions>>({
22
- combine: (providers) => providers[0],
23
- });
22
+ export const commandConfig = singleValueFacet<CommandOptions>();
24
23
 
25
24
  export const commandState = StateField.define<CommandState>({
26
25
  create: () => ({}),
@@ -5,7 +5,6 @@
5
5
  import { invertedEffects } from '@codemirror/commands';
6
6
  import {
7
7
  type Extension,
8
- Facet,
9
8
  StateEffect,
10
9
  StateField,
11
10
  type Text,
@@ -29,18 +28,15 @@ import { debounce, type UnsubscribeCallback } from '@dxos/async';
29
28
  import { log } from '@dxos/log';
30
29
  import { nonNullable } from '@dxos/util';
31
30
 
32
- import { Cursor } from './cursor';
33
- import { type Comment, type Range } from './types';
34
31
  import { overlap } from './util';
32
+ import { Cursor, documentId, singleValueFacet } from '../state';
33
+ import { type Comment, type Range } from '../state';
35
34
  import { callbackWrapper } from '../util';
36
35
 
37
36
  //
38
37
  // State management.
39
38
  //
40
39
 
41
- // TODO(wittjosiah): Factor out, not comments-specific.
42
- const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
43
-
44
40
  type CommentState = {
45
41
  comment: Comment;
46
42
  range: Range;
@@ -369,7 +365,7 @@ export type CommentsOptions = {
369
365
  onHover?: (el: Element, shortcut: string) => void;
370
366
  };
371
367
 
372
- const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({ combine: (providers) => providers[0] });
368
+ const optionsFacet = singleValueFacet<CommentsOptions>();
373
369
 
374
370
  /**
375
371
  * Comment threads.
@@ -389,7 +385,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
389
385
 
390
386
  return [
391
387
  optionsFacet.of(options),
392
- documentId.of(options.id),
388
+ options.id ? documentId.of(options.id) : undefined,
393
389
  commentsState,
394
390
  commentsDecorations,
395
391
  handleCommentClick,
@@ -398,45 +394,43 @@ export const comments = (options: CommentsOptions = {}): Extension => {
398
394
  //
399
395
  // Keymap.
400
396
  //
401
- options.onCreate
402
- ? keymap.of([
403
- {
404
- key: shortcut,
405
- run: callbackWrapper(createComment),
406
- },
407
- ])
408
- : [],
397
+ options.onCreate &&
398
+ keymap.of([
399
+ {
400
+ key: shortcut,
401
+ run: callbackWrapper(createComment),
402
+ },
403
+ ]),
409
404
 
410
405
  //
411
406
  // Hover tooltip (for key shortcut hints, etc.)
412
407
  // TODO(burdon): Factor out to generic hints extension for current selection/line.
413
408
  //
414
- options.onHover
415
- ? hoverTooltip(
416
- (view, pos) => {
417
- const selection = view.state.selection.main;
418
- if (selection && pos >= selection.from && pos <= selection.to) {
419
- return {
420
- pos: selection.from,
421
- end: selection.to,
422
- above: true,
423
- create: () => {
424
- const el = document.createElement('div');
425
- options.onHover!(el, shortcut);
426
- return { dom: el, offset: { x: 0, y: 8 } };
427
- },
428
- };
429
- }
409
+ options.onHover &&
410
+ hoverTooltip(
411
+ (view, pos) => {
412
+ const selection = view.state.selection.main;
413
+ if (selection && pos >= selection.from && pos <= selection.to) {
414
+ return {
415
+ pos: selection.from,
416
+ end: selection.to,
417
+ above: true,
418
+ create: () => {
419
+ const el = document.createElement('div');
420
+ options.onHover!(el, shortcut);
421
+ return { dom: el, offset: { x: 0, y: 8 } };
422
+ },
423
+ };
424
+ }
430
425
 
431
- return null;
432
- },
433
- {
434
- // TODO(burdon): Hide on change triggered immediately?
435
- // hideOnChange: true,
436
- hoverTime: 1_000,
437
- },
438
- )
439
- : [],
426
+ return null;
427
+ },
428
+ {
429
+ // TODO(burdon): Hide on change triggered immediately?
430
+ // hideOnChange: true,
431
+ hoverTime: 1_000,
432
+ },
433
+ ),
440
434
 
441
435
  //
442
436
  // Track deleted ranges and update ranges for decorations.
@@ -511,8 +505,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
511
505
  }
512
506
  }),
513
507
 
514
- options.onUpdate ? trackPastedComments(options.onUpdate) : [],
515
- ];
508
+ options.onUpdate && trackPastedComments(options.onUpdate),
509
+ ].filter(nonNullable);
516
510
  };
517
511
 
518
512
  //
@@ -3,10 +3,10 @@
3
3
  //
4
4
 
5
5
  import { syntaxTree } from '@codemirror/language';
6
- import { type EditorState, type RangeSet, StateField, type Transaction } from '@codemirror/state';
6
+ import { type EditorState, type Extension, type RangeSet, StateField, type Transaction } from '@codemirror/state';
7
7
 
8
8
  // eslint-disable-next-line no-console
9
- export const debugNodeLogger = (log: (...args: any[]) => void = console.log) => {
9
+ export const debugNodeLogger = (log: (...args: any[]) => void = console.log): Extension => {
10
10
  const logTokens = (state: EditorState) => syntaxTree(state).iterate({ enter: (node) => log(node.type) });
11
11
  return StateField.define<any>({
12
12
  create: (state) => logTokens(state),
@@ -17,7 +17,7 @@ export type FoldingOptions = {};
17
17
  /**
18
18
  * https://codemirror.net/examples/gutter
19
19
  */
20
- // TODO(burdon): Remember folding state.
20
+ // TODO(burdon): Remember folding state (to state).
21
21
  export const folding = (_props: FoldingOptions = {}): Extension => [
22
22
  codeFolding({
23
23
  placeholderDOM: () => {
@@ -26,8 +26,10 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
26
26
  }),
27
27
  foldGutter({
28
28
  markerDOM: (open) => {
29
+ // TODO(burdon): Use sprite directly.
30
+ const el = createElement('div', { className: 'flex h-full items-center' });
29
31
  return renderRoot(
30
- createElement('div', { className: 'flex h-full items-center' }),
32
+ el,
31
33
  <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'mx-3 cursor-pointer', open && 'rotate-90']} />,
32
34
  );
33
35
  },
@@ -9,9 +9,7 @@ export * from './awareness';
9
9
  export * from './blast';
10
10
  export * from './command';
11
11
  export * from './comments';
12
- export * from './cursor';
13
12
  export * from './debug';
14
- export * from './doc';
15
13
  export * from './dnd';
16
14
  export * from './factories';
17
15
  export * from './folding';
@@ -19,6 +17,4 @@ export * from './listener';
19
17
  export * from './markdown';
20
18
  export * from './mention';
21
19
  export * from './modes';
22
- export * from './state';
23
- export * from './types';
24
20
  export * from './typewriter';
@@ -2,9 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { expect } from 'chai';
6
-
7
- import { describe, test } from '@dxos/test';
5
+ import { describe, expect, test } from 'vitest';
8
6
 
9
7
  import { createLinkLabel } from './changes';
10
8