From e363ba5f4f05593167b3c316698f00397f090785 Mon Sep 17 00:00:00 2001 From: flrande Date: Mon, 19 May 2025 18:15:55 +0800 Subject: [PATCH] feat(editor): support edgeless code block --- .../blocks/code/src/code-edgeless-block.ts | 13 +++++++++++++ blocksuite/affine/blocks/code/src/effects.ts | 2 ++ blocksuite/affine/blocks/code/src/view.ts | 6 +++++- .../affine/blocks/surface/src/surface-model.ts | 1 + .../affine/model/src/blocks/code/code-model.ts | 17 +++++++++++++++-- .../src/watchers/drag-event-watcher.ts | 6 ++++-- 6 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 blocksuite/affine/blocks/code/src/code-edgeless-block.ts diff --git a/blocksuite/affine/blocks/code/src/code-edgeless-block.ts b/blocksuite/affine/blocks/code/src/code-edgeless-block.ts new file mode 100644 index 0000000000..4a04734718 --- /dev/null +++ b/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; + } +} diff --git a/blocksuite/affine/blocks/code/src/effects.ts b/blocksuite/affine/blocks/code/src/effects.ts index 403131c34c..9436e79944 100644 --- a/blocksuite/affine/blocks/code/src/effects.ts +++ b/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); } diff --git a/blocksuite/affine/blocks/code/src/view.ts b/blocksuite/affine/blocks/code/src/view.ts index eab094fd3b..3e15caa868 100644 --- a/blocksuite/affine/blocks/code/src/view.ts +++ b/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(), diff --git a/blocksuite/affine/blocks/surface/src/surface-model.ts b/blocksuite/affine/blocks/surface/src/surface-model.ts index a789debf9a..f6b24e0eaf 100644 --- a/blocksuite/affine/blocks/surface/src/surface-model.ts +++ b/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 => diff --git a/blocksuite/affine/model/src/blocks/code/code-model.ts b/blocksuite/affine/model/src/blocks/code/code-model.ts index abb7f24739..8da15601af 100644 --- a/blocksuite/affine/model/src/blocks/code/code-model.ts +++ b/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 {} +export class CodeBlockModel + extends GfxCompatible(BlockModel) + implements GfxElementGeometry {} diff --git a/blocksuite/affine/widgets/drag-handle/src/watchers/drag-event-watcher.ts b/blocksuite/affine/widgets/drag-handle/src/watchers/drag-event-watcher.ts index 74ac7bb159..f7fedc7854 100644 --- a/blocksuite/affine/widgets/drag-handle/src/watchers/drag-event-watcher.ts +++ b/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,