[BlockTuneAPI] why block.holder becomes undefined in the costractor❓
See original GitHub issueQuestion
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
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
global javascript variable becomes undefined inside part of ...
The reason it becomes 'undefined' is because you set the imgWidth variable from within an event handler function which only executes at some...
Read more >How to Avoid the Infamous "Cannot read properties of ... - Bitovi
When undefined becomes a problem. The function translatePowerLevel below takes a number as argument and returns strings one , two , many ...
Read more >new.target - JavaScript - MDN Web Docs
target returns a reference to the constructor or function that new was called upon. In normal function calls, new.target is undefined . Try...
Read more >Undefined Variable in Jelly Block - ServiceNow Community
Negating the value results in 'true', leading me to believe that jvar_gr has somehow become undefined within the Jelly 'if' block.
Read more >Cannot Read Property of Undefined in JavaScript - Rollbar
Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thank you for your kindness. I’m going to wrap the block in its own wrapper element.
So
We need Tune instance to be created before
block.holder
is created, because to create holder we need to calltune.wrap
method. That’s why inside the Tune constructorblock.holder
is undefinedtune.wrap
is called in process ofblock.holder
creation (because holder should contain wrapper elements), so insidewrap
methodblock.holder
is undefined as well.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