@dxos/react-ui-editor 0.3.9-next.4584ca9 → 0.3.9-next.8ad58eb

package/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.ts

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright CodeMirror
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+
+// Adapted from:
+// https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
+// https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
+
+// TODO(burdon): Adapt to make all markdown editable?
+
+// TODO(burdon): Research overlays.
+//  https://stackoverflow.com/questions/26933344/codemirror-detect-and-create-links-inside-editor
+//  https://codemirror.net/5/doc/manual.html#addOverlay
+//  https://codemirror.net/5/demo/simplemode.html
+//  https://codemirror.net/5/demo/search.html (Search dialog).
+
+class Link extends WidgetType {
+  constructor(private readonly _anchor: number, private readonly _text: string, private readonly _url?: string) {
+    super();
+  }
+
+  override eq(other: any) {
+    return this._text === other.text && this._url === other.url;
+  }
+
+  toDOM(view: EditorView) {
+    const link = document.createElement('a');
+    link.setAttribute('class', 'cm-link');
+    link.textContent = this._text;
+    if (this._url) {
+      link.setAttribute('target', '_blank');
+      link.href = this._url;
+    } else {
+      link.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: this._anchor,
+          },
+        });
+      };
+    }
+
+    return link;
+  }
+}
+
+type HyperlinkDecorationConfig = {
+  link?: boolean;
+};
+
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export const hyperlinkDecoration = ({ link }: HyperlinkDecorationConfig = {}) => {
+  return StateField.define<RangeSet<any>>({
+    create: (state) => update(state, link),
+    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, link),
+    provide: (field) => EditorView.decorations.from(field),
+  });
+};
+
+const update = (state: EditorState, link?: boolean) => {
+  const builder = new RangeSetBuilder();
+  const cursor = state.selection.main.head;
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      // Check if cursor is inside text.
+      if (cursor < node.from || cursor > node.to) {
+        if (node.name === 'Link') {
+          const marks = node.node.getChildren('LinkMark');
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
+
+          const urlNode = node.node.getChild('URL');
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              widget: new Link(node.from, text, link ? url : undefined),
+            }),
+          );
+
+          return false;
+        }
+      }
+
+      return true;
+    },
+  });
+
+  return builder.finish();
+};

package/src/components/TextEditor/extensions/{hyperlinkTooltip.tsx → hyperlink/hyperlinkTooltip.tsx}

@@ -3,11 +3,8 @@
 //
 
 import { hoverTooltip } from '@codemirror/view';
-import { ArrowCircleUp } from '@phosphor-icons/react';
-import React, { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
 
-import { getSize, mx, tooltipContent } from '@dxos/react-ui-theme';
+import { tooltipContent } from '@dxos/react-ui-theme';
 
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 
@@ -18,6 +15,7 @@ export type OnHyperlinkHover = (el: Element, url: string) => void;
  * https://codemirror.net/docs/ref/#view.hoverTooltip
  * https://github.com/codemirror/view/blob/main/src/tooltip.ts
  */
+// TODO(burdon): Create config object.
 export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
   hoverTooltip((view, pos) => {
     const { from, text } = view.state.doc.lineAt(pos);
@@ -61,16 +59,3 @@ export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markd
       },
     };
   });
-
-// TODO(burdon): Factor out (remove theme/icon deps)?
-export const defaultHyperLinkTooltip = createHyperlinkTooltip((el, url) => {
-  const web = new URL(url);
-  createRoot(el).render(
-    <StrictMode>
-      <div className='flex gap-1 items-center'>
-        <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
-        <p className='pr-1'>{web.origin}</p>
-      </div>
-    </StrictMode>,
-  );
-});

package/src/components/TextEditor/extensions/{hyperlink.tsx → hyperlink/hyperlinkWidget.tsx}

@@ -15,14 +15,20 @@ import {
 
 // Notes: Can't edit widget content (or cursor nav through them).
 // - https://discuss.codemirror.net/t/focusing-inputs-within-widgets/5178/7
-//   Widgets intentionally always get set to contenteditable=false, or they would become part of CodeMirror’s editable content element.
+//   Widgets intentionally always get set to contenteditable=false,
+//   or they would become part of CodeMirror’s editable content element.
 //   You should be able to introduce new contenteditable=true child elements inside of them.
 
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 
+/**
+ * Custom link decorator.
+ * NOTE: The default markdown extension formats links by default.
+ * @deprecated
+ */
 const linkDecorator = () =>
   new MatchDecorator({
-    regexp: markdownLinkRegexp, // regexp || defaultRegexp,
+    regexp: markdownLinkRegexp,
     decorate: (add, from, to, match, view) => {
       const [_, label, url] = match;
       const p0 = {
@@ -45,16 +51,21 @@ const linkDecorator = () =>
         end: p1.end + 1 + url.length + 2,
       };
 
-      // TODO(burdon): Wrap with tagName?
-      add(p0.start, p0.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
+      add(
+        p0.start,
+        p0.end,
+        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
+      );
       add(p1.start, p1.end, Decoration.mark({ class: 'cm-hyperlink-label' }));
-      add(p2.start, p2.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
-      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', __attributes: { style: 'display: none' } }));
+      add(
+        p2.start,
+        p2.end,
+        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
+      );
+      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', _attributes: { style: 'display: none' } }));
     },
   });
 
-// const anchor = (dom: HTMLAnchorElement) => dom;
-
 export function hyperLinkExtension() {
   return ViewPlugin.fromClass(
     class HyperLinkView {
@@ -91,7 +102,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const hyperLinkStyle = EditorView.baseTheme({
+export const hyperlinkStyle = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -105,4 +116,4 @@ export const hyperLinkStyle = EditorView.baseTheme({
   },
 });
 
-export const hyperlink: Extension = [hyperLinkExtension(), hyperLinkStyle];
+export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];

package/src/components/TextEditor/extensions/hyperlink/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './hyperlinkDecoration';
+export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';

package/src/components/TextEditor/extensions/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './basic';
+export * from './change';
 export * from './hyperlink';
-export * from './hyperlinkTooltip';
+export * from './markdown';

package/src/components/TextEditor/extensions/markdown/bundle.ts

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { markdownLanguage, markdown } 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 { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { EditorState, type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  keymap,
+  placeholder,
+  rectangularSelection,
+} from '@codemirror/view';
+// import { GFM } from '@lezer/markdown';
+
+import type { ThemeMode } from '@dxos/react-ui';
+
+import { markdownTagsExtension } from './tags';
+import { markdownHighlightStyle } from './theme';
+
+export type MarkdownBundleOptions = {
+  themeMode?: ThemeMode;
+  placeholder?: string;
+};
+
+export const markdownBundle = ({ themeMode, placeholder: _placeholder }: MarkdownBundleOptions): Extension[] => {
+  // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
+  // https://codemirror.net/docs/ref/#codemirror.basicSetup
+  return [
+    bracketMatching(),
+    closeBrackets(),
+    _placeholder && placeholder(_placeholder),
+
+    EditorState.allowMultipleSelections.of(true),
+    EditorView.lineWrapping,
+
+    // autocompletion(),
+    crosshairCursor(),
+    dropCursor(),
+    drawSelection(),
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    highlightSelectionMatches(),
+    highlightSpecialChars(),
+    history(),
+    indentOnInput(),
+    rectangularSelection(),
+
+    keymap.of([
+      ...closeBracketsKeymap,
+      // ...completionKeymap,
+      ...defaultKeymap,
+      ...foldKeymap,
+      ...historyKeymap,
+      ...lintKeymap,
+      ...searchKeymap,
+      indentWithTab,
+    ]),
+
+    // 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,
+      ],
+    }),
+
+    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    syntaxHighlighting(markdownHighlightStyle),
+    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+  ].filter(Boolean) as Extension[];
+};

package/src/components/TextEditor/extensions/markdown/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './bundle';
+export * from './theme';

package/src/components/{Markdown/markdownTheme.ts → TextEditor/extensions/markdown/theme.ts}

@@ -7,12 +7,10 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import get from 'lodash.get';
 
-import { markdownTags } from './markdownTags';
-import { bold, heading, italic, mark, strikethrough, tokens } from '../../styles';
-
-// TODO(burdon): Use theme colors.
-// TODO(burdon): Light mode.
+import { markdownTags } from './tags';
+import { bold, heading, italic, mark, strikethrough, tokens, type ThemeStyles } from '../../../../styles';
 
+// TODO(burdon): Rationalize theme/colors. Hoist onto single property object.
 export const chalky = '#e5c07b';
 export const coral = '#e06c75';
 export const cyan = '#56b6c2';
@@ -28,12 +26,15 @@ export const highlightBackground = '#2c313a';
 const _background = '#282c34';
 export const tooltipBackground = '#353a42';
 const _selection = '#3E4451';
-export const cursor = '#ffffff';
 
 const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
 
-export const markdownTheme = {
-  // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
+/**
+ * NOTE: The '&' prefix denotes the CM editor root.
+ * https://codemirror.net/examples/styling
+ */
+export const markdownTheme: ThemeStyles = {
+  // TODO(thure): Consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
   //   color: ivory,
   //   backgroundColor: background
@@ -71,7 +72,7 @@ export const markdownTheme = {
   //   color: '#ddd'
   // },
 
-  '.cm-tooltip': {
+  '& .cm-tooltip': {
     backgroundColor: 'transparent',
     border: 'none',
   },
@@ -98,6 +99,7 @@ export const markdownTheme = {
   },
   '& .cm-line': {
     paddingInline: 0,
+    lineHeight: 1.6,
     minBlockSize: '1.6em',
   },
   '& .cm-line *': {
@@ -116,16 +118,17 @@ export const markdownTheme = {
     background: get(tokens, 'extend.colors.primary.600', '#00ffff') + '44',
   },
   '& .cm-content': {
+    padding: 0,
     caretColor: 'black',
   },
   '.dark & .cm-content': {
-    caretColor: cursor,
+    caretColor: 'white',
   },
   '& .cm-cursor': {
     borderLeftColor: 'black',
   },
   '.dark & .cm-cursor': {
-    borderLeftColor: cursor,
+    borderLeftColor: 'white',
   },
   '.cm-placeholder': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
@@ -164,6 +167,14 @@ export const markdownTheme = {
   '& .cm-yLineSelection': {
     margin: '0',
   },
+  '.cm-link': {
+    color: 'rgb(20 89 208)', // TODO(burdon): Rationalize.
+    textDecorationLine: 'underline',
+    textDecorationThickness: '1px',
+    textUnderlineOffset: '2px',
+    borderRadius: '.125rem',
+  },
+  // TODO(burdon): Document.
   ...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.
@@ -174,7 +185,7 @@ export const markdownTheme = {
   }, {}),
 };
 
-export const markdownDarkHighlighting = HighlightStyle.define(
+export const markdownHighlightStyle = HighlightStyle.define(
   [
     {
       tag: [

package/src/components/TextEditor/index.ts

@@ -2,10 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { type StyleSpec } from 'style-mod';
 export { tags } from '@lezer/highlight';
 
-export * from './TextEditor';
-
 export * from './extensions';
-export * from './theme';
+export * from './TextEditor';

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

@@ -0,0 +1,55 @@
+//
+// 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 { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { useId, Input } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { MarkdownEditor } from './TextEditor';
+import { Replicator, useYjsModel } from '../../testing';
+
+export default {
+  component: MarkdownEditor,
+  decorators: [withTheme],
+};
+
+const replicator = new Replicator(TextKind.PLAIN);
+
+const Story = () => {
+  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 as any) : undefined },
+  });
+
+  return (
+    <main className='flex flex-col flex-1 p-4 gap-4'>
+      <div id={generateId} className='flex gap-2'>
+        <Input.Root>
+          <Input.Checkbox checked={generate} onCheckedChange={(checked) => setGenerate(!!checked)} />
+          <Input.Label>Start</Input.Label>
+        </Input.Root>
+      </div>
+      <div className='border'>
+        <MarkdownEditor model={model} />
+      </div>
+    </main>
+  );
+};
+
+export const Default = {
+  // TODO(wittjosiah): Decorator for doing this without clients being initialized?
+  render: () => <ClientRepeater count={2} Component={Story} />,
+};

package/src/components/index.ts

@@ -2,7 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './Editor';
-export * from './Markdown';
-export * from './RichText';
 export * from './TextEditor';

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './useCollaboration';
+export * from './useTextModel';
+export * from './yjs';

package/src/hooks/useCollaboration.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { Extension } from '@codemirror/state';
+import { useEffect, useMemo } from 'react';
+import { yCollab } from 'y-codemirror.next';
+
+import { generateName } from '@dxos/display-name';
+import { isDocAccessor } from '@dxos/echo-schema';
+import type { ThemeMode } from '@dxos/react-ui';
+import { getColorForValue } from '@dxos/react-ui-theme';
+import { YText } from '@dxos/text-model';
+
+import type { EditorModel } from './useTextModel';
+import { automergePlugin } from '../automerge/automerge-plugin';
+
+/**
+ * Replication and awareness (incl. remote selection).
+ * https://codemirror.net/docs/ref/#collab
+ */
+export const useCollaboration = (model: EditorModel, themeMode: ThemeMode): Extension | undefined => {
+  const { provider, peer, content } = model;
+  const extension = useMemo(() => {
+    if (content instanceof YText) {
+      return yCollab(content, provider?.awareness);
+    } else if (isDocAccessor(content)) {
+      return automergePlugin(content.handle, content.path);
+    } else {
+      return undefined;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (provider && peer) {
+      provider.awareness.setLocalStateField('user', {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({ value: peer.id, type: 'color' }),
+        colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
+      });
+    }
+  }, [provider, peer, themeMode]);
+
+  return extension;
+};

package/src/{model.ts → hooks/useTextModel.ts}

@@ -2,34 +2,30 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import { type ComponentProps, useMemo } from 'react';
+import { useMemo } from 'react';
 import type * as awarenessProtocol from 'y-protocols/awareness';
 
-import { type Space, type TextObject } from '@dxos/react-client/echo';
+import {
+  type DocAccessor,
+  type Space,
+  type TextObject,
+  type AutomergeTextCompat,
+  getRawDoc,
+  isActualAutomergeObject,
+} from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import type { YText, YXmlFragment } from '@dxos/text-model';
 
 import { SpaceAwarenessProvider } from './yjs';
 
-export type EditorSlots = {
-  root?: Omit<ComponentProps<'div'>, 'ref'>;
-  editor?: {
-    className?: string;
-    placeholder?: string;
-    spellCheck?: boolean;
-    tabIndex?: number;
-    markdownTheme?: Parameters<typeof EditorView.theme>[0];
-  };
-};
-
+// TODO(burdon): Move.
 type Awareness = awarenessProtocol.Awareness;
 type Provider = { awareness: Awareness };
 
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export type EditorModel = {
   id: string;
-  content: string | YText | YXmlFragment;
+  content: string | YText | YXmlFragment | DocAccessor;
   provider?: Provider;
   peer?: {
     id: string;
@@ -43,16 +39,45 @@ export type UseTextModelOptions = {
   text?: TextObject;
 };
 
-// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
+// TODO(burdon): Don't support returning undefined (and remove checks from calling code).
 // TODO(burdon): Decouple space (make Editor less dependent on entire stack)?
+// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = ({ identity, space, text }: UseTextModelOptions): EditorModel | undefined => {
   const provider = useMemo(() => {
+    if (isActualAutomergeObject(text)) {
+      return undefined;
+    }
+
     if (!space || !text?.doc) {
       return undefined;
     }
 
     return new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
-  }, [identity, space, text?.doc]);
+  }, [identity, space, text, text?.doc]);
+
+  const content = useMemo(() => {
+    if (isActualAutomergeObject(text)) {
+      const obj = text as any as AutomergeTextCompat;
+      return getRawDoc(obj, [obj.field]);
+    } else {
+      return text?.content;
+    }
+  }, [text]);
+
+  if (isActualAutomergeObject(text)) {
+    const obj = text as any as AutomergeTextCompat;
+    return {
+      id: obj.id,
+      content: content!,
+      provider: undefined,
+      peer: identity
+        ? {
+            id: identity.identityKey.toHex(),
+            name: identity.profile?.displayName,
+          }
+        : undefined,
+    };
+  }
 
   if (!text?.doc || !text?.content) {
     return undefined;

package/src/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './components';
-export * from './model';
-
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
+
+export * from './components';
+export * from './hooks';

package/src/styles/tokens.ts

@@ -2,7 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
+import type { StyleSpec } from 'style-mod';
+
 import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
 
+export type ThemeStyles = {
+  [selector: string]: StyleSpec;
+};
+
 // TODO(thure): Why export the whole theme? Can this be done differently?
 export const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;