mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-04-02 00:49:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make Toolbar icons use filled versions if active

Browse source
This commit is contained in:
Verbiturum 2024-12-14 07:00:31 +02:00
parent 00d5553bcb
commit 17bcd089d2
1 changed files with 11 additions and 5 deletions

16
src/app/components/editor/Toolbar.tsx
View file

@ -58,6 +58,7 @@ type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
export function MarkButton({ format, icon, tooltip }: MarkButtonProps) { export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
const editor = useSlate(); const editor = useSlate();
const disableInline = isBlockActive(editor, BlockType.CodeBlock); const disableInline = isBlockActive(editor, BlockType.CodeBlock);
const isActive = isMarkActive(editor, format);
if (disableInline) { if (disableInline) {
removeAllMark(editor); removeAllMark(editor);
@ -75,12 +76,12 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
ref={triggerRef} ref={triggerRef}
variant="SurfaceVariant" variant="SurfaceVariant"
onClick={handleClick} onClick={handleClick}
aria-pressed={isMarkActive(editor, format)} aria-pressed={isActive}
size="400" size="400"
radii="300" radii="300"
disabled={disableInline} disabled={disableInline}
> >
<Icon size="200" src={icon} /> <Icon size="200" src={icon} filled={isActive} />
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
@ -94,6 +95,7 @@ type BlockButtonProps = {
}; };
export function BlockButton({ format, icon, tooltip }: BlockButtonProps) { export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
const editor = useSlate(); const editor = useSlate();
const isActive = isBlockActive(editor, format);
const handleClick = () => { const handleClick = () => {
toggleBlock(editor, format, { level: 1 }); toggleBlock(editor, format, { level: 1 });
@ -107,11 +109,11 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
ref={triggerRef} ref={triggerRef}
variant="SurfaceVariant" variant="SurfaceVariant"
onClick={handleClick} onClick={handleClick}
aria-pressed={isBlockActive(editor, format)} aria-pressed={isActive}
size="400" size="400"
radii="300" radii="300"
> >
<Icon size="200" src={icon} /> <Icon size="200" src={icon} filled={isActive} />
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
@ -215,7 +217,11 @@ export function HeadingBlockButton() {
size="400" size="400"
radii="300" radii="300"
> >
<Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} /> <Icon
size="200"
src={level ? Icons[`Heading${level}`] : Icons.Heading1}
filled={isActive}
/>
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} /> <Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton> </IconButton>
</PopOut> </PopOut>