Decorator iteration on click event

v6
1

Hey there!
I wonder if there is a possibility to iterate through all decorations on click event.
Please take a look at the example below and the comments in the code

const DecoPlugin = ViewPlugin.fromClass(
  class {
    decorations: DecorationSet;

    constructor(view: EditorView) {
      this.decorations = deco(view);
    }

    update(update: ViewUpdate) {
      if (update.docChanged || update.viewportChanged) {
        this.decorations = deco(update.view);
      }
    }
  },
  {
    decorations: (v) => v.decorations,
    eventHandlers: {
      click: (e, view) => {
        const target = e.target as HTMLElement;

        // here I would like to check if the clicked element is a decorator
        // if YES, I want to take its coords (from, to)
      }
    }
  }
);

const deco = (view: EditorView) => {
  const widgets: Range<Decoration>[] = [];
  
  // here I add lots of decorators
  // widget.push(Decoration.replace(...)

  return Decoration.set(widgets, true);
};
1 Like
2

Your event handler can access this.decorations, and you can use posAtCoords to get a position from a mouse event.

3 Likes
3

thanks a lot!

1 Like
4

i have the same situation but this inside handler is undefined. Any help please :slight_smile:
I’m quite confused

const locatorsView = ViewPlugin.fromClass(class {
    decorations; 

    constructor(view) {
        this.decorations = locatorBoxes(view)
    }

    update(update) {
        if (update.docChanged || update.viewportChanged)
            this.decorations = locatorBoxes(update.view)
    }
}, {
    decorations: v => v.decorations,

    eventHandlers: {
        mousedown: (e, view) => {
            let pos = view.posAtDOM(e.target);
            let deco;
            console.log(e)
            console.log(view)
            console.log(this);
        }
    }
})
5

Weird. When I do that this holds the plugin instance. What version of @codemirror/view are you using?

6

I also thought that it is the problem so I reinstalled all packages, but still got the error
image

7

Though in package-lock.json I have these dependencies from basic-setup… But I dont use it, basic-setup is an option in uiw/react-codemirror component, which I disabled

image
image1415×857 77 KB

8

Oh, right, you’re using an arrow function for the event handler. Those can’t be bound. Use a function expression or shorthand method syntax.

2 Likes
9

Thanks thanks thanks a lot! It helped :yum: