LineWidget following the content flow as if it were "inline"

I’m trying to implement image upload in CodeMirror using widgets containing a file input.
I got the basics working, so far so good:

  1. Insert widget using LineWidget
  2. File upload on file input change
  3. Replace the widget with markdown image ![name](url)

Now I’d like the widgets to behave like “inline block” content, moving down on newline and removed on backspace the an empty line below. But a LineWidget is bound to the line, so it sticks to the line (as expected):


I’ve also tried using setBookmark with a custom element but don’t think this work for me:

What would be the best approach here? Is LineWidget the way to go here?
Any help is appreciated!


setBookmark is what you need if you want to add an inline element in the content.

1 Like

Thanks, I’ll give it another try. Do you by any chance have an example of setBookmark?
I’ve tried fiddling with it but I can’t get it to feel “inline”. For example I can’t seem to remove it using backspace/delete (only when using in combination with alt/cmd). Is this by design?

Yes, it is—you’ll have to add a custom key handler to make backspace or delete directly at the widget delete it.

I sort of got it working using markText:

Suggestions for improvement are welcome though :slight_smile: