fix(core): wrap code in ai chat (#10108)

[BS-2540](https://linear.app/affine-design/issue/BS-2540/ai-chat-中-code-block-需要默认换行)

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

@@ -2,6 +2,7 @@ import { CodeBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockHtmlAdapterExtension,
   type BlockHtmlAdapterMatcher,
+  CODE_BLOCK_WRAP_KEY,
   HastUtils,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/inline';
@@ -37,7 +38,8 @@ export const codeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
           ? codeLang.replace('code-', '')
           : undefined;
 
-      const { walkerContext, deltaConverter } = context;
+      const { walkerContext, deltaConverter, configs } = context;
+      const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
       walkerContext
         .openNode(
           {
@@ -46,6 +48,7 @@ export const codeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
             flavour: 'affine:code',
             props: {
               language: codeLang ?? 'Plain Text',
+              wrap,
               text: {
                 '$blocksuite:internal:text$': true,
                 delta: deltaConverter.astToDelta(codeText, {

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

@@ -2,6 +2,7 @@ import { CodeBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
+  CODE_BLOCK_WRAP_KEY,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/inline';
@@ -19,7 +20,8 @@ export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
       if (!isCodeNode(o.node)) {
         return;
       }
-      const { walkerContext } = context;
+      const { walkerContext, configs } = context;
+      const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
       walkerContext
         .openNode(
           {
@@ -28,6 +30,7 @@ export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
             flavour: 'affine:code',
             props: {
               language: o.node.lang ?? 'Plain Text',
+              wrap,
               text: {
                 '$blocksuite:internal:text$': true,
                 delta: [

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

@@ -2,6 +2,7 @@ import { CodeBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockNotionHtmlAdapterExtension,
   type BlockNotionHtmlAdapterMatcher,
+  CODE_BLOCK_WRAP_KEY,
   HastUtils,
 } from '@blocksuite/affine-shared/adapters';
 import { nanoid } from '@blocksuite/store';
@@ -20,7 +21,8 @@ export const codeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
         if (!code) {
           return;
         }
-        const { walkerContext, deltaConverter } = context;
+        const { walkerContext, deltaConverter, configs } = context;
+        const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
         const codeText =
           code.children.length === 1 && code.children[0].type === 'text'
             ? code.children[0]
@@ -33,6 +35,7 @@ export const codeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
               flavour: CodeBlockSchema.model.flavour,
               props: {
                 language: 'Plain Text',
+                wrap,
                 text: {
                   '$blocksuite:internal:text$': true,
                   delta: deltaConverter.astToDelta(codeText, {

blocksuite/affine/shared/src/adapters/middlewares/code.ts

@@ -0,0 +1,11 @@
+import type { TransformerMiddleware } from '@blocksuite/store';
+
+export const CODE_BLOCK_WRAP_KEY = 'codeBlockWrap';
+
+export const codeBlockWrapMiddleware = (
+  wrap: boolean
+): TransformerMiddleware => {
+  return ({ adapterConfigs }) => {
+    adapterConfigs.set(CODE_BLOCK_WRAP_KEY, String(wrap));
+  };
+};

blocksuite/affine/shared/src/adapters/middlewares/index.ts

@@ -1,2 +1,3 @@
+export * from './code';
 export * from './copy';
 export * from './paste';

blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts

@@ -1980,6 +1980,7 @@ describe('html to snapshot', () => {
           flavour: 'affine:code',
           props: {
             language: 'python',
+            wrap: false,
             text: {
               '$blocksuite:internal:text$': true,
               delta: [

blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts

@@ -2481,6 +2481,7 @@ describe('markdown to snapshot', () => {
           flavour: 'affine:code',
           props: {
             language: 'python',
+            wrap: false,
             text: {
               '$blocksuite:internal:text$': true,
               delta: [
@@ -2526,6 +2527,7 @@ describe('markdown to snapshot', () => {
               flavour: 'affine:code',
               props: {
                 language: 'python',
+                wrap: false,
                 text: {
                   '$blocksuite:internal:text$': true,
                   delta: [
@@ -2577,6 +2579,7 @@ describe('markdown to snapshot', () => {
               flavour: 'affine:code',
               props: {
                 language: 'python',
+                wrap: false,
                 text: {
                   '$blocksuite:internal:text$': true,
                   delta: [
@@ -2628,6 +2631,7 @@ describe('markdown to snapshot', () => {
               flavour: 'affine:code',
               props: {
                 language: 'python',
+                wrap: false,
                 text: {
                   '$blocksuite:internal:text$': true,
                   delta: [

blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts

@@ -51,6 +51,7 @@ describe('notion html to snapshot', () => {
           flavour: 'affine:code',
           props: {
             language: 'Plain Text',
+            wrap: false,
             text: {
               '$blocksuite:internal:text$': true,
               delta: [

blocksuite/blocks/src/index.ts

@@ -102,6 +102,7 @@ export {
   AttachmentAdapter,
   AttachmentAdapterFactoryExtension,
   AttachmentAdapterFactoryIdentifier,
+  codeBlockWrapMiddleware,
   FetchUtils,
   HtmlAdapter,
   HtmlAdapterFactoryExtension,

packages/frontend/core/src/blocksuite/presets/_common/components/text-renderer.ts

@@ -9,7 +9,9 @@ import type {
 } from '@blocksuite/affine/blocks';
 import {
   CodeBlockComponent,
+  codeBlockWrapMiddleware,
   defaultBlockMarkdownAdapterMatchers,
+  defaultImageProxyMiddleware,
   DividerBlockComponent,
   InlineDeltaToMarkdownAdapterExtensions,
   ListBlockComponent,
@@ -213,12 +215,12 @@ export class TextRenderer extends WithDisposable(ShadowlessElement) {
         provider = container.provider();
       }
       if (latestAnswer && schema) {
-        markDownToDoc(
-          provider,
-          schema,
-          latestAnswer,
-          this.options.additionalMiddlewares
-        )
+        const middlewares = [
+          defaultImageProxyMiddleware,
+          codeBlockWrapMiddleware(true),
+          ...(this.options.additionalMiddlewares ?? []),
+        ];
+        markDownToDoc(provider, schema, latestAnswer, middlewares)
           .then(doc => {
             this.disposeDoc();
             this._doc = doc.doc.getStore({

packages/frontend/core/src/blocksuite/presets/_common/utils/markdown-utils.ts

@@ -206,17 +206,13 @@ export async function markDownToDoc(
   provider: ServiceProvider,
   schema: Schema,
   answer: string,
-  additionalMiddlewares?: TransformerMiddleware[]
+  middlewares?: TransformerMiddleware[]
 ) {
   // Should not create a new doc in the original collection
   const collection = new WorkspaceImpl({
     schema,
   });
   collection.meta.initialize();
-  const middlewares = [defaultImageProxyMiddleware];
-  if (additionalMiddlewares) {
-    middlewares.push(...additionalMiddlewares);
-  }
   const transformer = new Transformer({
     schema: collection.schema,
     blobCRUD: collection.blobSync,

packages/frontend/core/src/blocksuite/presets/ai/utils/editor-actions.ts

@@ -7,6 +7,7 @@ import {
 } from '@blocksuite/affine/block-std';
 import type { AffineAIPanelWidget } from '@blocksuite/affine/blocks';
 import {
+  defaultImageProxyMiddleware,
   deleteTextCommand,
   isInsideEdgelessEditor,
 } from '@blocksuite/affine/blocks';
@@ -151,7 +152,8 @@ export const copyText = async (host: EditorHost, text: string) => {
   const previewDoc = await markDownToDoc(
     host.std.provider,
     host.std.store.schema,
-    text
+    text,
+    [defaultImageProxyMiddleware]
   );
   const models = previewDoc
     .getBlocksByFlavour('affine:note')