Prevent click on images in links to zoom it (#324)

* Prevent click on images in links to zoom it

* Fix TS

src/components/DocumentView/Annotation/Annotation.tsx

@@ -12,7 +12,7 @@ export async function Annotation(props: InlineProps<DocumentInlineAnnotation>) {
 
     const fragment = getNodeFragmentByType(inline, 'annotation-body');
     const content = children ?? (
-        <Inlines document={document} context={context} nodes={inline.nodes} />
+        <Inlines document={document} context={context} nodes={inline.nodes} ancestorInlines={[]} />
     );
 
     if (!fragment) {

src/components/DocumentView/Caption.tsx

@@ -70,7 +70,12 @@ export function Caption(
                     'dark:text-light/6',
                 )}
             >
-                <Inlines nodes={captionParagraph.nodes} document={document} context={context} />
+                <Inlines
+                    nodes={captionParagraph.nodes}
+                    document={document}
+                    context={context}
+                    ancestorInlines={[]}
+                />
             </figcaption>
         </picture>
     );

src/components/DocumentView/CodeBlock/CodeBlock.tsx

@@ -265,7 +265,12 @@ function CodeHighlightToken(props: {
 
     if (token.type === 'inline') {
         return (
-            <Inline inline={token.inline} document={document} context={context}>
+            <Inline
+                inline={token.inline}
+                document={document}
+                context={context}
+                ancestorInlines={[]}
+            >
                 <CodeHighlightTokens
                     tokens={token.children}
                     document={document}

src/components/DocumentView/Expandable/Expandable.tsx

@@ -90,7 +90,12 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
                         'group-open:rotate-90',
                     )}
                 />
-                <Inlines nodes={titleParagraph.nodes} document={document} context={context} />
+                <Inlines
+                    nodes={titleParagraph.nodes}
+                    document={document}
+                    context={context}
+                    ancestorInlines={[]}
+                />
                 <a
                     href={`#${id}`}
                     aria-label="Direct link to heading"

src/components/DocumentView/Heading.tsx

@@ -62,7 +62,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                 </a>
             </div>
             <div className={tcls('grid-area-1-1', 'z-[1]', textStyle.marginTop)}>
-                <Inlines {...rest} context={context} nodes={block.nodes} />
+                <Inlines {...rest} context={context} nodes={block.nodes} ancestorInlines={[]} />
             </div>
         </Tag>
     );

src/components/DocumentView/Inline.tsx

@@ -26,6 +26,11 @@ export interface InlineProps<T extends DocumentInline> extends DocumentContextPr
      */
     document: JSONDocument;
 
+    /**
+     * Inline ancestors of the current inline.
+     */
+    ancestorInlines: DocumentInline[];
+
     /**
      * If defined, replace the content of the inline.
      */

src/components/DocumentView/InlineImage.tsx

@@ -9,7 +9,7 @@ import { InlineProps } from './Inline';
 import { Image } from '../utils';
 
 export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
-    const { inline, context } = props;
+    const { inline, context, ancestorInlines } = props;
     const { size = 'original' } = inline.data;
 
     const [src, darkSrc] = await Promise.all([
@@ -21,6 +21,8 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
         return null;
     }
 
+    const isInLink = ancestorInlines.some((ancestor) => ancestor.type === 'link');
+
     return (
         /* 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)}>
@@ -43,7 +45,7 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
                 preload
                 style={[size === 'line' ? ['max-h-[1lh]', 'h-[1lh]', 'w-auto'] : null]}
                 inline
-                zoom
+                zoom={!isInLink}
             />
         </span>
     );

src/components/DocumentView/InlineLink.tsx

@@ -5,14 +5,19 @@ import { Inlines } from './Inlines';
 import { Link } from '../primitives';
 
 export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
-    const { inline, document, context } = props;
+    const { inline, document, context, ancestorInlines } = props;
 
     const resolved = await context.resolveContentRef(inline.data.ref);
 
     if (!resolved) {
         return (
             <span title="Broken link" className="underline">
-                <Inlines context={context} document={document} nodes={inline.nodes} />
+                <Inlines
+                    context={context}
+                    document={document}
+                    nodes={inline.nodes}
+                    ancestorInlines={[...ancestorInlines, inline]}
+                />
             </span>
         );
     }
@@ -22,7 +27,12 @@ export async function InlineLink(props: InlineProps<DocumentInlineLink>) {
             href={resolved.href}
             className="underline underline-offset-2 text-primary hover:text-primary-700 transition-colors "
         >
-            <Inlines context={context} document={document} nodes={inline.nodes} />
+            <Inlines
+                context={context}
+                document={document}
+                nodes={inline.nodes}
+                ancestorInlines={[...ancestorInlines, inline]}
+            />
         </Link>
     );
 }

src/components/DocumentView/Inlines.tsx

@@ -11,10 +11,18 @@ export function Inlines<T extends DocumentInline | DocumentText>(
          */
         document: JSONDocument;
 
+        /**
+         * Ancestors of the current inline.
+         */
+        ancestorInlines: DocumentInline[];
+
+        /**
+         * Nodes to render
+         */
         nodes: T[];
     },
 ) {
-    const { nodes, document, ...contextProps } = props;
+    const { nodes, document, ancestorInlines, ...contextProps } = props;
 
     return (
         <>
@@ -24,7 +32,13 @@ export function Inlines<T extends DocumentInline | DocumentText>(
                 }
 
                 return (
-                    <Inline key={node.key} inline={node} document={document} {...contextProps} />
+                    <Inline
+                        key={node.key}
+                        inline={node}
+                        document={document}
+                        ancestorInlines={ancestorInlines}
+                        {...contextProps}
+                    />
                 );
             })}
         </>

src/components/DocumentView/Paragraph.tsx

@@ -10,7 +10,7 @@ export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
 
     return (
         <p className={tcls(style)}>
-            <Inlines {...contextProps} nodes={block.nodes} />
+            <Inlines {...contextProps} nodes={block.nodes} ancestorInlines={[]} />
         </p>
     );
 }