leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2
3import React, { useEffect, useState } from "react";
4import { InlineLinkToolbar } from "./InlineLinkToolbar";
5import { useEditorStates } from "src/state/useEditorState";
6import { useUIState } from "src/useUIState";
7import * as Tooltip from "@radix-ui/react-tooltip";
8import { addShortcut } from "src/shortcuts";
9import { FootnoteTextToolbar } from "./FootnoteTextToolbar";
10import { useIsMobile } from "src/hooks/isMobile";
11import { CloseTiny } from "components/Icons/CloseTiny";
12
13type FootnoteToolbarState = "default" | "link";
14
15export const FootnoteToolbar = (props: { pageID: string }) => {
16 let [toolbarState, setToolbarState] = useState<FootnoteToolbarState>("default");
17 let focusedEntity = useUIState((s) => s.focusedEntity);
18 let activeEditor = useEditorStates((s) =>
19 focusedEntity ? s.editorStates[focusedEntity.entityID] : null,
20 );
21
22 useEffect(() => {
23 if (toolbarState !== "default") return;
24 let removeShortcut = addShortcut({
25 metaKey: true,
26 key: "k",
27 handler: () => {
28 setToolbarState("link");
29 },
30 });
31 return () => {
32 removeShortcut();
33 };
34 }, [toolbarState]);
35
36 let isMobile = useIsMobile();
37 return (
38 <Tooltip.Provider>
39 <div
40 className={`toolbar flex gap-2 items-center justify-between w-full
41 ${isMobile ? "h-[calc(15px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
42 >
43 <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
44 {toolbarState === "default" ? (
45 <FootnoteTextToolbar setToolbarState={setToolbarState} />
46 ) : toolbarState === "link" ? (
47 <InlineLinkToolbar
48 onClose={() => {
49 activeEditor?.view?.focus();
50 setToolbarState("default");
51 }}
52 />
53 ) : null}
54 </div>
55 <button
56 className="toolbarBackToDefault hover:text-accent-contrast"
57 onMouseDown={(e) => {
58 e.preventDefault();
59 if (toolbarState === "default") {
60 useUIState.setState(() => ({
61 focusedEntity: {
62 entityType: "page",
63 entityID: props.pageID,
64 },
65 selectedBlocks: [],
66 }));
67 } else {
68 setToolbarState("default");
69 }
70 }}
71 >
72 <CloseTiny />
73 </button>
74 </div>
75 </Tooltip.Provider>
76 );
77};