If NodeView is selected then empty paragraph selections don't register inside of margins

1

Originally posted in GitHub, but putting here for good measure :slight_smile:

Describe the bug

In my editor, I have a custom NodeView with a nested <input> field. Everything works great, save one issue. If I select an empty paragraph node, the cursor will appear to update but the selection won’t register. That is made clear in my case by the “add” icon not appearing, but it is far worse if a user starts typing, as it replaces the NodeView.

In my testing I have found that it registers only when you select the surrounding margins of the empty p node. When I changed the css of the p node to have padding with 0px margins, there was no way to register it from a click event. It will reset once I start using the keyboard, or select a different p node, but not on that initial click after the NodeView is selected.

Steps to Reproduce

Steps to reproduce the behavior:

  1. Select the input NodeView.
  2. Select the margins (i.e. halfway between the two nodes) of the p node and start typing. It should work properly.
  3. Select the inner bounds of the p node and start typing. It should replace the NodeView. Note: It sporadically works as you’d expect, so just keep repeating these steps and you’ll see what I mean.

Editor Sandbox: https://codesandbox.io/s/prosemirror-tiptap-editor-sandbox-0yyor?fontsize=14

Expected behavior

After typing in the text field, I expect to be able to select the empty paragraph anywhere within the bounds and start typing at that position.

Screenshots

From the sandbox, a stripped down example showing how fields are replaced. inline-fields-issue-v2

Blue plus icon appears using the floating bubble menu, so it’s pretty easy to see when it does and does not work.

inline-fields-issue

Additional Context

Not sure if this is a Prosemirror or Tiptap issue, but I do know that the issue is regarding the following function in index.js (I found this code from a ProseMirror thread):

onFocus() {
          this.view.dispatch(
            this.view.state.tr.setSelection(
              NodeSelection.create(this.view.state.doc, this.getPos())
            )
          );
}

This makes it possible to use the enter key to go to new lines and focus them automatically, so I’d really rather keep it if possible…

ProseMirror version

“prosemirror-state”: “^1.2.3”, “prosemirror-view”: “^1.9.12”, whichever version of prosemirror that tiptap is using

Affected platforms

  • [x] Chrome: margins work, not inner node
  • [x] Safari: nothing works, save random instances
  • [ n/a ] Internet Explorer
  • [ n/a ] Other
2

Please don’t. One channel is enough.

1 Like
3

My apologies, wasn’t sure how active GitHub issues were compared to this.

Anyways, I figured this out late last night. Tiptap doesn’t really allow you to access the get view() interface, outside of a few basic features. They did have a selected prop though, which made it so I didn’t have to use a transaction to focus the input. Still not sure why this bug was happening, but a fix is a fix!

Anyways, I really love what you’ve done with Prosemirror and I’ll for sure be donating soon. Keep up the good work :slight_smile: