feat(blocks): support embed linked doc and synced doc html block adap…

…ter (#8907) [BS-2063](https://linear.app/affine-design/issue/BS-2063/补齐-embed-linked-and-synced-doc-html-block-adapter)
toeverything · Dec 9, 2024 · 0c26cad · 0c26cad
1 parent aaf7756
commit 0c26cad
Show file tree

Hide file tree

Showing 16 changed files with 719 additions and 44 deletions.
diff --git a/packages/affine/block-embed/src/common/adapters/utils.ts b/packages/affine/block-embed/src/common/adapters/utils.ts
@@ -0,0 +1,14 @@
+import type { ReferenceParams } from '@blocksuite/affine-model';
+
+import { toURLSearchParams } from '@blocksuite/affine-shared/adapters';
+
+export function generateDocUrl(
+  docBaseUrl: string,
+  pageId: string,
+  params: ReferenceParams
+) {
+  const search = toURLSearchParams(params);
+  const query = search?.size ? `?${search.toString()}` : '';
+  const url = docBaseUrl ? `${docBaseUrl}/${pageId}${query}` : '';
+  return url;
+}
diff --git a/packages/affine/block-embed/src/embed-linked-doc-block/adapters/html.ts b/packages/affine/block-embed/src/embed-linked-doc-block/adapters/html.ts
@@ -0,0 +1,64 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockHtmlAdapterExtension,
+  type BlockHtmlAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
+  flavour: EmbedLinkedDocBlockSchema.model.flavour,
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const { configs, walkerContext } = context;
+      // Parse as link
+      if (!o.node.props.pageId) {
+        return;
+      }
+      const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+      const url = generateDocUrl(
+        configs.get('docLinkBaseUrl') ?? '',
+        String(o.node.props.pageId),
+        o.node.props.params ?? Object.create(null)
+      );
+
+      walkerContext
+        .openNode(
+          {
+            type: 'element',
+            tagName: 'div',
+            properties: {
+              className: ['affine-paragraph-block-container'],
+            },
+            children: [],
+          },
+          'children'
+        )
+        .openNode(
+          {
+            type: 'element',
+            tagName: 'a',
+            properties: {
+              href: url,
+            },
+            children: [
+              {
+                type: 'text',
+                value: title,
+              },
+            ],
+          },
+          'children'
+        )
+        .closeNode()
+        .closeNode();
+    },
+  },
+};
+
+export const EmbedLinkedDocHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedLinkedDocBlockHtmlAdapterMatcher
+);
diff --git a/packages/affine/block-embed/src/embed-linked-doc-block/adapters/index.ts b/packages/affine/block-embed/src/embed-linked-doc-block/adapters/index.ts
@@ -1,2 +1,3 @@
+export * from './html.js';
 export * from './markdown.js';
 export * from './plain-text.js';
diff --git a/packages/affine/block-embed/src/embed-linked-doc-block/adapters/markdown.ts b/packages/affine/block-embed/src/embed-linked-doc-block/adapters/markdown.ts
@@ -2,9 +2,10 @@ import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
-  toURLSearchParams,
 } from '@blocksuite/affine-shared/adapters';
 
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
 export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
   {
     flavour: EmbedLinkedDocBlockSchema.model.flavour,
@@ -19,11 +20,11 @@ export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatc
           return;
         }
         const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
-        const params = o.node.props.params ?? {};
-        const search = toURLSearchParams(params);
-        const query = search?.size ? `?${search.toString()}` : '';
-        const baseUrl = configs.get('docLinkBaseUrl') ?? '';
-        const url = baseUrl ? `${baseUrl}/${o.node.props.pageId}${query}` : '';
+        const url = generateDocUrl(
+          configs.get('docLinkBaseUrl') ?? '',
+          String(o.node.props.pageId),
+          o.node.props.params ?? Object.create(null)
+        );
         walkerContext
           .openNode(
             {

diff --git a/packages/affine/block-embed/src/embed-linked-doc-block/adapters/plain-text.ts b/packages/affine/block-embed/src/embed-linked-doc-block/adapters/plain-text.ts
@@ -2,9 +2,10 @@ import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockPlainTextAdapterExtension,
   type BlockPlainTextAdapterMatcher,
-  toURLSearchParams,
 } from '@blocksuite/affine-shared/adapters';
 
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
 export const embedLinkedDocBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
   {
     flavour: EmbedLinkedDocBlockSchema.model.flavour,
@@ -19,11 +20,11 @@ export const embedLinkedDocBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMa
           return;
         }
         const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
-        const params = o.node.props.params ?? {};
-        const search = toURLSearchParams(params);
-        const query = search?.size ? `?${search.toString()}` : '';
-        const baseUrl = configs.get('docLinkBaseUrl') ?? '';
-        const url = baseUrl ? `${baseUrl}/${o.node.props.pageId}${query}` : '';
+        const url = generateDocUrl(
+          configs.get('docLinkBaseUrl') ?? '',
+          String(o.node.props.pageId),
+          o.node.props.params ?? Object.create(null)
+        );
         textBuffer.content += `${title}: ${url}\n`;
       },
     },

diff --git a/packages/affine/block-embed/src/embed-synced-doc-block/adapters/html.ts b/packages/affine/block-embed/src/embed-synced-doc-block/adapters/html.ts
@@ -0,0 +1,88 @@
+import { EmbedSyncedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockHtmlAdapterExtension,
+  type BlockHtmlAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+export const embedSyncedDocBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
+  flavour: EmbedSyncedDocBlockSchema.model.flavour,
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === EmbedSyncedDocBlockSchema.model.flavour,
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: async (o, context) => {
+      const { configs, walker, walkerContext, job } = context;
+      const type = configs.get('embedSyncedDocExportType');
+
+      // this context is used for nested sync block
+      if (
+        walkerContext.getGlobalContext('embed-synced-doc-counter') === undefined
+      ) {
+        walkerContext.setGlobalContext('embed-synced-doc-counter', 0);
+      }
+      let counter = walkerContext.getGlobalContext(
+        'embed-synced-doc-counter'
+      ) as number;
+      walkerContext.setGlobalContext('embed-synced-doc-counter', ++counter);
+
+      if (type === 'content') {
+        const syncedDocId = o.node.props.pageId as string;
+        const syncedDoc = job.collection.getDoc(syncedDocId);
+        walkerContext.setGlobalContext('hast:html-root-doc', false);
+        if (!syncedDoc) return;
+
+        if (counter === 1) {
+          const syncedSnapshot = await job.docToSnapshot(syncedDoc);
+          if (syncedSnapshot) {
+            await walker.walkONode(syncedSnapshot.blocks);
+          }
+        } else {
+          walkerContext
+            .openNode(
+              {
+                type: 'element',
+                tagName: 'div',
+                properties: {
+                  className: ['affine-paragraph-block-container'],
+                },
+                children: [],
+              },
+              'children'
+            )
+            .openNode(
+              {
+                type: 'element',
+                tagName: 'p',
+                properties: {},
+                children: [
+                  { type: 'text', value: syncedDoc.meta?.title ?? '' },
+                ],
+              },
+              'children'
+            )
+            .closeNode()
+            .closeNode();
+        }
+      }
+    },
+    leave: (_, context) => {
+      const { walkerContext } = context;
+      const counter = walkerContext.getGlobalContext(
+        'embed-synced-doc-counter'
+      ) as number;
+      const currentCounter = counter - 1;
+      walkerContext.setGlobalContext(
+        'embed-synced-doc-counter',
+        currentCounter
+      );
+      // When leave the last embed synced doc block, we need to set the html root doc context to true
+      walkerContext.setGlobalContext(
+        'hast:html-root-doc',
+        currentCounter === 0
+      );
+    },
+  },
+};
+
+export const EmbedSyncedDocBlockHtmlAdapterExtension =
+  BlockHtmlAdapterExtension(embedSyncedDocBlockHtmlAdapterMatcher);
diff --git a/packages/affine/block-embed/src/embed-synced-doc-block/adapters/index.ts b/packages/affine/block-embed/src/embed-synced-doc-block/adapters/index.ts
@@ -1,2 +1,3 @@
+export * from './html.js';
 export * from './markdown.js';
 export * from './plain-text.js';
diff --git a/packages/affine/block-embed/src/embed-synced-doc-block/adapters/markdown.ts b/packages/affine/block-embed/src/embed-synced-doc-block/adapters/markdown.ts
@@ -60,5 +60,5 @@ export const embedSyncedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatc
     },
   };
 
-export const EmbedSyncedDocMarkdownAdapterExtension =
+export const EmbedSyncedDocBlockMarkdownAdapterExtension =
   BlockMarkdownAdapterExtension(embedSyncedDocBlockMarkdownAdapterMatcher);
diff --git a/packages/affine/block-embed/src/index.ts b/packages/affine/block-embed/src/index.ts
@@ -23,6 +23,7 @@ export const EmbedExtensions: ExtensionType[] = [
 export { createEmbedBlockHtmlAdapterMatcher } from './common/adapters/html.js';
 export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdown.js';
 export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text.js';
+export { generateDocUrl } from './common/adapters/utils.js';
 export { EmbedBlockComponent } from './common/embed-block-element.js';
 export { insertEmbedCard } from './common/insert-embed-card.js';
 export {