Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.5 kB · 44 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445import { 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; 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, alt: alt || "", width: image.data.width, height: image.data.height, };}