@dxos/react-ui-editor 0.3.3-main.1b7ca63

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

@@ -0,0 +1,3 @@
+export * from './proto';
+export * from './replicator';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/types/src/testing/proto/gen/schema.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @generated @dxos/echo-typegen src/testing/proto/schema.proto
+ **/
+import * as dxos_echo_schema from "@dxos/echo-schema";
+export declare const types: dxos_echo_schema.TypeCollection;
+export type ComposerDocumentProps = {
+    content: dxos_echo_schema.Text;
+};
+export declare class ComposerDocument extends dxos_echo_schema.TypedObject<ComposerDocumentProps> {
+    static readonly schema: dxos_echo_schema.Schema;
+    static filter(opts?: Partial<ComposerDocumentProps>): dxos_echo_schema.TypeFilter<ComposerDocument>;
+    constructor(initValues?: Partial<ComposerDocumentProps>, opts?: dxos_echo_schema.TypedObjectOptions);
+    content: dxos_echo_schema.Text;
+}
+//# sourceMappingURL=schema.d.ts.map

package/dist/types/src/testing/proto/gen/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../../../src/testing/proto/gen/schema.ts"],"names":[],"mappings":"AAAA;;IAEI;AAEJ,OAAO,KAAK,gBAAgB,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,KAAK,iCAAwC,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC;CAChC,CAAC;AAEF,qBAAa,gBAAiB,SAAQ,gBAAgB,CAAC,WAAW,CAAC,qBAAqB,CAAC;IACvF,gBAAwB,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAExD,MAAM,CAAC,MAAM,CACX,IAAI,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,GACpC,gBAAgB,CAAC,UAAU,CAAC,gBAAgB,CAAC;gBAQ9C,UAAU,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,EAC3C,IAAI,CAAC,EAAE,gBAAgB,CAAC,kBAAkB;IAIpC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC;CACxC"}

package/dist/types/src/testing/proto/index.d.ts

@@ -0,0 +1,2 @@
+export * from './gen/schema';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/proto/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/proto/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,45 @@
+import { Observable } from 'lib0/observable';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import { Doc } from 'yjs';
+import { Event } from '@dxos/async';
+import { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
+import { type ComposerModel } from '../model';
+type Awareness = awarenessProtocol.Awareness;
+/**
+ * Yjs awareness provider in-memory.
+ */
+export declare class AwarenessProvider extends Observable<any> {
+    private readonly _remoteUpdate;
+    private readonly _awareness;
+    private readonly _doc;
+    constructor({ update, doc, awareness }: {
+        update: Event<Uint8Array>;
+        doc: Doc;
+        awareness?: Awareness;
+    });
+    get awareness(): Awareness;
+    private _handleDocUpdate;
+    private _handleAwarenessUpdate;
+    private _handleRemoteUpdate;
+    private _readMessage;
+    private _handleBeforeUnload;
+}
+/**
+ * This mocks the replication across the swarm.
+ */
+export declare class Replicator {
+    private readonly _kind;
+    private readonly _update;
+    private _peers;
+    constructor(_kind: TextKind);
+    setPeers(peers: ComposerModel[]): void;
+    createPeer: (id: string, doc?: Doc) => ComposerModel;
+}
+export type UseYjsModelOptions = {
+    replicator: Replicator;
+    id: string;
+    doc?: Doc;
+};
+export declare const useYjsModel: ({ replicator, id, doc }: UseYjsModelOptions) => ComposerModel;
+export {};
+//# sourceMappingURL=replicator.d.ts.map

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

@@ -0,0 +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,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,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,CAAuB;gBAER,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE;IAI/B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,aAAa,CAmB5D;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,aAIzE,CAAC"}

package/dist/types/src/yjs/cursors.d.ts

@@ -0,0 +1,5 @@
+export declare const cursorColor: {
+    color: string;
+    light: string;
+};
+//# sourceMappingURL=cursors.d.ts.map

package/dist/types/src/yjs/cursors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/yjs/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './cursors';
+export * from './space-provider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/yjs/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/types/src/yjs/space-provider.d.ts

@@ -0,0 +1,27 @@
+import { Observable } from 'lib0/observable';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import { type Doc } from 'yjs';
+import { type Space } from '@dxos/react-client/echo';
+type Awareness = awarenessProtocol.Awareness;
+/**
+ * Yjs awareness provider on top of a DXOS space.
+ */
+export declare class SpaceAwarenessProvider extends Observable<any> {
+    private readonly _space;
+    private readonly _awareness;
+    private readonly _clientId;
+    private readonly _channel;
+    constructor({ space, doc, channel, awareness }: {
+        space: Space;
+        doc: Doc;
+        channel: string;
+        awareness?: Awareness;
+    });
+    get awareness(): Awareness;
+    private _handleAwarenessUpdate;
+    private _handleSpaceMessage;
+    private _readMessage;
+    private _handleBeforeUnload;
+}
+export {};
+//# sourceMappingURL=space-provider.d.ts.map

package/dist/types/src/yjs/space-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"space-provider.d.ts","sourceRoot":"","sources":["../../../../src/yjs/space-provider.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAO7C;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BlH,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;CAG5B"}

package/dist/types/stories/html/code-mirror.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/html';
+import { Client, PublicKey } from '@dxos/react-client';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: StoryObj<{
+    id: number;
+    client: Client;
+    spaceKey: PublicKey;
+}>;
+//# sourceMappingURL=code-mirror.stories.d.ts.map

package/dist/types/stories/html/code-mirror.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-mirror.stories.d.ts","sourceRoot":"","sources":["../../../../stories/html/code-mirror.stories.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;AASvD,wBAEE;AAoEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAoBjF,CAAC"}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@dxos/react-ui-editor",
+  "version": "0.3.3-main.1b7ca63",
+  "description": "Document editing experience within a DXOS shell.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/lib/browser/index.mjs",
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.4.2",
+    "@codemirror/commands": "^6.2.2",
+    "@codemirror/lang-markdown": "^6.1.0",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/language-data": "^6.1.0",
+    "@codemirror/lint": "^6.2.0",
+    "@codemirror/search": "^6.3.0",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/theme-one-dark": "^6.1.1",
+    "@codemirror/view": "^6.9.2",
+    "@fluentui/react-tabster": "^9.12.0",
+    "@lezer/common": "^1.0.2",
+    "@lezer/highlight": "^1.1.3",
+    "@lezer/markdown": "^1.0.2",
+    "@replit/codemirror-vim": "^6.0.14",
+    "@tiptap/core": "2.0.0-beta.220",
+    "@tiptap/extension-collaboration": "2.0.0-beta.220",
+    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.220",
+    "@tiptap/extension-heading": "2.0.0-beta.220",
+    "@tiptap/extension-list-item": "2.0.0-beta.220",
+    "@tiptap/extension-placeholder": "2.0.0-beta.220",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/react": "2.0.0-beta.220",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
+    "codemirror": "^6.0.1",
+    "lib0": "^0.2.65",
+    "lodash.get": "^4.4.2",
+    "prosemirror-model": "^1.19.0",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-view": "^1.30.1",
+    "y-codemirror.next": "^0.3.2",
+    "y-prosemirror": "~1.0.20",
+    "y-protocols": "^1.0.5",
+    "yjs": "^13.6.7",
+    "@dxos/debug": "0.3.3-main.1b7ca63",
+    "@dxos/display-name": "0.3.3-main.1b7ca63",
+    "@dxos/log": "0.3.3-main.1b7ca63",
+    "@dxos/protocols": "0.3.3-main.1b7ca63",
+    "@dxos/react-async": "0.3.3-main.1b7ca63",
+    "@dxos/react-ui": "0.3.3-main.1b7ca63",
+    "@dxos/react-ui-theme": "0.3.3-main.1b7ca63",
+    "@dxos/text-model": "0.3.3-main.1b7ca63",
+    "@dxos/util": "0.3.3-main.1b7ca63"
+  },
+  "devDependencies": {
+    "@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/config": "0.3.3-main.1b7ca63",
+    "@dxos/echo-schema": "0.3.3-main.1b7ca63",
+    "@dxos/echo-typegen": "0.3.3-main.1b7ca63",
+    "@dxos/react-client": "0.3.3-main.1b7ca63"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@dxos/react-client": "0.3.3-main.1b7ca63"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "dxtype src/testing/proto/schema.proto src/testing/proto/gen/schema.ts"
+  }
+}

package/src/components/Composer/Composer.stories.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useState } from 'react';
+
+import { type PublicKey } from '@dxos/react-client';
+import { Text, TextKind, useQuery, useSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { ClientDecorator, setupPeersInSpace, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { useId } from '@dxos/react-ui';
+
+import { Composer, type ComposerProps } from './Composer';
+import { ComposerDocument, types as schema } from '../../testing';
+
+export default {
+  component: Composer,
+};
+
+const Story = ({ spaceKey, ...args }: Pick<ComposerProps, 'slots'> & { spaceKey: PublicKey }) => {
+  const [generate, setGenerate] = useState(false);
+  const generateId = useId('generate');
+
+  const identity = useIdentity();
+  const space = useSpace(spaceKey);
+  const [document] = useQuery(space, ComposerDocument.filter());
+
+  useDataGenerator({
+    generator: generate ? textGenerator : undefined,
+    options: { text: document?.content.content },
+  });
+
+  return (
+    <main className='flex-1 min-w-0 p-4'>
+      <div id={generateId} className='flex'>
+        <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
+        Generate Data
+      </div>
+      {document?.content.toString().length}
+      <Composer identity={identity} space={space} text={document?.content} {...args} />
+    </main>
+  );
+};
+
+const { spaceKey: markdownSpaceKey, clients: markdownClients } = await setupPeersInSpace({
+  count: 2,
+  schema,
+  onCreateSpace: async (space) => {
+    const document = new ComposerDocument({ content: new Text('Hello, Storybook!') });
+    await space?.db.add(document);
+  },
+});
+
+export const Markdown = {
+  render: (args: { id: number }) => <Story {...args} spaceKey={markdownSpaceKey} />,
+  decorators: [ClientDecorator({ clients: markdownClients })],
+};
+
+const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace({
+  count: 2,
+  schema,
+  onCreateSpace: async (space) => {
+    const document = new ComposerDocument({ content: new Text('Hello, Storybook!', TextKind.RICH) });
+    await space?.db.add(document);
+  },
+});
+
+export const Rich = {
+  render: (args: { id: number }) => <Story {...args} spaceKey={richSpaceKey} />,
+  args: {
+    slots: {
+      editor: {
+        className: 'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
+      },
+    },
+  },
+  decorators: [ClientDecorator({ clients: richClients })],
+};

package/src/components/Composer/Composer.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef, memo, type Ref } from 'react';
+
+import { YXmlFragment } from '@dxos/text-model';
+
+import { type ComposerSlots, useTextModel, type UseTextModelOptions } from '../../model';
+import { MarkdownComposer, type MarkdownComposerRef } from '../Markdown';
+import { RichTextComposer, type TipTapEditor } from '../RichText';
+
+export type ComposerProps = UseTextModelOptions & {
+  slots?: ComposerSlots;
+};
+
+/**
+ * Memoized composer which depends DXOS platform.
+ *
+ * Determines which composer to render based on the kind of text.
+ */
+// NOTE: Without `memo`, if parent component uses `observer` the composer re-renders excessively.
+// TODO(wittjosiah): Factor out?
+export const Composer = memo(
+  forwardRef<TipTapEditor | MarkdownComposerRef, ComposerProps>(({ slots, ...options }, forwardedRef) => {
+    const model = useTextModel(options);
+    if (model?.content instanceof YXmlFragment) {
+      return <RichTextComposer ref={forwardedRef as Ref<TipTapEditor>} model={model} slots={slots} />;
+    } else {
+      return <MarkdownComposer ref={forwardedRef as Ref<MarkdownComposerRef>} model={model} slots={slots} />;
+    }
+  }),
+);

package/src/components/Composer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Composer';

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

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useState } from 'react';
+
+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 { MarkdownComposer } from './Markdown';
+import { Replicator, useYjsModel } from '../../testing';
+
+export default {
+  component: MarkdownComposer,
+};
+
+export const Default = {
+  args: {
+    model: {
+      id: 'editor',
+      content: 'Hello, Storybook!',
+    },
+  },
+};
+
+const replicator = new Replicator(TextKind.PLAIN);
+export const WithYjs = {
+  render: () => {
+    const [generate, setGenerate] = useState(false);
+    const generateId = useId('generate');
+
+    const [id] = useState(PublicKey.random().toHex());
+    const model = useYjsModel({ id, replicator });
+
+    useDataGenerator({
+      generator: generate ? textGenerator : undefined,
+      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
+    });
+
+    return (
+      <main className='flex-1 min-w-0 p-4'>
+        <div id={generateId} className='flex'>
+          <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
+          Generate Data
+        </div>
+        <MarkdownComposer model={model} />
+      </main>
+    );
+  },
+  // TODO(wittjosiah): Decorator for doing this without clients being initialized?
+  decorators: [ClientDecorator({ count: 2 })],
+};

package/src/components/Markdown/Markdown.tsx

@@ -0,0 +1,240 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language';
+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 { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import {
+  keymap,
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  placeholder,
+  rectangularSelection,
+  EditorView,
+} from '@codemirror/view';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { vim } from '@replit/codemirror-vim';
+import React, {
+  type KeyboardEvent,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
+import { yCollab } from 'y-codemirror.next';
+
+import { generateName } from '@dxos/display-name';
+import { useThemeContext } from '@dxos/react-ui';
+import { configColors } from '@dxos/react-ui-theme';
+import { YText } from '@dxos/text-model';
+
+import { markdownTagsExtension } from './markdownTags';
+import { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
+import { type ComposerModel, type ComposerSlots } from '../../model';
+
+export const EditorModes = ['default', 'vim'] as const;
+export type EditorMode = (typeof EditorModes)[number];
+
+export type MarkdownComposerProps = {
+  model?: ComposerModel;
+  slots?: ComposerSlots;
+  editorMode?: EditorMode;
+  onChange?: (content: string | Text) => void;
+};
+
+export type MarkdownComposerRef = {
+  editor: HTMLDivElement | null;
+  state?: EditorState;
+  view?: EditorView;
+};
+
+const hexadecimalPaletteSeries: (keyof typeof configColors)[] = [
+  'red' as const,
+  'orange' as const,
+  'amber' as const,
+  'yellow' as const,
+  'lime' as const,
+  'green' as const,
+  'emerald' as const,
+  'teal' as const,
+  'cyan' as const,
+  'sky' as const,
+  'indigo' as const,
+  'violet' as const,
+  'purple' as const,
+  'fuchsia' as const,
+  'pink' as const,
+  'rose' as const,
+];
+
+const shadeKeys = {
+  color: '450' as const,
+  highlightDark: '800' as const,
+  highlightLight: '100' as const,
+};
+
+export const MarkdownComposer = forwardRef<MarkdownComposerRef, MarkdownComposerProps>(
+  ({ model, slots = {}, onChange, editorMode }, forwardedRef) => {
+    const { id, content, provider, peer } = model ?? {};
+    const { themeMode } = useThemeContext();
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+
+    const [parent, setParent] = useState<HTMLDivElement | null>(null);
+    const [state, setState] = useState<EditorState>();
+    const [view, setView] = useState<EditorView>();
+
+    useImperativeHandle(forwardedRef, () => ({
+      editor: parent,
+      state,
+      view,
+    }));
+
+    const listenChangesExtension = useMemo(
+      () =>
+        StateField.define({
+          create: () => null,
+          update: (_value, transaction) => {
+            if (transaction.docChanged && onChange) {
+              onChange(transaction.newDoc);
+            }
+            return null;
+          },
+        }),
+      [onChange],
+    );
+
+    useEffect(() => {
+      if (provider && peer) {
+        let peerColorDigit = Math.floor(16 * Math.random());
+        try {
+          // TODO(wittjosiah): Factor out for use w/ html-only story and RichText component.
+          // `peer.id` is already a `string`, so we attempt `parseInt` within a `try` since we can’t be certain it is hexadecimal.
+          peerColorDigit = parseInt(peer.id.slice(-1), 16);
+        } catch (_) {}
+        provider.awareness.setLocalStateField('user', {
+          name: peer.name ?? generateName(peer.id),
+          color: configColors[hexadecimalPaletteSeries[peerColorDigit]][shadeKeys.color],
+          colorLight:
+            configColors[hexadecimalPaletteSeries[peerColorDigit]][
+              shadeKeys[themeMode === 'dark' ? 'highlightDark' : 'highlightLight']
+            ],
+        });
+      }
+    }, [provider, peer, themeMode]);
+
+    useEffect(() => {
+      if (!parent) {
+        return;
+      }
+
+      const state = EditorState.create({
+        doc: content?.toString(),
+        extensions: [
+          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
+          listenChangesExtension,
+
+          ...(editorMode === 'vim' ? [vim()] : []),
+
+          // 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 }),
+          bracketMatching(),
+          closeBrackets(),
+          autocompletion(),
+          rectangularSelection(),
+          crosshairCursor(),
+          highlightActiveLine(),
+          highlightSelectionMatches(),
+          placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
+          keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...searchKeymap,
+            ...historyKeymap,
+            ...foldKeymap,
+            ...completionKeymap,
+            ...lintKeymap,
+            indentWithTab,
+          ]),
+          EditorView.lineWrapping,
+          // Theme
+          markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
+          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),
+
+          // Collaboration
+          ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
+        ],
+      });
+
+      setState(state);
+
+      // NOTE: This repaints the editor.
+      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
+      // Ideally this should not be hit except when changing between text objects.
+      view?.destroy();
+      setView(new EditorView({ state, parent }));
+
+      return () => {
+        view?.destroy();
+        setView(undefined);
+        setState(undefined);
+      };
+    }, [parent, content, provider?.awareness, themeMode, editorMode]);
+
+    const handleKeyUp = useCallback(
+      ({ key, altKey, shiftKey, metaKey, ctrlKey }: KeyboardEvent) => {
+        switch (key) {
+          case 'Enter':
+            view?.contentDOM.focus();
+            break;
+
+          case 'Escape':
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+            break;
+        }
+      },
+      [view, editorMode],
+    );
+
+    return (
+      <div
+        tabIndex={0}
+        key={id}
+        {...slots.root}
+        onKeyUp={handleKeyUp}
+        {...(editorMode !== 'vim' ? tabsterDOMAttribute : {})}
+        ref={setParent}
+      />
+    );
+  },
+);

package/src/components/Markdown/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Markdown';