53 lines
1.7 KiB
TypeScript
Executable File
53 lines
1.7 KiB
TypeScript
Executable File
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import {IconButton} from '../../ui/buttons/icon-button';
|
|
import {FormatBoldIcon} from '../../icons/material/FormatBold';
|
|
import {FormatItalicIcon} from '../../icons/material/FormatItalic';
|
|
import {FormatUnderlinedIcon} from '../../icons/material/FormatUnderlined';
|
|
import {MenubarButtonProps} from './menubar-button-props';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {Trans} from '@common/i18n/trans';
|
|
|
|
export function FontStyleButtons({editor, size}: MenubarButtonProps) {
|
|
return (
|
|
<span className={clsx('flex-shrink-0 whitespace-nowrap')}>
|
|
<Tooltip label={<Trans message="Bold" />}>
|
|
<IconButton
|
|
size={size}
|
|
color={editor.isActive('bold') ? 'primary' : null}
|
|
onClick={() => {
|
|
editor.commands.focus();
|
|
editor.commands.toggleBold();
|
|
}}
|
|
>
|
|
<FormatBoldIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip label={<Trans message="Italic" />}>
|
|
<IconButton
|
|
size={size}
|
|
color={editor.isActive('italic') ? 'primary' : null}
|
|
onClick={() => {
|
|
editor.commands.focus();
|
|
editor.commands.toggleItalic();
|
|
}}
|
|
>
|
|
<FormatItalicIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip label={<Trans message="Underline" />}>
|
|
<IconButton
|
|
size={size}
|
|
color={editor.isActive('underline') ? 'primary' : null}
|
|
onClick={() => {
|
|
editor.commands.focus();
|
|
editor.commands.toggleUnderline();
|
|
}}
|
|
>
|
|
<FormatUnderlinedIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</span>
|
|
);
|
|
}
|