Mark Toolbar Button

PreviousNext

A toolbar control for basic text formatting.

Preview

Loading preview…
registry/ui/mark-toolbar-button.tsx
'use client';

import * as React from 'react';

import { useMarkToolbarButton, useMarkToolbarButtonState } from 'platejs/react';

import { ToolbarButton } from './toolbar';

export function MarkToolbarButton({
  clear,
  nodeType,
  ...props
}: React.ComponentProps<typeof ToolbarButton> & {
  nodeType: string;
  clear?: string[] | string;
}) {
  const state = useMarkToolbarButtonState({ clear, nodeType });
  const { props: buttonProps } = useMarkToolbarButton(state);

  return <ToolbarButton {...props} {...buttonProps} />;
}

Installation

npx shadcn@latest add @plate/mark-toolbar-button

Usage

import { MarkToolbarButton } from "@/components/ui/mark-toolbar-button"
<MarkToolbarButton />