refactor(editor): extract code block (#9397)

blocksuite/affine/block-code/src/adapters/extension.ts

@@ -0,0 +1,13 @@
+import type { ExtensionType } from '@blocksuite/block-std';
+
+import { CodeBlockHtmlAdapterExtension } from './html.js';
+import { CodeBlockMarkdownAdapterExtension } from './markdown.js';
+import { CodeBlockNotionHtmlAdapterExtension } from './notion-html.js';
+import { CodeBlockPlainTextAdapterExtension } from './plain-text.js';
+
+export const CodeBlockAdapterExtensions: ExtensionType[] = [
+  CodeBlockHtmlAdapterExtension,
+  CodeBlockMarkdownAdapterExtension,
+  CodeBlockPlainTextAdapterExtension,
+  CodeBlockNotionHtmlAdapterExtension,
+];

blocksuite/affine/block-code/src/adapters/html.ts

@@ -0,0 +1,93 @@
+import { CodeBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockHtmlAdapterExtension,
+  type BlockHtmlAdapterMatcher,
+  HastUtils,
+} from '@blocksuite/affine-shared/adapters';
+import type { DeltaInsert } from '@blocksuite/inline';
+import { nanoid } from '@blocksuite/store';
+import { bundledLanguagesInfo, codeToHast } from 'shiki';
+
+export const codeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
+  flavour: CodeBlockSchema.model.flavour,
+  toMatch: o => HastUtils.isElement(o.node) && o.node.tagName === 'pre',
+  fromMatch: o => o.node.flavour === 'affine:code',
+  toBlockSnapshot: {
+    enter: (o, context) => {
+      if (!HastUtils.isElement(o.node)) {
+        return;
+      }
+      const code = HastUtils.querySelector(o.node, 'code');
+      if (!code) {
+        return;
+      }
+
+      const codeText =
+        code.children.length === 1 && code.children[0].type === 'text'
+          ? code.children[0]
+          : { ...code, tagName: 'div' };
+      let codeLang = Array.isArray(code.properties?.className)
+        ? code.properties.className.find(
+            className =>
+              typeof className === 'string' && className.startsWith('code-')
+          )
+        : undefined;
+      codeLang =
+        typeof codeLang === 'string'
+          ? codeLang.replace('code-', '')
+          : undefined;
+
+      const { walkerContext, deltaConverter } = context;
+      walkerContext
+        .openNode(
+          {
+            type: 'block',
+            id: nanoid(),
+            flavour: 'affine:code',
+            props: {
+              language: codeLang ?? 'Plain Text',
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: deltaConverter.astToDelta(codeText, {
+                  trim: false,
+                  pre: true,
+                }),
+              },
+            },
+            children: [],
+          },
+          'children'
+        )
+        .closeNode();
+      walkerContext.skipAllChildren();
+    },
+  },
+  fromBlockSnapshot: {
+    enter: async (o, context) => {
+      const { walkerContext } = context;
+      const rawLang = o.node.props.language as string | null;
+      const matchedLang = rawLang
+        ? (bundledLanguagesInfo.find(
+            info =>
+              info.id === rawLang ||
+              info.name === rawLang ||
+              info.aliases?.includes(rawLang)
+          )?.id ?? 'text')
+        : 'text';
+
+      const text = (o.node.props.text as Record<string, unknown>)
+        .delta as DeltaInsert[];
+      const code = text.map(delta => delta.insert).join('');
+      const hast = await codeToHast(code, {
+        lang: matchedLang,
+        theme: 'light-plus',
+      });
+
+      walkerContext.openNode(hast as never, 'children').closeNode();
+    },
+  },
+};
+
+export const CodeBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  codeBlockHtmlAdapterMatcher
+);

blocksuite/affine/block-code/src/adapters/index.ts

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

blocksuite/affine/block-code/src/adapters/markdown.ts

@@ -0,0 +1,70 @@
+import { CodeBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+  type MarkdownAST,
+} from '@blocksuite/affine-shared/adapters';
+import type { DeltaInsert } from '@blocksuite/inline';
+import { nanoid } from '@blocksuite/store';
+import type { Code } from 'mdast';
+
+const isCodeNode = (node: MarkdownAST): node is Code => node.type === 'code';
+
+export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
+  flavour: CodeBlockSchema.model.flavour,
+  toMatch: o => isCodeNode(o.node),
+  fromMatch: o => o.node.flavour === 'affine:code',
+  toBlockSnapshot: {
+    enter: (o, context) => {
+      if (!isCodeNode(o.node)) {
+        return;
+      }
+      const { walkerContext } = context;
+      walkerContext
+        .openNode(
+          {
+            type: 'block',
+            id: nanoid(),
+            flavour: 'affine:code',
+            props: {
+              language: o.node.lang ?? 'Plain Text',
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert: o.node.value,
+                  },
+                ],
+              },
+            },
+            children: [],
+          },
+          'children'
+        )
+        .closeNode();
+    },
+  },
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const text = (o.node.props.text ?? { delta: [] }) as {
+        delta: DeltaInsert[];
+      };
+      const { walkerContext } = context;
+      walkerContext
+        .openNode(
+          {
+            type: 'code',
+            lang: (o.node.props.language as string) ?? null,
+            meta: null,
+            value: text.delta.map(delta => delta.insert).join(''),
+          },
+          'children'
+        )
+        .closeNode();
+    },
+  },
+};
+
+export const CodeBlockMarkdownAdapterExtension = BlockMarkdownAdapterExtension(
+  codeBlockMarkdownAdapterMatcher
+);

blocksuite/affine/block-code/src/adapters/notion-html.ts

@@ -0,0 +1,56 @@
+import { CodeBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockNotionHtmlAdapterExtension,
+  type BlockNotionHtmlAdapterMatcher,
+  HastUtils,
+} from '@blocksuite/affine-shared/adapters';
+import { nanoid } from '@blocksuite/store';
+
+export const codeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
+  {
+    flavour: CodeBlockSchema.model.flavour,
+    toMatch: o => HastUtils.isElement(o.node) && o.node.tagName === 'pre',
+    fromMatch: () => false,
+    toBlockSnapshot: {
+      enter: (o, context) => {
+        if (!HastUtils.isElement(o.node)) {
+          return;
+        }
+        const code = HastUtils.querySelector(o.node, 'code');
+        if (!code) {
+          return;
+        }
+        const { walkerContext, deltaConverter } = context;
+        const codeText =
+          code.children.length === 1 && code.children[0].type === 'text'
+            ? code.children[0]
+            : { ...code, tag: 'div' };
+        walkerContext
+          .openNode(
+            {
+              type: 'block',
+              id: nanoid(),
+              flavour: CodeBlockSchema.model.flavour,
+              props: {
+                language: 'Plain Text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: deltaConverter.astToDelta(codeText, {
+                    trim: false,
+                    pre: true,
+                  }),
+                },
+              },
+              children: [],
+            },
+            'children'
+          )
+          .closeNode();
+        walkerContext.skipAllChildren();
+      },
+    },
+    fromBlockSnapshot: {},
+  };
+
+export const CodeBlockNotionHtmlAdapterExtension =
+  BlockNotionHtmlAdapterExtension(codeBlockNotionHtmlAdapterMatcher);

blocksuite/affine/block-code/src/adapters/plain-text.ts

@@ -0,0 +1,26 @@
+import { CodeBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockPlainTextAdapterExtension,
+  type BlockPlainTextAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+import type { DeltaInsert } from '@blocksuite/inline';
+
+export const codeBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher = {
+  flavour: CodeBlockSchema.model.flavour,
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === CodeBlockSchema.model.flavour,
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const text = (o.node.props.text ?? { delta: [] }) as {
+        delta: DeltaInsert[];
+      };
+      const buffer = text.delta.map(delta => delta.insert).join('');
+      context.textBuffer.content += buffer;
+      context.textBuffer.content += '\n';
+    },
+  },
+};
+
+export const CodeBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(codeBlockPlainTextAdapterMatcher);