@dxos/react-ui-editor 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1
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 +276 -140
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +310 -178
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +276 -140
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/InputMode.stories.d.ts +2 -2
- package/dist/types/src/TextEditor.stories.d.ts +5 -40
- package/dist/types/src/TextEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/EditorToolbar/EditorToolbar.d.ts.map +1 -1
- package/dist/types/src/defaults.d.ts +2 -0
- package/dist/types/src/defaults.d.ts.map +1 -1
- package/dist/types/src/extensions/command/command.d.ts +4 -2
- package/dist/types/src/extensions/command/command.d.ts.map +1 -1
- package/dist/types/src/extensions/command/hint.d.ts.map +1 -1
- package/dist/types/src/extensions/command/menu.d.ts +12 -0
- package/dist/types/src/extensions/command/menu.d.ts.map +1 -0
- package/dist/types/src/extensions/command/preview.d.ts +12 -0
- package/dist/types/src/extensions/command/preview.d.ts.map +1 -0
- package/dist/types/src/extensions/command/state.d.ts.map +1 -1
- package/dist/types/src/extensions/comments.d.ts +3 -3
- package/dist/types/src/extensions/comments.d.ts.map +1 -1
- package/dist/types/src/extensions/factories.d.ts +1 -1
- package/dist/types/src/extensions/factories.d.ts.map +1 -1
- package/dist/types/src/{styles/stack-item-content-class-names.d.ts → fragments.d.ts} +1 -1
- package/dist/types/src/fragments.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/styles/theme.d.ts.map +1 -1
- package/package.json +27 -27
- package/src/InputMode.stories.tsx +4 -4
- package/src/TextEditor.stories.tsx +173 -59
- package/src/components/EditorToolbar/EditorToolbar.tsx +4 -5
- package/src/defaults.ts +12 -0
- package/src/extensions/command/command.ts +21 -2
- package/src/extensions/command/hint.ts +3 -0
- package/src/extensions/command/menu.ts +100 -0
- package/src/extensions/command/preview.ts +79 -0
- package/src/extensions/command/state.ts +9 -4
- package/src/extensions/comments.ts +6 -10
- package/src/extensions/factories.ts +3 -3
- package/src/{styles/stack-item-content-class-names.ts → fragments.ts} +3 -1
- package/src/index.ts +0 -4
- package/src/styles/theme.ts +5 -1
- package/dist/types/src/styles/stack-item-content-class-names.d.ts.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"comments.d.ts","sourceRoot":"","sources":["../../../../src/extensions/comments.ts"],"names":[],"mappings":"AAKA,OAAO,
|
1
|
+
{"version":3,"file":"comments.d.ts","sourceRoot":"","sources":["../../../../src/extensions/comments.ts"],"names":[],"mappings":"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"}
|
@@ -25,7 +25,7 @@ export type BasicExtensionsOptions = {
|
|
25
25
|
lineWrapping?: boolean;
|
26
26
|
placeholder?: string;
|
27
27
|
/** If true user cannot edit the text, but they can still select and copy it. */
|
28
|
-
|
28
|
+
readOnly?: boolean;
|
29
29
|
search?: boolean;
|
30
30
|
scrollPastEnd?: boolean;
|
31
31
|
standardKeymap?: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/factories.ts"],"names":[],"mappings":"AAQA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAkBhE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhD,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,WAAW,CAAC;AAM3D,eAAO,MAAM,cAAc,WAA4E,CAAC;AAExG;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;
|
1
|
+
{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/factories.ts"],"names":[],"mappings":"AAQA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAkBhE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhD,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,WAAW,CAAC;AAM3D,eAAO,MAAM,cAAc,WAA4E,CAAC;AAExG;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAqBF,eAAO,MAAM,qBAAqB,YAAa,sBAAsB,KAAG,SA+CvE,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,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;AAQF;;GAEG;AACH,eAAO,MAAM,qBAAqB,oFAK/B,sBAAsB,KAAQ,SAWhC,CAAC;AAMF,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAGF,eAAO,MAAM,oBAAoB,GAAI,CAAC,iCAAiC,mBAAmB,CAAC,CAAC,CAAC,KAAG,SAAS,EA2BxG,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"fragments.d.ts","sourceRoot":"","sources":["../../../src/fragments.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gCAAgC,UAAW,MAAM,WAI3D,CAAC;AAEJ,eAAO,MAAM,iCAAiC,UAAW,MAAM,WAI5D,CAAC"}
|
@@ -7,7 +7,6 @@ export * from './components';
|
|
7
7
|
export * from './defaults';
|
8
8
|
export * from './extensions';
|
9
9
|
export * from './hooks';
|
10
|
-
export { stackItemContentEditorClassNames, stackItemContentToolbarClassNames, } from './styles/stack-item-content-class-names';
|
11
10
|
export * from './types';
|
12
11
|
export * from './util';
|
13
12
|
export { translations };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,WAmN1B,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@dxos/react-ui-editor",
|
3
|
-
"version": "0.8.1-staging.
|
3
|
+
"version": "0.8.1-staging.97aedb1",
|
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",
|
@@ -51,20 +51,20 @@
|
|
51
51
|
"lodash.merge": "^4.6.2",
|
52
52
|
"lodash.sortby": "^4.7.0",
|
53
53
|
"style-mod": "^4.1.0",
|
54
|
-
"@dxos/
|
55
|
-
"@dxos/app-graph": "0.8.1-staging.
|
56
|
-
"@dxos/
|
57
|
-
"@dxos/
|
58
|
-
"@dxos/
|
59
|
-
"@dxos/
|
60
|
-
"@dxos/
|
61
|
-
"@dxos/invariant": "0.8.1-staging.
|
62
|
-
"@dxos/live-object": "0.8.1-staging.
|
63
|
-
"@dxos/
|
64
|
-
"@dxos/
|
65
|
-
"@dxos/react-hooks": "0.8.1-staging.
|
66
|
-
"@dxos/util": "0.8.1-staging.
|
67
|
-
"@dxos/react-ui-menu": "0.8.1-staging.
|
54
|
+
"@dxos/context": "0.8.1-staging.97aedb1",
|
55
|
+
"@dxos/app-graph": "0.8.1-staging.97aedb1",
|
56
|
+
"@dxos/automerge": "0.8.1-staging.97aedb1",
|
57
|
+
"@dxos/debug": "0.8.1-staging.97aedb1",
|
58
|
+
"@dxos/echo-schema": "0.8.1-staging.97aedb1",
|
59
|
+
"@dxos/display-name": "0.8.1-staging.97aedb1",
|
60
|
+
"@dxos/async": "0.8.1-staging.97aedb1",
|
61
|
+
"@dxos/invariant": "0.8.1-staging.97aedb1",
|
62
|
+
"@dxos/live-object": "0.8.1-staging.97aedb1",
|
63
|
+
"@dxos/log": "0.8.1-staging.97aedb1",
|
64
|
+
"@dxos/protocols": "0.8.1-staging.97aedb1",
|
65
|
+
"@dxos/react-hooks": "0.8.1-staging.97aedb1",
|
66
|
+
"@dxos/util": "0.8.1-staging.97aedb1",
|
67
|
+
"@dxos/react-ui-menu": "0.8.1-staging.97aedb1"
|
68
68
|
},
|
69
69
|
"devDependencies": {
|
70
70
|
"@phosphor-icons/react": "^2.1.5",
|
@@ -88,23 +88,23 @@
|
|
88
88
|
"vite": "5.4.7",
|
89
89
|
"vite-plugin-top-level-await": "^1.4.1",
|
90
90
|
"vite-plugin-wasm": "^3.3.0",
|
91
|
-
"@dxos/automerge": "0.8.1-staging.
|
92
|
-
"@dxos/config": "0.8.1-staging.
|
93
|
-
"@dxos/echo-signals": "0.8.1-staging.
|
94
|
-
"@dxos/
|
95
|
-
"@dxos/react-
|
96
|
-
"@dxos/
|
97
|
-
"@dxos/react-
|
98
|
-
"@dxos/
|
99
|
-
"@dxos/
|
91
|
+
"@dxos/automerge": "0.8.1-staging.97aedb1",
|
92
|
+
"@dxos/config": "0.8.1-staging.97aedb1",
|
93
|
+
"@dxos/echo-signals": "0.8.1-staging.97aedb1",
|
94
|
+
"@dxos/keyboard": "0.8.1-staging.97aedb1",
|
95
|
+
"@dxos/react-ui": "0.8.1-staging.97aedb1",
|
96
|
+
"@dxos/random": "0.8.1-staging.97aedb1",
|
97
|
+
"@dxos/react-client": "0.8.1-staging.97aedb1",
|
98
|
+
"@dxos/react-ui-theme": "0.8.1-staging.97aedb1",
|
99
|
+
"@dxos/storybook-utils": "0.8.1-staging.97aedb1"
|
100
100
|
},
|
101
101
|
"peerDependencies": {
|
102
102
|
"@phosphor-icons/react": "^2.1.5",
|
103
103
|
"react": "~18.2.0",
|
104
104
|
"react-dom": "~18.2.0",
|
105
|
-
"@dxos/react-
|
106
|
-
"@dxos/react-
|
107
|
-
"@dxos/react-ui-theme": "0.8.1-staging.
|
105
|
+
"@dxos/react-ui": "0.8.1-staging.97aedb1",
|
106
|
+
"@dxos/react-client": "0.8.1-staging.97aedb1",
|
107
|
+
"@dxos/react-ui-theme": "0.8.1-staging.97aedb1"
|
108
108
|
},
|
109
109
|
"publishConfig": {
|
110
110
|
"access": "public"
|
@@ -24,9 +24,9 @@ import {
|
|
24
24
|
import { useActionHandler, useTextEditor, type UseTextEditorProps } from './hooks';
|
25
25
|
import translations from './translations';
|
26
26
|
|
27
|
-
type StoryProps = { placeholder?: string;
|
27
|
+
type StoryProps = { placeholder?: string; readOnly?: boolean } & UseTextEditorProps;
|
28
28
|
|
29
|
-
const DefaultStory = ({ autoFocus, initialValue, placeholder,
|
29
|
+
const DefaultStory = ({ autoFocus, initialValue, placeholder, readOnly }: StoryProps) => {
|
30
30
|
const { themeMode } = useThemeContext();
|
31
31
|
const toolbarState = useEditorToolbarState({ viewMode: 'source' });
|
32
32
|
const trackFormatting = useFormattingState(toolbarState);
|
@@ -38,7 +38,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder, readonly }: StoryP
|
|
38
38
|
moveToEndOfLine: true,
|
39
39
|
extensions: [
|
40
40
|
editorInputMode ? InputModeExtensions[editorInputMode] : [],
|
41
|
-
createBasicExtensions({ placeholder, lineWrapping: true,
|
41
|
+
createBasicExtensions({ placeholder, lineWrapping: true, readOnly }),
|
42
42
|
createMarkdownExtensions({ themeMode }),
|
43
43
|
createThemeExtensions({ themeMode, syntaxHighlighting: true }),
|
44
44
|
decorateMarkdown(),
|
@@ -46,7 +46,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder, readonly }: StoryP
|
|
46
46
|
trackFormatting,
|
47
47
|
],
|
48
48
|
}),
|
49
|
-
[editorInputMode, themeMode, placeholder,
|
49
|
+
[editorInputMode, themeMode, placeholder, readOnly],
|
50
50
|
);
|
51
51
|
|
52
52
|
const handleAction = useActionHandler(view);
|
@@ -4,12 +4,13 @@
|
|
4
4
|
|
5
5
|
import '@dxos-theme';
|
6
6
|
|
7
|
+
import { type Completion } from '@codemirror/autocomplete';
|
7
8
|
import { javascript } from '@codemirror/lang-javascript';
|
8
9
|
import { markdown } from '@codemirror/lang-markdown';
|
9
10
|
import { openSearchPanel } from '@codemirror/search';
|
10
11
|
import { type Extension } from '@codemirror/state';
|
11
12
|
import { type EditorView } from '@codemirror/view';
|
12
|
-
import {
|
13
|
+
import { X } from '@phosphor-icons/react';
|
13
14
|
import { effect, useSignal } from '@preact/signals-react';
|
14
15
|
import defaultsDeep from 'lodash.defaultsdeep';
|
15
16
|
import React, { useEffect, useState, type FC, type KeyboardEvent } from 'react';
|
@@ -22,9 +23,9 @@ import { create } from '@dxos/live-object';
|
|
22
23
|
import { log } from '@dxos/log';
|
23
24
|
import { faker } from '@dxos/random';
|
24
25
|
import { createDocAccessor, createObject } from '@dxos/react-client/echo';
|
25
|
-
import { Button, Input, useThemeContext } from '@dxos/react-ui';
|
26
|
-
import { baseSurface, getSize, mx } from '@dxos/react-ui-theme';
|
27
|
-
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
26
|
+
import { Button, Icon, IconButton, Input, ThemeProvider, useThemeContext } from '@dxos/react-ui';
|
27
|
+
import { baseSurface, defaultTx, getSize, mx } from '@dxos/react-ui-theme';
|
28
|
+
import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
|
28
29
|
|
29
30
|
import { editorContent, editorGutter, editorMonospace } from './defaults';
|
30
31
|
import {
|
@@ -202,7 +203,7 @@ const text = str(
|
|
202
203
|
'=== LAST LINE ===',
|
203
204
|
);
|
204
205
|
|
205
|
-
const links = [
|
206
|
+
const links: Completion[] = [
|
206
207
|
{ label: 'DXOS', apply: '[DXOS](https://dxos.org)' },
|
207
208
|
{ label: 'GitHub', apply: '[DXOS GitHub](https://github.com/dxos)' },
|
208
209
|
{ label: 'Automerge', apply: '[Automerge](https://automerge.org/)' },
|
@@ -215,16 +216,6 @@ const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', '
|
|
215
216
|
const hover =
|
216
217
|
'rounded-sm text-baseText text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
|
217
218
|
|
218
|
-
const renderLinkTooltip = (el: Element, url: string) => {
|
219
|
-
const web = new URL(url);
|
220
|
-
createRoot(el).render(
|
221
|
-
<a href={url} target='_blank' rel='noreferrer' className={hover}>
|
222
|
-
{web.origin}
|
223
|
-
<ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
|
224
|
-
</a>,
|
225
|
-
);
|
226
|
-
};
|
227
|
-
|
228
219
|
const Key: FC<{ char: string }> = ({ char }) => (
|
229
220
|
<span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
|
230
221
|
{char}
|
@@ -244,11 +235,25 @@ const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
|
|
244
235
|
);
|
245
236
|
};
|
246
237
|
|
238
|
+
const renderLinkTooltip = (el: Element, url: string) => {
|
239
|
+
const web = new URL(url);
|
240
|
+
createRoot(el).render(
|
241
|
+
<ThemeProvider tx={defaultTx}>
|
242
|
+
<a href={url} target='_blank' rel='noreferrer' className={mx(hover, 'flex items-center gap-2')}>
|
243
|
+
{web.origin}
|
244
|
+
<Icon icon='ph--arrow-square-out--regular' size={4} />
|
245
|
+
</a>
|
246
|
+
</ThemeProvider>,
|
247
|
+
);
|
248
|
+
};
|
249
|
+
|
247
250
|
const renderLinkButton = (el: Element, url: string) => {
|
248
251
|
createRoot(el).render(
|
249
|
-
<
|
250
|
-
<
|
251
|
-
|
252
|
+
<ThemeProvider tx={defaultTx}>
|
253
|
+
<a href={url} target='_blank' rel='noreferrer' className={mx(hover)}>
|
254
|
+
<Icon icon='ph--arrow-square-out--regular' size={4} classNames='inline-block mis-1 mb-[3px]' />
|
255
|
+
</a>
|
256
|
+
</ThemeProvider>,
|
252
257
|
);
|
253
258
|
};
|
254
259
|
|
@@ -262,7 +267,7 @@ type StoryProps = {
|
|
262
267
|
id?: string;
|
263
268
|
debug?: DebugMode;
|
264
269
|
text?: string;
|
265
|
-
|
270
|
+
readOnly?: boolean;
|
266
271
|
placeholder?: string;
|
267
272
|
lineNumbers?: boolean;
|
268
273
|
onReady?: (view: EditorView) => void;
|
@@ -273,7 +278,7 @@ const DefaultStory = ({
|
|
273
278
|
debug,
|
274
279
|
text,
|
275
280
|
extensions,
|
276
|
-
|
281
|
+
readOnly,
|
277
282
|
placeholder = 'New document.',
|
278
283
|
scrollTo,
|
279
284
|
selection,
|
@@ -289,7 +294,7 @@ const DefaultStory = ({
|
|
289
294
|
initialValue: text,
|
290
295
|
extensions: [
|
291
296
|
createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
|
292
|
-
createBasicExtensions({
|
297
|
+
createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
|
293
298
|
createMarkdownExtensions({ themeMode }),
|
294
299
|
createThemeExtensions({
|
295
300
|
themeMode,
|
@@ -335,26 +340,22 @@ const DefaultStory = ({
|
|
335
340
|
);
|
336
341
|
};
|
337
342
|
|
338
|
-
|
343
|
+
const meta: Meta<typeof DefaultStory> = {
|
339
344
|
title: 'ui/react-ui-editor/TextEditor',
|
340
345
|
decorators: [withTheme, withLayout({ fullscreen: true })],
|
341
346
|
render: DefaultStory,
|
342
347
|
parameters: { translations, layout: 'fullscreen' },
|
343
348
|
};
|
344
349
|
|
350
|
+
export default meta;
|
351
|
+
|
345
352
|
const defaultExtensions: Extension[] = [
|
346
|
-
autocomplete({
|
347
|
-
onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
|
348
|
-
}),
|
349
353
|
decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
|
350
354
|
formattingKeymap(),
|
351
355
|
linkTooltip(renderLinkTooltip),
|
352
356
|
];
|
353
357
|
|
354
358
|
const allExtensions: Extension[] = [
|
355
|
-
autocomplete({
|
356
|
-
onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
|
357
|
-
}),
|
358
359
|
decorateMarkdown({ numberedHeadings: { from: 2, to: 4 }, renderLinkButton, selectionChangeDelay: 100 }),
|
359
360
|
formattingKeymap(),
|
360
361
|
linkTooltip(renderLinkTooltip),
|
@@ -363,26 +364,50 @@ const allExtensions: Extension[] = [
|
|
363
364
|
folding(),
|
364
365
|
];
|
365
366
|
|
367
|
+
//
|
368
|
+
// Default
|
369
|
+
//
|
370
|
+
|
366
371
|
export const Default = {
|
367
372
|
render: () => <DefaultStory text={text} extensions={defaultExtensions} />,
|
368
373
|
};
|
369
374
|
|
375
|
+
//
|
376
|
+
// Everything
|
377
|
+
//
|
378
|
+
|
370
379
|
export const Everything = {
|
371
380
|
render: () => <DefaultStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
|
372
381
|
};
|
373
382
|
|
383
|
+
//
|
384
|
+
// Empty
|
385
|
+
//
|
386
|
+
|
374
387
|
export const Empty = {
|
375
388
|
render: () => <DefaultStory extensions={defaultExtensions} />,
|
376
389
|
};
|
377
390
|
|
391
|
+
//
|
392
|
+
// Readonly
|
393
|
+
//
|
394
|
+
|
378
395
|
export const Readonly = {
|
379
|
-
render: () => <DefaultStory text={text} extensions={defaultExtensions}
|
396
|
+
render: () => <DefaultStory text={text} extensions={defaultExtensions} readOnly />,
|
380
397
|
};
|
381
398
|
|
399
|
+
//
|
400
|
+
// No Extensions
|
401
|
+
//
|
402
|
+
|
382
403
|
export const NoExtensions = {
|
383
404
|
render: () => <DefaultStory text={text} />,
|
384
405
|
};
|
385
406
|
|
407
|
+
//
|
408
|
+
// Vim
|
409
|
+
//
|
410
|
+
|
386
411
|
export const Vim = {
|
387
412
|
render: () => (
|
388
413
|
<DefaultStory
|
@@ -511,6 +536,10 @@ export const Table = {
|
|
511
536
|
render: () => <DefaultStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
|
512
537
|
};
|
513
538
|
|
539
|
+
//
|
540
|
+
// Commented out
|
541
|
+
//
|
542
|
+
|
514
543
|
export const CommentedOut = {
|
515
544
|
render: () => (
|
516
545
|
<DefaultStory
|
@@ -524,6 +553,10 @@ export const CommentedOut = {
|
|
524
553
|
),
|
525
554
|
};
|
526
555
|
|
556
|
+
//
|
557
|
+
// Typescript
|
558
|
+
//
|
559
|
+
|
527
560
|
export const Typescript = {
|
528
561
|
render: () => (
|
529
562
|
<DefaultStory
|
@@ -545,13 +578,19 @@ export const Autocomplete = {
|
|
545
578
|
extensions={[
|
546
579
|
decorateMarkdown({ renderLinkButton }),
|
547
580
|
autocomplete({
|
548
|
-
onSearch: (text) =>
|
581
|
+
onSearch: (text) => {
|
582
|
+
return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
|
583
|
+
},
|
549
584
|
}),
|
550
585
|
]}
|
551
586
|
/>
|
552
587
|
),
|
553
588
|
};
|
554
589
|
|
590
|
+
//
|
591
|
+
// Mention
|
592
|
+
//
|
593
|
+
|
555
594
|
export const Mention = {
|
556
595
|
render: () => (
|
557
596
|
<DefaultStory
|
@@ -565,6 +604,10 @@ export const Mention = {
|
|
565
604
|
),
|
566
605
|
};
|
567
606
|
|
607
|
+
//
|
608
|
+
// Search
|
609
|
+
//
|
610
|
+
|
568
611
|
export const Search = {
|
569
612
|
render: () => (
|
570
613
|
<DefaultStory
|
@@ -575,10 +618,65 @@ export const Search = {
|
|
575
618
|
),
|
576
619
|
};
|
577
620
|
|
621
|
+
//
|
622
|
+
// Command
|
623
|
+
//
|
624
|
+
|
625
|
+
export const Command = {
|
626
|
+
render: () => (
|
627
|
+
<DefaultStory
|
628
|
+
text={str('# Command', '', '', '[Test](dxn:queue:data:123)', '', '', '')}
|
629
|
+
extensions={[
|
630
|
+
command({
|
631
|
+
onHint: () => 'Press / for commands.',
|
632
|
+
onRenderMenu: (el, onClick) => {
|
633
|
+
renderRoot(
|
634
|
+
el,
|
635
|
+
<ThemeProvider tx={defaultTx}>
|
636
|
+
<Button classNames='p-1 aspect-square' onClick={onClick}>
|
637
|
+
<Icon icon={'ph--sparkle--regular'} size={5} />
|
638
|
+
</Button>
|
639
|
+
</ThemeProvider>,
|
640
|
+
);
|
641
|
+
},
|
642
|
+
onRenderDialog: (el, onClose) => {
|
643
|
+
renderRoot(el, <CommandDialog onClose={onClose} />);
|
644
|
+
},
|
645
|
+
onRenderPreview: (el, { text }) => {
|
646
|
+
faker.seed(text.length);
|
647
|
+
const data = Array.from({ length: 2 }, () => faker.lorem.sentences(2));
|
648
|
+
renderRoot(
|
649
|
+
el,
|
650
|
+
<ThemeProvider tx={defaultTx}>
|
651
|
+
<div className='flex flex-col gap-2'>
|
652
|
+
<div className='flex items-center gap-4'>
|
653
|
+
<div className='grow truncate'>
|
654
|
+
<span className='text-xs text-subdued mie-2'>Prompt</span>
|
655
|
+
{text}
|
656
|
+
</div>
|
657
|
+
<div className='flex gap-1'>
|
658
|
+
<IconButton classNames='text-green-500' label='Apply' icon={'ph--check--regular'} />
|
659
|
+
<IconButton classNames='text-red-500' label='Cancel' icon={'ph--x--regular'} />
|
660
|
+
</div>
|
661
|
+
</div>
|
662
|
+
<div>{data.join('\n\n')}</div>
|
663
|
+
</div>
|
664
|
+
</ThemeProvider>,
|
665
|
+
);
|
666
|
+
},
|
667
|
+
}),
|
668
|
+
]}
|
669
|
+
/>
|
670
|
+
),
|
671
|
+
};
|
672
|
+
|
578
673
|
const CommandDialog = ({ onClose }: { onClose: (action?: CommandAction) => void }) => {
|
579
674
|
const [text, setText] = useState('');
|
580
675
|
const handleInsert = () => {
|
581
|
-
|
676
|
+
// TODO(burdon): Use queue ref.
|
677
|
+
const link = `[${text}](dxn:queue:data:123)`;
|
678
|
+
console.log({ link });
|
679
|
+
onClose(text.length ? { insert: link } : undefined);
|
582
680
|
};
|
583
681
|
|
584
682
|
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
|
@@ -595,38 +693,34 @@ const CommandDialog = ({ onClose }: { onClose: (action?: CommandAction) => void
|
|
595
693
|
};
|
596
694
|
|
597
695
|
return (
|
598
|
-
<div className=
|
599
|
-
<
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
696
|
+
<div className='flex w-full justify-center'>
|
697
|
+
<div
|
698
|
+
className={mx(
|
699
|
+
'flex w-full p-2 gap-2 items-center border border-separator rounded-md',
|
700
|
+
editorContent,
|
701
|
+
baseSurface,
|
702
|
+
)}
|
703
|
+
>
|
704
|
+
<Input.Root>
|
705
|
+
<Input.TextInput
|
706
|
+
autoFocus={true}
|
707
|
+
placeholder='Ask a question...'
|
708
|
+
value={text}
|
709
|
+
onChange={({ target: { value } }) => setText(value)}
|
710
|
+
onKeyDown={handleKeyDown}
|
711
|
+
/>
|
712
|
+
</Input.Root>
|
713
|
+
<Button variant='ghost' classNames='pli-0' onClick={() => onClose()}>
|
714
|
+
<X className={getSize(5)} />
|
715
|
+
</Button>
|
716
|
+
</div>
|
611
717
|
</div>
|
612
718
|
);
|
613
719
|
};
|
614
720
|
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
text={str('# Command', '')}
|
619
|
-
extensions={[
|
620
|
-
command({
|
621
|
-
onRender: (el, onClose) => {
|
622
|
-
renderRoot(el, <CommandDialog onClose={onClose} />);
|
623
|
-
},
|
624
|
-
onHint: () => 'Press / for commands.',
|
625
|
-
}),
|
626
|
-
]}
|
627
|
-
/>
|
628
|
-
),
|
629
|
-
};
|
721
|
+
//
|
722
|
+
// Comments
|
723
|
+
//
|
630
724
|
|
631
725
|
export const Comments = {
|
632
726
|
render: () => {
|
@@ -668,12 +762,20 @@ export const Comments = {
|
|
668
762
|
},
|
669
763
|
};
|
670
764
|
|
765
|
+
//
|
766
|
+
// Annotations
|
767
|
+
//
|
768
|
+
|
671
769
|
export const Annotations = {
|
672
770
|
render: () => (
|
673
771
|
<DefaultStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
|
674
772
|
),
|
675
773
|
};
|
676
774
|
|
775
|
+
//
|
776
|
+
// DND
|
777
|
+
//
|
778
|
+
|
677
779
|
export const DND = {
|
678
780
|
render: () => (
|
679
781
|
<DefaultStory
|
@@ -689,6 +791,10 @@ export const DND = {
|
|
689
791
|
),
|
690
792
|
};
|
691
793
|
|
794
|
+
//
|
795
|
+
// Listener
|
796
|
+
//
|
797
|
+
|
692
798
|
export const Listener = {
|
693
799
|
render: () => (
|
694
800
|
<DefaultStory
|
@@ -707,6 +813,10 @@ export const Listener = {
|
|
707
813
|
),
|
708
814
|
};
|
709
815
|
|
816
|
+
//
|
817
|
+
// Typewriter
|
818
|
+
//
|
819
|
+
|
710
820
|
const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
|
711
821
|
|
712
822
|
export const Typewriter = {
|
@@ -718,6 +828,10 @@ export const Typewriter = {
|
|
718
828
|
),
|
719
829
|
};
|
720
830
|
|
831
|
+
//
|
832
|
+
// Blast
|
833
|
+
//
|
834
|
+
|
721
835
|
export const Blast = {
|
722
836
|
render: () => (
|
723
837
|
<DefaultStory
|
@@ -7,11 +7,11 @@ import React, { useCallback } from 'react';
|
|
7
7
|
import { type NodeArg } from '@dxos/app-graph';
|
8
8
|
import { ElevationProvider } from '@dxos/react-ui';
|
9
9
|
import {
|
10
|
-
ToolbarMenu,
|
11
|
-
MenuProvider,
|
12
10
|
type MenuActionHandler,
|
13
|
-
|
11
|
+
MenuProvider,
|
12
|
+
ToolbarMenu,
|
14
13
|
createGapSeparator,
|
14
|
+
useMenuActions,
|
15
15
|
} from '@dxos/react-ui-menu';
|
16
16
|
import { textBlockWidth } from '@dxos/react-ui-theme';
|
17
17
|
|
@@ -27,7 +27,7 @@ import {
|
|
27
27
|
editorToolbarSearch,
|
28
28
|
} from './util';
|
29
29
|
import { createViewMode } from './viewMode';
|
30
|
-
import { stackItemContentToolbarClassNames } from '../../
|
30
|
+
import { stackItemContentToolbarClassNames } from '../../fragments';
|
31
31
|
|
32
32
|
const createToolbar = ({
|
33
33
|
state,
|
@@ -86,7 +86,6 @@ const createToolbar = ({
|
|
86
86
|
|
87
87
|
const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
|
88
88
|
const menuCreator = useCallback(() => createToolbar(props), [props]);
|
89
|
-
|
90
89
|
const { resolveGroupItems } = useMenuActions(menuCreator);
|
91
90
|
|
92
91
|
return { resolveGroupItems, onAction: onAction as MenuActionHandler };
|
package/src/defaults.ts
CHANGED
@@ -41,3 +41,15 @@ export const editorMonospace = EditorView.theme({
|
|
41
41
|
|
42
42
|
export const editorWithToolbarLayout =
|
43
43
|
'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
|
44
|
+
|
45
|
+
export const stackItemContentEditorClassNames = (role?: string) =>
|
46
|
+
mx(
|
47
|
+
'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
|
48
|
+
role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
|
49
|
+
);
|
50
|
+
|
51
|
+
export const stackItemContentToolbarClassNames = (role?: string) =>
|
52
|
+
mx(
|
53
|
+
'attention-surface is-full border-be !border-separator',
|
54
|
+
role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
|
55
|
+
);
|