2023-03-06 17:19:06 +00:00
|
|
|
// buttons
|
|
|
|
import {
|
|
|
|
ToggleBoldButton,
|
|
|
|
ToggleItalicButton,
|
|
|
|
ToggleUnderlineButton,
|
|
|
|
ToggleStrikeButton,
|
|
|
|
ToggleOrderedListButton,
|
|
|
|
ToggleBulletListButton,
|
|
|
|
ToggleCodeButton,
|
2023-03-07 10:39:37 +00:00
|
|
|
ToggleHeadingButton,
|
2023-03-06 17:19:06 +00:00
|
|
|
} from "@remirror/react";
|
|
|
|
|
|
|
|
export const CustomFloatingToolbar: React.FC = () => (
|
|
|
|
<div className="z-[99999] flex items-center gap-y-2 divide-x rounded border bg-white p-1 px-0.5 shadow-md">
|
|
|
|
<div className="flex items-center gap-x-1 px-2">
|
2023-03-07 10:39:37 +00:00
|
|
|
<ToggleHeadingButton
|
|
|
|
attrs={{
|
|
|
|
level: 1,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<ToggleHeadingButton
|
|
|
|
attrs={{
|
|
|
|
level: 2,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<ToggleHeadingButton
|
|
|
|
attrs={{
|
|
|
|
level: 3,
|
|
|
|
}}
|
|
|
|
/>
|
2023-03-06 17:19:06 +00:00
|
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-1 px-2">
|
|
|
|
<ToggleBoldButton />
|
|
|
|
<ToggleItalicButton />
|
|
|
|
<ToggleUnderlineButton />
|
|
|
|
<ToggleStrikeButton />
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-1 px-2">
|
|
|
|
<ToggleOrderedListButton />
|
|
|
|
<ToggleBulletListButton />
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-1 px-2">
|
|
|
|
<ToggleCodeButton />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|