import { useUIState } from "src/useUIState";
import { ToolbarButton } from ".";
import { useCallback } from "react";
import { Fact, useEntity, useReplicache } from "src/replicache";
import { Props } from "components/Icons/Props";
export function TextAlignmentToolbar() {
let focusedBlock = useUIState((s) => s.focusedEntity);
let { rep } = useReplicache();
let alignment = useEntity(
focusedBlock?.entityID || null,
"block/text-alignment",
)?.data.value;
let setAlignment = useCallback(
(alignment: Fact<"block/text-alignment">["data"]["value"]) => {
let blocks = useUIState.getState().selectedBlocks;
if (focusedBlock?.entityType === "page" || !focusedBlock) return null;
rep?.mutate.assertFact(
blocks.map((b) => ({
entity: b.value,
attribute: "block/text-alignment",
data: { type: "text-alignment-type-union", value: alignment },
})),
);
},
[focusedBlock, rep],
);
return (
<>
setAlignment("left")}
tooltipContent="Align Left"
active={alignment === "left"}
>
setAlignment("center")}
tooltipContent="Align Center"
active={alignment === "center"}
>
setAlignment("right")}
tooltipContent="Align Right"
active={alignment === "right"}
>
setAlignment("justify")}
tooltipContent="Align Justified"
active={alignment === "justify"}
>
);
}
export function TextAlignmentButton(props: {
setToolbarState: (s: "text-alignment") => void;
className?: string;
}) {
let focusedBlock = useUIState((s) => s.focusedEntity);
let alignment =
useEntity(focusedBlock?.entityID || null, "block/text-alignment")?.data
.value || "left";
return (
Align}
className={`${props.className}`}
onClick={() => {
props.setToolbarState("text-alignment");
}}
>
{alignment === "left" ? (
) : alignment === "center" ? (
) : alignment === "justify" ? (
) : (
)}
);
}
export const AlignLeftSmall = (props: Props) => {
return (
);
};
export const AlignCenterSmall = (props: Props) => {
return (
);
};
export const AlignRightSmall = (props: Props) => {
return (
);
};
export const AlignJustifiedSmall = (props: Props) => {
return (
);
};