feat(editor): mindmap gfx extension (#11936)

Closes: BS-3209

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced mind map view and store extensions, enhancing mind map integration and conversion to plain text and markdown formats.
  - Added priority property to quick tools, allowing for custom ordering in the toolbar.
- **Improvements**
  - Toolbar quick tools are now sorted by priority for a more intuitive user experience.
  - Updated toolbar and extension configurations to streamline available tools and extensions.
- **Bug Fixes**
  - Conditional registration of certain components ensures correct behavior in edgeless mode.
- **Chores**
  - Updated dependencies and project references to improve module integration and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -180,8 +180,11 @@
     "./gfx/shape": "./src/gfx/shape/index.ts",
     "./gfx/shape/store": "./src/gfx/shape/store.ts",
     "./gfx/shape/view": "./src/gfx/shape/view.ts",
-    "./gfx/note": "./src/gfx/note.ts",
+    "./gfx/note": "./src/gfx/note/index.ts",
-    "./gfx/mindmap": "./src/gfx/mindmap.ts",
+    "./gfx/note/view": "./src/gfx/note/view.ts",
+    "./gfx/mindmap": "./src/gfx/mindmap/index.ts",
+    "./gfx/mindmap/store": "./src/gfx/mindmap/store.ts",
+    "./gfx/mindmap/view": "./src/gfx/mindmap/view.ts",
     "./gfx/connector": "./src/gfx/connector.ts",
     "./gfx/group": "./src/gfx/group.ts",
     "./gfx/template": "./src/gfx/template.ts",

blocksuite/affine/all/src/extensions/store.ts

@@ -16,6 +16,7 @@ import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/stor
 import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
 import { TableStoreExtension } from '@blocksuite/affine-block-table/store';
 import { BrushStoreExtension } from '@blocksuite/affine-gfx-brush/store';
+import { MindmapStoreExtension } from '@blocksuite/affine-gfx-mindmap/store';
 import { ShapeStoreExtension } from '@blocksuite/affine-gfx-shape/store';
 import { FootnoteStoreExtension } from '@blocksuite/affine-inline-footnote/store';
 import { LatexStoreExtension as InlineLatexStoreExtension } from '@blocksuite/affine-inline-latex/store';
@@ -53,6 +54,7 @@ export function getInternalStoreExtensions() {
 
     BrushStoreExtension,
     ShapeStoreExtension,
+    MindmapStoreExtension,
 
     MigratingStoreExtension,
   ];

blocksuite/affine/all/src/extensions/view.ts

@@ -16,6 +16,7 @@ import { ParagraphViewExtension } from '@blocksuite/affine-block-paragraph/view'
 import { SurfaceRefViewExtension } from '@blocksuite/affine-block-surface-ref/view';
 import { TableViewExtension } from '@blocksuite/affine-block-table/view';
 import { BrushViewExtension } from '@blocksuite/affine-gfx-brush/view';
+import { MindmapViewExtension } from '@blocksuite/affine-gfx-mindmap/view';
 import { NoteViewExtension as GfxNoteViewExtension } from '@blocksuite/affine-gfx-note/view';
 import { ShapeViewExtension } from '@blocksuite/affine-gfx-shape/view';
 import { FootnoteViewExtension } from '@blocksuite/affine-inline-footnote/view';
@@ -32,7 +33,7 @@ export function getInternalViewExtensions() {
     GfxNoteViewExtension,
     BrushViewExtension,
     ShapeViewExtension,
-    // mind
+    MindmapViewExtension,
     // template
 
     // Block

blocksuite/affine/all/src/gfx/mindmap/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-mindmap/store';

blocksuite/affine/all/src/gfx/mindmap/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-mindmap/view';

blocksuite/affine/blocks/edgeless-text/src/view.ts

@@ -5,6 +5,7 @@ import {
 import { BlockViewExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
+import { edgelessTextToolbarExtension } from './edgeless-toolbar';
 import { effects } from './effects';
 
 export class EdgelessTextViewExtension extends ViewExtensionProvider {
@@ -26,6 +27,7 @@ export class EdgelessTextViewExtension extends ViewExtensionProvider {
           literal`affine-edgeless-text`
         ),
       ]);
+      context.register(edgelessTextToolbarExtension);
     }
   }
 }

blocksuite/affine/blocks/frame/src/edgeless-toolbar/quick-tool.ts

@@ -11,5 +11,6 @@ export const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
     ></edgeless-frame-tool-button>`,
     menu: buildFrameDenseMenu(block, gfx),
     enable: !block.doc.readonly,
+    priority: 90,
   };
 });

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

@@ -3,10 +3,12 @@ import {
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
 
+import { frameQuickTool } from './edgeless-toolbar';
 import { effects } from './effects';
 import { FrameHighlightManager } from './frame-highlight-manager';
 import { FrameBlockSpec } from './frame-spec';
 import { FrameTool } from './frame-tool';
+import { frameToolbarExtension } from './frame-toolbar';
 import { PresentTool } from './preset-tool';
 
 export class FrameViewExtension extends ViewExtensionProvider {
@@ -24,6 +26,8 @@ export class FrameViewExtension extends ViewExtensionProvider {
       context.register(FrameHighlightManager);
       context.register(FrameTool);
       context.register(PresentTool);
+      context.register(frameQuickTool);
+      context.register(frameToolbarExtension);
     }
   }
 }

blocksuite/affine/blocks/root/src/common-specs/index.ts

@@ -7,10 +7,6 @@ import {
   GroupElementRendererExtension,
   GroupElementView,
 } from '@blocksuite/affine-gfx-group';
-import {
-  MindmapElementRendererExtension,
-  MindMapView,
-} from '@blocksuite/affine-gfx-mindmap';
 import {
   TextElementRendererExtension,
   TextElementView,
@@ -48,7 +44,6 @@ import { viewportOverlayWidget } from './widgets';
  */
 const EdgelessElementViews = [
   ConnectorElementView,
-  MindMapView,
   GroupElementView,
   TextElementView,
 ];
@@ -57,7 +52,6 @@ export const EdgelessElementRendererExtension: ExtensionType[] = [
   TextElementRendererExtension,
   ConnectorElementRendererExtension,
   GroupElementRendererExtension,
-  MindmapElementRendererExtension,
 ];
 
 export const CommonSpecs: ExtensionType[] = [

blocksuite/affine/blocks/root/src/edgeless/components/toolbar/tools.ts

@@ -1,6 +1,4 @@
-import { frameQuickTool } from '@blocksuite/affine-block-frame';
 import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
-import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
 import { templateSeniorTool } from '@blocksuite/affine-gfx-template';
 import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
@@ -9,6 +7,7 @@ import { buildLinkDenseMenu } from './link/link-dense-menu.js';
 
 const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
   return {
+    priority: 100,
     type: 'default',
     content: html`<edgeless-default-tool-button
       .edgeless=${block}
@@ -25,11 +24,6 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   };
 });
 
-export const quickTools = [
+export const quickTools = [defaultQuickTool, connectorQuickTool, linkQuickTool];
-  defaultQuickTool,
-  frameQuickTool,
-  connectorQuickTool,
-  linkQuickTool,
-];
 
-export const seniorTools = [mindMapSeniorTool, templateSeniorTool];
+export const seniorTools = [templateSeniorTool];

blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/index.ts

@@ -1,12 +1,5 @@
-import { edgelessTextToolbarExtension } from '@blocksuite/affine-block-edgeless-text';
-import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
 import { connectorToolbarExtension } from '@blocksuite/affine-gfx-connector';
 import { groupToolbarExtension } from '@blocksuite/affine-gfx-group';
-import {
-  mindmapToolbarExtension,
-  shapeMindmapToolbarExtension,
-} from '@blocksuite/affine-gfx-mindmap';
-import { shapeToolbarExtension } from '@blocksuite/affine-gfx-shape';
 import { textToolbarExtension } from '@blocksuite/affine-gfx-text';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/std';
@@ -15,22 +8,12 @@ import type { ExtensionType } from '@blocksuite/store';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
-  frameToolbarExtension,
-
   groupToolbarExtension,
 
   connectorToolbarExtension,
 
-  shapeToolbarExtension,
-
-  shapeMindmapToolbarExtension,
-
-  mindmapToolbarExtension,
-
   textToolbarExtension,
 
-  edgelessTextToolbarExtension,
-
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:*'),
     config: builtinMiscToolbarConfig,

blocksuite/affine/blocks/root/src/edgeless/edgeless-builtin-spec.ts

@@ -4,10 +4,6 @@ import {
   ConnectorFilter,
   ConnectorTool,
 } from '@blocksuite/affine-gfx-connector';
-import {
-  MindMapDragExtension,
-  MindMapIndicatorOverlay,
-} from '@blocksuite/affine-gfx-mindmap';
 import type * as NoteEffect from '@blocksuite/affine-gfx-note';
 import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
 import { TemplateTool } from '@blocksuite/affine-gfx-template';
@@ -44,13 +40,11 @@ export const EdgelessEditExtensions: ExtensionType[] = [
   InteractivityManager,
   ConnectorFilter,
   SnapExtension,
-  MindMapDragExtension,
   DblClickAddEdgelessText,
 ];
 
 export const EdgelessBuiltInManager: ExtensionType[] = [
   ConnectionOverlay,
-  MindMapIndicatorOverlay,
   SnapOverlay,
   AltCloneExtension,
   EditPropsMiddlewareBuilder,

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

@@ -1,6 +1,5 @@
 import { effects as gfxConnectorEffects } from '@blocksuite/affine-gfx-connector/effects';
 import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects';
-import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
 import { effects as gfxTemplateEffects } from '@blocksuite/affine-gfx-template/effects';
 import { effects as gfxCanvasTextEffects } from '@blocksuite/affine-gfx-text/effects';
 import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
@@ -77,7 +76,6 @@ function registerRootComponents() {
 function registerGfxEffects() {
   gfxCanvasTextEffects();
   gfxConnectorEffects();
-  gfxMindmapEffects();
   gfxGroupEffects();
   gfxTemplateEffects();
 }

blocksuite/affine/gfx/mindmap/package.json

@@ -15,6 +15,7 @@
     "@blocksuite/affine-block-image": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-connector": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
@@ -40,7 +41,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/gfx/mindmap/src/index.ts

@@ -5,4 +5,4 @@ export * from './interactivity';
 export * from './toolbar/config';
 export * from './toolbar/senior-tool';
 export * from './utils';
-export * from './view';
+export * from './view/index';

blocksuite/affine/gfx/mindmap/src/store.ts

@@ -0,0 +1,19 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import {
+  mindmapToMarkdownAdapterMatcher,
+  mindmapToPlainTextAdapterMatcher,
+} from './adapter';
+
+export class MindmapStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-mindmap-gfx';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(mindmapToPlainTextAdapterMatcher);
+    context.register(mindmapToMarkdownAdapterMatcher);
+  }
+}

blocksuite/affine/gfx/mindmap/src/toolbar/config.ts

@@ -23,7 +23,7 @@ import {
   MindmapStyleOne,
   MindmapStyleThree,
   MindmapStyleTwo,
-} from '../view';
+} from '../view/index';
 
 const MINDMAP_STYLE_LIST = [
   {

blocksuite/affine/gfx/mindmap/src/view.ts

@@ -0,0 +1,35 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { MindmapElementRendererExtension } from './element-renderer';
+import { MindMapIndicatorOverlay } from './indicator-overlay';
+import { MindMapDragExtension } from './interactivity';
+import {
+  mindmapToolbarExtension,
+  shapeMindmapToolbarExtension,
+} from './toolbar/config';
+import { mindMapSeniorTool } from './toolbar/senior-tool';
+import { MindMapView } from './view/view';
+
+export class MindmapViewExtension extends ViewExtensionProvider {
+  override name = 'affine-mindmap-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(MindmapElementRendererExtension);
+    context.register(mindMapSeniorTool);
+    context.register(mindmapToolbarExtension);
+    context.register(shapeMindmapToolbarExtension);
+    context.register(MindMapView);
+    context.register(MindMapDragExtension);
+    context.register(MindMapIndicatorOverlay);
+  }
+}

blocksuite/affine/gfx/mindmap/tsconfig.json

@@ -12,6 +12,7 @@
     { "path": "../../blocks/image" },
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../connector" },
     { "path": "../shape" },
     { "path": "../text" },

blocksuite/affine/gfx/shape/src/view.ts

@@ -10,7 +10,7 @@ import {
 } from './element-renderer';
 import { ShapeElementView } from './element-view';
 import { ShapeTool } from './shape-tool';
-import { shapeSeniorTool } from './toolbar';
+import { shapeSeniorTool, shapeToolbarExtension } from './toolbar';
 
 export class ShapeViewExtension extends ViewExtensionProvider {
   override name = 'affine-shape-gfx';
@@ -22,10 +22,13 @@ export class ShapeViewExtension extends ViewExtensionProvider {
 
   override setup(context: ViewExtensionContext) {
     super.setup(context);
-    context.register(HighlighterElementRendererExtension);
+    if (this.isEdgeless(context.scope)) {
-    context.register(ShapeElementRendererExtension);
+      context.register(HighlighterElementRendererExtension);
-    context.register(ShapeElementView);
+      context.register(ShapeElementRendererExtension);
-    context.register(ShapeTool);
+      context.register(ShapeElementView);
-    context.register(shapeSeniorTool);
+      context.register(ShapeTool);
+      context.register(shapeSeniorTool);
+      context.register(shapeToolbarExtension);
+    }
   }
 }

blocksuite/affine/widgets/edgeless-toolbar/src/edgeless-toolbar.ts

@@ -345,6 +345,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
       .map(tool =>
         tool({ block, gfx, toolbarContainer: this.toolbarContainer })
       )
+      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
       .filter(({ enable = true }) => enable);
   }
 

blocksuite/affine/widgets/edgeless-toolbar/src/extension/index.ts

@@ -13,6 +13,7 @@ export interface QuickTool {
    * if not configured, the tool will not be shown in dense mode
    */
   menu?: MenuConfig;
+  priority?: number;
 }
 
 export interface SeniorTool {

tools/utils/src/workspace.gen.ts

@@ -548,6 +548,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/image',
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/gfx/connector',
       'blocksuite/affine/gfx/shape',
       'blocksuite/affine/gfx/text',

yarn.lock

@@ -3189,6 +3189,7 @@ __metadata:
     "@blocksuite/affine-block-image": "workspace:*"
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-gfx-connector": "workspace:*"
     "@blocksuite/affine-gfx-shape": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"