From 2dad85ffbf13853165027f948f3c9f6766a549f8 Mon Sep 17 00:00:00 2001
From: Viktor Renkema <vrenkema@gmail.com>
Date: Fri, 17 Jan 2025 11:06:55 +0100
Subject: [PATCH] Use a prop for opting in for border + increase sensitivity in
 test

---
 packages/gitbook/e2e/pages.spec.ts                       | 1 +
 packages/gitbook/src/components/DocumentView/Caption.tsx | 6 +++---
 packages/gitbook/src/components/DocumentView/Embed.tsx   | 2 +-
 packages/gitbook/src/components/DocumentView/File.tsx    | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts
index 5ed653994a..00e5cbcf46 100644
--- a/packages/gitbook/e2e/pages.spec.ts
+++ b/packages/gitbook/e2e/pages.spec.ts
@@ -475,6 +475,7 @@ const testCases: TestsCase[] = [
                 name: 'Embeds',
                 url: 'blocks/embeds',
                 fullPage: true,
+                screenshot: { threshold: 0.3 },
             },
             {
                 name: 'Page links',
diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx
index 2f6f6e70c1..2d5a8a35ee 100644
--- a/packages/gitbook/src/components/DocumentView/Caption.tsx
+++ b/packages/gitbook/src/components/DocumentView/Caption.tsx
@@ -23,16 +23,16 @@ export function Caption(
         fit?: boolean;
         wrapperStyle?: ClassValue;
         block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed | DocumentBlockFile;
+        withBorder?: boolean;
     } & DocumentContextProps,
 ) {
-    const needsBorder = props.block.type === 'embed' || props.block.type === 'file';
-
     const {
         children,
         document,
         block,
         context,
         fit = false,
+        withBorder = false,
         wrapperStyle = [
             'relative',
             'overflow-hidden',
@@ -40,7 +40,7 @@ export function Caption(
             'after:absolute',
             'after:-inset-[0]',
             fit ? 'w-fit' : null,
-            needsBorder
+            withBorder
                 ? 'rounded straight-corners:rounded-none after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none'
                 : null,
         ],
diff --git a/packages/gitbook/src/components/DocumentView/Embed.tsx b/packages/gitbook/src/components/DocumentView/Embed.tsx
index ae414e38a3..09e55ac374 100644
--- a/packages/gitbook/src/components/DocumentView/Embed.tsx
+++ b/packages/gitbook/src/components/DocumentView/Embed.tsx
@@ -22,7 +22,7 @@ export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
         : getEmbedByUrl(block.data.url));
 
     return (
-        <Caption {...props}>
+        <Caption {...props} withBorder>
             {embed.type === 'rich' ? (
                 <>
                     <div
diff --git a/packages/gitbook/src/components/DocumentView/File.tsx b/packages/gitbook/src/components/DocumentView/File.tsx
index 9def0b3120..923e35f386 100644
--- a/packages/gitbook/src/components/DocumentView/File.tsx
+++ b/packages/gitbook/src/components/DocumentView/File.tsx
@@ -21,7 +21,7 @@ export async function File(props: BlockProps<DocumentBlockFile>) {
     const contentType = getSimplifiedContentType(file.contentType);
 
     return (
-        <Caption {...props}>
+        <Caption {...props} withBorder>
             <Link
                 href={file.downloadURL}
                 download={file.name}