@dxos/react-ui-editor 0.8.4-main.5ea62a8 → 0.8.4-main.72ec0f3

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,11 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { type EditorView } from '@codemirror/view';
+import { Atom } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
-import { rxFromSignal } from '@dxos/app-graph';
-import { ElevationProvider } from '@dxos/react-ui';
+import { atomFromSignal } from '@dxos/app-graph';
+import { type Live } from '@dxos/live-object';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
   MenuProvider,
@@ -15,120 +17,128 @@ import {
   useMenuActions,
 } from '@dxos/react-ui-menu';
 
+import { type EditorViewMode } from '../../types';
+
+import { createLists } from './actions';
 import { createBlocks } from './blocks';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
 import { createImageUpload } from './image';
-import { createLists } from './lists';
 import { createSearch } from './search';
-import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
+import { type EditorToolbarState } from './useEditorToolbar';
 import { createViewMode } from './view-mode';
 
+export type EditorToolbarFeatureFlags = Partial<{
+  showHeadings: boolean;
+  showFormatting: boolean;
+  showLists: boolean;
+  showBlocks: boolean;
+  showSearch: boolean;
+
+  // TODO(wittjosiah): Factor out (depends on plugin-level capabilities.)
+  onImageUpload: () => void;
+  onViewModeChange: (mode: EditorViewMode) => void;
+}>;
+
+export type EditorToolbarActionGraphProps = {
+  state: Live<EditorToolbarState>;
+  getView: () => EditorView;
+  // TODO(wittjosiah): Control positioning.
+  customActions?: Atom.Atom<ActionGraphProps>;
+};
+
+export type EditorToolbarProps = ThemedClassName<
+  {
+    role?: string;
+    attendableId?: string;
+  } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
+>;
+
+// TODO(burdon): Remove role dependency.
+export const EditorToolbar = memo(({ classNames, role, attendableId, ...props }: EditorToolbarProps) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <MenuProvider {...menuProps} attendableId={attendableId}>
+        <ToolbarMenu classNames={classNames} textBlockWidth />
+      </MenuProvider>
+    </ElevationProvider>
+  );
+});
+
+type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
+  EditorToolbarFeatureFlags;
+
+// TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
+//   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
+//   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
+const useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
+  const menuCreator = useMemo(
+    () => createToolbarActions({ state, getView, customActions, ...features }),
+    [
+      state,
+      getView,
+      customActions,
+      features?.showHeadings,
+      features?.showFormatting,
+      features?.showLists,
+      features?.showBlocks,
+      features?.showSearch,
+      features?.onImageUpload,
+      features?.onViewModeChange,
+    ],
+  );
+
+  return useMenuActions(menuCreator);
+};
+
 const createToolbarActions = ({
-  getView,
   state,
+  getView,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags &
-  Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<ActionGraphProps> => {
-  return Rx.make((get) => {
+}: ToolbarActionsProps): Atom.Atom<ActionGraphProps> => {
+  return Atom.make((get) => {
     const graph: ActionGraphProps = {
       nodes: [],
       edges: [],
     };
 
-    if (features.headings ?? true) {
-      const headings = get(rxFromSignal(() => createHeadings(state, getView)));
-      graph.nodes.push(...headings.nodes);
-      graph.edges.push(...headings.edges);
-    }
-    if (features.formatting ?? true) {
-      const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
-      graph.nodes.push(...formatting.nodes);
-      graph.edges.push(...formatting.edges);
+    // TODO(burdon): Builder pattern?
+    const addSubGraph = (graph: ActionGraphProps, subGraph: ActionGraphProps) => {
+      graph.nodes.push(...subGraph.nodes);
+      graph.edges.push(...subGraph.edges);
+    };
+
+    if (features?.showHeadings ?? true) {
+      addSubGraph(graph, get(atomFromSignal(() => createHeadings(state, getView))));
     }
-    if (features.lists ?? true) {
-      const lists = get(rxFromSignal(() => createLists(state, getView)));
-      graph.nodes.push(...lists.nodes);
-      graph.edges.push(...lists.edges);
+    if (features?.showFormatting ?? true) {
+      addSubGraph(graph, get(atomFromSignal(() => createFormatting(state, getView))));
     }
-    if (features.blocks ?? true) {
-      const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
-      graph.nodes.push(...blocks.nodes);
-      graph.edges.push(...blocks.edges);
+    if (features?.showLists ?? true) {
+      addSubGraph(graph, get(atomFromSignal(() => createLists(state, getView))));
     }
-    if (features.image) {
-      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
-      graph.nodes.push(...image.nodes);
-      graph.edges.push(...image.edges);
+    if (features?.showBlocks ?? true) {
+      addSubGraph(graph, get(atomFromSignal(() => createBlocks(state, getView))));
     }
-    {
-      const gap = createGapSeparator();
-      graph.nodes.push(...gap.nodes);
-      graph.edges.push(...gap.edges);
+    if (features?.onImageUpload) {
+      addSubGraph(graph, get(atomFromSignal(() => createImageUpload(features.onImageUpload!))));
     }
+
+    addSubGraph(graph, createGapSeparator());
+
     if (customActions) {
-      const custom = get(customActions);
-      graph.nodes.push(...custom.nodes);
-      graph.edges.push(...custom.edges);
+      addSubGraph(graph, get(customActions));
     }
-    if (features.search ?? true) {
-      const search = get(rxFromSignal(() => createSearch(getView)));
-      graph.nodes.push(...search.nodes);
-      graph.edges.push(...search.edges);
+    if (features?.showSearch ?? true) {
+      addSubGraph(graph, get(atomFromSignal(() => createSearch(getView))));
     }
-    if (features.viewMode) {
-      const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
-      graph.nodes.push(...viewMode.nodes);
-      graph.edges.push(...viewMode.edges);
+    if (features?.onViewModeChange) {
+      addSubGraph(graph, get(atomFromSignal(() => createViewMode(state, features.onViewModeChange!))));
     }
 
     return graph;
   });
 };
-
-// TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
-//   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
-//   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
-const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
-  const menuCreator = useMemo(
-    () =>
-      createToolbarActions({
-        getView: props.getView,
-        state: props.state,
-        customActions: props.customActions,
-        headings: props.headings,
-        formatting: props.formatting,
-        lists: props.lists,
-        blocks: props.blocks,
-        image: props.image,
-        search: props.search,
-        viewMode: props.viewMode,
-      }),
-    [
-      props.getView,
-      props.state,
-      props.customActions,
-      props.headings,
-      props.formatting,
-      props.lists,
-      props.blocks,
-      props.image,
-      props.search,
-      props.viewMode,
-    ],
-  );
-
-  return useMenuActions(menuCreator);
-};
-
-export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-});

package/src/components/EditorToolbar/{lists.ts → actions.ts}

@@ -4,12 +4,18 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type Action, type NodeArg } from '@dxos/app-graph';
+import {
+  type MenuActionProperties,
+  type ToolbarMenuActionGroupProperties,
+  createMenuAction,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
 
 import { List, addList, removeList } from '../../extensions';
+import { translationKey } from '../../translations';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -17,6 +23,43 @@ const listStyles = {
   task: 'ph--list-checks--regular',
 };
 
+export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
+  const value = state.listStyle ?? '';
+  const listGroupAction = createListGroupAction(value);
+  const listActionsMap = createListActions(value, getView);
+  return {
+    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
+    edges: [
+      { source: 'root', target: 'list' },
+      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
+    ],
+  };
+};
+
+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,
+) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+
+  return createMenuItemGroup(id, {
+    label,
+    icon,
+    iconOnly: true,
+    ...rest,
+  });
+};
+
 const createListGroupAction = (value: string) =>
   createEditorActionGroup('list', {
     variant: 'toggleGroup',
@@ -41,16 +84,3 @@ const createListActions = (value: string, getView: () => EditorView) =>
       }
     });
   });
-
-export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state.listStyle ?? '';
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
-    edges: [
-      { source: 'root', target: 'list' },
-      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
-    ],
-  };
-};

package/src/components/EditorToolbar/blocks.ts

@@ -9,7 +9,8 @@ import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '../../extensions';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {

package/src/components/EditorToolbar/formatting.ts

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

package/src/components/EditorToolbar/headings.ts

@@ -10,7 +10,8 @@ import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createHeadingGroupAction = (value: string) =>
   createEditorActionGroup(
@@ -19,12 +20,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',
@@ -40,6 +42,7 @@ const createHeadingActions = (getView: () => EditorView) =>
       {
         label: ['heading level label', { count: level, ns: translationKey }],
         icon,
+        checked: levelStr === currentLevel,
       },
       () => setHeading(level)(getView()),
     );
@@ -47,14 +50,14 @@ const createHeadingActions = (getView: () => EditorView) =>
 
 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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createEditorAction } from './util';
+import { createEditorAction } from './actions';
 
 const createImageUploadAction = (onImageUpload: () => void) =>
   createEditorAction(

package/src/components/EditorToolbar/index.ts

@@ -3,10 +3,6 @@
 //
 
 export * from './EditorToolbar';
-export {
-  type EditorToolbarState,
-  type EditorToolbarActionGraphProps,
-  useEditorToolbarState,
-  createEditorAction,
-  createEditorActionGroup,
-} from './util';
+
+export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';
+export { createEditorAction, createEditorActionGroup } from './actions';

package/src/components/EditorToolbar/search.ts

@@ -5,7 +5,7 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
-import { createEditorAction } from './util';
+import { createEditorAction } from './actions';
 
 const createSearchAction = (getView: () => EditorView) =>
   createEditorAction(

package/src/components/EditorToolbar/useEditorToolbar.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type Live, live } from '@dxos/live-object';
+
+import { type Formatting } from '../../extensions';
+import { type EditorViewMode } from '../../types';
+
+// TODO(burdon): Move to extensions.
+export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
+
+/**
+ * @deprecated Use Editor.Root
+ */
+export const useEditorToolbar = (initialState: Partial<EditorToolbarState> = {}): Live<EditorToolbarState> => {
+  return useMemo(() => live<EditorToolbarState>(initialState), []);
+};

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

@@ -8,7 +8,8 @@ import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 import { translationKey } from '../../translations';
 import { type EditorViewMode } from '../../types';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createViewModeGroupAction = (value: string) =>
   createEditorActionGroup(

package/src/components/index.ts

@@ -3,5 +3,11 @@
 //
 
 export * from './Editor';
-export * from './EditorToolbar';
-export * from './Popover';
+
+// export { type GetMenuContext } from './EditorMenuProvider';
+
+// TODO(burdon): Remove once Editor is fully migrated.
+export { EditorContent, createEditorController } from './EditorContent';
+export * from './EditorMenuProvider';
+export * from './EditorPreviewProvider';
+export { EditorToolbar, type EditorToolbarProps, type EditorToolbarState, useEditorToolbar } from './EditorToolbar';

package/src/extensions/autocomplete/autocomplete.ts

@@ -0,0 +1,151 @@
+//
+// 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 = {
+  /**
+   * 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[];
+};
+
+/**
+ * Creates an autocomplete extension that shows inline suggestions.
+ * Pressing Tab will complete the suggestion.
+ *
+ * @deprecated Use typeahead.
+ */
+export const autocomplete = ({ onSuggest }: 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;
+          },
+        },
+      ]),
+    ),
+  ];
+};
+
+class InlineSuggestionWidget extends WidgetType {
+  constructor(private suffix: string) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this.suffix === other.suffix;
+  }
+
+  override toDOM() {
+    const span = document.createElement('span');
+    span.textContent = this.suffix;
+    span.className = 'cm-inline-suggestion';
+    return span;
+  }
+}

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);
+  }
+};