leaflet.pub
a tool for shared writing and social publishing
awarm.space
1import { Separator, ShortcutKey } from "components/Layout";
2import { metaKey } from "src/utils/metaKey";
3import { LinkButton } from "./InlineLinkToolbar";
4import { TextDecorationButton } from "./TextDecorationButton";
5import { schema } from "components/Blocks/TextBlock/schema";
6import { BoldSmall, ItalicSmall, StrikethroughSmall } from "./TextToolbar";
7import { isMac } from "src/utils/isDevice";
8export const FootnoteTextToolbar = (props: {
9 setToolbarState: (s: "default" | "link") => void;
10}) => {
11 return (
12 <>
13 <TextDecorationButton
14 tooltipContent={
15 <div className="flex flex-col gap-1 justify-center">
16 <div className="text-center">Bold </div>
17 <div className="flex gap-1">
18 <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
19 <ShortcutKey> B </ShortcutKey>
20 </div>
21 </div>
22 }
23 mark={schema.marks.strong}
24 icon={<BoldSmall />}
25 />
26
27 <TextDecorationButton
28 tooltipContent={
29 <div className="flex flex-col gap-1 justify-center">
30 <div className="italic font-normal text-center">Italic</div>
31 <div className="flex gap-1">
32 <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
33 <ShortcutKey> I </ShortcutKey>
34 </div>
35 </div>
36 }
37 mark={schema.marks.em}
38 icon={<ItalicSmall />}
39 />
40 <TextDecorationButton
41 tooltipContent={
42 <div className="flex flex-col gap-1 justify-center">
43 <div className="text-center font-normal line-through">
44 Strikethrough
45 </div>
46 <div className="flex gap-1">
47 {isMac() ? (
48 <>
49 <ShortcutKey>⌘</ShortcutKey> +{" "}
50 <ShortcutKey> Ctrl </ShortcutKey> +{" "}
51 <ShortcutKey> X </ShortcutKey>
52 </>
53 ) : (
54 <>
55 <ShortcutKey> Ctrl </ShortcutKey> +{" "}
56 <ShortcutKey> Meta </ShortcutKey> +{" "}
57 <ShortcutKey> X </ShortcutKey>
58 </>
59 )}
60 </div>
61 </div>
62 }
63 mark={schema.marks.strikethrough}
64 icon={<StrikethroughSmall />}
65 />
66 <Separator classname="h-6!" />
67 <LinkButton setToolbarState={props.setToolbarState} />
68 </>
69 );
70};