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

1

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):

Jul-15-2019%2017-39-49
https://codepen.io/snap/pen/JQQEVq

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

https://codepen.io/snap/pen/ewwRjK

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

Related:

2

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

1 Like
3

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?

https://codepen.io/snap/pen/ewwRjK

4

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

5

I sort of got it working using markText:

https://codepen.io/snap/pen/OeKWVe?editors=1010

Suggestions for improvement are welcome though :slight_smile: