@dxos/react-ui-editor 0.3.11-main.a996413 → 0.3.11-main.b225571
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.
- package/dist/lib/browser/index.mjs +1393 -1052
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts +9 -5
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts +12 -17
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +6 -3
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
- package/dist/types/src/{hooks/automerge → components/TextEditor}/automerge.stories.d.ts +6 -1
- package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/codemirror.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/comments.stories.d.ts +26 -0
- package/dist/types/src/components/TextEditor/comments.stories.d.ts.map +1 -0
- package/dist/types/src/{hooks/yjs → components/TextEditor}/yjs.stories.d.ts +1 -1
- package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +1 -0
- package/dist/types/src/extensions/autocomplete.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/automerge.d.ts +9 -0
- package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/cursor.d.ts +5 -0
- package/dist/types/src/extensions/automerge/cursor.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/defs.d.ts +26 -0
- package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/index.d.ts +4 -0
- package/dist/types/src/extensions/automerge/index.d.ts.map +1 -0
- package/dist/types/src/{hooks → extensions}/automerge/semaphore.d.ts +4 -4
- package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/update-automerge.d.ts +5 -0
- package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/update-codemirror.d.ts.map +1 -0
- package/dist/types/src/extensions/awareness.d.ts +46 -0
- package/dist/types/src/extensions/awareness.d.ts.map +1 -0
- package/dist/types/src/extensions/code.d.ts.map +1 -1
- package/dist/types/src/extensions/comments.d.ts +2 -2
- package/dist/types/src/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/extensions/cursor.d.ts +25 -0
- package/dist/types/src/extensions/cursor.d.ts.map +1 -0
- package/dist/types/src/extensions/hr.d.ts.map +1 -1
- package/dist/types/src/extensions/image.d.ts.map +1 -1
- package/dist/types/src/extensions/index.d.ts +4 -1
- package/dist/types/src/extensions/index.d.ts.map +1 -1
- package/dist/types/src/extensions/link.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
- package/dist/types/src/extensions/tasklist.d.ts.map +1 -1
- package/dist/types/src/extensions/yjs/cursor.d.ts +4 -0
- package/dist/types/src/extensions/yjs/cursor.d.ts.map +1 -0
- package/dist/types/src/extensions/yjs/index.d.ts +2 -0
- package/dist/types/src/extensions/yjs/index.d.ts.map +1 -0
- package/dist/types/src/extensions/yjs/yjs.d.ts +4 -0
- package/dist/types/src/extensions/yjs/yjs.d.ts.map +1 -0
- package/dist/types/src/extensions/yjs/yjs.test.d.ts.map +1 -0
- package/dist/types/src/hooks/automerge.d.ts +3 -0
- package/dist/types/src/hooks/automerge.d.ts.map +1 -0
- package/dist/types/src/hooks/awareness-provider.d.ts +28 -0
- package/dist/types/src/hooks/awareness-provider.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +2 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useTextModel.d.ts +4 -8
- package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
- package/dist/types/src/hooks/{yjs/space-provider.d.ts → yjs.d.ts} +8 -8
- package/dist/types/src/hooks/yjs.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +3 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/styles/cursors.d.ts.map +1 -0
- package/dist/types/src/styles/index.d.ts +1 -0
- package/dist/types/src/styles/index.d.ts.map +1 -1
- package/dist/types/src/styles/markdown.d.ts.map +1 -1
- package/dist/types/src/styles/tokens.d.ts +1 -0
- package/dist/types/src/styles/tokens.d.ts.map +1 -1
- package/dist/types/src/testing/replicator.d.ts +2 -2
- package/dist/types/src/testing/replicator.d.ts.map +1 -1
- package/dist/types/src/themes/default.d.ts.map +1 -1
- package/dist/types/src/util.d.ts.map +1 -0
- package/package.json +23 -21
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +25 -23
- package/src/components/TextEditor/TextEditor.stories.tsx +13 -34
- package/src/components/TextEditor/TextEditor.tsx +69 -65
- package/src/{hooks/automerge → components/TextEditor}/automerge.stories.tsx +66 -6
- package/src/components/TextEditor/codemirror.stories.ts +3 -2
- package/src/components/TextEditor/comments.stories.tsx +315 -0
- package/src/{hooks/yjs → components/TextEditor}/yjs.stories.tsx +1 -1
- package/src/extensions/autocomplete.ts +18 -17
- package/src/{hooks/automerge/plugin.ts → extensions/automerge/automerge.ts} +20 -58
- package/src/extensions/automerge/cursor.ts +52 -0
- package/src/extensions/automerge/defs.ts +62 -0
- package/src/extensions/automerge/index.ts +7 -0
- package/src/{hooks → extensions}/automerge/semaphore.ts +14 -12
- package/src/{hooks → extensions}/automerge/update-automerge.ts +5 -6
- package/src/{hooks → extensions}/automerge/update-codemirror.ts +13 -5
- package/src/extensions/awareness.ts +309 -0
- package/src/extensions/code.ts +14 -7
- package/src/extensions/comments.ts +29 -109
- package/src/extensions/cursor.ts +46 -0
- package/src/extensions/hr.ts +4 -5
- package/src/extensions/image.ts +40 -22
- package/src/extensions/index.ts +4 -1
- package/src/extensions/link.ts +86 -88
- package/src/extensions/markdown/highlight.ts +3 -12
- package/src/extensions/table.ts +10 -4
- package/src/extensions/tasklist.ts +3 -5
- package/src/extensions/yjs/cursor.ts +22 -0
- package/src/extensions/yjs/index.ts +5 -0
- package/src/{hooks → extensions}/yjs/yjs.test.ts +1 -25
- package/src/extensions/yjs/yjs.ts +16 -0
- package/src/hooks/automerge.ts +52 -0
- package/src/hooks/awareness-provider.ts +120 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useTextModel.ts +20 -97
- package/src/hooks/{yjs/space-provider.ts → yjs.ts} +49 -19
- package/src/index.ts +3 -0
- package/src/styles/index.ts +1 -0
- package/src/styles/markdown.ts +0 -2
- package/src/styles/tokens.ts +3 -0
- package/src/testing/replicator.ts +10 -15
- package/src/themes/default.ts +52 -71
- package/dist/types/src/extensions/mermaid.d.ts +0 -3
- package/dist/types/src/extensions/mermaid.d.ts.map +0 -1
- package/dist/types/src/extensions/util.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/automerge.stories.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/handle.d.ts +0 -9
- package/dist/types/src/hooks/automerge/handle.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/index.d.ts +0 -3
- package/dist/types/src/hooks/automerge/index.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/plugin.d.ts +0 -26
- package/dist/types/src/hooks/automerge/plugin.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/semaphore.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/update-automerge.d.ts +0 -6
- package/dist/types/src/hooks/automerge/update-automerge.d.ts.map +0 -1
- package/dist/types/src/hooks/automerge/update-codemirror.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs/cursors.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs/index.d.ts +0 -3
- package/dist/types/src/hooks/yjs/index.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs/space-provider.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs/yjs.stories.d.ts.map +0 -1
- package/dist/types/src/hooks/yjs/yjs.test.d.ts.map +0 -1
- package/src/extensions/mermaid.ts +0 -11
- package/src/hooks/automerge/handle.ts +0 -14
- package/src/hooks/automerge/index.ts +0 -6
- package/src/hooks/yjs/index.ts +0 -6
- /package/dist/types/src/{hooks → extensions}/automerge/update-codemirror.d.ts +0 -0
- /package/dist/types/src/{hooks → extensions}/yjs/yjs.test.d.ts +0 -0
- /package/dist/types/src/{hooks/yjs → styles}/cursors.d.ts +0 -0
- /package/dist/types/src/{extensions/util.d.ts → util.d.ts} +0 -0
- /package/src/{hooks/yjs → styles}/cursors.ts +0 -0
- /package/src/{extensions/util.ts → util.ts} +0 -0
package/src/extensions/link.ts
CHANGED
|
@@ -4,20 +4,20 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
import { syntaxTree } from '@codemirror/language';
|
|
7
|
+
import { type Extension, RangeSetBuilder } from '@codemirror/state';
|
|
7
8
|
import {
|
|
8
|
-
|
|
9
|
-
type
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
type
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
Decoration,
|
|
10
|
+
type EditorView,
|
|
11
|
+
WidgetType,
|
|
12
|
+
hoverTooltip,
|
|
13
|
+
ViewPlugin,
|
|
14
|
+
type ViewUpdate,
|
|
15
|
+
type DecorationSet,
|
|
16
|
+
} from '@codemirror/view';
|
|
17
|
+
import { type SyntaxNode } from '@lezer/common';
|
|
16
18
|
|
|
17
19
|
import { tooltipContent } from '@dxos/react-ui-theme';
|
|
18
20
|
|
|
19
|
-
const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
|
|
20
|
-
|
|
21
21
|
// Adapted from:
|
|
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
|
|
@@ -34,11 +34,24 @@ export type LinkOptions = {
|
|
|
34
34
|
*/
|
|
35
35
|
export const link = (options: LinkOptions = {}): Extension => {
|
|
36
36
|
const extensions: Extension[] = [
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
ViewPlugin.fromClass(
|
|
38
|
+
class {
|
|
39
|
+
decorations: DecorationSet;
|
|
40
|
+
|
|
41
|
+
constructor(view: EditorView) {
|
|
42
|
+
this.decorations = buildDecorations(view, options);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
update(update: ViewUpdate) {
|
|
46
|
+
if (update.docChanged || update.viewportChanged || update.selectionSet) {
|
|
47
|
+
this.decorations = buildDecorations(update.view, options);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
decorations: (v) => v.decorations,
|
|
53
|
+
},
|
|
54
|
+
),
|
|
42
55
|
];
|
|
43
56
|
|
|
44
57
|
if (options.onHover) {
|
|
@@ -46,41 +59,25 @@ export const link = (options: LinkOptions = {}): Extension => {
|
|
|
46
59
|
// https://codemirror.net/examples/tooltip
|
|
47
60
|
// https://codemirror.net/docs/ref/#view.hoverTooltip
|
|
48
61
|
// https://github.com/codemirror/view/blob/main/src/tooltip.ts
|
|
49
|
-
hoverTooltip((view, pos) => {
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
if (!match) {
|
|
58
|
-
match = undefined;
|
|
59
|
-
break;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
idx = text.indexOf(match[0]);
|
|
63
|
-
if (p >= idx && p < idx + match[0].length) {
|
|
64
|
-
break;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
idx += match[0].length;
|
|
68
|
-
} while (true);
|
|
69
|
-
|
|
70
|
-
if (!match) {
|
|
62
|
+
hoverTooltip((view, pos, side) => {
|
|
63
|
+
const syntax = syntaxTree(view.state).resolveInner(pos, side);
|
|
64
|
+
let link = null;
|
|
65
|
+
for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
|
|
66
|
+
link = node.name === 'Link' ? node : null;
|
|
67
|
+
}
|
|
68
|
+
const url = link && link.getChild('URL');
|
|
69
|
+
if (!url || !link) {
|
|
71
70
|
return null;
|
|
72
71
|
}
|
|
73
|
-
|
|
74
|
-
const [, , url] = match ?? [];
|
|
75
|
-
|
|
72
|
+
const urlText = view.state.sliceDoc(url.from, url.to);
|
|
76
73
|
return {
|
|
77
|
-
pos:
|
|
78
|
-
end:
|
|
74
|
+
pos: link.from,
|
|
75
|
+
end: link.to,
|
|
79
76
|
above: true,
|
|
80
77
|
create: () => {
|
|
81
78
|
const el = document.createElement('div');
|
|
82
79
|
el.className = tooltipContent({}, 'pli-2 plb-1');
|
|
83
|
-
options.onHover!(el,
|
|
80
|
+
options.onHover!(el, urlText);
|
|
84
81
|
return { dom: el, offset: { x: 0, y: 4 } };
|
|
85
82
|
},
|
|
86
83
|
};
|
|
@@ -92,19 +89,15 @@ export const link = (options: LinkOptions = {}): Extension => {
|
|
|
92
89
|
};
|
|
93
90
|
|
|
94
91
|
class LinkButton extends WidgetType {
|
|
95
|
-
constructor(
|
|
96
|
-
private readonly _pos: number,
|
|
97
|
-
private readonly _url: string,
|
|
98
|
-
private readonly _onAttach: LinkOptions['onRender'],
|
|
99
|
-
) {
|
|
92
|
+
constructor(private readonly _url: string, private readonly _onAttach: LinkOptions['onRender']) {
|
|
100
93
|
super();
|
|
101
94
|
}
|
|
102
95
|
|
|
103
|
-
override eq(other:
|
|
104
|
-
return this.
|
|
96
|
+
override eq(other: this) {
|
|
97
|
+
return this._url === other._url;
|
|
105
98
|
}
|
|
106
99
|
|
|
107
|
-
toDOM(view: EditorView) {
|
|
100
|
+
override toDOM(view: EditorView) {
|
|
108
101
|
const el = document.createElement('span');
|
|
109
102
|
this._onAttach!(el, this._url);
|
|
110
103
|
return el;
|
|
@@ -116,11 +109,11 @@ class LinkText extends WidgetType {
|
|
|
116
109
|
super();
|
|
117
110
|
}
|
|
118
111
|
|
|
119
|
-
override eq(other:
|
|
112
|
+
override eq(other: this) {
|
|
120
113
|
return this._url === other._url;
|
|
121
114
|
}
|
|
122
115
|
|
|
123
|
-
toDOM(view: EditorView) {
|
|
116
|
+
override toDOM(view: EditorView) {
|
|
124
117
|
const link = document.createElement('a');
|
|
125
118
|
link.setAttribute('class', 'cm-link');
|
|
126
119
|
link.textContent = this._text;
|
|
@@ -147,46 +140,51 @@ class LinkText extends WidgetType {
|
|
|
147
140
|
* possibly overlapping ranges in such a way that they can efficiently be mapped though document changes.
|
|
148
141
|
* https://codemirror.net/docs/ref/#state
|
|
149
142
|
*/
|
|
150
|
-
const
|
|
151
|
-
const builder = new RangeSetBuilder();
|
|
143
|
+
const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet => {
|
|
144
|
+
const builder = new RangeSetBuilder<Decoration>();
|
|
145
|
+
const { state } = view;
|
|
152
146
|
const cursor = state.selection.main.head;
|
|
153
147
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
148
|
+
for (const { from, to } of view.visibleRanges) {
|
|
149
|
+
syntaxTree(state).iterate({
|
|
150
|
+
enter: (node) => {
|
|
151
|
+
// Check if cursor is inside text.
|
|
152
|
+
if (node.name === 'Link') {
|
|
153
|
+
const marks = node.node.getChildren('LinkMark');
|
|
154
|
+
const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
|
|
155
|
+
const urlNode = node.node.getChild('URL');
|
|
156
|
+
const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
|
|
157
|
+
if (!url) {
|
|
158
|
+
return false;
|
|
159
|
+
}
|
|
165
160
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
161
|
+
if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
|
|
162
|
+
builder.add(
|
|
163
|
+
node.from,
|
|
164
|
+
node.to,
|
|
165
|
+
Decoration.replace({
|
|
166
|
+
widget: new LinkText(text, options.link ? url : undefined),
|
|
167
|
+
}),
|
|
168
|
+
);
|
|
169
|
+
}
|
|
175
170
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
171
|
+
if (options.onRender) {
|
|
172
|
+
builder.add(
|
|
173
|
+
node.to,
|
|
174
|
+
node.to,
|
|
175
|
+
Decoration.replace({
|
|
176
|
+
widget: new LinkButton(url, options.onRender),
|
|
177
|
+
}),
|
|
178
|
+
);
|
|
179
|
+
}
|
|
185
180
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
181
|
+
return false;
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
from,
|
|
185
|
+
to,
|
|
186
|
+
});
|
|
187
|
+
}
|
|
190
188
|
|
|
191
189
|
return builder.finish();
|
|
192
190
|
};
|
|
@@ -6,19 +6,18 @@ import { markdownLanguage } from '@codemirror/lang-markdown';
|
|
|
6
6
|
import { HighlightStyle } from '@codemirror/language';
|
|
7
7
|
import { tags, styleTags, Tag } from '@lezer/highlight';
|
|
8
8
|
import { type MarkdownConfig, Table } from '@lezer/markdown';
|
|
9
|
-
import get from 'lodash.get';
|
|
10
9
|
|
|
11
10
|
import {
|
|
12
11
|
blockquote,
|
|
13
12
|
bold,
|
|
14
13
|
code,
|
|
15
14
|
codeMark,
|
|
15
|
+
getToken,
|
|
16
16
|
heading,
|
|
17
17
|
inlineUrl,
|
|
18
18
|
italic,
|
|
19
19
|
mark,
|
|
20
20
|
strikethrough,
|
|
21
|
-
tokens,
|
|
22
21
|
} from '../../styles';
|
|
23
22
|
|
|
24
23
|
/**
|
|
@@ -32,7 +31,6 @@ export const markdownTags = {
|
|
|
32
31
|
CodeText: Tag.define(),
|
|
33
32
|
EmphasisMark: Tag.define(),
|
|
34
33
|
HeaderMark: Tag.define(),
|
|
35
|
-
// HorizontalRule: Tag.define(),
|
|
36
34
|
InlineCode: Tag.define(),
|
|
37
35
|
LinkLabel: Tag.define(),
|
|
38
36
|
LinkReference: Tag.define(),
|
|
@@ -178,13 +176,6 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
|
|
|
178
176
|
class: blockquote,
|
|
179
177
|
},
|
|
180
178
|
|
|
181
|
-
// TODO(burdon): Replace with extension.
|
|
182
|
-
// {
|
|
183
|
-
// tag: [markdownTags.HorizontalRule],
|
|
184
|
-
// class: mx(horizontalRule, readonly && '-indent-[100rem]'),
|
|
185
|
-
// },
|
|
186
|
-
|
|
187
|
-
// TODO(burdon): Only if being edited.
|
|
188
179
|
{
|
|
189
180
|
tag: [markdownTags.TableCell],
|
|
190
181
|
class: 'font-mono',
|
|
@@ -193,12 +184,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
|
|
|
193
184
|
// Main content, paragraphs, etc.
|
|
194
185
|
// {
|
|
195
186
|
// tag: [tags.content],
|
|
196
|
-
// fontFamily:
|
|
187
|
+
// fontFamily: getToken('fontFamily.body', []).join(','),
|
|
197
188
|
// },
|
|
198
189
|
],
|
|
199
190
|
{
|
|
200
191
|
scope: markdownLanguage,
|
|
201
|
-
all: { fontFamily:
|
|
192
|
+
all: { fontFamily: getToken('fontFamily.body', []).join(',') },
|
|
202
193
|
},
|
|
203
194
|
);
|
|
204
195
|
};
|
package/src/extensions/table.ts
CHANGED
|
@@ -81,7 +81,6 @@ const update = (state: EditorState, options: TableOptions) => {
|
|
|
81
81
|
table.from,
|
|
82
82
|
table.to,
|
|
83
83
|
Decoration.replace({
|
|
84
|
-
block: true,
|
|
85
84
|
widget: new TableWidget(table),
|
|
86
85
|
}),
|
|
87
86
|
);
|
|
@@ -98,11 +97,14 @@ class TableWidget extends WidgetType {
|
|
|
98
97
|
super();
|
|
99
98
|
}
|
|
100
99
|
|
|
101
|
-
override eq(other:
|
|
102
|
-
return
|
|
100
|
+
override eq(other: this) {
|
|
101
|
+
return (
|
|
102
|
+
this._table.header?.join() === other._table.header?.join() &&
|
|
103
|
+
this._table.rows?.join() === other._table.rows?.join()
|
|
104
|
+
);
|
|
103
105
|
}
|
|
104
106
|
|
|
105
|
-
toDOM(view: EditorView) {
|
|
107
|
+
override toDOM(view: EditorView) {
|
|
106
108
|
const table = document.createElement('table');
|
|
107
109
|
|
|
108
110
|
{
|
|
@@ -129,4 +131,8 @@ class TableWidget extends WidgetType {
|
|
|
129
131
|
|
|
130
132
|
return table;
|
|
131
133
|
}
|
|
134
|
+
|
|
135
|
+
override ignoreEvent(e: Event) {
|
|
136
|
+
return !/^mouse/.test(e.type);
|
|
137
|
+
}
|
|
132
138
|
}
|
|
@@ -22,7 +22,6 @@ const styles = EditorView.baseTheme({
|
|
|
22
22
|
|
|
23
23
|
class CheckboxWidget extends WidgetType {
|
|
24
24
|
constructor(
|
|
25
|
-
private readonly _pos: number,
|
|
26
25
|
private _checked: boolean,
|
|
27
26
|
private readonly _indent: number,
|
|
28
27
|
private readonly _onCheck?: (check: boolean) => void,
|
|
@@ -30,11 +29,11 @@ class CheckboxWidget extends WidgetType {
|
|
|
30
29
|
super();
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
override eq(other:
|
|
34
|
-
return this.
|
|
32
|
+
override eq(other: this) {
|
|
33
|
+
return this._checked === other._checked && this._indent === other._indent;
|
|
35
34
|
}
|
|
36
35
|
|
|
37
|
-
toDOM(view: EditorView) {
|
|
36
|
+
override toDOM(view: EditorView) {
|
|
38
37
|
const wrap = document.createElement('span');
|
|
39
38
|
wrap.className = 'cm-task-item';
|
|
40
39
|
wrap.setAttribute('aria-hidden', 'true');
|
|
@@ -73,7 +72,6 @@ export const tasklist = (options: TasklistOptions = {}) => {
|
|
|
73
72
|
const checked = match[2] === 'x' || match[2] === 'X';
|
|
74
73
|
return Decoration.replace({
|
|
75
74
|
widget: new CheckboxWidget(
|
|
76
|
-
pos,
|
|
77
75
|
checked,
|
|
78
76
|
indent,
|
|
79
77
|
view.state.readOnly
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as Y from 'yjs';
|
|
6
|
+
|
|
7
|
+
import { arrayToString, stringToArray } from '@dxos/util';
|
|
8
|
+
|
|
9
|
+
import { type CursorConverter } from '../cursor';
|
|
10
|
+
|
|
11
|
+
export const cursorConverter = (text: Y.Text): CursorConverter => ({
|
|
12
|
+
toCursor: (index, assoc) => {
|
|
13
|
+
return arrayToString(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text, index, assoc)));
|
|
14
|
+
},
|
|
15
|
+
|
|
16
|
+
fromCursor: (cursor) => {
|
|
17
|
+
return (
|
|
18
|
+
Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(cursor)), text.doc!)?.index ??
|
|
19
|
+
0
|
|
20
|
+
);
|
|
21
|
+
},
|
|
22
|
+
});
|
|
@@ -2,13 +2,10 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { effect } from '@preact/signals-react';
|
|
6
5
|
import { expect } from 'chai';
|
|
7
6
|
import * as Y from 'yjs';
|
|
8
7
|
|
|
9
|
-
import {
|
|
10
|
-
import { Expando, setGlobalAutomergePreference, TextObject } from '@dxos/echo-schema';
|
|
11
|
-
import { registerSignalFactory } from '@dxos/echo-signals';
|
|
8
|
+
import { TextObject } from '@dxos/echo-schema';
|
|
12
9
|
import { describe, test } from '@dxos/test';
|
|
13
10
|
import { type YText } from '@dxos/text-model';
|
|
14
11
|
|
|
@@ -35,25 +32,4 @@ describe('YJS', () => {
|
|
|
35
32
|
expect(obj.text.substring(cursor!.index)).to.equal('world');
|
|
36
33
|
}
|
|
37
34
|
});
|
|
38
|
-
|
|
39
|
-
// TODO(burdon): Test deleting end character.
|
|
40
|
-
|
|
41
|
-
test.skip('effect', async () => {
|
|
42
|
-
setGlobalAutomergePreference(true);
|
|
43
|
-
registerSignalFactory();
|
|
44
|
-
const obj = new Expando({ comments: [] });
|
|
45
|
-
|
|
46
|
-
const trigger = new Trigger();
|
|
47
|
-
const unsubscribe = effect(() => {
|
|
48
|
-
// TODO(burdon): BUG: doesn't work with YJS.
|
|
49
|
-
console.log(obj.comments);
|
|
50
|
-
if (obj.comments.length > 0) {
|
|
51
|
-
trigger.wake();
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
obj.comments.push({ message: 'hello' });
|
|
56
|
-
await trigger.wait();
|
|
57
|
-
unsubscribe();
|
|
58
|
-
});
|
|
59
35
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { yCollab } from 'y-codemirror.next';
|
|
6
|
+
import type * as YP from 'y-protocols/awareness';
|
|
7
|
+
|
|
8
|
+
import type { YText } from '@dxos/text-model';
|
|
9
|
+
|
|
10
|
+
import { cursorConverter } from './cursor';
|
|
11
|
+
import { Cursor } from '../cursor';
|
|
12
|
+
|
|
13
|
+
export const yjs = (content: YText, awareness?: YP.Awareness) => [
|
|
14
|
+
Cursor.converter.of(cursorConverter(content)),
|
|
15
|
+
yCollab(content, awareness),
|
|
16
|
+
];
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import get from 'lodash.get';
|
|
6
|
+
|
|
7
|
+
import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
|
|
8
|
+
import { isNotNullOrUndefined } from '@dxos/util';
|
|
9
|
+
|
|
10
|
+
import { SpaceAwarenessProvider } from './awareness-provider';
|
|
11
|
+
import { type EditorModel, modelState, type UseTextModelProps } from './useTextModel';
|
|
12
|
+
import { automerge, awareness, AwarenessProvider } from '../extensions';
|
|
13
|
+
import { cursorColor } from '../styles';
|
|
14
|
+
|
|
15
|
+
export const createAutomergeModel = ({ space, identity, text }: UseTextModelProps): EditorModel => {
|
|
16
|
+
const obj = text as any as AutomergeTextCompat;
|
|
17
|
+
const doc = getRawDoc(obj, [obj.field]);
|
|
18
|
+
|
|
19
|
+
const awarenessProvider =
|
|
20
|
+
space &&
|
|
21
|
+
new SpaceAwarenessProvider({
|
|
22
|
+
space,
|
|
23
|
+
channel: `automerge.awareness.${obj.id}`,
|
|
24
|
+
info: {
|
|
25
|
+
displayName: identity?.profile?.displayName ?? '',
|
|
26
|
+
color: cursorColor.color,
|
|
27
|
+
lightColor: cursorColor.light,
|
|
28
|
+
},
|
|
29
|
+
peerId: identity?.identityKey.toHex() ?? 'Anonymous',
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
const model: EditorModel = {
|
|
33
|
+
id: obj.id,
|
|
34
|
+
content: doc,
|
|
35
|
+
text: () => get(doc.handle.docSync(), doc.path),
|
|
36
|
+
// TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
|
|
37
|
+
extension: [
|
|
38
|
+
modelState.init(() => model),
|
|
39
|
+
automerge({ handle: doc.handle, path: doc.path }),
|
|
40
|
+
awarenessProvider && AwarenessProvider.of(awarenessProvider),
|
|
41
|
+
awareness(),
|
|
42
|
+
].filter(isNotNullOrUndefined),
|
|
43
|
+
peer: identity
|
|
44
|
+
? {
|
|
45
|
+
id: identity.identityKey.toHex(),
|
|
46
|
+
name: identity.profile?.displayName,
|
|
47
|
+
}
|
|
48
|
+
: undefined,
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
return model;
|
|
52
|
+
};
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { DeferredTask, Event, sleep } from '@dxos/async';
|
|
6
|
+
import { Context } from '@dxos/context';
|
|
7
|
+
import { invariant } from '@dxos/invariant';
|
|
8
|
+
import { log } from '@dxos/log';
|
|
9
|
+
import { type Space } from '@dxos/react-client/echo';
|
|
10
|
+
import { type GossipMessage } from '@dxos/react-client/mesh';
|
|
11
|
+
|
|
12
|
+
import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '../extensions';
|
|
13
|
+
|
|
14
|
+
type ProtocolMessage =
|
|
15
|
+
| {
|
|
16
|
+
kind: 'query';
|
|
17
|
+
}
|
|
18
|
+
| {
|
|
19
|
+
kind: 'post';
|
|
20
|
+
state: AwarenessState;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const DEBOUNCE_INTERVAL = 100; // ms
|
|
24
|
+
|
|
25
|
+
export type AwarenessProviderParams = {
|
|
26
|
+
space: Space;
|
|
27
|
+
channel: string;
|
|
28
|
+
peerId: string;
|
|
29
|
+
info: AwarenessInfo;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export class SpaceAwarenessProvider implements AwarenessProvider {
|
|
33
|
+
public readonly remoteStateChange = new Event<void>();
|
|
34
|
+
|
|
35
|
+
private readonly _remoteStates = new Map<string, AwarenessState>();
|
|
36
|
+
|
|
37
|
+
private readonly _space: Space;
|
|
38
|
+
private readonly _channel: string;
|
|
39
|
+
private readonly _peerId: string;
|
|
40
|
+
private readonly _info: AwarenessInfo;
|
|
41
|
+
|
|
42
|
+
private _localState?: AwarenessState;
|
|
43
|
+
private _postTask?: DeferredTask;
|
|
44
|
+
private _ctx?: Context;
|
|
45
|
+
|
|
46
|
+
constructor(params: AwarenessProviderParams) {
|
|
47
|
+
this._space = params.space;
|
|
48
|
+
this._channel = params.channel;
|
|
49
|
+
this._peerId = params.peerId;
|
|
50
|
+
this._info = params.info;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
open() {
|
|
54
|
+
this._ctx = new Context();
|
|
55
|
+
this._postTask = new DeferredTask(this._ctx, async () => {
|
|
56
|
+
if (this._localState) {
|
|
57
|
+
await this._space.postMessage(this._channel, {
|
|
58
|
+
kind: 'post',
|
|
59
|
+
state: this._localState,
|
|
60
|
+
} satisfies ProtocolMessage);
|
|
61
|
+
|
|
62
|
+
await sleep(DEBOUNCE_INTERVAL);
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
const unsubscribe = this._space.listen(this._channel, (message: GossipMessage) => {
|
|
67
|
+
switch (message.payload.kind) {
|
|
68
|
+
case 'query': {
|
|
69
|
+
this._handleQueryMessage();
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
case 'post': {
|
|
73
|
+
this._handlePostMessage(message.payload);
|
|
74
|
+
break;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
this._ctx.onDispose(unsubscribe);
|
|
79
|
+
|
|
80
|
+
void this._space
|
|
81
|
+
.postMessage(this._channel, {
|
|
82
|
+
kind: 'query',
|
|
83
|
+
} satisfies ProtocolMessage)
|
|
84
|
+
.catch((err) => {
|
|
85
|
+
log.debug('failed to query awareness', { err });
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
close() {
|
|
90
|
+
void this._ctx?.dispose();
|
|
91
|
+
this._ctx = undefined;
|
|
92
|
+
this._postTask = undefined;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
update(position: AwarenessPosition | undefined): void {
|
|
96
|
+
invariant(this._postTask);
|
|
97
|
+
this._localState = {
|
|
98
|
+
peerId: this._peerId,
|
|
99
|
+
position,
|
|
100
|
+
info: this._info,
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
this._postTask.schedule();
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
getRemoteStates(): AwarenessState[] {
|
|
107
|
+
return Array.from(this._remoteStates.values());
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
private _handleQueryMessage() {
|
|
111
|
+
invariant(this._postTask);
|
|
112
|
+
this._postTask.schedule();
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
private _handlePostMessage(message: ProtocolMessage) {
|
|
116
|
+
invariant(message.kind === 'post');
|
|
117
|
+
this._remoteStates.set(message.state.peerId, message.state);
|
|
118
|
+
this.remoteStateChange.emit();
|
|
119
|
+
}
|
|
120
|
+
}
|