Skip to content

feat: update Image, ImageLink, ImageDisplay and ImageDisplayLink UI for v2 design #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andy19910102 merged 9 commits into from
May 5, 2026
Merged

feat: update Image, ImageLink, ImageDisplay and ImageDisplayLink UI for v2 design #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7dd39d6
feat: create Image, ImageDisplay, ImageDisplayLink, ImageLink for v2 …
andy19910102 Apr 26, 2026
6b27d36
feat: align image caption typography with v2 design
andy19910102 Apr 26, 2026
f653c33
fix: align basic image tooltip position with other variants
andy19910102 Apr 26, 2026
62409d6
fix: render image tooltip above image with 16px gap on all variants
andy19910102 Apr 26, 2026
5547a16
chore: format image.js with prettier
andy19910102 Apr 26, 2026
0ea58c6
refactor: split image variants into independent components with expli…
andy19910102 Apr 27, 2026
ca38eef
fix: hide external-link icon overlay when linked image source was fai…
andy19910102 Apr 27, 2026
4f8c366
fix: hide image tooltip when image source failed to load
andy19910102 May 4, 2026
cefdb9a
refactor: convert image helper functions to composition components
andy19910102 May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions src/components/parser-components/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { IconExternalLink } from '@tabler/icons-react';

import Tooltip from '@/components/core/tooltip';

const useImageBroken = (source) => {
const [erroredSource, setErroredSource] = useState(null);
return {
broken: erroredSource === source,
onError: () => setErroredSource(source),
};
};

const Img = ({ source = '', alt = '', onError }) => (
<img src={source} alt={alt} className="block w-full" onError={onError} />
);

Img.propTypes = {
source: PropTypes.string,
alt: PropTypes.string,
onError: PropTypes.func,
};

const LinkedImg = ({ source = '', alt = '', target = '', broken = false, onError }) => (
<a href={target} target="_blank" rel="noopener noreferrer" className="relative block">
<Img source={source} alt={alt} onError={onError} />
{!broken && (
<span
aria-hidden="true"
className="absolute top-2 left-2 flex items-center justify-center bg-white rounded p-1 text-gray-700 shadow-shadow1"
>
<IconExternalLink size={20} />
</span>
)}
</a>
);

LinkedImg.propTypes = {
source: PropTypes.string,
alt: PropTypes.string,
target: PropTypes.string,
broken: PropTypes.bool,
onError: PropTypes.func,
};

const AltTooltip = ({ alt = '', disabled = false, children }) => {
if (!alt || disabled) return children;
return (
<span className="block overflow-hidden">
<Tooltip label={alt}>
<span className="block -mt-[15px] pt-[15px]">{children}</span>
</Tooltip>
</span>
);
};

AltTooltip.propTypes = {
alt: PropTypes.string,
disabled: PropTypes.bool,
children: PropTypes.node.isRequired,
};

const Caption = ({ display = '', children }) => (
<figure>
{children}
<figcaption className="mt-3 text-center text-base text-text-secondary">{display}</figcaption>
</figure>
);

Caption.propTypes = {
display: PropTypes.string,
children: PropTypes.node.isRequired,
};

const Image = ({ alt = '', source = '' }) => {
const { broken, onError } = useImageBroken(source);
return (
<AltTooltip alt={alt} disabled={broken}>
<Img source={source} alt={alt} onError={onError} />
</AltTooltip>
);
};

Image.propTypes = {
alt: PropTypes.string,
source: PropTypes.string,
};

export const ImageLink = ({ alt = '', source = '', target = '' }) => {
const { broken, onError } = useImageBroken(source);
return (
<AltTooltip alt={alt} disabled={broken}>
<LinkedImg source={source} alt={alt} target={target} broken={broken} onError={onError} />
</AltTooltip>
);
};

ImageLink.propTypes = {
alt: PropTypes.string,
source: PropTypes.string,
target: PropTypes.string,
};

export const ImageDisplay = ({ alt = '', display = '', source = '' }) => {
const { broken, onError } = useImageBroken(source);
return (
<Caption display={display}>
<AltTooltip alt={alt} disabled={broken}>
<Img source={source} alt={alt} onError={onError} />
</AltTooltip>
</Caption>
);
};

ImageDisplay.propTypes = {
alt: PropTypes.string,
display: PropTypes.string,
source: PropTypes.string,
};

export const ImageDisplayLink = ({ alt = '', display = '', source = '', target = '' }) => {
const { broken, onError } = useImageBroken(source);
return (
<Caption display={display}>
<AltTooltip alt={alt} disabled={broken}>
<LinkedImg source={source} alt={alt} target={target} broken={broken} onError={onError} />
</AltTooltip>
</Caption>
);
};

ImageDisplayLink.propTypes = {
alt: PropTypes.string,
display: PropTypes.string,
source: PropTypes.string,
target: PropTypes.string,
};

export default Image;
9 changes: 9 additions & 0 deletions src/pages/home/useSeeMarkParse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ import {
ExternalLinkTabTitle,
ExternalLinkTitle,
} from '@/components/parser-components/external-link/external-link';
import Image, {
ImageDisplay,
ImageDisplayLink,
ImageLink,
} from '@/components/parser-components/image/image';
import InternalLink from '@/components/parser-components/internal-link/internal-link';

const useSeeMarkParse = ({ latexDelimiter, documentFormat, imageFiles }) => {
Expand All @@ -26,6 +31,10 @@ const useSeeMarkParse = ({ latexDelimiter, documentFormat, imageFiles }) => {
externalLinkTab: ExternalLinkTab,
externalLinkTitle: ExternalLinkTitle,
externalLinkTabTitle: ExternalLinkTabTitle,
image: Image,
imageLink: ImageLink,
imageDisplay: ImageDisplay,
imageDisplayLink: ImageDisplayLink,
},
})(markdown);
},
Expand Down
Loading