mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-06 03:49:56 +08:00
feat(editor): provide callout markdown export options middleware (#12283)
Closes: [BS-3491](https://linear.app/affine-design/issue/BS-3491/支持-callout-导出成-vitepress-文档站支持的-markdown-格式) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added support for exporting callout blocks in both GFM and Admonition markdown styles, including configurable admonition types and custom titles. - Introduced middleware to customize callout export options for markdown serialization. - **Tests** - Enhanced test coverage for callout markdown export, including scenarios with and without export middleware for different styles and content structures. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -4,6 +4,9 @@ import {
|
||||
TableModelFlavour,
|
||||
} from '@blocksuite/affine-model';
|
||||
import {
|
||||
CalloutAdmonitionType,
|
||||
CalloutExportStyle,
|
||||
calloutMarkdownExportMiddleware,
|
||||
embedSyncedDocMiddleware,
|
||||
MarkdownAdapter,
|
||||
} from '@blocksuite/affine-shared/adapters';
|
||||
@@ -2449,119 +2452,288 @@ World!
|
||||
expect(target.file).toBe(markdown);
|
||||
});
|
||||
|
||||
test('callout', async () => {
|
||||
const blockSnapshot: BlockSnapshot = {
|
||||
type: 'block',
|
||||
id: 'block:vu6SK6WJpW',
|
||||
flavour: 'affine:page',
|
||||
props: {
|
||||
title: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [],
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:Tk4gSPocAt',
|
||||
flavour: 'affine:surface',
|
||||
props: {
|
||||
elements: {},
|
||||
describe('callout', () => {
|
||||
test('without export middleware', async () => {
|
||||
const blockSnapshot: BlockSnapshot = {
|
||||
type: 'block',
|
||||
id: 'block:vu6SK6WJpW',
|
||||
flavour: 'affine:page',
|
||||
props: {
|
||||
title: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:WfnS5ZDCJT',
|
||||
flavour: 'affine:note',
|
||||
props: {
|
||||
xywh: '[0,0,800,95]',
|
||||
background: DefaultTheme.noteBackgrounColor,
|
||||
index: 'a0',
|
||||
hidden: false,
|
||||
displayMode: NoteDisplayMode.DocAndEdgeless,
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:Tk4gSPocAt',
|
||||
flavour: 'affine:surface',
|
||||
props: {
|
||||
elements: {},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '💡',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [{ insert: 'First callout' }],
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:WfnS5ZDCJT',
|
||||
flavour: 'affine:note',
|
||||
props: {
|
||||
xywh: '[0,0,800,95]',
|
||||
background: DefaultTheme.noteBackgrounColor,
|
||||
index: 'a0',
|
||||
hidden: false,
|
||||
displayMode: NoteDisplayMode.DocAndEdgeless,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '💡',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [{ insert: 'First callout' }],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxadvdv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '',
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [{ insert: 'Second callout without emoji' }],
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxadvdv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [
|
||||
{ insert: 'Warning second callout without emoji' },
|
||||
],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxbfdb',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'quote',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [{ insert: 'This is a regular blockquote' }],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [{ insert: 'Text in second callout' }],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const markdown = `> \\[!💡]
|
||||
const markdown = `> \\[!💡]
|
||||
>
|
||||
> First callout
|
||||
|
||||
> \\[!]
|
||||
>
|
||||
> Second callout without emoji
|
||||
|
||||
> This is a regular blockquote
|
||||
> Warning second callout without emoji
|
||||
>
|
||||
> Text in second callout
|
||||
`;
|
||||
|
||||
const mdAdapter = new MarkdownAdapter(createJob(), provider);
|
||||
const target = await mdAdapter.fromBlockSnapshot({
|
||||
snapshot: blockSnapshot,
|
||||
const mdAdapter = new MarkdownAdapter(createJob(), provider);
|
||||
const target = await mdAdapter.fromBlockSnapshot({
|
||||
snapshot: blockSnapshot,
|
||||
});
|
||||
expect(target.file).toBe(markdown);
|
||||
});
|
||||
|
||||
test('with export middleware', async () => {
|
||||
const blockSnapshot: BlockSnapshot = {
|
||||
type: 'block',
|
||||
id: 'block:vu6SK6WJpW',
|
||||
flavour: 'affine:page',
|
||||
props: {
|
||||
title: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [],
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:Tk4gSPocAt',
|
||||
flavour: 'affine:surface',
|
||||
props: {
|
||||
elements: {},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:WfnS5ZDCJT',
|
||||
flavour: 'affine:note',
|
||||
props: {
|
||||
xywh: '[0,0,800,95]',
|
||||
background: DefaultTheme.noteBackgrounColor,
|
||||
index: 'a0',
|
||||
hidden: false,
|
||||
displayMode: NoteDisplayMode.DocAndEdgeless,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '💡',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [
|
||||
{ insert: 'Callout that does not have a title' },
|
||||
],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxadvdv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [
|
||||
{
|
||||
insert:
|
||||
'Warning callout with custom title and multiple paragraphs',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [{ insert: 'Text in second callout' }],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:callout',
|
||||
props: {
|
||||
emoji: '💡',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'block',
|
||||
id: 'block:8hOLxad5Fv',
|
||||
flavour: 'affine:paragraph',
|
||||
props: {
|
||||
type: 'text',
|
||||
text: {
|
||||
'$blocksuite:internal:text$': true,
|
||||
delta: [
|
||||
{ insert: 'details' },
|
||||
{ insert: ' ' },
|
||||
{ insert: '\nText in details callout with new line' },
|
||||
],
|
||||
},
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const markdown = `::: info
|
||||
|
||||
Callout that does not have a title
|
||||
|
||||
:::
|
||||
|
||||
::: warning callout with custom title and multiple paragraphs
|
||||
|
||||
Text in second callout
|
||||
|
||||
:::
|
||||
|
||||
::: details
|
||||
|
||||
Text in details callout with new line
|
||||
|
||||
:::
|
||||
`;
|
||||
|
||||
const mdAdapter = new MarkdownAdapter(
|
||||
createJob([
|
||||
calloutMarkdownExportMiddleware({
|
||||
style: CalloutExportStyle.Admonitions,
|
||||
admonitionType: CalloutAdmonitionType.Info,
|
||||
}),
|
||||
]),
|
||||
provider
|
||||
);
|
||||
const target = await mdAdapter.fromBlockSnapshot({
|
||||
snapshot: blockSnapshot,
|
||||
});
|
||||
expect(target.file).toBe(markdown);
|
||||
});
|
||||
expect(target.file).toBe(markdown);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user