refactor(editor): move menu context to components (#9302)

blocksuite/affine/components/src/rich-text/dom.ts

@@ -86,3 +86,26 @@ export function selectTextModel(
     }),
   ]);
 }
+
+export async function onModelTextUpdated(
+  editorHost: EditorHost,
+  model: BlockModel,
+  callback?: (text: RichText) => void
+) {
+  const richText = await asyncGetRichText(editorHost, model.id);
+  if (!richText) {
+    console.error('RichText is not ready yet.');
+    return;
+  }
+  await richText.updateComplete;
+  const inlineEditor = richText.inlineEditor;
+  if (!inlineEditor) {
+    console.error('Inline editor is not ready yet.');
+    return;
+  }
+  inlineEditor.slots.renderComplete.once(() => {
+    if (callback) {
+      callback(richText);
+    }
+  });
+}

blocksuite/affine/components/src/rich-text/index.ts

@@ -5,6 +5,7 @@ export {
   focusTextModel,
   getInlineEditorByModel,
   getRichTextByModel,
+  onModelTextUpdated,
   selectTextModel,
 } from './dom.js';
 export * from './effects.js';

blocksuite/affine/components/src/toolbar/index.ts

@@ -14,6 +14,7 @@ export {
   EditorMenuButton,
   EditorMenuContent,
 } from './menu-button.js';
+export { MenuContext } from './menu-context.js';
 export { EditorToolbarSeparator } from './separator.js';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';
@@ -23,9 +24,11 @@ export type {
   FatMenuItems,
   MenuItem,
   MenuItemGroup,
+  ToolbarMoreMenuConfig,
 } from './types.js';
 export {
   cloneGroups,
+  getMoreMenuConfig,
   groupsToActions,
   renderActions,
   renderGroups,

blocksuite/affine/components/src/toolbar/menu-context.ts

@@ -0,0 +1,30 @@
+import type { BlockStdScope, EditorHost } from '@blocksuite/block-std';
+import type { GfxModel } from '@blocksuite/block-std/gfx';
+import type { BlockModel, Doc } from '@blocksuite/store';
+
+export abstract class MenuContext {
+  abstract get doc(): Doc;
+
+  get firstElement(): GfxModel | null {
+    return null;
+  }
+
+  abstract get host(): EditorHost;
+
+  abstract get selectedBlockModels(): BlockModel[];
+
+  abstract get std(): BlockStdScope;
+
+  // Sometimes we need to close the menu.
+  close() {}
+
+  isElement() {
+    return false;
+  }
+
+  abstract isEmpty(): boolean;
+
+  abstract isMultiple(): boolean;
+
+  abstract isSingle(): boolean;
+}

blocksuite/affine/components/src/toolbar/types.ts

@@ -1,5 +1,7 @@
 import type { nothing, TemplateResult } from 'lit';
 
+import type { MenuContext } from './menu-context.js';
+
 export type MenuItemPart = {
   action: () => void;
   disabled?: boolean;
@@ -29,3 +31,9 @@ export type MenuItemGroup<T> = {
 
 // Group Actions
 export type FatMenuItems = (MenuItem | typeof nothing)[][];
+
+export interface ToolbarMoreMenuConfig {
+  configure: <T extends MenuContext>(
+    groups: MenuItemGroup<T>[]
+  ) => MenuItemGroup<T>[];
+}

blocksuite/affine/components/src/toolbar/utils.ts

@@ -1,9 +1,16 @@
+import type { BlockStdScope } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import type { FatMenuItems, MenuItem, MenuItemGroup } from './types.js';
+import type { MenuContext } from './menu-context.js';
+import type {
+  FatMenuItems,
+  MenuItem,
+  MenuItemGroup,
+  ToolbarMoreMenuConfig,
+} from './types.js';
 
 export function groupsToActions<T>(
   groups: MenuItemGroup<T>[],
@@ -101,3 +108,14 @@ export function renderGroups<T>(groups: MenuItemGroup<T>[], context: T) {
 export function renderToolbarSeparator() {
   return html`<editor-toolbar-separator></editor-toolbar-separator>`;
 }
+
+export function getMoreMenuConfig(std: BlockStdScope): ToolbarMoreMenuConfig {
+  return {
+    configure: <T extends MenuContext>(groups: MenuItemGroup<T>[]) => groups,
+    ...(
+      std.getConfig('affine:page' as BlockSuite.ConfigKeys) as null | {
+        toolbarMoreMenu: Partial<ToolbarMoreMenuConfig>;
+      }
+    )?.toolbarMoreMenu,
+  };
+}