@dxos/react-ui-editor 0.6.5 → 0.6.6-staging.23d123d

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';
@@ -40,6 +39,7 @@ import { callbackWrapper } from '../util';
 // State management.
 //
 
+// TODO(wittjosiah): Factor out, not comments-specific.
 const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
 
 type CommentState = {
@@ -612,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 }) }));
       }
@@ -643,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);
       }
     },
   );
@@ -697,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) => {
@@ -710,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/debug.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type RangeSet, StateField, type Transaction } from '@codemirror/state';
+
+// eslint-disable-next-line no-console
+export const debugNodeLogger = (log: (...args: any[]) => void = console.log) => {
+  const logTokens = (state: EditorState) => syntaxTree(state).iterate({ enter: (node) => log(node.type) });
+  return StateField.define<any>({
+    create: (state) => logTokens(state),
+    update: (_: RangeSet<any>, tr: Transaction) => logTokens(tr.state),
+  });
+};

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/extensions/index.ts

@@ -10,6 +10,7 @@ export * from './blast';
 export * from './command';
 export * from './comments';
 export * from './cursor';
+export * from './debug';
 export * from './doc';
 export * from './dnd';
 export * from './factories';

package/src/extensions/markdown/action.ts

@@ -25,6 +25,7 @@ import {
 import { createComment } from '../comments';
 
 export type ActionType =
+  | 'view-mode'
   | 'blockquote'
   | 'strong'
   | 'codeblock'

package/src/extensions/modes.ts

@@ -9,28 +9,31 @@ import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 
 export const focusEvent = 'focus.container';
 
-export type EditorMode = 'default' | 'vim' | 'vscode' | undefined;
+export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
+export type EditorViewMode = (typeof EditorViewModes)[number];
+export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
+export type EditorInputMode = (typeof EditorInputModes)[number];
 
-export type EditorConfig = {
+export type EditorInputConfig = {
   type: string;
   noTabster?: boolean;
 };
 
-export const editorMode = Facet.define<EditorConfig, EditorConfig>({
+export const editorInputMode = Facet.define<EditorInputConfig, EditorInputConfig>({
   combine: (modes) => modes[0] ?? {},
 });
 
-export const EditorModes: { [mode: string]: Extension } = {
+export const InputModeExtensions: { [mode: string]: Extension } = {
   default: [],
   vscode: [
     // https://github.com/replit/codemirror-vscode-keymap
-    editorMode.of({ type: 'vscode' }),
+    editorInputMode.of({ type: 'vscode' }),
     keymap.of(vscodeKeymap),
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorMode.of({ type: 'vim', noTabster: true }),
+    editorInputMode.of({ type: 'vim', noTabster: true }),
     keymap.of([
       {
         key: 'Alt-Escape',

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

@@ -8,41 +8,38 @@ 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 } from '../extensions';
 import {
-  type EditorMode,
-  EditorModes,
+  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 [editorMode, setEditorMode] = useState<EditorMode>('default');
+  const [editorInputMode, setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
     () => ({
       autoFocus,
-      doc,
+      initialValue,
+      moveToEndOfLine: true,
       extensions: [
-        editorMode ? EditorModes[editorMode] : [],
+        editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode }),
@@ -53,7 +50,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         trackFormatting,
       ],
     }),
-    [editorMode, themeMode, placeholder, readonly],
+    [editorInputMode, themeMode, placeholder, readonly],
   );
 
   const handleAction = useActionHandler(view);
@@ -62,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 />
-        <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
-      </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>
@@ -73,17 +73,17 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   );
 };
 
-const EditorModeToolbar = ({
-  editorMode,
-  setEditorMode,
+const EditorInputModeToolbar = ({
+  editorInputMode,
+  setEditorInputMode,
 }: {
-  editorMode: EditorMode;
-  setEditorMode: (mode: EditorMode) => void;
+  editorInputMode: EditorInputMode;
+  setEditorInputMode: (mode: EditorInputMode) => void;
 }) => {
   return (
-    <Select.Root value={editorMode} onValueChange={(value) => setEditorMode(value as EditorMode)}>
+    <Select.Root value={editorInputMode} onValueChange={(value) => setEditorInputMode(value as EditorInputMode)}>
       <NaturalToolbar.Button asChild>
-        <Select.TriggerButton variant='ghost'>{editorMode}</Select.TriggerButton>
+        <Select.TriggerButton variant='ghost'>{editorInputMode}</Select.TriggerButton>
       </NaturalToolbar.Button>
       <Select.Portal>
         <Select.Content>
@@ -104,30 +104,24 @@ const EditorModeToolbar = ({
 };
 
 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')} />;
   },
 };
 
@@ -135,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',
   },
 };

package/src/{components/TextEditor → hooks}/TextEditor.stories.tsx

@@ -5,9 +5,9 @@
 import '@dxosTheme';
 import { markdown } from '@codemirror/lang-markdown';
 import { ArrowSquareOut, X } from '@phosphor-icons/react';
-import { type EditorView } from 'codemirror';
+import { effect, useSignal } from '@preact/signals-react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, type KeyboardEvent, StrictMode, useMemo, useRef, useState } from 'react';
+import React, { type FC, type KeyboardEvent, StrictMode, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextType } from '@braneframe/types';
@@ -21,9 +21,9 @@ import { Button, DensityProvider, Input, ThemeProvider, useThemeContext } from '
 import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { TextEditor, type TextEditorProps } from './TextEditor';
+import { useTextEditor, type UseTextEditorProps } from './useTextEditor';
 import {
-  EditorModes,
+  InputModeExtensions,
   annotations,
   autocomplete,
   blast,
@@ -32,6 +32,7 @@ import {
   comments,
   createBasicExtensions,
   createDataExtensions,
+  createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
@@ -45,14 +46,13 @@ import {
   state,
   table,
   typewriter,
-  useComments,
   type CommandAction,
   type CommandOptions,
   type Comment,
   type CommentsOptions,
   type SelectionState,
-} from '../../extensions';
-import translations from '../../translations';
+} from '../extensions';
+import translations from '../translations';
 
 faker.seed(101);
 
@@ -242,25 +242,19 @@ const renderLinkButton = (el: Element, url: string) => {
 type StoryProps = {
   id?: string;
   text?: string;
-  comments?: Comment[];
   readonly?: boolean;
   placeholder?: string;
-} & Pick<TextEditorProps, 'selection' | 'extensions'>;
+} & Pick<UseTextEditorProps, 'selection' | 'extensions'>;
 
 const Story = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
   text,
-  comments,
   extensions: _extensions = [],
   readonly,
   placeholder = 'New document.',
-  ...props
+  selection,
 }: StoryProps) => {
   const [object] = useState(createEchoObject(create(TextType, { content: text ?? '' })));
-
-  const viewRef = useRef<EditorView>(null);
-  useComments(viewRef.current, id, comments);
-
   const { themeMode } = useThemeContext();
   const extensions = useMemo(
     () => [
@@ -278,21 +272,16 @@ const Story = ({
     [_extensions, object],
   );
 
-  return (
-    <TextEditor
-      {...props}
-      id={id}
-      ref={viewRef}
-      doc={text}
-      extensions={extensions}
-      className={mx(textBlockWidth, 'min-bs-dvh')}
-    />
+  const { parentRef, focusAttributes } = useTextEditor(
+    () => ({ id, initialValue: text, extensions, selection }),
+    [extensions],
   );
+
+  return <div role='none' ref={parentRef} className={mx(textBlockWidth, 'min-bs-dvh')} {...focusAttributes} />;
 };
 
 export default {
-  title: 'react-ui-editor/TextEditor',
-  component: TextEditor,
+  title: 'react-ui-editor/useTextEditor',
   decorators: [withTheme],
   render: Story,
   parameters: { translations, layout: 'fullscreen' },
@@ -474,17 +463,22 @@ export const Command = {
 
 export const Comments = {
   render: () => {
-    const [_comments, setComments] = useState<Comment[]>([]);
+    const _comments = useSignal<Comment[]>([]);
     return (
       <Story
         text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={_comments}
         extensions={[
+          createExternalCommentSync(
+            'test',
+            (sink) => effect(() => sink()),
+            () => _comments.value,
+          ),
           comments({
+            id: 'test',
             onHover: onCommentsHover,
             onCreate: ({ cursor }) => {
               const id = PublicKey.random().toHex();
-              setComments((commentRanges) => [...commentRanges, { id, cursor }]);
+              _comments.value = [..._comments.value, { id, cursor }];
               return id;
             },
             onSelect: (state) => {
@@ -511,7 +505,7 @@ export const Vim = {
   render: () => (
     <Story
       text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', text.paragraphs)}
-      extensions={[defaults, EditorModes.vim]}
+      extensions={[defaults, InputModeExtensions.vim]}
     />
   ),
 };