@dxos/react-ui-editor 0.8.3 → 0.8.4-main.28f8d3d

package/src/extensions/command/typeahead.ts

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { EditorSelection, Prec, RangeSetBuilder, type Extension } from '@codemirror/state';
+import { EditorSelection, type Extension, Prec, RangeSetBuilder } from '@codemirror/state';
 import {
   type Command,
   Decoration,
   type DecorationSet,
   type EditorView,
-  keymap,
   ViewPlugin,
   type ViewUpdate,
+  keymap,
 } from '@codemirror/view';
 
 import { Hint } from './hint';
@@ -87,30 +87,43 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   ];
 };
 
+type CompletionOptions = {
+  default?: string;
+  minLength?: number;
+};
+
 /**
  * Util to match current line to a static list of completions.
  */
 export const staticCompletion =
-  (completions: string[], defaultCompletion?: string) =>
+  (completions: string[], options: CompletionOptions = {}) =>
   ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && defaultCompletion) {
-      return defaultCompletion;
+    if (line.length === 0 && options.default) {
+      return options.default;
     }
 
-    const words = line.split(/\s+/).filter(Boolean);
-    if (words.length) {
-      const word = words.at(-1)!;
-      for (const completion of completions) {
-        const match = matchCompletion(completion, word);
-        if (match) {
-          return match;
+    const parts = line.split(/\s+/).filter(Boolean);
+    if (parts.length) {
+      const str = parts.at(-1)!;
+      if (str.length >= (options.minLength ?? 0)) {
+        for (const completion of completions) {
+          const match = matchCompletion(completion, str);
+          if (match) {
+            return match;
+          }
         }
       }
     }
   };
 
-export const matchCompletion = (completion: string, word: string): string | undefined => {
-  if (completion.length > word.length && completion.startsWith(word)) {
-    return completion.slice(word.length);
+export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
+  if (
+    str.length >= minLength &&
+    completion.length > str.length &&
+    completion.startsWith(str)
+    // TODO(burdon): If case insensitive, need to replace existing chars.
+    // completion.toLowerCase().startsWith(str.toLowerCase())
+  ) {
+    return completion.slice(str.length);
   }
 };

package/src/extensions/command/useCommandMenu.ts

@@ -8,9 +8,10 @@ import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
 import { type MaybePromise } from '@dxos/util';
 
+import { type CommandMenuGroup, type CommandMenuItem, getItem, getNextItem, getPreviousItem } from '../../components';
+
 import { commandMenu, commandRangeEffect } from './command-menu';
 import { type PlaceholderOptions } from './placeholder';
-import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
 
 export type UseCommandMenuOptions = {
   viewRef: RefObject<EditorView | undefined>;

package/src/extensions/comments.ts

@@ -5,25 +5,26 @@
 import { invertedEffects } from '@codemirror/commands';
 import { type ChangeDesc, type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import {
-  hoverTooltip,
-  keymap,
   type Command,
   Decoration,
   EditorView,
-  type Rect,
   type PluginValue,
+  type Rect,
   ViewPlugin,
+  hoverTooltip,
+  keymap,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 import { useEffect } from 'react';
 
-import { debounce, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, debounce } from '@dxos/async';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
+import { type Comment, type Range, type RenderCallback } from '../types';
+import { Cursor, callbackWrapper, singleValueFacet } from '../util';
+
 import { documentId } from './selection';
-import { type RenderCallback, type Comment, type Range } from '../types';
-import { Cursor, singleValueFacet, callbackWrapper } from '../util';
 
 //
 // State management.

package/src/extensions/dnd.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { dropCursor, EditorView } from '@codemirror/view';
+import { EditorView, dropCursor } from '@codemirror/view';
 
 export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
 

package/src/extensions/factories.ts

@@ -31,11 +31,12 @@ import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
 import { hexToHue, isNotFalsy } from '@dxos/util';
 
+import { editorGutter, editorMonospace } from '../defaults';
+import { type ThemeStyles, defaultTheme } from '../styles';
+
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
-import { editorGutter, editorMonospace } from '../defaults';
-import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
 // Basic
@@ -82,8 +83,8 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   history: true,
   keymap: 'standard',
   lineWrapping: true,
-  search: true,
-};
+  search: false,
+} as const;
 
 const keymaps: { [key: string]: readonly KeyBinding[] } = {
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -93,7 +94,7 @@ const keymaps: { [key: string]: readonly KeyBinding[] } = {
 };
 
 export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
-  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaultBasicOptions);
+  const props = defaultsDeep({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView.exceptionSink.of((err) => {
@@ -157,17 +158,28 @@ export type ThemeExtensionsOptions = {
     scroll?: {
       className?: string;
     };
+    scroller?: {
+      className?: string;
+    };
     content?: {
       className?: string;
     };
   };
 };
 
-const defaultThemeSlots = {
+export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'w-full bs-full',
+    className: 'is-full bs-full',
   },
-};
+} as const;
+
+export const fullWidth: ThemeExtensionsOptions['slots'] = {
+  editor: {
+    className: 'is-full',
+  },
+} as const;
+
+export const defaultThemeSlots = grow;
 
 /**
  * https://codemirror.net/examples/styling
@@ -195,6 +207,14 @@ export const createThemeExtensions = ({
           }
         },
       ),
+    slots.scroller?.className &&
+      ViewPlugin.fromClass(
+        class {
+          constructor(view: EditorView) {
+            view.dom.querySelector('.cm-scroller')?.classList.add(...slots.scroller.className.split(' '));
+          }
+        },
+      ),
   ].filter(isNotFalsy);
 };
 

package/src/extensions/markdown/action.ts

@@ -7,6 +7,8 @@ import { type EditorView } from '@codemirror/view';
 import { type Action } from '@dxos/app-graph';
 import { type MenuActionProperties } from '@dxos/react-ui-menu';
 
+import { createComment } from '../comments';
+
 import {
   Inline,
   List,
@@ -25,7 +27,6 @@ import {
   toggleList,
   toggleStyle,
 } from './formatting';
-import { createComment } from '../comments';
 
 export type PayloadType =
   | 'view-mode'

package/src/extensions/markdown/bundle.ts

@@ -4,7 +4,7 @@
 
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';

package/src/extensions/markdown/changes.ts

@@ -4,7 +4,7 @@
 
 import { syntaxTree } from '@codemirror/language';
 import { type ChangeSpec, Transaction } from '@codemirror/state';
-import { ViewPlugin, type ViewUpdate, type PluginValue } from '@codemirror/view';
+import { type PluginValue, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 /**
  * Monitors and augments changes.

package/src/extensions/markdown/decorate.ts

@@ -3,20 +3,21 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState, StateEffect } from '@codemirror/state';
-import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorState, RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type HeadingLevel, theme } from '../../styles';
+import { type RenderCallback } from '../../types';
+import { wrapWithCatch } from '../../util';
+
 import { adjustChanges } from './changes';
 import { image } from './image';
-import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
+import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
 import { table } from './table';
-import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
-import { wrapWithCatch } from '../../util';
 
 /**
  * Unicode characters.

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

@@ -7,21 +7,21 @@ import { EditorState, type StateCommand } from '@codemirror/state';
 import { describe, expect, test } from 'vitest';
 
 import {
+  type Formatting,
+  Inline,
+  List,
   addBlockquote,
   addCodeblock,
   addLink,
   addList,
   addStyle,
   getFormatting,
-  removeStyle,
-  removeLink,
-  removeList,
   removeBlockquote,
   removeCodeblock,
+  removeLink,
+  removeList,
+  removeStyle,
   setHeading,
-  Inline,
-  List,
-  type Formatting,
 } from './formatting';
 
 export const emptyFormatting: Formatting = {
@@ -182,7 +182,7 @@ describe('removeStyle', () => {
 
   testCommand('can remove code style', 'a `{variable}`', code, 'a {variable}');
 
-  // TODO(dmaretskyi): Flaky on CI: https://cloud.nx.app/runs/0byxg4Uq5G/task/react-ui-editor%3Atest
+  // TODO(dmaretskyi): Flaky on CI.
   // testCommand(
   //   'can remove emphasis across multiple blocks',
   //   '{*one*\n\n# *two*\n\n> 1. *three} four*\n',

package/src/extensions/markdown/formatting.ts

@@ -7,16 +7,17 @@ import { syntaxTree } from '@codemirror/language';
 import {
   type ChangeSpec,
   EditorSelection,
-  type Extension,
   type EditorState,
+  type Extension,
   type Line,
   type StateCommand,
   type Text,
 } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useMemo } from 'react';
+import { EditorView, type ViewUpdate, keymap } from '@codemirror/view';
+import { type SyntaxNode, type SyntaxNodeRef } from '@lezer/common';
+import { useCallback, useMemo } from 'react';
 
+import { debounceAndThrottle } from '@dxos/async';
 import { type Live } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
@@ -1251,15 +1252,16 @@ export const getFormatting = (state: EditorState): Formatting => {
  * Hook provides an extension to compute the current formatting state.
  */
 export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
-  return useMemo(
-    () =>
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged || update.selectionSet) {
-          Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
-            state[key as keyof Formatting] = active as any;
-          });
-        }
-      }),
-    [],
+  const handleUpdate = useCallback(
+    debounceAndThrottle((update: ViewUpdate) => {
+      if (update.docChanged || update.selectionSet) {
+        Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
+          state[key as keyof Formatting] = active as any;
+        });
+      }
+    }, 100),
+    [state],
   );
+
+  return useMemo(() => EditorView.updateListener.of(handleUpdate), [handleUpdate]);
 };

package/src/extensions/markdown/highlight.ts

@@ -4,7 +4,7 @@
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle } from '@codemirror/language';
-import { tags, styleTags, Tag } from '@lezer/highlight';
+import { Tag, styleTags, tags } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
 import { fontBody, theme } from '../../styles';

package/src/extensions/mention.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
+import { type CompletionContext, type CompletionResult, autocompletion } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 
 import { log } from '@dxos/log';

package/src/extensions/modes.ts

@@ -6,18 +6,9 @@ import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import { Schema } from 'effect';
 
 import { singleValueFacet } from '../util';
 
-export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
-
-export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
-export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
-
 export type EditorInputConfig = {
   type?: string;
   noTabster?: boolean;

package/src/extensions/outliner/outliner.test.ts

@@ -6,11 +6,12 @@ import { EditorSelection, EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { describe, test } from 'vitest';
 
-import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
-import { listItemToString, outlinerTree, treeFacet } from './tree';
 import { str } from '../../testing';
 import { createMarkdownExtensions } from '../markdown';
 
+import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
+import { listItemToString, outlinerTree, treeFacet } from './tree';
+
 const lines = [
   '- [ ] 1',
   '- [ ] 2',

package/src/extensions/outliner/outliner.ts

@@ -7,12 +7,13 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { floatingMenu } from '../command';
+import { decorateMarkdown } from '../markdown';
+
 import { commands } from './commands';
 import { editor } from './editor';
-import { selectionCompartment, selectionFacet, selectionEquals } from './selection';
+import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
 import { outlinerTree, treeFacet } from './tree';
-import { floatingMenu } from '../command';
-import { decorateMarkdown } from '../markdown';
 
 // ISSUES:
 // TODO(burdon): Remove requirement for continuous lines to be indented (so that user's can't accidentally delete them and break the layout).

package/src/extensions/outliner/selection.ts

@@ -3,7 +3,7 @@
 //
 
 import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
-import { type EditorView, type Command } from '@codemirror/view';
+import { type Command, type EditorView } from '@codemirror/view';
 
 import { treeFacet } from './tree';
 

package/src/extensions/outliner/tree.test.ts

@@ -6,10 +6,11 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
 import { beforeEach, describe, test } from 'vitest';
 
-import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
 import { str } from '../../testing';
 import { type Range } from '../../types';
 
+import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
+
 const lines = [
   '- [ ] 1',
   '- [ ] 2',

package/src/extensions/outliner/tree.ts

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { StateField, type Transaction, type Extension, type EditorState } from '@codemirror/state';
+import { type EditorState, type Extension, StateField, type Transaction } from '@codemirror/state';
 import { Facet } from '@codemirror/state';
 import { type SyntaxNode } from '@lezer/common';
 

package/src/hooks/useTextEditor.ts

@@ -4,7 +4,7 @@
 
 import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
+import { type TabsterTypes, useFocusableGroup } from '@fluentui/react-tabster';
 import {
   type DependencyList,
   type KeyboardEventHandler,
@@ -17,9 +17,9 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
+import { type MaybeProvider, getProviderValue, isNotFalsy } from '@dxos/util';
 
-import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
+import { type EditorSelection, createEditorStateTransaction, documentId, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
 let instanceCount = 0;

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import translations from './translations';
+import { translations } from './translations';
 
 export { type Extension, EditorState } from '@codemirror/state';
 export { EditorView, keymap } from '@codemirror/view';

package/src/stories/Command.stories.tsx

@@ -4,19 +4,20 @@
 
 import '@dxos-theme';
 
-import React, { useState, type KeyboardEvent } from 'react';
+import React, { type KeyboardEvent, useState } from 'react';
 
-import { Button, Icon, Input, DropdownMenu } from '@dxos/react-ui';
+import { Button, DropdownMenu, Icon, Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory } from './components';
 import { RefDropdownMenu } from '../components';
 import { editorWidth } from '../defaults';
-import { command, type Action, floatingMenu } from '../extensions';
+import { type Action, command, floatingMenu } from '../extensions';
 import { str } from '../testing';
 import { createRenderer } from '../util';
 
+import { EditorStory } from './components';
+
 const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
   const [text, setText] = useState('');
 

package/src/stories/CommandMenu.stories.tsx

@@ -5,16 +5,15 @@
 import '@dxos-theme';
 
 import { type EditorView } from '@codemirror/view';
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useRef } from 'react';
 
 import { Obj, Query } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory, names } from './components';
 import {
   CommandMenu,
   type CommandMenuGroup,
@@ -26,10 +25,12 @@ import {
   insertAtLineStart,
   linkSlashCommands,
 } from '../components';
-import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
+import { type UseCommandMenuOptions, useCommandMenu } from '../extensions';
 import { str } from '../testing';
 import { createElement } from '../util';
 
+import { EditorStory, names } from './components';
+
 const generator: ValueGenerator = faker as any;
 
 type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
@@ -113,7 +114,7 @@ export const Link: Story = {
           return [];
         }
 
-        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? '';
+        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
         const result = await space?.db.query(Query.type(Testing.Contact)).run();
         const items = result.objects
           .filter((object) => object.name.toLowerCase().includes(name))

package/src/stories/Comments.stories.tsx

@@ -10,14 +10,15 @@ import React, { type FC } from 'react';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory, content, longText } from './components';
 import { annotations, comments, createExternalCommentSync } from '../extensions';
 import { str } from '../testing';
 import { type Comment } from '../types';
 import { createRenderer } from '../util';
 
+import { EditorStory, content, longText } from './components';
+
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,

package/src/stories/EditorToolbar.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
@@ -15,18 +15,17 @@ import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 import { EditorToolbar, useEditorToolbarState } from '../components';
 import { editorWidth } from '../defaults';
 import {
-  type EditorInputMode,
-  type EditorViewMode,
   InputModeExtensions,
-  createMarkdownExtensions,
   createBasicExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
   useFormattingState,
 } from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
-import translations from '../translations';
+import { type UseTextEditorProps, useTextEditor } from '../hooks';
+import { translations } from '../translations';
+import { type EditorInputMode, type EditorViewMode } from '../types';
 
 type StoryProps = { placeholder?: string } & UseTextEditorProps;
 
@@ -44,7 +43,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
       moveToEndOfLine: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
+        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),

package/src/stories/Experimental.stories.tsx

@@ -9,12 +9,13 @@ import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory, content } from './components';
-import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
+import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
 import { str } from '../testing';
 
+import { EditorStory, content } from './components';
+
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,