Textarea buttons

The CMS Questions
1

I’m creating a custom textareaButton plugin with a dropdown, similar to the built-in headline button. I’d like to insert formatting (like ^ , ^^ , etc.) when a dropdown item is clicked.

The issue is that inside the dropdown item’s click function, this.command is undefined. I’ve tried workarounds like using this.$emit("command", ...), this.editor.emit(...) but none of them seem to work.

It looks like the click handler in dropdown items doesn’t get the same context as top-level buttons, and this is just a basic object or Vue component instance with no connection to the editor.

Is there an officially supported way to emit a command (like insert, toggle, etc.) from a dropdown item in a custom textareaButton?

This is a simple version which works using this.command:

panel.plugin('test/testing', {
    textareaButtons: {
        testing: {
            label: 'Testing',
            icon: "text",
            click: function () {
                this.$emit('command', 'toggle', '<test>', '</test>');
            },
        }
    }
});

And this is what I’d like ideally:

  textareaButtons: {
    testing: {
      label: 'Testing',
      icon: 'text',
      dropdown: [
        {
          label: 'Test 1',
          click: function () {
            this.$emit('command', 'toggle', '<test1>', '</test1>');
          }
        },
        {
          label: 'Test 2',
          click: function () {
            this.$emit('command', 'toggle', '<test2>', '</test2>');
          }
        },
        {
          label: 'Test 3',
          click: function () {
            this.$emit('command', 'toggle', '<test3>', '</test3>');
          }
        }
      ]
    }
  }
});

Thanks

2

Try click() {} or click: () => {} - I think that might preserve the right context.