@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

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,29 +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 './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 './popover';
-export * from './preview';
-export * from './selection';
-export * from './state';
-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],
+  );
+};

package/src/hooks/useTextEditor.ts

@@ -17,11 +17,15 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
+import {
+  type EditorSelection,
+  createEditorStateTransaction,
+  debugDispatcher,
+  documentId,
+  modalStateField,
+} from '@dxos/ui-editor';
 import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, createEditorStateTransaction, documentId, modalStateField } from '../extensions';
-import { debugDispatcher } from '../util';
-
 let instanceCount = 0;
 
 export type CursorInfo = {
@@ -46,7 +50,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   autoFocus?: boolean;
   scrollTo?: number;
   selection?: EditorSelection;
-  moveToEndOfLine?: boolean;
+  selectionEnd?: boolean;
   debug?: boolean;
 };
 
@@ -57,7 +61,7 @@ export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } =
     useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
@@ -75,7 +79,7 @@ export const useTextEditor = (
         if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
           initialSelection = selection;
         }
-      } else if (moveToEndOfLine && selection === undefined) {
+      } else if (selectionEnd && selection === undefined) {
         const index = initialValue?.indexOf('\n');
         const anchor = !index || index === -1 ? 0 : index;
         initialSelection = { anchor };
@@ -104,7 +108,7 @@ export const useTextEditor = (
       });
 
       // Move to end of line after document loaded (unless selection is specified).
-      if (moveToEndOfLine && !initialSelection) {
+      if (selectionEnd && !initialSelection) {
         const { to } = view.state.doc.lineAt(0);
         if (to) {
           view.dispatch({ selection: { anchor: to } });
@@ -156,7 +160,9 @@ export const useTextEditor = (
           element?.focus();
           break;
         }
+
         case 'Enter': {
+          event.preventDefault();
           if (target === currentTarget) {
             view?.focus();
           }

package/src/index.ts

@@ -4,17 +4,8 @@
 
 import { translations } from './translations';
 
-export { type Extension, EditorState } from '@codemirror/state';
-export { EditorView, keymap } from '@codemirror/view';
-export { tags } from '@lezer/highlight';
-
-export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
-
 export * from './components';
-export * from './defaults';
 export * from './extensions';
 export * from './hooks';
-export * from './types';
-export * from './util';
 
 export { translations };

package/src/stories/Automerge.stories.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Repo } from '@automerge/automerge-repo';
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Obj, Ref } from '@dxos/echo';
+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';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { useClientStory, withMultiClientProvider } from '@dxos/react-client/testing';
+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 { useTextEditor } from '../hooks';
+import { translations } from '../translations';
+
+const initialContent = 'Hello world!';
+
+type TestObject = {
+  text: string;
+};
+
+type EditorProps = {
+  source: DocAccessor;
+  messenger?: Messenger;
+  identity?: Identity;
+  autoFocus?: boolean;
+};
+
+const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(
+    () => ({
+      autoFocus,
+      initialValue: DocAccessor.getValue(source),
+      extensions: [
+        createBasicExtensions({ placeholder: 'Type here...', search: true }),
+        createThemeExtensions({ themeMode, slots: { scroller: { className: 'p-2' } } }),
+        createDataExtensions({ id: 'test', text: source, messenger, identity }),
+      ],
+    }),
+    [source, themeMode],
+  );
+
+  return <div ref={parentRef} className='flex w-full' />;
+};
+
+const DefaultStory = () => {
+  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
+  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
+
+  useEffect(() => {
+    queueMicrotask(async () => {
+      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
+      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
+
+      const object1 = repo1.create<TestObject>();
+      object1.change((doc: TestObject) => {
+        doc.text = initialContent;
+      });
+
+      const object2 = await repo2.find<TestObject>(object1.url);
+      await object2.whenReady();
+
+      setObject1({ handle: object1, path: ['text'] });
+      setObject2({ handle: object2, path: ['text'] });
+    });
+  }, []);
+
+  if (!object1 || !object2) {
+    return <Loading data={{ object1: !!object1, object2: !!object2 }} />;
+  }
+
+  return (
+    <div className='h-full w-full grid grid-cols-2 gap-4'>
+      <Editor source={object1} autoFocus />
+      <Editor source={object2} />
+    </div>
+  );
+};
+
+const EchoStory = () => {
+  const { spaceId, index } = useClientStory();
+  const identity = useIdentity();
+  const space = useSpace(spaceId);
+  const objects = useQuery(space?.db, Query.type(TestSchema.Expando, { type: 'test' }));
+
+  const [source, setSource] = useState<DocAccessor>();
+  const init = useCallback(() => {
+    const content = objects[0]?.content.target;
+    if (!content) {
+      if (objects.length) {
+        // TODO(burdon): Initially ref isn't ready.
+        log.warn('no content', { index, objects: JSON.stringify(objects) });
+      }
+      return;
+    }
+
+    setSource(createDocAccessor(content, ['content']));
+  }, [objects]);
+
+  useEffect(() => {
+    if (source) {
+      return;
+    }
+
+    init();
+  }, [objects, source]);
+
+  return (
+    <div className='h-full w-full flex flex-col overflow-hidden'>
+      <pre className='p-2 text-xs text-subdued'>
+        {JSON.stringify({ index, identity: identity?.identityKey.truncate(), spaceId, objects }, null, 2)}
+      </pre>
+      {identity && source ? (
+        <div className='p-2 flex grow overflow-hidden'>
+          <Editor identity={identity} messenger={space} source={source} />
+        </div>
+      ) : (
+        <div className='p-2'>
+          <Button onClick={init}>Init</Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-editor/Automerge',
+  component: Editor as any,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// TODO(burdon): ERROR: factories.ts:126 Error: Non-base58 character
+export const Default: Story = {
+  render: DefaultStory,
+};
+
+// TODO(burdon): Failing (doesn't sync)
+export const WithEcho: Story = {
+  decorators: [
+    withMultiClientProvider({
+      numClients: 2,
+      createIdentity: true,
+      createSpace: true,
+      onCreateSpace: async ({ space }) => {
+        space.db.add(
+          Obj.make(TestSchema.Expando, {
+            type: 'test',
+            content: Ref.make(Obj.make(TestSchema.Expando, { content: initialContent })),
+          }),
+        );
+      },
+    }),
+  ],
+  render: EchoStory,
+};

package/src/stories/Comments.stories.tsx

@@ -2,26 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import { effect, useSignal } from '@preact/signals-react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type FC } from 'react';
+import React, { type FC, useContext, useMemo } from 'react';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { annotations, comments, createExternalCommentSync } from '../extensions';
-import { str } from '../testing';
-import { type Comment } from '../types';
-import { createRenderer } from '../util';
+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 { createRenderer, str } from '../util';
 import { EditorStory, content, longText } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -35,52 +33,57 @@ type Story = StoryObj<typeof meta>;
 // Comments
 //
 
+const CommentsStory = () => {
+  const registry = useContext(RegistryContext);
+  const commentsAtom = useMemo(() => Atom.make<Comment[]>([]), []);
+
+  return (
+    <EditorStory
+      text={str('# Comments', '', content.paragraphs, content.footer)}
+      extensions={[
+        createExternalCommentSync(
+          'test',
+          (sink) => registry.subscribe(commentsAtom, () => sink()),
+          () => registry.get(commentsAtom),
+        ),
+        comments({
+          id: 'test',
+          renderTooltip: createRenderer(CommentTooltip),
+          onCreate: ({ cursor }) => {
+            const id = PublicKey.random().toHex();
+            const current = registry.get(commentsAtom);
+            registry.set(commentsAtom, [...current, { id, cursor }]);
+            return id;
+          },
+          onSelect: (state) => {
+            const debug = false;
+            if (debug) {
+              log.info('update', {
+                comments: state.comments.length,
+                active: state.selection.current?.slice(0, 8),
+                closest: state.selection.closest?.slice(0, 8),
+              });
+            }
+          },
+        }),
+      ]}
+    />
+  );
+};
+
 export const Comments: Story = {
-  render: () => {
-    const _comments = useSignal<Comment[]>([]);
-    return (
-      <EditorStory
-        text={str('# Comments', '', content.paragraphs, content.footer)}
-        extensions={[
-          createExternalCommentSync(
-            'test',
-            (sink) => effect(() => sink()),
-            () => _comments.value,
-          ),
-          comments({
-            id: 'test',
-            renderTooltip: createRenderer(CommentTooltip),
-            onCreate: ({ cursor }) => {
-              const id = PublicKey.random().toHex();
-              _comments.value = [..._comments.value, { id, cursor }];
-              return id;
-            },
-            onSelect: (state) => {
-              const debug = false;
-              if (debug) {
-                log.info('update', {
-                  comments: state.comments.length,
-                  active: state.selection.current?.slice(0, 8),
-                  closest: state.selection.closest?.slice(0, 8),
-                });
-              }
-            },
-          }),
-        ]}
-      />
-    );
-  },
+  render: () => <CommentsStory />,
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
+  <span className='flex justify-center items-center w-[24px] h-[24px] rounded-sm text-xs bg-neutral-200 text-black'>
     {char}
   </span>
 );
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded-sm'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (