Inconsistent behavior with Selection and "atom" Node

raphaelsantos · February 24, 2020, 10:51pm

My app has a line with text where I can add text inputs (they are wrapped in webcomponents and set as “atom” Nodes, unselectable and “isolating”.

They work as expected except if there is no content right after the node, in this case the text inputs get removed upon pressing backspace while writing inside it. If there is some text right after the node it does not happen.

I was investigating a bit and notice that that if “editorView.state.selection.from” matches the index right after my text input node it gets removed upon pressing backspace, if it is another value (because I entered text after adding the node, or clicked somewhere else before focusing on the text input field) it doesn’t get removed and the backspace seems to be completely ignored (I would expect it to remove whatever is at selection index).

Are there any settings that I am supposed to use in this case? Or should I write some code to handle transactions differently whenever the text input webcomponent has focus?

marijn · February 25, 2020, 8:23am

You mention editing inside the nodes. Is that done in another control (which is separately focused), or is that still ProseMirror managing the editing, via a contentDOM on the node view?

raphaelsantos · February 25, 2020, 2:32pm

Hi @marijn, I set these properties to my component’s nodeSpec

    atom: true,
    isolating: true,
    inline: true,
    selectable: false,

I was expecting ProseMirror to ignore any inputs while the focus is on my component, and it seems to be the case. Apparently the only exception is if the selection points to the index right after the component and I press backspace, which removes the node holding my component. I’m not using ProseMirror inside my component, it’s an implementation of Google Material text input.

I’m not using contentDom.

marijn · February 25, 2020, 2:57pm

If focus is on your node view, you can use the stopEvent method on your node view object to prevent ProseMirror from handling events inside it.

raphaelsantos · February 25, 2020, 3:05pm

The removal is happening at this line.

github.com

ProseMirror/prosemirror-view/blob/master/src/capturekeys.js#L198


  if (!(view.state.selection instanceof TextSelection)) return true
  let {$head, $anchor, empty} = view.state.selection
  if (!$head.sameParent($anchor)) return true
  if (!empty) return false
  if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) return true
  let nextNode = !$head.textOffset && (dir < 0 ? $head.nodeBefore : $head.nodeAfter)
  if (nextNode && !nextNode.isText) {
    let tr = view.state.tr
    if (dir < 0) tr.delete($head.pos - nextNode.nodeSize, $head.pos)
    else tr.delete($head.pos, $head.pos + nextNode.nodeSize)
    view.dispatch(tr)
    return true
  }
  return false
}


function switchEditable(view, node, state) {
  view.domObserver.stop()
  node.contentEditable = state
  view.domObserver.start()
}

raphaelsantos · February 25, 2020, 7:24pm

Hi @marijn, your stopEvent() suggestion worked for me.

Thanks for your time!