# Textarea buttons

****

You can add your custom <a href="https://getkirby.com/docs/reference/panel/fields/textarea">textarea</a> button in a plugin via the `textareaButtons` extension:

```js "site/plugins/your-plugin/index.js"
panel.plugin("getkirby/custom-textarea-buttons", {
  textareaButtons: {
    highlight: {
      label: "Highlight",
      icon: "wand",
      click: function () {
        this.command("toggle", "<mark>", "</mark>")
      },
      shortcut: "m",
    },
  }
});
```

Each button should specify a `label`, an <a href="https://getkirby.com/docs/reference/panel/icons">`icon`</a> as well as a `click` handler.

### `click` handler

This function is called when your button is clicked. You can add any code you want, but most likely you want to use the `this.command(name, ...args)` helper functions to trigger changes in the textarea input.

<warning>
Don't use arrow function syntax such as `click: () => `. We cannot rebind `this` inside of an arrow function and you won't have access to the `this.command` helper.
</warning>

The following commands are supported:

| Command name | Description | Arguments |
|-|-|-|
| `dialog` | Opens a dialog component | `string` dialog name |
| `insert` | Inserts the given text at the current selection | `string` `func` text |
| `prepend` | Prepends the given text to the current selection | `string` `func` text |
| `toggle` | Toggles wrapping of the current selection | `string` `func` before,<br>`string` `func` after (optional) |
| `upload` | Opens the file upload dialog | |
| `wrap` | Wraps the current selection with the given text | `string` `func` before,<br>`string` `func` after (optional) |

All arguments that can be a callback function themselves, will be called with two parameters:
- `input` reference to textarea input Vue component
- `selection` currently selected text

For example, the default ordered list button triggers the following command

```js
this.command("insert", (input, selection) =>
  selection
    .split("\n")
    .map((line, index) => index + 1 + ". " + line)
    .join("\n")
)
```

### Button label translation
You can translate the button label by defining it in the label getter. The getter ensures that the translation is already loaded when the label is rendered:

```js "site/plugins/your-plugin/index.js"
panel.plugin("getkirby/custom-textarea-buttons", {
  textareaButtons: {
    highlight: {
      get label() {
        return panel.$t("highlight");
      },
      icon: "wand",
      click: function () {
        this.command("toggle", "<mark>", "</mark>")
      },
      shortcut: "m",
    },
  }
});
```

<a href="https://getkirby.com/docs/reference/plugins/extensions/translations">Read more about plugin translations.</a>

## Shortcut

Each button can also define a `shortcut` which will trigger the button's `click` handler when the shortcut is pressed together with the `Cmd`/`Ctrl` key inside the textarea.

## Use in the field

Your new textarea button won't automatically be included in the textarea's toolbar. To add it, <a href="https://getkirby.com/docs/reference/panel/fields/textarea#toolbar__customizing-the-toolbar">use the `buttons` option</a>.