@dxos/react-ui-editor 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

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',
@@ -28,31 +29,27 @@ const createFormattingGroup = (formatting: Formatting) =>
 const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
   Object.entries(formats).map(([type, icon]) => {
     const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(
-      type,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
+    return createEditorAction(type, { checked, icon }, () => {
+      const view = getView();
+      if (!view) {
+        return;
+      }
 
-        if (type === 'link') {
-          checked ? removeLink(view) : addLink()(view);
-          return;
-        }
+      if (type === 'link') {
+        checked ? removeLink(view) : addLink()(view);
+        return;
+      }
 
-        const inlineType =
-          type === 'strong'
-            ? Inline.Strong
-            : type === 'emphasis'
-              ? Inline.Emphasis
-              : type === 'strikethrough'
-                ? Inline.Strikethrough
-                : Inline.Code;
-        setStyle(inlineType, !checked)(view);
-      },
-      { checked, icon },
-    );
+      const inlineType =
+        type === 'strong'
+          ? Inline.Strong
+          : type === 'emphasis'
+            ? Inline.Emphasis
+            : type === 'strikethrough'
+              ? Inline.Strikethrough
+              : Inline.Code;
+      setStyle(inlineType, !checked)(view);
+    });
   });
 
 export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {

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',
@@ -18,12 +19,13 @@ const createHeadingGroupAction = (value: string) =>
       variant: 'dropdownMenu',
       applyActive: true,
       selectCardinality: 'single',
+      // TODO(wittjosiah): Remove? Not sure this does anything.
       value,
     } as ToolbarMenuActionGroupProperties,
     'ph--text-h--regular',
   );
 
-const createHeadingActions = (getView: () => EditorView) =>
+const createHeadingActions = (currentLevel: string, getView: () => EditorView) =>
   Object.entries({
     '0': 'ph--paragraph--regular',
     '1': 'ph--text-h-one--regular',
@@ -34,22 +36,27 @@ const createHeadingActions = (getView: () => EditorView) =>
     '6': 'ph--text-h-six--regular',
   }).map(([levelStr, icon]) => {
     const level = parseInt(levelStr);
-    return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
-      label: ['heading level label', { count: level, ns: translationKey }],
-      icon,
-    });
+    return createEditorAction(
+      `heading--${levelStr}`,
+      {
+        label: ['heading level label', { count: level, ns: translationKey }],
+        icon,
+        checked: levelStr === currentLevel,
+      },
+      () => setHeading(level)(getView()),
+    );
   });
 
 const computeHeadingValue = (state: EditorToolbarState) => {
   const blockType = state ? state.blockType : 'paragraph';
-  const header = blockType && /heading(\d)/.exec(blockType);
-  return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
+  const heading = blockType && /heading(\d)/.exec(blockType);
+  return heading ? heading[1] : blockType === 'paragraph' || !blockType ? '0' : '';
 };
 
 export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
   const headingValue = computeHeadingValue(state);
   const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(getView);
+  const headingActions = createHeadingActions(headingValue, getView);
   return {
     nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
     edges: [

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,8 +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 ThemedClassName } from '@dxos/react-ui';
+import { type Live, live } from '@dxos/live-object';
 import {
   type ActionGraphProps,
   type MenuActionProperties,
@@ -23,23 +22,12 @@ import type { EditorAction, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 import { type EditorViewMode } from '../../types';
 
-export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
+export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
 
-export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
+export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}): Live<EditorToolbarState> => {
   return useMemo(() => live<EditorToolbarState>(initialState), []);
 };
 
-export type EditorToolbarFeatureFlags = Partial<{
-  headings: boolean;
-  formatting: boolean;
-  lists: boolean;
-  blocks: boolean;
-  search: boolean;
-  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
-  image: () => void;
-  viewMode: (mode: EditorViewMode) => void;
-}>;
-
 export type EditorToolbarActionGraphProps = {
   state: Live<EditorToolbarState>;
   getView: () => EditorView;
@@ -47,19 +35,26 @@ export type EditorToolbarActionGraphProps = {
   customActions?: Rx.Rx<ActionGraphProps>;
 };
 
-export type EditorToolbarProps = ThemedClassName<
-  EditorToolbarActionGraphProps & EditorToolbarFeatureFlags & { attendableId?: string; role?: string }
->;
-
 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);
+  }
+};