@dxos/react-ui-editor 0.4.3-main.c3bfede → 0.4.3-main.d01b40e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.3-main.c3bfede",
+  "version": "0.4.3-main.d01b40e",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,23 +36,23 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.3-main.c3bfede",
-    "@dxos/automerge": "0.4.3-main.c3bfede",
-    "@dxos/debug": "0.4.3-main.c3bfede",
-    "@dxos/context": "0.4.3-main.c3bfede",
-    "@dxos/echo-schema": "0.4.3-main.c3bfede",
-    "@dxos/display-name": "0.4.3-main.c3bfede",
-    "@dxos/protocols": "0.4.3-main.c3bfede",
-    "@dxos/invariant": "0.4.3-main.c3bfede",
-    "@dxos/react-async": "0.4.3-main.c3bfede",
-    "@dxos/log": "0.4.3-main.c3bfede",
-    "@dxos/react-ui": "0.4.3-main.c3bfede",
-    "@dxos/react-ui-theme": "0.4.3-main.c3bfede",
-    "@dxos/text-model": "0.4.3-main.c3bfede",
-    "@dxos/util": "0.4.3-main.c3bfede"
+    "@dxos/async": "0.4.3-main.d01b40e",
+    "@dxos/automerge": "0.4.3-main.d01b40e",
+    "@dxos/context": "0.4.3-main.d01b40e",
+    "@dxos/debug": "0.4.3-main.d01b40e",
+    "@dxos/display-name": "0.4.3-main.d01b40e",
+    "@dxos/echo-schema": "0.4.3-main.d01b40e",
+    "@dxos/invariant": "0.4.3-main.d01b40e",
+    "@dxos/log": "0.4.3-main.d01b40e",
+    "@dxos/protocols": "0.4.3-main.d01b40e",
+    "@dxos/react-async": "0.4.3-main.d01b40e",
+    "@dxos/react-ui": "0.4.3-main.d01b40e",
+    "@dxos/react-ui-theme": "0.4.3-main.d01b40e",
+    "@dxos/text-model": "0.4.3-main.d01b40e",
+    "@dxos/util": "0.4.3-main.d01b40e"
   },
   "devDependencies": {
-    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@testing-library/dom": "^8.17.1",
@@ -76,20 +76,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/config": "0.4.3-main.c3bfede",
-    "@dxos/echo-signals": "0.4.3-main.c3bfede",
-    "@dxos/keyboard": "0.4.3-main.c3bfede",
-    "@dxos/random": "0.4.3-main.c3bfede",
-    "@dxos/echo-typegen": "0.4.3-main.c3bfede",
-    "@dxos/react-client": "0.4.3-main.c3bfede",
-    "@dxos/react-ui": "0.4.3-main.c3bfede",
-    "@dxos/storybook-utils": "0.4.3-main.c3bfede"
+    "@dxos/config": "0.4.3-main.d01b40e",
+    "@dxos/echo-signals": "0.4.3-main.d01b40e",
+    "@dxos/echo-typegen": "0.4.3-main.d01b40e",
+    "@dxos/react-client": "0.4.3-main.d01b40e",
+    "@dxos/keyboard": "0.4.3-main.d01b40e",
+    "@dxos/react-ui": "0.4.3-main.d01b40e",
+    "@dxos/storybook-utils": "0.4.3-main.d01b40e",
+    "@dxos/random": "0.4.3-main.d01b40e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.3-main.c3bfede"
+    "@dxos/react-client": "0.4.3-main.d01b40e"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,7 +3,6 @@
 //
 
 import '@dxosTheme';
-
 import { type EditorView } from '@codemirror/view';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -37,6 +36,7 @@ import {
   useComments,
   formatting,
   annotations,
+  EditorModes,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
 import translations from '../../translations';
@@ -390,6 +390,15 @@ export const HorizontalRule = {
   ),
 };
 
+export const Vim = {
+  render: () => (
+    <Story
+      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', text.paragraphs)}
+      extensions={[defaults, EditorModes.vim]}
+    />
+  ),
+};
+
 export const Annotations = {
   render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -4,13 +4,12 @@
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-// import { useFocusableGroup } from '@fluentui/react-tabster';
-import { vim } from '@replit/codemirror-vim';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type ComponentProps,
-  type KeyboardEvent,
   forwardRef,
+  type KeyboardEventHandler,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -23,16 +22,12 @@ import { useThemeContext } from '@dxos/react-ui';
 import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
+import { createBasicBundle, createMarkdownExtensions, editorMode } from '../../extensions';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
 import { logChanges } from '../../util';
 
-// TODO(burdon): Change to enum?
-export const EditorModes = ['default', 'vim'] as const;
-export type EditorMode = (typeof EditorModes)[number];
-
 export type CursorInfo = {
   from: number;
   to: number;
@@ -52,7 +47,6 @@ export type TextEditorSlots = {
   };
 };
 
-// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
   model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
@@ -60,7 +54,6 @@ export type TextEditorProps = {
   lineWrapping?: boolean;
   scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
   selection?: { anchor: number; head?: number };
-  editorMode?: EditorMode; // TODO(burdon): Factor out.
   placeholder?: string;
   theme?: ThemeStyles;
   slots?: TextEditorSlots;
@@ -74,26 +67,10 @@ export type TextEditorProps = {
 // TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    {
-      model,
-      readonly,
-      autoFocus,
-      scrollTo,
-      selection,
-      editorMode,
-      theme,
-      slots = defaultSlots,
-      extensions = [],
-      debug,
-    },
+    { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
     forwardedRef,
   ) => {
-    // TODO(burdon): Hook causes error even if properties are not spread into div.
-    //  Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
-    //  Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
-    //  https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
-    //  https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
-    // const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
 
     const rootRef = useRef<HTMLDivElement>(null);
@@ -143,6 +120,15 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
           EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
 
+          // Focus.
+          EditorView.updateListener.of((update) => {
+            update.transactions.forEach((transaction) => {
+              if (transaction.isUserEvent('focus.container')) {
+                rootRef.current?.focus();
+              }
+            });
+          }),
+
           // State.
           EditorView.editable.of(!readonly),
           EditorState.readOnly.of(!!readonly),
@@ -151,9 +137,6 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           // NOTE: This must come before user extensions.
           model.extension,
 
-          // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
-          editorMode === 'vim' && vim(),
-
           // Custom.
           ...extensions,
         ].filter(isNotFalsy),
@@ -180,44 +163,40 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
       view?.destroy();
       setView(newView);
 
+      // Remove tabster attribute (rely on custom keymap).
+      if (state.facet(editorMode).noTabster) {
+        rootRef.current.removeAttribute('data-tabster');
+      }
+
       return () => {
         newView?.destroy();
         setView(null);
       };
-    }, [rootRef, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, themeMode]);
 
-    // Handles tab/focus.
-    // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
-    // TODO(burdon): Convert to keymap?
-    const handleKeyUp = useCallback(
-      (event: KeyboardEvent) => {
-        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    // Focus editor on Enter (e.g., when tabbing to this component).
+    const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+      (event) => {
+        const { key } = event;
         switch (key) {
           case 'Enter': {
             view?.focus();
             break;
           }
-
-          case 'Escape': {
-            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
-              view?.focus();
-            }
-            break;
-          }
         }
       },
-      [view, editorMode],
+      [view],
     );
 
     return (
       <div
-        key={model.id}
         role='none'
+        ref={rootRef}
+        key={model.id}
         tabIndex={0}
-        {...slots.root}
-        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
-        ref={rootRef}
+        {...slots.root}
+        {...tabsterDOMAttribute}
       />
     );
   },

package/src/components/Toolbar/Toolbar.tsx

@@ -23,7 +23,6 @@ import {
   TextHSix,
   TextItalic,
   Quotes,
-  CaretDown,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
@@ -65,7 +64,7 @@ export type ActionType =
   | 'link'
   | 'list-bullet'
   | 'list-ordered'
-  | 'list-tasks'
+  | 'list-task'
   | 'mention'
   | 'prompt'
   | 'strikethrough'
@@ -99,12 +98,17 @@ const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) =>
   );
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & {
+const buttonStyles = 'min-bs-0 p-2';
+const iconStyles = getSize(5);
+
+type ButtonProps = {
+  type: ActionType;
   Icon: Icon;
+  getState: (state: Formatting) => boolean;
+  disabled?: (state: Formatting) => boolean;
 };
 
-const buttonStyles = 'min-bs-0 p-2';
-const iconStyles = getSize(4);
+type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
 
 const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   return (
@@ -118,7 +122,7 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
-  const { t } = useTranslation(translationKey);
+  // const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext('MarkdownFormatting');
   const blockType = state ? state.blockType : 'paragraph';
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -130,21 +134,30 @@ const MarkdownHeading = () => {
       value={value ?? '0'}
       onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
     >
-      <Select.Trigger asChild>
-        <NaturalToolbar.Button variant='ghost' classNames={buttonStyles}>
-          <span className='sr-only'>{t('heading label')}</span>
-          <HeadingIcon className={iconStyles} />
-          <CaretDown className={getSize(2)} weight='bold' />
-        </NaturalToolbar.Button>
-      </Select.Trigger>
+      <Select.TriggerButton>
+        <HeadingIcon className={iconStyles} />
+        {/* TODO(burdon): Incorrectly positioned. */}
+        {/* <NaturalToolbar.Button variant='ghost' classNames={buttonStyles}> */}
+        {/*  <span className='sr-only'>{t('heading label')}</span> */}
+        {/*  <HeadingIcon className={iconStyles} /> */}
+        {/*  <CaretDown className={getSize(2)} weight='bold' /> */}
+        {/* </NaturalToolbar.Button> */}
+      </Select.TriggerButton>
       <Select.Portal>
         <Select.Content>
           <Select.ScrollUpButton />
           <Select.Viewport>
-            <Select.Option value='0'>Paragraph</Select.Option>
+            <Select.Option value='0'>
+              <Paragraph className={iconStyles} />
+            </Select.Option>
             {[1, 2, 3, 4, 5, 6].map((level) => (
               <Select.Option key={level} value={String(level)}>
-                Heading {level}
+                {level === 1 && <TextHOne className={iconStyles} />}
+                {level === 2 && <TextHTwo className={iconStyles} />}
+                {level === 3 && <TextHThree className={iconStyles} />}
+                {level === 4 && <TextHFour className={iconStyles} />}
+                {level === 5 && <TextHFive className={iconStyles} />}
+                {level === 6 && <TextHSix className={iconStyles} />}
               </Select.Option>
             ))}
           </Select.Viewport>
@@ -156,14 +169,12 @@ const MarkdownHeading = () => {
   );
 };
 
-const markdownStyles = [
-  { key: 'strong' as const, Icon: TextB },
-  { key: 'emphasis' as const, Icon: TextItalic },
-  { key: 'strikethrough' as const, Icon: TextStrikethrough },
-  { key: 'code' as const, Icon: Code },
-  { key: 'link' as const, Icon: Link },
-  // <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
-  // <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
+const markdownStyles: ButtonProps[] = [
+  { type: 'strong', Icon: TextB, getState: (state) => state.strong },
+  { type: 'emphasis', Icon: TextItalic, getState: (state) => state.emphasis },
+  { type: 'strikethrough', Icon: TextStrikethrough, getState: (state) => state.strikethrough },
+  { type: 'code', Icon: Code, getState: (state) => state.code },
+  { type: 'link', Icon: Link, getState: (state) => state.link },
 ];
 
 const MarkdownStyles = () => {
@@ -173,27 +184,27 @@ const MarkdownStyles = () => {
   return (
     <NaturalToolbar.ToggleGroup
       type='multiple'
-      value={markdownStyles.filter(({ key }) => !!state?.[key]).map(({ key }) => key)}
+      value={markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
-      {markdownStyles.map(({ key, Icon }) => (
+      {markdownStyles.map(({ type, getState, Icon }) => (
         <ToolbarButton
-          key={key}
-          value={key}
+          key={type}
+          value={type}
           Icon={Icon}
           disabled={state?.blockType === 'codeblock'}
-          onClick={() => onAction?.({ type: key, data: state ? !state[key] : null })}
+          onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
-          {t(`${key} label`)}
+          {t(`${type} label`)}
         </ToolbarButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const markdownLists = [
-  { key: 'bullet' as const, Icon: ListBullets, actionType: 'list-bullet' as const },
-  { key: 'ordered' as const, Icon: ListNumbers, actionType: 'list-ordered' as const },
-  { key: 'task' as const, Icon: ListChecks, actionType: 'list-tasks' as const },
+const markdownLists: ButtonProps[] = [
+  { type: 'list-bullet', Icon: ListBullets, getState: (state) => state.listStyle === 'bullet' },
+  { type: 'list-ordered', Icon: ListNumbers, getState: (state) => state.listStyle === 'ordered' },
+  { type: 'list-task', Icon: ListChecks, getState: (state) => state.listStyle === 'task' },
 ];
 
 const MarkdownLists = () => {
@@ -201,62 +212,58 @@ const MarkdownLists = () => {
   const { t } = useTranslation(translationKey);
   return (
     <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ?? undefined}>
-      {markdownLists.map(({ key, Icon, actionType }) => (
+      {markdownLists.map(({ type, getState, Icon }) => (
         <ToolbarButton
-          key={key}
-          value={key}
+          key={type}
+          value={type}
           Icon={Icon}
-          onClick={() => onAction?.({ type: actionType, data: state ? state.listStyle !== key : null })}
+          onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
-          {t(`${key} label`)}
+          {t(`${type} label`)}
         </ToolbarButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const markdownBlocks = [
+const markdownBlocks: ButtonProps[] = [
   {
-    key: 'blockquote' as const,
+    type: 'blockquote',
     Icon: Quotes,
-    pressed: (state: Formatting | null) => state?.blockQuote,
-    action: (state: Formatting | null) => ({ type: 'blockquote' as const, data: state ? !state.blockQuote : null }),
-    disabled: (state: Formatting | null) => false,
+    getState: (state) => state.blockQuote,
   },
   {
-    key: 'codeblock' as const,
+    type: 'codeblock',
     Icon: CodeBlock,
-    pressed: (state: Formatting | null) => state?.blockType === 'codeblock',
-    action: (state: Formatting | null) => ({ type: 'blockquote' as const, data: state ? !state.blockQuote : null }),
-    disabled: (state: Formatting | null) => !state?.blankLine,
+    getState: (state) => state.blockQuote,
+    disabled: (state) => !state.blankLine,
+  },
+  {
+    type: 'table',
+    Icon: Table,
+    getState: (state) => state.blockType === 'tablecell',
+    disabled: (state) => !state.blankLine,
   },
 ];
 
 const MarkdownBlocks = () => {
   const { onAction, state } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
+  const value = markdownBlocks.find(({ getState }) => state && getState(state));
   return (
-    <>
-      <NaturalToolbar.ToggleGroup
-        type='multiple'
-        value={markdownBlocks.filter(({ pressed }) => pressed(state)).map(({ key }) => key)}
-      >
-        {markdownBlocks.map(({ key, Icon, action }) => (
-          <ToolbarButton key={key} value={key} Icon={Icon} onClick={() => onAction?.(action(state))}>
-            {t(`${key} label`)}
-          </ToolbarButton>
-        ))}
-      </NaturalToolbar.ToggleGroup>
-      <NaturalToolbar.Button
-        variant='ghost'
-        disabled={!state?.blankLine}
-        onClick={() => onAction?.({ type: 'table' })}
-        classNames={buttonStyles}
-      >
-        <Table className={iconStyles} />
-        <span className='sr-only'>{t('table label')}</span>
-      </NaturalToolbar.Button>
-    </>
+    <NaturalToolbar.ToggleGroup type='single' value={value?.type}>
+      {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
+        <ToolbarButton
+          key={type}
+          value={type}
+          Icon={Icon}
+          disabled={!state || disabled?.(state)}
+          onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+        >
+          {t(`${type} label`)}
+        </ToolbarButton>
+      ))}
+    </NaturalToolbar.ToggleGroup>
   );
 };
 
@@ -273,7 +280,12 @@ const MarkdownExtended = () => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
   return (
-    <NaturalToolbar.Button variant='ghost' onClick={() => onAction?.({ type: 'comment' })} classNames={buttonStyles}>
+    <NaturalToolbar.Button
+      variant='ghost'
+      data-testid='editor.toolbar.comment'
+      onClick={() => onAction?.({ type: 'comment' })}
+      classNames={buttonStyles}
+    >
       <ChatText className={iconStyles} />
       <span className='sr-only'>{t('comment label')}</span>
     </NaturalToolbar.Button>

package/src/extensions/comments.ts

@@ -36,8 +36,11 @@ const styles = EditorView.baseTheme({
   },
 });
 
-const commentMark = Decoration.mark({ class: 'cm-comment' });
-const commentCurrentMark = Decoration.mark({ class: 'cm-comment-current' });
+const commentMark = Decoration.mark({ class: 'cm-comment', attributes: { 'data-testid': 'cm-comment' } });
+const commentCurrentMark = Decoration.mark({
+  class: 'cm-comment-current',
+  attributes: { 'data-testid': 'cm-comment' },
+});
 
 type CommentState = {
   comment: Comment;

package/src/extensions/index.ts

@@ -13,5 +13,6 @@ export * from './cursor';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
+export * from './modes';
 export * from './outliner';
 export * from './typewriter';

package/src/extensions/markdown/formatting.test.ts

@@ -370,7 +370,7 @@ describe('removeBlockquote', () => {
 });
 
 describe('addCodeblock', () => {
-  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{}\n\n```');
+  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{}\n```');
 
   testCommand(
     'can turn a paragraph into a code block',

package/src/extensions/markdown/formatting.ts

@@ -356,7 +356,6 @@ const snippets = {
     [
       //
       '```#{}',
-      '#{}',
       '```',
     ].join('\n'),
   ),
@@ -515,6 +514,7 @@ export const addLink: StateCommand = ({ state, dispatch }) => {
 // Lists
 //
 
+// TODO(burdon): Cursor is positioned incorrectly.
 export const addList =
   (type: List): StateCommand =>
   ({ state, dispatch }) => {
@@ -576,18 +576,21 @@ export const addList =
       // Insert a new list item if the selection is empty.
       const { from, to } = state.doc.lineAt(state.selection.main.anchor);
       if (from === to) {
+        const insert = type === List.Bullet ? '- ' : type === List.Ordered ? '1. ' : '- [ ] ';
         dispatch(
           state.update({
             changes: [
               {
                 from,
-                insert: type === List.Bullet ? '- ' : type === List.Ordered ? '1. ' : '- [ ] ',
+                insert,
               },
             ],
+            selection: { anchor: from + insert.length },
             userEvent: 'format.list.add',
             scrollIntoView: true,
           }),
         );
+
         return true;
       }
 

package/src/extensions/modes.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, Facet } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+import { vim } from '@replit/codemirror-vim';
+
+export type EditorMode = 'default' | 'vim' | undefined;
+
+export type EditorConfig = {
+  type: string;
+  noTabster?: boolean;
+};
+
+export const editorMode = Facet.define<EditorConfig, EditorConfig>({
+  combine: (modes) => modes[0] ?? {},
+});
+
+export const EditorModes: { [mode: string]: Extension } = {
+  default: [],
+  vim: [
+    vim(),
+    editorMode.of({ type: 'vim', noTabster: true }),
+    keymap.of([
+      {
+        key: 'Alt-Escape',
+        run: (view) => {
+          // Focus container for tab navigation.
+          view.dispatch({ userEvent: 'focus.container' });
+          return true;
+        },
+      },
+    ]),
+  ],
+};

package/src/hooks/useActionHandler.ts

@@ -54,7 +54,7 @@ export const useActionHandler = (view?: EditorView | null): ToolbarProps['onActi
 
       case 'list-ordered':
       case 'list-bullet':
-      case 'list-tasks':
+      case 'list-task':
         listType =
           action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
         (action.data === false

package/src/index.ts

@@ -2,10 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
+export { type Extension, type EditorState } from '@codemirror/state';
+export { type EditorView, keymap } from '@codemirror/view';
+
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
-export { type Extension } from '@codemirror/state';
-export { type EditorView, keymap } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';