Access Decorations from tooltip (or vise versa)

My app uses MatchDecorator for decorating URLs. But I also want to show tooltip on those URLs. However, I’m not sure how to access and iterate my decorators from tooltips, or other way, generating tooltip (as Widgets?) from Decorator.

The callback given to hoverTooltip could use the range set holding the decorations to figure out whether there’s a match at the hovered position, if hover tooltips are what you are trying to implement. If these are always-visible things, I guess you could use the decorate option to generate both mark decorations and widgets for a given match.

I was asking how to do this part. hoverTooltip’s callback returns view, pos, and side, and I’m guessing I can use EditorView.decorations to get decorations, but I’m not quite sure how to query decorations using this API.

Ok, I was able to access decorations by the following code:

const URLHover = hoverTooltip((view, pos, side) => {

    let foundURL = null

    view.state.facet(EditorView.decorations).forEach((d) => {
        let deco: DecorationSet = (typeof d === 'function') ? d(view) : d
        deco.between(pos, pos, (from, to, value) => {
            if (from <= pos && pos < to && value.spec.class == "tok-url") {
                foundURL = view.state.doc.sliceString(from, to)

    // if (foundURL) { return ... }

Supposedly you’re storing the range set produced by MatchDecorator in some view plugin, which you could access in the callback, so that you don’t have to look at all decorations, only the relevant ones.

1 Like