@dxos/react-ui-editor 0.3.9-main.2b2db7f → 0.3.9-main.2dc53cf

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.9-main.2b2db7f",
+  "version": "0.3.9-main.2dc53cf",
   "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.10",
-    "@dxos/debug": "0.3.9-main.2b2db7f",
-    "@dxos/display-name": "0.3.9-main.2b2db7f",
-    "@dxos/log": "0.3.9-main.2b2db7f",
-    "@dxos/react-async": "0.3.9-main.2b2db7f",
-    "@dxos/react-ui": "0.3.9-main.2b2db7f",
-    "@dxos/react-ui-theme": "0.3.9-main.2b2db7f",
-    "@dxos/text-model": "0.3.9-main.2b2db7f",
-    "@dxos/util": "0.3.9-main.2b2db7f",
-    "@dxos/protocols": "0.3.9-main.2b2db7f"
+    "@dxos/debug": "0.3.9-main.2dc53cf",
+    "@dxos/display-name": "0.3.9-main.2dc53cf",
+    "@dxos/log": "0.3.9-main.2dc53cf",
+    "@dxos/react-ui": "0.3.9-main.2dc53cf",
+    "@dxos/protocols": "0.3.9-main.2dc53cf",
+    "@dxos/react-async": "0.3.9-main.2dc53cf",
+    "@dxos/react-ui-theme": "0.3.9-main.2dc53cf",
+    "@dxos/util": "0.3.9-main.2dc53cf",
+    "@dxos/text-model": "0.3.9-main.2dc53cf"
   },
   "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.2b2db7f",
-    "@dxos/automerge": "0.3.9-main.2b2db7f",
-    "@dxos/echo-typegen": "0.3.9-main.2b2db7f",
-    "@dxos/react-client": "0.3.9-main.2b2db7f",
-    "@dxos/echo-schema": "0.3.9-main.2b2db7f"
+    "@dxos/config": "0.3.9-main.2dc53cf",
+    "@dxos/echo-typegen": "0.3.9-main.2dc53cf",
+    "@dxos/react-client": "0.3.9-main.2dc53cf",
+    "@dxos/storybook-utils": "0.3.9-main.2dc53cf",
+    "@dxos/echo-schema": "0.3.9-main.2dc53cf",
+    "@dxos/automerge": "0.3.9-main.2dc53cf"
   },
   "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.9-main.2b2db7f"
+    "@dxos/react-client": "0.3.9-main.2dc53cf"
   },
   "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,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/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 = {

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 = {}, editorMode, onChange }, forwardedRef) => {
+  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
     const { id, content, provider, peer } = model ?? {};
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -160,6 +161,9 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
 
           // Replication and awareness (incl. remote selection).
           ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
+
+          // Custom.
+          ...extensions,
         ],
       });
 

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

package/src/components/TextEditor/TextEditor.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorState, type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { EditorView, placeholder } from '@codemirror/view';
+import React, {
+  type KeyboardEvent,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  type HTMLAttributes,
+} from 'react';
+import { type StyleSpec } from 'style-mod';
+import { yCollab } from 'y-codemirror.next';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { YText } from '@dxos/text-model';
+
+import { defaultStyles } from './theme';
+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 const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
+    const { id, content } = model ?? {};
+    const { themeMode } = useThemeContext();
+
+    const [parent, setParent] = useState<HTMLDivElement | null>(null);
+    const [state, setState] = useState<EditorState>();
+    const [view, setView] = useState<EditorView>();
+
+    // TODO(burdon): The ref may be instantiated before the view is created.
+    useImperativeHandle(
+      forwardedRef,
+      () => {
+        return {
+          editor: parent,
+          state,
+          view,
+        };
+      },
+      [view],
+    );
+
+    useEffect(() => {
+      if (!parent) {
+        return;
+      }
+
+      view?.destroy();
+
+      const state = EditorState.create({
+        doc: content?.toString(),
+        extensions: [
+          bracketMatching(),
+          closeBrackets(),
+          placeholder(slots.editor?.placeholder ?? ''),
+          EditorView.lineWrapping,
+
+          // Themes.
+          EditorView.theme(theme),
+          ...(themeMode === 'dark'
+            ? [syntaxHighlighting(oneDarkHighlightStyle)]
+            : [syntaxHighlighting(defaultHighlightStyle)]),
+
+          // Replication.
+          ...(content instanceof YText ? [yCollab(content, undefined)] : []),
+
+          // Custom.
+          ...extensions,
+        ],
+      });
+
+      setState(state);
+      setView(new EditorView({ state, parent }));
+
+      return () => {
+        view?.destroy();
+        setView(undefined);
+        setState(undefined);
+      };
+    }, [parent, content, themeMode]);
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent) => {
+        if (view) {
+          const { head, from, to } = view.state.selection.ranges[0];
+          const { number } = view.state.doc.lineAt(head);
+          const after = view.state.sliceDoc(from);
+          onKeyDown?.(event, { from, to, line: number, lines: view.state.doc.lines, after });
+        }
+      },
+      [view],
+    );
+
+    return <div key={id} ref={setParent} {...slots.root} onKeyDown={handleKeyDown} {...props} />;
+  },
+);