@dxos/react-ui-editor 0.8.4-main.3f58842 → 0.8.4-main.5ea62a8

package/src/defaults.ts

@@ -28,7 +28,9 @@ export const editorSlots: ThemeExtensionsOptions['slots'] = {
 
 export const editorGutter = EditorView.theme({
   '.cm-gutters': {
-    background: 'var(--dx-baseSurface)',
+    // NOTE: Color required to cover content if scrolling horizontally.
+    // TODO(burdon): Non-transparent background clips the focus ring.
+    background: 'var(--dx-baseSurface) !important',
     paddingRight: '1rem',
   },
 });
@@ -42,8 +44,9 @@ export const editorMonospace = EditorView.theme({
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
+// NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
-    'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
+    'p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2',
     role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
   );

package/src/extensions/autocomplete.ts

@@ -3,12 +3,12 @@
 //
 
 import {
-  autocompletion,
-  completionKeymap,
-  type CompletionSource,
   type Completion,
   type CompletionContext,
   type CompletionResult,
+  type CompletionSource,
+  autocompletion,
+  completionKeymap,
 } from '@codemirror/autocomplete';
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { type Extension } from '@codemirror/state';

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

@@ -8,14 +8,15 @@ import '@preact/signals-react';
 
 import { Repo } from '@automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
-import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
+import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -41,7 +42,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
     () => ({
       initialValue: DocAccessor.getValue(source),
       extensions: [
-        createBasicExtensions({ placeholder: 'Type here...' }),
+        createBasicExtensions({ placeholder: 'Type here...', search: true }),
         createThemeExtensions({ themeMode, slots: editorSlots }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
@@ -53,7 +54,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
   return <div ref={parentRef} className='flex w-full' />;
 };
 
-const Story = () => {
+const DefaultStory = () => {
   const [object1, setObject1] = useState<DocAccessor<TestObject>>();
   const [object2, setObject2] = useState<DocAccessor<TestObject>>();
 
@@ -88,16 +89,6 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => <Story />,
-  parameters: {
-    translations,
-  },
-};
-
 const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
@@ -118,9 +109,25 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   return <Editor source={source} space={space} identity={identity ?? undefined} />;
 };
 
-export const Default = {};
+const meta = {
+  title: 'ui/react-ui-editor/Automerge',
+  component: Editor as any,
+  render: render(DefaultStory),
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
 
-export const WithEcho = {
+export const WithEcho: Story = {
   decorators: [withTheme],
   render: () => {
     return (

package/src/extensions/automerge/automerge.ts

@@ -5,15 +5,16 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { StateField, type Extension } from '@codemirror/state';
+import { type Extension, StateField } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { type DocAccessor } from '@dxos/react-client/echo';
 
+import { Cursor } from '../../util';
+
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
+import { type State, isReconcile, updateHeadsEffect } from './defs';
 import { Syncer } from './sync';
-import { Cursor } from '../../util';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({

package/src/extensions/automerge/defs.ts

@@ -5,7 +5,7 @@
 //
 
 import { type Heads, type Prop } from '@automerge/automerge';
-import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import { Annotation, type EditorState, StateEffect, type StateField, type Transaction } from '@codemirror/state';
 
 export type State = {
   path: Prop[];

package/src/extensions/automerge/sync.ts

@@ -10,7 +10,7 @@ import { type EditorView } from '@codemirror/view';
 
 import { type IDocHandle } from '@dxos/react-client/echo';
 
-import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
+import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 

package/src/extensions/automerge/update-automerge.ts

@@ -5,7 +5,7 @@
 //
 
 import { next as A, type Heads } from '@automerge/automerge';
-import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
+import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
 import { type IDocHandle } from '@dxos/react-client/echo';
 

package/src/extensions/awareness/awareness.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
+import { Annotation, type Extension, type Range, RangeSet } from '@codemirror/state';
 import {
   Decoration,
   type DecorationSet,
@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { singleValueFacet, Cursor, type CursorConverter } from '../../util';
+import { Cursor, type CursorConverter, singleValueFacet } from '../../util';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/command/action.ts

@@ -3,7 +3,7 @@
 //
 
 import { StateEffect } from '@codemirror/state';
-import { type KeyBinding, type Command, type EditorView } from '@codemirror/view';
+import { type Command, type EditorView, type KeyBinding } from '@codemirror/view';
 
 import { commandState } from './state';
 

package/src/extensions/command/command-menu.ts

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
-import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
+import { Prec, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 
-import { placeholder, type PlaceholderOptions } from './placeholder';
 import { type Range } from '../../types';
 
+import { type PlaceholderOptions, placeholder } from './placeholder';
+
 export type CommandMenuOptions = {
   trigger: string | string[];
   placeholder?: Partial<PlaceholderOptions>;

package/src/extensions/command/command.ts

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Prec, type Extension } from '@codemirror/state';
+import { type Extension, Prec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { isNonNullable } from '@dxos/util';
 
 import { closeEffect, commandKeyBindings } from './action';
-import { hint, type HintOptions } from './hint';
-import { commandConfig, commandState, type PopupOptions } from './state';
+import { type HintOptions, hint } from './hint';
+import { type PopupOptions, commandConfig, commandState } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4

package/src/extensions/command/hint.ts

@@ -6,9 +6,10 @@
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
-import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
+import { commandState } from './state';
+
 export type HintOptions = {
   delay?: number;
   onHint?: () => string | undefined;

package/src/extensions/command/placeholder.ts

@@ -4,7 +4,7 @@
 //
 
 import { type Extension } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
 import { clientRectsFor, flattenRect } from '../../util';
 

package/src/extensions/command/state.ts

@@ -3,13 +3,14 @@
 //
 
 import { StateField } from '@codemirror/state';
-import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
+import { type EditorView, type Tooltip, type TooltipView, showTooltip } from '@codemirror/view';
 
-import { closeEffect, type Action, openEffect } from './action';
-import { type CommandOptions } from './command';
 import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
+import { type Action, closeEffect, openEffect } from './action';
+import { type CommandOptions } from './command';
+
 export const commandConfig = singleValueFacet<CommandOptions>();
 
 export type PopupOptions = {

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';

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.
@@ -98,16 +99,16 @@ export const commentsState = StateField.define<CommentsState>({
  */
 const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
-    margin: '0 -3px',
-    padding: '3px',
-    borderRadius: '3px',
+    padding: '3px 0',
+    backgroundColor: 'var(--dx-cmCommentSurface)',
+  },
+  '.cm-comment > span, .cm-comment-current > span': {
+    boxDecorationBreak: 'clone',
+    boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
     color: 'var(--dx-cmComment)',
     cursor: 'pointer',
   },
-  '.cm-comment:hover, .cm-comment-current': {
-    textDecoration: 'underline',
-  },
 });
 
 const createCommentMark = (id: string, isCurrent: boolean) =>

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,7 +83,7 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   history: true,
   keymap: 'standard',
   lineWrapping: true,
-  search: true,
+  search: false,
 } as const;
 
 const keymaps: { [key: string]: readonly KeyBinding[] } = {

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,11 +4,12 @@
 
 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';
 import { keymap } from '@codemirror/view';
+import { type MarkdownConfig } from '@lezer/markdown';
 
 import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
@@ -17,6 +18,7 @@ import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
+  extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
 };
 
@@ -51,6 +53,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       extensions: [
         // GFM provided by default.
         markdownTagsExtensions,
+        ...(options.extensions ?? []),
       ],
     }),
 

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 = {

package/src/extensions/markdown/formatting.ts

@@ -7,14 +7,14 @@ 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, type ViewUpdate } from '@codemirror/view';
-import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
+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';

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/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;