Positioning block-level widgets

voraciousdev · April 3, 2021, 3:14am

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?

voraciousdev · April 3, 2021, 3:37am

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.

voraciousdev · April 3, 2021, 5:19am

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.

marijn · April 3, 2021, 11:49am

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?

voraciousdev · April 3, 2021, 9:18pm

@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!

marijn · April 6, 2021, 11:28am

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.

fabianmichael · April 19, 2021, 10:51am

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.

voraciousdev · April 26, 2021, 3:39pm

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.

voraciousdev · April 28, 2021, 2:33am

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.

github.com

writewithocto/hybrid-mde/blob/main/src/extensions/images.ts

import { syntaxTree } from '@codemirror/language'
import { Range, RangeSet } from '@codemirror/rangeset'
import { EditorState, Extension, StateField } from '@codemirror/state'
import { Decoration, DecorationSet, EditorView, WidgetType } from '@codemirror/view'

interface ImageWidgetParams {
  url: string
}

class ImageWidget extends WidgetType {
  readonly url

  constructor({ url }: ImageWidgetParams) {
    super()

    this.url = url
  }

  eq(imageWidget: ImageWidget) {
    return imageWidget.url === this.url

This file has been truncated. show original

Happy to answer any questions you have!

marijn · April 28, 2021, 10:49am

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.

fabianmichael · April 28, 2021, 9:09pm

Thanks for sharing, it helped me a lot!

Sam-2 · May 10, 2022, 10:37pm

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.

bxff · May 11, 2022, 6:06pm

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

Sam-2 · May 11, 2022, 6:37pm

Thanks so much.