💡 Optional mutation observer for block tools

[medzhidov]

Sometimes it needs to stop mutation observer on blocks, because they are not created to be observed. For example, i create an custom tool block that has several logic, attributes/classes/styles and i want to save only content that i dispatched via block.dispatchChange();, because mutation observer trigger "didMutated" when content is not really edited (for example trigger class on image by hovering).

I already solved this by edited code, so there is my suggested solution:

// src/components/tools/base.ts:80 - add
/**
   * Is mutation observer enabled for Tool
   */
  IsEnabledMutationObserver = 'isEnabledMutationObserver',

// src/components/tools/block.ts:70 - add
/**
   * Returns true if Tool supports linebreaks
   */
  public get isEnabledMutationObserver(): boolean {
    return this.constructable[InternalBlockToolSettings.IsEnabledMutationObserver] !== false;
  }

//src/components/block/index.ts:267 - replace
    if (tool.isEnabledMutationObserver) {
      this.mutationObserver = new MutationObserver(this.didMutated);
    }

//src/components/block/index.ts:295 - replace
this.mutationObserver?.observe(

//src/components/block/index.ts:716 - replace
this.mutationObserver?.disconnect();

So now we can add in our block tool a static method and mutation will be ignored for this block:

export default class SimpleImage {
   constructor(){...}
   
   static get isEnabledMutationObserver() {
        return false;
   }
   
   render() {...}

It's 2 am so i may forget something but it works perfectly in my project now.

[Bobsans]

I have related problem too. I write tool with map and map script update block class many times per second. So if i call block.dispatchChange() from tool - debouncer ignore this call, and data saved only if block lose focus (observer unsubscribes). Please add possibility to disable observer for tool

[lucas-varela]

@medzhidov and @Bobsans, I've implemented a way to disable the mutation observation, check out this PR: #2317 

Also, I've created a branch that includes the dist folder built with these changes: https://github.com/lucas-varela/editor.js/tree/build/optional-mutation-observer

This branch can be used on an npm install or yarn add, like:

npm install https://github.com/lucas-varela/editor.js.git#build/optional-mutation-observer

You can test it if you'd like, but I don't recommend using it in production, for obvious reasons. Either fork my feature branch and build it, or wait for my PR to (hopefully) be merged.

[medzhidov]

@lucas-varela Okay, but current realisation is a bad: i have a vue component with a LOT of divs inside, so now i must add this attribute to EACH element. Why you just cant see for parent blocks with that attribute like this?

[neSpecc]

@medzhidov

Why you just cant see for parent blocks with that attribute like this?

You're right, it would be better to improve it like that.

[medzhidov]

@neSpecc Created PR for this fix, added "true" as an value of attribute to make it more variable