Skip to content
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

Jump to bottom

MM-60425 Making clickable images work inside Markdown #8215

Merged
merged 3 commits into from
Oct 7, 2024
Merged

MM-60425 Making clickable images work inside Markdown #8215

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d62f31
fix: disables the gallery click on images inside a markdown link
panoramix360 Sep 11, 2024
9d244ac
feat: removing the logic for acknowledging children that is inside link
panoramix360 Sep 17, 2024
df084c4
chore: renaming for consistency
panoramix360 Sep 17, 2024
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
20 changes: 15 additions & 5 deletions app/components/markdown/markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,16 +352,18 @@ const Markdown = ({
return rendered;
};

const renderImage = ({linkDestination, context, src, size}: MarkdownImageRenderer) => {
const renderImage = ({linkDestination, context, src, size, isInsideLink = false}: MarkdownImageRenderer) => {
if (!imagesMetadata || isUnsafeLinksPost) {
return null;
}

const isImageDisabled = (disableGallery ?? Boolean(!location)) || isInsideLink;
panoramix360 marked this conversation as resolved.
Show resolved Hide resolved

if (context.indexOf('table') !== -1) {
// We have enough problems rendering images as is, so just render a link inside of a table
return (
<MarkdownTableImage
disabled={disableGallery ?? Boolean(!location)}
disabled={isImageDisabled}
imagesMetadata={imagesMetadata}
location={location}
postId={postId!}
Expand All @@ -372,7 +374,7 @@ const Markdown = ({

return (
<MarkdownImage
disabled={disableGallery ?? Boolean(!location)}
disabled={isImageDisabled}
errorTextStyle={[computeTextStyle(textStyles, baseTextStyle, context), textStyles.error]}
layoutHeight={layoutHeight}
layoutWidth={layoutWidth}
Expand Down Expand Up @@ -403,16 +405,24 @@ const Markdown = ({
);
};

const renderLink = ({children, href}: {children: ReactElement; href: string}) => {
const renderLink = ({children, href}: {children: any; href: string}) => {
panoramix360 marked this conversation as resolved.
Show resolved Hide resolved
if (isUnsafeLinksPost) {
return renderText({context: [], literal: href});
}

const childrenWithLinkFlag = React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
return React.cloneElement(child as ReactElement<any>, {isInsideLink: true});
}
return child;
});

panoramix360 marked this conversation as resolved.
Show resolved Hide resolved
return (
<MarkdownLink
href={href}
onLinkLongPress={onLinkLongPress}
>
{children}
{childrenWithLinkFlag}
</MarkdownLink>
);
};
Expand Down
1 change: 1 addition & 0 deletions types/global/markdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export type MarkdownImageRenderer = {
width?: number;
height?: number;
};
isInsideLink?: boolean;
}

export type MarkdownLatexRenderer = MarkdownBaseRenderer & {
Expand Down