@dxos/ui-editor 0.9.0 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-editor",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,7 +32,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",
@@ -43,7 +43,7 @@
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/language": "^6.12.3",
     "@codemirror/language-data": "^6.5.2",
-    "@codemirror/lint": "6.9.6",
+    "@codemirror/lint": "6.9.7",
     "@codemirror/search": "^6.7.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
@@ -62,29 +62,31 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.9.0",
-    "@dxos/client": "0.9.0",
-    "@dxos/app-graph": "0.9.0",
-    "@dxos/display-name": "0.9.0",
-    "@dxos/context": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/echo-client": "0.9.0",
-    "@dxos/debug": "0.9.0",
-    "@dxos/keys": "0.9.0",
-    "@dxos/invariant": "0.9.0",
-    "@dxos/lit-ui": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/ui": "0.9.0",
-    "@dxos/protocols": "0.9.0",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/ui-types": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/app-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/client": "0.9.1-staging.ee54ba693a",
+    "@dxos/context": "0.9.1-staging.ee54ba693a",
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/display-name": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo-doc": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/nlp": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/protocols": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a"
   },
   "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",
-    "@effect/platform": "0.96.1",
+    "@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/platform": "0.96.2",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -92,25 +94,25 @@
     "@types/lodash.sortby": "^4.7.7",
     "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",
     "vite": "^8.0.16",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.6.0",
-    "@dxos/config": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/keyboard": "0.9.0",
-    "@dxos/random": "0.9.0",
-    "@dxos/schema": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/config": "0.9.1-staging.ee54ba693a",
+    "@dxos/keyboard": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/schema": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "@dxos/ui-theme": "0.9.0"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/defaults.ts

@@ -9,7 +9,9 @@ import { type ThemeExtensionsOptions } from './extensions';
 export const editorClassNames = (role?: string) =>
   mx(
     'dx-attention-surface data-[toolbar=disabled]:pt-2 dx-focus-ring-inset',
-    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24' : 'dx-container overflow-hidden',
+    role === 'org.dxos.role.section'
+      ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24'
+      : 'dx-container overflow-hidden',
   );
 
 export const documentSlots: ThemeExtensionsOptions['slots'] = {

package/src/extensions/autocomplete/placeholder.ts

@@ -7,6 +7,7 @@ import { type Extension } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
 import { clientRectsFor, flattenRect } from '../../util';
+import { isBusy } from '../busy';
 
 type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 
@@ -28,6 +29,10 @@ export const placeholder = ({ content, delay = 3_000, focusOnly = false }: Place
       _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
+        // A busy-state toggle (e.g. transcription starting) carries no doc/selection/focus change,
+        // so it must be detected explicitly to clear an already-scheduled placeholder.
+        const busyChanged = isBusy(update.startState) !== isBusy(update.view.state);
+
         // React to actual user activity only. The empty `view.update([])`
         // dispatched from the timeout below carries no doc/selection/focus
         // change, so it falls through here as a no-op — that's how the
@@ -35,7 +40,7 @@ export const placeholder = ({ content, delay = 3_000, focusOnly = false }: Place
         // provider to read it. Without this gate, the unconditional reset
         // would clobber the decoration in the same tick and the placeholder
         // would never visibly render.
-        if (!update.docChanged && !update.selectionSet && !update.focusChanged) {
+        if (!update.docChanged && !update.selectionSet && !update.focusChanged && !busyChanged) {
           return;
         }
 
@@ -52,6 +57,11 @@ export const placeholder = ({ content, delay = 3_000, focusOnly = false }: Place
           return;
         }
 
+        // Suppress the hint while another extension owns the caret region (e.g. transcription).
+        if (isBusy(update.view.state)) {
+          return;
+        }
+
         const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
         if (activeLine.text.trim() !== '') {
           return;

package/src/extensions/automerge/automerge.test.tsx

@@ -2,62 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type ChangeFn, type ChangeOptions, type Doc, type Heads } from '@automerge/automerge';
-import { type DocHandle, Repo, decodeHeads, encodeHeads, initSubduction } from '@automerge/automerge-repo';
+import { next as A } from '@automerge/automerge';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
-import React, { type FC, useEffect, useRef, useState } from 'react';
-import { beforeAll, describe, test } from 'vitest';
+import * as Schema from 'effect/Schema';
+import React, { useEffect, useRef } from 'react';
+import { describe, test } from 'vitest';
 
-import { type IDocHandle } from '@dxos/echo-client';
-import { getDeep } from '@dxos/util';
+import { DXN, Obj, Type } from '@dxos/echo';
+import { Doc } from '@dxos/echo-doc';
 
 import { automerge } from './automerge';
 
-// Adapter: `IDocHandle` (used by `DocHandleProxy` in production) takes raw `Heads` (hex)
-// at `changeAt`, but automerge-repo's `DocHandle.changeAt` expects bs58check-encoded
-// `UrlHeads`. Encode on the way in, decode on the way out so the test's repo-backed
-// handle satisfies the extension's `IDocHandle` contract.
-const adaptRepoHandle = <T,>(handle: DocHandle<T>): IDocHandle<T> => ({
-  doc: () => handle.doc() as Doc<T> | undefined,
-  change: (callback: ChangeFn<T>, options?: ChangeOptions<T>) =>
-    options ? handle.change(callback, options) : handle.change(callback),
-  changeAt: (heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): Heads | undefined => {
-    const encoded = options
-      ? handle.changeAt(encodeHeads(heads), callback, options)
-      : handle.changeAt(encodeHeads(heads), callback);
-    return encoded ? decodeHeads(encoded) : undefined;
-  },
-  addListener: (event, listener) => handle.on(event, listener),
-  removeListener: (event, listener) => handle.off(event, listener),
-});
-
-const path = ['text'];
-
-type TestObject = {
-  text: string;
-};
+const TestType = Schema.Struct({ text: Schema.String }).pipe(
+  Type.makeObject(DXN.make('com.example.test.editor', '0.1.0')),
+);
+type TestType = Type.InstanceType<typeof TestType>;
 
 class Generator {
-  constructor(private readonly _handle: DocHandle<TestObject>) {}
+  constructor(private readonly _accessor: Doc.Accessor<TestType>) {}
+
   update(text: string): void {
-    this._handle.change((doc: TestObject) => {
-      doc.text = text;
+    this._accessor.handle.change((doc) => {
+      A.splice(doc, [...this._accessor.path], 0, 0, text);
     });
   }
 }
 
-const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ handle, generator }) => {
+const Test = ({ accessor }: { accessor: Doc.Accessor<TestType> }) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      automerge({ handle: adaptRepoHandle(handle), path }),
-      EditorView.updateListener.of((update) => {
+      automerge(accessor),
+      EditorView.updateListener.of(() => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
-          update.view.dispatch({
+          view.dispatch({
             changes: { from: view.state.doc.length - 1, insert: ' world' },
           });
         }
@@ -65,33 +46,24 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: getDeep(handle.doc()!, path), extensions }),
+      state: EditorState.create({ doc: Doc.getValue<string>(accessor) ?? '', extensions }),
       parent: ref.current!,
     });
 
-    setView(view);
-  }, []);
-
-  useEffect(() => {}, [view]);
+    return () => view.destroy();
+  }, [accessor]);
 
   return <div ref={ref} data-testid='editor' />;
 };
 
 // TODO(burdon): Test history/undo.
-// TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
 
 describe('Automerge', () => {
-  // Subduction-fork `Repo` constructs a `MemorySigner` internally; WASM must be
-  // initialized first or the constructor throws `'set_subduction_logger' of undefined`.
-  beforeAll(async () => {
-    await initSubduction();
-  });
-
   test('basic sync', ({ expect }) => {
-    const repo = new Repo({ network: [] });
-    const handle = repo.create<TestObject>();
-    const generator = new Generator(handle);
-    render(<Test handle={handle} generator={generator} />);
+    const obj = Obj.make(TestType, { text: '' });
+    const accessor = Doc.createAccessor(obj, ['text']);
+    const generator = new Generator(accessor);
+    render(<Test accessor={accessor} />);
 
     const editor = screen.getByTestId('editor');
     expect(editor.textContent).toBe('');

package/src/extensions/automerge/automerge.ts

@@ -8,7 +8,7 @@ import { next as A } from '@automerge/automerge';
 import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { DocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 
 import { Cursor } from '../../util';
 import { initialSync } from '../state';
@@ -16,7 +16,11 @@ import { cursorConverter } from './cursor';
 import { type State, isReconcile, reconcileAnnotation, updateHeadsEffect } from './defs';
 import { Syncer } from './sync';
 
-export const automerge = (accessor: DocAccessor): Extension => {
+/**
+ * CodeMirror extension that two-way syncs the editor with the string the {@link Doc.Accessor} points
+ * at, reconciling local edits and remote document mutations via Automerge.
+ */
+export const automerge = (accessor: Doc.Accessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => {
       return {
@@ -68,7 +72,7 @@ export const automerge = (accessor: DocAccessor): Extension => {
           accessor.handle.addListener('change', this._handleChange);
 
           requestAnimationFrame(() => {
-            const value = DocAccessor.getValue<string>(accessor);
+            const value = Doc.getValue<string>(accessor);
             const current = this._view.state.doc.toString();
             if (value !== current) {
               this._view.dispatch({

package/src/extensions/automerge/cursor.ts

@@ -2,12 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/echo-client';
+import { fromCursor, toCursor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { log } from '@dxos/log';
 
 import { type CursorConverter } from '../../util';
 
-export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
+/**
+ * Maps between editor offsets and stable Automerge cursors for the text the {@link Doc.Accessor}
+ * points at; falls back to empty/zero positions when the document is unavailable.
+ */
+export const cursorConverter = (accessor: Doc.Accessor): CursorConverter => ({
   toCursor: (pos, assoc) => {
     try {
       return toCursor(accessor, pos, assoc);

package/src/extensions/automerge/sync.ts

@@ -8,7 +8,7 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { type IDocHandle } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { log } from '@dxos/log';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
@@ -23,7 +23,7 @@ export class Syncer {
 
   // prettier-ignore
   constructor(
-    private readonly _handle: IDocHandle,
+    private readonly _handle: Doc.Handle,
     private readonly _state: StateField<State>
   ) {}
 

package/src/extensions/automerge/update-automerge.ts

@@ -7,13 +7,13 @@
 import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
-import { type IDocHandle } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 
 import { type State } from './defs';
 
 export const updateAutomerge = (
   field: StateField<State>,
-  handle: IDocHandle,
+  handle: Doc.Handle,
   transactions: Transaction[],
   state: EditorState, // TODO(burdon): Just pass in the state field value?
 ): Heads | undefined => {

package/src/extensions/blocks.ts

@@ -7,7 +7,42 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 
 import { mx } from '@dxos/ui-theme';
 
-const paragraphBlockPlugin = ViewPlugin.fromClass(
+export const blocks = () => [
+  paragraphBlock,
+  EditorView.baseTheme({
+    '.cm-line.block-line': {
+      paddingLeft: '0.75rem',
+      paddingRight: '0.75rem',
+      borderLeft: '1px solid var(--color-subdued-separator)',
+      borderRight: '1px solid var(--color-subdued-separator)',
+    },
+    '.cm-line.block-single': {
+      border: '1px solid var(--color-subdued-separator)',
+      borderRadius: '6px',
+      paddingTop: '0.5rem',
+      paddingBottom: '0.5rem',
+      marginTop: '0.5rem',
+      marginBottom: '0.5rem',
+    },
+    '.cm-line.block-first': {
+      borderTop: '1px solid var(--color-subdued-separator)',
+      borderTopLeftRadius: '6px',
+      borderTopRightRadius: '6px',
+      paddingTop: '0.5rem',
+      marginTop: '0.5rem',
+    },
+    '.cm-line.block-middle': {},
+    '.cm-line.block-last': {
+      borderBottom: '1px solid var(--color-subdued-separator)',
+      borderBottomLeftRadius: '6px',
+      borderBottomRightRadius: '6px',
+      paddingBottom: '0.5rem',
+      marginBottom: '0.5rem',
+    },
+  }),
+];
+
+const paragraphBlock = ViewPlugin.fromClass(
   class {
     decorations: DecorationSet;
 
@@ -94,38 +129,3 @@ const paragraphBlockPlugin = ViewPlugin.fromClass(
     decorations: (v) => v.decorations,
   },
 );
-
-export const blocks = () => [
-  paragraphBlockPlugin,
-  EditorView.baseTheme({
-    '.cm-line.block-line': {
-      paddingLeft: '0.75rem',
-      paddingRight: '0.75rem',
-      borderLeft: '1px solid var(--color-subdued-separator)',
-      borderRight: '1px solid var(--color-subdued-separator)',
-    },
-    '.cm-line.block-single': {
-      border: '1px solid var(--color-subdued-separator)',
-      borderRadius: '6px',
-      paddingTop: '0.5rem',
-      paddingBottom: '0.5rem',
-      marginTop: '0.5rem',
-      marginBottom: '0.5rem',
-    },
-    '.cm-line.block-first': {
-      borderTop: '1px solid var(--color-subdued-separator)',
-      borderTopLeftRadius: '6px',
-      borderTopRightRadius: '6px',
-      paddingTop: '0.5rem',
-      marginTop: '0.5rem',
-    },
-    '.cm-line.block-middle': {},
-    '.cm-line.block-last': {
-      borderBottom: '1px solid var(--color-subdued-separator)',
-      borderBottomLeftRadius: '6px',
-      borderBottomRightRadius: '6px',
-      paddingBottom: '0.5rem',
-      marginBottom: '0.5rem',
-    },
-  }),
-];

package/src/extensions/busy.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type EditorState, type Extension, StateEffect, StateField } from '@codemirror/state';
+
+/**
+ * Generic shared "busy" flag that extensions use to coordinate exclusive use of the cursor region.
+ * One extension sets it (e.g. transcription while a pending block is active); others read it (e.g. a
+ * placeholder hint) to suppress themselves while something else owns the caret.
+ */
+export const setBusy = StateEffect.define<boolean>();
+
+export const busyState = StateField.define<boolean>({
+  create: () => false,
+  update: (value, tr) => {
+    let next = value;
+    for (const effect of tr.effects) {
+      if (effect.is(setBusy)) {
+        next = effect.value;
+      }
+    }
+
+    return next;
+  },
+});
+
+/** Whether any extension has flagged the editor busy. Safe when the field is absent (returns false). */
+export const isBusy = (state: EditorState): boolean => state.field(busyState, false) ?? false;
+
+/** Contributes the shared busy flag. Include once; setters/readers reference the same field. */
+export const busy = (): Extension => busyState;

package/src/extensions/comments.ts

@@ -22,6 +22,7 @@ import { isNonNullable } from '@dxos/util';
 
 import { type Comment, type Range, type RenderCallback } from '../types';
 import { Cursor, singleValueFacet, wrapWithCatch } from '../util';
+import { markerMark, markerTheme } from './marker';
 import { documentId } from './selection';
 
 //
@@ -99,22 +100,16 @@ export const commentsState = StateField.define<CommentsState>({
 /**
  * NOTE: Matches search.
  */
+// Surface/box-shadow come from the shared `markerTheme`, tinted by the mark's `data-hue`; the comment
+// just adds the pointer affordance.
 const styles = EditorView.theme({
   '.cm-comment > span': {
-    boxDecorationBreak: 'clone',
-    boxShadow: '0 0 0 3px var(--color-cm-comment-surface)',
-    backgroundColor: 'var(--color-cm-comment-surface)',
-    color: 'var(--color-cm-comment-text) !important',
     cursor: 'pointer',
   },
-  '.cm-comment[data-current="1"] > span': {
-    boxShadow: '0 0 0 3px var(--color-cm-comment-current-surface)',
-    backgroundColor: 'var(--color-cm-comment-current-surface)',
-  },
 });
 
 const createCommentMark = (id: string, isCurrent: boolean) =>
-  Decoration.mark({
+  markerMark(isCurrent ? 'orange' : 'teal', {
     class: 'cm-comment',
     attributes: {
       'data-testid': 'cm-comment',
@@ -386,6 +381,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     commentsState,
     commentsDecorations,
     handleCommentClick,
+    markerTheme(),
     styles,
 
     //