@dxos/react-ui-editor 0.3.11-main.9bacd9f → 0.3.11-main.a996413
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 +110 -81
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/index.d.ts +0 -2
- package/dist/types/src/components/TextEditor/index.d.ts.map +1 -1
- package/dist/types/src/extensions/autocomplete.d.ts.map +1 -0
- package/dist/types/src/extensions/basic.d.ts.map +1 -0
- package/dist/types/src/extensions/blast.d.ts.map +1 -0
- package/dist/types/src/extensions/code.d.ts.map +1 -0
- package/dist/types/src/{components/TextEditor/extensions → extensions}/comments.d.ts +4 -2
- package/dist/types/src/extensions/comments.d.ts.map +1 -0
- package/dist/types/src/extensions/hr.d.ts.map +1 -0
- package/dist/types/src/extensions/image.d.ts.map +1 -0
- package/dist/types/src/extensions/index.d.ts.map +1 -0
- package/dist/types/src/extensions/link.d.ts.map +1 -0
- package/dist/types/src/extensions/listener.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -0
- package/dist/types/src/extensions/markdown/index.d.ts.map +1 -0
- package/dist/types/src/extensions/mention.d.ts.map +1 -0
- package/dist/types/src/extensions/mermaid.d.ts.map +1 -0
- package/dist/types/src/extensions/table.d.ts.map +1 -0
- package/dist/types/src/extensions/tasklist.d.ts.map +1 -0
- package/dist/types/src/extensions/typewriter.d.ts.map +1 -0
- package/dist/types/src/extensions/util.d.ts.map +1 -0
- package/dist/types/src/hooks/automerge/plugin.d.ts.map +1 -1
- package/dist/types/src/hooks/useTextModel.d.ts +1 -1
- package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +2 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/{components/TextEditor/themes → themes}/default.d.ts +1 -1
- package/dist/types/src/themes/default.d.ts.map +1 -0
- package/dist/types/src/themes/index.d.ts.map +1 -0
- package/package.json +21 -21
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +1 -1
- package/src/components/TextEditor/TextEditor.stories.tsx +1 -1
- package/src/components/TextEditor/TextEditor.tsx +2 -2
- package/src/components/TextEditor/index.ts +0 -3
- package/src/{components/TextEditor/extensions → extensions}/code.ts +1 -1
- package/src/{components/TextEditor/extensions → extensions}/comments.ts +26 -10
- package/src/{components/TextEditor/extensions → extensions}/hr.ts +1 -1
- package/src/{components/TextEditor/extensions → extensions}/markdown/highlight.ts +1 -1
- package/src/{components/TextEditor/extensions → extensions}/typewriter.ts +1 -1
- package/src/hooks/automerge/plugin.ts +3 -5
- package/src/hooks/useTextModel.ts +5 -4
- package/src/index.ts +2 -0
- package/src/{components/TextEditor/themes → themes}/default.ts +1 -1
- package/dist/types/src/components/TextEditor/extensions/autocomplete.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/basic.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/blast.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/code.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/comments.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/hr.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/image.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/index.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/link.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/listener.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/bundle.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/highlight.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/index.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/mention.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/mermaid.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/table.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/typewriter.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/util.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/themes/default.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/themes/index.d.ts.map +0 -1
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/autocomplete.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/basic.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/blast.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/code.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/hr.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/image.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/index.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/link.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/listener.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/markdown/bundle.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/markdown/highlight.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/markdown/index.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/mention.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/mermaid.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/table.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/tasklist.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/typewriter.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/extensions → extensions}/util.d.ts +0 -0
- /package/dist/types/src/{components/TextEditor/themes → themes}/index.d.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/autocomplete.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/basic.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/blast.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/image.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/index.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/link.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/listener.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/markdown/bundle.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/markdown/index.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/mention.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/mermaid.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/table.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/tasklist.ts +0 -0
- /package/src/{components/TextEditor/extensions → extensions}/util.ts +0 -0
- /package/src/{components/TextEditor/themes → themes}/index.ts +0 -0
|
@@ -5,7 +5,18 @@ import { Doc, YText, YXmlFragment } from "@dxos/text-model";
|
|
|
5
5
|
// packages/ui/react-ui-editor/src/components/TextEditor/index.ts
|
|
6
6
|
import { tags as tags2 } from "@lezer/highlight";
|
|
7
7
|
|
|
8
|
-
// packages/ui/react-ui-editor/src/components/TextEditor/
|
|
8
|
+
// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
|
|
9
|
+
import { EditorState as EditorState2 } from "@codemirror/state";
|
|
10
|
+
import { EditorView as EditorView12 } from "@codemirror/view";
|
|
11
|
+
import { useFocusableGroup } from "@fluentui/react-tabster";
|
|
12
|
+
import { vim } from "@replit/codemirror-vim";
|
|
13
|
+
import defaultsDeep2 from "lodash.defaultsdeep";
|
|
14
|
+
import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
|
|
15
|
+
import { generateName } from "@dxos/display-name";
|
|
16
|
+
import { useThemeContext } from "@dxos/react-ui";
|
|
17
|
+
import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
|
|
18
|
+
|
|
19
|
+
// packages/ui/react-ui-editor/src/extensions/autocomplete.ts
|
|
9
20
|
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
|
|
10
21
|
import { keymap } from "@codemirror/view";
|
|
11
22
|
var autocomplete = ({ onSearch }) => {
|
|
@@ -38,7 +49,7 @@ var autocomplete = ({ onSearch }) => {
|
|
|
38
49
|
];
|
|
39
50
|
};
|
|
40
51
|
|
|
41
|
-
// packages/ui/react-ui-editor/src/
|
|
52
|
+
// packages/ui/react-ui-editor/src/extensions/basic.ts
|
|
42
53
|
import { closeBrackets } from "@codemirror/autocomplete";
|
|
43
54
|
import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
|
|
44
55
|
import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
|
|
@@ -55,11 +66,11 @@ var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
|
|
|
55
66
|
themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
|
|
56
67
|
].filter(Boolean);
|
|
57
68
|
|
|
58
|
-
// packages/ui/react-ui-editor/src/
|
|
69
|
+
// packages/ui/react-ui-editor/src/extensions/blast.ts
|
|
59
70
|
import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
|
|
60
71
|
import defaultsDeep from "lodash.defaultsdeep";
|
|
61
72
|
import { invariant } from "@dxos/invariant";
|
|
62
|
-
var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/
|
|
73
|
+
var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
|
|
63
74
|
var defaultOptions = {
|
|
64
75
|
effect: 2,
|
|
65
76
|
maxParticles: 200,
|
|
@@ -365,7 +376,7 @@ var random = (min, max) => {
|
|
|
365
376
|
return min + ~~(Math.random() * (max - min + 1));
|
|
366
377
|
};
|
|
367
378
|
|
|
368
|
-
// packages/ui/react-ui-editor/src/
|
|
379
|
+
// packages/ui/react-ui-editor/src/extensions/code.ts
|
|
369
380
|
import { ViewPlugin, EditorView as EditorView3, Decoration } from "@codemirror/view";
|
|
370
381
|
import get from "lodash.get";
|
|
371
382
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
@@ -416,7 +427,7 @@ var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-pri
|
|
|
416
427
|
import { tailwindConfig } from "@dxos/react-ui-theme";
|
|
417
428
|
var tokens = tailwindConfig({}).theme;
|
|
418
429
|
|
|
419
|
-
// packages/ui/react-ui-editor/src/
|
|
430
|
+
// packages/ui/react-ui-editor/src/extensions/code.ts
|
|
420
431
|
var CODE_REGEX = /```[\s\S]*?```/gs;
|
|
421
432
|
var styles = EditorView3.baseTheme({
|
|
422
433
|
"& .cm-codeblock": {
|
|
@@ -487,18 +498,19 @@ var code2 = () => {
|
|
|
487
498
|
];
|
|
488
499
|
};
|
|
489
500
|
|
|
490
|
-
// packages/ui/react-ui-editor/src/
|
|
501
|
+
// packages/ui/react-ui-editor/src/extensions/comments.ts
|
|
491
502
|
import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
|
|
492
503
|
import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
|
|
504
|
+
import get3 from "lodash.get";
|
|
493
505
|
import sortBy from "lodash.sortby";
|
|
494
506
|
import { debounce } from "@dxos/async";
|
|
495
507
|
import { invariant as invariant3 } from "@dxos/invariant";
|
|
496
508
|
import { log as log3 } from "@dxos/log";
|
|
497
509
|
import { nonNullable } from "@dxos/util";
|
|
498
510
|
|
|
499
|
-
// packages/ui/react-ui-editor/src/
|
|
511
|
+
// packages/ui/react-ui-editor/src/extensions/util.ts
|
|
500
512
|
import { log } from "@dxos/log";
|
|
501
|
-
var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/
|
|
513
|
+
var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util.ts";
|
|
502
514
|
var callbackWrapper = (fn) => (...args) => {
|
|
503
515
|
try {
|
|
504
516
|
return fn(...args);
|
|
@@ -743,15 +755,15 @@ var automergePlugin = (handle, path) => {
|
|
|
743
755
|
});
|
|
744
756
|
const semaphore = new PatchSemaphore(stateField);
|
|
745
757
|
const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
|
|
746
|
-
constructor(
|
|
758
|
+
constructor(_view) {
|
|
759
|
+
this._view = _view;
|
|
747
760
|
this._handleChange = () => {
|
|
748
761
|
this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
|
|
749
762
|
};
|
|
750
|
-
this._view = view;
|
|
751
763
|
handle.addListener("change", this._handleChange);
|
|
752
764
|
}
|
|
753
765
|
update(update4) {
|
|
754
|
-
if (update4.transactions.length > 0 && update4.transactions.some((
|
|
766
|
+
if (update4.transactions.length > 0 && update4.transactions.some((tr) => !isReconcileTx(tr))) {
|
|
755
767
|
queueMicrotask(() => {
|
|
756
768
|
this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
|
|
757
769
|
});
|
|
@@ -966,13 +978,22 @@ var createYjsModel = ({ identity, space, text }) => {
|
|
|
966
978
|
].join(":");
|
|
967
979
|
},
|
|
968
980
|
getRangeFromCursor: (cursor) => {
|
|
981
|
+
invariant2(text.doc, void 0, {
|
|
982
|
+
F: __dxlog_file4,
|
|
983
|
+
L: 113,
|
|
984
|
+
S: void 0,
|
|
985
|
+
A: [
|
|
986
|
+
"text.doc",
|
|
987
|
+
""
|
|
988
|
+
]
|
|
989
|
+
});
|
|
969
990
|
const parts = cursor.split(":");
|
|
970
991
|
const from = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[0])), text.doc);
|
|
971
992
|
const to = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[1])), text.doc);
|
|
972
|
-
return {
|
|
993
|
+
return from && to ? {
|
|
973
994
|
from: from.index,
|
|
974
995
|
to: to.index
|
|
975
|
-
};
|
|
996
|
+
} : void 0;
|
|
976
997
|
},
|
|
977
998
|
extension: [
|
|
978
999
|
yCollab(text.content, provider?.awareness),
|
|
@@ -1008,8 +1029,8 @@ var createAutomergeModel = ({ identity, text }) => {
|
|
|
1008
1029
|
return model;
|
|
1009
1030
|
};
|
|
1010
1031
|
|
|
1011
|
-
// packages/ui/react-ui-editor/src/
|
|
1012
|
-
var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/
|
|
1032
|
+
// packages/ui/react-ui-editor/src/extensions/comments.ts
|
|
1033
|
+
var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
|
|
1013
1034
|
var styles2 = EditorView4.baseTheme({
|
|
1014
1035
|
"& .cm-bookmark": {
|
|
1015
1036
|
cursor: "pointer",
|
|
@@ -1021,10 +1042,10 @@ var styles2 = EditorView4.baseTheme({
|
|
|
1021
1042
|
backgroundColor: "orange"
|
|
1022
1043
|
},
|
|
1023
1044
|
"& .cm-comment": {
|
|
1024
|
-
backgroundColor: "yellow"
|
|
1045
|
+
backgroundColor: get3(tokens, "extend.colors.yellow.50")
|
|
1025
1046
|
},
|
|
1026
1047
|
"& .cm-comment-active": {
|
|
1027
|
-
backgroundColor: "
|
|
1048
|
+
backgroundColor: get3(tokens, "extend.colors.yellow.100")
|
|
1028
1049
|
}
|
|
1029
1050
|
});
|
|
1030
1051
|
var marks = {
|
|
@@ -1035,6 +1056,21 @@ var marks = {
|
|
|
1035
1056
|
class: "cm-comment-active"
|
|
1036
1057
|
})
|
|
1037
1058
|
};
|
|
1059
|
+
var setFocus = (view, thread) => {
|
|
1060
|
+
const range = view.state.field(commentsStateField).ranges.find((range2) => range2.id === thread);
|
|
1061
|
+
if (!range) {
|
|
1062
|
+
return;
|
|
1063
|
+
}
|
|
1064
|
+
view.dispatch({
|
|
1065
|
+
effects: setSelection.of({
|
|
1066
|
+
active: thread
|
|
1067
|
+
}),
|
|
1068
|
+
selection: {
|
|
1069
|
+
anchor: range.from
|
|
1070
|
+
},
|
|
1071
|
+
scrollIntoView: true
|
|
1072
|
+
});
|
|
1073
|
+
};
|
|
1038
1074
|
var setCommentRange = StateEffect2.define();
|
|
1039
1075
|
var setSelection = StateEffect2.define();
|
|
1040
1076
|
var setCommentState = StateEffect2.define();
|
|
@@ -1054,11 +1090,11 @@ var commentsStateField = StateField3.define({
|
|
|
1054
1090
|
const { model, comments: comments2 } = effect.value;
|
|
1055
1091
|
const ranges = comments2.map((comment) => {
|
|
1056
1092
|
const range = model.getRangeFromCursor(comment.cursor);
|
|
1057
|
-
return {
|
|
1093
|
+
return range && {
|
|
1058
1094
|
...comment,
|
|
1059
1095
|
...range
|
|
1060
1096
|
};
|
|
1061
|
-
});
|
|
1097
|
+
}).filter(nonNullable);
|
|
1062
1098
|
return {
|
|
1063
1099
|
...value,
|
|
1064
1100
|
ranges
|
|
@@ -1099,7 +1135,7 @@ var BookmarkWidget = class extends WidgetType {
|
|
|
1099
1135
|
this._handleClick = _handleClick;
|
|
1100
1136
|
invariant3(this._id, void 0, {
|
|
1101
1137
|
F: __dxlog_file5,
|
|
1102
|
-
L:
|
|
1138
|
+
L: 167,
|
|
1103
1139
|
S: this,
|
|
1104
1140
|
A: [
|
|
1105
1141
|
"this._id",
|
|
@@ -1125,7 +1161,7 @@ var comments = (options = {}) => {
|
|
|
1125
1161
|
const createCommentThread = (view) => {
|
|
1126
1162
|
invariant3(options.onCreate, void 0, {
|
|
1127
1163
|
F: __dxlog_file5,
|
|
1128
|
-
L:
|
|
1164
|
+
L: 221,
|
|
1129
1165
|
S: void 0,
|
|
1130
1166
|
A: [
|
|
1131
1167
|
"options.onCreate",
|
|
@@ -1251,7 +1287,7 @@ var comments = (options = {}) => {
|
|
|
1251
1287
|
changes.iterChanges((from, to, from2, to2) => {
|
|
1252
1288
|
invariant3(model, void 0, {
|
|
1253
1289
|
F: __dxlog_file5,
|
|
1254
|
-
L:
|
|
1290
|
+
L: 350,
|
|
1255
1291
|
S: void 0,
|
|
1256
1292
|
A: [
|
|
1257
1293
|
"model",
|
|
@@ -1261,12 +1297,12 @@ var comments = (options = {}) => {
|
|
|
1261
1297
|
ranges.forEach((range) => {
|
|
1262
1298
|
if (from2 === to2) {
|
|
1263
1299
|
const newRange = model.getRangeFromCursor(range.cursor);
|
|
1264
|
-
if (newRange.to - newRange.from === 0) {
|
|
1300
|
+
if (!newRange || newRange.to - newRange.from === 0) {
|
|
1265
1301
|
log3.info("deleted comment", {
|
|
1266
1302
|
thread: range.id
|
|
1267
1303
|
}, {
|
|
1268
1304
|
F: __dxlog_file5,
|
|
1269
|
-
L:
|
|
1305
|
+
L: 356,
|
|
1270
1306
|
S: void 0,
|
|
1271
1307
|
C: (f, a) => f(...a)
|
|
1272
1308
|
});
|
|
@@ -1323,14 +1359,14 @@ var comments = (options = {}) => {
|
|
|
1323
1359
|
];
|
|
1324
1360
|
};
|
|
1325
1361
|
|
|
1326
|
-
// packages/ui/react-ui-editor/src/
|
|
1362
|
+
// packages/ui/react-ui-editor/src/extensions/hr.ts
|
|
1327
1363
|
import { Decoration as Decoration3, EditorView as EditorView5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
|
|
1328
|
-
import
|
|
1364
|
+
import get4 from "lodash.get";
|
|
1329
1365
|
var styles3 = EditorView5.baseTheme({
|
|
1330
1366
|
"& .cm-hr": {
|
|
1331
1367
|
// TODO(burdon): ???
|
|
1332
1368
|
// Note that block-level decorations should not have vertical margins,
|
|
1333
|
-
borderBottom: `1px solid ${
|
|
1369
|
+
borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
|
|
1334
1370
|
}
|
|
1335
1371
|
});
|
|
1336
1372
|
var HorizontalRuleWidget = class extends WidgetType2 {
|
|
@@ -1371,7 +1407,7 @@ var hr = () => [
|
|
|
1371
1407
|
})
|
|
1372
1408
|
];
|
|
1373
1409
|
|
|
1374
|
-
// packages/ui/react-ui-editor/src/
|
|
1410
|
+
// packages/ui/react-ui-editor/src/extensions/image.ts
|
|
1375
1411
|
import { syntaxTree } from "@codemirror/language";
|
|
1376
1412
|
import { RangeSetBuilder, StateField as StateField4 } from "@codemirror/state";
|
|
1377
1413
|
import { Decoration as Decoration4, EditorView as EditorView6, WidgetType as WidgetType3 } from "@codemirror/view";
|
|
@@ -1419,7 +1455,7 @@ var ImageWidget = class extends WidgetType3 {
|
|
|
1419
1455
|
}
|
|
1420
1456
|
};
|
|
1421
1457
|
|
|
1422
|
-
// packages/ui/react-ui-editor/src/
|
|
1458
|
+
// packages/ui/react-ui-editor/src/extensions/link.ts
|
|
1423
1459
|
import { syntaxTree as syntaxTree2 } from "@codemirror/language";
|
|
1424
1460
|
import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
|
|
1425
1461
|
import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2 } from "@codemirror/view";
|
|
@@ -1556,7 +1592,7 @@ var update2 = (state, options) => {
|
|
|
1556
1592
|
return builder.finish();
|
|
1557
1593
|
};
|
|
1558
1594
|
|
|
1559
|
-
// packages/ui/react-ui-editor/src/
|
|
1595
|
+
// packages/ui/react-ui-editor/src/extensions/listener.ts
|
|
1560
1596
|
import { EditorView as EditorView8 } from "@codemirror/view";
|
|
1561
1597
|
var listener = ({ onFocus, onChange }) => {
|
|
1562
1598
|
const extensions = [];
|
|
@@ -1570,7 +1606,7 @@ var listener = ({ onFocus, onChange }) => {
|
|
|
1570
1606
|
return extensions;
|
|
1571
1607
|
};
|
|
1572
1608
|
|
|
1573
|
-
// packages/ui/react-ui-editor/src/
|
|
1609
|
+
// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
|
|
1574
1610
|
import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
|
|
1575
1611
|
import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
|
|
1576
1612
|
import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
|
|
@@ -1581,12 +1617,12 @@ import { EditorState } from "@codemirror/state";
|
|
|
1581
1617
|
import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
|
|
1582
1618
|
import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
|
|
1583
1619
|
|
|
1584
|
-
// packages/ui/react-ui-editor/src/
|
|
1620
|
+
// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
|
|
1585
1621
|
import { markdownLanguage } from "@codemirror/lang-markdown";
|
|
1586
1622
|
import { HighlightStyle } from "@codemirror/language";
|
|
1587
1623
|
import { tags, styleTags, Tag } from "@lezer/highlight";
|
|
1588
1624
|
import { Table } from "@lezer/markdown";
|
|
1589
|
-
import
|
|
1625
|
+
import get5 from "lodash.get";
|
|
1590
1626
|
var markdownTags = {
|
|
1591
1627
|
Blockquote: Tag.define(),
|
|
1592
1628
|
CodeMark: Tag.define(),
|
|
@@ -1772,12 +1808,12 @@ var markdownHighlightStyle = (readonly) => {
|
|
|
1772
1808
|
], {
|
|
1773
1809
|
scope: markdownLanguage,
|
|
1774
1810
|
all: {
|
|
1775
|
-
fontFamily:
|
|
1811
|
+
fontFamily: get5(tokens, "fontFamily.body", []).join(",")
|
|
1776
1812
|
}
|
|
1777
1813
|
});
|
|
1778
1814
|
};
|
|
1779
1815
|
|
|
1780
|
-
// packages/ui/react-ui-editor/src/
|
|
1816
|
+
// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
|
|
1781
1817
|
var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
|
|
1782
1818
|
return [
|
|
1783
1819
|
EditorState.allowMultipleSelections.of(true),
|
|
@@ -1830,7 +1866,7 @@ var customKeymap = () => keymap4.of([
|
|
|
1830
1866
|
...searchKeymap
|
|
1831
1867
|
]);
|
|
1832
1868
|
|
|
1833
|
-
// packages/ui/react-ui-editor/src/
|
|
1869
|
+
// packages/ui/react-ui-editor/src/extensions/mention.ts
|
|
1834
1870
|
import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
|
|
1835
1871
|
var mention = ({ onSearch }) => {
|
|
1836
1872
|
return autocompletion2({
|
|
@@ -1853,12 +1889,12 @@ var mention = ({ onSearch }) => {
|
|
|
1853
1889
|
});
|
|
1854
1890
|
};
|
|
1855
1891
|
|
|
1856
|
-
// packages/ui/react-ui-editor/src/
|
|
1892
|
+
// packages/ui/react-ui-editor/src/extensions/mermaid.ts
|
|
1857
1893
|
var mermaid = () => {
|
|
1858
1894
|
return [];
|
|
1859
1895
|
};
|
|
1860
1896
|
|
|
1861
|
-
// packages/ui/react-ui-editor/src/
|
|
1897
|
+
// packages/ui/react-ui-editor/src/extensions/table.ts
|
|
1862
1898
|
import { syntaxTree as syntaxTree3 } from "@codemirror/language";
|
|
1863
1899
|
import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
|
|
1864
1900
|
import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType5 } from "@codemirror/view";
|
|
@@ -1954,7 +1990,7 @@ var TableWidget = class extends WidgetType5 {
|
|
|
1954
1990
|
}
|
|
1955
1991
|
};
|
|
1956
1992
|
|
|
1957
|
-
// packages/ui/react-ui-editor/src/
|
|
1993
|
+
// packages/ui/react-ui-editor/src/extensions/tasklist.ts
|
|
1958
1994
|
import { EditorView as EditorView11, Decoration as Decoration7, WidgetType as WidgetType6, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
|
|
1959
1995
|
var styles4 = EditorView11.baseTheme({
|
|
1960
1996
|
"& .cm-task-item": {
|
|
@@ -2039,7 +2075,7 @@ var tasklist = (options = {}) => {
|
|
|
2039
2075
|
];
|
|
2040
2076
|
};
|
|
2041
2077
|
|
|
2042
|
-
// packages/ui/react-ui-editor/src/
|
|
2078
|
+
// packages/ui/react-ui-editor/src/extensions/typewriter.ts
|
|
2043
2079
|
import { keymap as keymap5 } from "@codemirror/view";
|
|
2044
2080
|
var defaultItems = [
|
|
2045
2081
|
"hello world!",
|
|
@@ -2096,8 +2132,8 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
|
|
|
2096
2132
|
];
|
|
2097
2133
|
};
|
|
2098
2134
|
|
|
2099
|
-
// packages/ui/react-ui-editor/src/
|
|
2100
|
-
import
|
|
2135
|
+
// packages/ui/react-ui-editor/src/themes/default.ts
|
|
2136
|
+
import get6 from "lodash.get";
|
|
2101
2137
|
var defaultTheme = {
|
|
2102
2138
|
//
|
|
2103
2139
|
// Main layout:
|
|
@@ -2128,7 +2164,7 @@ var defaultTheme = {
|
|
|
2128
2164
|
},
|
|
2129
2165
|
"& .cm-scroller": {
|
|
2130
2166
|
overflow: "visible",
|
|
2131
|
-
fontFamily:
|
|
2167
|
+
fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
|
|
2132
2168
|
},
|
|
2133
2169
|
"& .cm-content": {
|
|
2134
2170
|
padding: 0,
|
|
@@ -2136,11 +2172,11 @@ var defaultTheme = {
|
|
|
2136
2172
|
fontSize: "16px"
|
|
2137
2173
|
},
|
|
2138
2174
|
"&light .cm-content": {
|
|
2139
|
-
color:
|
|
2175
|
+
color: get6(tokens, "extend.colors.neutral.900", "black"),
|
|
2140
2176
|
caretColor: "black"
|
|
2141
2177
|
},
|
|
2142
2178
|
"&dark .cm-content": {
|
|
2143
|
-
color:
|
|
2179
|
+
color: get6(tokens, "extend.colors.neutral.100", "white"),
|
|
2144
2180
|
caretColor: "white"
|
|
2145
2181
|
},
|
|
2146
2182
|
//
|
|
@@ -2168,25 +2204,25 @@ var defaultTheme = {
|
|
|
2168
2204
|
// Selection
|
|
2169
2205
|
//
|
|
2170
2206
|
"&light .cm-selectionBackground": {
|
|
2171
|
-
background:
|
|
2207
|
+
background: get6(tokens, "extend.colors.primary.100")
|
|
2172
2208
|
},
|
|
2173
2209
|
"&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
|
|
2174
|
-
background:
|
|
2210
|
+
background: get6(tokens, "extend.colors.primary.200")
|
|
2175
2211
|
},
|
|
2176
2212
|
"&dark .cm-selectionBackground": {
|
|
2177
|
-
background:
|
|
2213
|
+
background: get6(tokens, "extend.colors.primary.700")
|
|
2178
2214
|
},
|
|
2179
2215
|
"&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
|
|
2180
|
-
background:
|
|
2216
|
+
background: get6(tokens, "extend.colors.primary.600")
|
|
2181
2217
|
},
|
|
2182
2218
|
//
|
|
2183
2219
|
// Search
|
|
2184
2220
|
//
|
|
2185
2221
|
"&light .cm-searchMatch": {
|
|
2186
|
-
backgroundColor:
|
|
2222
|
+
backgroundColor: get6(tokens, "extend.colors.yellow.100")
|
|
2187
2223
|
},
|
|
2188
2224
|
"&dark .cm-searchMatch": {
|
|
2189
|
-
backgroundColor:
|
|
2225
|
+
backgroundColor: get6(tokens, "extend.colors.yellow.700")
|
|
2190
2226
|
},
|
|
2191
2227
|
//
|
|
2192
2228
|
// collaboration
|
|
@@ -2219,12 +2255,12 @@ var defaultTheme = {
|
|
|
2219
2255
|
// link
|
|
2220
2256
|
//
|
|
2221
2257
|
"& .cm-link": {
|
|
2222
|
-
color:
|
|
2258
|
+
color: get6(tokens, "extend.colors.primary.500"),
|
|
2223
2259
|
textDecorationLine: "underline",
|
|
2224
2260
|
textDecorationThickness: "1px",
|
|
2225
2261
|
textUnderlineOffset: "2px",
|
|
2226
2262
|
borderRadius: ".125rem",
|
|
2227
|
-
fontFamily:
|
|
2263
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(",")
|
|
2228
2264
|
},
|
|
2229
2265
|
//
|
|
2230
2266
|
// tooltip
|
|
@@ -2246,7 +2282,7 @@ var defaultTheme = {
|
|
|
2246
2282
|
display: "none"
|
|
2247
2283
|
},
|
|
2248
2284
|
"& .cm-completionLabel": {
|
|
2249
|
-
fontFamily:
|
|
2285
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(",")
|
|
2250
2286
|
},
|
|
2251
2287
|
"& .cm-completionMatchedText": {
|
|
2252
2288
|
textDecoration: "none"
|
|
@@ -2262,15 +2298,15 @@ var defaultTheme = {
|
|
|
2262
2298
|
// table
|
|
2263
2299
|
//
|
|
2264
2300
|
"& .cm-table *": {
|
|
2265
|
-
fontFamily: `${
|
|
2301
|
+
fontFamily: `${get6(tokens, "fontFamily.mono", []).join(",")} !important`,
|
|
2266
2302
|
textDecoration: "none !important"
|
|
2267
2303
|
},
|
|
2268
2304
|
"& .cm-table-head": {
|
|
2269
2305
|
padding: "2px 16px 2px 0px",
|
|
2270
|
-
borderBottom: `1px solid ${
|
|
2306
|
+
borderBottom: `1px solid ${get6(tokens, "extend.colors.neutral.500")}`,
|
|
2271
2307
|
fontWeight: 100,
|
|
2272
2308
|
textAlign: "left",
|
|
2273
|
-
color:
|
|
2309
|
+
color: get6(tokens, "extend.colors.neutral.500")
|
|
2274
2310
|
},
|
|
2275
2311
|
"& .cm-table-cell": {
|
|
2276
2312
|
padding: "2px 16px 2px 0px"
|
|
@@ -2285,8 +2321,8 @@ var defaultTheme = {
|
|
|
2285
2321
|
// font size
|
|
2286
2322
|
// TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
|
|
2287
2323
|
//
|
|
2288
|
-
...Object.keys(
|
|
2289
|
-
const height =
|
|
2324
|
+
...Object.keys(get6(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
|
|
2325
|
+
const height = get6(tokens, [
|
|
2290
2326
|
"extend",
|
|
2291
2327
|
"fontSize",
|
|
2292
2328
|
fontSize,
|
|
@@ -2321,23 +2357,23 @@ var defaultTheme = {
|
|
|
2321
2357
|
* </div
|
|
2322
2358
|
*/
|
|
2323
2359
|
"& .cm-panels": {
|
|
2324
|
-
border: `1px solid ${
|
|
2360
|
+
border: `1px solid ${get6(tokens, "extend.colors.neutral.200")}`
|
|
2325
2361
|
},
|
|
2326
2362
|
"& .cm-panel": {
|
|
2327
|
-
background:
|
|
2328
|
-
fontFamily:
|
|
2363
|
+
background: get6(tokens, "extend.colors.neutral.50"),
|
|
2364
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(",")
|
|
2329
2365
|
},
|
|
2330
2366
|
"& .cm-button": {
|
|
2331
2367
|
margin: "4px",
|
|
2332
|
-
fontFamily:
|
|
2333
|
-
background:
|
|
2368
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(","),
|
|
2369
|
+
background: get6(tokens, "extend.colors.neutral.100"),
|
|
2334
2370
|
backgroundImage: "none",
|
|
2335
2371
|
border: "none",
|
|
2336
2372
|
"&:hover": {
|
|
2337
|
-
background:
|
|
2373
|
+
background: get6(tokens, "extend.colors.neutral.200")
|
|
2338
2374
|
},
|
|
2339
2375
|
"&:active": {
|
|
2340
|
-
background:
|
|
2376
|
+
background: get6(tokens, "extend.colors.neutral.300"),
|
|
2341
2377
|
backgroundImage: "none"
|
|
2342
2378
|
}
|
|
2343
2379
|
},
|
|
@@ -2347,37 +2383,28 @@ var defaultTheme = {
|
|
|
2347
2383
|
};
|
|
2348
2384
|
var textTheme = {
|
|
2349
2385
|
"& .cm-scroller": {
|
|
2350
|
-
fontFamily:
|
|
2386
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(",")
|
|
2351
2387
|
},
|
|
2352
2388
|
"& .cm-placeholder": {
|
|
2353
|
-
fontFamily:
|
|
2389
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(",")
|
|
2354
2390
|
}
|
|
2355
2391
|
};
|
|
2356
2392
|
var markdownTheme = {
|
|
2357
2393
|
// NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
|
|
2358
2394
|
"& .cm-placeholder": {
|
|
2359
|
-
fontFamily:
|
|
2395
|
+
fontFamily: get6(tokens, "fontFamily.body", []).join(",")
|
|
2360
2396
|
}
|
|
2361
2397
|
};
|
|
2362
2398
|
var codeTheme = {
|
|
2363
2399
|
"& .cm-scroller": {
|
|
2364
|
-
fontFamily:
|
|
2400
|
+
fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
|
|
2365
2401
|
},
|
|
2366
2402
|
"& .cm-placeholder": {
|
|
2367
|
-
fontFamily:
|
|
2403
|
+
fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
|
|
2368
2404
|
}
|
|
2369
2405
|
};
|
|
2370
2406
|
|
|
2371
2407
|
// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
|
|
2372
|
-
import { EditorState as EditorState2 } from "@codemirror/state";
|
|
2373
|
-
import { EditorView as EditorView12 } from "@codemirror/view";
|
|
2374
|
-
import { useFocusableGroup } from "@fluentui/react-tabster";
|
|
2375
|
-
import { vim } from "@replit/codemirror-vim";
|
|
2376
|
-
import defaultsDeep2 from "lodash.defaultsdeep";
|
|
2377
|
-
import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
|
|
2378
|
-
import { generateName } from "@dxos/display-name";
|
|
2379
|
-
import { useThemeContext } from "@dxos/react-ui";
|
|
2380
|
-
import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
|
|
2381
2408
|
var EditorModes = [
|
|
2382
2409
|
"default",
|
|
2383
2410
|
"vim"
|
|
@@ -2585,6 +2612,8 @@ export {
|
|
|
2585
2612
|
mermaid,
|
|
2586
2613
|
modelState,
|
|
2587
2614
|
setCommentRange,
|
|
2615
|
+
setFocus,
|
|
2616
|
+
setSelection,
|
|
2588
2617
|
table,
|
|
2589
2618
|
tags2 as tags,
|
|
2590
2619
|
tasklist,
|