float toolbars

This commit is contained in:
Nate Kelley 2025-09-09 20:51:47 -06:00 committed by Wells Bunker
parent 635687c67d
commit 3fc6066b1d
No known key found for this signature in database
GPG Key ID: DB16D6F2679B78FC
2 changed files with 21 additions and 36 deletions

View File

@ -64,7 +64,7 @@ export function FloatingToolbar({
{...rootProps}
ref={ref}
className={cn(
'scrollbar-hide bg-popover absolute z-50 overflow-x-auto rounded-md border p-2 whitespace-nowrap opacity-100 shadow print:hidden',
'scrollbar-hide bg-popover absolute z-50 overflow-x-auto rounded border p-2 whitespace-nowrap opacity-100 shadow print:hidden',
'max-w-[80vw]',
className
)}

View File

@ -1,17 +1,11 @@
import { KEYS } from 'platejs';
import { useEditorReadOnly } from 'platejs/react';
import * as React from 'react';
import { ToolbarGroup } from '@/components/ui/toolbar/Toolbar';
import { NodeTypeIcons } from '../config/icons';
import { createLabel } from '../config/labels';
import { AIToolbarButton } from './AIToolbarButton';
import { CommentToolbarButton } from './CommandToolbarButton';
// import { InlineEquationToolbarButton } from './EquationToolbarButton';
import { LinkToolbarButton } from './LinkToolbarButton';
import { MarkToolbarButton } from './MarktoolbarButton';
import { MoreToolbarButton } from './MoreToolbarButton';
// import { MoreToolbarButton } from './MoreToolbarButton';
import { SuggestionToolbarButton } from './SuggestionToolbarButton';
import { TurnIntoToolbarButton } from './TurnIntoToolbarButton';
export function FloatingToolbarButtons() {
@ -20,42 +14,33 @@ export function FloatingToolbarButtons() {
return (
<>
{!readOnly && (
<>
{/* <ToolbarGroup>
<AIToolbarButton tooltip="AI commands">
{AIIcon}
Ask AI
</AIToolbarButton>
</ToolbarGroup> */}
<ToolbarGroup>
<TurnIntoToolbarButton />
<ToolbarGroup>
<TurnIntoToolbarButton />
<MarkToolbarButton nodeType={KEYS.bold} tooltip={createLabel('bold')}>
<NodeTypeIcons.bold />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.bold} tooltip={createLabel('bold')}>
<NodeTypeIcons.bold />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.italic} tooltip={createLabel('italic')}>
<NodeTypeIcons.italic />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.italic} tooltip={createLabel('italic')}>
<NodeTypeIcons.italic />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.underline} tooltip={createLabel('underline')}>
<NodeTypeIcons.underline />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.underline} tooltip={createLabel('underline')}>
<NodeTypeIcons.underline />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.strikethrough} tooltip={createLabel('strikethrough')}>
<NodeTypeIcons.strikethrough />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.strikethrough} tooltip={createLabel('strikethrough')}>
<NodeTypeIcons.strikethrough />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.code} tooltip={createLabel('code')}>
<NodeTypeIcons.code />
</MarkToolbarButton>
<MarkToolbarButton nodeType={KEYS.code} tooltip={createLabel('code')}>
<NodeTypeIcons.code />
</MarkToolbarButton>
{/* <InlineEquationToolbarButton /> */}
{/* <InlineEquationToolbarButton /> */}
<LinkToolbarButton />
</ToolbarGroup>
</>
<LinkToolbarButton />
</ToolbarGroup>
)}
<ToolbarGroup>