onAction

Fires when a toolbar item, a section header, or a placement close action is activated. Use it to handle custom toolbar buttons and close, cancel, and delete flows.

Usage

onAction?: (ev: {
  item: any;
  values: Record<string, any>;
  changes: string[];
}) => void;

Field	Type	Description
item	object	The activated toolbar or section item; check item.id. Always a non-null object.
values	Record<string, any>	Current edited values.
changes	string[]	Current changed field keys.

Item ids are application-defined, so a custom toolbar item's id is whatever you set. A handful of ids are emitted by the editor itself.

Predefined item ids

item.id	Emitted by	Notes
"save"	Default primary Save button.	Runs the save flow (validation + onSave) before onAction fires. See onSave.
"cancel"	Default Cancel button.	No built-in behavior - handle the dismissal in your code.
"close"	Default close icon; sidebar dismissal (close icon or click-outside).	No built-in behavior - handle the dismissal in your code.
"toggle-section"	A collapsible section header.	Carries an extra item.key: the section key being expanded, or null when a section is being collapsed. The editor toggles the section internally; the event is forwarded so you can react.

Any other id you see is one you defined on a custom toolbar or section item.

Example

import { useState } from "react";
import { Editor } from "@svar-ui/react-editor";

function Demo() {
  const [open, setOpen] = useState(true);

  const items = [{ comp: "text", key: "name", label: "Name" }];
  const values = { id: 1, name: "John Doe" };

  function handleAction({ item }) {
    if (item.id === "close" || item.id === "cancel") setOpen(false);
    if (item.id === "delete") remove(values.id);
  }

  return <Editor items={items} values={values} onAction={handleAction} />;
}

export default Demo;

Related articles

• Toolbar