Inline widget decoration: Cursor not moving as expected

1

Problem: The cursor cannot be placed before the first character in an inline widget decorated word.

Reproduction via remix of linter example on glitch.com

Unsure if there is a solution for this or if I need to implement a custom NodeView for this (can decorations have a custom NodeView?)

Would one of this solutions be better to takle this?

  • Use a mark instead (can marks have custom NodeViews?)
  • Use a full custom node (I know THESE can have NodeViews :wink: )
2

The side option controls whether the widget is placed before or after a cursor at the widget’s position. Widgets do not take up space in the document position system, so you cannot have a widget that allows a cursor position on either side of it.

1 Like
3

Thx for the reply!

So I better create a new mark with a custom NodeView, right?

As far as I understand, I can have multiple dom elements rendered. e. g.

<span class="icon" /><span class="content" />

The custom NodeView can then define that the editor handles the content of span ‘content’ by itself (contentDOM property).

Does it make sense to check that solution path?

4

Marks can’t do things like that. What are you modeling with this widget?

5

Marks can do things like that.

Thx for confirming that custom NodeViews are working with marks.

What are you modeling with this widget?

I’m not sure right now. Just evaluating my options…

I see my question answered. Thx again!

I close this thread to not eat your time with more questions based on incomplete knowledge.

tl;dr: I like to implement annotations for different nodes / linting use cases and currently try to wrap my head around all of this:

  • errors, annotations not to be persisted (I got that with Decorations)
  • comments, persistent but need custom dom view (I use Marks and look now at NodeView).
  • complex very specific case, which I need multiple dom nodes for (like in the footnote example)
6

No, sorry, I made a typo – marks cannot do things like that. If this is purely a visual indicator, I would say that you really don’t want the cursor on either side of it, and just giving it a side: -1 is the reasonable solution. If the thing is a separate semantic element, you could make an inline node for it.

7

Ok. Got it. Thx for the update!