@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.
Files changed (89) hide show
  1. package/dist/lib/browser/index.mjs +721 -700
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts +35 -0
  5. package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -0
  6. package/dist/types/src/components/TextEditor/TextEditor.d.ts +4 -2
  7. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  8. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +9 -4
  9. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
  10. package/dist/types/src/components/TextEditor/extensions/autocomplete.d.ts +9 -0
  11. package/dist/types/src/components/TextEditor/extensions/autocomplete.d.ts.map +1 -0
  12. package/dist/types/src/components/TextEditor/extensions/{basic/bundle.d.ts → basic.d.ts} +1 -1
  13. package/dist/types/src/components/TextEditor/extensions/basic.d.ts.map +1 -0
  14. package/dist/types/src/components/TextEditor/extensions/{hyperlink/hyperlinkWidget.d.ts → experimental.d.ts} +2 -2
  15. package/dist/types/src/components/TextEditor/extensions/experimental.d.ts.map +1 -0
  16. package/dist/types/src/components/TextEditor/extensions/index.d.ts +5 -2
  17. package/dist/types/src/components/TextEditor/extensions/index.d.ts.map +1 -1
  18. package/dist/types/src/components/TextEditor/extensions/link.d.ts +11 -0
  19. package/dist/types/src/components/TextEditor/extensions/link.d.ts.map +1 -0
  20. package/dist/types/src/components/TextEditor/extensions/listener.d.ts +7 -0
  21. package/dist/types/src/components/TextEditor/extensions/listener.d.ts.map +1 -0
  22. package/dist/types/src/components/TextEditor/extensions/markdown/bundle.d.ts.map +1 -1
  23. package/dist/types/src/components/TextEditor/extensions/markdown/highlight.d.ts +31 -0
  24. package/dist/types/src/components/TextEditor/extensions/markdown/highlight.d.ts.map +1 -0
  25. package/dist/types/src/components/TextEditor/extensions/markdown/index.d.ts +1 -1
  26. package/dist/types/src/components/TextEditor/extensions/markdown/index.d.ts.map +1 -1
  27. package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts +5 -0
  28. package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts.map +1 -0
  29. package/dist/types/src/components/TextEditor/extensions/tooltip.d.ts +12 -0
  30. package/dist/types/src/components/TextEditor/extensions/tooltip.d.ts.map +1 -0
  31. package/dist/types/src/components/TextEditor/index.d.ts +2 -0
  32. package/dist/types/src/components/TextEditor/index.d.ts.map +1 -1
  33. package/dist/types/src/components/TextEditor/themes/default.d.ts +17 -0
  34. package/dist/types/src/components/TextEditor/themes/default.d.ts.map +1 -0
  35. package/dist/types/src/components/TextEditor/themes/index.d.ts +2 -0
  36. package/dist/types/src/components/TextEditor/themes/index.d.ts.map +1 -0
  37. package/dist/types/src/components/TextEditor/yjs.stories.d.ts +1 -0
  38. package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map +1 -1
  39. package/dist/types/src/hooks/useTextModel.d.ts +1 -0
  40. package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
  41. package/dist/types/src/styles/markdown.d.ts +12 -10
  42. package/dist/types/src/styles/markdown.d.ts.map +1 -1
  43. package/dist/types/src/testing/replicator.d.ts.map +1 -1
  44. package/package.json +20 -32
  45. package/src/components/TextEditor/MarkdownEditor.stories.tsx +242 -0
  46. package/src/components/TextEditor/TextEditor.stories.tsx +46 -43
  47. package/src/components/TextEditor/TextEditor.tsx +62 -45
  48. package/src/components/TextEditor/extensions/autocomplete.ts +72 -0
  49. package/src/components/TextEditor/extensions/{basic/bundle.ts → basic.ts} +4 -2
  50. package/src/components/TextEditor/extensions/{hyperlink/hyperlinkWidget.tsx → experimental.tsx} +17 -2
  51. package/src/components/TextEditor/extensions/index.ts +5 -2
  52. package/src/components/TextEditor/extensions/{hyperlink/hyperlinkDecoration.ts → link.ts} +68 -31
  53. package/src/components/TextEditor/extensions/{change.ts → listener.ts} +3 -3
  54. package/src/components/TextEditor/extensions/markdown/bundle.ts +15 -11
  55. package/src/components/TextEditor/extensions/markdown/highlight.ts +166 -0
  56. package/src/components/TextEditor/extensions/markdown/index.ts +1 -1
  57. package/src/components/TextEditor/extensions/tasklist.ts +113 -0
  58. package/src/components/TextEditor/extensions/{hyperlink/hyperlinkTooltip.tsx → tooltip.tsx} +9 -9
  59. package/src/components/TextEditor/index.ts +3 -0
  60. package/src/components/TextEditor/themes/default.ts +170 -0
  61. package/src/components/TextEditor/themes/index.ts +5 -0
  62. package/src/components/TextEditor/yjs.stories.tsx +1 -0
  63. package/src/hooks/useCollaboration.ts +4 -4
  64. package/src/hooks/useTextModel.ts +10 -5
  65. package/src/styles/markdown.ts +26 -24
  66. package/src/testing/replicator.ts +1 -0
  67. package/dist/types/src/components/TextEditor/extensions/basic/bundle.d.ts.map +0 -1
  68. package/dist/types/src/components/TextEditor/extensions/basic/index.d.ts +0 -3
  69. package/dist/types/src/components/TextEditor/extensions/basic/index.d.ts.map +0 -1
  70. package/dist/types/src/components/TextEditor/extensions/basic/theme.d.ts +0 -10
  71. package/dist/types/src/components/TextEditor/extensions/basic/theme.d.ts.map +0 -1
  72. package/dist/types/src/components/TextEditor/extensions/change.d.ts +0 -7
  73. package/dist/types/src/components/TextEditor/extensions/change.d.ts.map +0 -1
  74. package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts +0 -11
  75. package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts.map +0 -1
  76. package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.d.ts +0 -8
  77. package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.d.ts.map +0 -1
  78. package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.d.ts.map +0 -1
  79. package/dist/types/src/components/TextEditor/extensions/hyperlink/index.d.ts +0 -4
  80. package/dist/types/src/components/TextEditor/extensions/hyperlink/index.d.ts.map +0 -1
  81. package/dist/types/src/components/TextEditor/extensions/markdown/tags.d.ts +0 -17
  82. package/dist/types/src/components/TextEditor/extensions/markdown/tags.d.ts.map +0 -1
  83. package/dist/types/src/components/TextEditor/extensions/markdown/theme.d.ts +0 -21
  84. package/dist/types/src/components/TextEditor/extensions/markdown/theme.d.ts.map +0 -1
  85. package/src/components/TextEditor/extensions/basic/index.ts +0 -6
  86. package/src/components/TextEditor/extensions/basic/theme.ts +0 -49
  87. package/src/components/TextEditor/extensions/hyperlink/index.ts +0 -7
  88. package/src/components/TextEditor/extensions/markdown/tags.ts +0 -38
  89. 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 OnHyperlinkHover = (el: Element, url: string) => void;
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
- // TODO(burdon): Create config object.
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('a');
53
- el.innerText = '_'; // Required so doesn't collapse.
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
  });
@@ -3,6 +3,9 @@
3
3
  //
4
4
 
5
5
  export { tags } from '@lezer/highlight';
6
+ export { type Extension } from '@codemirror/state';
6
7
 
7
8
  export * from './extensions';
9
+ export * from './themes';
10
+
8
11
  export * from './TextEditor';
@@ -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
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ export * from './default';
@@ -50,6 +50,7 @@ const Story = () => {
50
50
  };
51
51
 
52
52
  export const Default = {
53
+ title: 'react-ui-editor/YJS',
53
54
  // TODO(wittjosiah): Decorator for doing this without clients being initialized?
54
55
  render: () => <ClientRepeater count={2} Component={Story} />,
55
56
  };
@@ -3,7 +3,7 @@
3
3
  //
4
4
 
5
5
  import type { Extension } from '@codemirror/state';
6
- import { useEffect, useMemo } from 'react';
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, content } = model;
24
- const extension = useMemo(() => {
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
- provider,
94
+ text: () => text.content!.toString(),
90
95
  peer: identity
91
96
  ? {
92
97
  id: identity.identityKey.toHex(),
@@ -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 text-4xl font-semibold text-inherit no-underline',
11
- 2: 'mbs-4 mbe-2 text-3xl font-bold text-inherit no-underline',
12
- 3: 'mbs-4 mbe-2 text-2xl font-bold text-inherit no-underline',
13
- 4: 'mbs-4 mbe-2 text-xl font-extrabold text-inherit no-underline',
14
- 5: 'mbs-4 mbe-2 text-lg font-extrabold text-inherit no-underline',
15
- 6: 'mbs-4 mbe-2 font-black text-inherit no-underline',
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 blockquote = 'mlb-2 border-is-4 border-neutral-500/50 pis-5';
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
- // TODO(thure): Tailwind was not seeing `[&>li:before]:content-["•"]` as a utility class, but it would work if instead of `"•"` it was `"X"`… why?
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 bg-neutral-500/10 rounded pli-0.5 plb-0.5 -mlb-0.5';
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 placeholder = 'font-mono';
34
+ export const inlineUrl = mx(code, 'px-1');
39
35
 
40
- export const codeWithoutMarks = mx(code, 'pli-1.5 mli-0.5');
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
- export const italic = 'italic';
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
- export const strikethrough = 'line-through';
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 mark = '!font-normal !no-underline !text-inherit opacity-40';
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,3 +0,0 @@
1
- export * from './bundle';
2
- export * from './theme';
3
- //# sourceMappingURL=index.d.ts.map
@@ -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
@@ -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,4 +0,0 @@
1
- export * from './hyperlinkDecoration';
2
- export * from './hyperlinkTooltip';
3
- export * from './hyperlinkWidget';
4
- //# sourceMappingURL=index.d.ts.map
@@ -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,6 +0,0 @@
1
- //
2
- // Copyright 2023 DXOS.org
3
- //
4
-
5
- export * from './bundle';
6
- export * from './theme';
@@ -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,7 +0,0 @@
1
- //
2
- // Copyright 2023 DXOS.org
3
- //
4
-
5
- export * from './hyperlinkDecoration';
6
- export * from './hyperlinkTooltip';
7
- export * from './hyperlinkWidget';
@@ -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
- };