@dxos/react-ui-editor 0.3.9-main.f8fc6b9 → 0.3.9-next.35264cb

package/dist/types/src/components/Markdown/Markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAc,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEvE,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,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,+FA4I1B,CAAC"}
+{"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"}

package/dist/types/src/components/Markdown/Markdown.stories.d.ts

@@ -2,6 +2,7 @@ import '@dxosTheme';
 import React from 'react';
 declare const _default: {
     component: React.ForwardRefExoticComponent<import("./Markdown").MarkdownEditorProps & React.RefAttributes<import("./Markdown").MarkdownEditorRef>>;
+    decorators: import("@storybook/react").Decorator[];
 };
 export default _default;
 export declare const Default: {
@@ -14,6 +15,6 @@ export declare const Default: {
 };
 export declare const WithYjs: {
     render: () => JSX.Element;
-    decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, any>[];
+    decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R, any>[];
 };
 //# sourceMappingURL=Markdown.stories.d.ts.map

package/dist/types/src/components/Markdown/Markdown.stories.d.ts.map

@@ -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;;;;AAUxC,wBAEE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAIF,eAAO,MAAM,OAAO;;;CAyBnB,CAAC"}
+{"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"}

package/dist/types/src/components/Markdown/markdownTheme.d.ts

@@ -13,23 +13,9 @@ export declare const highlightBackground = "#2c313a";
 export declare const tooltipBackground = "#353a42";
 export declare const cursor = "#ffffff";
 export declare const markdownTheme: {
-    '.dark & .cm-tooltip': {
-        border: string;
+    '.cm-tooltip': {
         backgroundColor: string;
-    };
-    '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
-        borderTopColor: string;
-        borderBottomColor: string;
-    };
-    '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
-        borderTopColor: string;
-        borderBottomColor: string;
-    };
-    '.dark & .cm-tooltip-autocomplete': {
-        '& > ul > li[aria-selected]': {
-            backgroundColor: string;
-            color: string;
-        };
+        border: string;
     };
     '&.cm-focused': {
         outline: string;
@@ -102,6 +88,13 @@ export declare const markdownTheme: {
     '& .cm-yLineSelection': {
         margin: string;
     };
+    '.cm-link': {
+        color: string;
+        textDecorationLine: string;
+        textDecorationThickness: string;
+        textUnderlineOffset: string;
+        borderRadius: string;
+    };
 };
-export declare const markdownDarkHighlighting: HighlightStyle;
+export declare const markdownHighlightStyle: HighlightStyle;
 //# sourceMappingURL=markdownTheme.d.ts.map

package/dist/types/src/components/Markdown/markdownTheme.d.ts.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,gBA6EpC,CAAC"}
+{"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"}

package/dist/types/src/components/RichText/RichText.stories.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
     } & {
         slots?: import("../..").EditorSlots | undefined;
     } & React.RefAttributes<import("@tiptap/react").Editor | null>>;
+    decorators: import("@storybook/react").Decorator[];
 };
 export default _default;
 export declare const Default: {
@@ -21,6 +22,6 @@ export declare const Default: {
 };
 export declare const WithYjs: {
     render: (args: Omit<RichTextEditorProps, 'model'>) => JSX.Element;
-    decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, any>[];
+    decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R, any>[];
 };
 //# sourceMappingURL=RichText.stories.d.ts.map

package/dist/types/src/components/RichText/RichText.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/RichText.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;AAGtE,wBAEE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAGF,eAAO,MAAM,OAAO;mBACH,KAAK,mBAAmB,EAAE,OAAO,CAAC;;CAmClD,CAAC"}
+{"version":3,"file":"RichText.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/RichText.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;AAGtE,wBAGE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAGF,eAAO,MAAM,OAAO;mBACH,KAAK,mBAAmB,EAAE,OAAO,CAAC;;CAmClD,CAAC"}

package/dist/types/src/components/TextEditor/TextEditor.d.ts.map

@@ -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"}
+{"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"}

package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
         slots?: import("../../model").EditorSlots | undefined;
         onKeyDown?: ((event: React.KeyboardEvent<Element>, info: import("./TextEditor").CursorInfo) => void) | undefined;
     } & Pick<React.HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur"> & React.RefAttributes<import("./TextEditor").TextEditorRef>>;
+    decorators: import("@storybook/react").Decorator[];
     render: () => JSX.Element;
 };
 export default _default;

package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AACpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAoBxC,wBAGE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"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"}

package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts

@@ -0,0 +1,11 @@
+import { type RangeSet, StateField } from '@codemirror/state';
+type HyperlinkDecorationConfig = {
+    link?: boolean;
+};
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export declare const hyperlinkDecoration: ({ link }?: HyperlinkDecorationConfig) => StateField<RangeSet<any>>;
+export {};
+//# sourceMappingURL=hyperlinkDecoration.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts

@@ -0,0 +1,8 @@
+export type OnHyperlinkHover = (el: Element, url: string) => void;
+/**
+ * https://codemirror.net/examples/tooltip
+ * https://codemirror.net/docs/ref/#view.hoverTooltip
+ * https://github.com/codemirror/view/blob/main/src/tooltip.ts
+ */
+export declare const createHyperlinkTooltip: (onHover: OnHyperlinkHover, regexp?: RegExp) => import("@codemirror/state").Extension;
+//# sourceMappingURL=hyperlinkTooltip.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts.map

@@ -0,0 +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/hyperlinkWidget.d.ts

@@ -0,0 +1,10 @@
+import { type Extension } from '@codemirror/state';
+import { type DecorationSet, MatchDecorator, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+export declare function hyperLinkExtension(): ViewPlugin<{
+    readonly decorator: MatchDecorator;
+    decorations: DecorationSet;
+    update(update: ViewUpdate): void;
+}>;
+export declare const hyperlinkStyle: Extension;
+export declare const hyperlinkWidget: Extension;
+//# sourceMappingURL=hyperlinkWidget.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlinkWidget.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/components/TextEditor/extensions/index.d.ts

@@ -0,0 +1,4 @@
+export * from './hyperlinkDecoration';
+export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/TextEditor/extensions/index.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/components/TextEditor/index.d.ts

@@ -1,5 +1,6 @@
 export { type StyleSpec } from 'style-mod';
 export { tags } from '@lezer/highlight';
 export * from './TextEditor';
+export * from './extensions';
 export * from './theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/TextEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,cAAc,cAAc,CAAC;AAE7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/types/src/components/TextEditor/theme.d.ts

@@ -1,5 +1,6 @@
 import { type StyleSpec } from 'style-mod';
 /**
+ * Minimal styles.
  * https://codemirror.net/examples/styling
  */
 export declare const defaultStyles: {

package/dist/types/src/components/TextEditor/theme.d.ts.map

@@ -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;CAY/B,CAAC"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.9-main.f8fc6b9",
+  "version": "0.3.9-next.35264cb",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -48,34 +48,37 @@
     "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/debug": "0.3.9-main.f8fc6b9",
-    "@dxos/display-name": "0.3.9-main.f8fc6b9",
-    "@dxos/protocols": "0.3.9-main.f8fc6b9",
-    "@dxos/log": "0.3.9-main.f8fc6b9",
-    "@dxos/react-ui": "0.3.9-main.f8fc6b9",
-    "@dxos/react-ui-theme": "0.3.9-main.f8fc6b9",
-    "@dxos/react-async": "0.3.9-main.f8fc6b9",
-    "@dxos/text-model": "0.3.9-main.f8fc6b9",
-    "@dxos/util": "0.3.9-main.f8fc6b9"
+    "@dxos/debug": "0.3.9-next.35264cb",
+    "@dxos/display-name": "0.3.9-next.35264cb",
+    "@dxos/log": "0.3.9-next.35264cb",
+    "@dxos/protocols": "0.3.9-next.35264cb",
+    "@dxos/react-async": "0.3.9-next.35264cb",
+    "@dxos/text-model": "0.3.9-next.35264cb",
+    "@dxos/react-ui-theme": "0.3.9-next.35264cb",
+    "@dxos/util": "0.3.9-next.35264cb",
+    "@dxos/react-ui": "0.3.9-next.35264cb"
   },
   "devDependencies": {
     "@codemirror/basic-setup": "^0.20.0",
+    "@phosphor-icons/react": "^2.0.5",
     "@types/codemirror": "^5.60.14",
     "@types/lodash.get": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/automerge": "0.3.9-main.f8fc6b9",
-    "@dxos/config": "0.3.9-main.f8fc6b9",
-    "@dxos/echo-schema": "0.3.9-main.f8fc6b9",
-    "@dxos/echo-typegen": "0.3.9-main.f8fc6b9",
-    "@dxos/react-client": "0.3.9-main.f8fc6b9"
+    "@dxos/automerge": "0.3.9-next.35264cb",
+    "@dxos/config": "0.3.9-next.35264cb",
+    "@dxos/echo-schema": "0.3.9-next.35264cb",
+    "@dxos/echo-typegen": "0.3.9-next.35264cb",
+    "@dxos/storybook-utils": "0.3.9-next.35264cb",
+    "@dxos/react-client": "0.3.9-next.35264cb"
   },
   "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.9-main.f8fc6b9"
+    "@dxos/react-client": "0.3.9-next.35264cb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.stories.tsx

@@ -11,12 +11,14 @@ import { TextObject, TextKind, useQuery, useSpace } from '@dxos/react-client/ech
 import { useIdentity } from '@dxos/react-client/halo';
 import { ClientDecorator, setupPeersInSpace, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { Editor, type EditorProps } from './Editor';
 import { EditorDocument, types as schema } from '../../testing';
 
 export default {
   component: Editor,
+  decorators: [withTheme],
 };
 
 const Story = ({ spaceKey, ...params }: Pick<EditorProps, 'slots'> & { spaceKey: PublicKey }) => {

package/src/components/Editor/Editor.tsx

@@ -16,7 +16,6 @@ export type EditorProps = UseTextModelOptions & {
 
 /**
  * Memoized editor which depends on DXOS platform.
- *
  * Determines which editor to render based on the kind of text.
  */
 // NOTE: Without `memo`, if parent component uses `observer` the editor re-renders excessively.
@@ -24,6 +23,10 @@ export type EditorProps = UseTextModelOptions & {
 export const Editor = memo(
   forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...params }, forwardedRef) => {
     const model = useTextModel(params);
+    if (!model) {
+      return null;
+    }
+
     if (model?.content instanceof YXmlFragment) {
       return <RichTextEditor ref={forwardedRef as Ref<TipTapEditor>} model={model} slots={slots} />;
     } else {

package/src/components/Markdown/Markdown.stories.tsx

@@ -10,19 +10,31 @@ import { PublicKey } from '@dxos/react-client';
 import { TextKind } from '@dxos/react-client/echo';
 import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './Markdown';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {
   component: MarkdownEditor,
+  decorators: [withTheme],
 };
 
+const content = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+  '',
+  'This is a link: https://www.dxos.org',
+  '',
+  '',
+].join('\n');
+
 export const Default = {
   args: {
     model: {
       id: 'editor',
-      content: 'Hello, Storybook!',
+      content,
     },
   },
 };
@@ -52,6 +64,7 @@ export const WithYjs = {
       </main>
     );
   },
+
   // TODO(wittjosiah): Decorator for doing this without clients being initialized?
   decorators: [ClientDecorator({ count: 2 })],
 };

package/src/components/Markdown/Markdown.tsx

@@ -15,7 +15,7 @@ import {
 import { languages } from '@codemirror/language-data';
 import { lintKeymap } from '@codemirror/lint';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, StateField, type Text } from '@codemirror/state';
+import { EditorState, type Extension, StateField, type Text } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   keymap,
@@ -30,6 +30,7 @@ import {
   EditorView,
 } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { GFM } from '@lezer/markdown';
 import { vim } from '@replit/codemirror-vim';
 import React, {
   type KeyboardEvent,
@@ -48,16 +49,18 @@ import { getColorForValue } from '@dxos/react-ui-theme';
 import { YText } from '@dxos/text-model';
 
 import { markdownTagsExtension } from './markdownTags';
-import { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
+import { markdownHighlightStyle, markdownTheme } from './markdownTheme';
 import { type EditorModel, type EditorSlots } from '../../model';
 
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
 
 export type MarkdownEditorProps = {
-  model?: EditorModel;
+  model: EditorModel;
   slots?: EditorSlots;
   editorMode?: EditorMode;
+  showWidgets?: boolean;
+  extensions?: Extension[];
   onChange?: (content: string | Text) => void;
 };
 
@@ -68,7 +71,7 @@ export type MarkdownEditorRef = {
 };
 
 export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ model, slots = {}, editorMode, onChange }, forwardedRef) => {
+  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
     const { id, content, provider, peer } = model ?? {};
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -115,51 +118,77 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       const state = EditorState.create({
         doc: content?.toString(),
         extensions: [
-          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
+          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
           listenChangesExtension,
 
-          ...(editorMode === 'vim' ? [vim()] : []),
-
+          // TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
           // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          drawSelection(),
-          dropCursor(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+          // https://codemirror.net/docs/ref/#codemirror.basicSetup
+          autocompletion(),
           bracketMatching(),
           closeBrackets(),
-          autocompletion(),
-          rectangularSelection(),
           crosshairCursor(),
+          dropCursor(),
+          drawSelection(),
           highlightActiveLine(),
+          highlightActiveLineGutter(),
           highlightSelectionMatches(),
+          highlightSpecialChars(),
+          history(),
+          indentOnInput(),
           placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
+          rectangularSelection(),
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+          EditorState.allowMultipleSelections.of(true),
+          EditorView.lineWrapping,
+
           keymap.of([
             ...closeBracketsKeymap,
+            ...completionKeymap,
             ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
             ...foldKeymap,
-            ...completionKeymap,
+            ...historyKeymap,
             ...lintKeymap,
+            ...searchKeymap,
             indentWithTab,
           ]),
-          EditorView.lineWrapping,
 
-          // Themes.
-          markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
+          // Main extension.
+          // https://github.com/codemirror/lang-markdown
+          markdown({
+            base: markdownLanguage,
+            codeLanguages: languages,
+            extensions: [
+              // TODO(burdon): This seems to upgrade the parser.
+              // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+              // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+              // https://github.github.com/gfm
+              // GFM,
+
+              // Custom styling.
+              markdownTagsExtension,
+            ],
+          }),
+
+          // Theme.
           EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
           ...(themeMode === 'dark'
             ? [syntaxHighlighting(oneDarkHighlightStyle)]
             : [syntaxHighlighting(defaultHighlightStyle)]),
+
           // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-          syntaxHighlighting(markdownDarkHighlighting),
+          syntaxHighlighting(markdownHighlightStyle),
+
+          // Settings.
+          ...(editorMode === 'vim' ? [vim()] : []),
 
+          // TODO(burdon): Move to extensions.
           // Replication and awareness (incl. remote selection).
+          // https://codemirror.net/docs/ref/#collab
           ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
+
+          // Custom.
+          ...extensions,
         ],
       });
 

package/src/components/Markdown/markdownTheme.ts

@@ -32,6 +32,10 @@ export const cursor = '#ffffff';
 
 const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
 
+// TODO(burdon): Subtle difference in layout for documents and stacks.
+// TODO(burdon): On first character, height of editor changes by a few pixels.
+// TODO(burdon): Is the '&' prefix required? If so, document.
+
 export const markdownTheme = {
   // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
@@ -71,24 +75,28 @@ export const markdownTheme = {
   //   color: '#ddd'
   // },
 
-  '.dark & .cm-tooltip': {
+  '.cm-tooltip': {
+    backgroundColor: 'transparent',
     border: 'none',
-    backgroundColor: tooltipBackground,
-  },
-  '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent',
-  },
-  '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
-    borderTopColor: tooltipBackground,
-    borderBottomColor: tooltipBackground,
-  },
-  '.dark & .cm-tooltip-autocomplete': {
-    '& > ul > li[aria-selected]': {
-      backgroundColor: highlightBackground,
-      color: ivory,
-    },
   },
+  // '.dark & .cm-tooltip': {
+  //   border: 'none',
+  //   backgroundColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+  //   borderTopColor: 'transparent',
+  //   borderBottomColor: 'transparent',
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+  //   borderTopColor: tooltipBackground,
+  //   borderBottomColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip-autocomplete': {
+  //   '& > ul > li[aria-selected]': {
+  //     backgroundColor: highlightBackground,
+  //     color: ivory,
+  //   },
+  // },
   '&.cm-focused': {
     outline: 'none',
   },
@@ -160,6 +168,13 @@ export const markdownTheme = {
   '& .cm-yLineSelection': {
     margin: '0',
   },
+  '.cm-link': {
+    color: 'rgb(20 89 208)',
+    textDecorationLine: 'underline',
+    textDecorationThickness: '1px',
+    textUnderlineOffset: '2px',
+    borderRadius: '.125rem',
+  },
   ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
     const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
     // 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.
@@ -170,7 +185,7 @@ export const markdownTheme = {
   }, {}),
 };
 
-export const markdownDarkHighlighting = HighlightStyle.define(
+export const markdownHighlightStyle = HighlightStyle.define(
   [
     {
       tag: [

package/src/components/RichText/RichText.stories.tsx

@@ -11,12 +11,14 @@ import { TextKind } from '@dxos/react-client/echo';
 import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { RichTextEditor, type RichTextEditorProps } from './RichText';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {
   component: RichTextEditor,
+  decorators: [withTheme],
 };
 
 export const Default = {