@dxos/react-ui-editor 0.9.1-main.c7dcc2e112 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.10.0",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -35,7 +35,7 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.3.0-fragments.1",
+    "@automerge/automerge": "3.3.0-fragments.2",
     "@codemirror/autocomplete": "^6.20.2",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-html": "^6.4.11",
@@ -69,77 +69,79 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/context": "0.9.1-main.c7dcc2e112",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/display-name": "0.9.1-main.c7dcc2e112",
-    "@dxos/client": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/lit-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/protocols": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-hooks": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-editor": "0.9.1-main.c7dcc2e112",
-    "@dxos/debug": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-graph": "0.10.0",
+    "@dxos/async": "0.10.0",
+    "@dxos/context": "0.10.0",
+    "@dxos/debug": "0.10.0",
+    "@dxos/echo": "0.10.0",
+    "@dxos/echo-client": "0.10.0",
+    "@dxos/client": "0.10.0",
+    "@dxos/echo-doc": "0.10.0",
+    "@dxos/invariant": "0.10.0",
+    "@dxos/effect": "0.10.0",
+    "@dxos/log": "0.10.0",
+    "@dxos/lit-ui": "0.10.0",
+    "@dxos/keys": "0.10.0",
+    "@dxos/protocols": "0.10.0",
+    "@dxos/react-hooks": "0.10.0",
+    "@dxos/display-name": "0.10.0",
+    "@dxos/react-ui-menu": "0.10.0",
+    "@dxos/react-ui-mosaic": "0.10.0",
+    "@dxos/ui": "0.10.0",
+    "@dxos/ui-editor": "0.10.0",
+    "@dxos/util": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.3.0-fragments.1",
-    "@automerge/automerge-repo": "2.6.0-subduction.23",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.23",
+    "@automerge/automerge": "3.3.0-fragments.2",
+    "@automerge/automerge-repo": "2.6.0-subduction.37",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.37",
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/ai": "0.36.0",
-    "@effect/platform": "0.96.1",
+    "@effect/platform": "0.96.2",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.21.3",
+    "effect": "3.21.4",
     "happy-dom": "^20.0.0",
     "jsdom": "^29.1.1",
     "mocha": "^10.6.0",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "react-test-renderer": "~19.2.0",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "react-test-renderer": "~19.2.7",
     "vite": "^8.0.16",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.6.0",
-    "@dxos/ai": "0.9.1-main.c7dcc2e112",
-    "@dxos/config": "0.9.1-main.c7dcc2e112",
-    "@dxos/keyboard": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-types": "0.9.1-main.c7dcc2e112"
+    "@dxos/ai": "0.10.0",
+    "@dxos/config": "0.10.0",
+    "@dxos/keyboard": "0.10.0",
+    "@dxos/echo": "0.10.0",
+    "@dxos/random": "0.10.0",
+    "@dxos/react-client": "0.10.0",
+    "@dxos/react-ui-attention": "0.10.0",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/react-ui-syntax-highlighter": "0.10.0",
+    "@dxos/schema": "0.10.0",
+    "@dxos/storybook-utils": "0.10.0",
+    "@dxos/ui-theme": "0.10.0",
+    "@dxos/ui-types": "0.10.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-client": "0.10.0",
+    "@dxos/ui-theme": "0.10.0",
+    "@dxos/react-ui": "0.10.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.stories.tsx

@@ -5,7 +5,8 @@
 import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { createDocAccessor, createObject } from '@dxos/echo-client';
+import { createObject } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { random } from '@dxos/random';
 import { useThemeContext } from '@dxos/react-ui';
 import { withAttention } from '@dxos/react-ui-attention/testing';
@@ -36,7 +37,7 @@ const withExtensions: Decorator<EditorViewProps> = (Story, { args }) => {
       createThemeExtensions({ themeMode }),
       createMarkdownExtensions(),
       decorateMarkdown(),
-      automerge(createDocAccessor(createObject(Text.make({ content: args.initialValue })), ['content'])),
+      automerge(Doc.createAccessor(createObject(Text.make({ content: args.initialValue })), ['content'])),
     ],
     [themeMode],
   );

package/src/components/Editor/Editor.tsx

@@ -176,12 +176,12 @@ export const Editor = {
 };
 
 export type {
+  EditorContentProps,
   EditorController,
   EditorRootProps,
-  EditorContentProps,
-  EditorViewProps,
   EditorToolbarProps,
   EditorToolbarState,
+  EditorViewProps,
 };
 
 export { createEditorController };

package/src/components/EditorMenuProvider/menu-presets.ts

@@ -2,11 +2,36 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
+
 import { insertAtLineStart } from '@dxos/ui-editor';
 
 import { type EditorMenuGroup } from './menu';
 import { popoverRangeEffect } from './popover';
 
+/**
+ * Re-open the popover in link-query ("@") mode at the cursor, seeding the same query shape the user
+ * would get by typing the trigger manually: a single "@" for an inline link, "@@" for a block embed.
+ * The consumer's `@` handler (e.g. plugin-markdown's link query) renders the object picker and, on
+ * selection, replaces this range with the corresponding markdown link.
+ *
+ * Deferred to the next frame: selecting a slash-menu item deletes the "/" range, which closes the
+ * popover; opening synchronously races that close (`onActivate` reads a stale open state) and the
+ * picker never appears.
+ */
+const openLinkQuery = (view: EditorView, insert: '@' | '@@'): void => {
+  requestAnimationFrame(() => {
+    const { head } = view.state.selection.main;
+    const to = head + insert.length;
+    view.dispatch({
+      changes: { from: head, insert },
+      selection: { anchor: to, head: to },
+      // The popover trigger is the single "@"; a second "@" lives in the query range and switches to block mode.
+      effects: popoverRangeEffect.of({ trigger: '@', range: { from: head, to } }),
+    });
+  });
+};
+
 export const formattingCommands: EditorMenuGroup = {
   id: 'markdown',
   label: 'Markdown',
@@ -94,32 +119,13 @@ export const linkSlashCommands: EditorMenuGroup = {
       id: 'inline-link',
       label: 'Inline link',
       icon: 'ph--link--regular',
-      onSelect: ({ view, head }) => {
-        view.dispatch({
-          changes: { from: head, insert: '@' },
-          selection: { anchor: head + 1, head: head + 1 },
-          effects: popoverRangeEffect.of({
-            trigger: '@',
-            range: { from: head, to: head + 1 },
-          }),
-        });
-      },
+      onSelect: ({ view }) => openLinkQuery(view, '@'),
     },
     {
-      id: 'block-embed',
-      label: 'Block embed',
+      id: 'inline-object',
+      label: 'Inline object',
       icon: 'ph--lego--regular',
-      onSelect: ({ view, head }) => {
-        // Seed the same query shape as typing "@@" manually.
-        view.dispatch({
-          changes: { from: head, insert: '@@' },
-          selection: { anchor: head + 2, head: head + 2 },
-          effects: popoverRangeEffect.of({
-            trigger: '@',
-            range: { from: head, to: head + 2 },
-          }),
-        });
-      },
+      onSelect: ({ view }) => openLinkQuery(view, '@@'),
     },
   ],
 };

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -7,7 +7,7 @@ import React, { type PropsWithChildren, type RefObject, useCallback, useEffect,
 
 import { addEventListener } from '@dxos/async';
 import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate, Popover } from '@dxos/react-ui';
-import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-editor';
+import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-types';
 
 type EditorPreviewPopoverValue = Partial<{
   link: PreviewLinkRef;
@@ -22,9 +22,10 @@ export type EditorPreviewProviderProps = PropsWithChildren<{
 }>;
 
 /**
- * NOTE: In Composer, the DeckPlugin provides the Popover.Root as part of the DeckLayout.
+ * Standalone anchor-preview popover for use outside Composer (storybook, tests).
+ * In Composer, PreviewPlugin listens on window for DX_ANCHOR_ACTIVATE events and
+ * dispatches LayoutOperation.UpdatePopover instead; this provider is not needed there.
  */
-// TOOD(burdon): Reconcile with PreviewPlugin.
 export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProviderProps) => {
   const triggerRef = useRef<HTMLElement | null>(null);
   const [value, setValue] = useState<EditorPreviewPopoverValue>({});

package/src/extensions/Assistant.stories.tsx

@@ -19,7 +19,7 @@ import { trim } from '@dxos/util';
 import { translations } from '#translations';
 
 import { Editor, type EditorViewProps } from '../components';
-import { assistant, type AssistantOptions } from './assistant-extension';
+import { type AssistantOptions, assistant } from './assistant-extension';
 
 // TODO(burdon): Factor out.
 const useTestGenerate = () => {
@@ -27,7 +27,7 @@ const useTestGenerate = () => {
   useEffect(() => {
     let disposed = false;
     const rt = ManagedRuntime.make(
-      AiService.model('ai.claude.model.claude-haiku-4-5').pipe(
+      AiService.model('com.anthropic.model.claude-haiku-4-5.default').pipe(
         Layer.provide(AiServiceTestingPreset('edge-remote')),
         Layer.orDie,
       ),
@@ -56,9 +56,9 @@ const useTestGenerate = () => {
   return generate;
 };
 
-type DefaultStoryProps = Pick<EditorViewProps, 'value'>;
+type StoryArgs = Pick<EditorViewProps, 'value'>;
 
-const DefaultStory = (props: DefaultStoryProps) => {
+const DefaultStory = (props: StoryArgs) => {
   const { themeMode } = useThemeContext();
   const generate = useTestGenerate();
   const extensions = useMemo(

package/src/hooks/useBasicMarkdownExtensions.ts

@@ -18,6 +18,8 @@ export type UseBasicMarkdownExtensionsOptions = {
   placeholder?: string;
   /** Enables markdown visual decorations. Pass `false` to disable. Defaults to `true`. */
   decorate?: boolean;
+  /** Renders the editor read-only (selectable but not editable). Defaults to `false`. */
+  readonly?: boolean;
   /**
    * Extra extensions appended to the returned array.
    * Callers must memoize this array — it is used as a dependency of {@link useMemo}.
@@ -39,17 +41,18 @@ export type UseBasicMarkdownExtensionsOptions = {
 export const useBasicMarkdownExtensions = ({
   placeholder,
   decorate = true,
+  readonly = false,
   extensions,
 }: UseBasicMarkdownExtensionsOptions = {}): Extension[] => {
   const { themeMode } = useThemeContext();
   return useMemo(
     () => [
-      createBasicExtensions({ placeholder }),
+      createBasicExtensions({ placeholder, readOnly: readonly }),
       createThemeExtensions({ syntaxHighlighting: true, themeMode }),
       createMarkdownExtensions(),
       ...(decorate ? [decorateMarkdown()] : []),
       ...(extensions ?? []),
     ],
-    [placeholder, themeMode, decorate, extensions],
+    [placeholder, themeMode, decorate, readonly, extensions],
   );
 };

package/src/stories/Automerge.stories.tsx

@@ -8,7 +8,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Obj, Query, Ref } from '@dxos/echo';
-import { DocAccessor, createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { TestSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
@@ -16,7 +16,7 @@ import { 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 { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
 
 import { translations } from '#translations';
@@ -30,7 +30,7 @@ type TestObject = {
 };
 
 type EditorProps = {
-  source: DocAccessor;
+  source: Doc.Accessor;
   messenger?: Messenger;
   identity?: Identity;
   autoFocus?: boolean;
@@ -41,7 +41,7 @@ const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
   const { parentRef } = useTextEditor(
     () => ({
       autoFocus,
-      initialValue: DocAccessor.getValue(source),
+      initialValue: Doc.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...', search: true }),
         createThemeExtensions({ themeMode, slots: { scroller: { className: 'p-2' } } }),
@@ -55,8 +55,8 @@ const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
 };
 
 const DefaultStory = () => {
-  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
-  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
+  const [object1, setObject1] = useState<Doc.Accessor<TestObject>>();
+  const [object2, setObject2] = useState<Doc.Accessor<TestObject>>();
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -97,7 +97,7 @@ const EchoStory = () => {
   const space = useSpace(spaceId);
   const objects = useQuery(space?.db, Query.type(TestSchema.Expando, { type: 'test' }));
 
-  const [source, setSource] = useState<DocAccessor>();
+  const [source, setSource] = useState<Doc.Accessor>();
   const init = useCallback(() => {
     const content = objects[0]?.content.target;
     if (!content) {
@@ -108,7 +108,7 @@ const EchoStory = () => {
       return;
     }
 
-    setSource(createDocAccessor(content, ['content']));
+    setSource(Doc.createAccessor(content, ['content']));
   }, [objects]);
 
   useEffect(() => {

package/src/stories/EditorToolbar.stories.tsx

@@ -23,9 +23,9 @@ import { translations } from '#translations';
 import { Editor } from '../components';
 import { type UseTextEditorProps } from '../hooks';
 
-type DefaultStoryProps = { placeholder?: string; viewMode?: EditorViewMode } & UseTextEditorProps;
+type StoryArgs = { placeholder?: string; viewMode?: EditorViewMode } & UseTextEditorProps;
 
-const DefaultStory = ({ autoFocus, initialValue, placeholder, viewMode = 'source' }: DefaultStoryProps) => {
+const DefaultStory = ({ autoFocus, initialValue, placeholder, viewMode = 'source' }: StoryArgs) => {
   const { themeMode } = useThemeContext();
 
   const extensions = useMemo(

package/src/stories/Outliner.stories.tsx

@@ -12,11 +12,11 @@ import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from
 import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
 import { EditorStory } from './components';
 
-type DefaultStoryProps = {
+type StoryArgs = {
   text?: string;
 };
 
-const DefaultStory = ({ text }: DefaultStoryProps) => {
+const DefaultStory = ({ text }: StoryArgs) => {
   const [controller, setController] = useState<EditorController | null>(null);
 
   const extensions = useMemo(() => [outliner(), hashtag()], []);

package/src/stories/Popover.stories.tsx

@@ -43,9 +43,9 @@ const placeholder = (trigger: string[]) => {
   return Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
 };
 
-type DefaultStoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
+type StoryArgs = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
 
-const DefaultStory = ({ text, ...props }: DefaultStoryProps) => {
+const DefaultStory = ({ text, ...props }: StoryArgs) => {
   const [controller, setController] = useState<EditorController | null>(null);
   const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
   const getView = useCallback(() => controller?.view ?? null, [controller]);
@@ -57,7 +57,7 @@ const DefaultStory = ({ text, ...props }: DefaultStoryProps) => {
   );
 };
 
-const LinkStory = (args: DefaultStoryProps) => {
+const LinkStory = (args: StoryArgs) => {
   const { space } = useClientStory();
 
   const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(