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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.3",
+  "version": "0.8.4-main.28f8d3d",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,19 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
+    },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
@@ -29,7 +37,7 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.0.0-beta.4",
+    "@automerge/automerge": "3.1.1",
     "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/commands": "^6.6.2",
     "@codemirror/lang-javascript": "^6.2.2",
@@ -59,29 +67,28 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/context": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/display-name": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/protocols": "0.8.3",
-    "@dxos/react-hooks": "0.8.3",
-    "@dxos/react-ui-menu": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/app-graph": "0.8.4-main.28f8d3d",
+    "@dxos/async": "0.8.4-main.28f8d3d",
+    "@dxos/context": "0.8.4-main.28f8d3d",
+    "@dxos/debug": "0.8.4-main.28f8d3d",
+    "@dxos/display-name": "0.8.4-main.28f8d3d",
+    "@dxos/echo-schema": "0.8.4-main.28f8d3d",
+    "@dxos/invariant": "0.8.4-main.28f8d3d",
+    "@dxos/live-object": "0.8.4-main.28f8d3d",
+    "@dxos/lit-ui": "0.8.4-main.28f8d3d",
+    "@dxos/log": "0.8.4-main.28f8d3d",
+    "@dxos/react-hooks": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-menu": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-stack": "0.8.4-main.28f8d3d",
+    "@dxos/protocols": "0.8.4-main.28f8d3d",
+    "@dxos/util": "0.8.4-main.28f8d3d"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.0.0-beta.4",
-    "@automerge/automerge-repo": "2.0.1",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.0.1",
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@automerge/automerge": "3.1.1",
+    "@automerge/automerge-repo": "2.3.0-alpha.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.3.0-alpha.0",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.90.2",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -92,7 +99,7 @@
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "happy-dom": "^13.3.1",
     "jsdom": "^24.0.0",
     "mocha": "^10.6.0",
@@ -102,29 +109,28 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/keyboard": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/schema": "0.8.3"
+    "@dxos/config": "0.8.4-main.28f8d3d",
+    "@dxos/echo": "0.8.4-main.28f8d3d",
+    "@dxos/echo-signals": "0.8.4-main.28f8d3d",
+    "@dxos/keyboard": "0.8.4-main.28f8d3d",
+    "@dxos/random": "0.8.4-main.28f8d3d",
+    "@dxos/react-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-attention": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.28f8d3d",
+    "@dxos/schema": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
+    "@dxos/storybook-utils": "0.8.4-main.28f8d3d"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/react-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { type DataType } from '@dxos/schema';
+
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
+
+export type EditorProps = ThemedClassName<
+  {
+    id: string;
+    text: DataType.Text;
+  } & Omit<UseTextEditorProps, 'id'>
+>;
+
+/**
+ * Minimal text editor.
+ */
+export const Editor = forwardRef<EditorView | undefined, EditorProps>(
+  ({ classNames, id, text, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        initialValue: text.content,
+        ...props,
+      }),
+      [id, text, themeMode],
+    );
+
+    useImperativeHandle(forwardedRef, () => view, [view]);
+    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+  },
+);

package/src/components/Editor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Editor';

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -5,7 +5,7 @@
 import { Rx } from '@effect-rx/rx-react';
 import React, { memo, useMemo } from 'react';
 
-import { rxFromSignal, type NodeArg } from '@dxos/app-graph';
+import { type NodeArg, rxFromSignal } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
 import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
 

package/src/components/EditorToolbar/blocks.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
+import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '../../extensions';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -49,7 +50,7 @@ const createBlockActions = (value: string, getView: () => EditorView, blankLine?
   });
 
 export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
+  const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
   const blockGroupAction = createBlockGroupAction(value);
   const blockActions = createBlockActions(value, getView, state.blankLine);
   return {

package/src/components/EditorToolbar/formatting.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
+import { type Formatting, Inline, addLink, removeLink, setStyle } from '../../extensions';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const formats = {
   strong: 'ph--text-b--regular',

package/src/components/EditorToolbar/headings.ts

@@ -7,10 +7,11 @@ import { type EditorView } from '@codemirror/view';
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
 import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+
 const createHeadingGroupAction = (value: string) =>
   createEditorActionGroup(
     'heading',

package/src/components/EditorToolbar/lists.ts

@@ -7,8 +7,9 @@ import { type EditorView } from '@codemirror/view';
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { addList, List, removeList } from '../../extensions';
+import { List, addList, removeList } from '../../extensions';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',

package/src/components/EditorToolbar/util.ts

@@ -7,20 +7,21 @@ import { type Rx } from '@effect-rx/rx-react';
 import { useMemo } from 'react';
 
 import { type Action } from '@dxos/app-graph';
-import { live, type Live } from '@dxos/live-object';
+import { type Live, live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
-  type MenuSeparator,
+  type ActionGraphProps,
+  type MenuActionProperties,
   type MenuItemGroup,
+  type MenuSeparator,
   type ToolbarMenuActionGroupProperties,
   createMenuAction,
   createMenuItemGroup,
-  type ActionGraphProps,
-  type MenuActionProperties,
 } from '@dxos/react-ui-menu';
 
-import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
+import { type EditorViewMode } from '../../types';
 
 export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
 

package/src/components/EditorToolbar/view-mode.ts

@@ -5,9 +5,10 @@
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { type EditorViewMode } from '../../extensions';
 import { translationKey } from '../../translations';
+import { type EditorViewMode } from '../../types';
+
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
 
 const createViewModeGroupAction = (value: string) =>
   createEditorActionGroup(

package/src/components/Popover/RefDropdownMenu.tsx

@@ -3,7 +3,7 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
 
 import { addEventListener } from '@dxos/async';
 import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
@@ -11,17 +11,23 @@ import { DropdownMenu } from '@dxos/react-ui';
 
 import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
 
-// TODO(burdon): Reconcile with RefPopover?
+// TODO(burdon): Reconcile this file with RefPopover?
 
 const customEventOptions = { capture: true, passive: false };
 
 // Create a context for the dxn value.
-type RefDropdownMenuValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+type RefDropdownMenuValue = Partial<{
+  link: PreviewLinkRef;
+  target: PreviewLinkTarget;
+  pending: boolean;
+}>;
 
 const REF_DROPDOWN_MENU = 'RefDropdownMenu';
 const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
 
-type RefDropdownMenuProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+type RefDropdownMenuProviderProps = PropsWithChildren<{
+  onLookup?: PreviewLookup;
+}>;
 
 const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
   const trigger = useRef<DxRefTag | null>(null);

package/src/components/Popover/RefPopover.tsx

@@ -5,12 +5,12 @@
 import { createContext } from '@radix-ui/react-context';
 import React, {
   type PropsWithChildren,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
   type RefObject,
   forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 
 import { addEventListener } from '@dxos/async';

package/src/components/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Editor';
 export * from './EditorToolbar';
 export * from './Popover';

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

@@ -11,15 +11,15 @@ import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-networ
 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 { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
@@ -41,7 +41,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 }),
       ],
@@ -93,7 +93,9 @@ export default {
   component: Editor,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => <Story />,
-  parameters: { translations },
+  parameters: {
+    translations,
+  },
 };
 
 const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {

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/blast.ts

@@ -9,6 +9,7 @@ import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import defaultsDeep from 'lodash.defaultsdeep';
 
+import { throttle } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 
 export type BlastOptions = {
@@ -214,12 +215,12 @@ class Blaster {
     requestAnimationFrame(this.loop.bind(this));
   }
 
-  shake = throttle<{ time: number }>(({ time }) => {
+  shake = throttle(({ time }: { time: number }) => {
     this._shakeTime = this._shakeTimeMax || time;
     this._shakeTimeMax = time;
   }, 100);
 
-  spawn = throttle<{ element: Element; point: { x: number; y: number } }>(({ element, point }) => {
+  spawn = throttle(({ element, point }: { element: Element; point: { x: number; y: number } }) => {
     const color = getRGBComponents(element, this._options.color);
     const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
     const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
@@ -336,20 +337,6 @@ class Effect2 extends Effect {
 // Utils
 //
 
-function throttle<T>(callback: (arg: T) => void, limit: number): (arg: T) => void {
-  let wait = false;
-  return function (...args: any[]) {
-    if (!wait) {
-      // @ts-ignore
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-
 const getRGBComponents = (node: Element, color: BlastOptions['color']): Particle['color'] => {
   if (typeof color === 'function') {
     return color();

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

@@ -6,5 +6,5 @@ export * from './action';
 export * from './command';
 export * from './command-menu';
 export * from './floating-menu';
-export * from './useCommandMenu';
 export * from './typeahead';
+export * from './useCommandMenu';

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