Now I'm trying to create Nest function by block-tune-plugin in Editor.js. To do so, I wrote below code.
render() {
const wrapper = Dom.make("div");
const button = document.createElement("button");
button.classList.add(this.api.styles.settingsButton);
button.innerHTML = "nest";
button.type = "button";
wrapper.appendChild(button);
this.api.listeners.on(button, "click", (event) => {
this.distance = this.distance + this.base;
this.padding = this.distance + "rem";
button.classList.toggle(this.api.styles.settingsButtonActive);
this.wrap(event);
});
return wrapper;
}
wrap(blockContent) {
this.wrapper = Dom.make("div");
this.wrapper.style.paddingLeft = this.padding;
this.wrapper.append(blockContent);
return this.wrapper;
}
However if I push button that is in block tune menu, the block don't act. What is the problem of this code?
I tried with this code. In this wrap(), I set the default postion and try to toggle CSS class by count up variable. But in this way, I could change the classname but I can't get CSS effect
render() {
this.api.listeners.on(button, "click", (event) => {
this.data = this.count;
this.count += 1;
this.wrap(event);
});
return wrapper;
}
wrap(blockContent) {
this.wrapper.classList.toggle(this.CSS.nest[this.data]);
if (this.count === 2) {
this.wrapper.style.paddingLeft = "10rem";
}
this.wrapper.style.paddingLeft = "5rem";