Editing

EditBanner

The editing bar: top-center of the canvas while editing — what you can add, Undo/Redo, and Done.

• VisualMap renders it for you when editing is on. Standalone: provide add (creatable constructs: Idea, Group, and future ones), canUndo/canRedo + handlers, onDone.
• During a "choose…" step (pick: "Choose the idea to connect Encoding to") the tools give way to the instruction, Done (onFinishPick, when the step needs confirming) and Cancel. One pattern for every multi-step edit, on mouse, touch and keyboard.
• nudge is the view-mode invitation shown once after someone moves an idea: "Layout saved. Want to edit the content too? Edit".
• A pill on surface with shadow-pop; the Editing state dot uses focus. Never more than one primary (Done).

Props

export interface EditBannerProps {
  add?: { id: string;
  label: string;
  icon: IconName;
  onSelect: () => void }[];
  canUndo?: boolean;
  canRedo?: boolean;
  onUndo?: () => void;
  onRedo?: () => void;
  onDone?: () => void;

Use

import { EditBanner } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/EditBanner/README.md