Equation Toolbar Button

PreviousNext

A toolbar button for inserting and editing equations.

Preview

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

import * as React from 'react';

import { insertInlineEquation } from '@platejs/math';
import { RadicalIcon } from 'lucide-react';
import { useEditorRef } from 'platejs/react';

import { ToolbarButton } from './toolbar';

export function InlineEquationToolbarButton(
  props: React.ComponentProps<typeof ToolbarButton>
) {
  const editor = useEditorRef();

  return (
    <ToolbarButton
      {...props}
      onClick={() => {
        insertInlineEquation(editor);
      }}
      tooltip="Mark as equation"
    >
      <RadicalIcon />
    </ToolbarButton>
  );
}

Installation

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

Usage

import { EquationToolbarButton } from "@/components/ui/equation-toolbar-button"
<EquationToolbarButton />