Editor.js: "Streched" option in image tool affects one up level block while loading saved data !

[enes-sahin]

const editor = new EditorJS({
    autofocus: true,
    tools: {
        // Tools
    },
    data: {
        "time": 1566562504744,
        "blocks": [{
                "type": "header",
                "data": {
                    "text": "Editor.js Test",
                    "level": 2
                }
            },
            {
                "type": "paragraph",
                "data": {
                    "text": "Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below"
                }
            },
            {
                "type": "image",
                "data": {
                    "file": {
                        "url": "https://images.unsplash.com/photo-1566501483151-508bc205c847?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"
                    },
                    "caption": "",
                    "withBorder": false,
                    "stretched": true,
                    "withBackground": false
                }
            }
        ],
        "version": "2.15.0"
    }
});

When i load the saved data above in EditorJS; despite the image streched option is true, ce-block--stretched class is applied to one level up block, which is the paragraph in the example.

As a result, paragraph is streched but image stays default.

Is it a bug or am i missing something?

[rmlamarche]

+1 I'm noticing this too

[rmlamarche]

This is where the where the block gets stretched in the image plugin, but I think this is actually related to another issue with editorjs.api.blocks.getCurrentBlockIndex() returning index - 1 instead of index

https://github.com/editor-js/image/blob/70876fde289e9f8baa81ee4b5c8c3dc036ac7035/src/index.js#L354-L367

[enes-sahin]

This is where the where the block gets stretched in the image plugin, but I think this is actually related to another issue with editorjs.api.blocks.getCurrentBlockIndex() returning index - 1 instead of index

https://github.com/editor-js/image/blob/70876fde289e9f8baa81ee4b5c8c3dc036ac7035/src/index.js#L354-L367

@rmlamarche you're right. Both editorjs.api.blocks.getCurrentBlockIndex() and editorjs.api.blocks.getBlocksCount() are returning one minus (index-1) while loading saved data.

But when clicking stretch icon on an image, it returns correctly. I couldn't find a solution yet.

[rmlamarche]

@enes-sahin My guess is that the editorJS api is still initializing when the image plugin is loading the save data. Here is where the currentBlockIndex is initialized in the BlockManager of the api. It gets initialized to -1 while the api loads, after it finishes initializing getCurrentBlockIndex() probably returns the correct index which is why it works when you click the "stretch icon," although I haven't tested this.

https://github.com/codex-team/editor.js/blob/13dc0c9badd43515cac770eb636f5d48a3f2331a/src/components/modules/blockManager.ts#L145

[rmlamarche]

Mmk I got it. I was able to fix it in the image plugin.

In src/index.js

  setTune(tuneName, value) {
    this._data[tuneName] = value;

    this.ui.applyTune(tuneName, value);

    if (tuneName === 'stretched') {
      /**
       * Wait until the API is ready
       */
      Promise.resolve().then(() => {
        const blockId = this.api.blocks.getCurrentBlockIndex();
        this.api.blocks.stretchBlock(blockId, value);
      }).catch(err => {
        console.error(err);
      });
    }
  }

I'll submit a PR on that repo because the fix is actually there.

[enes-sahin]

Mmk I got it. I was able to fix it in the image plugin.

@rmlamarche Thank you for your solution. It works perfecty. Until the issue is fixed, i will use your solution by extending ImageTool class

class MyImageTool extends ImageTool {

  setTune(tuneName, value) {
    this._data[tuneName] = value;

    this.ui.applyTune(tuneName, value);

    if (tuneName === 'stretched') {
      /**
       * Wait until the API is ready
       */
      Promise.resolve().then(() => {
        const blockId = this.api.blocks.getCurrentBlockIndex();
        this.api.blocks.stretchBlock(blockId, value);
      }).catch(err => {
        console.error(err);
      });
    }
  }
}

const editor = new EditorJS({
    tools: { 

        // Other tools

        image: {
            class: MyImageTool,
            inlineToolbar: true,
            config: {
              endpoints: {
                byFile: 'http://127.0.0.1:8000/editor/upladByFile',
                byUrl: 'http://127.0.0.1:8000/editor/uploadByUrl'
              },
            }
          },
    },
    data: MY SAVED DATA
});

Tested and works !