@dxos/react-ui-editor 0.6.6-main.e1a6e1f → 0.6.6-staging.582ce24

package/dist/types/src/hooks/useTextEditor.d.ts

@@ -1,7 +1,8 @@
+import { type EditorStateConfig, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { type DependencyList, type KeyboardEventHandler, type RefObject } from 'react';
-import { type TextEditorProps } from '../components';
+import { type MaybeFunction } from '@dxos/util';
 export type UseTextEditor = {
     parentRef: RefObject<HTMLDivElement>;
     view?: EditorView;
@@ -10,9 +11,25 @@ export type UseTextEditor = {
         onKeyUp: KeyboardEventHandler<HTMLDivElement>;
     };
 };
-export type UseTextEditorProps = Omit<TextEditorProps, 'moveToEndOfLine' | 'dataTestId'>;
+export type CursorInfo = {
+    from: number;
+    to: number;
+    line: number;
+    lines: number;
+    length: number;
+    after?: string;
+};
+export type UseTextEditorProps = Pick<EditorStateConfig, 'selection' | 'extensions'> & {
+    id?: string;
+    initialValue?: string;
+    className?: string;
+    autoFocus?: boolean;
+    scrollTo?: StateEffect<unknown>;
+    moveToEndOfLine?: boolean;
+    debug?: boolean;
+};
 /**
  * Hook for creating editor.
  */
-export declare const useTextEditor: (cb?: () => UseTextEditorProps, deps?: DependencyList) => UseTextEditor;
+export declare const useTextEditor: (props?: MaybeFunction<UseTextEditorProps>, deps?: DependencyList) => UseTextEditor;
 //# sourceMappingURL=useTextEditor.d.ts.map

package/dist/types/src/hooks/useTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,YAAY,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAQ,MAAM,kBAAkB,4BAA2C,aA+FpG,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,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,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,YAAY,CAAC,GAAG;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,cAAc,kBAAkB,CAAC,4BAEvC,aA6HF,CAAC"}

package/dist/types/src/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAgQ1B,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAgR1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.6-main.e1a6e1f",
+  "version": "0.6.6-staging.582ce24",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -47,19 +47,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.6-main.e1a6e1f",
-    "@dxos/automerge": "0.6.6-main.e1a6e1f",
-    "@dxos/context": "0.6.6-main.e1a6e1f",
-    "@dxos/debug": "0.6.6-main.e1a6e1f",
-    "@dxos/invariant": "0.6.6-main.e1a6e1f",
-    "@dxos/echo-schema": "0.6.6-main.e1a6e1f",
-    "@dxos/log": "0.6.6-main.e1a6e1f",
-    "@dxos/display-name": "0.6.6-main.e1a6e1f",
-    "@dxos/protocols": "0.6.6-main.e1a6e1f",
-    "@dxos/react-async": "0.6.6-main.e1a6e1f",
-    "@dxos/react-ui": "0.6.6-main.e1a6e1f",
-    "@dxos/react-ui-theme": "0.6.6-main.e1a6e1f",
-    "@dxos/util": "0.6.6-main.e1a6e1f"
+    "@dxos/automerge": "0.6.6-staging.582ce24",
+    "@dxos/context": "0.6.6-staging.582ce24",
+    "@dxos/async": "0.6.6-staging.582ce24",
+    "@dxos/invariant": "0.6.6-staging.582ce24",
+    "@dxos/debug": "0.6.6-staging.582ce24",
+    "@dxos/log": "0.6.6-staging.582ce24",
+    "@dxos/react-ui": "0.6.6-staging.582ce24",
+    "@dxos/protocols": "0.6.6-staging.582ce24",
+    "@dxos/display-name": "0.6.6-staging.582ce24",
+    "@dxos/react-async": "0.6.6-staging.582ce24",
+    "@dxos/react-ui-theme": "0.6.6-staging.582ce24",
+    "@dxos/util": "0.6.6-staging.582ce24",
+    "@dxos/echo-schema": "0.6.6-staging.582ce24"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -85,22 +85,22 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.5.0",
-    "@dxos/automerge": "0.6.6-main.e1a6e1f",
-    "@dxos/config": "0.6.6-main.e1a6e1f",
-    "@dxos/echo-signals": "0.6.6-main.e1a6e1f",
-    "@dxos/keyboard": "0.6.6-main.e1a6e1f",
-    "@dxos/echo-typegen": "0.6.6-main.e1a6e1f",
-    "@dxos/random": "0.6.6-main.e1a6e1f",
-    "@dxos/react-client": "0.6.6-main.e1a6e1f",
-    "@dxos/react-ui": "0.6.6-main.e1a6e1f",
-    "@dxos/storybook-utils": "0.6.6-main.e1a6e1f",
-    "@braneframe/types": "0.6.6-main.e1a6e1f"
+    "@dxos/automerge": "0.6.6-staging.582ce24",
+    "@dxos/echo-typegen": "0.6.6-staging.582ce24",
+    "@dxos/keyboard": "0.6.6-staging.582ce24",
+    "@dxos/echo-signals": "0.6.6-staging.582ce24",
+    "@dxos/random": "0.6.6-staging.582ce24",
+    "@dxos/react-client": "0.6.6-staging.582ce24",
+    "@dxos/react-ui": "0.6.6-staging.582ce24",
+    "@dxos/config": "0.6.6-staging.582ce24",
+    "@dxos/storybook-utils": "0.6.6-staging.582ce24",
+    "@braneframe/types": "0.6.6-staging.582ce24"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-client": "0.6.6-main.e1a6e1f"
+    "@dxos/react-client": "0.6.6-staging.582ce24"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -45,7 +45,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
   const { parentRef, view } = useTextEditor(() => {
     return {
       id: text.id,
-      doc: text.content,
+      initialValue: text.content,
       extensions: [
         formattingObserver,
         createBasicExtensions({ readonly: viewMode === 'readonly' }),

package/src/components/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './TextEditor';
 export * from './Toolbar';

package/src/extensions/automerge/automerge.stories.tsx

@@ -12,15 +12,15 @@ import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { create, type Expando } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
-import { Filter, DocAccessor, createDocAccessor, useSpace } from '@dxos/react-client/echo';
+import { Filter, DocAccessor, createDocAccessor, useSpace, useQuery, type Space } from '@dxos/react-client/echo';
+import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { automerge } from './automerge';
 import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
-import { createBasicExtensions, createThemeExtensions } from '../factories';
+import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
 
@@ -31,17 +31,26 @@ type TestObject = {
 type EditorProps = {
   source: DocAccessor;
   autoFocus?: boolean;
+  space?: Space;
+  identity?: Identity;
 };
 
-const Editor = ({ source, autoFocus }: EditorProps) => {
+const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(
     () => ({
-      doc: DocAccessor.getValue(source),
+      initialValue: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'w-full p-2 bg-white dark:bg-black' } } }),
-        automerge(source),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            editor: { className: 'w-full bg-white dark:bg-black' },
+            // TODO(burdon): Sufficient padding so indicator isn't clipped.
+            content: { className: '!m-8' },
+          },
+        }),
+        createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
       autoFocus,
     }),
@@ -94,25 +103,23 @@ export default {
 };
 
 const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
+  const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
+  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
+
   useEffect(() => {
-    setTimeout(async () => {
-      if (space) {
-        const { objects = [] } = await space.db.query<Expando>(Filter.from({ type: 'test' })).run();
-        if (objects.length) {
-          const source = createDocAccessor(objects[0].content, ['content']);
-          setSource(source);
-        }
-      }
-    });
-  }, [space]);
+    if (!source && objects.length) {
+      const source = createDocAccessor(objects[0].content, ['content']);
+      setSource(source);
+    }
+  }, [objects, source]);
 
   if (!source) {
     return null;
   }
 
-  return <Editor source={source} />;
+  return <Editor source={source} space={space} identity={identity ?? undefined} />;
 };
 
 export const Default = {};

package/src/extensions/automerge/automerge.ts

@@ -54,6 +54,8 @@ export const automerge = (accessor: DocAccessor): Extension => {
 
   return [
     Cursor.converter.of(cursorConverter(accessor)),
+
+    // Track heads.
     syncState,
 
     // Reconcile external updates.

package/src/extensions/automerge/cursor.ts

@@ -3,15 +3,14 @@
 //
 
 import { log } from '@dxos/log';
-import { toCursor, type DocAccessor, fromCursor } from '@dxos/react-client/echo';
+import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
 
 import { type CursorConverter } from '../cursor';
 
 export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
-  // TODO(burdon): Handle assoc to associate with a previous character.
-  toCursor: (pos) => {
+  toCursor: (pos, assoc) => {
     try {
-      return toCursor(accessor, pos);
+      return toCursor(accessor, pos, assoc);
     } catch (err) {
       log.catch(err);
       return ''; // In case of invalid request (e.g., wrong document).

package/src/extensions/awareness/awareness-provider.ts

@@ -62,6 +62,8 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
           state: this._localState,
         } satisfies ProtocolMessage);
 
+        // TODO(burdon): Replace with throttle.
+        // TODO(burdon): Send heads?
         await sleep(DEBOUNCE_INTERVAL);
       }
     });

package/src/extensions/awareness/awareness.ts

@@ -51,10 +51,9 @@ export type AwarenessPosition = {
 };
 
 export type AwarenessInfo = {
-  displayName?: string;
-  // TODO(burdon): Rename light/dark.
-  color?: string;
-  lightColor?: string;
+  displayName: string;
+  darkColor: string;
+  lightColor: string;
 };
 
 export type AwarenessState = {
@@ -80,14 +79,14 @@ export const awareness = (provider = dummyProvider): Extension => {
  * Generates selection decorations from remote peers.
  */
 export class RemoteSelectionsDecorator implements PluginValue {
-  public decorations: DecorationSet = RangeSet.of([]);
-
   private readonly _ctx = new Context();
+  private readonly _cursorConverter: CursorConverter;
+  private readonly _provider: AwarenessProvider;
+
+  private _lastAnchor?: number;
+  private _lastHead?: number;
 
-  private _cursorConverter: CursorConverter;
-  private _provider: AwarenessProvider;
-  private _lastAnchor?: number = undefined;
-  private _lastHead?: number = undefined;
+  public decorations: DecorationSet = RangeSet.of([]);
 
   constructor(view: EditorView) {
     this._cursorConverter = view.state.facet(Cursor.converter);
@@ -104,13 +103,13 @@ export class RemoteSelectionsDecorator implements PluginValue {
   }
 
   update(update: ViewUpdate) {
-    this._updateLocalSelection(update);
-    this._updateRemoteSelections(update);
+    this._updateLocalSelection(update.view);
+    this._updateRemoteSelections(update.view);
   }
 
-  private _updateLocalSelection(update: ViewUpdate) {
-    const hasFocus = update.view.hasFocus && update.view.dom.ownerDocument.hasFocus();
-    const { anchor = undefined, head = undefined } = hasFocus ? update.state.selection.main : {};
+  private _updateLocalSelection(view: EditorView) {
+    const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
+    const { anchor = undefined, head = undefined } = hasFocus ? view.state.selection.main : {};
     if (this._lastAnchor === anchor && this._lastHead === head) {
       return;
     }
@@ -122,14 +121,22 @@ export class RemoteSelectionsDecorator implements PluginValue {
       anchor !== undefined && head !== undefined
         ? {
             anchor: this._cursorConverter.toCursor(anchor),
-            head: this._cursorConverter.toCursor(head),
+            head: this._cursorConverter.toCursor(head, -1),
           }
         : undefined,
     );
   }
 
-  private _updateRemoteSelections(update: ViewUpdate) {
-    const decorations: Range<Decoration>[] = [];
+  private _updateRemoteSelections(view: EditorView) {
+    const decorations: Range<Decoration>[] = [
+      // TODO(burdon): Factor out for testing.
+      // {
+      //   from: 0,
+      //   to: 0,
+      //   value: Decoration.widget({ side: 0, block: false, widget: new RemoteCaretWidget('Test', 'red') }),
+      // },
+    ];
+
     const awarenessStates = this._provider.getRemoteStates();
     for (const state of awarenessStates) {
       const anchor = state.position?.anchor ? this._cursorConverter.fromCursor(state.position.anchor) : null;
@@ -138,15 +145,14 @@ export class RemoteSelectionsDecorator implements PluginValue {
         continue;
       }
 
-      const start = Math.min(Math.min(anchor, head), update.view.state.doc.length);
-      const end = Math.min(Math.max(anchor, head), update.view.state.doc.length);
+      const start = Math.min(Math.min(anchor, head), view.state.doc.length);
+      const end = Math.min(Math.max(anchor, head), view.state.doc.length);
 
-      const startLine = update.view.state.doc.lineAt(start);
-      const endLine = update.view.state.doc.lineAt(end);
+      const startLine = view.state.doc.lineAt(start);
+      const endLine = view.state.doc.lineAt(end);
 
-      // TODO(burdon): Factor out styles.
-      const color = state.info.color ?? '#30bced';
-      const lightColor = state.info.lightColor ?? color + '33';
+      const darkColor = state.info.darkColor;
+      const lightColor = state.info.lightColor;
 
       if (startLine.number === endLine.number) {
         // Selected content in a single line.
@@ -180,7 +186,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
         });
 
         for (let i = startLine.number + 1; i < endLine.number; i++) {
-          const linePos = update.view.state.doc.line(i).from;
+          const linePos = view.state.doc.line(i).from;
           decorations.push({
             from: linePos,
             to: linePos,
@@ -197,7 +203,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
         value: Decoration.widget({
           side: head - anchor > 0 ? -1 : 1, // The local cursor should be rendered outside the remote selection.
           block: false,
-          widget: new RemoteCaretWidget(state.info.displayName ?? 'Anonymous', color),
+          widget: new RemoteCaretWidget(state.info.displayName ?? 'Anonymous', darkColor),
         }),
       });
     }
@@ -232,7 +238,6 @@ class RemoteCaretWidget extends WidgetType {
     span.appendChild(document.createTextNode('\u2060'));
     span.appendChild(info);
     span.appendChild(document.createTextNode('\u2060'));
-
     return span;
   }
 
@@ -296,12 +301,11 @@ const styles = EditorView.baseTheme({
     lineHeight: 'normal',
     userSelect: 'none',
     color: 'white',
-    padding: '2px',
+    padding: '2px 6px',
     zIndex: 101,
     transition: 'opacity .3s ease-in-out',
     backgroundColor: 'inherit',
     borderRadius: '2px',
-    // These should be separate.
     opacity: 0,
     transitionDelay: '0s',
     whiteSpace: 'nowrap',

package/src/extensions/comments.ts

@@ -25,7 +25,6 @@ import {
 import sortBy from 'lodash.sortby';
 import { useEffect, useMemo, useState } from 'react';
 
-import { type ThreadType } from '@braneframe/types';
 import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
@@ -613,21 +612,16 @@ const hasActiveSelection = (state: EditorState): boolean => {
 };
 
 class ExternalCommentSync implements PluginValue {
-  private unsubscribe: () => void;
+  private readonly unsubscribe: () => void;
 
   constructor(
     view: EditorView,
     id: string,
     subscribe: (sink: () => void) => UnsubscribeCallback,
-    getThreads: () => ThreadType[],
+    getComments: () => Comment[],
   ) {
     const updateComments = () => {
-      const threads = getThreads();
-      const comments = threads
-        .filter(nonNullable)
-        .filter((thread) => thread.anchor)
-        .map((thread) => ({ id: thread.id, cursor: thread.anchor! }));
-
+      const comments = getComments();
       if (id === view.state.facet(documentId)) {
         queueMicrotask(() => view.dispatch({ effects: setComments.of({ id, comments }) }));
       }
@@ -644,12 +638,12 @@ class ExternalCommentSync implements PluginValue {
 export const createExternalCommentSync = (
   id: string,
   subscribe: (sink: () => void) => UnsubscribeCallback,
-  getThreads: () => ThreadType[],
+  getComments: () => Comment[],
 ): Extension =>
   ViewPlugin.fromClass(
     class {
       constructor(view: EditorView) {
-        return new ExternalCommentSync(view, id, subscribe, getThreads);
+        return new ExternalCommentSync(view, id, subscribe, getComments);
       }
     },
   );
@@ -698,7 +692,7 @@ export const useComments = (view: EditorView | null | undefined, id: string, com
  * Hook provides an extension to listen for comment clicks and invoke a handler.
  */
 export const useCommentClickListener = (onCommentClick: (commentId: string) => void): Extension => {
-  const observer = useMemo(
+  return useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         update.transactions.forEach((transaction) => {
@@ -711,6 +705,4 @@ export const useCommentClickListener = (onCommentClick: (commentId: string) => v
       }),
     [onCommentClick],
   );
-
-  return observer;
 };

package/src/extensions/cursor.ts

@@ -4,7 +4,7 @@
 
 import { type EditorState, Facet } from '@codemirror/state';
 
-import type { Range } from './types';
+import { type Range } from './types';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.

package/src/extensions/factories.ts

@@ -170,24 +170,30 @@ export type DataExtensionsProps<T> = {
 
 // TODO(burdon): Move out of react-ui-editor (remove echo deps).
 export const createDataExtensions = <T>({ id, text, space, identity }: DataExtensionsProps<T>): Extension[] => {
-  const extensions: Extension[] = text ? [automerge(text)] : [];
+  const extensions: Extension[] = [];
+  if (text) {
+    extensions.push(automerge(text));
+  }
 
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
     const { cursorLightValue, cursorDarkValue } =
       hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
-    const awarenessProvider = new SpaceAwarenessProvider({
-      space,
-      channel: `awareness.${id}`,
-      peerId: identity.identityKey.toHex(),
-      info: {
-        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorDarkValue,
-        lightColor: cursorLightValue,
-      },
-    });
-
-    extensions.push(awareness(awarenessProvider));
+
+    extensions.push(
+      awareness(
+        new SpaceAwarenessProvider({
+          space,
+          channel: `awareness.${id}`,
+          peerId: identity.identityKey.toHex(),
+          info: {
+            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+            darkColor: cursorDarkValue,
+            lightColor: cursorLightValue,
+          },
+        }),
+      ),
+    );
   }
 
   return extensions;

package/src/hooks/{useTextEditor.stories.tsx → InputMode.stories.tsx}

@@ -8,38 +8,36 @@ import React, { useState } from 'react';
 
 import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
 
 import { useActionHandler } from './useActionHandler';
-import { useTextEditor } from './useTextEditor';
+import { useTextEditor, type UseTextEditorProps } from './useTextEditor';
 import { Toolbar } from '../components';
-import { createBasicExtensions, createThemeExtensions, InputModeExtensions } from '../extensions';
 import {
   type EditorInputMode,
   decorateMarkdown,
   createMarkdownExtensions,
   formattingKeymap,
+  image,
   table,
   useFormattingState,
-  image,
+  createBasicExtensions,
+  createThemeExtensions,
+  InputModeExtensions,
 } from '../extensions';
 import translations from '../translations';
 
-type StoryProps = {
-  autoFocus?: boolean;
-  placeholder?: string;
-  doc?: string;
-  readonly?: boolean;
-};
+type StoryProps = { placeholder?: string; readonly?: boolean } & UseTextEditorProps;
 
-const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
+const Story = ({ autoFocus, initialValue, placeholder, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
   const [editorInputMode, setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
     () => ({
       autoFocus,
-      doc,
+      initialValue,
+      moveToEndOfLine: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
@@ -61,10 +59,13 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-        <Toolbar.Markdown />
-        <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
-      </Toolbar.Root>
+      <Tooltip.Provider>
+        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+          <Toolbar.Markdown />
+          <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
+        </Toolbar.Root>
+      </Tooltip.Provider>
+
       <div role='none' className='grow overflow-hidden'>
         <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
       </div>
@@ -103,30 +104,24 @@ const EditorInputModeToolbar = ({
 };
 
 export default {
-  title: 'react-ui-editor/useTextEditor',
-  decorators: [withTheme],
-  render: (args: StoryProps) => (
-    <Tooltip.Provider>
-      <Story {...args} />
-    </Tooltip.Provider>
-  ),
+  title: 'react-ui-editor/InputMode',
+  decorators: [withTheme, withFullscreen()],
   parameters: { translations, layout: 'fullscreen' },
+  render: Story,
 };
 
 export const Default = {
-  render: () => {
-    const { parentRef } = useTextEditor();
-    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
-  },
-};
-
-export const Basic = {
   render: () => {
     const { themeMode } = useThemeContext();
-    const { parentRef } = useTextEditor(() => ({
-      extensions: [createBasicExtensions({ placeholder: 'Enter text...' }), createThemeExtensions({ themeMode })],
-    }));
-    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+    const { parentRef } = useTextEditor({
+      extensions: [
+        //
+        createBasicExtensions({ placeholder: 'Enter text...' }),
+        createThemeExtensions({ themeMode }),
+      ],
+    });
+
+    return <div ref={parentRef} className={mx(textBlockWidth, attentionSurface, 'w-full')} />;
   },
 };
 
@@ -134,6 +129,6 @@ export const Markdown = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',
-    doc: '# Demo\n\nThis is a document.\n\n',
+    initialValue: '# Demo\n\nThis is a document.\n\n',
   },
 };