"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,
ImageCoverImageRemove,
} from "components/Icons/ImageCoverImage";
import { Separator } from "components/Layout";
import { TextAlignmentButton } from "./TextAlignmentToolbar";
export const ImageToolbar = (props: {
setToolbarState: (state: "image" | "text-alignment") => void;
}) => {
let focusedEntity = useUIState((s) => s.focusedEntity);
let focusedEntityType = useEntity(
focusedEntity?.entityType === "page"
? focusedEntity.entityID
: focusedEntity?.parent || null,
"page/type",
);
return (
{focusedEntityType?.data.value !== "canvas" && (
)}
);
};
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: {}) => {
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 === undefined) {
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" : "Use as Cover Image"}
}
>
{isCoverImage ? : }
);
};
const ImageFullBleedOffSmall = (props: Props) => {
return (
);
};
const ImageFullBleedOnSmall = (props: Props) => {
return (
);
};