@dxos/ui-editor 0.8.4-main.fcfe5033a5 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-editor",
-  "version": "0.8.4-main.fcfe5033a5",
+  "version": "0.9.0",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
@@ -27,66 +27,64 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.2.3",
-    "@codemirror/autocomplete": "^6.19.0",
-    "@codemirror/commands": "^6.8.1",
+    "@automerge/automerge": "3.3.0-fragments.1",
+    "@codemirror/autocomplete": "^6.20.2",
+    "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "6.3.4",
+    "@codemirror/lang-markdown": "6.5.0",
     "@codemirror/lang-xml": "^6.1.0",
-    "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/language-data": "^6.5.1",
-    "@codemirror/lint": "6.8.5",
-    "@codemirror/search": "^6.5.11",
-    "@codemirror/state": "^6.5.2",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/lint": "6.9.6",
+    "@codemirror/search": "^6.7.0",
+    "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.4",
-    "@lezer/common": "^1.2.2",
-    "@lezer/generator": "^1.7.1",
-    "@lezer/highlight": "^1.2.1",
-    "@lezer/markdown": "^1.3.1",
-    "@replit/codemirror-vim": "^6.2.1",
+    "@codemirror/view": "^6.43.0",
+    "@lezer/common": "^1.5.2",
+    "@lezer/generator": "^1.8.0",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/markdown": "^1.6.3",
+    "@replit/codemirror-vim": "^6.3.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@uiw/codemirror-theme-vscode": "^4.25.2",
     "ajv": "^8.18.0",
-    "codemirror": "^6.0.1",
+    "codemirror": "^6.0.2",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.8.4-main.fcfe5033a5",
-    "@dxos/app-graph": "0.8.4-main.fcfe5033a5",
-    "@dxos/context": "0.8.4-main.fcfe5033a5",
-    "@dxos/client": "0.8.4-main.fcfe5033a5",
-    "@dxos/debug": "0.8.4-main.fcfe5033a5",
-    "@dxos/display-name": "0.8.4-main.fcfe5033a5",
-    "@dxos/echo": "0.8.4-main.fcfe5033a5",
-    "@dxos/echo-db": "0.8.4-main.fcfe5033a5",
-    "@dxos/invariant": "0.8.4-main.fcfe5033a5",
-    "@dxos/lit-ui": "0.8.4-main.fcfe5033a5",
-    "@dxos/log": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui": "0.8.4-main.fcfe5033a5",
-    "@dxos/protocols": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-types": "0.8.4-main.fcfe5033a5",
-    "@dxos/util": "0.8.4-main.fcfe5033a5"
+    "@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"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.2.3",
-    "@automerge/automerge-repo": "2.5.1",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
-    "@effect/platform": "0.94.4",
+    "@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",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -94,25 +92,25 @@
     "@types/lodash.sortby": "^4.7.7",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "happy-dom": "^20.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^29.1.1",
     "mocha": "^10.6.0",
-    "vite": "^7.1.11",
+    "vite": "^8.0.16",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "@dxos/echo": "0.8.4-main.fcfe5033a5",
-    "@dxos/config": "0.8.4-main.fcfe5033a5",
-    "@dxos/random": "0.8.4-main.fcfe5033a5",
-    "@dxos/keyboard": "0.8.4-main.fcfe5033a5",
-    "@dxos/storybook-utils": "0.8.4-main.fcfe5033a5",
-    "@dxos/schema": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5"
+    "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"
   },
   "peerDependencies": {
-    "@effect/platform": "0.94.4",
-    "effect": "3.20.0",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5"
+    "@effect/platform": "0.96.1",
+    "effect": "3.21.3",
+    "@dxos/ui-theme": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/defaults.ts

@@ -6,10 +6,9 @@ import { mx } from '@dxos/ui-theme';
 
 import { type ThemeExtensionsOptions } from './extensions';
 
-// NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
 export const editorClassNames = (role?: string) =>
   mx(
-    'dx-attention-surface p-0.5 data-[toolbar=disabled]:pt-2 dx-focus-ring-inset',
+    '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',
   );
 
@@ -22,8 +21,11 @@ export const documentSlots: ThemeExtensionsOptions['slots'] = {
      * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
      */
     className: mx(
-      // NOTE: Container for widget sizing (must have `max-w-[100cqi]`).
-      'dx-size-container',
+      // Inline-size container for widget sizing (children use `max-w-[100cqi]`).
+      // NOTE: Use inline-size, not full size containment — `container-type: size` on the
+      // editor content breaks CodeMirror's viewport measurement, leaving blank gaps during
+      // scroll until a click forces a re-measure.
+      'dx-inline-size-container',
       // Wider margin for web (vs. mobile).
       'pointer-fine:max-w-[min(50rem,100%-4rem)] pointer-coarse:max-w-[min(50rem,100%-2rem)]',
       'mx-auto! w-full',

package/src/extensions/autocomplete/placeholder.ts

@@ -13,42 +13,61 @@ type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 export type PlaceholderOptions = {
   content: Content;
   delay?: number;
+  focusOnly?: boolean;
 };
 
 /**
- * Shows a transient placeholder at the current cursor position.
+ * Shows a transient placeholder at the current cursor position. When
+ * `focusOnly` is set the placeholder is suppressed unless the editor has DOM
+ * focus, and is hidden again when focus is lost.
  */
-export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
+export const placeholder = ({ content, delay = 3_000, focusOnly = false }: PlaceholderOptions): Extension => {
   const plugin = ViewPlugin.fromClass(
     class {
       _timeout: ReturnType<typeof setTimeout> | undefined;
       _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
+        // 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
+        // freshly-set widget survives long enough for the decoration
+        // 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) {
+          return;
+        }
+
         if (this._timeout) {
           window.clearTimeout(this._timeout);
           this._timeout = undefined;
         }
+        this._decorations = Decoration.none;
+
+        // Honour `focusOnly`: when the option is set and the editor isn't
+        // focused, leave the placeholder hidden and skip rescheduling. The
+        // next `focusChanged` update reschedules once focus returns.
+        if (focusOnly && !update.view.hasFocus) {
+          return;
+        }
 
-        // Check if the active line (where cursor is) is empty.
         const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
-        const isEmpty = activeLine.text.trim() === '';
-        if (isEmpty) {
-          // Create widget decoration at the start of the current line.
-          const lineStart = activeLine.from;
-          this._timeout = setTimeout(() => {
-            this._decorations = Decoration.set([
-              Decoration.widget({
-                widget: new PlaceholderWidget(content),
-                side: 1,
-              }).range(lineStart),
-            ]);
-
-            update.view.update([]);
-          }, delay);
+        if (activeLine.text.trim() !== '') {
+          return;
         }
 
-        this._decorations = Decoration.none;
+        const lineStart = activeLine.from;
+        const view = update.view;
+        this._timeout = setTimeout(() => {
+          this._decorations = Decoration.set([
+            Decoration.widget({
+              widget: new PlaceholderWidget(content),
+              side: 1,
+            }).range(lineStart),
+          ]);
+          view.update([]);
+        }, delay);
       }
 
       destroy() {

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

@@ -2,23 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type DocHandle, Repo } from '@automerge/automerge-repo';
+import { type ChangeFn, type ChangeOptions, type Doc, type Heads } from '@automerge/automerge';
+import { type DocHandle, Repo, decodeHeads, encodeHeads, initSubduction } from '@automerge/automerge-repo';
 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 { describe, test } from 'vitest';
+import { beforeAll, describe, test } from 'vitest';
 
+import { type IDocHandle } from '@dxos/echo-client';
 import { getDeep } from '@dxos/util';
 
 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 path = ['text'];
-
 class Generator {
   constructor(private readonly _handle: DocHandle<TestObject>) {}
   update(text: string): void {
@@ -33,8 +53,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      // TODO(mykola): Fix types.
-      automerge({ handle: handle as any, path }),
+      automerge({ handle: adaptRepoHandle(handle), path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -58,19 +77,26 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   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 editor = screen.getByTestId('editor');
     expect(editor.textContent).toBe('');
 
     generator.update('hello!');
     expect(editor.textContent).toBe('hello world!');
   });
-
-  // TODO(burdon): Test history/undo.
-  // TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
 });

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-db';
+import { DocAccessor } from '@dxos/echo-client';
 
 import { Cursor } from '../../util';
 import { initialSync } from '../state';

package/src/extensions/automerge/cursor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/echo-db';
+import { type DocAccessor, fromCursor, toCursor } from '@dxos/echo-client';
 import { log } from '@dxos/log';
 
 import { type CursorConverter } from '../../util';

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-db';
+import { type IDocHandle } from '@dxos/echo-client';
 import { log } from '@dxos/log';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';

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

@@ -7,7 +7,7 @@
 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-db';
+import { type IDocHandle } from '@dxos/echo-client';
 
 import { type State } from './defs';
 

package/src/extensions/comments.ts

@@ -100,26 +100,26 @@ export const commentsState = StateField.define<CommentsState>({
  * NOTE: Matches search.
  */
 const styles = EditorView.theme({
-  '.cm-comment, .cm-comment-current': {
-    padding: '3px 0',
-    color: 'var(--color-cm-comment-text)',
-    backgroundColor: 'var(--color-cm-comment-surface)',
-  },
-  '.cm-comment > span, .cm-comment-current > span': {
+  '.cm-comment > span': {
     boxDecorationBreak: 'clone',
-    boxShadow: '0 0 1px 3px var(--color-cm-comment-surface)',
+    boxShadow: '0 0 0 3px var(--color-cm-comment-surface)',
     backgroundColor: 'var(--color-cm-comment-surface)',
-    color: 'var(--color-cm-comment-text)',
+    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({
-    class: isCurrent ? 'cm-comment-current' : 'cm-comment',
+    class: 'cm-comment',
     attributes: {
       'data-testid': 'cm-comment',
       'data-comment-id': id,
+      'data-current': isCurrent ? '1' : '0',
     },
   });
 
@@ -510,34 +510,57 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 // Utils.
 //
 
-export const scrollThreadIntoView = (view: EditorView, id: string, center = true) => {
+/**
+ * Whether the [from, to] document range is entirely within the editor's scroll
+ * viewport. Returns false if either endpoint isn't currently rendered (off-screen).
+ */
+export const isRangeVisible = (view: EditorView, range: { from: number; to: number }): boolean => {
+  const from = view.coordsAtPos(range.from);
+  const to = view.coordsAtPos(range.to);
+  if (!from || !to) {
+    return false;
+  }
+
+  const { top, bottom } = view.scrollDOM.getBoundingClientRect();
+  return from.top >= top && to.bottom <= bottom;
+};
+
+export type ScrollThreadOptions = {
+  /** Vertical alignment when scrolling. */
+  y?: 'start' | 'center' | 'end' | 'nearest';
+  /** Vertical margin (px) to keep around the target when scrolling. */
+  yMargin?: number;
+};
+
+/**
+ * Scroll the comment thread with the given id into view (if not already entirely
+ * visible) and mark it the current comment so the editor highlights it.
+ */
+export const scrollThreadIntoView = (
+  view: EditorView,
+  id: string,
+  { y = 'center', yMargin }: ScrollThreadOptions = {},
+) => {
   const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
   if (!comment?.comment.cursor) {
     return;
   }
+
   const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
-  if (range) {
-    const currentSelection = view.state.selection.main;
-    const currentScrollPosition = view.scrollDOM.scrollTop;
-    const targetScrollPosition = view.coordsAtPos(range.from)?.top;
-
-    const needsScroll =
-      targetScrollPosition !== undefined &&
-      (targetScrollPosition < currentScrollPosition ||
-        targetScrollPosition > currentScrollPosition + view.scrollDOM.clientHeight);
-
-    const needsSelectionUpdate = currentSelection.from !== range.from || currentSelection.to !== range.from;
-
-    if (needsScroll || needsSelectionUpdate) {
-      view.dispatch({
-        selection: needsSelectionUpdate ? { anchor: range.from } : undefined,
-        effects: [
-          needsScroll ? EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined) : [],
-          needsSelectionUpdate ? setSelection.of({ current: id }) : [],
-        ].flat(),
-      });
-    }
+  if (!range) {
+    return;
   }
+
+  const { from, to } = view.state.selection.main;
+  const needsSelectionUpdate = from !== range.from || to !== range.from;
+  view.dispatch({
+    selection: needsSelectionUpdate ? { anchor: range.from } : undefined,
+    effects: [
+      isRangeVisible(view, range) ? [] : EditorView.scrollIntoView(range.from, { y, yMargin }),
+      // Always mark this thread current so the highlight follows the selected thread.
+      setSelection.of({ current: id }),
+    ].flat(),
+  });
 };
 
 /**

package/src/extensions/factories.test.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { markdown, markdownLanguage, insertNewlineContinueMarkup } from '@codemirror/lang-markdown';
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { describe, test } from 'vitest';
+
+import { createBasicExtensions } from './factories';
+
+describe('createBasicExtensions readOnly', () => {
+  test('drops user-initiated edits when readOnly is true', ({ expect }) => {
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: true })],
+    });
+    const tr = state.update({
+      changes: { from: state.doc.length, insert: ' world' },
+      userEvent: 'input.type',
+    });
+    expect(tr.state.doc.toString()).toBe('hello');
+  });
+
+  for (const userEvent of ['delete.forward', 'undo', 'redo']) {
+    test(`drops '${userEvent}' user events when readOnly is true`, ({ expect }) => {
+      const state = EditorState.create({
+        doc: 'hello',
+        extensions: [createBasicExtensions({ readOnly: true })],
+      });
+      const tr = state.update({
+        changes: { from: state.doc.length, insert: ' world' },
+        userEvent,
+      });
+      expect(tr.state.doc.toString()).toBe('hello');
+    });
+  }
+
+  test('allows programmatic dispatches (no userEvent) when readOnly is true', ({ expect }) => {
+    // Streaming consumers (e.g. MarkdownStream) populate the doc programmatically — those
+    // transactions must pass even though the editor is read-only to the user.
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: true })],
+    });
+    const tr = state.update({ changes: { from: state.doc.length, insert: ' world' } });
+    expect(tr.state.doc.toString()).toBe('hello world');
+  });
+
+  test('selection-only transactions still apply when readOnly', ({ expect }) => {
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: true })],
+    });
+    const tr = state.update({ selection: EditorSelection.cursor(2) });
+    expect(tr.state.selection.main.head).toBe(2);
+  });
+
+  test('doc-changing transactions apply normally when readOnly is false', ({ expect }) => {
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: false })],
+    });
+    const tr = state.update({ changes: { from: state.doc.length, insert: ' world' } });
+    expect(tr.state.doc.toString()).toBe('hello world');
+  });
+
+  // Regression: in MarkdownStream `readOnly: true` must also block the markdown extension's
+  // Enter handler (`insertNewlineContinueMarkup`), which programmatically dispatches a list
+  // continuation regardless of the readOnly facet.
+  test('markdown insertNewlineContinueMarkup is suppressed when readOnly', ({ expect }) => {
+    const doc = '- one\n- two';
+    const state = EditorState.create({
+      doc,
+      selection: EditorSelection.cursor(doc.length),
+      extensions: [createBasicExtensions({ readOnly: true }), markdown({ base: markdownLanguage })],
+    });
+    let dispatched: any;
+    insertNewlineContinueMarkup({
+      state,
+      dispatch: (tr) => {
+        dispatched = tr;
+      },
+    });
+    if (dispatched) {
+      expect(dispatched.state.doc.toString()).toBe(doc);
+    }
+  });
+});