Restore borders on embed blocks with Captions (#2755)

Author: viktorrenkema

packages/gitbook/src/components/DocumentView/Caption.tsx

@@ -23,6 +23,7 @@ export function Caption(
         fit?: boolean;
         wrapperStyle?: ClassValue;
         block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed | DocumentBlockFile;
+        withBorder?: boolean;
     } & DocumentContextProps,
 ) {
     const {
@@ -31,15 +32,17 @@ export function Caption(
         block,
         context,
         fit = false,
+        withBorder = false,
         wrapperStyle = [
             'relative',
             'overflow-hidden',
             'after:block',
             'after:absolute',
             'after:-inset-[0]',
-            'dark:after:mix-blend-plus-lighter',
-            'after:pointer-events-none',
             fit ? 'w-fit' : null,
+            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,
         ],
         style,
     } = props;

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

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} wrapperStyle={[]}>
+        <Caption {...props} withBorder>
             <Link
                 href={file.downloadURL}
                 download={file.name}
@@ -34,13 +34,9 @@ export async function File(props: BlockProps<DocumentBlockFile>) {
                     'flex',
                     'flex-row',
                     'items-center',
-                    'border',
                     'px-5',
                     'py-3',
-                    'border-dark/3',
-                    'rounded-lg',
                     'hover:text-primary-600',
-                    'dark:border-light/3',
                     'dark:hover:text-primary-300',
                 )}
             >