gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-25 11:52:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

RND-3192: images expanding card content beyond their width (#281)

Browse Source 
* Fix for RND-3192: images expanding card content beyond their width

* Wrap Image in a size-restricting container

---------

Co-authored-by: Viktor Renkema <vrenkema@gmail.com>
This commit is contained in:
Brett Jephson
2024-03-21 11:46:46 +00:00
committed by GitHub
parent cfcfbdf16c
commit fff6dce8fc
1 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DocumentView/InlineImage.tsx
+30 -24
View File
@@ -3,6 +3,7 @@ import assertNever from 'assert-never';
import { getImageSize } from '@/lib/images';
import { ResolvedContentRef } from '@/lib/references';
import { tcls } from '@/lib/tailwind';
import { InlineProps } from './Inline';
import { Image } from '../utils';
@@ -21,41 +22,45 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
}
return (
<Image
alt={inline.data.caption ?? ''}
sizes={await getImageSizes(size, src)}
sources={{
light: {
src: src.href,
size: src.fileDimensions,
},
dark: darkSrc
? {
src: darkSrc.href,
size: darkSrc.fileDimensions,
}
: null,
}}
priority="lazy"
preload
style={[size === 'line' ? ['max-h-[1lh]', 'h-[1lh]', 'w-auto'] : ['max-w-[300px]']]}
inline
zoom
/>
/* Ensure images dont expand to the size of the container where this Image may be nested in. Now it's always nested in a size-restricted container */
<span className={tcls(size !== 'line' ? ['inline-flex', 'max-w-[300px]'] : null)}>
<Image
alt={inline.data.caption ?? ''}
sizes={await getImageSizes(size, src)}
sources={{
light: {
src: src.href,
size: src.fileDimensions,
},
dark: darkSrc
? {
src: darkSrc.href,
size: darkSrc.fileDimensions,
}
: null,
}}
priority="lazy"
preload
style={[size === 'line' ? ['max-h-[1lh]', 'h-[1lh]', 'w-auto'] : null]}
inline
zoom
/>
</span>
);
}
async function getImageSizes(size: 'original' | 'line', src: ResolvedContentRef) {
switch (size) {
case 'line': {
// We estimate that the maximum height of the line will be 40px
// and from the aspect-ratio, we can deduce the width
const lineHeight = 40;
const imageSize =
src.fileDimensions ??
(await getImageSize(src.href, {
dpr: 3,
}));
// We estimate that the maximum height of the line will be 40px
// and from the aspect-ratio, we can deduce the width
const lineHeight = 40;
const aspectRatio = imageSize ? imageSize.width / imageSize.height : 1;
return [
@@ -68,6 +73,7 @@ async function getImageSizes(size: 'original' | 'line', src: ResolvedContentRef)
// The max-width is 300px
return [
{
// if we know the image size and it is smaller than 300px use its width
width: 300,
},
];