@dxos/react-ui-editor 0.4.8-next.fff1521 → 0.4.9-main.2d20855

package/dist/types/src/translations.d.ts

@@ -16,6 +16,9 @@ declare const _default: {
             'image label': string;
             'heading label': string;
             'table label': string;
+            'heading level label_zero': string;
+            'heading level label_one': string;
+            'heading level label_other': string;
         };
     };
 }[];

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;AAEhD,wBAqBE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAEhD,wBAwBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.8-next.fff1521",
+  "version": "0.4.9-main.2d20855",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,6 +30,7 @@
     "@lezer/markdown": "^1.2.0",
     "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
@@ -38,20 +39,20 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.8-next.fff1521",
-    "@dxos/context": "0.4.8-next.fff1521",
-    "@dxos/debug": "0.4.8-next.fff1521",
-    "@dxos/display-name": "0.4.8-next.fff1521",
-    "@dxos/automerge": "0.4.8-next.fff1521",
-    "@dxos/echo-schema": "0.4.8-next.fff1521",
-    "@dxos/invariant": "0.4.8-next.fff1521",
-    "@dxos/protocols": "0.4.8-next.fff1521",
-    "@dxos/react-async": "0.4.8-next.fff1521",
-    "@dxos/react-ui": "0.4.8-next.fff1521",
-    "@dxos/react-ui-theme": "0.4.8-next.fff1521",
-    "@dxos/text-model": "0.4.8-next.fff1521",
-    "@dxos/log": "0.4.8-next.fff1521",
-    "@dxos/util": "0.4.8-next.fff1521"
+    "@dxos/async": "0.4.9-main.2d20855",
+    "@dxos/debug": "0.4.9-main.2d20855",
+    "@dxos/automerge": "0.4.9-main.2d20855",
+    "@dxos/context": "0.4.9-main.2d20855",
+    "@dxos/display-name": "0.4.9-main.2d20855",
+    "@dxos/echo-schema": "0.4.9-main.2d20855",
+    "@dxos/invariant": "0.4.9-main.2d20855",
+    "@dxos/log": "0.4.9-main.2d20855",
+    "@dxos/react-async": "0.4.9-main.2d20855",
+    "@dxos/protocols": "0.4.9-main.2d20855",
+    "@dxos/react-ui": "0.4.9-main.2d20855",
+    "@dxos/react-ui-theme": "0.4.9-main.2d20855",
+    "@dxos/text-model": "0.4.9-main.2d20855",
+    "@dxos/util": "0.4.9-main.2d20855"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -78,20 +79,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.3.1",
-    "@dxos/config": "0.4.8-next.fff1521",
-    "@dxos/echo-signals": "0.4.8-next.fff1521",
-    "@dxos/echo-typegen": "0.4.8-next.fff1521",
-    "@dxos/random": "0.4.8-next.fff1521",
-    "@dxos/keyboard": "0.4.8-next.fff1521",
-    "@dxos/react-ui": "0.4.8-next.fff1521",
-    "@dxos/storybook-utils": "0.4.8-next.fff1521",
-    "@dxos/react-client": "0.4.8-next.fff1521"
+    "@dxos/config": "0.4.9-main.2d20855",
+    "@dxos/echo-typegen": "0.4.9-main.2d20855",
+    "@dxos/echo-signals": "0.4.9-main.2d20855",
+    "@dxos/keyboard": "0.4.9-main.2d20855",
+    "@dxos/random": "0.4.9-main.2d20855",
+    "@dxos/react-client": "0.4.9-main.2d20855",
+    "@dxos/react-ui": "0.4.9-main.2d20855",
+    "@dxos/storybook-utils": "0.4.9-main.2d20855"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.8-next.fff1521"
+    "@dxos/react-client": "0.4.9-main.2d20855"
   },
   "publishConfig": {
     "access": "public"

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

@@ -13,6 +13,7 @@ import { createRoot } from 'react-dom/client';
 import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { Button, DensityProvider, Input, ThemeProvider, useThemeContext } from '@dxos/react-ui';
 import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
@@ -32,7 +33,7 @@ import {
   createThemeExtensions,
   decorateMarkdown,
   defaultOptions,
-  dnd,
+  dropFile,
   formattingKeymap,
   image,
   linkTooltip,
@@ -501,7 +502,18 @@ export const Annotations = {
 };
 
 export const DND = {
-  render: () => <Story text={str('# DND', '')} extensions={[dnd()]} />,
+  render: () => (
+    <Story
+      text={str('# DND', '')}
+      extensions={[
+        dropFile({
+          onDrop: (view, event) => {
+            log.info('drop', event);
+          },
+        }),
+      ]}
+    />
+  ),
 };
 
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');

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

@@ -34,7 +34,6 @@ import translations from '../../translations';
 faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
-  console.log('STORY');
   const { themeMode } = useThemeContext();
   const [item] = useState({ text: new TextObject(content) });
   const { id, doc, accessor } = useDocAccessor(item.text);

package/src/components/Toolbar/Toolbar.tsx

@@ -24,6 +24,8 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
+  CaretDown,
+  Check,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
@@ -32,17 +34,18 @@ import { useDropzone } from 'react-dropzone';
 import {
   DensityProvider,
   ElevationProvider,
-  Select,
   Toolbar as NaturalToolbar,
   Tooltip,
   type ThemedClassName,
   type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
+  DropdownMenu,
+  Button,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { type Formatting } from '../../extensions';
+import { type Action, type ActionType, type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
@@ -57,30 +60,6 @@ const HeadingIcons: { [key: string]: Icon } = {
   '6': TextHSix,
 };
 
-// TODO(burdon): Revert to string to make extensible?
-export type ActionType =
-  | 'blockquote'
-  | 'strong'
-  | 'codeblock'
-  | 'comment'
-  | 'heading'
-  | 'image'
-  | 'emphasis'
-  | 'code'
-  | 'link'
-  | 'list-bullet'
-  | 'list-ordered'
-  | 'list-task'
-  | 'mention'
-  | 'prompt'
-  | 'strikethrough'
-  | 'table';
-
-export type Action = {
-  type: ActionType;
-  data?: any;
-};
-
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
     state: Formatting | undefined;
@@ -180,9 +159,9 @@ const MarkdownHeading = () => {
         }
       }}
     >
-      <Select.Root
-        disabled={value === null}
-        value={value ?? '0'}
+      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
+            heading). Determine the root cause and fix or report to Radix. */}
+      <DropdownMenu.Root
         open={selectOpen}
         onOpenChange={(nextOpen: boolean) => {
           if (!nextOpen) {
@@ -190,39 +169,42 @@ const MarkdownHeading = () => {
           }
           return setSelectOpen(nextOpen);
         }}
-        onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
       >
         <Tooltip.Trigger asChild>
           <NaturalToolbar.Button asChild>
-            <Select.TriggerButton variant='ghost' classNames={buttonStyles}>
-              <span className='sr-only'>{t('heading label')}</span>
-              <HeadingIcon className={iconStyles} />
-            </Select.TriggerButton>
+            <DropdownMenu.Trigger asChild>
+              <Button variant='ghost' classNames={buttonStyles} disabled={value === null}>
+                <span className='sr-only'>{t('heading label')}</span>
+                <HeadingIcon className={iconStyles} />
+                <CaretDown />
+              </Button>
+            </DropdownMenu.Trigger>
           </NaturalToolbar.Button>
         </Tooltip.Trigger>
-        <Select.Portal>
-          <Select.Content>
-            <Select.ScrollUpButton />
-            <Select.Viewport>
-              <Select.Option value='0'>
-                <Paragraph className={iconStyles} />
-              </Select.Option>
-              {[1, 2, 3, 4, 5, 6].map((level) => (
-                <Select.Option key={level} value={String(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>
-            <Select.ScrollDownButton />
-            <Select.Arrow />
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
+            <DropdownMenu.Viewport>
+              {Object.keys(HeadingIcons).map((level) => {
+                const Icon = HeadingIcons[level];
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={level}
+                    checked={value === level}
+                    onClick={() => onAction?.({ type: 'heading', data: level })}
+                  >
+                    <span className='sr-only'>{t('heading level label', { count: parseInt(level) })}</span>
+                    <Icon className={iconStyles} />
+                    <DropdownMenu.ItemIndicator>
+                      <Check />
+                    </DropdownMenu.ItemIndicator>
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
       <Tooltip.Portal>
         <Tooltip.Content {...tooltipProps}>
           {t('heading label')}
@@ -358,7 +340,7 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
 
   useEffect(() => {
     if (onUpload && acceptedFiles.length) {
-      setTimeout(async () => {
+      requestAnimationFrame(async () => {
         // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
         const f = acceptedFiles[0];
         const file = new File([f], f.name, {
@@ -394,7 +376,12 @@ const MarkdownActions = () => {
       {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
       {/*  {t('comment label')} */}
       {/* </ToolbarButton> */}
-      <ToolbarButton value='comment' Icon={ChatText} onClick={() => onAction?.({ type: 'comment' })}>
+      <ToolbarButton
+        value='comment'
+        Icon={ChatText}
+        data-testid='editor.toolbar.comment'
+        onClick={() => onAction?.({ type: 'comment' })}
+      >
         {t('comment label')}
       </ToolbarButton>
     </>

package/src/extensions/automerge/automerge.ts

@@ -60,16 +60,16 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ViewPlugin.fromClass(
       class {
         constructor(private readonly _view: EditorView) {
-          accessor.handle.addListener('change', this._handleChange.bind(this));
+          accessor.handle.addListener('change', this._handleChange);
         }
 
         destroy() {
-          accessor.handle.removeListener('change', this._handleChange.bind(this));
+          accessor.handle.removeListener('change', this._handleChange);
         }
 
-        _handleChange() {
+        readonly _handleChange = () => {
           syncer.reconcile(this._view, false);
-        }
+        };
       },
     ),
 

package/src/extensions/command/state.ts

@@ -59,8 +59,8 @@ export const commandState = StateField.define<CommandState>({
                       selection: { anchor: pos + action.insert.length },
                     });
                   }
-                  // TODO(burdon): Truncates text if set focus immediately.
-                  setTimeout(() => view.focus());
+                  // NOTE: Truncates text if set focus immediately.
+                  requestAnimationFrame(() => view.focus());
                 });
               },
             };

package/src/extensions/dnd.ts

@@ -3,15 +3,37 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import { dropCursor, EditorView } from '@codemirror/view';
 
-import { log } from '@dxos/log';
+import { getToken } from '../styles';
 
-// TODO(burdon): DND experiment.
-export const dnd = (): Extension => {
-  return EditorView.domEventHandlers({
-    drop: (event, view) => {
-      log.info('domEventHandlersDrop', { event });
-    },
-  });
+export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
+
+const styles = EditorView.baseTheme({
+  '.cm-dropCursor': {
+    borderLeft: `2px solid ${getToken('extend.colors.primary.500')}`,
+    color: getToken('extend.colors.primary.500'),
+    padding: '0 4px',
+  },
+  '.cm-dropCursor:after': {
+    content: '"←"',
+  },
+});
+
+export const dropFile = (options: DNDOptions = {}): Extension => {
+  return [
+    styles,
+    dropCursor(),
+    EditorView.domEventHandlers({
+      drop: (event, view) => {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        const pos = view.posAtCoords(event);
+        if (files?.length && pos !== null) {
+          view.dispatch({ selection: { anchor: pos } });
+          options.onDrop?.(view, { files });
+        }
+      },
+    }),
+  ];
 };

package/src/extensions/factories.ts

@@ -2,16 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { bracketMatching } from '@codemirror/language';
+import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
 import {
   EditorView,
-  crosshairCursor,
+  type KeyBinding,
   drawSelection,
   dropCursor,
   highlightActiveLine,
+  keymap,
   lineNumbers,
   placeholder,
   scrollPastEnd,
@@ -32,8 +34,6 @@ import { awareness, SpaceAwarenessProvider } from './awareness';
 import { type ThemeStyles } from '../styles';
 import { defaultTheme } from '../themes';
 
-// TODO(burdon): Move into extensions folder.
-
 //
 // Basic
 //
@@ -41,39 +41,52 @@ import { defaultTheme } from '../themes';
 /**
  * https://codemirror.net/docs/extensions
  * https://github.com/codemirror/basic-setup
+ * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
  */
-// TODO(burdon): Reconcile with createMarkdownExtensions.
 export type BasicExtensionsOptions = {
   allowMultipleSelections?: boolean;
   bracketMatching?: boolean;
   closeBrackets?: boolean;
-  crosshairCursor?: boolean;
   dropCursor?: boolean;
   drawSelection?: boolean;
   editable?: boolean;
   highlightActiveLine?: boolean;
   history?: boolean;
+  indentWithTab?: boolean;
+  keymap?: null | 'default' | 'standard';
   lineNumbers?: boolean;
   lineWrapping?: boolean;
   placeholder?: string;
   readonly?: boolean;
+  search?: boolean;
   scrollPastEnd?: boolean;
+  standardKeymap?: boolean;
   tabSize?: number;
 };
 
-const defaults: BasicExtensionsOptions = {
+const defaultBasicOptions: BasicExtensionsOptions = {
+  allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
   editable: true,
   history: true,
+  keymap: 'standard',
   lineWrapping: true,
+  search: true,
+};
+
+const keymaps: { [key: string]: readonly KeyBinding[] } = {
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  standard: standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.defaultKeymap
+  default: defaultKeymap,
 };
 
 export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
-  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaultBasicOptions);
   return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
+    // NOTE: Doesn't catch errors in keymap functions.
     EditorView.exceptionSink.of((err) => {
       log.catch(err);
     }),
@@ -81,7 +94,6 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && bracketMatching(),
     props.closeBrackets && closeBrackets(),
-    props.crosshairCursor && crosshairCursor(),
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection(),
     props.highlightActiveLine && highlightActiveLine(),
@@ -92,6 +104,21 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
+
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap.of(
+      [
+        ...((props.keymap && keymaps[props.keymap]) ?? []),
+        // https://codemirror.net/docs/ref/#commands.indentWithTab
+        ...(props.indentWithTab ? [indentWithTab] : []),
+        // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+        ...(props.closeBrackets ? closeBracketsKeymap : []),
+        // https://codemirror.net/docs/ref/#commands.historyKeymap
+        ...(props.history ? historyKeymap : []),
+        // https://codemirror.net/docs/ref/#search.searchKeymap
+        ...(props.search ? searchKeymap : []),
+      ].filter(isNotFalsy),
+    ),
   ].filter(isNotFalsy);
 };
 
@@ -112,14 +139,14 @@ export type ThemeExtensionsOptions = {
   };
 };
 
-const defaultSlots = {
+const defaultThemeSlots = {
   editor: {
     className: 'w-full bs-full',
   },
 };
 
 export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultSlots);
+  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [
     EditorView.baseTheme(defaultTheme),
     EditorView.darkTheme.of(themeMode === 'dark'),
@@ -135,12 +162,11 @@ export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: Theme
 
 export type DataExtensionsProps = {
   id: string;
-  text: DocAccessor; // TODO(burdon): Rename content.
+  text: DocAccessor;
   space?: Space;
   identity?: Identity | null;
 };
 
-// TODO(burdon): Factor out automerge defs and extension (not hook).
 // TODO(burdon): Move out of react-ui-editor (remove echo deps).
 export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
   const extensions: Extension[] = [automerge(text)];

package/src/extensions/index.ts

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

package/src/extensions/markdown/action.ts

@@ -0,0 +1,112 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import {
+  Inline,
+  List,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
+  insertTable,
+  removeBlockquote,
+  removeCodeblock,
+  removeLink,
+  removeList,
+  setHeading,
+  setStyle,
+  toggleBlockquote,
+  toggleList,
+  toggleStyle,
+} from './formatting';
+import { createComment } from '../comments';
+
+export type ActionType =
+  | 'blockquote'
+  | 'strong'
+  | 'codeblock'
+  | 'comment'
+  | 'heading'
+  | 'image'
+  | 'emphasis'
+  | 'code'
+  | 'link'
+  | 'list-bullet'
+  | 'list-ordered'
+  | 'list-task'
+  | 'mention'
+  | 'prompt'
+  | 'strikethrough'
+  | 'table';
+
+export type Action = {
+  type: ActionType;
+  data?: any;
+};
+
+export type ActionHandler = (view: EditorView, action: Action) => void;
+
+export const processAction: ActionHandler = (view, action) => {
+  let inlineType, listType;
+  switch (action.type) {
+    case 'heading':
+      setHeading(parseInt(action.data))(view);
+      break;
+
+    case 'strong':
+    case 'emphasis':
+    case 'strikethrough':
+    case 'code':
+      inlineType =
+        action.type === 'strong'
+          ? Inline.Strong
+          : action.type === 'emphasis'
+            ? Inline.Emphasis
+            : action.type === 'strikethrough'
+              ? Inline.Strikethrough
+              : Inline.Code;
+      (typeof action.data === 'boolean' ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+      break;
+
+    case 'list-ordered':
+    case 'list-bullet':
+    case 'list-task':
+      listType =
+        action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
+      (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(
+        view,
+      );
+      break;
+
+    case 'blockquote':
+      (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+      break;
+    case 'codeblock':
+      (action.data === false ? removeCodeblock : addCodeblock)(view);
+      break;
+    case 'table':
+      insertTable(view);
+      break;
+
+    case 'link':
+      (action.data === false ? removeLink : addLink())(view);
+      break;
+
+    case 'image':
+      addLink({ url: action.data, image: true })(view);
+      break;
+
+    case 'comment':
+      createComment(view);
+      break;
+  }
+
+  requestAnimationFrame(() => {
+    if (!view.hasFocus) {
+      view.focus();
+    }
+  });
+};