Is it possible to implement a destroy method in MarkView similar to NodeView?

1

I need to clean up some listeners when Mark is destroyed.

Here is my current workaround:

const customMarkView = (): MarkViewConstructor => {
  const dom = document.createElement('span')
  let ob: MutationObserver | undefined
  const destroy = () => {
    // remove listeners
  }
  requestAnimationFrame(() => {
    if (dom.parentElement) {
      ob = new MutationObserver(function () {
        requestAnimationFrame(() => {
          if (!dom.parentElement) {
            destroy()
          }
        })
      })
      ob.observe(dom.parentElement, {
        childList: true,
        subtree: true,
      })
    } else {
      destroy()
    }
  })
  return {
    dom,
  }
}
2

This looks like a neat hack, what is your issue with it? LGTM.

3

As far as I am aware, it’s just another async callback perhaps heavier than others. Considering an observer is created for each decoration, which may exist as a plethora (hundreds, possibly thousands in some cases,) I suppose that this is more of a potential performance concern that should be evaluated.

MutationObserver though is better than the deprecated mutation events, so perhaps performance is better, especially with modern computers. Though, it’s always good to be aware of tablets / phones / weak CPU etc.

4

I’m sure you could optimize this, worst case scenario is to keep track of the listeners in the plugin ( or some global state) that creates the decorations, and when one is removed then delete the listeners.

IMO that’s premature, if profiling says that it eats a lot of CPU I’d fix it otherwise I wouldn’t.