Enter within node views breaks node on iOS

[philippkuehn]

Issue details

When pressing enter within a simple node view with contentDOM, iOS duplicates nodes. This only happens if I add a class to dom. I think it’s the same issue as described in #1127. Maybe the applied fix fixed it for nodes but not for node views?

class ParagraphView {
  constructor(node) {
    this.dom = document.createElement('div')
    // without this everything is working fine
    this.dom.classList.add('node-view')
    
    this.contentDOM = document.createElement('div')
    this.contentDOM.classList.add('content')
    
    this.dom.append(this.contentDOM)
  }

  ignoreMutation(mutation) {
    // press enter and ignoreMutation is only called on iOS
    console.log({ mutation })
    return true
  }
}

window.view = new EditorView(document.querySelector("#editor"), {
  // ...
  nodeViews: {
    paragraph(node) { return new ParagraphView(node) }
  }
})

When pressing enter ignoreMutation is called (only on iOS) with the following value:

mutation: {
  addedNodes: NodeList [<div class="content">] (1),
  attributeName: null,
  attributeNamespace: null,
  nextSibling: null,
  oldValue: null,
  previousSibling: <div class="content">,
  removedNodes: NodeList [] (0),
  target: <div class="node-view">,
  type: "childList",
}

I could find a workaround by returning false for ignoreMutation in this situation but this will re-render the node view which is not an optimal solution.

Steps to reproduce

demo: https://glitch.com/edit/#!/thundering-fast-question?path=index.js

1. click into paragraph
2. press enter

ProseMirror version

prosemirror-view: 1.18.3

Affected platforms

• Chrome
• Firefox
• Internet Explorer
• iOS

Screenshots / Screencast (Optional)

RPReplay_Final1619511128.MP4

[marijnh]

You really don't want to return true from ignoreMutation for mutations like this. That'll prevent the editor from handling the mutation at all, so it should only be done for mutations safely tucked away in uneditable nodes.

[philippkuehn]

Yeah, I just returned true to demonstrate the issue, because no other browser triggers ignoreMutation in this case. If I return false the node view gets re-created on enter. Is there anything else I can do?

[marijnh]

Well, just return false. The node view should be recreated, since the browser messed it up. (Enter is intentionally not prevent-defaulted on iOS because doing that screws up the state of the virtual keyboard.)

[philippkuehn]

My ignoreMutation handler is basically doing something like this:

  ignoreMutation(mutation) {
    if (mutation.type === 'selection') {
      if (this.node.isLeaf) {
        return true
      }

      return false
    }

    if (!this.contentDOM) {
      return true
    }

    return this.contentDOM.contains(mutation.target)
  }

But I try to find a workaround for iOS myself. You can close this if you want.

[marijnh]

I think the last condition is the dangerous one—if mutation.target is this.dom, the mutation is still relevant for the editable content, and should not be ignored.