diff --git a/.changeset/stupid-geese-enjoy.md b/.changeset/stupid-geese-enjoy.md new file mode 100644 index 0000000000..1bb99adc9b --- /dev/null +++ b/.changeset/stupid-geese-enjoy.md @@ -0,0 +1,5 @@ +--- +'gitbook': minor +--- + +Support external images in cards cover diff --git a/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx b/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx index 49aa7a1bc5..1ef4457aba 100644 --- a/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx +++ b/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx @@ -22,7 +22,7 @@ export async function RecordCard( const { view, record, context, block, isOffscreen } = props; const coverFile = view.coverDefinition - ? getRecordValue(record[1], view.coverDefinition)?.[0] + ? getRecordValue(record[1], view.coverDefinition)?.[0] : null; const targetRef = view.targetDefinition ? (record[1].values[view.targetDefinition] as ContentRef) @@ -30,7 +30,7 @@ export async function RecordCard( const [cover, target] = await Promise.all([ coverFile && context.contentContext - ? resolveContentRef({ kind: 'file', file: coverFile }, context.contentContext) + ? resolveContentRef(getCoverFileContentRef(coverFile), context.contentContext) : null, targetRef && context.contentContext ? resolveContentRef(targetRef, context.contentContext) @@ -167,3 +167,16 @@ export async function RecordCard( return
{body}
; } + +/** + * Resolve the cover file content-ref. + * If the value is a string, it means it's a file ID (legacy). + * Otherwise, it's a content-ref (File|URL). + */ +function getCoverFileContentRef(value: ContentRef | string): ContentRef { + if (typeof value === 'string') { + return { kind: 'file', file: value }; + } + + return value; +} diff --git a/packages/gitbook/src/components/DocumentView/Table/utils.ts b/packages/gitbook/src/components/DocumentView/Table/utils.ts index 1fc95b357e..8a70f6bdfd 100644 --- a/packages/gitbook/src/components/DocumentView/Table/utils.ts +++ b/packages/gitbook/src/components/DocumentView/Table/utils.ts @@ -4,10 +4,9 @@ import assertNever from 'assert-never'; /** * Get the value for a column in a record. */ -export function getRecordValue( - record: DocumentTableRecord, - definitionId: string -): T { +export function getRecordValue< + T extends number | string | boolean | string[] | ContentRef | ContentRef[], +>(record: DocumentTableRecord, definitionId: string): T { // @ts-ignore return record.values[definitionId]; }