codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.71k stars 2.08k forks source link

Nested editors within custom block tool (Angular) #1212

Closed jpw547-zz closed 4 years ago

jpw547-zz commented 4 years ago

I have an instance of EditorJS working for an Angular project that I am working on and am making several custom blocks for the editor. However one of the kinds of custom blocks that I am looking to make would have one or more discrete new instances of the block editor inside of that block.

Below is what I have for my render function in the custom block, and it correctly shows another block within the first one. However when I try to click on the nested block the focus is immediately directed to the new block that the parent editor made below my custom block. I feel like this is easier than I am probably making it, so I just thought I'd ask for any suggestions on what I might be doing wrong, or how to implement this if anyone knows how? Or maybe it isn't possible and I just didn't know.

render() {
        this.wrapper = document.createElement('div');
        const blockEditor = document.createElement('div');

        blockEditor.id = 'c2aeditor';

        this.wrapper.appendChild(blockEditor);

        this.embeddedEditor = new EditorJS({
            holder: blockEditor,
            data: this.data.editorData !== undefined ? this.data.editorData : {},
            tools: {
                ...
              }
        })

        return this.wrapper;
    }

Anyway, thanks in advance for any advice that anyone has.

ranemihir commented 4 years ago

I don't understand why you would need nested instances of editor.js. It makes no sense.

flydev-fr commented 4 years ago

In one of my custom block, I have this function defined :

  focusEditor(editor) {
    editor.focus(true);
  }

then I registered a click event on the wrapper :

   this.api.listeners.on(Wrapper, 'click', () => {
      this.focusEditor(nestedEditor);
    }, false);

This might give you an idea. It's quite hackish but "it works". Still trying to figure how to avoid loosing the focus when clicking on an input.

hata6502 commented 4 years ago

https://github.com/codex-team/editor.js/pull/1055

gohabereg commented 4 years ago

https://github.com/codex-team/editor.js/pull/1055#issuecomment-664018031