Editor.js: Remove div.codex-editor__redactor click listener

[2277Dhruv]

I have some components that I built using React inside Editor JS and everything's working smoothly except for the fact that the div.codex-editor__redactor has a click listener, so the onClick for the div holding my React component is not registering.

I can remove the listener on chrome, but that's not going to be a "universal" browser solution. So, is there a way to remove this listener for all browsers?

Thanks, I really appreciate this! I love Editor JS!!!

[2277Dhruv]

Or even just let the click propagate

[hata6502]

May be related to https://github.com/codex-team/editor.js/pull/1020

[allankikkas]

Additional info: some frameworks like React bind most of its syntetic or native events to document for performance and other reasons (single event handler provides flexibility and single dom node traversing is slow). So if you kill of event propagation to document, then this click event never reaches document and framework events do not trigger.

[natterstefan]

This is a duplicate of #946, isn' it @gohabereg?

FTR: this might be related to this issue and provides a (temporary) solution: https://github.com/codex-team/editor.js/issues/946#issuecomment-555760936.

[allankikkas]

@natterstefan ref passing is bad practice for react components, please do not use this. Better temporary solution would be setting section for tool wrapper using already known dom node and setting user-select: none; in css to hide visual selection (as this already works when there is a selection set, which may or may not be a bug).

render () { const wrapper = document.createElement('div'); this.api.listeners.on(wrapper, 'click', (e) => { this.api.selection.expandToTag(wrapper); }, false); ReactDOM.render(( <SomeCustomComponent/> ), wrapper); return wrapper; }

[natterstefan]

Hi @aablinov,

I know, the solution was not provided by me and in our app we adjusted it tbh. Thanks for the objection.

Actually, this looks pretty good to me (I just formatted it properly):

  asdf() {
    const wrapper = document.createElement('div')
    this.api.listeners.on(
      wrapper,
      'click',
      e => {
        this.api.selection.expandToTag(wrapper)
      },
      false,
    )
    ReactDOM.render(<SomeCustomComponent />, wrapper)
    return wrapper
  }

Thanks for sharing it with me and others.

[elis]

@2277Dhruv I too have a similar issue and implemented a solution by simply binding the redactor clicks to a new element. Hopefully the pull-request will be merged and this can be used in the official release.

Until then you can install this version: https://github.com/elis/editor.js#d02af95

$ yarn add https://github.com/elis/editor.js#d02af95

works like a charm.