Editor Toolbar

Floating formatting toolbar with grouped, dividered actions.

Free · Editor

This Pro block's preview & source unlock with the library.

Install

terminal

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/editor-toolbar

Source

Dependencies: lucide-react

components/docblocks/editor-toolbar.tsx

"use client";
import { Bold, Italic, Underline, Strikethrough, Link2, List, ListOrdered } from "lucide-react";

const groups = [[Bold, Italic, Underline, Strikethrough], [Link2], [List, ListOrdered]];

export function EditorToolbar({ onCommand }: { onCommand?: (cmd: string) => void }) {
  return (
    <div className="inline-flex items-center gap-1 rounded-xl border border-border bg-surface p-1 shadow-sm">
      {groups.map((group, gi) => (
        <div key={gi} className="flex items-center gap-0.5">
          {gi > 0 && <span className="mx-1 h-5 w-px bg-border" />}
          {group.map((Icon, i) => (
            <button key={i} onClick={() => onCommand?.(Icon.displayName ?? "")}
              className="flex h-8 w-8 items-center justify-center rounded-lg text-muted hover:bg-surface-2 hover:text-foreground">
              <Icon className="h-4 w-4" />
            </button>
          ))}
        </div>
      ))}
    </div>
  );
}