how to call wrap method when block-tune menu button clicked in Editor.js

466 Views Asked by At

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";
0

There are 0 best solutions below