feat(blocks): add plain text block adapter for embed link block (toev…

…erything#8843)

[BS-2037](https://linear.app/affine-design/issue/BS-2037/补齐-embed-link-block)

packages/affine/block-embed/src/common/adapters/plain-text.ts

@@ -0,0 +1,40 @@
+import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/adapters';
+
+export function createEmbedBlockPlainTextAdapterMatcher(
+  flavour: string,
+  {
+    toMatch = () => false,
+    fromMatch = o => o.node.flavour === flavour,
+    toBlockSnapshot = {},
+    fromBlockSnapshot = {
+      enter: (o, context) => {
+        const { textBuffer } = context;
+        // Parse as link
+        if (
+          typeof o.node.props.title !== 'string' ||
+          typeof o.node.props.url !== 'string'
+        ) {
+          return;
+        }
+        const buffer = `[${o.node.props.title}](${o.node.props.url})`;
+        if (buffer.length > 0) {
+          textBuffer.content += buffer;
+          textBuffer.content += '\n';
+        }
+      },
+    },
+  }: {
+    toMatch?: BlockPlainTextAdapterMatcher['toMatch'];
+    fromMatch?: BlockPlainTextAdapterMatcher['fromMatch'];
+    toBlockSnapshot?: BlockPlainTextAdapterMatcher['toBlockSnapshot'];
+    fromBlockSnapshot?: BlockPlainTextAdapterMatcher['fromBlockSnapshot'];
+  } = {}
+): BlockPlainTextAdapterMatcher {
+  return {
+    flavour,
+    toMatch,
+    fromMatch,
+    toBlockSnapshot,
+    fromBlockSnapshot,
+  };
+}

packages/affine/block-embed/src/embed-figma-block/adapters/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown.js';
+export * from './plain-text.js';

packages/affine/block-embed/src/embed-figma-block/adapters/plain-text.ts

@@ -0,0 +1,10 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedFigmaBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedFigmaBlockPlainTextAdapterMatcher);

packages/affine/block-embed/src/embed-figma-block/index.ts

@@ -1,4 +1,4 @@
-export * from './adapters/markdown.js';
+export * from './adapters/index.js';
 export * from './embed-figma-block.js';
 export * from './embed-figma-model.js';
 export * from './embed-figma-spec.js';

packages/affine/block-embed/src/embed-github-block/adapters/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown.js';
+export * from './plain-text.js';

packages/affine/block-embed/src/embed-github-block/adapters/plain-text.ts

@@ -0,0 +1,10 @@
+import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedGithubBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(EmbedGithubBlockSchema.model.flavour);
+
+export const EmbedGithubBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedGithubBlockPlainTextAdapterMatcher);

packages/affine/block-embed/src/embed-github-block/index.ts

@@ -1,4 +1,4 @@
-export * from './adapters/markdown.js';
+export * from './adapters/index.js';
 export * from './embed-github-block.js';
 export * from './embed-github-service.js';
 export * from './embed-github-spec.js';

packages/affine/block-embed/src/embed-loom-block/adapters/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown.js';
+export * from './plain-text.js';

packages/affine/block-embed/src/embed-loom-block/adapters/plain-text.ts

@@ -0,0 +1,10 @@
+import { EmbedLoomBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedLoomBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(EmbedLoomBlockSchema.model.flavour);
+
+export const EmbedLoomBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedLoomBlockPlainTextAdapterMatcher);

packages/affine/block-embed/src/embed-loom-block/index.ts

@@ -1,4 +1,4 @@
-export * from './adapters/markdown.js';
+export * from './adapters/index.js';
 export * from './embed-loom-block.js';
 export * from './embed-loom-model.js';
 export * from './embed-loom-service.js';

packages/affine/block-embed/src/embed-youtube-block/adapters/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown.js';
+export * from './plain-text.js';

packages/affine/block-embed/src/embed-youtube-block/adapters/plain-text.ts

@@ -0,0 +1,12 @@
+import { EmbedYoutubeBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedYoutubeBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(
+    EmbedYoutubeBlockSchema.model.flavour
+  );
+
+export const EmbedYoutubeBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedYoutubeBlockPlainTextAdapterMatcher);

packages/affine/block-embed/src/embed-youtube-block/index.ts

@@ -1,4 +1,4 @@
-export * from './adapters/markdown.js';
+export * from './adapters/index.js';
 export * from './embed-youtube-block.js';
 export * from './embed-youtube-model.js';
 export * from './embed-youtube-service.js';

packages/affine/block-embed/src/index.ts

@@ -21,6 +21,7 @@ export const EmbedExtensions: ExtensionType[] = [
 ].flat();
 
 export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdown.js';
+export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text.js';
 export { EmbedBlockComponent } from './common/embed-block-element.js';
 export { insertEmbedCard } from './common/insert-embed-card.js';
 export {

packages/blocks/src/__tests__/adapters/plain-text.unit.spec.ts

@@ -571,4 +571,105 @@ describe('snapshot to plain text', () => {
     });
     expect(target.file).toBe(plainText);
   });
+
+  describe('embed link block', () => {
+    const embedTestCases = [
+      {
+        name: 'bookmark',
+        flavour: 'affine:bookmark',
+        url: 'https://example.com',
+        title: 'example',
+        plainText: '[example](https://example.com)\n',
+      },
+      {
+        name: 'embed github',
+        flavour: 'affine:embed-github',
+        url: 'https://github.com/toeverything/blocksuite/pull/66666',
+        title: 'example github pr title',
+        plainText:
+          '[example github pr title](https://github.com/toeverything/blocksuite/pull/66666)\n',
+      },
+      {
+        name: 'embed figma',
+        flavour: 'affine:embed-figma',
+        url: 'https://www.figma.com/file/1234567890',
+        title: 'example figma title',
+        plainText:
+          '[example figma title](https://www.figma.com/file/1234567890)\n',
+      },
+      {
+        name: 'embed youtube',
+        flavour: 'affine:embed-youtube',
+        url: 'https://www.youtube.com/watch?v=1234567890',
+        title: 'example youtube title',
+        plainText:
+          '[example youtube title](https://www.youtube.com/watch?v=1234567890)\n',
+      },
+      {
+        name: 'embed loom',
+        flavour: 'affine:embed-loom',
+        url: 'https://www.loom.com/share/1234567890',
+        title: 'example loom title',
+        plainText:
+          '[example loom title](https://www.loom.com/share/1234567890)\n',
+      },
+    ];
+
+    for (const testCase of embedTestCases) {
+      test(testCase.name, 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: DEFAULT_NOTE_BACKGROUND_COLOR,
+                index: 'a0',
+                hidden: false,
+                displayMode: NoteDisplayMode.DocAndEdgeless,
+              },
+              children: [
+                {
+                  type: 'block',
+                  id: 'block:Bdn8Yvqcny',
+                  flavour: testCase.flavour,
+                  props: {
+                    url: testCase.url,
+                    title: testCase.title,
+                  },
+                  children: [],
+                },
+              ],
+            },
+          ],
+        };
+
+        const plainTextAdapter = new PlainTextAdapter(createJob());
+        const target = await plainTextAdapter.fromBlockSnapshot({
+          snapshot: blockSnapshot,
+        });
+        expect(target.file).toBe(testCase.plainText);
+      });
+    }
+  });
 });

packages/blocks/src/_common/adapters/plain-text/block-matcher.ts

@@ -1,6 +1,16 @@
 import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/block-std';
 
+import {
+  EmbedFigmaBlockPlainTextAdapterExtension,
+  embedFigmaBlockPlainTextAdapterMatcher,
+  EmbedGithubBlockPlainTextAdapterExtension,
+  embedGithubBlockPlainTextAdapterMatcher,
+  EmbedLoomBlockPlainTextAdapterExtension,
+  embedLoomBlockPlainTextAdapterMatcher,
+  EmbedYoutubeBlockPlainTextAdapterExtension,
+  embedYoutubeBlockPlainTextAdapterMatcher,
+} from '@blocksuite/affine-block-embed';
 import {
   ListBlockPlainTextAdapterExtension,
   listBlockPlainTextAdapterMatcher,
@@ -10,6 +20,10 @@ import {
   paragraphBlockPlainTextAdapterMatcher,
 } from '@blocksuite/affine-block-paragraph';
 
+import {
+  BookmarkBlockPlainTextAdapterExtension,
+  bookmarkBlockPlainTextAdapterMatcher,
+} from '../../../bookmark-block/adapters/plain-text.js';
 import {
   CodeBlockPlainTextAdapterExtension,
   codeBlockPlainTextAdapterMatcher,
@@ -25,11 +39,21 @@ export const defaultBlockPlainTextAdapterMatchers: BlockPlainTextAdapterMatcher[
     listBlockPlainTextAdapterMatcher,
     dividerBlockPlainTextAdapterMatcher,
     codeBlockPlainTextAdapterMatcher,
+    bookmarkBlockPlainTextAdapterMatcher,
+    embedFigmaBlockPlainTextAdapterMatcher,
+    embedGithubBlockPlainTextAdapterMatcher,
+    embedLoomBlockPlainTextAdapterMatcher,
+    embedYoutubeBlockPlainTextAdapterMatcher,
   ];
 
 export const BlockPlainTextAdapterExtensions: ExtensionType[] = [
   ParagraphBlockPlainTextAdapterExtension,
   ListBlockPlainTextAdapterExtension,
   DividerBlockPlainTextAdapterExtension,
   CodeBlockPlainTextAdapterExtension,
+  BookmarkBlockPlainTextAdapterExtension,
+  EmbedFigmaBlockPlainTextAdapterExtension,
+  EmbedGithubBlockPlainTextAdapterExtension,
+  EmbedLoomBlockPlainTextAdapterExtension,
+  EmbedYoutubeBlockPlainTextAdapterExtension,
 ];

packages/blocks/src/bookmark-block/adapters/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown.js';
+export * from './plain-text.js';

packages/blocks/src/bookmark-block/adapters/plain-text.ts

@@ -0,0 +1,9 @@
+import { createEmbedBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-embed';
+import { BookmarkBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+export const bookmarkBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(BookmarkBlockSchema.model.flavour);
+
+export const BookmarkBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(bookmarkBlockPlainTextAdapterMatcher);

packages/blocks/src/bookmark-block/index.ts

@@ -1,3 +1,3 @@
-export * from './adapters/markdown.js';
+export * from './adapters/index.js';
 export * from './bookmark-block.js';
 export * from './bookmark-service.js';