@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.
Files changed (36) hide show
  1. package/dist/lib/browser/index.mjs +183 -102
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/components/Editor/Editor.d.ts +0 -1
  5. package/dist/types/src/components/Editor/Editor.d.ts.map +1 -1
  6. package/dist/types/src/components/Markdown/Markdown.d.ts +2 -1
  7. package/dist/types/src/components/Markdown/Markdown.d.ts.map +1 -1
  8. package/dist/types/src/components/Markdown/Markdown.stories.d.ts.map +1 -1
  9. package/dist/types/src/components/Markdown/markdownTheme.d.ts +8 -1
  10. package/dist/types/src/components/Markdown/markdownTheme.d.ts.map +1 -1
  11. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  12. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +0 -14
  13. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
  14. package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts +11 -0
  15. package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts.map +1 -0
  16. package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts +0 -1
  17. package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts.map +1 -1
  18. package/dist/types/src/components/TextEditor/extensions/{hyperlink.d.ts → hyperlinkWidget.d.ts} +3 -3
  19. package/dist/types/src/components/TextEditor/extensions/hyperlinkWidget.d.ts.map +1 -0
  20. package/dist/types/src/components/TextEditor/extensions/index.d.ts +2 -1
  21. package/dist/types/src/components/TextEditor/extensions/index.d.ts.map +1 -1
  22. package/dist/types/src/components/TextEditor/theme.d.ts +1 -0
  23. package/dist/types/src/components/TextEditor/theme.d.ts.map +1 -1
  24. package/package.json +18 -18
  25. package/src/components/Editor/Editor.tsx +4 -1
  26. package/src/components/Markdown/Markdown.stories.tsx +12 -1
  27. package/src/components/Markdown/Markdown.tsx +47 -22
  28. package/src/components/Markdown/markdownTheme.ts +12 -1
  29. package/src/components/TextEditor/TextEditor.stories.tsx +43 -54
  30. package/src/components/TextEditor/TextEditor.tsx +1 -0
  31. package/src/components/TextEditor/extensions/hyperlinkDecoration.ts +99 -0
  32. package/src/components/TextEditor/extensions/hyperlinkTooltip.tsx +2 -17
  33. package/src/components/TextEditor/extensions/{hyperlink.tsx → hyperlinkWidget.tsx} +21 -10
  34. package/src/components/TextEditor/extensions/index.ts +2 -1
  35. package/src/components/TextEditor/theme.ts +6 -4
  36. 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;AAG1B,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,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,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,+FA+I1B,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;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAIF,eAAO,MAAM,OAAO;;;CAyBnB,CAAC"}
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 markdownDarkHighlighting: HighlightStyle;
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;AAIhC,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,gBA6EpC,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;0GAiF7D,CAAC"}
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;AAEpB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,eAAO,MAAM,SAAS,QAAgB,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,cAAc;WAAkC,MAAM;EAcjE,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,qBAAqB,gBAShC,CAAC;;;;;;;;;;;;;;AAuBH,wBAIE;AAEF,eAAO,MAAM,OAAO,IAAK,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":"AAaA,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,YAAa,gBAAgB,2DA0C5D,CAAC;AAGL,eAAO,MAAM,uBAAuB,uCAUlC,CAAC"}
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"}
@@ -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 hyperLinkStyle: Extension;
9
- export declare const hyperlink: Extension;
10
- //# sourceMappingURL=hyperlink.d.ts.map
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,3 +1,4 @@
1
- export * from './hyperlink';
1
+ export * from './hyperlinkDecoration';
2
2
  export * from './hyperlinkTooltip';
3
+ export * from './hyperlinkWidget';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,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,5 +1,6 @@
1
1
  import { type StyleSpec } from 'style-mod';
2
2
  /**
3
+ * Minimal styles.
3
4
  * https://codemirror.net/examples/styling
4
5
  */
5
6
  export declare const defaultStyles: {
@@ -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;;GAEG;AAEH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAgB/B,CAAC"}
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.4584ca9",
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/debug": "0.3.9-next.4584ca9",
53
- "@dxos/log": "0.3.9-next.4584ca9",
54
- "@dxos/react-async": "0.3.9-next.4584ca9",
55
- "@dxos/protocols": "0.3.9-next.4584ca9",
56
- "@dxos/react-ui-theme": "0.3.9-next.4584ca9",
57
- "@dxos/react-ui": "0.3.9-next.4584ca9",
58
- "@dxos/util": "0.3.9-next.4584ca9",
59
- "@dxos/display-name": "0.3.9-next.4584ca9",
60
- "@dxos/text-model": "0.3.9-next.4584ca9"
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/config": "0.3.9-next.4584ca9",
71
- "@dxos/automerge": "0.3.9-next.4584ca9",
72
- "@dxos/echo-schema": "0.3.9-next.4584ca9",
73
- "@dxos/echo-typegen": "0.3.9-next.4584ca9",
74
- "@dxos/react-client": "0.3.9-next.4584ca9",
75
- "@dxos/storybook-utils": "0.3.9-next.4584ca9"
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.4584ca9"
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: 'Hello, Storybook!',
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 { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
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?: EditorModel;
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
- ...(editorMode === 'vim' ? [vim()] : []),
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
- highlightActiveLineGutter(),
126
- highlightSpecialChars(),
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
- ...completionKeymap,
150
+ ...historyKeymap,
148
151
  ...lintKeymap,
152
+ ...searchKeymap,
149
153
  indentWithTab,
150
154
  ]),
151
- EditorView.lineWrapping,
152
155
 
153
- // Themes.
154
- markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
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(markdownDarkHighlighting),
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 markdownDarkHighlighting = HighlightStyle.define(
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 { HighlightStyle, StreamLanguage } from '@codemirror/language';
8
- import { tags } from '@lezer/highlight';
9
- import React, { useState } from 'react';
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 { defaultHyperLinkTooltip, hyperlink } from './extensions';
16
+ import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
17
17
  import { useTextModel } from '../../model';
18
18
 
19
- export const nameRegex = /\{([\w_]+)}/;
20
-
21
- /**
22
- * Simple Monaco language extension.
23
- * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
24
- */
25
- export const promptLanguage = StreamLanguage.define<{ count: number }>({
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
- * https://codemirror.net/examples/styling
43
- * https://lezer.codemirror.net/docs/ref/#highlight
44
- */
45
- export const promptHighlightStyles = HighlightStyle.define([
46
- {
47
- tag: tags.tagName,
48
- class: mx(
49
- 'mr-1 p-1',
50
- 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-mono text-sm',
51
- 'rounded border border-neutral-300 dark:border-neutral-700',
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, 'p-4 gap-4')}>
67
- <TextEditor
68
- model={model}
69
- slots={{ root: { className: mx(inputSurface, 'p-2') } }}
70
- extensions={[hyperlink, defaultHyperLinkTooltip]}
71
- />
72
- <pre>{JSON.stringify(model?.content?.toString(), null, 2)}</pre>
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.