feat(editor): support edgeless code block

blocksuite/affine/blocks/code/src/code-edgeless-block.ts

@@ -0,0 +1,13 @@
+import { toGfxBlockComponent } from '@blocksuite/std';
+
+import { CodeBlockComponent } from './code-block.js';
+
+export class CodeEdgelessBlockComponent extends toGfxBlockComponent(
+  CodeBlockComponent
+) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-edgeless-code': CodeEdgelessBlockComponent;
+  }
+}

blocksuite/affine/blocks/code/src/effects.ts

@@ -1,4 +1,5 @@
 import { CodeBlockComponent } from './code-block';
+import { CodeEdgelessBlockComponent } from './code-edgeless-block';
 import {
   AFFINE_CODE_TOOLBAR_WIDGET,
   AffineCodeToolbarWidget,
@@ -14,6 +15,7 @@ export function effects() {
   customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
   customElements.define('affine-code-unit', AffineCodeUnit);
   customElements.define('affine-code', CodeBlockComponent);
+  customElements.define('affine-edgeless-code', CodeEdgelessBlockComponent);
   customElements.define('preview-button', PreviewButton);
 }
 

blocksuite/affine/blocks/code/src/view.ts

@@ -41,7 +41,11 @@ export class CodeBlockViewExtension extends ViewExtensionProvider {
     context.register([
       FlavourExtension('affine:code'),
       CodeBlockHighlighter,
-      BlockViewExtension('affine:code', literal`affine-code`),
+      BlockViewExtension('affine:code', model => {
+        return model.parent?.flavour === 'affine:surface'
+          ? literal`affine-edgeless-code`
+          : literal`affine-code`;
+      }),
       SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
       CodeKeymapExtension,
       ...getCodeClipboardExtensions(),

blocksuite/affine/blocks/surface/src/surface-model.ts

@@ -28,6 +28,7 @@ export const SurfaceBlockSchema = defineBlockSchema({
       'affine:attachment',
       'affine:embed-*',
       'affine:edgeless-text',
+      'affine:code',
     ],
   },
   transformer: transformerConfigs =>

blocksuite/affine/model/src/blocks/code/code-model.ts

@@ -1,3 +1,8 @@
+import {
+  type GfxCommonBlockProps,
+  GfxCompatible,
+  type GfxElementGeometry,
+} from '@blocksuite/std/gfx';
 import {
   BlockModel,
   BlockSchemaExtension,
@@ -14,7 +19,8 @@ type CodeBlockProps = {
   caption: string;
   preview?: boolean;
   lineNumber?: boolean;
-} & BlockMeta;
+} & BlockMeta &
+  GfxCommonBlockProps;
 
 export const CodeBlockSchema = defineBlockSchema({
   flavour: 'affine:code',
@@ -30,6 +36,10 @@ export const CodeBlockSchema = defineBlockSchema({
       'meta:createdBy': undefined,
       'meta:updatedAt': undefined,
       'meta:updatedBy': undefined,
+      xywh: '[0,0,16,16]',
+      index: 'a0',
+      scale: 1,
+      rotate: 0,
     }) as CodeBlockProps,
   metadata: {
     version: 1,
@@ -39,6 +49,7 @@ export const CodeBlockSchema = defineBlockSchema({
       'affine:paragraph',
       'affine:list',
       'affine:edgeless-text',
+      'affine:surface',
     ],
     children: [],
   },
@@ -47,4 +58,6 @@ export const CodeBlockSchema = defineBlockSchema({
 
 export const CodeBlockSchemaExtension = BlockSchemaExtension(CodeBlockSchema);
 
-export class CodeBlockModel extends BlockModel<CodeBlockProps> {}
+export class CodeBlockModel
+  extends GfxCompatible<CodeBlockProps>(BlockModel)
+  implements GfxElementGeometry {}

blocksuite/affine/widgets/drag-handle/src/watchers/drag-event-watcher.ts

@@ -1087,7 +1087,8 @@ export class DragEventWatcher {
         } else if (
           block.flavour === 'affine:attachment' ||
           block.flavour === 'affine:bookmark' ||
-          block.flavour.startsWith('affine:embed-')
+          block.flavour.startsWith('affine:embed-') ||
+          block.flavour === 'affine:code'
         ) {
           const style = (block.props.style ?? 'vertical') as EmbedCardStyle;
           block.props.style = style;
@@ -1173,7 +1174,8 @@ export class DragEventWatcher {
                   block.flavour === 'affine:image' ||
                   block.flavour === 'affine:attachment' ||
                   block.flavour === 'affine:bookmark' ||
-                  block.flavour.startsWith('affine:embed-')
+                  block.flavour.startsWith('affine:embed-') ||
+                  block.flavour === 'affine:code'
                 ) {
                   store.updateBlock(block.id, {
                     xywh: content[idx].props.xywh,