Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Always having an empty paragraph at the end of the document #143

Open
holtwick opened this issue Dec 21, 2018 · 6 comments

Comments

Projects
None yet
3 participants
@holtwick
Copy link

commented Dec 21, 2018

In some scenarios it is almost impossible to put a cursor after the last element, like for the "Embed" example: https://tiptap.scrumpy.io/embeds

It would be great to always have an empty trailing paragraph to avoid this problem.

@philippkuehn

This comment has been minimized.

Copy link
Contributor

commented Dec 21, 2018

Yeah that sounds good.

@holtwick

This comment has been minimized.

Copy link
Author

commented Jul 7, 2019

@philippkuehn do you think that an approach like the one used for https://tiptap.scrumpy.io/title would be a smart way to solve this issue?

@philippkuehn

This comment has been minimized.

Copy link
Contributor

commented Jul 9, 2019

Hmm, I don't think so. But I still don't know how to solve this problem 😅

@holtwick

This comment has been minimized.

Copy link
Author

commented Jul 9, 2019

Thanks for the feedback. I tried to implement it this way, but indeed I didn't get it working correctly. The problem was that this empty last element would not automatically change to a regular paragraph element when typing in it.

I asked on the ProseMirror list, maybe they have an idea: https://discuss.prosemirror.net/t/empty-trailing-block/2072

@ryanbliss

This comment has been minimized.

Copy link

commented Jul 19, 2019

@holtwick if you find any solutions I'd love to hear it. The use case for our project is embedding textinputs into the notes so we can update values in a 3rd party application. Like in the embed Scrumpy example, it gets stuck immediately thereafter. Workarounds or fixes, I'm all ears!

@ifiokjr ifiokjr referenced this issue Jul 20, 2019

Merged

feat: ensure trailing paragraph #110

3 of 4 tasks complete
@ryanbliss

This comment has been minimized.

Copy link

commented Jul 20, 2019

As mentioned in the linked Prosemirror thread that @holtwick opened, gapcursor does kind of work (you just need to set showGapCursor: true on the node), but it's far from a complete solution. You can change the CSS for the cursor, but I was having trouble making it appear consistently. Now it only really appears when you are on the selection point after the node, rather than on the node itself; this would be a fine solution if there was an intuitive way to present this to the user, but I haven't figured that part out.

Really what I settled on is this:

// Catch events on stopEvent to ensure line breaks work as expected
// This works well for text fields
stopEvent(e) {
    if (e.inputType) {
      if (e.inputType === 'insertLineBreak') {
        return false;
      }
    } else if (e.key) {
      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
        return false;
      }
    }
    return true;
}
// Enable gapCursor and set selectable to true
get schema() {
    return {
      attrs: {  ... },
      group: 'block',
      selectable: true,
      showGapCursor: true,
      atom: true, // not quite sure why I needed this, but it seemed to help
     ...
}

Finally, in my component, I set the cursor position to the NodeView when the <input> was focused. This will obviously differ depending on your use case.

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

Again, far from a perfect solution, but hopefully this will help others looking into similar use cases. I had some jankier solutions for ensuring there was always a trailing paragraph (I threw those out), but we won't talk about those 🤣

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.