leaflet.pub
a tool for shared writing and social publishing
don't show the toolbar on blocks without toolbar actions
cozylittle.house
+66
-71
-1
app/lish/[did]/[publication]/icon/route.ts
-1
app/lish/[did]/[publication]/icon/route.ts
-39
components/Toolbar/BlockToolbar.tsx
-39
components/Toolbar/BlockToolbar.tsx
···
1
-
import { useEntity } from "src/replicache";
2
-
import { Separator } from "components/Layout";
3
-
import { useUIState } from "src/useUIState";
4
-
import { TextAlignmentButton } from "./TextAlignmentToolbar";
5
-
import {
6
-
ImageFullBleedButton,
7
-
ImageAltTextButton,
8
-
ImageCoverButton,
9
-
} from "./ImageToolbar";
10
-
11
-
export const ImageToolbar = (props: {
12
-
setToolbarState: (state: "image" | "text-alignment") => void;
13
-
}) => {
14
-
let focusedEntity = useUIState((s) => s.focusedEntity);
15
-
let focusedEntityType = useEntity(
16
-
focusedEntity?.entityType === "page"
17
-
? focusedEntity.entityID
18
-
: focusedEntity?.parent || null,
19
-
"page/type",
20
-
);
21
-
let blockType = useEntity(
22
-
focusedEntity?.entityType === "block" ? focusedEntity?.entityID : null,
23
-
"block/type",
24
-
)?.data.value;
25
-
26
-
return (
27
-
<div className="flex items-center gap-2 justify-between w-full">
28
-
<div className="flex items-center gap-2">
29
-
<TextAlignmentButton setToolbarState={props.setToolbarState} />
30
-
<ImageFullBleedButton />
31
-
<ImageAltTextButton />
32
-
<ImageCoverButton />
33
-
{focusedEntityType?.data.value !== "canvas" && (
34
-
<Separator classname="h-6!" />
35
-
)}
36
-
</div>
37
-
</div>
38
-
);
39
-
};
+28
-1
components/Toolbar/ImageToolbar.tsx
+28
-1
components/Toolbar/ImageToolbar.tsx
···
7
7
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
8
8
import { useSubscribe } from "src/replicache/useSubscribe";
9
9
import { ImageCoverImage } from "components/Icons/ImageCoverImage";
10
+
import { Separator } from "components/Layout";
11
+
import { TextAlignmentButton } from "./TextAlignmentToolbar";
12
+
13
+
export const ImageToolbar = (props: {
14
+
setToolbarState: (state: "image" | "text-alignment") => void;
15
+
}) => {
16
+
let focusedEntity = useUIState((s) => s.focusedEntity);
17
+
let focusedEntityType = useEntity(
18
+
focusedEntity?.entityType === "page"
19
+
? focusedEntity.entityID
20
+
: focusedEntity?.parent || null,
21
+
"page/type",
22
+
);
23
+
24
+
return (
25
+
<div className="flex items-center gap-2 justify-between w-full">
26
+
<div className="flex items-center gap-2">
27
+
<TextAlignmentButton setToolbarState={props.setToolbarState} />
28
+
<ImageAltTextButton />
29
+
<ImageFullBleedButton />
30
+
<ImageCoverButton />
31
+
{focusedEntityType?.data.value !== "canvas" && (
32
+
<Separator classname="h-6!" />
33
+
)}
34
+
</div>
35
+
</div>
36
+
);
37
+
};
10
38
11
39
export const ImageFullBleedButton = (props: {}) => {
12
40
let { rep } = useReplicache();
···
46
74
let altEditorOpen = useUIState((s) => s.openPopover === focusedBlock);
47
75
let hasSrc = useEntity(focusedBlock, "block/image")?.data;
48
76
if (!hasSrc) return null;
49
-
console.log("alt: " + altText);
50
77
return (
51
78
<ToolbarButton
52
79
active={altText !== undefined}
+14
-29
components/Toolbar/index.tsx
+14
-29
components/Toolbar/index.tsx
···
11
11
import { ListToolbar } from "./ListToolbar";
12
12
import { HighlightToolbar } from "./HighlightToolbar";
13
13
import { TextToolbar } from "./TextToolbar";
14
-
import { ImageToolbar } from "./BlockToolbar";
14
+
import { ImageToolbar } from "./ImageToolbar";
15
15
import { MultiselectToolbar } from "./MultiSelectToolbar";
16
-
import { AreYouSure } from "components/Blocks/DeleteBlock";
17
-
import { deleteBlock } from "src/utils/deleteBlock";
18
16
import { TooltipButton } from "components/Buttons";
19
17
import { TextAlignmentToolbar } from "./TextAlignmentToolbar";
20
18
import { useIsMobile } from "src/hooks/isMobile";
···
32
30
| "img-alt-text"
33
31
| "image";
34
32
35
-
export const Toolbar = (props: { pageID: string; blockID: string }) => {
36
-
let { rep } = useReplicache();
37
-
33
+
export const Toolbar = (props: {
34
+
pageID: string;
35
+
blockID: string;
36
+
blockType: string | null | undefined;
37
+
}) => {
38
38
let [toolbarState, setToolbarState] = useState<ToolbarTypes>("default");
39
39
40
-
let focusedEntity = useUIState((s) => s.focusedEntity);
41
-
let selectedBlocks = useUIState((s) => s.selectedBlocks);
42
40
let activeEditor = useEditorStates((s) => s.editorStates[props.blockID]);
43
-
44
-
let blockType = useEntity(props.blockID, "block/type")?.data.value;
45
41
46
42
let lastUsedHighlight = useUIState((s) => s.lastUsedHighlight);
47
43
let setLastUsedHighlight = (color: "1" | "2" | "3") =>
···
64
60
}, [toolbarState]);
65
61
66
62
let isTextBlock =
67
-
blockType === "heading" ||
68
-
blockType === "text" ||
69
-
blockType === "blockquote";
63
+
props.blockType === "heading" ||
64
+
props.blockType === "text" ||
65
+
props.blockType === "blockquote";
70
66
71
67
useEffect(() => {
72
68
if (isTextBlock) {
73
69
setToolbarState("default");
74
70
}
75
-
if (blockType === "image") {
71
+
if (props.blockType === "image") {
76
72
setToolbarState("image");
77
73
}
78
-
if (blockType === "button" || blockType === "datetime") {
74
+
if (props.blockType === "button" || props.blockType === "datetime") {
79
75
setToolbarState("text-alignment");
80
-
} else return;
81
-
}, [blockType]);
76
+
} else null;
77
+
}, [props.blockType]);
82
78
83
-
useEffect(() => {
84
-
if (
85
-
selectedBlocks.length > 1 &&
86
-
!["areYousure", "text-alignment"].includes(toolbarState)
87
-
) {
88
-
setToolbarState("multiselect");
89
-
} else if (toolbarState === "multiselect") {
90
-
setToolbarState("default");
91
-
}
92
-
}, [selectedBlocks.length, toolbarState]);
93
79
let isMobile = useIsMobile();
94
-
95
80
return (
96
81
<Tooltip.Provider>
97
82
<div
···
154
139
selectedBlocks: [],
155
140
}));
156
141
} else {
157
-
if (blockType === "image") {
142
+
if (props.blockType === "image") {
158
143
setToolbarState("image");
159
144
}
160
145
if (isTextBlock) {