"use client";
import { ToolbarButton } from ".";
import { useEntity, useReplicache } from "src/replicache";
import { useUIState } from "src/useUIState";
import { Props } from "components/Icons/Props";
import { ImageAltSmall, ImageRemoveAltSmall } from "components/Icons/ImageAlt";
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
import { useSubscribe } from "src/replicache/useSubscribe";
import { ImageCoverImage } from "components/Icons/ImageCoverImage";
export const ImageFullBleedButton = (props: {}) => {
let { rep } = useReplicache();
let focusedBlock = useUIState((s) => s.focusedEntity)?.entityID || null;
let isFullBleed = useEntity(focusedBlock, "image/full-bleed")?.data.value;
let hasSrc = useEntity(focusedBlock, "block/image")?.data;
if (!hasSrc) return null;
return (
{
e.preventDefault();
if (rep && focusedBlock) {
await rep.mutate.assertFact({
entity: focusedBlock,
attribute: "image/full-bleed",
data: { type: "boolean", value: !isFullBleed },
});
}
}}
tooltipContent={Toggle Full Bleed
}
>
{isFullBleed ? : }
);
};
export const ImageAltTextButton = (props: {
setToolbarState: (s: "img-alt-text") => void;
}) => {
let { rep } = useReplicache();
let focusedBlock = useUIState((s) => s.focusedEntity)?.entityID || null;
let altText = useEntity(focusedBlock, "image/alt")?.data.value;
let setAltEditorOpen = useUIState((s) => s.setOpenPopover);
let altEditorOpen = useUIState((s) => s.openPopover === focusedBlock);
let hasSrc = useEntity(focusedBlock, "block/image")?.data;
if (!hasSrc) return null;
return (
{
e.preventDefault();
if (!focusedBlock) return;
if (!altText) {
await rep?.mutate.assertFact({
entity: focusedBlock,
attribute: "image/alt",
data: { type: "string", value: "" },
});
setAltEditorOpen(focusedBlock);
} else {
await rep?.mutate.retractAttribute({
entity: focusedBlock,
attribute: "image/alt",
});
setAltEditorOpen(null);
}
}}
tooltipContent={
{altText === undefined ? "Add " : "Remove "}Alt Text
}
>
{altText === undefined ? (
) : (
)}
);
};
export const ImageCoverButton = () => {
let { rep } = useReplicache();
let focusedBlock = useUIState((s) => s.focusedEntity)?.entityID || null;
let hasSrc = useEntity(focusedBlock, "block/image")?.data;
let { data: pubData } = useLeafletPublicationData();
let coverImage = useSubscribe(rep, (tx) =>
tx.get("publication_cover_image"),
);
// Only show if in a publication and has an image
if (!pubData?.publications || !hasSrc) return null;
let isCoverImage = coverImage === focusedBlock;
return (
{
e.preventDefault();
if (rep && focusedBlock) {
await rep.mutate.updatePublicationDraft({
cover_image: isCoverImage ? null : focusedBlock,
});
}
}}
tooltipContent={
{isCoverImage ? "Remove Cover Image" : "Set as Cover Image"}
}
>
);
};
const ImageFullBleedOffSmall = (props: Props) => {
return (
);
};
const ImageFullBleedOnSmall = (props: Props) => {
return (
);
};