Positioning block-level widgets

I am trying to implement a block-level Decoration widget, but it looks like it does not respect the side option as inline widgets do. Is there a way to specify whether a block-level Decoration widget should render before or after the applicable line?

1 Like

It looks like I was incorrect about my perception of what was happening. The block-level decorations are actually splitting the line itself, because of the position I am giving the decoration. It looks like I need to pass the line start or line end position in order to properly place the block-level decoration before or after the current line.

I was able to get the block-level decoration implemented correctly, but now I’m running into a weird side effect. When clicking on the last line of the document after rendering the decoration (regardless of the content of the document), my cursor is not being correctly registered. It’s only the last line this happens on.

It’s not unlikely that there are issues left in block widgets. Could you show a minimal example of the code needed to create the situation where this is visible?

@marijn I created a CodeSandbox for you. If you try clicking on the last line (the only line in my example), you should see what I’m talking about. Thanks for checking it out!

The problem is that you are using a view plugin to insert height-influencing decorations. See this section of the decoration example. Block widgets should definitely be kept in a state field.

1 Like

Have you figured out, how to handle block widgets in state? I’m also working on a Markdown editor and would be curious, how you managed this.

Not yet. I did get it working with a state field instead of the view plugin, but I’m running into the same problem where clicking on the last line has really weird behavior.

I finally got this working. It turns out the weird behavior I was experiencing was caused by adding a vertical margin to my block widget. You can see the working extension here.

Happy to answer any questions you have!


Oh, indeed, margins between block elements will confuse the editor. Any whitespace should be kept inside of your element. I’ve updated a doc comment to mention this.

1 Like

Thanks for sharing, it helped me a lot! :slight_smile:

Hey - any chance you still have the code to do this using a state field? Struggling with trying to convert from view plugin to state field. Thanks.

You might be looking for ink/images.ts at main · writewithocto/ink (github.com).

Thanks so much.