@dxos/react-ui-editor 0.4.8-main.05fda5d → 0.4.8-main.06fa7e4

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 (137) hide show
  1. package/dist/lib/browser/index.mjs +1938 -1920
  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/TextEditor.d.ts +18 -34
  5. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  6. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +80 -5
  7. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
  8. package/dist/types/src/components/Toolbar/Toolbar.d.ts +12 -11
  9. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  10. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +4 -2
  11. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
  12. package/dist/types/src/extensions/automerge/automerge.d.ts +1 -1
  13. package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -1
  14. package/dist/types/src/extensions/automerge/automerge.stories.d.ts +2 -1
  15. package/dist/types/src/extensions/automerge/automerge.stories.d.ts.map +1 -1
  16. package/dist/types/src/extensions/automerge/cursor.d.ts +1 -1
  17. package/dist/types/src/extensions/automerge/cursor.d.ts.map +1 -1
  18. package/dist/types/src/extensions/automerge/defs.d.ts +1 -15
  19. package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
  20. package/dist/types/src/extensions/automerge/index.d.ts +0 -1
  21. package/dist/types/src/extensions/automerge/index.d.ts.map +1 -1
  22. package/dist/types/src/extensions/automerge/sync.d.ts +2 -1
  23. package/dist/types/src/extensions/automerge/sync.d.ts.map +1 -1
  24. package/dist/types/src/extensions/automerge/update-automerge.d.ts +2 -1
  25. package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
  26. package/dist/types/src/{hooks → extensions/awareness}/awareness-provider.d.ts +1 -1
  27. package/dist/types/src/extensions/awareness/awareness-provider.d.ts.map +1 -0
  28. package/dist/types/src/extensions/awareness/awareness.d.ts.map +1 -0
  29. package/dist/types/src/extensions/awareness/index.d.ts +3 -0
  30. package/dist/types/src/extensions/awareness/index.d.ts.map +1 -0
  31. package/dist/types/src/extensions/comments.d.ts +2 -2
  32. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  33. package/dist/types/src/extensions/cursor.d.ts +1 -1
  34. package/dist/types/src/extensions/cursor.d.ts.map +1 -1
  35. package/dist/types/src/extensions/dnd.d.ts +7 -1
  36. package/dist/types/src/extensions/dnd.d.ts.map +1 -1
  37. package/dist/types/src/extensions/doc.d.ts +3 -0
  38. package/dist/types/src/extensions/doc.d.ts.map +1 -0
  39. package/dist/types/src/extensions/factories.d.ts +53 -0
  40. package/dist/types/src/extensions/factories.d.ts.map +1 -0
  41. package/dist/types/src/extensions/index.d.ts +4 -2
  42. package/dist/types/src/extensions/index.d.ts.map +1 -1
  43. package/dist/types/src/extensions/markdown/action.d.ts +9 -0
  44. package/dist/types/src/extensions/markdown/action.d.ts.map +1 -0
  45. package/dist/types/src/extensions/markdown/bundle.d.ts +5 -4
  46. package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -1
  47. package/dist/types/src/extensions/markdown/decorate.d.ts.map +1 -1
  48. package/dist/types/src/extensions/markdown/formatting.d.ts +8 -5
  49. package/dist/types/src/extensions/markdown/formatting.d.ts.map +1 -1
  50. package/dist/types/src/extensions/markdown/image.d.ts +6 -0
  51. package/dist/types/src/extensions/markdown/image.d.ts.map +1 -1
  52. package/dist/types/src/extensions/markdown/index.d.ts +1 -0
  53. package/dist/types/src/extensions/markdown/index.d.ts.map +1 -1
  54. package/dist/types/src/extensions/markdown/table.d.ts +2 -2
  55. package/dist/types/src/extensions/markdown/table.d.ts.map +1 -1
  56. package/dist/types/src/extensions/modes.d.ts +2 -1
  57. package/dist/types/src/extensions/modes.d.ts.map +1 -1
  58. package/dist/types/src/extensions/state.d.ts +20 -0
  59. package/dist/types/src/extensions/state.d.ts.map +1 -0
  60. package/dist/types/src/extensions/types.d.ts +9 -0
  61. package/dist/types/src/extensions/types.d.ts.map +1 -0
  62. package/dist/types/src/hooks/index.d.ts +1 -4
  63. package/dist/types/src/hooks/index.d.ts.map +1 -1
  64. package/dist/types/src/hooks/useActionHandler.d.ts +2 -2
  65. package/dist/types/src/hooks/useActionHandler.d.ts.map +1 -1
  66. package/dist/types/src/hooks/useDocAccessor.d.ts +9 -0
  67. package/dist/types/src/hooks/useDocAccessor.d.ts.map +1 -0
  68. package/dist/types/src/hooks/useTextEditor.d.ts +3 -44
  69. package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -1
  70. package/dist/types/src/hooks/useTextEditor.stories.d.ts +7 -0
  71. package/dist/types/src/hooks/useTextEditor.stories.d.ts.map +1 -1
  72. package/dist/types/src/themes/default.d.ts +0 -3
  73. package/dist/types/src/themes/default.d.ts.map +1 -1
  74. package/dist/types/src/translations.d.ts +1 -0
  75. package/dist/types/src/translations.d.ts.map +1 -1
  76. package/package.json +26 -27
  77. package/src/components/TextEditor/TextEditor.stories.tsx +532 -23
  78. package/src/components/TextEditor/TextEditor.tsx +45 -156
  79. package/src/components/Toolbar/Toolbar.stories.tsx +54 -55
  80. package/src/components/Toolbar/Toolbar.tsx +102 -60
  81. package/src/extensions/automerge/automerge.stories.tsx +16 -17
  82. package/src/extensions/automerge/automerge.ts +6 -5
  83. package/src/extensions/automerge/cursor.ts +1 -1
  84. package/src/extensions/automerge/defs.ts +1 -22
  85. package/src/extensions/automerge/index.ts +0 -1
  86. package/src/extensions/automerge/sync.ts +2 -9
  87. package/src/extensions/automerge/update-automerge.ts +2 -1
  88. package/src/{hooks → extensions/awareness}/awareness-provider.ts +1 -1
  89. package/src/extensions/{awareness.ts → awareness/awareness.ts} +1 -1
  90. package/src/extensions/awareness/index.ts +6 -0
  91. package/src/extensions/command/state.ts +3 -3
  92. package/src/extensions/comments.ts +9 -5
  93. package/src/extensions/cursor.ts +1 -1
  94. package/src/extensions/dnd.ts +31 -9
  95. package/src/extensions/doc.ts +14 -0
  96. package/src/extensions/factories.ts +193 -0
  97. package/src/extensions/index.ts +4 -2
  98. package/src/extensions/markdown/action.ts +112 -0
  99. package/src/extensions/markdown/bundle.ts +17 -37
  100. package/src/extensions/markdown/decorate.ts +2 -4
  101. package/src/extensions/markdown/formatting.test.ts +13 -13
  102. package/src/extensions/markdown/formatting.ts +110 -97
  103. package/src/extensions/markdown/image.ts +7 -0
  104. package/src/extensions/markdown/index.ts +1 -0
  105. package/src/extensions/markdown/table.ts +11 -3
  106. package/src/extensions/modes.ts +11 -2
  107. package/src/extensions/state.ts +90 -0
  108. package/src/extensions/types.ts +16 -0
  109. package/src/hooks/index.ts +1 -5
  110. package/src/hooks/useActionHandler.ts +4 -85
  111. package/src/hooks/useDocAccessor.ts +27 -0
  112. package/src/hooks/useTextEditor.stories.tsx +40 -35
  113. package/src/hooks/useTextEditor.ts +14 -120
  114. package/src/index.ts +1 -1
  115. package/src/themes/default.ts +25 -36
  116. package/src/translations.ts +1 -0
  117. package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts +0 -103
  118. package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +0 -1
  119. package/dist/types/src/extensions/awareness.d.ts.map +0 -1
  120. package/dist/types/src/extensions/cursor-line-margin.d.ts +0 -8
  121. package/dist/types/src/extensions/cursor-line-margin.d.ts.map +0 -1
  122. package/dist/types/src/extensions/outliner.d.ts +0 -4
  123. package/dist/types/src/extensions/outliner.d.ts.map +0 -1
  124. package/dist/types/src/hooks/awareness-provider.d.ts.map +0 -1
  125. package/dist/types/src/hooks/defs.d.ts +0 -20
  126. package/dist/types/src/hooks/defs.d.ts.map +0 -1
  127. package/dist/types/src/hooks/useEditorView.d.ts +0 -20
  128. package/dist/types/src/hooks/useEditorView.d.ts.map +0 -1
  129. package/dist/types/src/hooks/useTextModel.d.ts +0 -33
  130. package/dist/types/src/hooks/useTextModel.d.ts.map +0 -1
  131. package/src/components/TextEditor/MarkdownEditor.stories.tsx +0 -524
  132. package/src/extensions/cursor-line-margin.ts +0 -95
  133. package/src/extensions/outliner.ts +0 -12
  134. package/src/hooks/defs.ts +0 -30
  135. package/src/hooks/useEditorView.ts +0 -32
  136. package/src/hooks/useTextModel.ts +0 -121
  137. /package/dist/types/src/extensions/{awareness.d.ts → awareness/awareness.d.ts} +0 -0
@@ -4,34 +4,28 @@
4
4
 
5
5
  import '@dxosTheme';
6
6
 
7
- import React, { useMemo, useState } from 'react';
7
+ import React, { useState } from 'react';
8
8
 
9
9
  import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dxos/react-ui';
10
10
  import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
11
11
  import { withTheme } from '@dxos/storybook-utils';
12
12
 
13
13
  import { useActionHandler } from './useActionHandler';
14
- import { createBasicExtensions, createThemeExtensions, useTextEditor } from './useTextEditor';
14
+ import { useTextEditor } from './useTextEditor';
15
15
  import { Toolbar } from '../components';
16
+ import { createBasicExtensions, createThemeExtensions } from '../extensions';
16
17
  import {
17
18
  type EditorMode,
18
19
  EditorModes,
19
20
  decorateMarkdown,
20
21
  createMarkdownExtensions,
21
- formatting,
22
- image,
22
+ formattingKeymap,
23
23
  table,
24
24
  useFormattingState,
25
+ image,
25
26
  } from '../extensions';
26
- import { markdownTheme } from '../themes';
27
27
  import translations from '../translations';
28
28
 
29
- // TODO(burdon): Demo toolbar with hooks.
30
- // TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
31
- // TODO(burdon): Remove BaseTextEditor.
32
- // TODO(burdon): Move scrolling container layout/logic into TextEditor/MarkdownEditor components.
33
- // TODO(burdon): Define keymap in composer framework format.
34
-
35
29
  type StoryProps = {
36
30
  autoFocus?: boolean;
37
31
  placeholder?: string;
@@ -43,29 +37,24 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
43
37
  const { themeMode } = useThemeContext();
44
38
  const [formattingState, trackFormatting] = useFormattingState();
45
39
  const [editorMode, setEditorMode] = useState<EditorMode>('default');
46
- const extensions = useMemo(
47
- () => [
48
- editorMode ? EditorModes[editorMode] : [],
49
- createBasicExtensions({ readonly }),
50
- createThemeExtensions({
51
- themeMode,
52
- theme: markdownTheme,
53
- slots: {
54
- editor: { className: 'p-2' },
55
- },
56
- }),
57
- // TODO(burdon): Move lineWrapping.
58
- createMarkdownExtensions({ placeholder, lineWrapping: true }),
59
- // TODO(burdon): Move into markdown bundle (with React callbacks).
60
- decorateMarkdown(),
61
- formatting(),
62
- image(),
63
- table(),
64
- trackFormatting,
65
- ],
66
- [editorMode, themeMode, placeholder, trackFormatting, readonly],
40
+ const { parentRef, view } = useTextEditor(
41
+ () => ({
42
+ autoFocus,
43
+ doc,
44
+ extensions: [
45
+ editorMode ? EditorModes[editorMode] : [],
46
+ createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
47
+ createMarkdownExtensions({ themeMode }),
48
+ createThemeExtensions({ themeMode }),
49
+ decorateMarkdown(),
50
+ formattingKeymap(),
51
+ image(),
52
+ table(),
53
+ trackFormatting,
54
+ ],
55
+ }),
56
+ [editorMode, themeMode, placeholder, readonly],
67
57
  );
68
- const { parentRef, view } = useTextEditor({ autoFocus, doc, extensions });
69
58
 
70
59
  const handleAction = useActionHandler(view);
71
60
 
@@ -78,7 +67,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
78
67
  <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
79
68
  </Toolbar.Root>
80
69
  <div role='none' className='grow overflow-hidden'>
81
- <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
70
+ <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
82
71
  </div>
83
72
  </div>
84
73
  );
@@ -116,7 +105,6 @@ const EditorModeToolbar = ({
116
105
 
117
106
  export default {
118
107
  title: 'react-ui-editor/useTextEditor',
119
- // component: TextEditor,
120
108
  decorators: [withTheme],
121
109
  render: (args: StoryProps) => (
122
110
  <Tooltip.Provider>
@@ -127,6 +115,23 @@ export default {
127
115
  };
128
116
 
129
117
  export const Default = {
118
+ render: () => {
119
+ const { parentRef } = useTextEditor();
120
+ return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
121
+ },
122
+ };
123
+
124
+ export const Basic = {
125
+ render: () => {
126
+ const { themeMode } = useThemeContext();
127
+ const { parentRef } = useTextEditor(() => ({
128
+ extensions: [createBasicExtensions({ placeholder: 'Enter text...' }), createThemeExtensions({ themeMode })],
129
+ }));
130
+ return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
131
+ },
132
+ };
133
+
134
+ export const Markdown = {
130
135
  args: {
131
136
  autoFocus: true,
132
137
  placeholder: 'Text...',
@@ -2,57 +2,30 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { closeBrackets } from '@codemirror/autocomplete';
6
- import { history } from '@codemirror/commands';
7
- import { bracketMatching } from '@codemirror/language';
8
- import {
9
- EditorSelection,
10
- EditorState,
11
- type EditorStateConfig,
12
- type Extension,
13
- type StateEffect,
14
- } from '@codemirror/state';
15
- import {
16
- crosshairCursor,
17
- drawSelection,
18
- dropCursor,
19
- EditorView,
20
- highlightActiveLine,
21
- lineNumbers,
22
- placeholder,
23
- scrollPastEnd,
24
- } from '@codemirror/view';
25
- import defaultsDeep from 'lodash.defaultsdeep';
26
- import { type DependencyList, type RefObject, useEffect, useRef, useState } from 'react';
5
+ import { EditorSelection, EditorState } from '@codemirror/state';
6
+ import { EditorView } from '@codemirror/view';
7
+ import { type DependencyList, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
27
8
 
28
9
  import { log } from '@dxos/log';
29
- import { type ThemeMode } from '@dxos/react-ui';
30
10
  import { isNotFalsy } from '@dxos/util';
31
11
 
32
- import { type ThemeStyles } from '../styles';
33
- import { defaultTheme } from '../themes';
12
+ import { type TextEditorProps } from '../components';
13
+ import { documentId } from '../extensions';
34
14
  import { logChanges } from '../util';
35
15
 
36
- export type UseTextEditorOptions = {
37
- autoFocus?: boolean;
38
- scrollTo?: StateEffect<any>;
39
- debug?: boolean;
40
- } & EditorStateConfig;
41
-
42
- // TODO(burdon): Return tuple?
43
16
  export type UseTextEditor = {
44
17
  parentRef: RefObject<HTMLDivElement>;
45
18
  view?: EditorView;
46
19
  };
47
20
 
21
+ export type UseTextEditorProps = Omit<TextEditorProps, 'moveToEndOfLine' | 'dataTestId'>;
22
+
48
23
  /**
49
24
  * Hook for creating editor.
50
25
  */
51
- // TODO(wittjosiah): Does not work in strict mode.
52
- export const useTextEditor = (
53
- { autoFocus, scrollTo, debug, doc, selection, extensions }: UseTextEditorOptions = {},
54
- deps: DependencyList = [],
55
- ): UseTextEditor => {
26
+ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: DependencyList = []): UseTextEditor => {
27
+ let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo<UseTextEditorProps>(cb, deps ?? []);
28
+
56
29
  const onUpdate = useRef<() => void>();
57
30
  const [view, setView] = useState<EditorView>();
58
31
  const parentRef = useRef<HTMLDivElement>(null);
@@ -60,11 +33,14 @@ export const useTextEditor = (
60
33
  useEffect(() => {
61
34
  let view: EditorView;
62
35
  if (parentRef.current) {
36
+ log('create', { id });
37
+
63
38
  // https://codemirror.net/docs/ref/#state.EditorStateConfig
64
39
  const state = EditorState.create({
65
40
  doc,
66
41
  selection,
67
42
  extensions: [
43
+ id && documentId.of(id),
68
44
  // TODO(burdon): Doesn't catch errors in keymap functions.
69
45
  EditorView.exceptionSink.of((err) => {
70
46
  log.catch(err);
@@ -95,6 +71,7 @@ export const useTextEditor = (
95
71
  }
96
72
 
97
73
  return () => {
74
+ log('destroy', { id });
98
75
  view?.destroy();
99
76
  };
100
77
  }, deps);
@@ -107,7 +84,6 @@ export const useTextEditor = (
107
84
  }
108
85
 
109
86
  // Set selection after first update (since content may rerender on focus).
110
- // TODO(burdon): BUG on first render may appear in middle of formatted heading.
111
87
  // TODO(burdon): Make invisible until first render?
112
88
  if (selection || scrollTo) {
113
89
  onUpdate.current = () => {
@@ -124,85 +100,3 @@ export const useTextEditor = (
124
100
 
125
101
  return { parentRef, view };
126
102
  };
127
-
128
- // TODO(burdon): Factor out extension factories.
129
-
130
- /**
131
- * https://codemirror.net/docs/extensions
132
- * https://github.com/codemirror/basic-setup
133
- */
134
- // TODO(burdon): Reconcile with createMarkdownExtensions.
135
- export type BasicExtensionsOptions = {
136
- allowMultipleSelections?: boolean;
137
- bracketMatching?: boolean;
138
- closeBrackets?: boolean;
139
- crosshairCursor?: boolean;
140
- dropCursor?: boolean;
141
- drawSelection?: boolean;
142
- editable?: boolean;
143
- highlightActiveLine?: boolean;
144
- history?: boolean;
145
- lineNumbers?: boolean;
146
- lineWrapping?: boolean;
147
- placeholder?: string;
148
- readonly?: boolean;
149
- scrollPastEnd?: boolean;
150
- tabSize?: number;
151
- };
152
-
153
- const defaults: BasicExtensionsOptions = {
154
- bracketMatching: true,
155
- closeBrackets: true,
156
- drawSelection: true,
157
- editable: true,
158
- history: true,
159
- lineWrapping: true,
160
- };
161
-
162
- export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
163
- const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
164
- return [
165
- // TODO(burdon): Doesn't catch errors in keymap functions.
166
- EditorView.exceptionSink.of((err) => {
167
- log.catch(err);
168
- }),
169
-
170
- props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
171
- props.bracketMatching && bracketMatching(),
172
- props.closeBrackets && closeBrackets(),
173
- props.crosshairCursor && crosshairCursor(),
174
- props.dropCursor && dropCursor(),
175
- props.drawSelection && drawSelection(),
176
- props.highlightActiveLine && highlightActiveLine(),
177
- props.history && history(),
178
- props.lineNumbers && lineNumbers(),
179
- props.lineWrapping && EditorView.lineWrapping,
180
- props.placeholder && placeholder(props.placeholder),
181
- props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
182
- props.scrollPastEnd && scrollPastEnd(),
183
- props.tabSize && EditorState.tabSize.of(props.tabSize),
184
- ].filter(isNotFalsy);
185
- };
186
-
187
- export type ThemeExtensionsOptions = {
188
- theme?: ThemeStyles;
189
- themeMode?: ThemeMode;
190
- slots?: {
191
- editor?: {
192
- className?: string;
193
- };
194
- content?: {
195
- className?: string;
196
- };
197
- };
198
- };
199
-
200
- export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
201
- return [
202
- EditorView.baseTheme(defaultTheme),
203
- EditorView.darkTheme.of(themeMode === 'dark'),
204
- theme && EditorView.theme(theme),
205
- slots?.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
206
- slots?.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
207
- ].filter(isNotFalsy);
208
- };
package/src/index.ts CHANGED
@@ -9,7 +9,7 @@ export { type EditorView, keymap } from '@codemirror/view';
9
9
  export { tags } from '@lezer/highlight';
10
10
 
11
11
  export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
12
- export { Doc, YText, YXmlFragment } from '@dxos/text-model';
12
+ export { Doc, YText, YXmlFragment } from '@dxos/text-model'; // TODO(burdon): Remove.
13
13
 
14
14
  export * from './components';
15
15
  export * from './extensions';
@@ -55,7 +55,7 @@ export const defaultTheme: ThemeStyles = {
55
55
  // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
56
56
  // Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
57
57
  overflowY: 'auto',
58
- fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
58
+ fontFamily: get(tokens, 'fontFamily.body', []).join(','),
59
59
  lineHeight: 1.5,
60
60
  },
61
61
 
@@ -236,55 +236,44 @@ export const defaultTheme: ThemeStyles = {
236
236
  * </div>
237
237
  * </div
238
238
  */
239
- '.cm-panels': {
240
- border: `1px solid ${get(tokens, 'extend.colors.neutral.200')}`,
241
- },
239
+ '.cm-panels': {},
242
240
  '.cm-panel': {
243
- background: get(tokens, 'extend.colors.neutral.50'),
244
241
  fontFamily: get(tokens, 'fontFamily.body', []).join(','),
245
242
  },
243
+ '.cm-panel input[type=checkbox]': {
244
+ marginRight: '0.4rem !important',
245
+ },
246
+ '&light .cm-panel': {
247
+ background: get(tokens, 'extend.colors.neutral.50'),
248
+ },
249
+ '&dark .cm-panel': {
250
+ background: get(tokens, 'extend.colors.neutral.850'),
251
+ },
246
252
  '.cm-button': {
247
253
  margin: '4px',
248
254
  fontFamily: get(tokens, 'fontFamily.body', []).join(','),
249
- background: get(tokens, 'extend.colors.neutral.100'),
250
255
  backgroundImage: 'none',
251
256
  border: 'none',
257
+ '&:active': {
258
+ backgroundImage: 'none',
259
+ },
260
+ },
261
+ '&light .cm-button': {
262
+ background: get(tokens, 'extend.colors.neutral.100'),
252
263
  '&:hover': {
253
264
  background: get(tokens, 'extend.colors.neutral.200'),
254
265
  },
255
266
  '&:active': {
256
267
  background: get(tokens, 'extend.colors.neutral.300'),
257
- backgroundImage: 'none',
258
268
  },
259
269
  },
260
- '.cm-panel input[type=checkbox]': {
261
- marginRight: '0.4rem !important',
262
- },
263
- };
264
-
265
- export const textTheme: ThemeStyles = {
266
- '.cm-scroller': {
267
- fontFamily: get(tokens, 'fontFamily.body', []).join(','),
268
- },
269
- '.cm-placeholder': {
270
- fontFamily: get(tokens, 'fontFamily.body', []).join(','),
271
- },
272
- };
273
-
274
- export const markdownTheme: ThemeStyles = {
275
- '.cm-scroller': {
276
- fontFamily: get(tokens, 'fontFamily.body', []).join(','),
277
- },
278
- '.cm-placeholder': {
279
- fontFamily: get(tokens, 'fontFamily.body', []).join(','),
280
- },
281
- };
282
-
283
- export const codeTheme: ThemeStyles = {
284
- '.cm-scroller': {
285
- fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
286
- },
287
- '.cm-placeholder': {
288
- fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
270
+ '&dark .cm-button': {
271
+ background: get(tokens, 'extend.colors.neutral.800'),
272
+ '&:hover': {
273
+ background: get(tokens, 'extend.colors.neutral.700'),
274
+ },
275
+ '&:active': {
276
+ background: get(tokens, 'extend.colors.neutral.600'),
277
+ },
289
278
  },
290
279
  };
@@ -19,6 +19,7 @@ export default [
19
19
  'blockquote label': 'Block quote',
20
20
  'codeblock label': 'Code block',
21
21
  'comment label': 'Create comment',
22
+ 'image label': 'Insert image',
22
23
  'heading label': 'Heading level',
23
24
  'table label': 'Create table',
24
25
  },
@@ -1,103 +0,0 @@
1
- import '@dxosTheme';
2
- import { type EditorView } from '@codemirror/view';
3
- import React from 'react';
4
- import { type TextEditorProps } from './TextEditor';
5
- import { type Comment } from '../../hooks';
6
- type StoryProps = {
7
- id?: string;
8
- text?: string;
9
- comments?: Comment[];
10
- } & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'extensions'>;
11
- declare const _default: {
12
- title: string;
13
- component: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<EditorView | null>>;
14
- decorators: import("@storybook/react").Decorator[];
15
- render: ({ id, text, comments, placeholder, ...props }: StoryProps) => JSX.Element | null;
16
- parameters: {
17
- translations: {
18
- 'en-US': {
19
- "react-ui-editor": {
20
- 'strong label': string;
21
- 'emphasis label': string;
22
- 'strikethrough label': string;
23
- 'code label': string;
24
- 'link label': string;
25
- 'list-bullet label': string;
26
- 'list-ordered label': string;
27
- 'list-task label': string;
28
- 'blockquote label': string;
29
- 'codeblock label': string;
30
- 'comment label': string;
31
- 'heading label': string;
32
- 'table label': string;
33
- };
34
- };
35
- }[];
36
- layout: string;
37
- };
38
- };
39
- export default _default;
40
- export declare const Default: {
41
- render: () => JSX.Element;
42
- };
43
- export declare const Readonly: {
44
- render: () => JSX.Element;
45
- };
46
- export declare const NoExtensions: {
47
- render: () => JSX.Element;
48
- };
49
- export declare const Empty: {
50
- render: () => JSX.Element;
51
- };
52
- export declare const Scrolling: {
53
- render: () => JSX.Element;
54
- };
55
- export declare const ScrollingWithImages: {
56
- render: () => JSX.Element;
57
- };
58
- export declare const Links: {
59
- render: () => JSX.Element;
60
- };
61
- export declare const Image: {
62
- render: () => JSX.Element;
63
- };
64
- export declare const Code: {
65
- render: () => JSX.Element;
66
- };
67
- export declare const Lists: {
68
- render: () => JSX.Element;
69
- };
70
- export declare const Table: {
71
- render: () => JSX.Element;
72
- };
73
- export declare const Autocomplete: {
74
- render: () => JSX.Element;
75
- };
76
- export declare const Mention: {
77
- render: () => JSX.Element;
78
- };
79
- export declare const Command: {
80
- render: () => JSX.Element;
81
- };
82
- export declare const Comments: {
83
- render: () => JSX.Element;
84
- };
85
- export declare const Vim: {
86
- render: () => JSX.Element;
87
- };
88
- export declare const Annotations: {
89
- render: () => JSX.Element;
90
- };
91
- export declare const DND: {
92
- render: () => JSX.Element;
93
- };
94
- export declare const Listener: {
95
- render: () => JSX.Element;
96
- };
97
- export declare const Typewriter: {
98
- render: () => JSX.Element;
99
- };
100
- export declare const Blast: {
101
- render: () => JSX.Element;
102
- };
103
- //# sourceMappingURL=MarkdownEditor.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MarkdownEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/MarkdownEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,KAAoE,MAAM,OAAO,CAAC;AAWzF,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAuBpE,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,aAAa,CAAC;AAsLzD,KAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,YAAY,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBrE,wBAME;AAaF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AASF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAErB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAE/B,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAWF,eAAO,MAAM,YAAY;;CAYxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAmDF,eAAO,MAAM,OAAO;;CAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAkCpB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAEf,CAAC;AAIF,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAqBjB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"awareness.d.ts","sourceRoot":"","sources":["../../../../src/extensions/awareness.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,EAAE,KAAK,SAAS,EAAwB,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAEL,KAAK,aAAa,EAClB,UAAU,EACV,KAAK,WAAW,EAEhB,KAAK,UAAU,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IAEd,eAAe,IAAI,cAAc,EAAE,CAAC;IACpC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAC;CACvD;AAYD,eAAO,MAAM,iBAAiB,6CAE5B,CAAC;AAKH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,oCAA+B,SAQpD,CAAC;AAEF;;GAEG;AACH,qBAAa,yBAA0B,YAAW,WAAW;IACpD,WAAW,EAAE,aAAa,CAAmB;IAEpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IAEtC,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,SAAS,CAAC,CAAqB;gBAE3B,IAAI,EAAE,UAAU;IAS5B,OAAO;IAKP,MAAM,CAAC,MAAM,EAAE,UAAU;IAKzB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,uBAAuB;CA4EhC"}
@@ -1,8 +0,0 @@
1
- import { type Extension, Facet } from '@codemirror/state';
2
- /**
3
- * Number of lines above/below the cursor to keep visible in the viewport.
4
- * Defaults to 3.
5
- */
6
- export declare const cursorLineMarginFacet: Facet<number, number>;
7
- export declare const cursorLineMargin: Extension;
8
- //# sourceMappingURL=cursor-line-margin.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"cursor-line-margin.d.ts","sourceRoot":"","sources":["../../../../src/extensions/cursor-line-margin.ts"],"names":[],"mappings":"AAOA,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,EAAe,MAAM,mBAAmB,CAAC;AAKzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,uBAEhC,CAAC;AAOH,eAAO,MAAM,gBAAgB,EAAE,SAqE9B,CAAC"}
@@ -1,4 +0,0 @@
1
- import { type Extension } from '@codemirror/state';
2
- export type OutlinerOptions = {};
3
- export declare const outliner: (options?: OutlinerOptions) => Extension;
4
- //# sourceMappingURL=outliner.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"outliner.d.ts","sourceRoot":"","sources":["../../../../src/extensions/outliner.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,EAAE,CAAC;AAGjC,eAAO,MAAM,QAAQ,aAAa,eAAe,KAAQ,SAExD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"awareness-provider.d.ts","sourceRoot":"","sources":["../../../../src/hooks/awareness-provider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,EAAS,MAAM,aAAa,CAAC;AAIzD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAaxH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqC;IAEnE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAgB;IAEtC,OAAO,CAAC,IAAI,CAAC,CAAU;IACvB,OAAO,CAAC,SAAS,CAAC,CAAe;IACjC,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC,SAAgB,iBAAiB,cAAqB;gBAE1C,MAAM,EAAE,uBAAuB;IAO3C,IAAI;IAqCJ,KAAK;IAML,eAAe,IAAI,cAAc,EAAE;IAInC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI;IAWrD,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,kBAAkB;CAK3B"}
@@ -1,20 +0,0 @@
1
- import { type Extension } from '@codemirror/state';
2
- import { type DocAccessor } from '@dxos/echo-schema';
3
- export type Range = {
4
- from: number;
5
- to: number;
6
- };
7
- export type Comment = {
8
- id: string;
9
- cursor?: string;
10
- };
11
- /**
12
- * @deprecated
13
- */
14
- export type EditorModel = {
15
- id: string;
16
- text: () => string;
17
- content: string | DocAccessor;
18
- extension?: Extension;
19
- };
20
- //# sourceMappingURL=defs.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/defs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAGF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC"}
@@ -1,20 +0,0 @@
1
- import { type EditorView } from '@codemirror/view';
2
- import { type MutableRefObject } from 'react';
3
- /**
4
- * Hook for accessing the editor view.
5
- * @deprecated
6
- *
7
- * ```tsx
8
- * const Test = () => {
9
- * const [editorRef, viewInvalidated] = useEditorView();
10
- * useEffect(() => {
11
- * if (editorRef.current && !viewInvalidated) {
12
- * editorView?.focus();
13
- * }
14
- * }, [editorView]);
15
- * return <TextEditor ref={editorRef} />;
16
- * };
17
- * ```
18
- */
19
- export declare const useEditorView: (id: string) => [MutableRefObject<EditorView | null>, boolean];
20
- //# sourceMappingURL=useEditorView.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useEditorView.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useEditorView.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEhE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,CAAC,iBAAiB,UAAU,GAAG,IAAI,CAAC,EAAE,OAAO,CAQvF,CAAC"}
@@ -1,33 +0,0 @@
1
- import { type Extension } from '@codemirror/state';
2
- import { type Dispatch, type SetStateAction } from 'react';
3
- import { type Space, type TextObject } from '@dxos/react-client/echo';
4
- import { type Identity } from '@dxos/react-client/halo';
5
- import { type EditorModel } from './defs';
6
- import { type DocAccessor } from '../extensions/automerge/defs';
7
- export type useTextExtensionsProps = {
8
- id: string;
9
- text: DocAccessor;
10
- space?: Space;
11
- identity?: Identity;
12
- };
13
- export declare const useTextExtensions: ({ id, text, space, identity }: useTextExtensionsProps) => Extension[];
14
- export type UseTextModelProps = {
15
- text?: TextObject;
16
- space?: Space;
17
- identity?: Identity | null;
18
- };
19
- /**
20
- * @deprecated
21
- */
22
- export declare const useTextModel: (props: UseTextModelProps) => EditorModel | undefined;
23
- /**
24
- * For use primarily in stories & tests so the dependence on TextObject can be avoided.
25
- * @deprecated
26
- */
27
- export declare const useInMemoryTextModel: ({ id, defaultContent, }: {
28
- id: string;
29
- defaultContent?: string | undefined;
30
- }) => EditorModel & {
31
- setContent: Dispatch<SetStateAction<string>>;
32
- };
33
- //# sourceMappingURL=useTextModel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAqB,KAAK,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;AAGF,eAAO,MAAM,iBAAiB,kCAAmC,sBAAsB,KAAG,SAAS,EAuBlG,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SACb,CAAC;AAE1D;;;GAGG;AAEH,eAAO,MAAM,oBAAoB;QAI3B,MAAM;;;gBAEoB,SAAS,eAAe,MAAM,CAAC,CAAC;CAG/D,CAAC"}