feat(editor): callout and code extension (#11827)

Closes: BS-3243
Closes: BS-3190

blocksuite/affine/blocks/callout/package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-inline-preset": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
@@ -34,7 +35,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
   },
   "files": [
     "src",

blocksuite/affine/blocks/callout/src/store.ts

@@ -0,0 +1,14 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { CalloutBlockSchemaExtension } from '@blocksuite/affine-model';
+
+export default class CalloutStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-callout-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(CalloutBlockSchemaExtension);
+  }
+}

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

@@ -0,0 +1,30 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
+import { literal } from 'lit/static-html.js';
+
+import { CalloutKeymapExtension } from './callout-keymap';
+import { calloutSlashMenuConfig } from './configs/slash-menu';
+import { effects } from './effects';
+
+export default class CalloutViewExtension extends ViewExtensionProvider {
+  override name = 'affine-callout-block';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([
+      FlavourExtension('affine:callout'),
+      BlockViewExtension('affine:callout', literal`affine-callout`),
+      CalloutKeymapExtension,
+      SlashMenuConfigExtension('affine:callout', calloutSlashMenuConfig),
+    ]);
+  }
+}

blocksuite/affine/blocks/callout/tsconfig.json

@@ -8,6 +8,7 @@
   "include": ["./src"],
   "references": [
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../inlines/preset" },
     { "path": "../../model" },
     { "path": "../../rich-text" },

blocksuite/affine/blocks/code/package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
@@ -37,7 +38,9 @@
   "exports": {
     ".": "./src/index.ts",
     "./effects": "./src/effects.ts",
-    "./turbo-painter": "./src/turbo/code-painter.worker.ts"
+    "./turbo-painter": "./src/turbo/code-painter.worker.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
   },
   "files": [
     "src",

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

@@ -0,0 +1,17 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { CodeBlockSchemaExtension } from '@blocksuite/affine-model';
+
+import { CodeBlockAdapterExtensions } from './adapters/extension';
+
+export default class CodeStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-code-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(CodeBlockSchemaExtension);
+    context.register(CodeBlockAdapterExtensions);
+  }
+}

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

@@ -0,0 +1,54 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
+import {
+  BlockViewExtension,
+  FlavourExtension,
+  WidgetViewExtension,
+} from '@blocksuite/std';
+import { literal, unsafeStatic } from 'lit/static-html.js';
+
+import { getCodeClipboardExtensions } from './clipboard/index.js';
+import {
+  CodeBlockInlineManagerExtension,
+  CodeBlockUnitSpecExtension,
+} from './code-block-inline.js';
+import { CodeBlockHighlighter } from './code-block-service.js';
+import { CodeKeymapExtension } from './code-keymap.js';
+import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
+import { codeSlashMenuConfig } from './configs/slash-menu.js';
+import { effects } from './effects.js';
+
+export const codeToolbarWidget = WidgetViewExtension(
+  'affine:code',
+  AFFINE_CODE_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_CODE_TOOLBAR_WIDGET)}`
+);
+
+export default class CodeBlockViewExtension extends ViewExtensionProvider {
+  override name = 'affine-code-block';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([
+      FlavourExtension('affine:code'),
+      CodeBlockHighlighter,
+      BlockViewExtension('affine:code', literal`affine-code`),
+      codeToolbarWidget,
+      SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
+      CodeKeymapExtension,
+      ...getCodeClipboardExtensions(),
+    ]);
+    context.register([
+      CodeBlockInlineManagerExtension,
+      CodeBlockUnitSpecExtension,
+    ]);
+  }
+}

blocksuite/affine/blocks/code/tsconfig.json

@@ -8,6 +8,7 @@
   "include": ["./src"],
   "references": [
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../gfx/turbo-renderer" },
     { "path": "../../inlines/latex" },
     { "path": "../../inlines/link" },

tools/utils/src/workspace.gen.ts

@@ -100,6 +100,7 @@ export const PackageList = [
     name: '@blocksuite/affine-block-callout',
     workspaceDependencies: [
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/inlines/preset',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
@@ -115,6 +116,7 @@ export const PackageList = [
     name: '@blocksuite/affine-block-code',
     workspaceDependencies: [
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/gfx/turbo-renderer',
       'blocksuite/affine/inlines/latex',
       'blocksuite/affine/inlines/link',

yarn.lock

@@ -2426,6 +2426,7 @@ __metadata:
   resolution: "@blocksuite/affine-block-callout@workspace:blocksuite/affine/blocks/callout"
   dependencies:
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-inline-preset": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
@@ -2454,6 +2455,7 @@ __metadata:
   resolution: "@blocksuite/affine-block-code@workspace:blocksuite/affine/blocks/code"
   dependencies:
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*"
     "@blocksuite/affine-inline-latex": "workspace:*"
     "@blocksuite/affine-inline-link": "workspace:*"