@dxos/react-ui-editor 0.8.4-main.3a94e84 → 0.8.4-main.406dc2a

package/src/components/EditorToolbar/image.ts

@@ -5,10 +5,14 @@
 import { createEditorAction } from './util';
 
 const createImageUploadAction = (onImageUpload: () => void) =>
-  createEditorAction('image', onImageUpload, {
-    testId: 'editor.toolbar.image',
-    icon: 'ph--image-square--regular',
-  });
+  createEditorAction(
+    'image',
+    {
+      testId: 'editor.toolbar.image',
+      icon: 'ph--image-square--regular',
+    },
+    onImageUpload,
+  );
 
 export const createImageUpload = (onImageUpload: () => void) => ({
   nodes: [createImageUploadAction(onImageUpload)],

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',
@@ -26,23 +27,19 @@ const createListGroupAction = (value: string) =>
 const createListActions = (value: string, getView: () => EditorView) =>
   Object.entries(listStyles).map(([listStyle, icon]) => {
     const checked = value === listStyle;
-    return createEditorAction(
-      `list-${listStyle}`,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
-
-        const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
-        if (checked) {
-          removeList(listType)(view);
-        } else {
-          addList(listType)(view);
-        }
-      },
-      { checked, icon },
-    );
+    return createEditorAction(`list-${listStyle}`, { checked, icon }, () => {
+      const view = getView();
+      if (!view) {
+        return;
+      }
+
+      const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
+      if (checked) {
+        removeList(listType)(view);
+      } else {
+        addList(listType)(view);
+      }
+    });
   });
 
 export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {

package/src/components/EditorToolbar/search.ts

@@ -8,10 +8,14 @@ import { type EditorView } from '@codemirror/view';
 import { createEditorAction } from './util';
 
 const createSearchAction = (getView: () => EditorView) =>
-  createEditorAction('search', () => openSearchPanel(getView()), {
-    testId: 'editor.toolbar.search',
-    icon: 'ph--magnifying-glass--regular',
-  });
+  createEditorAction(
+    'search',
+    {
+      testId: 'editor.toolbar.search',
+      icon: 'ph--magnifying-glass--regular',
+    },
+    () => openSearchPanel(getView()),
+  );
 
 export const createSearch = (getView: () => EditorView) => ({
   nodes: [createSearchAction(getView)],

package/src/components/EditorToolbar/util.ts

@@ -7,7 +7,7 @@ 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 ActionGraphProps,
@@ -53,13 +53,24 @@ export type EditorToolbarProps = ThemedClassName<
 
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
-export const createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
-  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
+export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest,
+  }) as Action<MenuActionProperties>;
 };
 
 export const createEditorActionGroup = (
   id: string,
   props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
   icon?: string,
-) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
+) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+  return createMenuItemGroup(id, {
+    label,
+    icon,
+    iconOnly: true,
+    ...rest,
+  });
+};

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

@@ -5,10 +5,11 @@
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
-import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
 import { translationKey } from '../../translations';
 import { type EditorViewMode } from '../../types';
 
+import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+
 const createViewModeGroupAction = (value: string) =>
   createEditorActionGroup(
     'viewMode',
@@ -28,11 +29,15 @@ const createViewModeActions = (value: string, onViewModeChange: (mode: EditorVie
     readonly: 'ph--pencil-slash--regular',
   }).map(([viewMode, icon]) => {
     const checked = viewMode === value;
-    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
-      label: [`${viewMode} mode label`, { ns: translationKey }],
-      checked,
-      icon,
-    });
+    return createEditorAction(
+      `view-mode--${viewMode}`,
+      {
+        label: [`${viewMode} mode label`, { ns: translationKey }],
+        checked,
+        icon,
+      },
+      () => onViewModeChange(viewMode as EditorViewMode),
+    );
   });
 
 export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {

package/src/components/index.ts

@@ -4,4 +4,3 @@
 
 export * from './Editor';
 export * from './EditorToolbar';
-export * from './Popover';

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

@@ -0,0 +1,220 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension, Prec } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+  keymap,
+} from '@codemirror/view';
+
+export type AutocompleteOptions = {
+  fireIfEmpty?: boolean;
+
+  /**
+   * Callback triggered when Enter is pressed.
+   * @param text The current text in the editor
+   * @returns true if the editor should reset the document.
+   */
+  onSubmit?: (text: string) => boolean | void;
+
+  /**
+   * Function that returns a list of suggestions based on the current text.
+   * @param text The current text before the cursor
+   * @returns Array of suggestion strings
+   */
+  onSuggest?: (text: string) => string[];
+
+  /**
+   * ESC pressed.
+   */
+  onCancel?: () => void;
+};
+
+/**
+ * Creates an autocomplete extension that shows inline suggestions.
+ * Pressing Tab will complete the suggestion.
+ */
+// TODO(burdon): Reconcile with typeahead.
+export const autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel }: AutocompleteOptions = {}): Extension => {
+  const suggest = ViewPlugin.fromClass(
+    class {
+      _decorations: DecorationSet;
+      _currentSuggestion: string | null = null;
+
+      constructor(view: EditorView) {
+        this._decorations = this.computeDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged || update.selectionSet) {
+          this._decorations = this.computeDecorations(update.view);
+        }
+      }
+
+      private computeDecorations(view: EditorView): DecorationSet {
+        const text = view.state.doc.toString();
+        const suggestions = onSuggest?.(text) ?? [];
+        if (!suggestions.length) {
+          this._currentSuggestion = null;
+          return Decoration.none;
+        }
+
+        // Get the first suggestion.
+        this._currentSuggestion = suggestions[0];
+        const suffix = this._currentSuggestion.slice(text.length);
+        if (!suffix) {
+          return Decoration.none;
+        }
+
+        // Always show ghost text at the end of the document.
+        return Decoration.set([
+          Decoration.widget({
+            widget: new InlineSuggestionWidget(suffix),
+            side: 1,
+          }).range(view.state.doc.length),
+        ]);
+      }
+
+      completeSuggestion(view: EditorView): boolean {
+        if (!this._currentSuggestion) {
+          return false;
+        }
+
+        const text = view.state.doc.toString();
+        const suffix = this._currentSuggestion.slice(text.length);
+        if (!suffix) {
+          return false;
+        }
+
+        view.dispatch({
+          changes: {
+            from: view.state.doc.length,
+            insert: suffix,
+          },
+          selection: {
+            anchor: view.state.doc.length + suffix.length,
+          },
+        });
+
+        return true;
+      }
+    },
+    {
+      decorations: (v) => v._decorations,
+    },
+  );
+
+  return [
+    suggest,
+    EditorView.theme({
+      '.cm-inline-suggestion': {
+        opacity: 0.4,
+      },
+    }),
+
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Tab',
+          preventDefault: true,
+          run: (view) => {
+            const plugin = view.plugin(suggest);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
+        },
+        {
+          key: 'ArrowRight',
+          preventDefault: true,
+          run: (view) => {
+            // Only complete if cursor is at the end
+            if (view.state.selection.main.head !== view.state.doc.length) {
+              return false;
+            }
+
+            const plugin = view.plugin(suggest);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
+        },
+        {
+          key: 'Enter',
+          preventDefault: true,
+          run: (view) => {
+            const text = view.state.doc.toString().trim();
+            if (onSubmit && (fireIfEmpty || text.length > 0)) {
+              const reset = onSubmit(text);
+
+              // Clear the document after calling onEnter.
+              if (reset) {
+                view.dispatch({
+                  changes: {
+                    from: 0,
+                    to: view.state.doc.length,
+                    insert: '',
+                  },
+                });
+              }
+            }
+
+            return true;
+          },
+        },
+        {
+          key: 'Shift-Enter',
+          preventDefault: true,
+          run: (view) => {
+            view.dispatch({
+              changes: {
+                from: view.state.selection.main.head,
+                insert: '\n',
+              },
+              selection: {
+                anchor: view.state.selection.main.head + 1,
+                head: view.state.selection.main.head + 1,
+              },
+            });
+            return true;
+          },
+        },
+        {
+          key: 'Escape',
+          preventDefault: true,
+          run: (view) => {
+            // Clear the entire document.
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: view.state.doc.length,
+                insert: '',
+              },
+            });
+            onCancel?.();
+            return true;
+          },
+        },
+      ]),
+    ),
+  ];
+};
+
+class InlineSuggestionWidget extends WidgetType {
+  constructor(private suffix: string) {
+    super();
+  }
+
+  override toDOM(): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = this.suffix;
+    span.className = 'cm-inline-suggestion';
+    return span;
+  }
+
+  override eq(other: InlineSuggestionWidget): boolean {
+    return other.suffix === this.suffix;
+  }
+}

package/src/extensions/autocomplete/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './autocomplete';
+export * from './match';
+export * from './placeholder';
+export * from './typeahead';

package/src/extensions/autocomplete/match.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export type CompoetionContext = { line: string };
+
+export type CompletionOptions = {
+  default?: string;
+  minLength?: number;
+};
+
+/**
+ * Util to match current line to a static list of completions.
+ */
+export const staticCompletion =
+  (completions: string[], options: CompletionOptions = {}) =>
+  ({ line }: CompoetionContext) => {
+    if (line.length === 0 && options.default) {
+      return options.default;
+    }
+
+    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, 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 → autocomplete}/placeholder.ts

@@ -4,27 +4,30 @@
 //
 
 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';
 
 type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 
 export type PlaceholderOptions = {
-  delay?: number;
   content: Content;
+  delay?: number;
 };
 
-export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Extension => {
+/**
+ * Shows a transient placeholder at the current cursor position.
+ */
+export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
   const plugin = ViewPlugin.fromClass(
     class {
-      decorations = Decoration.none;
-      timeout: ReturnType<typeof setTimeout> | undefined;
+      _timeout: ReturnType<typeof setTimeout> | undefined;
+      _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
-        if (this.timeout) {
-          window.clearTimeout(this.timeout);
-          this.timeout = undefined;
+        if (this._timeout) {
+          window.clearTimeout(this._timeout);
+          this._timeout = undefined;
         }
 
         // Check if the active line (where cursor is) is empty.
@@ -33,10 +36,10 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
         if (isEmpty) {
           // Create widget decoration at the start of the current line.
           const lineStart = activeLine.from;
-          this.timeout = setTimeout(() => {
-            this.decorations = Decoration.set([
+          this._timeout = setTimeout(() => {
+            this._decorations = Decoration.set([
               Decoration.widget({
-                widget: new Placeholder(content),
+                widget: new PlaceholderWidget(content),
                 side: 1,
               }).range(lineStart),
             ]);
@@ -45,18 +48,18 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
           }, delay);
         }
 
-        this.decorations = Decoration.none;
+        this._decorations = Decoration.none;
       }
 
       destroy() {
-        if (this.timeout) {
-          clearTimeout(this.timeout);
+        if (this._timeout) {
+          clearTimeout(this._timeout);
         }
       }
     },
     {
       provide: (plugin) => {
-        return [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)];
+        return [EditorView.decorations.of((view) => view.plugin(plugin)?._decorations ?? Decoration.none)];
       },
     },
   );
@@ -66,7 +69,7 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
     : plugin;
 };
 
-class Placeholder extends WidgetType {
+export class PlaceholderWidget extends WidgetType {
   constructor(readonly content: Content) {
     super();
   }
@@ -75,6 +78,7 @@ class Placeholder extends WidgetType {
     const wrap = document.createElement('span');
     wrap.className = 'cm-placeholder';
     wrap.style.pointerEvents = 'none';
+    wrap.setAttribute('aria-hidden', 'true');
     wrap.appendChild(
       typeof this.content === 'string'
         ? document.createTextNode(this.content)
@@ -82,7 +86,7 @@ class Placeholder extends WidgetType {
           ? this.content(view)
           : this.content.cloneNode(true),
     );
-    wrap.setAttribute('aria-hidden', 'true');
+
     return wrap;
   }
 
@@ -92,7 +96,7 @@ class Placeholder extends WidgetType {
       return null;
     }
 
-    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const style = getComputedStyle(dom.parentNode as HTMLElement);
     const rect = flattenRect(rects[0], style.direction !== 'rtl');
     const lineHeight = parseInt(style.lineHeight);
     if (rect.bottom - rect.top > lineHeight * 1.5) {

package/src/extensions/{command → autocomplete}/typeahead.ts

@@ -2,28 +2,27 @@
 // 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';
+import { type CompoetionContext } from './match';
+import { PlaceholderWidget } from './placeholder';
 
-export type TypeaheadContext = { line: string };
-
-// TODO(burdon): Option to complete only at end of line?
+// TODO(burdon): Option to complete only at end of line.
 export type TypeaheadOptions = {
-  onComplete?: (context: TypeaheadContext) => string | undefined;
+  onComplete?: (context: CompoetionContext) => string | undefined;
 };
 
 /**
- * CodeMirror extension for typeahead completion.
+ * Shows a completion placeholder.
  */
 export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   let hint: string | undefined;
@@ -57,7 +56,7 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
             const str = update.state.sliceDoc(line.from, selection.from);
             hint = onComplete?.({ line: str });
             if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new PlaceholderWidget(hint) }));
             }
           }
 
@@ -86,44 +85,3 @@ 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[], options: CompletionOptions = {}) =>
-  ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && options.default) {
-      return options.default;
-    }
-
-    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, 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);
-  }
-};