@dxos/react-ui-editor 0.3.9-next.4584ca9 → 0.3.9-next.7522f7a
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 +183 -102
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/Editor/Editor.d.ts +0 -1
- package/dist/types/src/components/Editor/Editor.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Markdown.d.ts +2 -1
- package/dist/types/src/components/Markdown/Markdown.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Markdown.stories.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/markdownTheme.d.ts +8 -1
- package/dist/types/src/components/Markdown/markdownTheme.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 +0 -14
- package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts +11 -0
- package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts +0 -1
- package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/extensions/{hyperlink.d.ts → hyperlinkWidget.d.ts} +3 -3
- package/dist/types/src/components/TextEditor/extensions/hyperlinkWidget.d.ts.map +1 -0
- package/dist/types/src/components/TextEditor/extensions/index.d.ts +2 -1
- package/dist/types/src/components/TextEditor/extensions/index.d.ts.map +1 -1
- package/dist/types/src/components/TextEditor/theme.d.ts +1 -0
- package/dist/types/src/components/TextEditor/theme.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/components/Editor/Editor.tsx +4 -1
- package/src/components/Markdown/Markdown.stories.tsx +12 -1
- package/src/components/Markdown/Markdown.tsx +47 -22
- package/src/components/Markdown/markdownTheme.ts +12 -1
- package/src/components/TextEditor/TextEditor.stories.tsx +43 -54
- package/src/components/TextEditor/TextEditor.tsx +1 -0
- package/src/components/TextEditor/extensions/hyperlinkDecoration.ts +99 -0
- package/src/components/TextEditor/extensions/hyperlinkTooltip.tsx +2 -17
- package/src/components/TextEditor/extensions/{hyperlink.tsx → hyperlinkWidget.tsx} +21 -10
- package/src/components/TextEditor/extensions/index.ts +2 -1
- package/src/components/TextEditor/theme.ts +6 -4
- package/dist/types/src/components/TextEditor/extensions/hyperlink.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAc,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEvF,OAAO,EAUL,UAAU,EACX,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAc,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEvF,OAAO,EAUL,UAAU,EACX,MAAM,kBAAkB,CAAC;AAI1B,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,WAAW,6BAA8B,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,+FAsK1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/Markdown.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;AAWxC,wBAGE;
|
|
1
|
+
{"version":3,"file":"Markdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/Markdown.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;AAWxC,wBAGE;AAYF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAIF,eAAO,MAAM,OAAO;;;CA0BnB,CAAC"}
|
|
@@ -88,6 +88,13 @@ export declare const markdownTheme: {
|
|
|
88
88
|
'& .cm-yLineSelection': {
|
|
89
89
|
margin: string;
|
|
90
90
|
};
|
|
91
|
+
'.cm-link': {
|
|
92
|
+
color: string;
|
|
93
|
+
textDecorationLine: string;
|
|
94
|
+
textDecorationThickness: string;
|
|
95
|
+
textUnderlineOffset: string;
|
|
96
|
+
borderRadius: string;
|
|
97
|
+
};
|
|
91
98
|
};
|
|
92
|
-
export declare const
|
|
99
|
+
export declare const markdownHighlightStyle: HighlightStyle;
|
|
93
100
|
//# sourceMappingURL=markdownTheme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/markdownTheme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAUtD,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,MAAM,YAAY,CAAC;AAEhC,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAE3C,eAAO,MAAM,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"markdownTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/markdownTheme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAUtD,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,MAAM,YAAY,CAAC;AAEhC,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAE3C,eAAO,MAAM,MAAM,YAAY,CAAC;AAQhC,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,gBA6ElC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAMlB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE;QACN,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;KAC/B,CAAC;IACF,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9D,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;yBAND,aAAa,QAAQ,UAAU,KAAK,IAAI;
|
|
1
|
+
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAMlB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE;QACN,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;KAC/B,CAAC;IACF,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9D,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;yBAND,aAAa,QAAQ,UAAU,KAAK,IAAI;0GAkF7D,CAAC"}
|
|
@@ -1,19 +1,5 @@
|
|
|
1
1
|
import '@dxosTheme';
|
|
2
|
-
import { HighlightStyle, StreamLanguage } from '@codemirror/language';
|
|
3
2
|
import React from 'react';
|
|
4
|
-
export declare const nameRegex: RegExp;
|
|
5
|
-
/**
|
|
6
|
-
* Simple Monaco language extension.
|
|
7
|
-
* https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
|
|
8
|
-
*/
|
|
9
|
-
export declare const promptLanguage: StreamLanguage<{
|
|
10
|
-
count: number;
|
|
11
|
-
}>;
|
|
12
|
-
/**
|
|
13
|
-
* https://codemirror.net/examples/styling
|
|
14
|
-
* https://lezer.codemirror.net/docs/ref/#highlight
|
|
15
|
-
*/
|
|
16
|
-
export declare const promptHighlightStyles: HighlightStyle;
|
|
17
3
|
declare const _default: {
|
|
18
4
|
component: React.ForwardRefExoticComponent<{
|
|
19
5
|
model?: import("../../model").EditorModel | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAA+B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;AA0DpD,wBAIE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type RangeSet, StateField } from '@codemirror/state';
|
|
2
|
+
type HyperlinkDecorationConfig = {
|
|
3
|
+
link?: boolean;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Creates a state field to replace AST elements with a hyperlink widget.
|
|
7
|
+
* https://codemirror.net/docs/ref/#state.StateField
|
|
8
|
+
*/
|
|
9
|
+
export declare const hyperlinkDecoration: ({ link }?: HyperlinkDecorationConfig) => StateField<RangeSet<any>>;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=hyperlinkDecoration.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hyperlinkDecoration.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkDecoration.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AA6CnH,KAAK,yBAAyB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,cAAc,yBAAyB,8BAMtE,CAAC"}
|
|
@@ -5,5 +5,4 @@ export type OnHyperlinkHover = (el: Element, url: string) => void;
|
|
|
5
5
|
* https://github.com/codemirror/view/blob/main/src/tooltip.ts
|
|
6
6
|
*/
|
|
7
7
|
export declare const createHyperlinkTooltip: (onHover: OnHyperlinkHover, regexp?: RegExp) => import("@codemirror/state").Extension;
|
|
8
|
-
export declare const defaultHyperLinkTooltip: import("@codemirror/state").Extension;
|
|
9
8
|
//# sourceMappingURL=hyperlinkTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hyperlinkTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkTooltip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hyperlinkTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkTooltip.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;AAElE;;;;GAIG;AAEH,eAAO,MAAM,sBAAsB,YAAa,gBAAgB,2DA0C5D,CAAC"}
|
package/dist/types/src/components/TextEditor/extensions/{hyperlink.d.ts → hyperlinkWidget.d.ts}
RENAMED
|
@@ -5,6 +5,6 @@ export declare function hyperLinkExtension(): ViewPlugin<{
|
|
|
5
5
|
decorations: DecorationSet;
|
|
6
6
|
update(update: ViewUpdate): void;
|
|
7
7
|
}>;
|
|
8
|
-
export declare const
|
|
9
|
-
export declare const
|
|
10
|
-
//# sourceMappingURL=
|
|
8
|
+
export declare const hyperlinkStyle: Extension;
|
|
9
|
+
export declare const hyperlinkWidget: Extension;
|
|
10
|
+
//# sourceMappingURL=hyperlinkWidget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hyperlinkWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkWidget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAEL,KAAK,aAAa,EAElB,cAAc,EACd,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAuD1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,SAAkD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/theme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAM3C
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/theme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAM3C;;;GAGG;AAEH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAiB/B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-editor",
|
|
3
|
-
"version": "0.3.9-next.
|
|
3
|
+
"version": "0.3.9-next.7522f7a",
|
|
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",
|
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
"@lezer/common": "^1.1.1",
|
|
28
28
|
"@lezer/highlight": "^1.2.0",
|
|
29
29
|
"@lezer/markdown": "^1.1.1",
|
|
30
|
-
"@phosphor-icons/react": "^2.0.5",
|
|
31
30
|
"@replit/codemirror-vim": "^6.0.14",
|
|
32
31
|
"@tiptap/core": "2.0.0-beta.220",
|
|
33
32
|
"@tiptap/extension-collaboration": "2.0.0-beta.220",
|
|
@@ -49,36 +48,37 @@
|
|
|
49
48
|
"y-prosemirror": "~1.0.20",
|
|
50
49
|
"y-protocols": "^1.0.5",
|
|
51
50
|
"yjs": "^13.6.10",
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/
|
|
54
|
-
"@dxos/
|
|
55
|
-
"@dxos/protocols": "0.3.9-next.
|
|
56
|
-
"@dxos/react-
|
|
57
|
-
"@dxos/react-ui": "0.3.9-next.
|
|
58
|
-
"@dxos/
|
|
59
|
-
"@dxos/
|
|
60
|
-
"@dxos/text-model": "0.3.9-next.
|
|
51
|
+
"@dxos/display-name": "0.3.9-next.7522f7a",
|
|
52
|
+
"@dxos/debug": "0.3.9-next.7522f7a",
|
|
53
|
+
"@dxos/log": "0.3.9-next.7522f7a",
|
|
54
|
+
"@dxos/protocols": "0.3.9-next.7522f7a",
|
|
55
|
+
"@dxos/react-async": "0.3.9-next.7522f7a",
|
|
56
|
+
"@dxos/react-ui": "0.3.9-next.7522f7a",
|
|
57
|
+
"@dxos/react-ui-theme": "0.3.9-next.7522f7a",
|
|
58
|
+
"@dxos/util": "0.3.9-next.7522f7a",
|
|
59
|
+
"@dxos/text-model": "0.3.9-next.7522f7a"
|
|
61
60
|
},
|
|
62
61
|
"devDependencies": {
|
|
63
62
|
"@codemirror/basic-setup": "^0.20.0",
|
|
63
|
+
"@phosphor-icons/react": "^2.0.5",
|
|
64
64
|
"@types/codemirror": "^5.60.14",
|
|
65
65
|
"@types/lodash.get": "^4.4.7",
|
|
66
66
|
"@types/react": "^18.0.21",
|
|
67
67
|
"@types/react-dom": "^18.0.6",
|
|
68
68
|
"react": "^18.2.0",
|
|
69
69
|
"react-dom": "^18.2.0",
|
|
70
|
-
"@dxos/
|
|
71
|
-
"@dxos/
|
|
72
|
-
"@dxos/echo-
|
|
73
|
-
"@dxos/
|
|
74
|
-
"@dxos/
|
|
75
|
-
"@dxos/storybook-utils": "0.3.9-next.
|
|
70
|
+
"@dxos/automerge": "0.3.9-next.7522f7a",
|
|
71
|
+
"@dxos/config": "0.3.9-next.7522f7a",
|
|
72
|
+
"@dxos/echo-typegen": "0.3.9-next.7522f7a",
|
|
73
|
+
"@dxos/react-client": "0.3.9-next.7522f7a",
|
|
74
|
+
"@dxos/echo-schema": "0.3.9-next.7522f7a",
|
|
75
|
+
"@dxos/storybook-utils": "0.3.9-next.7522f7a"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
78
|
"@phosphor-icons/react": "^2.0.5",
|
|
79
79
|
"react": "^18.2.0",
|
|
80
80
|
"react-dom": "^18.2.0",
|
|
81
|
-
"@dxos/react-client": "0.3.9-next.
|
|
81
|
+
"@dxos/react-client": "0.3.9-next.7522f7a"
|
|
82
82
|
},
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
@@ -16,7 +16,6 @@ export type EditorProps = UseTextModelOptions & {
|
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
18
|
* Memoized editor which depends on DXOS platform.
|
|
19
|
-
*
|
|
20
19
|
* Determines which editor to render based on the kind of text.
|
|
21
20
|
*/
|
|
22
21
|
// NOTE: Without `memo`, if parent component uses `observer` the editor re-renders excessively.
|
|
@@ -24,6 +23,10 @@ export type EditorProps = UseTextModelOptions & {
|
|
|
24
23
|
export const Editor = memo(
|
|
25
24
|
forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...params }, forwardedRef) => {
|
|
26
25
|
const model = useTextModel(params);
|
|
26
|
+
if (!model) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
|
|
27
30
|
if (model?.content instanceof YXmlFragment) {
|
|
28
31
|
return <RichTextEditor ref={forwardedRef as Ref<TipTapEditor>} model={model} slots={slots} />;
|
|
29
32
|
} else {
|
|
@@ -20,11 +20,21 @@ export default {
|
|
|
20
20
|
decorators: [withTheme],
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
+
const content = [
|
|
24
|
+
'',
|
|
25
|
+
'',
|
|
26
|
+
'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
|
|
27
|
+
'',
|
|
28
|
+
'This is a link: https://www.dxos.org',
|
|
29
|
+
'',
|
|
30
|
+
'',
|
|
31
|
+
].join('\n');
|
|
32
|
+
|
|
23
33
|
export const Default = {
|
|
24
34
|
args: {
|
|
25
35
|
model: {
|
|
26
36
|
id: 'editor',
|
|
27
|
-
content
|
|
37
|
+
content,
|
|
28
38
|
},
|
|
29
39
|
},
|
|
30
40
|
};
|
|
@@ -54,6 +64,7 @@ export const WithYjs = {
|
|
|
54
64
|
</main>
|
|
55
65
|
);
|
|
56
66
|
},
|
|
67
|
+
|
|
57
68
|
// TODO(wittjosiah): Decorator for doing this without clients being initialized?
|
|
58
69
|
decorators: [ClientDecorator({ count: 2 })],
|
|
59
70
|
};
|
|
@@ -30,6 +30,7 @@ import {
|
|
|
30
30
|
EditorView,
|
|
31
31
|
} from '@codemirror/view';
|
|
32
32
|
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
33
|
+
// import { GFM } from '@lezer/markdown';
|
|
33
34
|
import { vim } from '@replit/codemirror-vim';
|
|
34
35
|
import React, {
|
|
35
36
|
type KeyboardEvent,
|
|
@@ -48,16 +49,17 @@ import { getColorForValue } from '@dxos/react-ui-theme';
|
|
|
48
49
|
import { YText } from '@dxos/text-model';
|
|
49
50
|
|
|
50
51
|
import { markdownTagsExtension } from './markdownTags';
|
|
51
|
-
import {
|
|
52
|
+
import { markdownHighlightStyle, markdownTheme } from './markdownTheme';
|
|
52
53
|
import { type EditorModel, type EditorSlots } from '../../model';
|
|
53
54
|
|
|
54
55
|
export const EditorModes = ['default', 'vim'] as const;
|
|
55
56
|
export type EditorMode = (typeof EditorModes)[number];
|
|
56
57
|
|
|
57
58
|
export type MarkdownEditorProps = {
|
|
58
|
-
model
|
|
59
|
+
model: EditorModel;
|
|
59
60
|
slots?: EditorSlots;
|
|
60
61
|
editorMode?: EditorMode;
|
|
62
|
+
showWidgets?: boolean;
|
|
61
63
|
extensions?: Extension[];
|
|
62
64
|
onChange?: (content: string | Text) => void;
|
|
63
65
|
};
|
|
@@ -116,50 +118,73 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
|
|
116
118
|
const state = EditorState.create({
|
|
117
119
|
doc: content?.toString(),
|
|
118
120
|
extensions: [
|
|
119
|
-
// Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
|
|
121
|
+
// Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
|
|
120
122
|
listenChangesExtension,
|
|
121
123
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
+
// TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
|
|
124
125
|
// All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
history(),
|
|
128
|
-
drawSelection(),
|
|
129
|
-
dropCursor(),
|
|
130
|
-
EditorState.allowMultipleSelections.of(true),
|
|
131
|
-
indentOnInput(),
|
|
132
|
-
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
|
126
|
+
// https://codemirror.net/docs/ref/#codemirror.basicSetup
|
|
127
|
+
autocompletion(),
|
|
133
128
|
bracketMatching(),
|
|
134
129
|
closeBrackets(),
|
|
135
|
-
autocompletion(),
|
|
136
|
-
rectangularSelection(),
|
|
137
130
|
crosshairCursor(),
|
|
131
|
+
dropCursor(),
|
|
132
|
+
drawSelection(),
|
|
138
133
|
highlightActiveLine(),
|
|
134
|
+
highlightActiveLineGutter(),
|
|
139
135
|
highlightSelectionMatches(),
|
|
136
|
+
highlightSpecialChars(),
|
|
137
|
+
history(),
|
|
138
|
+
indentOnInput(),
|
|
140
139
|
placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
|
|
140
|
+
rectangularSelection(),
|
|
141
|
+
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
|
142
|
+
EditorState.allowMultipleSelections.of(true),
|
|
143
|
+
EditorView.lineWrapping,
|
|
144
|
+
|
|
141
145
|
keymap.of([
|
|
142
146
|
...closeBracketsKeymap,
|
|
147
|
+
...completionKeymap,
|
|
143
148
|
...defaultKeymap,
|
|
144
|
-
...searchKeymap,
|
|
145
|
-
...historyKeymap,
|
|
146
149
|
...foldKeymap,
|
|
147
|
-
...
|
|
150
|
+
...historyKeymap,
|
|
148
151
|
...lintKeymap,
|
|
152
|
+
...searchKeymap,
|
|
149
153
|
indentWithTab,
|
|
150
154
|
]),
|
|
151
|
-
EditorView.lineWrapping,
|
|
152
155
|
|
|
153
|
-
//
|
|
154
|
-
markdown
|
|
156
|
+
// Main extension.
|
|
157
|
+
// https://github.com/codemirror/lang-markdown
|
|
158
|
+
markdown({
|
|
159
|
+
base: markdownLanguage,
|
|
160
|
+
codeLanguages: languages,
|
|
161
|
+
extensions: [
|
|
162
|
+
// TODO(burdon): This seems to upgrade the parser.
|
|
163
|
+
// GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
|
|
164
|
+
// https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
|
|
165
|
+
// https://github.github.com/gfm
|
|
166
|
+
// GFM,
|
|
167
|
+
|
|
168
|
+
// Custom styling.
|
|
169
|
+
markdownTagsExtension,
|
|
170
|
+
],
|
|
171
|
+
}),
|
|
172
|
+
|
|
173
|
+
// Theme.
|
|
155
174
|
EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
|
|
156
175
|
...(themeMode === 'dark'
|
|
157
176
|
? [syntaxHighlighting(oneDarkHighlightStyle)]
|
|
158
177
|
: [syntaxHighlighting(defaultHighlightStyle)]),
|
|
178
|
+
|
|
159
179
|
// TODO(thure): All but one rule here apply to both themes; rename or refactor.
|
|
160
|
-
syntaxHighlighting(
|
|
180
|
+
syntaxHighlighting(markdownHighlightStyle),
|
|
181
|
+
|
|
182
|
+
// Settings.
|
|
183
|
+
...(editorMode === 'vim' ? [vim()] : []),
|
|
161
184
|
|
|
185
|
+
// TODO(burdon): Move to extensions.
|
|
162
186
|
// Replication and awareness (incl. remote selection).
|
|
187
|
+
// https://codemirror.net/docs/ref/#collab
|
|
163
188
|
...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
|
|
164
189
|
|
|
165
190
|
// Custom.
|
|
@@ -32,6 +32,10 @@ export const cursor = '#ffffff';
|
|
|
32
32
|
|
|
33
33
|
const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
|
|
34
34
|
|
|
35
|
+
// TODO(burdon): Subtle difference in layout for documents and stacks.
|
|
36
|
+
// TODO(burdon): On first character, height of editor changes by a few pixels.
|
|
37
|
+
// TODO(burdon): Is the '&' prefix required? If so, document.
|
|
38
|
+
|
|
35
39
|
export const markdownTheme = {
|
|
36
40
|
// TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
|
|
37
41
|
// '&': {
|
|
@@ -164,6 +168,13 @@ export const markdownTheme = {
|
|
|
164
168
|
'& .cm-yLineSelection': {
|
|
165
169
|
margin: '0',
|
|
166
170
|
},
|
|
171
|
+
'.cm-link': {
|
|
172
|
+
color: 'rgb(20 89 208)',
|
|
173
|
+
textDecorationLine: 'underline',
|
|
174
|
+
textDecorationThickness: '1px',
|
|
175
|
+
textUnderlineOffset: '2px',
|
|
176
|
+
borderRadius: '.125rem',
|
|
177
|
+
},
|
|
167
178
|
...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
|
|
168
179
|
const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
|
|
169
180
|
// TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
|
|
@@ -174,7 +185,7 @@ export const markdownTheme = {
|
|
|
174
185
|
}, {}),
|
|
175
186
|
};
|
|
176
187
|
|
|
177
|
-
export const
|
|
188
|
+
export const markdownHighlightStyle = HighlightStyle.define(
|
|
178
189
|
[
|
|
179
190
|
{
|
|
180
191
|
tag: [
|
|
@@ -3,73 +3,62 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import '@dxosTheme';
|
|
6
|
-
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
6
|
+
import { markdown } from '@codemirror/lang-markdown';
|
|
7
|
+
import { ArrowCircleUp } from '@phosphor-icons/react';
|
|
8
|
+
import React, { StrictMode, useState } from 'react';
|
|
9
|
+
import { createRoot } from 'react-dom/client';
|
|
10
10
|
|
|
11
11
|
import { TextObject } from '@dxos/echo-schema';
|
|
12
|
-
import { fixedInsetFlexLayout, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
|
|
12
|
+
import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
|
|
13
13
|
import { withTheme } from '@dxos/storybook-utils';
|
|
14
14
|
|
|
15
15
|
import { TextEditor } from './TextEditor';
|
|
16
|
-
import {
|
|
16
|
+
import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
|
|
17
17
|
import { useTextModel } from '../../model';
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
startState: () => ({ count: 0 }),
|
|
27
|
-
|
|
28
|
-
token: (stream, state) => {
|
|
29
|
-
state.count++;
|
|
30
|
-
if (stream.eatSpace()) {
|
|
31
|
-
return null;
|
|
32
|
-
}
|
|
33
|
-
if (stream.match(/^(<\w+>)/)) {
|
|
34
|
-
return 'tagName';
|
|
35
|
-
}
|
|
36
|
-
stream.next();
|
|
37
|
-
return null;
|
|
38
|
-
},
|
|
39
|
-
});
|
|
19
|
+
const text = [
|
|
20
|
+
'',
|
|
21
|
+
'',
|
|
22
|
+
'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
|
|
23
|
+
'',
|
|
24
|
+
'',
|
|
25
|
+
].join('\n');
|
|
40
26
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
),
|
|
53
|
-
},
|
|
54
|
-
]);
|
|
55
|
-
|
|
56
|
-
const Story = () => {
|
|
57
|
-
const [item] = useState({
|
|
58
|
-
text: new TextObject(
|
|
59
|
-
'\n\n\nThis is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).\n\n\n',
|
|
60
|
-
),
|
|
27
|
+
const hyperLinkTooltip = () =>
|
|
28
|
+
createHyperlinkTooltip((el, url) => {
|
|
29
|
+
const web = new URL(url);
|
|
30
|
+
createRoot(el).render(
|
|
31
|
+
<StrictMode>
|
|
32
|
+
<div className='flex gap-1 items-center'>
|
|
33
|
+
<ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
|
|
34
|
+
<p className='pr-1'>{web.origin}</p>
|
|
35
|
+
</div>
|
|
36
|
+
</StrictMode>,
|
|
37
|
+
);
|
|
61
38
|
});
|
|
62
39
|
|
|
40
|
+
const Story = () => {
|
|
41
|
+
const [item] = useState({ text: new TextObject(text) });
|
|
63
42
|
const model = useTextModel({ text: item.text });
|
|
64
43
|
|
|
65
44
|
return (
|
|
66
|
-
<div className={mx(fixedInsetFlexLayout, groupSurface
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
45
|
+
<div className={mx(fixedInsetFlexLayout, groupSurface)}>
|
|
46
|
+
<div className='flex justify-center p-8'>
|
|
47
|
+
<div className='w-[800px]'>
|
|
48
|
+
<TextEditor
|
|
49
|
+
model={model}
|
|
50
|
+
extensions={[
|
|
51
|
+
markdown(),
|
|
52
|
+
hyperlinkDecoration({ link: false }),
|
|
53
|
+
hyperLinkTooltip(),
|
|
54
|
+
// EditorView.domEventHandlers({
|
|
55
|
+
// mousedown: (e, view) => {},
|
|
56
|
+
// }),
|
|
57
|
+
]}
|
|
58
|
+
slots={{ root: { className: mx(inputSurface, 'p-2') } }}
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
73
62
|
</div>
|
|
74
63
|
);
|
|
75
64
|
};
|
|
@@ -96,6 +96,7 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
|
|
|
96
96
|
: [syntaxHighlighting(defaultHighlightStyle)]),
|
|
97
97
|
|
|
98
98
|
// Replication.
|
|
99
|
+
// TODO(burdon): Move to default extensions.
|
|
99
100
|
...(content instanceof YText ? [yCollab(content, undefined)] : []),
|
|
100
101
|
|
|
101
102
|
// Custom.
|