[BlockTuneAPI] why block.holder becomes undefined in the costractor❓

Question

block.holder becomes undefined in the costractor

constructor({ api, data, settings, block}) {
        this.api = api;
        this.data = data;
        this.block = block;
        this.settings = settings || {};
        console.log(block)
        let copyLists = block.map( list => ({...list}))
        console.log(copyLists)

    }

in browser console

holder: undefined
isEmpty: [Exception: TypeError: Cannot read property 'querySelector' of undefined at t.get (https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.20.0/dist/editor.min.js:6:46902) at t.get (https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.20.0/dist/editor.min.js:6:46051) at o.get isEmpty [as isEmpty] (https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.20.0/dist/editor.min.js:6:97878) at o (<anonymous>:1:83)]
name: "paragraph"
selected: [Exception: TypeError: Cannot read property 'classList' of undefined at t.get (https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.20.0/dist/editor.min.js:6:46557) at o.get selected [as selected] (https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.20.0/dist/editor.min.js:6:97911) at o (<anonymous>:1:83)]
stretched: [Exception: TypeError: Cannot read prop

i want holder elements

Context

I’m using the block tune API to create an alignment tool.

{
    "time" : 1617635673974,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "hello center text"
            },
            "tunes" : {
                "aligmentTune" : {
                    "alignment" : "center"
                }
            }
        },
...
...

In the data on the editor, it has an alignment. I want to use the "alignment" : "center" to add a css class to the holder in constructor. ex. block.holder.classList.add("text-aligment--center") but holder block’s undefined,

Is there any way to do that?

I could have used “wrap” method instead. @n0str @gohabereg

that my code https://github.com/kaaaaaaaaaaai/editorjs-alignment-blocktune

[kaaaaaaaaaaai]

Thank you for your kindness. I’m going to wrap the block in its own wrapper element.

[gohabereg]

So

1. Constructor

We need Tune instance to be created before block.holder is created, because to create holder we need to call tune.wrap method. That’s why inside the Tune constructor block.holder is undefined

1. wrap

tune.wrap is called in process of block.holder creation (because holder should contain wrapper elements), so inside wrap method block.holder is undefined as well.

1. blockContent vs block.holder

Block holder is the element created by Editor core (with .ce-block class name), blockContent is an element provided by Tool directly

To safely use tunes it is recommended to wrap block content with you own wrapper and use it to apply styles because you can guarantee that wrapper accessibility.

However, we should definitely add some notices to console in case of incorrect block.holder access