@dxos/react-ui-editor 0.3.10-main.f916973 → 0.3.10-next.5353ed8
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 +25 -111
- 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.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/comments.d.ts +6 -10
- package/dist/types/src/components/TextEditor/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/index.d.ts +0 -1
- package/dist/types/src/components/TextEditor/extensions/index.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/listener.d.ts +2 -4
- package/dist/types/src/components/TextEditor/extensions/listener.d.ts.map +1 -1
- package/package.json +19 -20
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +2 -4
- package/src/components/TextEditor/TextEditor.tsx +4 -18
- package/src/components/TextEditor/extensions/comments.ts +31 -48
- package/src/components/TextEditor/extensions/index.ts +0 -1
- package/src/components/TextEditor/extensions/listener.ts +2 -2
- package/dist/types/src/components/TextEditor/extensions/demo.d.ts +0 -10
- package/dist/types/src/components/TextEditor/extensions/demo.d.ts.map +0 -1
- package/src/components/TextEditor/extensions/demo.ts +0 -66
|
@@ -54,66 +54,8 @@ var basicBundle = ({ themeMode, placeholder: _placeholder }) => [
|
|
|
54
54
|
themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
|
|
55
55
|
].filter(Boolean);
|
|
56
56
|
|
|
57
|
-
// packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
|
|
58
|
-
import { keymap as keymap2 } from "@codemirror/view";
|
|
59
|
-
var defaultItems = [
|
|
60
|
-
"hello world!",
|
|
61
|
-
"this is a test.",
|
|
62
|
-
"this is [DXOS](https://dxos.org)"
|
|
63
|
-
];
|
|
64
|
-
var demo = ({ delay = 75, items = defaultItems } = {}) => {
|
|
65
|
-
let t;
|
|
66
|
-
let idx = 0;
|
|
67
|
-
return [
|
|
68
|
-
keymap2.of([
|
|
69
|
-
{
|
|
70
|
-
// Reset.
|
|
71
|
-
key: "alt-meta-'",
|
|
72
|
-
run: (view) => {
|
|
73
|
-
clearTimeout(t);
|
|
74
|
-
idx = 0;
|
|
75
|
-
return true;
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
// Next prompt.
|
|
80
|
-
// TODO(burdon): Press 1-9 to select prompt?
|
|
81
|
-
key: "shift-meta-'",
|
|
82
|
-
run: (view) => {
|
|
83
|
-
clearTimeout(t);
|
|
84
|
-
const text = items[idx++];
|
|
85
|
-
if (idx === items?.length) {
|
|
86
|
-
idx = 0;
|
|
87
|
-
}
|
|
88
|
-
let i = 0;
|
|
89
|
-
const insert = (d = 0) => {
|
|
90
|
-
t = setTimeout(() => {
|
|
91
|
-
const pos = view.state.selection.main.head;
|
|
92
|
-
view.dispatch({
|
|
93
|
-
changes: {
|
|
94
|
-
from: pos,
|
|
95
|
-
insert: text[i++]
|
|
96
|
-
},
|
|
97
|
-
selection: {
|
|
98
|
-
anchor: pos + 1
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
if (i < text.length) {
|
|
102
|
-
insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
|
|
103
|
-
}
|
|
104
|
-
}, d);
|
|
105
|
-
};
|
|
106
|
-
insert();
|
|
107
|
-
return true;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
])
|
|
111
|
-
];
|
|
112
|
-
};
|
|
113
|
-
|
|
114
57
|
// packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
|
|
115
|
-
import {
|
|
116
|
-
import { debounce } from "@dxos/async";
|
|
58
|
+
import { Decoration, EditorView as EditorView2, keymap as keymap2, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
|
|
117
59
|
import { invariant } from "@dxos/invariant";
|
|
118
60
|
var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
|
|
119
61
|
var BookmarkWidget = class extends WidgetType {
|
|
@@ -123,7 +65,7 @@ var BookmarkWidget = class extends WidgetType {
|
|
|
123
65
|
this._id = _id;
|
|
124
66
|
invariant(this._id, void 0, {
|
|
125
67
|
F: __dxlog_file,
|
|
126
|
-
L:
|
|
68
|
+
L: 40,
|
|
127
69
|
S: this,
|
|
128
70
|
A: [
|
|
129
71
|
"this._id",
|
|
@@ -134,6 +76,7 @@ var BookmarkWidget = class extends WidgetType {
|
|
|
134
76
|
eq(other) {
|
|
135
77
|
return this._id === other._id;
|
|
136
78
|
}
|
|
79
|
+
// TODO(burdon): Click to select.
|
|
137
80
|
toDOM() {
|
|
138
81
|
const span = document.createElement("span");
|
|
139
82
|
span.className = "cm-bookmark";
|
|
@@ -147,13 +90,9 @@ var styles = EditorView2.baseTheme({
|
|
|
147
90
|
margin: "4px",
|
|
148
91
|
padding: "4px",
|
|
149
92
|
backgroundColor: "yellow"
|
|
150
|
-
},
|
|
151
|
-
"& .cm-bookmark-selected": {
|
|
152
|
-
backgroundColor: "orange"
|
|
153
93
|
}
|
|
154
94
|
});
|
|
155
95
|
var comments = (options = {}) => {
|
|
156
|
-
let active;
|
|
157
96
|
const bookmarkMatcher = new MatchDecorator({
|
|
158
97
|
regexp: /\[\^(\w+)\]/g,
|
|
159
98
|
decoration: (match, view, pos) => {
|
|
@@ -177,13 +116,10 @@ var comments = (options = {}) => {
|
|
|
177
116
|
return view.plugin(plugin)?.bookmarks || Decoration.none;
|
|
178
117
|
})
|
|
179
118
|
});
|
|
180
|
-
const doUpdate = debounce((data) => {
|
|
181
|
-
options.onUpdate?.(data);
|
|
182
|
-
}, 200);
|
|
183
119
|
return [
|
|
184
|
-
|
|
120
|
+
keymap2.of([
|
|
185
121
|
{
|
|
186
|
-
key: options?.key ?? "
|
|
122
|
+
key: options?.key ?? "alt-meta-c",
|
|
187
123
|
run: (view) => {
|
|
188
124
|
const id = options.onCreate?.();
|
|
189
125
|
if (id) {
|
|
@@ -207,40 +143,30 @@ var comments = (options = {}) => {
|
|
|
207
143
|
bookmarks,
|
|
208
144
|
// Monitor cursor movement.
|
|
209
145
|
EditorView2.updateListener.of((update2) => {
|
|
210
|
-
active = void 0;
|
|
211
|
-
if (!options.onUpdate) {
|
|
212
|
-
return;
|
|
213
|
-
}
|
|
214
146
|
const view = update2.view;
|
|
215
147
|
const pos = view.state.selection.main.head;
|
|
216
148
|
const decorations = [];
|
|
217
149
|
const rangeSet = view.plugin(bookmarks)?.bookmarks;
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
from: from2,
|
|
226
|
-
to: to2,
|
|
227
|
-
value
|
|
228
|
-
});
|
|
229
|
-
const d = Math.min(Math.abs(pos - from2), Math.abs(pos - to2));
|
|
230
|
-
if (d < closest) {
|
|
231
|
-
active = value.spec.id;
|
|
232
|
-
closest = d;
|
|
150
|
+
rangeSet?.between(pos, pos + 1, (from, to, value) => {
|
|
151
|
+
if (value.spec.widget) {
|
|
152
|
+
decorations.push({
|
|
153
|
+
from,
|
|
154
|
+
to,
|
|
155
|
+
value
|
|
156
|
+
});
|
|
233
157
|
}
|
|
234
158
|
});
|
|
235
159
|
if (decorations.length) {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
160
|
+
const { from, value: { spec: { id } } } = decorations[0];
|
|
161
|
+
const location = view.coordsAtPos(from);
|
|
162
|
+
if (location) {
|
|
163
|
+
options.onUpdate?.({
|
|
164
|
+
items: decorations.map(({ value: { spec: { id: id2 } } }) => id2),
|
|
165
|
+
active: id,
|
|
166
|
+
pos,
|
|
167
|
+
location
|
|
168
|
+
});
|
|
169
|
+
}
|
|
244
170
|
}
|
|
245
171
|
}),
|
|
246
172
|
styles
|
|
@@ -336,7 +262,7 @@ var link = (options = {}) => {
|
|
|
336
262
|
|
|
337
263
|
// packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
|
|
338
264
|
import { StateField as StateField2 } from "@codemirror/state";
|
|
339
|
-
var listener = (
|
|
265
|
+
var listener = (onChange) => StateField2.define({
|
|
340
266
|
create: () => null,
|
|
341
267
|
update: (_value, transaction) => {
|
|
342
268
|
if (transaction.docChanged && onChange) {
|
|
@@ -355,7 +281,7 @@ import { languages } from "@codemirror/language-data";
|
|
|
355
281
|
import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
|
|
356
282
|
import { EditorState } from "@codemirror/state";
|
|
357
283
|
import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
|
|
358
|
-
import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as
|
|
284
|
+
import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap3, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
|
|
359
285
|
|
|
360
286
|
// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
|
|
361
287
|
import { markdownLanguage } from "@codemirror/lang-markdown";
|
|
@@ -565,7 +491,7 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
|
|
|
565
491
|
indentOnInput(),
|
|
566
492
|
rectangularSelection(),
|
|
567
493
|
// TODO(burdon): Review.
|
|
568
|
-
|
|
494
|
+
keymap3.of([
|
|
569
495
|
...closeBracketsKeymap,
|
|
570
496
|
...defaultKeymap,
|
|
571
497
|
// ...foldKeymap,
|
|
@@ -1000,15 +926,6 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
|
|
|
1000
926
|
onKeyUp: handleKeyUp
|
|
1001
927
|
});
|
|
1002
928
|
});
|
|
1003
|
-
var maybeDebug = () => {
|
|
1004
|
-
const items = localStorage.getItem("dxos.composer.demo");
|
|
1005
|
-
if (items) {
|
|
1006
|
-
return demo({
|
|
1007
|
-
items: items.split(",")
|
|
1008
|
-
});
|
|
1009
|
-
}
|
|
1010
|
-
return [];
|
|
1011
|
-
};
|
|
1012
929
|
var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
|
|
1013
930
|
const { themeMode } = useThemeContext();
|
|
1014
931
|
const slots = defaultsDeep({}, _slots, defaultTextSlots);
|
|
@@ -1019,7 +936,6 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, .
|
|
|
1019
936
|
themeMode,
|
|
1020
937
|
placeholder: slots?.editor?.placeholder
|
|
1021
938
|
}),
|
|
1022
|
-
maybeDebug(),
|
|
1023
939
|
...extensions
|
|
1024
940
|
],
|
|
1025
941
|
slots,
|
|
@@ -1036,7 +952,6 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slot
|
|
|
1036
952
|
themeMode,
|
|
1037
953
|
placeholder: slots?.editor?.placeholder
|
|
1038
954
|
}),
|
|
1039
|
-
maybeDebug(),
|
|
1040
955
|
...extensions
|
|
1041
956
|
],
|
|
1042
957
|
slots,
|
|
@@ -1550,7 +1465,6 @@ export {
|
|
|
1550
1465
|
defaultSlots,
|
|
1551
1466
|
defaultTextSlots,
|
|
1552
1467
|
defaultTheme,
|
|
1553
|
-
demo,
|
|
1554
1468
|
link,
|
|
1555
1469
|
listener,
|
|
1556
1470
|
markdownBundle,
|