@dxos/react-ui-editor 0.3.11-main.870164f → 0.3.11-main.8a2cfe6

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 (135) hide show
  1. package/dist/lib/browser/index.mjs +1362 -895
  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 +3 -3
  5. package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
  6. package/dist/types/src/{hooks/automerge → components/TextEditor}/automerge.stories.d.ts +6 -1
  7. package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map +1 -0
  8. package/dist/types/src/components/TextEditor/codemirror.stories.d.ts.map +1 -1
  9. package/dist/types/src/{hooks/yjs → components/TextEditor}/yjs.stories.d.ts +1 -1
  10. package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +1 -0
  11. package/dist/types/src/extensions/automerge/automerge.d.ts +9 -0
  12. package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -0
  13. package/dist/types/src/extensions/automerge/cursor.d.ts +5 -0
  14. package/dist/types/src/extensions/automerge/cursor.d.ts.map +1 -0
  15. package/dist/types/src/extensions/automerge/defs.d.ts +26 -0
  16. package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -0
  17. package/dist/types/src/extensions/automerge/index.d.ts +3 -0
  18. package/dist/types/src/extensions/automerge/index.d.ts.map +1 -0
  19. package/dist/types/src/{hooks → extensions}/automerge/semaphore.d.ts +4 -4
  20. package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -0
  21. package/dist/types/src/extensions/automerge/update-automerge.d.ts +5 -0
  22. package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -0
  23. package/dist/types/src/extensions/automerge/update-codemirror.d.ts.map +1 -0
  24. package/dist/types/src/extensions/awareness.d.ts +46 -0
  25. package/dist/types/src/extensions/awareness.d.ts.map +1 -0
  26. package/dist/types/src/extensions/code.d.ts.map +1 -1
  27. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  28. package/dist/types/src/extensions/hr.d.ts.map +1 -1
  29. package/dist/types/src/extensions/image.d.ts.map +1 -1
  30. package/dist/types/src/extensions/index.d.ts +3 -1
  31. package/dist/types/src/extensions/index.d.ts.map +1 -1
  32. package/dist/types/src/extensions/link.d.ts.map +1 -1
  33. package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
  34. package/dist/types/src/extensions/tasklist.d.ts.map +1 -1
  35. package/dist/types/src/extensions/yjs/cursor.d.ts +4 -0
  36. package/dist/types/src/extensions/yjs/cursor.d.ts.map +1 -0
  37. package/dist/types/src/extensions/yjs/index.d.ts +2 -0
  38. package/dist/types/src/extensions/yjs/index.d.ts.map +1 -0
  39. package/dist/types/src/extensions/yjs/yjs.d.ts +4 -0
  40. package/dist/types/src/extensions/yjs/yjs.d.ts.map +1 -0
  41. package/dist/types/src/extensions/yjs/yjs.test.d.ts.map +1 -0
  42. package/dist/types/src/hooks/automerge.d.ts +3 -0
  43. package/dist/types/src/hooks/automerge.d.ts.map +1 -0
  44. package/dist/types/src/hooks/awareness-provider.d.ts +28 -0
  45. package/dist/types/src/hooks/awareness-provider.d.ts.map +1 -0
  46. package/dist/types/src/hooks/index.d.ts +2 -0
  47. package/dist/types/src/hooks/index.d.ts.map +1 -1
  48. package/dist/types/src/hooks/useTextModel.d.ts +8 -7
  49. package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
  50. package/dist/types/src/hooks/{yjs/space-provider.d.ts → yjs.d.ts} +8 -8
  51. package/dist/types/src/hooks/yjs.d.ts.map +1 -0
  52. package/dist/types/src/index.d.ts +1 -0
  53. package/dist/types/src/index.d.ts.map +1 -1
  54. package/dist/types/src/styles/cursors.d.ts.map +1 -0
  55. package/dist/types/src/styles/index.d.ts +1 -0
  56. package/dist/types/src/styles/index.d.ts.map +1 -1
  57. package/dist/types/src/styles/tokens.d.ts +1 -0
  58. package/dist/types/src/styles/tokens.d.ts.map +1 -1
  59. package/dist/types/src/testing/replicator.d.ts +2 -2
  60. package/dist/types/src/testing/replicator.d.ts.map +1 -1
  61. package/dist/types/src/themes/default.d.ts.map +1 -1
  62. package/dist/types/src/util/cursor.d.ts +17 -0
  63. package/dist/types/src/util/cursor.d.ts.map +1 -0
  64. package/dist/types/src/util/index.d.ts +3 -0
  65. package/dist/types/src/util/index.d.ts.map +1 -0
  66. package/dist/types/src/util/util.d.ts.map +1 -0
  67. package/package.json +22 -21
  68. package/src/components/TextEditor/MarkdownEditor.stories.tsx +6 -7
  69. package/src/components/TextEditor/TextEditor.tsx +1 -1
  70. package/src/{hooks/automerge → components/TextEditor}/automerge.stories.tsx +66 -6
  71. package/src/components/TextEditor/codemirror.stories.ts +3 -2
  72. package/src/{hooks/yjs → components/TextEditor}/yjs.stories.tsx +1 -1
  73. package/src/{hooks/automerge/plugin.ts → extensions/automerge/automerge.ts} +20 -58
  74. package/src/extensions/automerge/cursor.ts +51 -0
  75. package/src/extensions/automerge/defs.ts +62 -0
  76. package/src/extensions/automerge/index.ts +6 -0
  77. package/src/{hooks → extensions}/automerge/semaphore.ts +14 -12
  78. package/src/{hooks → extensions}/automerge/update-automerge.ts +5 -6
  79. package/src/{hooks → extensions}/automerge/update-codemirror.ts +13 -5
  80. package/src/extensions/awareness.ts +316 -0
  81. package/src/extensions/code.ts +4 -5
  82. package/src/extensions/comments.ts +30 -15
  83. package/src/extensions/hr.ts +2 -3
  84. package/src/extensions/image.ts +38 -20
  85. package/src/extensions/index.ts +3 -1
  86. package/src/extensions/link.ts +82 -84
  87. package/src/extensions/markdown/highlight.ts +3 -4
  88. package/src/extensions/table.ts +5 -2
  89. package/src/extensions/tasklist.ts +1 -3
  90. package/src/extensions/yjs/cursor.ts +21 -0
  91. package/src/extensions/yjs/index.ts +5 -0
  92. package/src/{hooks → extensions}/yjs/yjs.test.ts +1 -25
  93. package/src/extensions/yjs/yjs.ts +16 -0
  94. package/src/hooks/automerge.ts +52 -0
  95. package/src/hooks/awareness-provider.ts +120 -0
  96. package/src/hooks/index.ts +2 -0
  97. package/src/hooks/useTextModel.ts +19 -93
  98. package/src/hooks/{yjs/space-provider.ts → yjs.ts} +71 -19
  99. package/src/index.ts +1 -0
  100. package/src/styles/index.ts +1 -0
  101. package/src/styles/tokens.ts +3 -0
  102. package/src/testing/replicator.ts +10 -15
  103. package/src/themes/default.ts +39 -33
  104. package/src/util/cursor.ts +29 -0
  105. package/src/util/index.ts +6 -0
  106. package/dist/types/src/extensions/mermaid.d.ts +0 -3
  107. package/dist/types/src/extensions/mermaid.d.ts.map +0 -1
  108. package/dist/types/src/extensions/util.d.ts.map +0 -1
  109. package/dist/types/src/hooks/automerge/automerge.stories.d.ts.map +0 -1
  110. package/dist/types/src/hooks/automerge/handle.d.ts +0 -9
  111. package/dist/types/src/hooks/automerge/handle.d.ts.map +0 -1
  112. package/dist/types/src/hooks/automerge/index.d.ts +0 -3
  113. package/dist/types/src/hooks/automerge/index.d.ts.map +0 -1
  114. package/dist/types/src/hooks/automerge/plugin.d.ts +0 -26
  115. package/dist/types/src/hooks/automerge/plugin.d.ts.map +0 -1
  116. package/dist/types/src/hooks/automerge/semaphore.d.ts.map +0 -1
  117. package/dist/types/src/hooks/automerge/update-automerge.d.ts +0 -6
  118. package/dist/types/src/hooks/automerge/update-automerge.d.ts.map +0 -1
  119. package/dist/types/src/hooks/automerge/update-codemirror.d.ts.map +0 -1
  120. package/dist/types/src/hooks/yjs/cursors.d.ts.map +0 -1
  121. package/dist/types/src/hooks/yjs/index.d.ts +0 -3
  122. package/dist/types/src/hooks/yjs/index.d.ts.map +0 -1
  123. package/dist/types/src/hooks/yjs/space-provider.d.ts.map +0 -1
  124. package/dist/types/src/hooks/yjs/yjs.stories.d.ts.map +0 -1
  125. package/dist/types/src/hooks/yjs/yjs.test.d.ts.map +0 -1
  126. package/src/extensions/mermaid.ts +0 -11
  127. package/src/hooks/automerge/handle.ts +0 -14
  128. package/src/hooks/automerge/index.ts +0 -6
  129. package/src/hooks/yjs/index.ts +0 -6
  130. /package/dist/types/src/{hooks → extensions}/automerge/update-codemirror.d.ts +0 -0
  131. /package/dist/types/src/{hooks → extensions}/yjs/yjs.test.d.ts +0 -0
  132. /package/dist/types/src/{hooks/yjs → styles}/cursors.d.ts +0 -0
  133. /package/dist/types/src/{extensions → util}/util.d.ts +0 -0
  134. /package/src/{hooks/yjs → styles}/cursors.ts +0 -0
  135. /package/src/{extensions → util}/util.ts +0 -0
@@ -0,0 +1,28 @@
1
+ import { Event } from '@dxos/async';
2
+ import { type Space } from '@dxos/react-client/echo';
3
+ import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '../extensions';
4
+ export type AwarenessProviderParams = {
5
+ space: Space;
6
+ channel: string;
7
+ peerId: string;
8
+ info: AwarenessInfo;
9
+ };
10
+ export declare class SpaceAwarenessProvider implements AwarenessProvider {
11
+ readonly remoteStateChange: Event<void>;
12
+ private readonly _remoteStates;
13
+ private readonly _space;
14
+ private readonly _channel;
15
+ private readonly _peerId;
16
+ private readonly _info;
17
+ private _localState?;
18
+ private _postTask?;
19
+ private _ctx?;
20
+ constructor(params: AwarenessProviderParams);
21
+ open(): void;
22
+ close(): void;
23
+ update(position: AwarenessPosition | undefined): void;
24
+ getRemoteStates(): AwarenessState[];
25
+ private _handleQueryMessage;
26
+ private _handlePostMessage;
27
+ }
28
+ //# sourceMappingURL=awareness-provider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"awareness-provider.d.ts","sourceRoot":"","sources":["../../../../src/hooks/awareness-provider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,EAAS,MAAM,aAAa,CAAC;AAIzD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAaxH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,SAAgB,iBAAiB,cAAqB;IAEtD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqC;IAEnE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAgB;IAEtC,OAAO,CAAC,WAAW,CAAC,CAAiB;IACrC,OAAO,CAAC,SAAS,CAAC,CAAe;IACjC,OAAO,CAAC,IAAI,CAAC,CAAU;gBAEX,MAAM,EAAE,uBAAuB;IAO3C,IAAI;IAoCJ,KAAK;IAML,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI;IAWrD,eAAe,IAAI,cAAc,EAAE;IAInC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,kBAAkB;CAK3B"}
@@ -1,3 +1,5 @@
1
+ export * from './automerge';
2
+ export * from './awareness-provider';
1
3
  export * from './useTextModel';
2
4
  export * from './yjs';
3
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC"}
@@ -1,9 +1,8 @@
1
- import { type Extension, StateField } from '@codemirror/state';
2
- import type * as awarenessProtocol from 'y-protocols/awareness';
1
+ import { StateField, type Extension } from '@codemirror/state';
2
+ import type * as YP from 'y-protocols/awareness';
3
3
  import { type DocAccessor, type Space, type TextObject } from '@dxos/react-client/echo';
4
4
  import { type Identity } from '@dxos/react-client/halo';
5
5
  import type { YText, YXmlFragment } from '@dxos/text-model';
6
- type Awareness = awarenessProtocol.Awareness;
7
6
  /**
8
7
  * State field makes the model available to other extensions.
9
8
  */
@@ -18,12 +17,15 @@ export type CommentRange = {
18
17
  };
19
18
  export type EditorModel = {
20
19
  id: string;
21
- content: string | YText | YXmlFragment | DocAccessor;
22
20
  text: () => string;
21
+ extension?: Extension;
22
+ content: string | YText | YXmlFragment | DocAccessor;
23
+ /**
24
+ * @deprecated Use CursorConverter.
25
+ */
23
26
  getCursorFromRange?: (value: Range) => string;
24
27
  getRangeFromCursor?: (cursor: string) => Range | undefined;
25
- extension?: Extension;
26
- awareness?: Awareness;
28
+ awareness?: YP.Awareness;
27
29
  peer?: {
28
30
  id: string;
29
31
  name?: string;
@@ -35,5 +37,4 @@ export type UseTextModelProps = {
35
37
  text?: TextObject;
36
38
  };
37
39
  export declare const useTextModel: (props: UseTextModelProps) => EditorModel | undefined;
38
- export {};
39
40
  //# sourceMappingURL=useTextModel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/D,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAIhE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,KAAK,EACV,KAAK,UAAU,EAIhB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAO5D,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAE7C;;GAEG;AAEH,eAAO,MAAM,UAAU,qCAGrB,CAAC;AAEH,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IAEX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACrD,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,CAAC;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAGF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SAKrE,CAAC"}
1
+ {"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAqB,KAAK,WAAW,EAAE,KAAK,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3G,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAO5D;;GAEG;AACH,eAAO,MAAM,UAAU,qCAGrB,CAAC;AAEH,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACrD;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,CAAC;IAE3D,SAAS,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAGF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SAKrE,CAAC"}
@@ -1,27 +1,27 @@
1
1
  import { Observable } from 'lib0/observable';
2
- import * as awarenessProtocol from 'y-protocols/awareness';
2
+ import * as YP from 'y-protocols/awareness';
3
3
  import { type Doc } from 'yjs';
4
4
  import { type Space } from '@dxos/react-client/echo';
5
- type Awareness = awarenessProtocol.Awareness;
5
+ import { type EditorModel, type UseTextModelProps } from './useTextModel';
6
+ export declare const createYjsModel: ({ identity, space, text }: UseTextModelProps) => EditorModel;
6
7
  /**
7
8
  * Yjs awareness provider on top of a DXOS space.
8
9
  */
9
- export declare class SpaceAwarenessProvider extends Observable<any> {
10
+ export declare class YAwarenessProvider extends Observable<any> {
10
11
  private readonly _space;
11
12
  private readonly _awareness;
12
13
  private readonly _clientId;
13
14
  private readonly _channel;
14
- constructor({ space, doc, channel, awareness }: {
15
+ constructor({ space, doc, channel, awareness, }: {
15
16
  space: Space;
16
17
  doc: Doc;
17
18
  channel: string;
18
- awareness?: Awareness;
19
+ awareness?: YP.Awareness;
19
20
  });
20
- get awareness(): Awareness;
21
+ get awareness(): YP.Awareness;
21
22
  private _handleAwarenessUpdate;
22
23
  private _handleSpaceMessage;
23
24
  private _readMessage;
24
25
  private _handleBeforeUnload;
25
26
  }
26
- export {};
27
- //# sourceMappingURL=space-provider.d.ts.map
27
+ //# sourceMappingURL=yjs.d.ts.map
@@ -0,0 +1 @@
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;AAE5C,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAI/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKrD,OAAO,EAAE,KAAK,WAAW,EAA0B,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGlG,eAAO,MAAM,cAAc,8BAA+B,iBAAiB,KAAG,WAyC7E,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"}
@@ -4,5 +4,6 @@ export { type Extension } from '@codemirror/state';
4
4
  export * from './components';
5
5
  export * from './extensions';
6
6
  export * from './hooks';
7
+ export { getToken } from './styles';
7
8
  export * from './themes';
8
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,cAAc,UAAU,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/styles/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,CAAC"}
@@ -1,3 +1,4 @@
1
+ export * from './cursors';
1
2
  export * from './markdown';
2
3
  export * from './tokens';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
@@ -4,4 +4,5 @@ export type ThemeStyles = {
4
4
  [selector: string]: StyleSpec;
5
5
  };
6
6
  export declare const tokens: TailwindConfig['theme'];
7
+ export declare const getToken: (path: string, defaultValue?: any) => any;
7
8
  //# sourceMappingURL=tokens.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3E,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,OAAO,CAA4B,CAAC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3E,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,OAAO,CAA4B,CAAC;AAExE,eAAO,MAAM,QAAQ,SAAU,MAAM,iBAAgB,GAAG,QAAgD,CAAC"}
@@ -1,10 +1,10 @@
1
1
  import { Observable } from 'lib0/observable';
2
- import * as awarenessProtocol from 'y-protocols/awareness';
2
+ import * as YP from 'y-protocols/awareness';
3
3
  import { Doc } from 'yjs';
4
4
  import { Event } from '@dxos/async';
5
5
  import { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
6
6
  import { type EditorModel } from '../hooks';
7
- type Awareness = awarenessProtocol.Awareness;
7
+ type Awareness = YP.Awareness;
8
8
  /**
9
9
  * Yjs awareness provider in-memory.
10
10
  */
@@ -1 +1 @@
1
- {"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAM7C;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}
1
+ {"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC;AAM9B;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA4BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WA8P1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}
1
+ {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAoQ1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}
@@ -0,0 +1,17 @@
1
+ import { Facet } from '@codemirror/state';
2
+ /**
3
+ * Converts indexes into the text document into stable peer-independent cursors.
4
+ *
5
+ * See:
6
+ * - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
7
+ * - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
8
+ *
9
+ * @param {assoc} number Negative values will associate the cursor with the previous character
10
+ * while positive - with the next one.
11
+ */
12
+ export interface CursorConverter {
13
+ toCursor(position: number, assoc?: -1 | 1 | undefined): string;
14
+ fromCursor(cursor: string): number;
15
+ }
16
+ export declare const CursorConverter: Facet<CursorConverter, CursorConverter>;
17
+ //# sourceMappingURL=cursor.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,eAAO,MAAM,eAAe,yCAE1B,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from './cursor';
2
+ export * from './util';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/util/util.ts"],"names":[],"mappings":"AAMA;;GAEG;AAEH,eAAO,MAAM,eAAe,kCAOR,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-editor",
3
- "version": "0.3.11-main.870164f",
3
+ "version": "0.3.11-main.8a2cfe6",
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",
@@ -38,19 +38,20 @@
38
38
  "y-codemirror.next": "^0.3.2",
39
39
  "y-protocols": "^1.0.5",
40
40
  "yjs": "^13.6.10",
41
- "@dxos/async": "0.3.11-main.870164f",
42
- "@dxos/automerge": "0.3.11-main.870164f",
43
- "@dxos/display-name": "0.3.11-main.870164f",
44
- "@dxos/invariant": "0.3.11-main.870164f",
45
- "@dxos/debug": "0.3.11-main.870164f",
46
- "@dxos/log": "0.3.11-main.870164f",
47
- "@dxos/echo-schema": "0.3.11-main.870164f",
48
- "@dxos/protocols": "0.3.11-main.870164f",
49
- "@dxos/react-async": "0.3.11-main.870164f",
50
- "@dxos/react-ui": "0.3.11-main.870164f",
51
- "@dxos/text-model": "0.3.11-main.870164f",
52
- "@dxos/react-ui-theme": "0.3.11-main.870164f",
53
- "@dxos/util": "0.3.11-main.870164f"
41
+ "@dxos/async": "0.3.11-main.8a2cfe6",
42
+ "@dxos/automerge": "0.3.11-main.8a2cfe6",
43
+ "@dxos/context": "0.3.11-main.8a2cfe6",
44
+ "@dxos/display-name": "0.3.11-main.8a2cfe6",
45
+ "@dxos/invariant": "0.3.11-main.8a2cfe6",
46
+ "@dxos/echo-schema": "0.3.11-main.8a2cfe6",
47
+ "@dxos/protocols": "0.3.11-main.8a2cfe6",
48
+ "@dxos/log": "0.3.11-main.8a2cfe6",
49
+ "@dxos/react-async": "0.3.11-main.8a2cfe6",
50
+ "@dxos/debug": "0.3.11-main.8a2cfe6",
51
+ "@dxos/react-ui": "0.3.11-main.8a2cfe6",
52
+ "@dxos/react-ui-theme": "0.3.11-main.8a2cfe6",
53
+ "@dxos/util": "0.3.11-main.8a2cfe6",
54
+ "@dxos/text-model": "0.3.11-main.8a2cfe6"
54
55
  },
55
56
  "devDependencies": {
56
57
  "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
@@ -66,18 +67,18 @@
66
67
  "deepsignal": "1.4.0-shallow.0",
67
68
  "react": "^18.2.0",
68
69
  "react-dom": "^18.2.0",
69
- "@dxos/config": "0.3.11-main.870164f",
70
- "@dxos/echo-typegen": "0.3.11-main.870164f",
71
- "@dxos/echo-signals": "0.3.11-main.870164f",
72
- "@dxos/react-client": "0.3.11-main.870164f",
73
- "@dxos/storybook-utils": "0.3.11-main.870164f",
74
- "@dxos/react-ui": "0.3.11-main.870164f"
70
+ "@dxos/config": "0.3.11-main.8a2cfe6",
71
+ "@dxos/echo-typegen": "0.3.11-main.8a2cfe6",
72
+ "@dxos/react-client": "0.3.11-main.8a2cfe6",
73
+ "@dxos/echo-signals": "0.3.11-main.8a2cfe6",
74
+ "@dxos/react-ui": "0.3.11-main.8a2cfe6",
75
+ "@dxos/storybook-utils": "0.3.11-main.8a2cfe6"
75
76
  },
76
77
  "peerDependencies": {
77
78
  "@phosphor-icons/react": "^2.0.5",
78
79
  "react": "^18.2.0",
79
80
  "react-dom": "^18.2.0",
80
- "@dxos/react-client": "0.3.11-main.870164f"
81
+ "@dxos/react-client": "0.3.11-main.8a2cfe6"
81
82
  },
82
83
  "publishConfig": {
83
84
  "access": "public"
@@ -33,7 +33,6 @@ import {
33
33
  typewriter,
34
34
  type CommentsOptions,
35
35
  type LinkOptions,
36
- mermaid,
37
36
  } from '../../extensions';
38
37
  import { type CommentRange, useTextModel } from '../../hooks';
39
38
 
@@ -123,8 +122,6 @@ const text = {
123
122
 
124
123
  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
125
124
 
126
- mermaid: str('```mermaid', 'graph TD;', 'A-->B;', 'A-->C;', 'B-->D;', 'C-->D;', '```'),
127
-
128
125
  footer: str('', '', '', '', '')
129
126
  };
130
127
 
@@ -262,6 +259,12 @@ export const Readonly = {
262
259
  render: () => <Story text={document} extensions={extensions} readonly />,
263
260
  };
264
261
 
262
+ const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
263
+
264
+ export const Large = {
265
+ render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
266
+ };
267
+
265
268
  export const NoExtensions = {
266
269
  render: () => <Story text={document} />,
267
270
  };
@@ -342,10 +345,6 @@ export const Mention = {
342
345
  ),
343
346
  };
344
347
 
345
- export const Mermaid = {
346
- render: () => <Story text={str('# Mermaid', '', text.mermaid, text.footer)} extensions={[code(), mermaid()]} />,
347
- };
348
-
349
348
  export const Comments = {
350
349
  render: () => {
351
350
  const [commentsStates, setCommentStates] = useState<CommentRange[]>([]);
@@ -77,7 +77,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
77
77
  >();
78
78
  useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
79
79
 
80
- // TODO(burdon): Factor out?
80
+ // TODO(burdon): Factor out as extension.
81
81
  const { awareness, peer } = model;
82
82
  useEffect(() => {
83
83
  if (awareness && peer) {
@@ -2,19 +2,29 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import '@preact/signals-react'; // Register react integration
5
+ import '@dxosTheme';
6
+
6
7
  import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
7
8
  import { EditorView } from '@codemirror/view';
9
+ import '@preact/signals-react'; // Register react integration
8
10
  import { basicSetup } from 'codemirror';
9
11
  import get from 'lodash.get';
10
12
  import React, { useEffect, useRef, useState } from 'react';
11
13
 
12
- // TODO(burdon): Why separate imports?
13
14
  import { type Prop } from '@dxos/automerge/automerge';
14
- import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
15
+ import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
16
+ import { Filter, setGlobalAutomergePreference } from '@dxos/echo-schema';
17
+ import { type PublicKey } from '@dxos/keys';
18
+ import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
19
+ import { useIdentity } from '@dxos/react-client/halo';
20
+ import { ClientRepeater } from '@dxos/react-client/testing';
21
+ import { withTheme } from '@dxos/storybook-utils';
15
22
 
16
- import { type IDocHandle } from './handle';
17
- import { automergePlugin } from './plugin';
23
+ import { MarkdownEditor } from './TextEditor';
24
+ import { type IDocHandle, automerge, awareness } from '../../extensions';
25
+ import { useTextModel } from '../../hooks';
26
+
27
+ // TODO(burdon): Move to components.
18
28
 
19
29
  type EditorProps = {
20
30
  handle: IDocHandle;
@@ -28,7 +38,7 @@ const Editor = ({ handle, path }: EditorProps) => {
28
38
  useEffect(() => {
29
39
  const view = (editorRoot.current = new EditorView({
30
40
  doc: get(handle.docSync()!, path),
31
- extensions: [basicSetup, automergePlugin(handle, path)],
41
+ extensions: [basicSetup, automerge({ handle, path }), awareness()],
32
42
  parent: containerRef.current as any,
33
43
  }));
34
44
 
@@ -89,3 +99,53 @@ export default {
89
99
  };
90
100
 
91
101
  export const Default = {};
102
+
103
+ const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
104
+ const identity = useIdentity();
105
+ const space = useSpace(spaceKey);
106
+ // TODO(dmaretskyi): useQuery doesn't work.
107
+ const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
108
+
109
+ const model = useTextModel({
110
+ text: obj?.content,
111
+ identity,
112
+ space,
113
+ });
114
+
115
+ if (!model) {
116
+ return null;
117
+ }
118
+
119
+ return (
120
+ // <div className={mx(fixedInsetFlexLayout, groupSurface)}>
121
+ <div className='flex justify-center overflow-y-scroll'>
122
+ <div className='flex flex-col w-[800px] py-16'>
123
+ <MarkdownEditor model={model} />
124
+ <div className='flex shrink-0 h-[300px]'></div>
125
+ </div>
126
+ </div>
127
+ // </div>
128
+ );
129
+ };
130
+
131
+ export const WithEcho = {
132
+ render: () => {
133
+ setGlobalAutomergePreference(true);
134
+ return (
135
+ <ClientRepeater
136
+ count={2}
137
+ createSpace
138
+ onCreateSpace={async (space) => {
139
+ space.db.add(
140
+ new Expando({
141
+ type: 'test',
142
+ content: new TextObject('Hello world!'),
143
+ }),
144
+ );
145
+ }}
146
+ Component={EchoStory}
147
+ />
148
+ );
149
+ },
150
+ decorators: [withTheme],
151
+ };
@@ -17,7 +17,8 @@ import { type Identity } from '@dxos/react-client/halo';
17
17
  import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
18
18
  import { YText } from '@dxos/text-model';
19
19
 
20
- import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
20
+ import { YAwarenessProvider } from '../../hooks';
21
+ import { cursorColor } from '../../styles';
21
22
  import { EditorDocument, types as schema } from '../../testing';
22
23
 
23
24
  export default {
@@ -35,7 +36,7 @@ const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identi
35
36
  return;
36
37
  }
37
38
 
38
- const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
39
+ const { awareness } = new YAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
39
40
  awareness.setLocalStateField('user', {
40
41
  name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
41
42
  // TODO(wittjosiah): Pick colours from theme based on identity key.
@@ -12,7 +12,7 @@ import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-cli
12
12
  import { useId, Input } from '@dxos/react-ui';
13
13
  import { withTheme } from '@dxos/storybook-utils';
14
14
 
15
- import { MarkdownEditor } from '../../components';
15
+ import { MarkdownEditor } from './TextEditor';
16
16
  import { Replicator, useYjsModel } from '../../testing';
17
17
 
18
18
  export default {
@@ -1,57 +1,34 @@
1
1
  //
2
2
  // Copyright 2023 DXOS.org
3
+ // Copyright 2024 Automerge
4
+ // Ref: https://github.com/automerge/automerge-codemirror
3
5
  //
4
6
 
5
- import {
6
- Annotation,
7
- type EditorState,
8
- type Extension,
9
- Facet,
10
- StateEffect,
11
- StateField,
12
- type Transaction,
13
- type TransactionSpec,
14
- } from '@codemirror/state';
7
+ import { Facet, StateField, type Extension, type Transaction } from '@codemirror/state';
15
8
  import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '@codemirror/view';
16
9
 
17
- import * as automerge from '@dxos/automerge/automerge';
18
- import { type Heads, type Prop } from '@dxos/automerge/automerge';
10
+ import { next as A } from '@dxos/automerge/automerge';
11
+ import { type Prop } from '@dxos/automerge/automerge';
19
12
 
20
- import { type IDocHandle } from './handle';
13
+ import { cursorConverter } from './cursor';
14
+ import { effectType, type IDocHandle, isReconcileTx, type Value } from './defs';
21
15
  import { PatchSemaphore } from './semaphore';
22
-
23
- export type Value = {
24
- lastHeads: Heads;
25
- path: Prop[];
26
- unreconciledTransactions: Transaction[];
27
- };
28
-
29
- type UpdateHeads = {
30
- newHeads: Heads;
31
- };
32
-
33
- export const effectType = StateEffect.define<UpdateHeads>({});
34
-
35
- export const updateHeads = (newHeads: Heads): StateEffect<UpdateHeads> => effectType.of({ newHeads });
36
-
37
- export const getLastHeads = (state: EditorState, field: Field): Heads => state.field(field).lastHeads;
38
-
39
- export const getPath = (state: EditorState, field: Field): Prop[] => state.field(field).path;
40
-
41
- export type Field = StateField<Value>;
16
+ import { CursorConverter } from '../../util';
42
17
 
43
18
  const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
44
19
  combine: (values) => values.at(-1)!, // Take last.
45
20
  });
46
21
 
47
- export type AutomergePlugin = {
48
- extension: Extension;
22
+ export type AutomergeOptions = {
23
+ handle: IDocHandle;
24
+ path: Prop[];
49
25
  };
50
26
 
51
- export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlugin => {
27
+ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
28
+ // TODO(burdon): Rename.
52
29
  const stateField: StateField<Value> = StateField.define({
53
30
  create: () => ({
54
- lastHeads: automerge.getHeads(handle.docSync()!),
31
+ lastHeads: A.getHeads(handle.docSync()!),
55
32
  unreconciledTransactions: [],
56
33
  path: path.slice(),
57
34
  }),
@@ -107,26 +84,11 @@ export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlug
107
84
  );
108
85
 
109
86
  return {
110
- extension: [stateField, semaphoreFacet.of(semaphore), viewPlugin],
87
+ extension: [
88
+ CursorConverter.of(cursorConverter(handle, path)),
89
+ semaphoreFacet.of(semaphore),
90
+ stateField,
91
+ viewPlugin,
92
+ ],
111
93
  };
112
94
  };
113
-
114
- export const reconcileAnnotationType = Annotation.define<unknown>();
115
-
116
- export const isReconcileTx = (tr: Transaction): boolean => !!tr.annotation(reconcileAnnotationType);
117
-
118
- export const makeReconcile = (tr: TransactionSpec) => {
119
- if (tr.annotations != null) {
120
- if (tr.annotations instanceof Array) {
121
- tr.annotations = [...tr.annotations, reconcileAnnotationType.of({})];
122
- } else {
123
- tr.annotations = [tr.annotations, reconcileAnnotationType.of({})];
124
- }
125
- } else {
126
- tr.annotations = [reconcileAnnotationType.of({})];
127
- }
128
- // return {
129
- // ...tr,
130
- // annotations: reconcileAnnotationType.of({})
131
- // }
132
- };
@@ -0,0 +1,51 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import get from 'lodash.get';
6
+
7
+ import type { Prop } from '@dxos/automerge/automerge';
8
+ import { next as automerge } from '@dxos/automerge/automerge';
9
+
10
+ import { type IDocHandle } from './defs';
11
+ import { type CursorConverter } from '../../util';
12
+
13
+ export const cursorConverter = (handle: IDocHandle, path: Prop[]): CursorConverter => ({
14
+ // TODO(burdon): Handle assoc to associate with a previous character.
15
+ toCursor: (pos) => {
16
+ const doc = handle.docSync();
17
+ if (!doc) {
18
+ return '';
19
+ }
20
+
21
+ const value = get(doc, path);
22
+ if (typeof value === 'string' && value.length <= pos) {
23
+ return 'end';
24
+ }
25
+
26
+ // NOTE: Slice is needed because getCursor mutates the array.
27
+ return automerge.getCursor(doc, path.slice(), pos);
28
+ },
29
+ fromCursor: (cursor) => {
30
+ if (cursor === '') {
31
+ return 0;
32
+ }
33
+
34
+ const doc = handle.docSync();
35
+ if (!doc) {
36
+ return 0;
37
+ }
38
+
39
+ if (cursor === 'end') {
40
+ const value = get(doc, path);
41
+ if (typeof value === 'string') {
42
+ return value.length;
43
+ } else {
44
+ return 0;
45
+ }
46
+ }
47
+
48
+ // NOTE: Slice is needed because getCursor mutates the array.
49
+ return automerge.getCursorPosition(doc, path.slice(), cursor);
50
+ },
51
+ });