From 17f2ebc4deac379a2ad00d40e98d3bd64f953d12 Mon Sep 17 00:00:00 2001
From: Heera Rana <138364612+HeeraRana247453@users.noreply.github.com>
Date: Fri, 16 Jan 2026 19:48:59 +0530
Subject: [PATCH] feat: render document header image from document metadata
 (#14255)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What
Adds support for rendering an optional image above the document title
using document metadata.

### Why
Provides a visual identifier for documents and improves readability for
users who rely on visual cues.

### How
- Reads `headerImage` from document metadata (if present)
- Renders the image above the editor when present
- Fully optional and non-breaking
- No BlockSuite or data model changes

### Related
fix #14240


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Documents can now display header images in the page editor. When a
header image is available, it appears above the editor content,
enhancing visual presentation and providing better context for your
documents.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/page-detail-editor.tsx     | 45 ++++++++++++++-----
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/core/src/components/page-detail-editor.tsx b/packages/frontend/core/src/components/page-detail-editor.tsx
index 47b14f13b3..4ced924b0a 100644
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/packages/frontend/core/src/components/page-detail-editor.tsx
@@ -25,6 +25,10 @@ export interface PageDetailEditorProps {
   readonly?: boolean;
 }
 
+type DocMetaWithHeaderImage = {
+  headerImage?: string;
+};
+
 export const PageDetailEditor = ({
   onLoad,
   readonly,
@@ -34,6 +38,7 @@ export const PageDetailEditor = ({
   const defaultOpenProperty = useLiveData(editor.defaultOpenProperty$);
 
   const doc = useService(DocService).doc;
+  const docMeta = useLiveData(doc.meta$) as DocMetaWithHeaderImage | null;
   const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
 
   const isSharedMode = editor.isSharedMode;
@@ -54,17 +59,33 @@ export const PageDetailEditor = ({
   }, [editor, readonly]);
 
   return (
-    <BlockSuiteEditor
-      className={clsx(styles.editor, {
-        'full-screen': !isSharedMode && fullWidthLayout,
-        'is-public': isSharedMode,
-      })}
-      mode={mode}
-      defaultOpenProperty={defaultOpenProperty}
-      page={editor.doc.blockSuiteDoc}
-      shared={isSharedMode}
-      readonly={readonly}
-      onEditorReady={onLoad}
-    />
+    <>
+      {docMeta?.headerImage && (
+        <img
+          src={docMeta.headerImage}
+          alt="Document header"
+          style={{
+            width: '100%',
+            maxHeight: 240,
+            objectFit: 'cover',
+            borderRadius: 8,
+            marginBottom: 12,
+          }}
+        />
+      )}
+
+      <BlockSuiteEditor
+        className={clsx(styles.editor, {
+          'full-screen': !isSharedMode && fullWidthLayout,
+          'is-public': isSharedMode,
+        })}
+        mode={mode}
+        defaultOpenProperty={defaultOpenProperty}
+        page={editor.doc.blockSuiteDoc}
+        shared={isSharedMode}
+        readonly={readonly}
+        onEditorReady={onLoad}
+      />
+    </>
   );
 };