How to catch Block's onFocus event simply

[hata6502]

I think it is more useful to implement focus event in Editor.js ! To catch Block's onFocus event, it needs to use MutationObserver currently.

  render() {
    const container = document.createElement('div');

    setTimeout(() => {
      const block = container.parentElement && container.parentElement.parentElement;

      if (block) {
        // TODO: disconnect
        const observer = new MutationObserver(() => {
          console.log(block.classList);
        });

        observer.observe(block, {
          attributeFilter: ['class'],
          attributes: true,
        });
      }  
    }, 100);

    return container;
  }

console output

DOMTokenList ["ce-block", value: "ce-block"]
DOMTokenList(2) ["ce-block", "ce-block--focused", value: "ce-block ce-block--focused"]

[theevilhead]

If I am getting this right, listening for a focus event on a contentEditable block should help out.

[webdeb]

Related issue #1198 It would be good to have onFocus & onBlur events for the whole Editor.

[elbakerino]

I got a super basic editor, so can't tell if it works for deeper/all blocks.

The editor is rendered inside a custom holder, this custom holder is focusable and catches the listeners inside, but isn't focusable by it's own through e.g. the keyboard.

Using React, this is the custom holder:

<div
    id={'_uis2-editor'}
    tabIndex={-1}
    onFocus={onFocus}
    onBlur={onBlur}
/>

[apiviuw]

Standar blok fokus