Editor.jsのマニアックな使い方

const EDITOR_JS_TOOLS = {
      embed: { class: Embed, inlineToolbar: true },
      table: { class: Table, inlineToolbar: true },
      paragraph: { class: Paragraph, inlineToolbar: true },
      list: List,
      damage: {
        class: Damage,
        config: {
          userid: user_id,
          diceworld: props.diceworld.diceworld_id,
          characternamelist: characterNamelist,
          characteridlist: characterIDlist,
        },
      },
    }

class MyTool {
  constructor({data, api}){
    this.api = api;
    this._element  = document.createElement('div');

    this.damage_form = document.createElement('div');
    this.damage_form.innerHTML = `<input type="number" name="damage" id="damage_input" 
pattern="[\d]" maxlength="4" autocomplete="off"/>`  

    this.damage_button = document.createElement('div');

    this.api.listeners.on(this.damage_form, 'click', () => {
    this.damage_value = document.getElementById('damage_input').value
    console.log('input',this.damage_value);
    }, false);

    this.damage_button.classList.add('cdx-button')
    button_damage.innerHTML = 'Damage'
    this.api.listeners.on(damage_button,'click',() => {
    console.log('Button clicked!',this.damage_value);
     },  false)

    this._element.appendChild(this.damage_form)
    this._element.appendChild(this.damage_button) 

   }

    render() {
        return this._element
    }
}