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

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

@@ -2,54 +2,48 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
-import { type EditorViewMode } from '@dxos/ui-editor';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
-import { createEditorAction, createEditorActionGroup } from './actions';
-import { type EditorToolbarState } from './useEditorToolbar';
+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 Node.NodeArg<any>, ...viewModeActions],
-    edges: [
-      { source: 'root', target: 'viewMode', relation: 'child' },
-      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id, relation: 'child' })),
-    ],
   };
-};

package/src/components/index.ts

@@ -4,8 +4,5 @@
 
 export * from './Editor';
 
-// 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/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

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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],
+  );
+};

package/src/index.ts

@@ -2,9 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
+export * from './extensions';
 export * from './hooks';
-
-export { translations };

package/src/stories/Automerge.stories.tsx

@@ -8,8 +8,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import { TestSchema } from '@dxos/echo/testing';
 import { DocAccessor, createDocAccessor } from '@dxos/echo-db';
+import { TestSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
 import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
@@ -19,8 +19,9 @@ import { Button, useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
 
+import { translations } from '#translations';
+
 import { useTextEditor } from '../hooks';
-import { translations } from '../translations';
 
 const initialContent = 'Hello world!';
 
@@ -43,7 +44,7 @@ const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
       initialValue: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...', search: true }),
-        createThemeExtensions({ themeMode, slots: { scroll: { className: 'p-2' } } }),
+        createThemeExtensions({ themeMode, slots: { scroller: { className: 'p-2' } } }),
         createDataExtensions({ id: 'test', text: source, messenger, identity }),
       ],
     }),

package/src/stories/Comments.stories.tsx

@@ -11,10 +11,10 @@ import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
-import { type Comment, annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+import { annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+import { type Comment } from '@dxos/ui-editor/types';
 
 import { createRenderer, str } from '../util';
-
 import { EditorStory, content, longText } from './components';
 
 const meta = {