[pull] main from Milkdown:main

e2e/tests/crepe/code.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-import { focusEditor } from '../misc'
+import { focusEditor, setMarkdown } from '../misc'
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/crepe/')
@@ -64,6 +64,28 @@ test('should not be able to change language in readonly mode', async ({
   await expect(languagePickerMenu).toBeVisible()
 })
 
+test('should apply programmatic code block updates in readonly mode', async ({
+  page,
+}) => {
+  const before = "const status = 'before'"
+  const after = "const status = 'after'"
+  await setMarkdown(page, `\`\`\`ts\n${before}\n\`\`\``)
+
+  const codeBlockContentArea = page.locator('.cm-content')
+  await expect(codeBlockContentArea).toHaveText(before)
+
+  await page.evaluate(() => {
+    window.__crepe__.setReadonly(true)
+  })
+  await setMarkdown(page, `\`\`\`ts\n${after}\n\`\`\``)
+
+  await expect(codeBlockContentArea).toHaveText(after)
+
+  await codeBlockContentArea.focus()
+  await page.keyboard.type(' ignored')
+  await expect(codeBlockContentArea).toHaveText(after)
+})
+
 test('should copy code block content', async ({ page, browserName }) => {
   test.skip(
     browserName === 'webkit',

packages/components/src/code-block/view/node-view.ts

@@ -122,7 +122,9 @@ export class CodeMirrorBlock implements NodeView {
         drawSelection(),
         cmKeymap.of(this.codeMirrorKeymap()),
         this.languageConf.of([]),
-        EditorState.changeFilter.of(() => this.view.editable),
+        // Block user edits when the editor is not editable, but always let
+        // updates we sync from ProseMirror through.
+        EditorState.changeFilter.of(() => this.view.editable || this.updating),
         ...this.config.extensions,
         CodeMirror.updateListener.of(this.forwardUpdate),
       ],
@@ -307,8 +309,11 @@ export class CodeMirrorBlock implements NodeView {
 
     this.cm.focus()
     this.updating = true
-    this.cm.dispatch({ selection: { anchor, head } })
-    this.updating = false
+    try {
+      this.cm.dispatch({ selection: { anchor, head } })
+    } finally {
+      this.updating = false
+    }
   }
 
   update(node: Node) {
@@ -343,11 +348,16 @@ export class CodeMirrorBlock implements NodeView {
     const change = computeChange(this.cm.state.doc.toString(), node.textContent)
     if (change) {
       this.updating = true
-      this.cm.dispatch({
-        changes: { from: change.from, to: change.to, insert: change.text },
-        scrollIntoView: true,
-      })
-      this.updating = false
+      try {
+        this.cm.dispatch({
+          changes: { from: change.from, to: change.to, insert: change.text },
+          // Only follow the change when the user can actually be editing here,
+          // so programmatic updates don't scroll a readonly editor around.
+          scrollIntoView: this.view.editable,
+        })
+      } finally {
+        this.updating = false
+      }
     }
     return true
   }