@dxos/react-ui-editor 0.3.11-main.73ee990 → 0.3.11-main.764a9c1
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 +1649 -234
- 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 +1 -2
- package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +1 -1
- package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/{comments.stories.d.ts → hooks.stories.d.ts} +9 -12
- package/dist/types/src/components/TextEditor/hooks.stories.d.ts.map +1 -0
- package/dist/types/src/components/Toolbar/Toolbar.d.ts +27 -7
- package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +12 -1
- package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/index.d.ts +2 -0
- package/dist/types/src/components/Toolbar/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/automerge.spec.d.ts +2 -0
- package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/automerge.test.d.ts +2 -0
- package/dist/types/src/extensions/automerge/automerge.test.d.ts.map +1 -0
- package/dist/types/src/extensions/automerge/defs.d.ts +5 -5
- package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/semaphore.d.ts +2 -1
- package/dist/types/src/extensions/automerge/semaphore.d.ts.map +1 -1
- package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
- package/dist/types/src/extensions/awareness.d.ts +1 -1
- package/dist/types/src/extensions/basic.d.ts +1 -1
- package/dist/types/src/extensions/basic.d.ts.map +1 -1
- package/dist/types/src/extensions/comments.d.ts +6 -2
- package/dist/types/src/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/bundle.d.ts +2 -2
- package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/code.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/formatting.d.ts +55 -8
- package/dist/types/src/extensions/markdown/formatting.d.ts.map +1 -1
- package/dist/types/src/extensions/markdown/formatting.test.d.ts +3 -0
- package/dist/types/src/extensions/markdown/formatting.test.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +1 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useActionHandler.d.ts +2 -2
- package/dist/types/src/hooks/useActionHandler.d.ts.map +1 -1
- package/dist/types/src/hooks/useEditorView.d.ts +17 -0
- package/dist/types/src/hooks/useEditorView.d.ts.map +1 -0
- package/dist/types/src/hooks/useTextEditor.d.ts +36 -14
- package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -1
- package/dist/types/src/hooks/useTextModel.d.ts +12 -0
- package/dist/types/src/hooks/useTextModel.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/themes/default.d.ts.map +1 -1
- package/package.json +39 -26
- package/src/components/TextEditor/MarkdownEditor.stories.tsx +5 -6
- package/src/components/TextEditor/TextEditor.tsx +26 -16
- package/src/components/TextEditor/automerge.stories.tsx +1 -2
- package/src/components/TextEditor/hooks.stories.tsx +111 -0
- package/src/components/Toolbar/Toolbar.stories.tsx +22 -6
- package/src/components/Toolbar/Toolbar.tsx +224 -75
- package/src/components/Toolbar/index.ts +5 -0
- package/src/components/index.ts +1 -0
- package/src/extensions/automerge/automerge.spec.tsx +76 -0
- package/src/extensions/automerge/automerge.test.ts +13 -0
- package/src/extensions/automerge/automerge.ts +27 -11
- package/src/extensions/automerge/cursor.ts +3 -3
- package/src/extensions/automerge/defs.ts +9 -9
- package/src/extensions/automerge/semaphore.ts +17 -19
- package/src/extensions/automerge/update-automerge.ts +9 -9
- package/src/extensions/automerge/update-codemirror.ts +5 -5
- package/src/extensions/awareness.ts +7 -4
- package/src/extensions/basic.ts +15 -13
- package/src/extensions/blast.ts +4 -1
- package/src/extensions/comments.ts +84 -30
- package/src/extensions/markdown/bundle.ts +10 -5
- package/src/extensions/markdown/code.ts +12 -4
- package/src/extensions/markdown/formatting.test.ts +482 -0
- package/src/extensions/markdown/formatting.ts +1133 -55
- package/src/extensions/markdown/link.ts +8 -2
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useActionHandler.ts +61 -13
- package/src/hooks/useEditorView.ts +29 -0
- package/src/hooks/useTextEditor.ts +143 -19
- package/src/hooks/useTextModel.ts +28 -9
- package/src/index.ts +1 -1
- package/src/themes/default.ts +10 -5
- package/dist/types/src/components/TextEditor/comments.stories.d.ts.map +0 -1
- package/src/components/TextEditor/comments.stories.tsx +0 -357
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"comments.d.ts","sourceRoot":"","sources":["../../../../src/extensions/comments.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"comments.d.ts","sourceRoot":"","sources":["../../../../src/extensions/comments.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAA8D,MAAM,mBAAmB,CAAC;AAC/G,OAAO,EAAwB,KAAK,OAAO,EAAc,UAAU,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAQzG,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AA2BpD,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,MAAM,MAAM,2BAiBxD,CAAC;AAEF,eAAO,MAAM,WAAW,wDAAkC,CAAC;AAE3D,eAAO,MAAM,YAAY,6DAAuC,CAAC;AAwEjE,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,KAAK,MAAM,GAAG,SAAS,CAAC;IACpG;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAwHF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,OAiC3B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,aAAa,eAAe,KAAQ,SAgIxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,GAAG,IAAI,aAAY,OAAO,EAAE,SAQvE,CAAC"}
|
|
@@ -3,12 +3,12 @@ import type { ThemeMode } from '@dxos/react-ui';
|
|
|
3
3
|
import { type TextEditorProps } from '../../components';
|
|
4
4
|
export type MarkdownBundleOptions = {
|
|
5
5
|
themeMode?: ThemeMode;
|
|
6
|
-
} & Pick<TextEditorProps, 'placeholder'>;
|
|
6
|
+
} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
|
|
7
7
|
/**
|
|
8
8
|
* Markdown bundle.
|
|
9
9
|
* Refs:
|
|
10
10
|
* https://codemirror.net/docs/community
|
|
11
11
|
* https://codemirror.net/docs/ref/#codemirror.basicSetup
|
|
12
12
|
*/
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const createMarkdownExtensions: ({ themeMode, placeholder: _placeholder, lineWrapping, }?: MarkdownBundleOptions) => Extension[];
|
|
14
14
|
//# sourceMappingURL=bundle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/bundle.ts"],"names":[],"mappings":"AAUA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAYhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/bundle.ts"],"names":[],"mappings":"AAUA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAYhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,cAAc,CAAC,CAAC;AAE1D;;;;;GAKG;AAEH,eAAO,MAAM,wBAAwB,6DAIlC,qBAAqB,KAAQ,SAAS,EAyDxC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/code.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/code.ts"],"names":[],"mappings":"AAkIA,eAAO,MAAM,IAAI,+CAmBhB,CAAC"}
|
|
@@ -1,11 +1,58 @@
|
|
|
1
|
-
import { type Extension } from '@codemirror/state';
|
|
2
|
-
import {
|
|
1
|
+
import { type Extension, type StateCommand, type EditorState } from '@codemirror/state';
|
|
2
|
+
import { EditorView } from '@codemirror/view';
|
|
3
|
+
export type Formatting = {
|
|
4
|
+
blankLine: boolean;
|
|
5
|
+
blockType: 'codeblock' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'tablecell' | null;
|
|
6
|
+
blockQuote: boolean;
|
|
7
|
+
strong: boolean;
|
|
8
|
+
emphasis: boolean;
|
|
9
|
+
strikethrough: boolean;
|
|
10
|
+
code: boolean;
|
|
11
|
+
link: boolean;
|
|
12
|
+
listStyle: null | 'ordered' | 'bullet' | 'task';
|
|
13
|
+
};
|
|
14
|
+
export declare const compareFormatting: (a: Formatting, b: Formatting) => boolean;
|
|
15
|
+
export declare enum Inline {
|
|
16
|
+
Strong = 0,
|
|
17
|
+
Emphasis = 1,
|
|
18
|
+
Strikethrough = 2,
|
|
19
|
+
Code = 3
|
|
20
|
+
}
|
|
21
|
+
export declare enum List {
|
|
22
|
+
Ordered = 0,
|
|
23
|
+
Bullet = 1,
|
|
24
|
+
Task = 2
|
|
25
|
+
}
|
|
26
|
+
export declare const setHeading: (level: number) => StateCommand;
|
|
27
|
+
export declare const setStyle: (type: Inline, enable: boolean) => StateCommand;
|
|
28
|
+
export declare const addStyle: (style: Inline) => StateCommand;
|
|
29
|
+
export declare const removeStyle: (style: Inline) => StateCommand;
|
|
30
|
+
export declare const toggleStyle: (style: Inline) => StateCommand;
|
|
31
|
+
export declare const toggleStrong: StateCommand;
|
|
32
|
+
export declare const toggleEmphasis: StateCommand;
|
|
33
|
+
export declare const toggleStrikethrough: StateCommand;
|
|
34
|
+
export declare const toggleInlineCode: StateCommand;
|
|
35
|
+
export declare const insertTable: (view: EditorView) => void;
|
|
36
|
+
export declare const removeLink: StateCommand;
|
|
37
|
+
export declare const addLink: StateCommand;
|
|
38
|
+
export declare const addList: (type: List) => StateCommand;
|
|
39
|
+
export declare const removeList: (type: List) => StateCommand;
|
|
40
|
+
export declare const toggleList: (type: List) => StateCommand;
|
|
41
|
+
export declare const setBlockquote: (enable: boolean) => StateCommand;
|
|
42
|
+
export declare const addBlockquote: StateCommand;
|
|
43
|
+
export declare const removeBlockquote: StateCommand;
|
|
44
|
+
export declare const toggleBlockquote: StateCommand;
|
|
45
|
+
export declare const addCodeblock: StateCommand;
|
|
46
|
+
export declare const removeCodeblock: StateCommand;
|
|
47
|
+
export declare const toggleCodeblock: StateCommand;
|
|
3
48
|
export type FormattingOptions = {};
|
|
4
|
-
export declare const setHeading: (level: number) => Command;
|
|
5
|
-
export declare const toggleStyle: (mark: string) => Command;
|
|
6
|
-
export declare const toggleBold: Command;
|
|
7
|
-
export declare const toggleItalic: Command;
|
|
8
|
-
export declare const toggleStrikethrough: Command;
|
|
9
|
-
export declare const toggleList: (view: EditorView) => void;
|
|
10
49
|
export declare const formatting: (options?: FormattingOptions) => Extension;
|
|
50
|
+
/**
|
|
51
|
+
* Query an editor state for the active formatting at the selection.
|
|
52
|
+
*/
|
|
53
|
+
export declare const getFormatting: (state: EditorState) => Formatting;
|
|
54
|
+
/**
|
|
55
|
+
* Hook computes the current formatting state.
|
|
56
|
+
*/
|
|
57
|
+
export declare const useFormattingState: () => [Formatting | null, Extension];
|
|
11
58
|
//# sourceMappingURL=formatting.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/formatting.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/formatting.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAEjB,KAAK,WAAW,EAKjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAkC,UAAU,EAAuC,MAAM,kBAAkB,CAAC;AAYnH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,OAAO,CAAC;IAGnB,SAAS,EACL,WAAW,GACX,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,IAAI,CAAC;IAET,UAAU,EAAE,OAAO,CAAC;IAEpB,MAAM,EAAE,OAAO,CAAC;IAEhB,QAAQ,EAAE,OAAO,CAAC;IAElB,aAAa,EAAE,OAAO,CAAC;IAEvB,IAAI,EAAE,OAAO,CAAC;IAEd,IAAI,EAAE,OAAO,CAAC;IAEd,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,UAAU,KAAK,UAAU,YAQ/B,CAAC;AAEhC,oBAAY,MAAM;IAChB,MAAM,IAAI;IACV,QAAQ,IAAI;IACZ,aAAa,IAAI;IACjB,IAAI,IAAI;CACT;AAED,oBAAY,IAAI;IACd,OAAO,IAAA;IACP,MAAM,IAAA;IACN,IAAI,IAAA;CACL;AAMD,eAAO,MAAM,UAAU,UACb,MAAM,KAAG,YAoDhB,CAAC;AAMJ,eAAO,MAAM,QAAQ,SACZ,MAAM,UAAU,OAAO,KAAG,YAmJhC,CAAC;AAEJ,eAAO,MAAM,QAAQ,UAAW,MAAM,KAAG,YAAqC,CAAC;AAE/E,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,YAAsC,CAAC;AAEnF,eAAO,MAAM,WAAW,UACd,MAAM,KAAG,YAahB,CAAC;AAEJ,eAAO,MAAM,YAAY,cAA6B,CAAC;AACvD,eAAO,MAAM,cAAc,cAA+B,CAAC;AAC3D,eAAO,MAAM,mBAAmB,cAAoC,CAAC;AACrE,eAAO,MAAM,gBAAgB,cAA2B,CAAC;AA4DzD,eAAO,MAAM,WAAW,SAAU,UAAU,SAS3C,CAAC;AA4BF,eAAO,MAAM,UAAU,EAAE,YAUxB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,YAmFrB,CAAC;AAMF,eAAO,MAAM,OAAO,SACX,IAAI,KAAG,YAwIb,CAAC;AAEJ,eAAO,MAAM,UAAU,SACd,IAAI,KAAG,YAwDb,CAAC;AAEJ,eAAO,MAAM,UAAU,SACd,IAAI,KAAG,YAMb,CAAC;AAqBJ,eAAO,MAAM,aAAa,WACf,OAAO,KAAG,YAiElB,CAAC;AAEJ,eAAO,MAAM,aAAa,cAAsB,CAAC;AAEjD,eAAO,MAAM,gBAAgB,cAAuB,CAAC;AAErD,eAAO,MAAM,gBAAgB,EAAE,YAE9B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,YAsD1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAyC7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAE7B,CAAC;AAMF,MAAM,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEnC,eAAO,MAAM,UAAU,aAAa,iBAAiB,KAAQ,SAU5D,CAAC;AAyGF;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,WAAW,KAAG,UAqKlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,QAAO,CAAC,UAAU,GAAG,IAAI,EAAE,SAAS,CAgBlE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatting.test.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/formatting.test.ts"],"names":[],"mappings":"AAUA,OAAO,EAeL,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,eAAe,EAAE,UAU7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,cAAc,QAAQ,CAAC;AAEvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,cAAc,QAAQ,CAAC;AAEvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { EditorView } from '@codemirror/view';
|
|
2
|
-
import type { ToolbarProps } from '../components
|
|
3
|
-
export declare const useActionHandler: (view
|
|
2
|
+
import type { ToolbarProps } from '../components';
|
|
3
|
+
export declare const useActionHandler: (view?: EditorView | null) => ToolbarProps['onAction'];
|
|
4
4
|
//# sourceMappingURL=useActionHandler.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM
|
|
1
|
+
{"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqBlD,eAAO,MAAM,gBAAgB,UAAW,UAAU,GAAG,IAAI,KAAG,YAAY,CAAC,UAAU,CAiElF,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type EditorView } from '@codemirror/view';
|
|
2
|
+
import { type RefCallback } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Hook for accessing the editor view.
|
|
5
|
+
*
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const Test = () => {
|
|
8
|
+
* const [editorRef, editorView] = useEditorView();
|
|
9
|
+
* useEffect(() => {
|
|
10
|
+
* editorView?.focus();
|
|
11
|
+
* }, [editorView]);
|
|
12
|
+
* return <TextEditor ref={editorRef} />;
|
|
13
|
+
* };
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export declare const useEditorView: () => [RefCallback<EditorView | null>, EditorView | null];
|
|
17
|
+
//# sourceMappingURL=useEditorView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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,WAAW,EAAY,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,QAAO,CAAC,YAAY,UAAU,GAAG,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAQlF,CAAC"}
|
|
@@ -1,17 +1,39 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import {
|
|
1
|
+
import { type EditorStateConfig, type Extension, type StateEffect } from '@codemirror/state';
|
|
2
|
+
import { EditorView } from '@codemirror/view';
|
|
3
|
+
import { type RefObject } from 'react';
|
|
4
|
+
import { type ThemeMode } from '@dxos/react-ui';
|
|
5
|
+
import { type ThemeStyles } from '..//styles';
|
|
6
|
+
export type UseTextEditorOptions = {
|
|
7
|
+
autoFocus?: boolean;
|
|
8
|
+
scrollTo?: StateEffect<any>;
|
|
9
|
+
debug?: boolean;
|
|
10
|
+
} & EditorStateConfig;
|
|
11
|
+
export type UseTextEditor = {
|
|
12
|
+
parentRef: RefObject<HTMLDivElement>;
|
|
13
|
+
view?: EditorView;
|
|
14
|
+
};
|
|
3
15
|
/**
|
|
4
|
-
* Hook for
|
|
5
|
-
*
|
|
6
|
-
* ```tsx
|
|
7
|
-
* const Test = () => {
|
|
8
|
-
* const [editorRef, editorView] = useTextEditor();
|
|
9
|
-
* useEffect(() => {
|
|
10
|
-
* editorView?.focus();
|
|
11
|
-
* }, [editorView]);
|
|
12
|
-
* return <TextEditor ref={editorRef} />;
|
|
13
|
-
* };
|
|
14
|
-
* ```
|
|
16
|
+
* Hook for creating editor.
|
|
15
17
|
*/
|
|
16
|
-
export declare const useTextEditor: (
|
|
18
|
+
export declare const useTextEditor: ({ autoFocus, scrollTo, debug, doc, selection, extensions, }?: UseTextEditorOptions) => UseTextEditor;
|
|
19
|
+
export type DataExtensionsOptions = {
|
|
20
|
+
readonly?: boolean;
|
|
21
|
+
};
|
|
22
|
+
export declare const createDataExtensions: ({ readonly }?: {
|
|
23
|
+
readonly?: boolean | undefined;
|
|
24
|
+
}) => Extension;
|
|
25
|
+
export type ThemeExtensionsOptions = {
|
|
26
|
+
theme?: ThemeStyles;
|
|
27
|
+
themeMode?: ThemeMode;
|
|
28
|
+
lineWrap?: boolean;
|
|
29
|
+
slots?: {
|
|
30
|
+
editor?: {
|
|
31
|
+
className?: string;
|
|
32
|
+
};
|
|
33
|
+
content?: {
|
|
34
|
+
className?: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export declare const createThemeExtensions: ({ theme, themeMode, slots }?: ThemeExtensionsOptions) => Extension;
|
|
17
39
|
//# sourceMappingURL=useTextEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAI9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,iEAOvB,oBAAoB,KAAQ,aAqE9B,CAAC;AAIF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF,eAAO,MAAM,oBAAoB;;MAAgC,SAMhE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE;YACP,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,qBAAqB,iCAAiC,sBAAsB,KAAQ,SAShG,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Dispatch, type SetStateAction } from 'react';
|
|
1
2
|
import { type Space, type TextObject } from '@dxos/react-client/echo';
|
|
2
3
|
import { type Identity } from '@dxos/react-client/halo';
|
|
3
4
|
import { type EditorModel } from './defs';
|
|
@@ -7,4 +8,15 @@ export type UseTextModelProps = {
|
|
|
7
8
|
text?: TextObject;
|
|
8
9
|
};
|
|
9
10
|
export declare const useTextModel: (props: UseTextModelProps) => EditorModel | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* For use primarily in stories & tests so the dependence on TextObject can be avoided.
|
|
13
|
+
* @param id
|
|
14
|
+
* @param defaultContent
|
|
15
|
+
*/
|
|
16
|
+
export declare const useInMemoryTextModel: ({ id, defaultContent, }: {
|
|
17
|
+
id: string;
|
|
18
|
+
defaultContent?: string | undefined;
|
|
19
|
+
}) => EditorModel & {
|
|
20
|
+
setContent: Dispatch<SetStateAction<string>>;
|
|
21
|
+
};
|
|
10
22
|
//# sourceMappingURL=useTextModel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAqB,KAAK,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,QAAQ,CAAC;AAKtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SAKrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;QAI3B,MAAM;;;gBAEoB,SAAS,eAAe,MAAM,CAAC,CAAC;CAG/D,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
|
|
2
2
|
export { Doc, YText, YXmlFragment } from '@dxos/text-model';
|
|
3
3
|
export { type Extension } from '@codemirror/state';
|
|
4
|
-
export { type EditorView } from '@codemirror/view';
|
|
4
|
+
export { type EditorView, keymap } from '@codemirror/view';
|
|
5
5
|
export * from './components';
|
|
6
6
|
export * from './extensions';
|
|
7
7
|
export * from './hooks';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAoO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-editor",
|
|
3
|
-
"version": "0.3.11-main.
|
|
3
|
+
"version": "0.3.11-main.764a9c1",
|
|
4
4
|
"description": "Document editing experience within a DXOS shell.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -23,10 +23,11 @@
|
|
|
23
23
|
"@codemirror/state": "^6.4.0",
|
|
24
24
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
25
25
|
"@codemirror/view": "^6.23.0",
|
|
26
|
-
"@fluentui/react-tabster": "^9.
|
|
26
|
+
"@fluentui/react-tabster": "^9.18.0",
|
|
27
27
|
"@lezer/common": "^1.2.1",
|
|
28
28
|
"@lezer/highlight": "^1.2.0",
|
|
29
29
|
"@lezer/markdown": "^1.2.0",
|
|
30
|
+
"@radix-ui/react-context": "^1.0.0",
|
|
30
31
|
"@replit/codemirror-vim": "^6.0.14",
|
|
31
32
|
"codemirror": "6.0.1",
|
|
32
33
|
"lib0": "^0.2.65",
|
|
@@ -35,53 +36,65 @@
|
|
|
35
36
|
"lodash.pick": "^4.4.0",
|
|
36
37
|
"lodash.sortby": "^4.7.0",
|
|
37
38
|
"style-mod": "^4.1.0",
|
|
38
|
-
"@dxos/async": "0.3.11-main.
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/
|
|
42
|
-
"@dxos/
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/protocols": "0.3.11-main.
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/react-
|
|
48
|
-
"@dxos/react-
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/react-ui-theme": "0.3.11-main.
|
|
39
|
+
"@dxos/async": "0.3.11-main.764a9c1",
|
|
40
|
+
"@dxos/automerge": "0.3.11-main.764a9c1",
|
|
41
|
+
"@dxos/debug": "0.3.11-main.764a9c1",
|
|
42
|
+
"@dxos/display-name": "0.3.11-main.764a9c1",
|
|
43
|
+
"@dxos/context": "0.3.11-main.764a9c1",
|
|
44
|
+
"@dxos/echo-schema": "0.3.11-main.764a9c1",
|
|
45
|
+
"@dxos/invariant": "0.3.11-main.764a9c1",
|
|
46
|
+
"@dxos/protocols": "0.3.11-main.764a9c1",
|
|
47
|
+
"@dxos/log": "0.3.11-main.764a9c1",
|
|
48
|
+
"@dxos/react-ui": "0.3.11-main.764a9c1",
|
|
49
|
+
"@dxos/react-async": "0.3.11-main.764a9c1",
|
|
50
|
+
"@dxos/text-model": "0.3.11-main.764a9c1",
|
|
51
|
+
"@dxos/util": "0.3.11-main.764a9c1",
|
|
52
|
+
"@dxos/react-ui-theme": "0.3.11-main.764a9c1"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
55
|
"@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
|
|
55
|
-
"@faker-js/faker": "^8.3.1",
|
|
56
56
|
"@phosphor-icons/react": "^2.0.5",
|
|
57
57
|
"@preact/signals-react": "^1.3.6",
|
|
58
|
+
"@testing-library/dom": "^8.17.1",
|
|
59
|
+
"@testing-library/react": "^13.4.0",
|
|
60
|
+
"@testing-library/user-event": "^14.4.3",
|
|
58
61
|
"@types/lodash.defaultsdeep": "^4.6.6",
|
|
59
62
|
"@types/lodash.get": "^4.4.7",
|
|
60
63
|
"@types/lodash.pick": "^4.4.7",
|
|
61
64
|
"@types/lodash.sortby": "^4.7.7",
|
|
62
65
|
"@types/react": "^18.0.21",
|
|
63
66
|
"@types/react-dom": "^18.0.6",
|
|
67
|
+
"@types/react-test-renderer": "^17.0.2",
|
|
68
|
+
"@vitest/ui": "^1.2.1",
|
|
64
69
|
"deepsignal": "1.4.0-shallow.0",
|
|
70
|
+
"happy-dom": "^13.3.1",
|
|
71
|
+
"jsdom": "^20.0.1",
|
|
65
72
|
"react": "^18.2.0",
|
|
66
73
|
"react-dom": "^18.2.0",
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"@dxos/
|
|
73
|
-
"@dxos/
|
|
74
|
+
"react-test-renderer": "^18.2.0",
|
|
75
|
+
"vite": "^5.0.12",
|
|
76
|
+
"vite-plugin-top-level-await": "^1.4.1",
|
|
77
|
+
"vite-plugin-wasm": "^3.3.0",
|
|
78
|
+
"vitest": "^1.2.1",
|
|
79
|
+
"@dxos/config": "0.3.11-main.764a9c1",
|
|
80
|
+
"@dxos/echo-typegen": "0.3.11-main.764a9c1",
|
|
81
|
+
"@dxos/keyboard": "0.3.11-main.764a9c1",
|
|
82
|
+
"@dxos/random": "0.3.11-main.764a9c1",
|
|
83
|
+
"@dxos/echo-signals": "0.3.11-main.764a9c1",
|
|
84
|
+
"@dxos/react-client": "0.3.11-main.764a9c1",
|
|
85
|
+
"@dxos/react-ui": "0.3.11-main.764a9c1",
|
|
86
|
+
"@dxos/storybook-utils": "0.3.11-main.764a9c1"
|
|
74
87
|
},
|
|
75
88
|
"peerDependencies": {
|
|
76
89
|
"@phosphor-icons/react": "^2.0.5",
|
|
77
90
|
"react": "^18.2.0",
|
|
78
91
|
"react-dom": "^18.2.0",
|
|
79
|
-
"@dxos/react-client": "0.3.11-main.
|
|
92
|
+
"@dxos/react-client": "0.3.11-main.764a9c1"
|
|
80
93
|
},
|
|
81
94
|
"publishConfig": {
|
|
82
95
|
"access": "public"
|
|
83
96
|
},
|
|
84
97
|
"scripts": {
|
|
85
|
-
"
|
|
98
|
+
"vitest-ui": "vitest --ui"
|
|
86
99
|
}
|
|
87
100
|
}
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import '@dxosTheme';
|
|
6
6
|
|
|
7
7
|
import { type EditorView } from '@codemirror/view';
|
|
8
|
-
import { faker } from '@faker-js/faker';
|
|
9
8
|
import { ArrowSquareOut } from '@phosphor-icons/react';
|
|
10
9
|
import defaultsDeep from 'lodash.defaultsdeep';
|
|
11
10
|
import React, { type FC, StrictMode, useRef, useState } from 'react';
|
|
@@ -14,6 +13,7 @@ import { createRoot } from 'react-dom/client';
|
|
|
14
13
|
import { TextObject } from '@dxos/echo-schema';
|
|
15
14
|
import { keySymbols, parseShortcut } from '@dxos/keyboard';
|
|
16
15
|
import { PublicKey } from '@dxos/keys';
|
|
16
|
+
import { faker } from '@dxos/random';
|
|
17
17
|
import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
|
|
18
18
|
import { withTheme } from '@dxos/storybook-utils';
|
|
19
19
|
|
|
@@ -211,11 +211,10 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
|
|
|
211
211
|
type StoryProps = {
|
|
212
212
|
text?: string;
|
|
213
213
|
comments?: Comment[];
|
|
214
|
-
automerge?: boolean;
|
|
215
214
|
} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'slots' | 'extensions'>;
|
|
216
215
|
|
|
217
|
-
const Story = ({ text, comments,
|
|
218
|
-
const [item] = useState({ text: new TextObject(text
|
|
216
|
+
const Story = ({ text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
|
|
217
|
+
const [item] = useState({ text: new TextObject(text) });
|
|
219
218
|
const view = useRef<EditorView>(null);
|
|
220
219
|
const model = useTextModel({ text: item.text });
|
|
221
220
|
useComments(view.current, comments);
|
|
@@ -351,9 +350,9 @@ export const Comments = {
|
|
|
351
350
|
extensions={[
|
|
352
351
|
comments({
|
|
353
352
|
onHover: onCommentsHover,
|
|
354
|
-
onCreate: (
|
|
353
|
+
onCreate: ({ cursor }) => {
|
|
355
354
|
const id = PublicKey.random().toHex();
|
|
356
|
-
setComments((commentRanges) => [...commentRanges, { id, cursor
|
|
355
|
+
setComments((commentRanges) => [...commentRanges, { id, cursor }]);
|
|
357
356
|
return id;
|
|
358
357
|
},
|
|
359
358
|
onSelect: (state) => {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
|
|
6
6
|
import { EditorView } from '@codemirror/view';
|
|
7
|
-
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
7
|
+
// import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
8
8
|
import { vim } from '@replit/codemirror-vim';
|
|
9
9
|
import defaultsDeep from 'lodash.defaultsdeep';
|
|
10
10
|
import React, {
|
|
@@ -20,9 +20,10 @@ import React, {
|
|
|
20
20
|
|
|
21
21
|
import { log } from '@dxos/log';
|
|
22
22
|
import { useThemeContext } from '@dxos/react-ui';
|
|
23
|
-
import {
|
|
23
|
+
import { focusRing, mx } from '@dxos/react-ui-theme';
|
|
24
|
+
import { isNotFalsy } from '@dxos/util';
|
|
24
25
|
|
|
25
|
-
import {
|
|
26
|
+
import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
|
|
26
27
|
import { type EditorModel } from '../../hooks';
|
|
27
28
|
import { type ThemeStyles } from '../../styles';
|
|
28
29
|
import { defaultTheme, markdownTheme, textTheme } from '../../themes';
|
|
@@ -86,7 +87,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
86
87
|
},
|
|
87
88
|
forwardedRef,
|
|
88
89
|
) => {
|
|
89
|
-
|
|
90
|
+
// TODO(burdon): Hook causes error even if properties are not spread into div.
|
|
91
|
+
// Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
|
|
92
|
+
// Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
|
|
93
|
+
// https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
|
|
94
|
+
// https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
|
|
95
|
+
// const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
|
|
90
96
|
const { themeMode } = useThemeContext();
|
|
91
97
|
|
|
92
98
|
const rootRef = useRef<HTMLDivElement>(null);
|
|
@@ -98,7 +104,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
98
104
|
|
|
99
105
|
// Set focus.
|
|
100
106
|
useEffect(() => {
|
|
101
|
-
if (autoFocus) {
|
|
107
|
+
if (autoFocus && !view?.hasFocus) {
|
|
108
|
+
if (view?.state.selection.main?.from === 0) {
|
|
109
|
+
// Start at end of line.
|
|
110
|
+
const { to } = view.state.doc.lineAt(0);
|
|
111
|
+
view?.dispatch({ selection: { anchor: to } });
|
|
112
|
+
}
|
|
102
113
|
view?.focus();
|
|
103
114
|
}
|
|
104
115
|
}, [view, autoFocus]);
|
|
@@ -139,12 +150,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
139
150
|
// NOTE: This must come before user extensions.
|
|
140
151
|
model.extension,
|
|
141
152
|
|
|
142
|
-
// TODO(burdon): Factor out (
|
|
153
|
+
// TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
|
|
143
154
|
editorMode === 'vim' && vim(),
|
|
144
155
|
|
|
145
156
|
// Custom.
|
|
146
157
|
...extensions,
|
|
147
|
-
].filter(
|
|
158
|
+
].filter(isNotFalsy),
|
|
148
159
|
});
|
|
149
160
|
|
|
150
161
|
//
|
|
@@ -176,6 +187,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
176
187
|
|
|
177
188
|
// Handles tab/focus.
|
|
178
189
|
// Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
|
|
190
|
+
// TODO(burdon): Convert to keymap?
|
|
179
191
|
const handleKeyUp = useCallback(
|
|
180
192
|
(event: KeyboardEvent) => {
|
|
181
193
|
const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
|
|
@@ -187,7 +199,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
187
199
|
|
|
188
200
|
case 'Escape': {
|
|
189
201
|
if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
|
|
190
|
-
|
|
202
|
+
view?.focus();
|
|
191
203
|
}
|
|
192
204
|
break;
|
|
193
205
|
}
|
|
@@ -201,16 +213,15 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
201
213
|
key={model.id}
|
|
202
214
|
role='none'
|
|
203
215
|
tabIndex={0}
|
|
204
|
-
onKeyUp={handleKeyUp}
|
|
205
216
|
{...slots.root}
|
|
206
|
-
{...(editorMode !== 'vim' && tabsterDOMAttribute)}
|
|
217
|
+
// {...(editorMode !== 'vim' && tabsterDOMAttribute)}
|
|
218
|
+
onKeyUp={handleKeyUp}
|
|
207
219
|
ref={rootRef}
|
|
208
220
|
/>
|
|
209
221
|
);
|
|
210
222
|
},
|
|
211
223
|
);
|
|
212
224
|
|
|
213
|
-
// TODO(burdon): Single-line/scroll.
|
|
214
225
|
export const TextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
215
226
|
({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
|
|
216
227
|
const { themeMode } = useThemeContext();
|
|
@@ -219,7 +230,7 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
219
230
|
<BaseTextEditor
|
|
220
231
|
ref={forwardedRef}
|
|
221
232
|
readonly={readonly}
|
|
222
|
-
extensions={[
|
|
233
|
+
extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
|
|
223
234
|
theme={theme}
|
|
224
235
|
slots={updatedSlots}
|
|
225
236
|
{...props}
|
|
@@ -236,7 +247,7 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
236
247
|
<BaseTextEditor
|
|
237
248
|
ref={forwardedRef}
|
|
238
249
|
readonly={readonly}
|
|
239
|
-
extensions={[
|
|
250
|
+
extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
|
|
240
251
|
theme={theme}
|
|
241
252
|
slots={updatedSlots}
|
|
242
253
|
{...props}
|
|
@@ -247,11 +258,10 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
|
|
|
247
258
|
|
|
248
259
|
export const defaultSlots: TextEditorSlots = {
|
|
249
260
|
root: {
|
|
250
|
-
|
|
251
|
-
className: mx('flex flex-col grow overflow-y-auto', attentionSurface),
|
|
261
|
+
className: mx('grow', focusRing),
|
|
252
262
|
},
|
|
253
263
|
editor: {
|
|
254
|
-
className: '
|
|
264
|
+
className: 'bs-full',
|
|
255
265
|
},
|
|
256
266
|
};
|
|
257
267
|
|
|
@@ -13,7 +13,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
|
|
13
13
|
|
|
14
14
|
import { type Prop } from '@dxos/automerge/automerge';
|
|
15
15
|
import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
|
|
16
|
-
import { Filter
|
|
16
|
+
import { Filter } from '@dxos/echo-schema';
|
|
17
17
|
import { type PublicKey } from '@dxos/keys';
|
|
18
18
|
import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
|
|
19
19
|
import { useIdentity } from '@dxos/react-client/halo';
|
|
@@ -130,7 +130,6 @@ const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
|
|
|
130
130
|
|
|
131
131
|
export const WithEcho = {
|
|
132
132
|
render: () => {
|
|
133
|
-
setGlobalAutomergePreference(true);
|
|
134
133
|
return (
|
|
135
134
|
<ClientRepeater
|
|
136
135
|
count={2}
|