@dxos/react-ui-editor 0.3.9-main.3fcc0fa → 0.3.9-main.4584ca9

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;AAIhC,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,gBA6EpC,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

@@ -0,0 +1,39 @@
+import { EditorState, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import React, { type KeyboardEvent, type HTMLAttributes } from 'react';
+import { type StyleSpec } from 'style-mod';
+import { type EditorModel, type EditorSlots } from '../../model';
+export type CursorInfo = {
+    from: number;
+    to: number;
+    line: number;
+    lines: number;
+    after?: string;
+};
+export type TextEditorRef = {
+    editor: HTMLDivElement | null;
+    state?: EditorState;
+    view?: EditorView;
+};
+export type TextEditorProps = {
+    model?: EditorModel;
+    extensions?: Extension[];
+    theme?: {
+        [selector: string]: StyleSpec;
+    };
+    slots?: EditorSlots;
+    onKeyDown?: (event: KeyboardEvent, info: CursorInfo) => void;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'onBlur' | 'onFocus'>;
+/**
+ * Simple text editor.
+ */
+export declare const TextEditor: React.ForwardRefExoticComponent<{
+    model?: EditorModel | undefined;
+    extensions?: Extension[] | undefined;
+    theme?: {
+        [selector: string]: StyleSpec;
+    } | undefined;
+    slots?: EditorSlots | undefined;
+    onKeyDown?: ((event: KeyboardEvent, info: CursorInfo) => void) | undefined;
+} & Pick<React.HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur"> & React.RefAttributes<TextEditorRef>>;
+//# sourceMappingURL=TextEditor.d.ts.map

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

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

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

@@ -0,0 +1,32 @@
+import '@dxosTheme';
+import { HighlightStyle, StreamLanguage } from '@codemirror/language';
+import React from 'react';
+export declare const nameRegex: RegExp;
+/**
+ * Simple Monaco language extension.
+ * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
+ */
+export declare const promptLanguage: StreamLanguage<{
+    count: number;
+}>;
+/**
+ * https://codemirror.net/examples/styling
+ * https://lezer.codemirror.net/docs/ref/#highlight
+ */
+export declare const promptHighlightStyles: HighlightStyle;
+declare const _default: {
+    component: React.ForwardRefExoticComponent<{
+        model?: import("../../model").EditorModel | undefined;
+        extensions?: import("@codemirror/state").Extension[] | undefined;
+        theme?: {
+            [selector: string]: import("style-mod").StyleSpec;
+        } | undefined;
+        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;
+export declare const Default: {};
+//# sourceMappingURL=TextEditor.stories.d.ts.map

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

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

package/dist/types/src/components/TextEditor/extensions/hyperlink.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 hyperlink: Extension;
+//# sourceMappingURL=hyperlink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyperlink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlink.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;AA4C1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,SAAkD,CAAC"}

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

@@ -0,0 +1,9 @@
+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;
+export declare const defaultHyperLinkTooltip: 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":"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"}

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

@@ -0,0 +1,3 @@
+export * from './hyperlink';
+export * from './hyperlinkTooltip';
+//# 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,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}

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

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

@@ -0,0 +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;AAE7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,8 @@
+import { type StyleSpec } from 'style-mod';
+/**
+ * https://codemirror.net/examples/styling
+ */
+export declare const defaultStyles: {
+    [selector: string]: StyleSpec;
+};
+//# sourceMappingURL=theme.d.ts.map

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

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

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

@@ -1,4 +1,5 @@
 export * from './Editor';
 export * from './Markdown';
 export * from './RichText';
+export * from './TextEditor';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/types/src/testing/replicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAM7C;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAmB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAIzE,CAAC"}
+{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAM7C;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAmB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAGzE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.9-main.3fcc0fa",
+  "version": "0.3.9-main.4584ca9",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,6 +27,7 @@
     "@lezer/common": "^1.1.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.1.1",
+    "@phosphor-icons/react": "^2.0.5",
     "@replit/codemirror-vim": "^6.0.14",
     "@tiptap/core": "2.0.0-beta.220",
     "@tiptap/extension-collaboration": "2.0.0-beta.220",
@@ -43,19 +44,20 @@
     "prosemirror-model": "^1.19.0",
     "prosemirror-state": "^1.4.2",
     "prosemirror-view": "^1.30.1",
+    "style-mod": "^4.1.0",
     "y-codemirror.next": "^0.3.2",
     "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
-    "yjs": "^13.6.8",
-    "@dxos/display-name": "0.3.9-main.3fcc0fa",
-    "@dxos/debug": "0.3.9-main.3fcc0fa",
-    "@dxos/log": "0.3.9-main.3fcc0fa",
-    "@dxos/protocols": "0.3.9-main.3fcc0fa",
-    "@dxos/react-async": "0.3.9-main.3fcc0fa",
-    "@dxos/react-ui-theme": "0.3.9-main.3fcc0fa",
-    "@dxos/text-model": "0.3.9-main.3fcc0fa",
-    "@dxos/react-ui": "0.3.9-main.3fcc0fa",
-    "@dxos/util": "0.3.9-main.3fcc0fa"
+    "yjs": "^13.6.10",
+    "@dxos/debug": "0.3.9-main.4584ca9",
+    "@dxos/display-name": "0.3.9-main.4584ca9",
+    "@dxos/react-ui": "0.3.9-main.4584ca9",
+    "@dxos/log": "0.3.9-main.4584ca9",
+    "@dxos/protocols": "0.3.9-main.4584ca9",
+    "@dxos/react-async": "0.3.9-main.4584ca9",
+    "@dxos/react-ui-theme": "0.3.9-main.4584ca9",
+    "@dxos/text-model": "0.3.9-main.4584ca9",
+    "@dxos/util": "0.3.9-main.4584ca9"
   },
   "devDependencies": {
     "@codemirror/basic-setup": "^0.20.0",
@@ -65,16 +67,18 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.9-main.3fcc0fa",
-    "@dxos/automerge": "0.3.9-main.3fcc0fa",
-    "@dxos/echo-schema": "0.3.9-main.3fcc0fa",
-    "@dxos/react-client": "0.3.9-main.3fcc0fa",
-    "@dxos/echo-typegen": "0.3.9-main.3fcc0fa"
+    "@dxos/config": "0.3.9-main.4584ca9",
+    "@dxos/automerge": "0.3.9-main.4584ca9",
+    "@dxos/echo-schema": "0.3.9-main.4584ca9",
+    "@dxos/echo-typegen": "0.3.9-main.4584ca9",
+    "@dxos/react-client": "0.3.9-main.4584ca9",
+    "@dxos/storybook-utils": "0.3.9-main.4584ca9"
   },
   "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.9-main.3fcc0fa"
+    "@dxos/react-client": "0.3.9-main.4584ca9"
   },
   "publishConfig": {
     "access": "public"

package/src/automerge/automerge-plugin/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { plugin } from './plugin';
+export { plugin, reconcile } from './plugin';
 export { PatchSemaphore } from './PatchSemaphore';

package/src/automerge/automerge.stories.tsx

@@ -8,8 +8,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { type Prop, next as automerge } from '@dxos/automerge/automerge';
 
-import { plugin as amgPlugin } from './automerge-plugin';
-import { reconcile } from './automerge-plugin/plugin';
+import { plugin as amgPlugin, reconcile } from './automerge-plugin';
 import { Peer } from './demo';
 
 type EditorProps = {

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

@@ -11,15 +11,17 @@ 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, ...args }: Pick<EditorProps, 'slots'> & { spaceKey: PublicKey }) => {
+const Story = ({ spaceKey, ...params }: Pick<EditorProps, 'slots'> & { spaceKey: PublicKey }) => {
   const [generate, setGenerate] = useState(false);
   const generateId = useId('generate');
 
@@ -39,7 +41,7 @@ const Story = ({ spaceKey, ...args }: Pick<EditorProps, 'slots'> & { spaceKey: P
         Generate Data
       </div>
       {document?.content.toString().length}
-      <Editor identity={identity} space={space} text={document?.content} {...args} />
+      <Editor identity={identity} space={space} text={document?.content} {...params} />
     </main>
   );
 };

package/src/components/Editor/Editor.tsx

@@ -22,8 +22,8 @@ export type EditorProps = UseTextModelOptions & {
 // NOTE: Without `memo`, if parent component uses `observer` the editor re-renders excessively.
 // TODO(wittjosiah): Factor out?
 export const Editor = memo(
-  forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...options }, forwardedRef) => {
-    const model = useTextModel(options);
+  forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...params }, forwardedRef) => {
+    const model = useTextModel(params);
     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,12 +10,14 @@ 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],
 };
 
 export const Default = {
@@ -28,6 +30,7 @@ export const Default = {
 };
 
 const replicator = new Replicator(TextKind.PLAIN);
+
 export const WithYjs = {
   render: () => {
     const [generate, setGenerate] = useState(false);

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,
@@ -58,6 +58,7 @@ export type MarkdownEditorProps = {
   model?: EditorModel;
   slots?: EditorSlots;
   editorMode?: EditorMode;
+  extensions?: Extension[];
   onChange?: (content: string | Text) => void;
 };
 
@@ -68,7 +69,7 @@ export type MarkdownEditorRef = {
 };
 
 export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ model, slots = {}, onChange, editorMode }, forwardedRef) => {
+  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
     const { id, content, provider, peer } = model ?? {};
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -148,7 +149,8 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
             indentWithTab,
           ]),
           EditorView.lineWrapping,
-          // Theme
+
+          // Themes.
           markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
           EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
           ...(themeMode === 'dark'
@@ -157,8 +159,11 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
           // TODO(thure): All but one rule here apply to both themes; rename or refactor.
           syntaxHighlighting(markdownDarkHighlighting),
 
-          // Collaboration
+          // Replication and awareness (incl. remote selection).
           ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
+
+          // Custom.
+          ...extensions,
         ],
       });
 
@@ -178,15 +183,18 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
     }, [parent, content, provider?.awareness, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
-      ({ key, altKey, shiftKey, metaKey, ctrlKey }: KeyboardEvent) => {
+      (event: KeyboardEvent) => {
+        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          case 'Enter':
+          case 'Enter': {
             view?.contentDOM.focus();
             break;
+          }
 
-          case 'Escape':
+          case 'Escape': {
             editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
             break;
+          }
         }
       },
       [view, editorMode],
@@ -195,11 +203,11 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
     return (
       <div
         tabIndex={0}
+        ref={setParent}
         key={id}
         {...slots.root}
-        onKeyUp={handleKeyUp}
         {...(editorMode !== 'vim' ? tabsterDOMAttribute : {})}
-        ref={setParent}
+        onKeyUp={handleKeyUp}
       />
     );
   },

package/src/components/Markdown/markdownTheme.ts

@@ -71,24 +71,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',
   },

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 = {

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { HighlightStyle, StreamLanguage } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import React, { useState } from 'react';
+
+import { TextObject } from '@dxos/echo-schema';
+import { fixedInsetFlexLayout, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextEditor } from './TextEditor';
+import { defaultHyperLinkTooltip, hyperlink } from './extensions';
+import { useTextModel } from '../../model';
+
+export const nameRegex = /\{([\w_]+)}/;
+
+/**
+ * Simple Monaco language extension.
+ * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
+ */
+export const promptLanguage = StreamLanguage.define<{ count: number }>({
+  startState: () => ({ count: 0 }),
+
+  token: (stream, state) => {
+    state.count++;
+    if (stream.eatSpace()) {
+      return null;
+    }
+    if (stream.match(/^(<\w+>)/)) {
+      return 'tagName';
+    }
+    stream.next();
+    return null;
+  },
+});
+
+/**
+ * https://codemirror.net/examples/styling
+ * https://lezer.codemirror.net/docs/ref/#highlight
+ */
+export const promptHighlightStyles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: mx(
+      'mr-1 p-1',
+      'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-mono text-sm',
+      'rounded border border-neutral-300 dark:border-neutral-700',
+    ),
+  },
+]);
+
+const Story = () => {
+  const [item] = useState({
+    text: new TextObject(
+      '\n\n\nThis is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).\n\n\n',
+    ),
+  });
+
+  const model = useTextModel({ text: item.text });
+
+  return (
+    <div className={mx(fixedInsetFlexLayout, groupSurface, 'p-4 gap-4')}>
+      <TextEditor
+        model={model}
+        slots={{ root: { className: mx(inputSurface, 'p-2') } }}
+        extensions={[hyperlink, defaultHyperLinkTooltip]}
+      />
+      <pre>{JSON.stringify(model?.content?.toString(), null, 2)}</pre>
+    </div>
+  );
+};
+
+export default {
+  component: TextEditor,
+  decorators: [withTheme],
+  render: Story,
+};
+
+export const Default = {};