@dxos/react-ui-editor 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/components/EditorToolbar/lists.ts

@@ -4,12 +4,12 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { List, addList, removeList } from '@dxos/ui-editor';
 
-import { List, addList, removeList } from '../../extensions';
+import { translationKey } from '#translations';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { type EditorToolbarState } from './types';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -17,40 +17,42 @@ const listStyles = {
   task: 'ph--list-checks--regular',
 };
 
-const createListGroupAction = (value: string) =>
-  createEditorActionGroup('list', {
-    variant: 'toggleGroup',
-    selectCardinality: 'single',
-    value,
-  } as ToolbarMenuActionGroupProperties);
-
-const createListActions = (value: string, getView: () => EditorView) =>
-  Object.entries(listStyles).map(([listStyle, icon]) => {
-    const checked = value === listStyle;
-    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) => {
-  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 })),
-    ],
+/** Add list actions to the builder. */
+export const addLists =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state.listStyle ?? '';
+    builder.group(
+      'list',
+      {
+        label: ['list.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [listStyle, icon] of Object.entries(listStyles)) {
+          const checked = value === listStyle;
+          group.action(
+            `list-${listStyle}`,
+            { label: [`list.${listStyle}.label`, { ns: translationKey }], 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);
+              }
+            },
+          );
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/search.ts

@@ -5,19 +5,21 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
-import { createEditorAction } from './util';
+import { type ActionGroupBuilderFn } from '@dxos/react-ui-menu';
 
-const createSearchAction = (getView: () => EditorView) =>
-  createEditorAction(
-    'search',
-    {
-      testId: 'editor.toolbar.search',
-      icon: 'ph--magnifying-glass--regular',
-    },
-    () => openSearchPanel(getView()),
-  );
+import { translationKey } from '#translations';
 
-export const createSearch = (getView: () => EditorView) => ({
-  nodes: [createSearchAction(getView)],
-  edges: [{ source: 'root', target: 'search' }],
-});
+/** Add search action to the builder. */
+export const addSearch =
+  (getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    builder.action(
+      'search',
+      {
+        label: ['search.label', { ns: translationKey }],
+        testId: 'editor.toolbar.search',
+        icon: 'ph--magnifying-glass--regular',
+      },
+      () => openSearchPanel(getView()),
+    );
+  };

package/src/components/EditorToolbar/types.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Formatting } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
+
+export type EditorToolbarState = Formatting & { viewMode?: EditorViewMode };

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

@@ -2,53 +2,48 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-import { translationKey } from '../../translations';
-import { type EditorViewMode } from '../../types';
+import { translationKey } from '#translations';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { type EditorToolbarState } from './types';
 
-const createViewModeGroupAction = (value: string) =>
-  createEditorActionGroup(
-    'viewMode',
-    {
-      variant: 'dropdownMenu',
-      applyActive: true,
-      selectCardinality: 'single',
-      value,
-    } as ToolbarMenuActionGroupProperties,
-    'ph--eye--regular',
-  );
+const viewModes = {
+  preview: 'ph--eye--regular',
+  source: 'ph--pencil-simple--regular',
+  readonly: 'ph--pencil-slash--regular',
+};
 
-const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
-  Object.entries({
-    preview: 'ph--eye--regular',
-    source: 'ph--pencil-simple--regular',
-    readonly: 'ph--pencil-slash--regular',
-  }).map(([viewMode, icon]) => {
-    const checked = viewMode === value;
-    return createEditorAction(
-      `view-mode--${viewMode}`,
+/** Add view mode actions to the builder. */
+export const addViewMode =
+  (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state.viewMode ?? 'source';
+    builder.group(
+      'viewMode',
       {
-        label: [`${viewMode} mode label`, { ns: translationKey }],
-        checked,
-        icon,
+        label: ['view-mode.label', { ns: translationKey }],
+        icon: 'ph--eye--regular',
+        iconOnly: true,
+        variant: 'dropdownMenu',
+        applyActive: true,
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [viewMode, icon] of Object.entries(viewModes)) {
+          const checked = viewMode === value;
+          group.action(
+            `view-mode--${viewMode}`,
+            {
+              label: [`view-mode.${viewMode}.label`, { ns: translationKey }],
+              checked,
+              icon,
+            },
+            () => onViewModeChange(viewMode as EditorViewMode),
+          );
+        }
       },
-      () => onViewModeChange(viewMode as EditorViewMode),
     );
-  });
-
-export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
-  const value = state.viewMode ?? 'source';
-  const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value, onViewModeChange);
-  return {
-    nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
-    edges: [
-      { source: 'root', target: 'viewMode' },
-      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),
-    ],
   };
-};

package/src/components/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './Editor';
-export * from './EditorToolbar';
-export * from './Popover';
+
+export * from './EditorMenuProvider';
+export * from './EditorPreviewProvider';

package/src/extensions/Assistant.stories.tsx

@@ -0,0 +1,112 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { AiService } from '@dxos/ai';
+import { AiServiceTestingPreset } from '@dxos/ai/testing';
+import { useThemeContext } from '@dxos/react-ui';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { compactSlots, createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+import { trim } from '@dxos/util';
+
+import { translations } from '#translations';
+
+import { Editor, type EditorViewProps } from '../components';
+import { assistant, type AssistantOptions } from './assistant-extension';
+
+// TODO(burdon): Factor out.
+const useTestGenerate = () => {
+  const [generate, setGenerate] = useState<AssistantOptions['generate']>();
+  useEffect(() => {
+    let disposed = false;
+    const rt = ManagedRuntime.make(
+      AiService.model('@anthropic/claude-haiku-4-5').pipe(
+        Layer.provide(AiServiceTestingPreset('edge-remote')),
+        Layer.orDie,
+      ),
+    );
+
+    if (!disposed) {
+      setGenerate(
+        () =>
+          ({ instructions, content }: { instructions: string; content: string }) =>
+            rt.runPromise(
+              Effect.gen(function* () {
+                const prompt = [instructions, content].join('\n\n');
+                const response = yield* LanguageModel.generateText({ prompt });
+                return response.text;
+              }),
+            ),
+      );
+    }
+
+    return () => {
+      disposed = true;
+      void rt.dispose();
+    };
+  }, []);
+
+  return generate;
+};
+
+type DefaultStoryProps = Pick<EditorViewProps, 'value'>;
+
+const DefaultStory = (props: DefaultStoryProps) => {
+  const { themeMode } = useThemeContext();
+  const generate = useTestGenerate();
+  const extensions = useMemo(
+    () =>
+      generate
+        ? [
+            createBasicExtensions({ placeholder: 'Type here...' }),
+            createThemeExtensions({ themeMode, slots: compactSlots }),
+            assistant({ generate }),
+          ]
+        : [],
+    [generate, themeMode],
+  );
+
+  if (extensions.length === 0) {
+    return <Loading />;
+  }
+
+  return (
+    <Editor.Root>
+      <Editor.View {...props} classNames='dx-container border border-subdued-separator' extensions={extensions} />
+    </Editor.Root>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/Assistant',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  tags: ['experimental'],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: trim`
+      This text has a speling mistake.
+
+      And it grammatical errors.
+
+      But we can fix it.
+    `,
+  },
+};

package/src/extensions/assistant-extension.tsx

@@ -0,0 +1,223 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Diagnostic, forEachDiagnostic, linter, setDiagnostics } from '@codemirror/lint';
+import { ChangeSet, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+import { log } from '@dxos/log';
+import { safeParseJson, trim } from '@dxos/util';
+
+const DEFAULT_INSTRUCTIONS = trim`
+  Proofread the input text below.
+  Identify typos and grammatical errors. 
+  Return ONLY a valid JSON array of objects with fields: "original" (string), "replacement" (string), "context" (string, 3-5 words around match).
+  --
+`;
+
+export type AssistantOptions = {
+  /**
+   * Invoke the language model with the given prompt and return the raw text response.
+   */
+  generate: (request: { instructions: string; content: string }) => Promise<string>;
+  /**
+   * Instructions to use for the language model.
+   */
+  instructions?: string;
+  /**
+   * Show panel automatically.
+   */
+  autoPanel?: boolean;
+  /**
+   * Debounce delay.
+   */
+  delay?: number;
+};
+
+const underline = (color: string) => {
+  const svg = trim`
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
+      <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width="1"/>
+    </svg>
+  `;
+
+  return `url('data:image/svg+xml;base64,${btoa(svg)}') !important`;
+};
+
+export const assistant = (options: AssistantOptions): Extension[] => {
+  const styles = getComputedStyle(document.documentElement);
+  const style = {
+    info: styles.getPropertyValue('--color-green-500').trim(),
+    warning: styles.getPropertyValue('--color-orange-500').trim(),
+    error: styles.getPropertyValue('--color-rose-500').trim(),
+  };
+
+  return [
+    assistantLinter(options),
+    EditorView.baseTheme({
+      '.cm-lintRange-info': {
+        backgroundImage: underline(style.info),
+      },
+      '.cm-lintRange-warning': {
+        backgroundImage: underline(style.warning),
+      },
+      '.cm-lintRange-error': {
+        backgroundImage: underline(style.error),
+      },
+
+      '.cm-panels-bottom': {
+        borderTop: '1px solid var(--color-separator) !important',
+      },
+      '.cm-panel-lint .cm-panel': {
+        outline: 'none !important',
+      },
+      /** @apply dx-button */
+      '.cm-panel button': {
+        color: 'var(--color-base-surface-text) !important',
+      },
+      '.cm-panel.cm-panel-lint ul': {
+        color: 'var(--color-base-surface-text) !important',
+        backgroundColor: 'var(--color-base-surface) !important',
+        marginRight: '2rem !important',
+      },
+      '.cm-panel.cm-panel-lint ul [aria-selected]': {
+        color: 'var(--color-base-surface-text) !important',
+        backgroundColor: 'var(--color-base-surface) !important',
+      },
+      '.cm-panel.cm-panel-lint ul li': {
+        display: 'grid',
+        gridTemplateColumns: '1fr auto',
+        alignItems: 'center',
+      },
+      '.cm-panel.cm-panel-lint ul li .cm-diagnosticText': {
+        paddingRight: '8px !important',
+      },
+      '.cm-panel.cm-panel-lint ul li button.cm-diagnosticAction': {
+        margin: 'none !important',
+      },
+      '.cm-diagnostic': {
+        padding: '0px 8px !important',
+        whiteSpace: 'pre-wrap !important',
+      },
+      '.cm-diagnostic-info': {
+        border: 'none !important',
+      },
+    }),
+  ];
+};
+
+//
+// Linter
+//
+
+type Suggestion = {
+  original: string;
+  replacement: string;
+  context: string;
+};
+
+const isSuggestion = (value: unknown): value is Suggestion =>
+  typeof value === 'object' &&
+  value !== null &&
+  typeof (value as Suggestion).original === 'string' &&
+  typeof (value as Suggestion).replacement === 'string' &&
+  typeof (value as Suggestion).context === 'string';
+
+/**
+ * Find the index of `original` within `content`, using `context` to disambiguate when there are multiple occurrences.
+ */
+const findSuggestionIndex = (content: string, suggestion: Suggestion): number => {
+  const firstIdx = content.indexOf(suggestion.original);
+  if (firstIdx === -1) {
+    return -1;
+  }
+
+  // Check for duplicate occurrences; use context to disambiguate.
+  const secondIdx = content.indexOf(suggestion.original, firstIdx + 1);
+  if (secondIdx === -1) {
+    return firstIdx;
+  }
+
+  // Find the occurrence whose surrounding text best matches the context.
+  const contextIdx = content.indexOf(suggestion.context);
+  if (contextIdx !== -1) {
+    const contextEnd = contextIdx + suggestion.context.length;
+    if (secondIdx >= contextIdx && secondIdx <= contextEnd) {
+      return secondIdx;
+    }
+  }
+
+  return firstIdx;
+};
+
+const replaceTextAndDropLintAtRange = (view: EditorView, from: number, to: number, insert: string) => {
+  const kept: Diagnostic[] = [];
+  forEachDiagnostic(view.state, (diagnostic, diagnosticFrom, diagnosticTo) => {
+    if (diagnosticFrom < to && diagnosticTo > from) {
+      return;
+    }
+    kept.push({ ...diagnostic, from: diagnosticFrom, to: diagnosticTo });
+  });
+  const changeSet = ChangeSet.of({ from, to, insert }, view.state.doc.length);
+  const next = kept.map((d) => ({
+    ...d,
+    from: changeSet.mapPos(d.from, 1),
+    to: changeSet.mapPos(d.to, -1),
+  }));
+  view.dispatch({
+    changes: { from, to, insert },
+    ...setDiagnostics(view.state, next),
+  });
+};
+
+const assistantLinter = ({
+  generate,
+  instructions = DEFAULT_INSTRUCTIONS,
+  autoPanel = true,
+  delay = 2_000,
+}: AssistantOptions) =>
+  linter(
+    async (view) => {
+      try {
+        const content = view.state.doc.toString();
+        const result = await generate({ instructions, content });
+
+        const [match] = result.match(/\[.*\]/s) ?? [];
+        const parsed = match ? safeParseJson<unknown[]>(match, []) : [];
+        const suggestions = Array.isArray(parsed) ? parsed.filter(isSuggestion) : [];
+        if (suggestions && suggestions.length > 0) {
+          const diagnostics: Diagnostic[] = [];
+          for (const suggestion of suggestions) {
+            const idx = findSuggestionIndex(content, suggestion);
+            if (idx !== -1) {
+              diagnostics.push({
+                from: idx,
+                to: idx + suggestion.original.length,
+                severity: 'info',
+                message: `Suggestion: ${suggestion.replacement}`,
+                actions: [
+                  {
+                    name: 'Apply',
+                    apply: (view, from, to) => {
+                      replaceTextAndDropLintAtRange(view, from, to, suggestion.replacement);
+                    },
+                  },
+                ],
+              });
+            }
+          }
+
+          return diagnostics;
+        }
+      } catch (err) {
+        log.catch(err);
+      }
+
+      return [];
+    },
+    {
+      delay,
+      autoPanel,
+    },
+  );

package/src/extensions/index.ts

@@ -1,28 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-export * from './annotations';
-export * from './autocomplete';
-export * from './autoscroll';
-export * from './automerge';
-export * from './awareness';
-export * from './blast';
-export * from './command';
-export * from './comments';
-export * from './debug';
-export * from './dnd';
-export * from './factories';
-export * from './focus';
-export * from './folding';
-export * from './hashtag';
-export * from './json';
-export * from './listener';
-export * from './markdown';
-export * from './mention';
-export * from './modes';
-export * from './outliner';
-export * from './preview';
-export * from './selection';
-export * from './tags';
-export * from './typewriter';
+export * from './assistant-extension';

package/src/hooks/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './useBasicMarkdownExtensions';
 export * from './useTextEditor';

package/src/hooks/useBasicMarkdownExtensions.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { useMemo } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+export type UseBasicMarkdownExtensionsOptions = {
+  /** Placeholder text shown when the editor is empty. */
+  placeholder?: string;
+  /** Enables markdown visual decorations. Pass `false` to disable. Defaults to `true`. */
+  decorate?: boolean;
+  /**
+   * Extra extensions appended to the returned array.
+   * Callers must memoize this array — it is used as a dependency of {@link useMemo}.
+   */
+  extensions?: Extension[];
+};
+
+/**
+ * Returns the standard CodeMirror extension stack for an inline markdown editor:
+ * basic editor behaviors, themed syntax highlighting (theme mode read from {@link useThemeContext}),
+ * markdown parsing, and visual decorations.
+ *
+ * Used by surfaces such as `AgentProperties` and `MagazineProperties` to render the
+ * `instructions` field of an object as a small editable markdown block.
+ *
+ * The memoization depends on primitive option values plus the `extensions` array reference,
+ * so callers passing fresh option literals each render still hit the cache.
+ */
+export const useBasicMarkdownExtensions = ({
+  placeholder,
+  decorate = true,
+  extensions,
+}: UseBasicMarkdownExtensionsOptions = {}): Extension[] => {
+  const { themeMode } = useThemeContext();
+  return useMemo(
+    () => [
+      createBasicExtensions({ placeholder }),
+      createThemeExtensions({ syntaxHighlighting: true, themeMode }),
+      createMarkdownExtensions(),
+      ...(decorate ? [decorateMarkdown()] : []),
+      ...(extensions ?? []),
+    ],
+    [placeholder, themeMode, decorate, extensions],
+  );
+};