feat(editor): add favicon, title, description support for footnote url reference (#11924)

Closes: [BS-3272](https://linear.app/affine-design/issue/BS-3272/footnote-适配-exa-api-返回结果)

## What's Changed

Add link preview data support (favicon, title, description) for URL references in footnotes:
- Store and display URL preview data in footnotes
- Add encoding/decoding support for favicon URLs
- Optimize link preview by using existing preview data when available
This commit is contained in:
donteatfriedrice
2025-04-23 11:57:25 +00:00
parent ff133d1267
commit db5eadb72a
7 changed files with 121 additions and 31 deletions

View File

@@ -2396,6 +2396,9 @@ World!
reference: {
type: 'url',
url: 'https://www.example.com',
favicon: 'https://www.example.com/favicon.ico',
title: 'Example Domain',
description: 'Example Domain',
},
},
},
@@ -2437,7 +2440,7 @@ World!
};
const markdown =
'aaa[^1][^2][^3]\n\n[^1]: {"type":"url","url":"https%3A%2F%2Fwww.example.com"}\n\n[^2]: {"type":"doc","docId":"deadbeef"}\n\n[^3]: {"type":"attachment","blobId":"abcdefg","fileName":"test.txt","fileType":"text/plain"}\n';
'aaa[^1][^2][^3]\n\n[^1]: {"type":"url","url":"https%3A%2F%2Fwww.example.com","favicon":"https%3A%2F%2Fwww.example.com%2Ffavicon.ico","title":"Example Domain","description":"Example Domain"}\n\n[^2]: {"type":"doc","docId":"deadbeef"}\n\n[^3]: {"type":"attachment","blobId":"abcdefg","fileName":"test.txt","fileType":"text/plain"}\n';
const mdAdapter = new MarkdownAdapter(createJob(), provider);
const target = await mdAdapter.fromBlockSnapshot({
@@ -4029,7 +4032,11 @@ hhh
});
describe('footnote', () => {
const createFootnoteBlockSnapshot = (url: string): BlockSnapshot => ({
const url = 'https://www.example.com';
const favicon = 'https://www.example.com/favicon.ico';
const title = 'Example Domain';
const description = 'Example Domain';
const blockSnapshot = {
type: 'block',
id: 'matchesReplaceMap[0]',
flavour: 'affine:note',
@@ -4061,6 +4068,9 @@ hhh
reference: {
type: 'url',
url,
favicon,
title,
description,
},
},
},
@@ -4097,15 +4107,12 @@ hhh
children: [],
},
],
});
};
test('with encoded url', async () => {
const markdown =
'aaa[^1][^2][^3]\n\n[^1]: {"type":"url","url":"https%3A%2F%2Fwww.example.com"}\n\n[^2]: {"type":"doc","docId":"deadbeef"}\n\n[^3]: {"type":"attachment","blobId":"abcdefg","fileName":"test.txt","fileType":"text/plain"}\n';
const blockSnapshot = createFootnoteBlockSnapshot(
'https://www.example.com'
);
test('with encoded url and favicon', async () => {
const encodedUrl = encodeURIComponent(url);
const encodedFavicon = encodeURIComponent(favicon);
const markdown = `aaa[^1][^2][^3]\n\n[^1]: {"type":"url","url":"${encodedUrl}","favicon":"${encodedFavicon}","title":"${title}","description":"${description}"}\n\n[^2]: {"type":"doc","docId":"deadbeef"}\n\n[^3]: {"type":"attachment","blobId":"abcdefg","fileName":"test.txt","fileType":"text/plain"}\n`;
const mdAdapter = new MarkdownAdapter(createJob(), provider);
const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
@@ -4114,13 +4121,8 @@ hhh
expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
});
test('with unencoded url', async () => {
const markdown =
'aaa[^1][^2][^3]\n\n[^1]: {"type":"url","url":"https://www.example.com"}\n\n[^2]: {"type":"doc","docId":"deadbeef"}\n\n[^3]: {"type":"attachment","blobId":"abcdefg","fileName":"test.txt","fileType":"text/plain"}\n';
const blockSnapshot = createFootnoteBlockSnapshot(
'https://www.example.com'
);
test('with unencoded url and favicon', async () => {
const markdown = `aaa[^1][^2][^3]\n\n[^1]: {"type":"url","url":"${url}","favicon":"${favicon}","title":"${title}","description":"${description}"}\n\n[^2]: {"type":"doc","docId":"deadbeef"}\n\n[^3]: {"type":"attachment","blobId":"abcdefg","fileName":"test.txt","fileType":"text/plain"}\n`;
const mdAdapter = new MarkdownAdapter(createJob(), provider);
const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({