jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-31 06:21:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(desktop): extract ImageMosaic from markdown.tsx

Browse Source 
Keeps the oversized markdown.tsx inside the file-size ratchet after the
blockCode option added a few lines.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
This commit is contained in:
Thomas Petersen
2026-08-19 13:36:01 -04:00
parent ffbd4b4663
commit bb04ce70be
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
desktop/src/shared/ui/markdown.tsx
View File

@@ -48,6 +48,7 @@ import {
isImageOnlyParagraph,
markdownPropsAreEqual,
} from "./markdownUtils";
import { ImageMosaic } from "./markdown/ImageMosaic";
import {
CODE_BLOCK_CLASS,
extractLanguage,
@@ -1232,30 +1233,6 @@ function ImageBlock({ alt, dim, resolvedSrc, src, thumbSrc }: ImageBlockProps) {
);
}
function ImageMosaic({ children }: { children: React.ReactNode[] }) {
const mosaicRef = React.useRef<HTMLDivElement | null>(null);
const isTriptych = children.length === 3;
const hasOddTail = children.length > 3 && children.length % 2 === 1;
useSmoothCorners(mosaicRef);
return (
<div
className={cn(
"mt-1 grid w-full min-w-0 max-w-lg grid-cols-2 gap-1.5 overflow-hidden rounded-2xl [&_br]:hidden [&_[data-block-media]]:min-h-0 [&_[data-block-media]]:max-w-none [&_[data-block-media]]:overflow-hidden [&_[data-block-media]>button]:m-0 [&_[data-block-media]>button]:h-full [&_[data-block-media]>button]:w-full [&_[data-block-media]>button]:max-w-none [&_[data-block-media]>button]:rounded-none [&_[data-block-media]_[data-progressive-image-frame]]:!h-full [&_[data-block-media]_[data-progressive-image-frame]]:!w-full [&_[data-block-media]_img]:!h-full [&_[data-block-media]_img]:!max-h-none [&_[data-block-media]_img]:!w-full [&_[data-block-media]_img]:!max-w-none [&_[data-block-media]_img]:rounded-none [&_[data-block-media]_img]:object-cover",
isTriptych
? "h-80 grid-rows-2 [&_[data-block-media]]:h-auto [&_[data-block-media]:first-child]:row-span-2"
: "[&_[data-block-media]]:h-48",
hasOddTail && "[&_[data-block-media]:last-child]:col-span-2",
)}
data-image-mosaic=""
data-image-mosaic-count={children.length}
ref={mosaicRef}
>
{children}
</div>
);
}
export function createMarkdownComponents(
interactive = true,
mediaInset = false,

28
desktop/src/shared/ui/markdown/ImageMosaic.tsx Normal file
View File

@@ -0,0 +1,28 @@
import React from "react";
import { cn } from "@/shared/lib/cn";
import { useSmoothCorners } from "@/shared/ui/smoothCorners";
/** Grid layout for messages that contain multiple standalone images. */
export function ImageMosaic({ children }: { children: React.ReactNode[] }) {
const mosaicRef = React.useRef<HTMLDivElement | null>(null);
const isTriptych = children.length === 3;
const hasOddTail = children.length > 3 && children.length % 2 === 1;
useSmoothCorners(mosaicRef);
return (
<div
className={cn(
"mt-1 grid w-full min-w-0 max-w-lg grid-cols-2 gap-1.5 overflow-hidden rounded-2xl [&_br]:hidden [&_[data-block-media]]:min-h-0 [&_[data-block-media]]:max-w-none [&_[data-block-media]]:overflow-hidden [&_[data-block-media]>button]:m-0 [&_[data-block-media]>button]:h-full [&_[data-block-media]>button]:w-full [&_[data-block-media]>button]:max-w-none [&_[data-block-media]>button]:rounded-none [&_[data-block-media]_[data-progressive-image-frame]]:!h-full [&_[data-block-media]_[data-progressive-image-frame]]:!w-full [&_[data-block-media]_img]:!h-full [&_[data-block-media]_img]:!max-h-none [&_[data-block-media]_img]:!w-full [&_[data-block-media]_img]:!max-w-none [&_[data-block-media]_img]:rounded-none [&_[data-block-media]_img]:object-cover",
isTriptych
? "h-80 grid-rows-2 [&_[data-block-media]]:h-auto [&_[data-block-media]:first-child]:row-span-2"
: "[&_[data-block-media]]:h-48",
hasOddTail && "[&_[data-block-media]:last-child]:col-span-2",
)}
data-image-mosaic=""
data-image-mosaic-count={children.length}
ref={mosaicRef}
>
{children}
</div>
);
}