Skip to main content

hotkeys

Sets keyboard shortcuts on the editor root. Custom entries merge over the defaults per key, false on one key disables that default, and hotkeys={false} disables all of them.

Usage​

type THotkeys = false | Record<string, (event?: KeyboardEvent) => void>;

hotkeys?: THotkeys;

Default: undefined. Each default binding fires only when a matching action item exists in the rendered bars:

  • ctrl+s - runs the first item with id === "save"
  • escape - runs the first item with id === "cancel" or id === "close"
  • delete - runs the first item with id === "delete"

A per-key entry overrides just that binding: a function replaces the handler, false removes it. Passing false for the whole prop disables every default.

Example​

Add a shortcut, keeping the defaults:

<script setup>
import { Editor } from "@svar-ui/vue-editor";
</script>

<template>
  <Editor
    :items="items"
    :values="values"
    :hotkeys="{
      'ctrl+enter': () => submit(values),
    }"
  />
</template>

Disable a single default without touching the rest:

<Editor :items="items" :values="values" :hotkeys="{ delete: false }" />

Disable all default hotkeys:

<Editor :items="items" :values="values" :hotkeys="false" />