@dxos/react-ui-editor 0.3.10-main.16895f7 → 0.3.10-main.3645708
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 +721 -700
- 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 +35 -0
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/TextEditor.d.ts +4 -2
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +9 -4
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/autocomplete.d.ts +9 -0
- package/dist/types/src/components/TextEditor/extensions/autocomplete.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/{basic/bundle.d.ts → basic.d.ts} +1 -1
- package/dist/types/src/components/TextEditor/extensions/basic.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/{hyperlink/hyperlinkWidget.d.ts → experimental.d.ts} +2 -2
- package/dist/types/src/components/TextEditor/extensions/experimental.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/index.d.ts +5 -2
- package/dist/types/src/components/TextEditor/extensions/index.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/link.d.ts +11 -0
- package/dist/types/src/components/TextEditor/extensions/link.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/listener.d.ts +7 -0
- package/dist/types/src/components/TextEditor/extensions/listener.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/markdown/bundle.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/highlight.d.ts +31 -0
- package/dist/types/src/components/TextEditor/extensions/markdown/highlight.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/markdown/index.d.ts +1 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/index.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts +5 -0
- package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/tooltip.d.ts +12 -0
- package/dist/types/src/components/TextEditor/extensions/tooltip.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/index.d.ts +2 -0
- package/dist/types/src/components/TextEditor/index.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/themes/default.d.ts +17 -0
- package/dist/types/src/components/TextEditor/themes/default.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/themes/index.d.ts +2 -0
- package/dist/types/src/components/TextEditor/themes/index.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/yjs.stories.d.ts +1 -0
- package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/useTextModel.d.ts +1 -0
- package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
- package/dist/types/src/styles/markdown.d.ts +12 -10
- package/dist/types/src/styles/markdown.d.ts.map +1 -1
- package/dist/types/src/testing/replicator.d.ts.map +1 -1
- package/package.json +20 -32
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +242 -0
- package/src/components/TextEditor/TextEditor.stories.tsx +46 -43
- package/src/components/TextEditor/TextEditor.tsx +62 -45
- package/src/components/TextEditor/extensions/autocomplete.ts +72 -0
- package/src/components/TextEditor/extensions/{basic/bundle.ts → basic.ts} +4 -2
- package/src/components/TextEditor/extensions/{hyperlink/hyperlinkWidget.tsx → experimental.tsx} +17 -2
- package/src/components/TextEditor/extensions/index.ts +5 -2
- package/src/components/TextEditor/extensions/{hyperlink/hyperlinkDecoration.ts → link.ts} +68 -31
- package/src/components/TextEditor/extensions/{change.ts → listener.ts} +3 -3
- package/src/components/TextEditor/extensions/markdown/bundle.ts +15 -11
- package/src/components/TextEditor/extensions/markdown/highlight.ts +166 -0
- package/src/components/TextEditor/extensions/markdown/index.ts +1 -1
- package/src/components/TextEditor/extensions/tasklist.ts +113 -0
- package/src/components/TextEditor/extensions/{hyperlink/hyperlinkTooltip.tsx → tooltip.tsx} +9 -9
- package/src/components/TextEditor/index.ts +3 -0
- package/src/components/TextEditor/themes/default.ts +170 -0
- package/src/components/TextEditor/themes/index.ts +5 -0
- package/src/components/TextEditor/yjs.stories.tsx +1 -0
- package/src/hooks/useCollaboration.ts +4 -4
- package/src/hooks/useTextModel.ts +10 -5
- package/src/styles/markdown.ts +26 -24
- package/src/testing/replicator.ts +1 -0
- package/dist/types/src/components/TextEditor/extensions/basic/bundle.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/basic/index.d.ts +0 -3
- package/dist/types/src/components/TextEditor/extensions/basic/index.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/basic/theme.d.ts +0 -10
- package/dist/types/src/components/TextEditor/extensions/basic/theme.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/change.d.ts +0 -7
- package/dist/types/src/components/TextEditor/extensions/change.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts +0 -11
- package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.d.ts +0 -8
- package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/hyperlink/index.d.ts +0 -4
- package/dist/types/src/components/TextEditor/extensions/hyperlink/index.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/tags.d.ts +0 -17
- package/dist/types/src/components/TextEditor/extensions/markdown/tags.d.ts.map +0 -1
- package/dist/types/src/components/TextEditor/extensions/markdown/theme.d.ts +0 -21
- package/dist/types/src/components/TextEditor/extensions/markdown/theme.d.ts.map +0 -1
- package/src/components/TextEditor/extensions/basic/index.ts +0 -6
- package/src/components/TextEditor/extensions/basic/theme.ts +0 -49
- package/src/components/TextEditor/extensions/hyperlink/index.ts +0 -7
- package/src/components/TextEditor/extensions/markdown/tags.ts +0 -38
- package/src/components/TextEditor/extensions/markdown/theme.ts +0 -265
|
@@ -2,21 +2,24 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import { type Extension } from '@codemirror/state';
|
|
5
6
|
import { hoverTooltip } from '@codemirror/view';
|
|
6
7
|
|
|
7
8
|
import { tooltipContent } from '@dxos/react-ui-theme';
|
|
8
9
|
|
|
9
10
|
const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
|
|
10
11
|
|
|
11
|
-
export type
|
|
12
|
+
export type TooltipOptions = {
|
|
13
|
+
onHover: (el: Element, url: string) => void;
|
|
14
|
+
regexp?: RegExp;
|
|
15
|
+
};
|
|
12
16
|
|
|
13
17
|
/**
|
|
14
18
|
* https://codemirror.net/examples/tooltip
|
|
15
19
|
* https://codemirror.net/docs/ref/#view.hoverTooltip
|
|
16
20
|
* https://github.com/codemirror/view/blob/main/src/tooltip.ts
|
|
17
21
|
*/
|
|
18
|
-
|
|
19
|
-
export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
|
|
22
|
+
export const tooltip = ({ onHover, regexp = markdownLinkRegexp }: TooltipOptions): Extension =>
|
|
20
23
|
hoverTooltip((view, pos) => {
|
|
21
24
|
const { from, text } = view.state.doc.lineAt(pos);
|
|
22
25
|
const p = pos - from;
|
|
@@ -49,13 +52,10 @@ export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markd
|
|
|
49
52
|
end: idx + from + match[0].length,
|
|
50
53
|
above: true,
|
|
51
54
|
create: () => {
|
|
52
|
-
const el = document.createElement('
|
|
53
|
-
el.
|
|
54
|
-
el.className = tooltipContent({}, 'mb-2 p-1');
|
|
55
|
-
el.setAttribute('target', '_blank');
|
|
56
|
-
el.setAttribute('href', url);
|
|
55
|
+
const el = document.createElement('div');
|
|
56
|
+
el.className = tooltipContent({}, 'pli-2 plb-1');
|
|
57
57
|
onHover(el, url);
|
|
58
|
-
return { dom: el };
|
|
58
|
+
return { dom: el, offset: { x: 0, y: 12 } };
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
61
|
});
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import get from 'lodash.get';
|
|
6
|
+
import { type StyleSpec } from 'style-mod';
|
|
7
|
+
|
|
8
|
+
import { tokens } from '../../../styles';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Minimal styles.
|
|
12
|
+
* https://codemirror.net/examples/styling
|
|
13
|
+
* NOTE: Use one of '&', '&light', and '&dark' prefix to scope instance.
|
|
14
|
+
* NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
|
|
15
|
+
*/
|
|
16
|
+
export const defaultTheme: {
|
|
17
|
+
[selector: string]: StyleSpec;
|
|
18
|
+
} = {
|
|
19
|
+
//
|
|
20
|
+
// Main layout:
|
|
21
|
+
// <div class=".cm-editor .cm-focused">
|
|
22
|
+
// <div class=".cm-scroller">
|
|
23
|
+
// <div class=".cm-content" role="textbox" contenteditable="true">
|
|
24
|
+
// <div class=".cm-line" />
|
|
25
|
+
// </div>
|
|
26
|
+
// </div>
|
|
27
|
+
// </div>
|
|
28
|
+
//
|
|
29
|
+
'&': {},
|
|
30
|
+
'&.cm-focused': {
|
|
31
|
+
outline: 'none',
|
|
32
|
+
},
|
|
33
|
+
'& .cm-scroller': {
|
|
34
|
+
overflow: 'visible',
|
|
35
|
+
},
|
|
36
|
+
'& .cm-content': {
|
|
37
|
+
padding: 0,
|
|
38
|
+
// Base font size (otherwise defined by HTML tag, which might be different for storybook).
|
|
39
|
+
fontSize: '16px',
|
|
40
|
+
},
|
|
41
|
+
'&light .cm-content': {
|
|
42
|
+
color: get(tokens, 'extend.colors.neutral.900', 'black'),
|
|
43
|
+
caretColor: 'black',
|
|
44
|
+
},
|
|
45
|
+
'&dark .cm-content': {
|
|
46
|
+
color: get(tokens, 'extend.colors.neutral.100', 'white'),
|
|
47
|
+
caretColor: 'white',
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
//
|
|
51
|
+
// Cursor
|
|
52
|
+
//
|
|
53
|
+
'&light .cm-cursor': {
|
|
54
|
+
borderLeft: '2px solid black',
|
|
55
|
+
},
|
|
56
|
+
'&dark .cm-cursor': {
|
|
57
|
+
borderLeft: '2px solid white',
|
|
58
|
+
},
|
|
59
|
+
'& .cm-placeholder': {
|
|
60
|
+
fontWeight: 100,
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
//
|
|
64
|
+
// line
|
|
65
|
+
//
|
|
66
|
+
'& .cm-line': {
|
|
67
|
+
paddingInline: 0,
|
|
68
|
+
},
|
|
69
|
+
'& .cm-line *': {},
|
|
70
|
+
'& .cm-activeLine': {
|
|
71
|
+
backgroundColor: 'transparent',
|
|
72
|
+
},
|
|
73
|
+
|
|
74
|
+
//
|
|
75
|
+
// selection
|
|
76
|
+
//
|
|
77
|
+
|
|
78
|
+
'&light .cm-selectionBackground, &light.cm-focused .cm-selectionBackground': {
|
|
79
|
+
background: get(tokens, 'extend.colors.primary.150', '#00ffff'),
|
|
80
|
+
},
|
|
81
|
+
'&dark .cm-selectionBackground, &dark.cm-focused .cm-selectionBackground': {
|
|
82
|
+
background: get(tokens, 'extend.colors.primary.850', '#00ffff'),
|
|
83
|
+
},
|
|
84
|
+
'&light .cm-selectionMatch': {
|
|
85
|
+
background: get(tokens, 'extend.colors.primary.250', '#00ffff') + '44',
|
|
86
|
+
},
|
|
87
|
+
'&dark .cm-selectionMatch': {
|
|
88
|
+
background: get(tokens, 'extend.colors.primary.600', '#00ffff') + '44',
|
|
89
|
+
},
|
|
90
|
+
|
|
91
|
+
//
|
|
92
|
+
// collaboration
|
|
93
|
+
// TODO(burdon): Review classnames (YJS dependent?)
|
|
94
|
+
//
|
|
95
|
+
|
|
96
|
+
'&light .cm-ySelection, &light .cm-yLineSelection': {
|
|
97
|
+
mixBlendMode: 'multiply',
|
|
98
|
+
},
|
|
99
|
+
'&dark .cm-ySelection, &dark .cm-yLineSelection': {
|
|
100
|
+
mixBlendMode: 'screen',
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
'& .cm-ySelectionInfo': {
|
|
104
|
+
padding: '2px 4px',
|
|
105
|
+
marginBlockStart: '-4px',
|
|
106
|
+
},
|
|
107
|
+
'& .cm-ySelection, & .cm-selectionMatch': {
|
|
108
|
+
paddingBlockStart: '.15em',
|
|
109
|
+
paddingBlockEnd: '.15em',
|
|
110
|
+
},
|
|
111
|
+
'& .cm-ySelectionCaret': {
|
|
112
|
+
display: 'inline-block',
|
|
113
|
+
insetBlockStart: '.1em',
|
|
114
|
+
blockSize: '1.4em',
|
|
115
|
+
verticalAlign: 'top',
|
|
116
|
+
},
|
|
117
|
+
'& .cm-yLineSelection': {
|
|
118
|
+
margin: 0,
|
|
119
|
+
},
|
|
120
|
+
|
|
121
|
+
//
|
|
122
|
+
// link
|
|
123
|
+
//
|
|
124
|
+
'& .cm-link': {
|
|
125
|
+
color: get(tokens, 'extend.colors.primary.500'),
|
|
126
|
+
textDecorationLine: 'underline',
|
|
127
|
+
textDecorationThickness: '1px',
|
|
128
|
+
textUnderlineOffset: '2px',
|
|
129
|
+
borderRadius: '.125rem',
|
|
130
|
+
fontFamily: get(tokens, 'fontFamily.body', []).join(','),
|
|
131
|
+
},
|
|
132
|
+
|
|
133
|
+
//
|
|
134
|
+
// tooltip
|
|
135
|
+
//
|
|
136
|
+
'& .cm-tooltip': {
|
|
137
|
+
border: 'none',
|
|
138
|
+
},
|
|
139
|
+
// '& .cm-tooltip-below': {},
|
|
140
|
+
// '& .cm-tooltip-autocomplete': {},
|
|
141
|
+
|
|
142
|
+
//
|
|
143
|
+
// font size
|
|
144
|
+
// 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.
|
|
145
|
+
//
|
|
146
|
+
...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
|
|
147
|
+
const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
|
|
148
|
+
|
|
149
|
+
acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
|
|
150
|
+
acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
|
|
151
|
+
acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
|
|
152
|
+
return acc;
|
|
153
|
+
}, {}),
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
export const textTheme: {
|
|
157
|
+
[selector: string]: StyleSpec;
|
|
158
|
+
} = {
|
|
159
|
+
'& .cm-scroller': {
|
|
160
|
+
fontFamily: get(tokens, 'fontFamily.body', []).join(','),
|
|
161
|
+
},
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
export const codeTheme: {
|
|
165
|
+
[selector: string]: StyleSpec;
|
|
166
|
+
} = {
|
|
167
|
+
'& .cm-scroller': {
|
|
168
|
+
fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
|
|
169
|
+
},
|
|
170
|
+
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import type { Extension } from '@codemirror/state';
|
|
6
|
-
import { useEffect,
|
|
6
|
+
import { useEffect, useState } from 'react';
|
|
7
7
|
import { yCollab } from 'y-codemirror.next';
|
|
8
8
|
|
|
9
9
|
import { generateName } from '@dxos/display-name';
|
|
@@ -20,8 +20,8 @@ import { automergePlugin } from '../automerge/automerge-plugin';
|
|
|
20
20
|
* https://codemirror.net/docs/ref/#collab
|
|
21
21
|
*/
|
|
22
22
|
export const useCollaboration = (model: EditorModel, themeMode: ThemeMode): Extension | undefined => {
|
|
23
|
-
const { provider, peer
|
|
24
|
-
const extension =
|
|
23
|
+
const { content, provider, peer } = model;
|
|
24
|
+
const [extension] = useState(() => {
|
|
25
25
|
if (content instanceof YText) {
|
|
26
26
|
return yCollab(content, provider?.awareness);
|
|
27
27
|
} else if (isDocAccessor(content)) {
|
|
@@ -29,7 +29,7 @@ export const useCollaboration = (model: EditorModel, themeMode: ThemeMode): Exte
|
|
|
29
29
|
} else {
|
|
30
30
|
return undefined;
|
|
31
31
|
}
|
|
32
|
-
}
|
|
32
|
+
});
|
|
33
33
|
|
|
34
34
|
useEffect(() => {
|
|
35
35
|
if (provider && peer) {
|
|
@@ -26,6 +26,7 @@ type Provider = { awareness: Awareness };
|
|
|
26
26
|
export type EditorModel = {
|
|
27
27
|
id: string;
|
|
28
28
|
content: string | YText | YXmlFragment | DocAccessor;
|
|
29
|
+
text: () => string;
|
|
29
30
|
provider?: Provider;
|
|
30
31
|
peer?: {
|
|
31
32
|
id: string;
|
|
@@ -33,6 +34,7 @@ export type EditorModel = {
|
|
|
33
34
|
};
|
|
34
35
|
};
|
|
35
36
|
|
|
37
|
+
// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
|
|
36
38
|
export type UseTextModelOptions = {
|
|
37
39
|
identity?: Identity | null;
|
|
38
40
|
space?: Space;
|
|
@@ -43,6 +45,8 @@ export type UseTextModelOptions = {
|
|
|
43
45
|
// TODO(burdon): Decouple space (make Editor less dependent on entire stack)?
|
|
44
46
|
// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
|
|
45
47
|
export const useTextModel = ({ identity, space, text }: UseTextModelOptions): EditorModel | undefined => {
|
|
48
|
+
// TODO(burdon): Remove?
|
|
49
|
+
// eslint-disable-next-line unused-imports/no-unused-vars
|
|
46
50
|
const provider = useMemo(() => {
|
|
47
51
|
if (isActualAutomergeObject(text)) {
|
|
48
52
|
return undefined;
|
|
@@ -64,11 +68,16 @@ export const useTextModel = ({ identity, space, text }: UseTextModelOptions): Ed
|
|
|
64
68
|
}
|
|
65
69
|
}, [text]);
|
|
66
70
|
|
|
71
|
+
if (!text?.doc || !text?.content) {
|
|
72
|
+
return undefined;
|
|
73
|
+
}
|
|
74
|
+
|
|
67
75
|
if (isActualAutomergeObject(text)) {
|
|
68
76
|
const obj = text as any as AutomergeTextCompat;
|
|
69
77
|
return {
|
|
70
78
|
id: obj.id,
|
|
71
79
|
content: content!,
|
|
80
|
+
text: () => content!.toString(),
|
|
72
81
|
provider: undefined,
|
|
73
82
|
peer: identity
|
|
74
83
|
? {
|
|
@@ -79,14 +88,10 @@ export const useTextModel = ({ identity, space, text }: UseTextModelOptions): Ed
|
|
|
79
88
|
};
|
|
80
89
|
}
|
|
81
90
|
|
|
82
|
-
if (!text?.doc || !text?.content) {
|
|
83
|
-
return undefined;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
91
|
return {
|
|
87
92
|
id: text.doc.guid,
|
|
88
93
|
content: text.content,
|
|
89
|
-
|
|
94
|
+
text: () => text.content!.toString(),
|
|
90
95
|
peer: identity
|
|
91
96
|
? {
|
|
92
97
|
id: identity.identityKey.toHex(),
|
package/src/styles/markdown.ts
CHANGED
|
@@ -6,41 +6,43 @@ import { mx } from '@dxos/react-ui-theme';
|
|
|
6
6
|
|
|
7
7
|
export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
8
8
|
|
|
9
|
+
// https://tailwindcss.com/docs/font-weight
|
|
9
10
|
export const heading: Record<HeadingLevel, string> = {
|
|
10
|
-
1: 'mbs-4 mbe-2
|
|
11
|
-
2: 'mbs-4 mbe-2
|
|
12
|
-
3: 'mbs-4 mbe-2
|
|
13
|
-
4: 'mbs-4 mbe-2
|
|
14
|
-
5: 'mbs-4 mbe-2
|
|
15
|
-
6: 'mbs-4 mbe-2 font-
|
|
11
|
+
1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
|
|
12
|
+
2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
|
|
13
|
+
3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
|
|
14
|
+
4: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-xl',
|
|
15
|
+
5: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-lg',
|
|
16
|
+
6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
|
|
16
17
|
};
|
|
17
18
|
|
|
18
|
-
export const
|
|
19
|
+
export const text = 'text-neutral-800 dark:text-neutral-200';
|
|
20
|
+
export const light = 'text-neutral-200 dark:text-neutral-800';
|
|
19
21
|
|
|
20
|
-
|
|
21
|
-
export const unorderedList =
|
|
22
|
-
'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2';
|
|
23
|
-
export const orderedList =
|
|
24
|
-
'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[counters(section,_".")_"._"] [counter-reset:section] [&>li:before]:mlb-1';
|
|
25
|
-
|
|
26
|
-
export const listItem = 'contents before:[counter-increment:section]';
|
|
27
|
-
|
|
28
|
-
export const codeBlock = 'mlb-2 font-mono bg-neutral-500/10 p-3 rounded';
|
|
29
|
-
|
|
30
|
-
export const horizontalRule = 'mlb-4 border-neutral-500/50';
|
|
22
|
+
export const mark = mx('!font-normal !no-underline !text-inherit opacity-40', light);
|
|
31
23
|
|
|
32
24
|
export const paragraph = 'mlb-1';
|
|
33
25
|
|
|
34
26
|
export const bold = 'font-bold';
|
|
27
|
+
export const italic = 'italic';
|
|
28
|
+
export const strikethrough = 'line-through';
|
|
35
29
|
|
|
36
|
-
export const code = 'font-mono
|
|
30
|
+
export const code = 'font-mono !no-underline text-neutral-700 dark:text-neutral-300';
|
|
31
|
+
export const codeMark = 'font-mono text-primary-500';
|
|
32
|
+
export const codeBlock = 'mlb-2 font-mono bg-neutral-500/10 p-3 rounded';
|
|
37
33
|
|
|
38
|
-
export const
|
|
34
|
+
export const inlineUrl = mx(code, 'px-1');
|
|
39
35
|
|
|
40
|
-
|
|
36
|
+
// TODO(burdon): Replace with widget.
|
|
37
|
+
export const blockquote = mx('pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30', light);
|
|
41
38
|
|
|
42
|
-
|
|
39
|
+
// TODO(burdon): Replace with widget.
|
|
40
|
+
export const horizontalRule = 'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50';
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
// TODO(thure): Tailwind was not seeing `[&>li:before]:content-["•"]` as a utility class, but it would work if instead of `"•"` it was `"X"`… why?
|
|
43
|
+
export const unorderedList =
|
|
44
|
+
'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2';
|
|
45
|
+
export const orderedList =
|
|
46
|
+
'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[counters(section,_".")_"._"] [counter-reset:section] [&>li:before]:mlb-1';
|
|
45
47
|
|
|
46
|
-
export const
|
|
48
|
+
export const listItem = 'contents before:[counter-increment:section]';
|
|
@@ -167,6 +167,7 @@ export class Replicator {
|
|
|
167
167
|
const model: EditorModel = {
|
|
168
168
|
id: doc.guid,
|
|
169
169
|
content: this._kind === TextKind.PLAIN ? doc.getText('content') : doc.getXmlFragment('content'),
|
|
170
|
+
text: () => model.content.toString(), // TODO(burdon): Fix.
|
|
170
171
|
provider,
|
|
171
172
|
peer: { id },
|
|
172
173
|
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/basic/bundle.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,6CAA8C,kBAAkB,KAAG,SAAS,EAUlE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/basic/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type StyleSpec } from 'style-mod';
|
|
2
|
-
/**
|
|
3
|
-
* Minimal styles.
|
|
4
|
-
* NOTE: The '&' prefix denotes the CM editor root.
|
|
5
|
-
* https://codemirror.net/examples/styling
|
|
6
|
-
*/
|
|
7
|
-
export declare const basicTheme: {
|
|
8
|
-
[selector: string]: StyleSpec;
|
|
9
|
-
};
|
|
10
|
-
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/basic/theme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C;;;;GAIG;AAEH,eAAO,MAAM,UAAU,EAAE;IACvB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAgC/B,CAAC"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { StateField } from '@codemirror/state';
|
|
2
|
-
/**
|
|
3
|
-
* Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
|
|
4
|
-
* @param onChange
|
|
5
|
-
*/
|
|
6
|
-
export declare const onChangeExtension: (onChange: (text: string) => void) => StateField<null>;
|
|
7
|
-
//# sourceMappingURL=change.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"change.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/change.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;;GAGG;AAEH,eAAO,MAAM,iBAAiB,oBAAqB,MAAM,KAAK,IAAI,qBAU9D,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type RangeSet, StateField } from '@codemirror/state';
|
|
2
|
-
type HyperlinkDecorationConfig = {
|
|
3
|
-
link?: boolean;
|
|
4
|
-
};
|
|
5
|
-
/**
|
|
6
|
-
* Creates a state field to replace AST elements with a hyperlink widget.
|
|
7
|
-
* https://codemirror.net/docs/ref/#state.StateField
|
|
8
|
-
*/
|
|
9
|
-
export declare const hyperlinkDecoration: ({ link }?: HyperlinkDecorationConfig) => StateField<RangeSet<any>>;
|
|
10
|
-
export {};
|
|
11
|
-
//# sourceMappingURL=hyperlinkDecoration.d.ts.map
|
package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hyperlinkDecoration.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AA6CnH,KAAK,yBAAyB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,cAAc,yBAAyB,8BAMtE,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export type OnHyperlinkHover = (el: Element, url: string) => void;
|
|
2
|
-
/**
|
|
3
|
-
* https://codemirror.net/examples/tooltip
|
|
4
|
-
* https://codemirror.net/docs/ref/#view.hoverTooltip
|
|
5
|
-
* https://github.com/codemirror/view/blob/main/src/tooltip.ts
|
|
6
|
-
*/
|
|
7
|
-
export declare const createHyperlinkTooltip: (onHover: OnHyperlinkHover, regexp?: RegExp) => import("@codemirror/state").Extension;
|
|
8
|
-
//# sourceMappingURL=hyperlinkTooltip.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hyperlinkTooltip.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;AAElE;;;;GAIG;AAEH,eAAO,MAAM,sBAAsB,YAAa,gBAAgB,2DA0C5D,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hyperlinkWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAEL,KAAK,aAAa,EAElB,cAAc,EACd,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAuD1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,SAAkD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/index.ts"],"names":[],"mappings":"AAIA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Tag } from '@lezer/highlight';
|
|
2
|
-
import { type MarkdownConfig } from '@lezer/markdown';
|
|
3
|
-
export declare const markdownTags: {
|
|
4
|
-
headingMark: Tag;
|
|
5
|
-
quoteMark: Tag;
|
|
6
|
-
listMark: Tag;
|
|
7
|
-
linkMark: Tag;
|
|
8
|
-
emphasisMark: Tag;
|
|
9
|
-
codeMark: Tag;
|
|
10
|
-
codeText: Tag;
|
|
11
|
-
inlineCode: Tag;
|
|
12
|
-
url: Tag;
|
|
13
|
-
linkReference: Tag;
|
|
14
|
-
linkLabel: Tag;
|
|
15
|
-
};
|
|
16
|
-
export declare const markdownTagsExtension: MarkdownConfig;
|
|
17
|
-
//# sourceMappingURL=tags.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/markdown/tags.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAgBnC,CAAC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { HighlightStyle } from '@codemirror/language';
|
|
2
|
-
import { type ThemeStyles } from '../../../../styles';
|
|
3
|
-
export declare const chalky = "#e5c07b";
|
|
4
|
-
export declare const coral = "#e06c75";
|
|
5
|
-
export declare const cyan = "#56b6c2";
|
|
6
|
-
export declare const invalid = "#ffffff";
|
|
7
|
-
export declare const ivory = "#abb2bf";
|
|
8
|
-
export declare const stone = "#7d8799";
|
|
9
|
-
export declare const malibu = "#61afef";
|
|
10
|
-
export declare const sage = "#98c379";
|
|
11
|
-
export declare const whiskey = "#d19a66";
|
|
12
|
-
export declare const violet = "#c678dd";
|
|
13
|
-
export declare const highlightBackground = "#2c313a";
|
|
14
|
-
export declare const tooltipBackground = "#353a42";
|
|
15
|
-
/**
|
|
16
|
-
* NOTE: The '&' prefix denotes the CM editor root.
|
|
17
|
-
* https://codemirror.net/examples/styling
|
|
18
|
-
*/
|
|
19
|
-
export declare const markdownTheme: ThemeStyles;
|
|
20
|
-
export declare const markdownHighlightStyle: HighlightStyle;
|
|
21
|
-
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/markdown/theme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAKtD,OAAO,EAAsD,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAG1G,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,MAAM,YAAY,CAAC;AAEhC,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAK3C;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,WAsJ3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,gBA6ElC,CAAC"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import get from 'lodash.get';
|
|
6
|
-
import { type StyleSpec } from 'style-mod';
|
|
7
|
-
|
|
8
|
-
import { tokens } from '../../../../styles';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Minimal styles.
|
|
12
|
-
* NOTE: The '&' prefix denotes the CM editor root.
|
|
13
|
-
* https://codemirror.net/examples/styling
|
|
14
|
-
*/
|
|
15
|
-
// TODO(burdon): Remove?
|
|
16
|
-
export const basicTheme: {
|
|
17
|
-
[selector: string]: StyleSpec;
|
|
18
|
-
} = {
|
|
19
|
-
'&.cm-focused': {
|
|
20
|
-
outline: 'none',
|
|
21
|
-
},
|
|
22
|
-
'& .cm-line': {
|
|
23
|
-
paddingInline: 0,
|
|
24
|
-
lineHeight: 1.6,
|
|
25
|
-
minBlockSize: '1.6em',
|
|
26
|
-
},
|
|
27
|
-
'& .cm-line *': {
|
|
28
|
-
lineHeight: 1.6,
|
|
29
|
-
},
|
|
30
|
-
'& .cm-scroller': {
|
|
31
|
-
fontFamily: get(tokens, 'fontFamily.body', []).join(','),
|
|
32
|
-
overflow: 'visible',
|
|
33
|
-
},
|
|
34
|
-
'& .cm-content': {
|
|
35
|
-
padding: 0,
|
|
36
|
-
caretColor: 'black',
|
|
37
|
-
},
|
|
38
|
-
'.dark & .cm-content': {
|
|
39
|
-
caretColor: 'white',
|
|
40
|
-
},
|
|
41
|
-
'& .cm-tooltip': {
|
|
42
|
-
backgroundColor: 'transparent',
|
|
43
|
-
border: 'none',
|
|
44
|
-
},
|
|
45
|
-
'& .cm-link': {
|
|
46
|
-
color: get(tokens, 'extend.colors.primary.500'),
|
|
47
|
-
textDecoration: 'underline',
|
|
48
|
-
},
|
|
49
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { styleTags, Tag } from '@lezer/highlight';
|
|
6
|
-
import { type MarkdownConfig } from '@lezer/markdown';
|
|
7
|
-
|
|
8
|
-
export const markdownTags = {
|
|
9
|
-
headingMark: Tag.define(),
|
|
10
|
-
quoteMark: Tag.define(),
|
|
11
|
-
listMark: Tag.define(),
|
|
12
|
-
linkMark: Tag.define(),
|
|
13
|
-
emphasisMark: Tag.define(),
|
|
14
|
-
codeMark: Tag.define(),
|
|
15
|
-
codeText: Tag.define(),
|
|
16
|
-
inlineCode: Tag.define(),
|
|
17
|
-
url: Tag.define(),
|
|
18
|
-
linkReference: Tag.define(),
|
|
19
|
-
linkLabel: Tag.define(),
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export const markdownTagsExtension: MarkdownConfig = {
|
|
23
|
-
props: [
|
|
24
|
-
styleTags({
|
|
25
|
-
HeaderMark: markdownTags.headingMark,
|
|
26
|
-
QuoteMark: markdownTags.quoteMark,
|
|
27
|
-
ListMark: markdownTags.listMark,
|
|
28
|
-
LinkMark: markdownTags.linkMark,
|
|
29
|
-
EmphasisMark: markdownTags.emphasisMark,
|
|
30
|
-
CodeMark: markdownTags.codeMark,
|
|
31
|
-
CodeText: markdownTags.codeText,
|
|
32
|
-
InlineCode: markdownTags.inlineCode,
|
|
33
|
-
URL: markdownTags.url,
|
|
34
|
-
LinkReference: markdownTags.linkReference,
|
|
35
|
-
LinkLabel: markdownTags.linkLabel,
|
|
36
|
-
}),
|
|
37
|
-
],
|
|
38
|
-
};
|