fix(core): report contentDOM replacement mutations

.changeset/tender-spoons-report.md

@@ -0,0 +1,5 @@
+---
+'@prosemirror-adapter/core': patch
+---
+
+Report replacement mutations after the browser removes a node view's `contentDOM`, allowing ProseMirror to preserve the first character typed over a full selection.

e2e/tests/node-view.spec.ts

@@ -42,14 +42,15 @@ testAll(() => {
   })
 })
 
-testAll(() => {
+testAll(({ framework }) => {
   test('code block node view preserves the first character typed over a full selection', async ({
     page,
     browserName,
   }) => {
     test.fail(
-      browserName === 'chromium' || browserName === 'webkit',
-      'prosemirror-view currently drops the first character in these browsers',
+      // https://code.haverbeke.berlin/prosemirror/prosemirror/issues/1581
+      framework === 'lit' && (browserName === 'chromium' || browserName === 'webkit'),
+      'prosemirror-view cannot recover Lit node view content in these browsers',
     )
 
     const content = page.locator('.editor [data-node-view-root="true"] pre code[data-node-view-content="true"]')

packages/core/src/nodeView/CoreNodeView.ts

@@ -8,6 +8,8 @@ import { isContentDOMRemoval } from '../utils/is-content-dom-removal'
 import type { CoreNodeViewSpec, CoreNodeViewUserOptions, NodeViewDOMSpec } from './CoreNodeViewOptions'
 
 export class CoreNodeView<ComponentType> implements NodeView {
+  #contentDOMWasRemoved = false
+
   key: string
   dom: HTMLElement
   contentDOM: HTMLElement | null
@@ -107,6 +109,8 @@ export class CoreNodeView<ComponentType> implements NodeView {
   shouldIgnoreMutation: (mutation: ViewMutationRecord) => boolean = (mutation) => {
     if (!this.dom || !this.contentDOM) return true
 
+    if (this.dom.contains(this.contentDOM)) this.#contentDOMWasRemoved = false
+
     if (this.node.isLeaf || this.node.isAtom) return true
 
     if (mutation.type === 'selection') return false
@@ -115,7 +119,12 @@ export class CoreNodeView<ComponentType> implements NodeView {
 
     if (this.contentDOM.contains(mutation.target)) return false
 
-    if (isContentDOMRemoval(mutation, this.contentDOM)) return false
+    if (isContentDOMRemoval(mutation, this.contentDOM)) {
+      this.#contentDOMWasRemoved = true
+      return false
+    }
+
+    if (this.#contentDOMWasRemoved && this.dom.contains(mutation.target)) return false
 
     return true
   }