107 lines
3.3 KiB
TypeScript
Executable File
107 lines
3.3 KiB
TypeScript
Executable File
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import {Button} from '../../ui/buttons/button';
|
|
import {KeyboardArrowDownIcon} from '../../icons/material/KeyboardArrowDown';
|
|
import {Keyboard} from '../../ui/keyboard/keyboard';
|
|
import {MenubarButtonProps} from './menubar-button-props';
|
|
import {
|
|
Menu,
|
|
MenuItem,
|
|
MenuTrigger,
|
|
} from '../../ui/navigation/menu/menu-trigger';
|
|
import {Trans} from '../../i18n/trans';
|
|
|
|
type Level = 1 | 2 | 3 | 4;
|
|
|
|
export function FormatMenuTrigger({editor, size}: MenubarButtonProps) {
|
|
return (
|
|
<MenuTrigger
|
|
floatingMinWidth="w-256"
|
|
onItemSelected={key => {
|
|
editor.commands.focus();
|
|
if (typeof key === 'string' && key.startsWith('h')) {
|
|
editor.commands.toggleHeading({
|
|
level: parseInt(key.replace('h', '')) as Level,
|
|
});
|
|
} else if (key === 'code') {
|
|
editor.commands.toggleCode();
|
|
} else if (key === 'strike') {
|
|
editor.commands.toggleStrike();
|
|
} else if (key === 'super') {
|
|
editor.commands.toggleSuperscript();
|
|
} else if (key === 'sub') {
|
|
editor.commands.toggleSubscript();
|
|
} else if (key === 'blockquote') {
|
|
editor.commands.toggleBlockquote();
|
|
} else if (key === 'paragraph') {
|
|
editor.commands.setParagraph();
|
|
}
|
|
}}
|
|
>
|
|
<Button
|
|
className={clsx('flex-shrink-0')}
|
|
variant="text"
|
|
size={size}
|
|
endIcon={<KeyboardArrowDownIcon />}
|
|
>
|
|
<Trans message="Format" />
|
|
</Button>
|
|
<Menu>
|
|
<MenuItem value="h1" endSection={<Keyboard modifier>Alt+1</Keyboard>}>
|
|
<Trans message="Heading :number" values={{number: 1}} />
|
|
</MenuItem>
|
|
<MenuItem value="h2" endSection={<Keyboard modifier>Alt+2</Keyboard>}>
|
|
<Trans message="Heading :number" values={{number: 2}} />
|
|
</MenuItem>
|
|
<MenuItem value="h3" endSection={<Keyboard modifier>Alt+3</Keyboard>}>
|
|
<Trans message="Heading :number" values={{number: 3}} />
|
|
</MenuItem>
|
|
<MenuItem value="h4" endSection={<Keyboard modifier>Alt+4</Keyboard>}>
|
|
<Trans message="Heading :number" values={{number: 4}} />
|
|
</MenuItem>
|
|
<MenuItem value="code" endSection={<Keyboard modifier>E</Keyboard>}>
|
|
<Trans message="Code" />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value="strike"
|
|
endSection={<Keyboard modifier>Shift+X</Keyboard>}
|
|
>
|
|
<Trans message="Strikethrough" />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value="super"
|
|
endSection={
|
|
<Keyboard modifier separator=" ">
|
|
.
|
|
</Keyboard>
|
|
}
|
|
>
|
|
<Trans message="Superscript" />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value="sub"
|
|
endSection={
|
|
<Keyboard modifier separator=" ">
|
|
,
|
|
</Keyboard>
|
|
}
|
|
>
|
|
<Trans message="Subscript" />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value="blockquote"
|
|
endSection={<Keyboard modifier>Shift+B</Keyboard>}
|
|
>
|
|
<Trans message="Blockquote" />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value="paragraph"
|
|
endSection={<Keyboard modifier>Alt+0</Keyboard>}
|
|
>
|
|
<Trans message="Paragraph" />
|
|
</MenuItem>
|
|
</Menu>
|
|
</MenuTrigger>
|
|
);
|
|
}
|