Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.7 kB · 48 lines
TypeScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import { useEntity } from "src/replicache";import { localImages } from "src/utils/addImage";
export type GalleryFormat = "grid" | "carousel" | "strip";export const DEFAULT_GAP = 8;export const DEFAULT_FORMAT: GalleryFormat = "grid";export const DEFAULT_MAX_WIDTH = 300;
// A resolved image, independent of where it came from (replicache facts in the// editor, lexicon blobs in a published post). The presentational layout// components only ever see this shape.export type GalleryImage = { src: string; // Untransformed source for the lightbox, when `src` is a downscaled display // variant. fullSrc?: string; // Canonical storage URL from the fact (editor only) — the key upload status // is tracked under, even while `src` is the local object URL. factSrc?: string; alt: string; width: number; height: number;};
// Per-layout class names handed to each format's rendered item, so the editor// and published renderers style identical markup without duplicating strings.export type GalleryItemClasses = { className?: string; buttonClassName?: string; imgClassName?: string; useAspectRatio?: boolean;};
// Resolves the best available source for a gallery child image entity. Prefers// the in-memory object URL while an upload is in flight, like ImageBlock.export function useGalleryImage(entityID: string) { let image = useEntity(entityID, "block/image"); let alt = useEntity(entityID, "image/alt")?.data.value; if (!image) return null; let localSrc = localImages.get(image.data.src); return { src: localSrc ?? image.data.src, factSrc: image.data.src, alt: alt || "", width: image.data.width, height: image.data.height, };}