refactor(editor): modular custom specs

blocksuite/affine/block-root/src/common-specs/widgets.ts

@@ -1,4 +1,3 @@
-import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
 import { WidgetViewExtension } from '@blocksuite/block-std';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
@@ -45,8 +44,3 @@ export const viewportOverlayWidget = WidgetViewExtension(
   AFFINE_VIEWPORT_OVERLAY_WIDGET,
   literal`${unsafeStatic(AFFINE_VIEWPORT_OVERLAY_WIDGET)}`
 );
-export const scrollAnchoringWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_SCROLL_ANCHORING_WIDGET,
-  literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`
-);

packages/frontend/component/src/lit-react/index.ts

@@ -1,4 +1,7 @@
-export { createComponent as createReactComponentFromLit } from './create-component';
+export {
+  createComponent as createReactComponentFromLit,
+  type ReactWebComponent,
+} from './create-component';
 export * from './lit-portal';
 export { toReactNode } from './to-react-node';
 export { templateToString } from './utils';

packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts

@@ -1,3 +1,4 @@
+import { createReactComponentFromLit } from '@affine/component';
 import {
   BlockStdScope,
   BlockViewIdentifier,
@@ -30,6 +31,7 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { literal } from 'lit/static-html.js';
+import React from 'react';
 
 import { markDownToDoc } from '../../utils';
 import type {
@@ -349,12 +351,6 @@ export class TextRenderer extends WithDisposable(ShadowlessElement) {
   accessor state: AffineAIPanelState | undefined = undefined;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'text-renderer': TextRenderer;
-  }
-}
-
 export const createTextRenderer: (
   host: EditorHost,
   options: TextRendererOptions
@@ -368,3 +364,14 @@ export const createTextRenderer: (
     ></text-renderer>`;
   };
 };
+
+export const LitTextRenderer = createReactComponentFromLit({
+  react: React,
+  elementClass: TextRenderer,
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'text-renderer': TextRenderer;
+  }
+}

packages/frontend/core/src/blocksuite/ai/extensions/enable-ai.ts

@@ -1,3 +1,4 @@
+import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import {
   CodeBlockSpec,
   EdgelessRootBlockSpec,
@@ -19,6 +20,12 @@ export function enableAIExtension(
   specBuilder: SpecBuilder,
   framework: FrameworkProvider
 ) {
+  const featureFlagService = framework.get(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
+  if (!enableAI) {
+    return;
+  }
+
   specBuilder.replace(CodeBlockSpec, AICodeBlockSpec);
   specBuilder.replace(ImageBlockSpec, AIImageBlockSpec);
   specBuilder.replace(ParagraphBlockSpec, AIParagraphBlockSpec);

packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx

@@ -1,9 +1,4 @@
-import {
-  Button,
-  createReactComponentFromLit,
-  Divider,
-  useLitPortalFactory,
-} from '@affine/component';
+import { Button, Divider, useLitPortalFactory } from '@affine/component';
 import { DocService } from '@affine/core/modules/doc';
 import {
   type Backlink,
@@ -28,7 +23,7 @@ import {
   useLiveData,
   useServices,
 } from '@toeverything/infra';
-import React, {
+import {
   Fragment,
   type ReactNode,
   useCallback,
@@ -40,19 +35,14 @@ import {
   AffinePageReference,
   AffineSharedPageReference,
 } from '../../components/affine/reference-link';
-import { TextRenderer } from '../ai/components/text-renderer';
-import * as styles from './bi-directional-link-panel.css';
+import { LitTextRenderer } from '../ai/components/text-renderer';
 import {
   patchReferenceRenderer,
   type ReferenceReactRenderer,
-} from './specs/custom/spec-patchers';
+} from '../extensions/reference-renderer';
+import * as styles from './bi-directional-link-panel.css';
 import { createPageModeSpecs } from './specs/page';
 
-const BlocksuiteTextRenderer = createReactComponentFromLit({
-  react: React,
-  elementClass: TextRenderer,
-});
-
 const PREFIX = 'bi-directional-link-panel-collapse:';
 
 const useBiDirectionalLinkPanelCollapseState = (
@@ -288,7 +278,7 @@ export const BacklinkGroups = () => {
                       />
                     </>
                   ) : (
-                    <BlocksuiteTextRenderer
+                    <LitTextRenderer
                       className={styles.linkPreviewRenderer}
                       answer={link.markdownPreview}
                       schema={getAFFiNEWorkspaceSchema()}

packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -1,9 +1,11 @@
+import { useConfirmModal, useLitPortalFactory } from '@affine/component';
 import {
-  createReactComponentFromLit,
-  useConfirmModal,
-  useLitPortalFactory,
-} from '@affine/component';
-import { EdgelessEditor, PageEditor } from '@affine/core/blocksuite/editors';
+  type EdgelessEditor,
+  LitDocEditor,
+  LitDocTitle,
+  LitEdgelessEditor,
+  type PageEditor,
+} from '@affine/core/blocksuite/editors';
 import type { DocCustomPropertyInfo } from '@affine/core/modules/db';
 import { DocService, DocsService } from '@affine/core/modules/doc';
 import type {
@@ -18,24 +20,16 @@ import { toURLSearchParams } from '@affine/core/modules/navigation';
 import { PeekViewService } from '@affine/core/modules/peek-view/services/peek-view';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import track from '@affine/track';
-import {
-  codeToolbarWidget,
-  type DocMode,
-  DocTitle,
-  embedCardToolbarWidget,
-  formatBarWidget,
-  imageToolbarWidget,
-  slashMenuWidget,
-  surfaceRefToolbarWidget,
-} from '@blocksuite/affine/blocks';
+import type { DocMode, DocTitle } from '@blocksuite/affine/blocks';
 import type { Store } from '@blocksuite/affine/store';
 import {
   useFramework,
   useLiveData,
   useService,
   useServices,
 } from '@toeverything/infra';
-import React, {
+import type React from 'react';
+import {
   forwardRef,
   Fragment,
   useCallback,
@@ -52,46 +46,30 @@ import {
   type DefaultOpenProperty,
   DocPropertiesTable,
 } from '../../components/doc-properties';
-import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
-import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
-import { extendEdgelessPreviewSpec } from './specs/custom/root-block';
+import { patchForAttachmentEmbedViews } from '../extensions/attachment-embed-view';
+import { patchDocModeService } from '../extensions/doc-mode-service';
+import { patchDocUrlExtensions } from '../extensions/doc-url';
+import { EdgelessClipboardWatcher } from '../extensions/edgeless-clipboard';
+import { patchForClipboardInElectron } from '../extensions/electron-clipboard';
+import { enableMobileExtension } from '../extensions/entry/enable-mobile';
+import { patchForEdgelessNoteConfig } from '../extensions/note-config';
+import { patchNotificationService } from '../extensions/notification-service';
+import { patchOpenDocExtension } from '../extensions/open-doc';
+import { patchPeekViewService } from '../extensions/peek-view-service';
+import { patchQuickSearchService } from '../extensions/quick-search-service';
 import {
-  patchDocModeService,
-  patchEdgelessClipboard,
-  patchForAttachmentEmbedViews,
-  patchForClipboardInElectron,
-  patchForEdgelessNoteConfig,
-  patchForMobile,
-  patchGenerateDocUrlExtension,
-  patchNotificationService,
-  patchOpenDocExtension,
-  patchParseDocUrlExtension,
-  patchPeekViewService,
-  patchQuickSearchService,
   patchReferenceRenderer,
-  patchSideBarService,
   type ReferenceReactRenderer,
-} from './specs/custom/spec-patchers';
+} from '../extensions/reference-renderer';
+import { patchSideBarService } from '../extensions/side-bar-service';
+import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
+import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
 import { createEdgelessModeSpecs } from './specs/edgeless';
 import { createPageModeSpecs } from './specs/page';
+import { extendEdgelessPreviewSpec } from './specs/preview';
 import { StarterBar } from './starter-bar';
 import * as styles from './styles.css';
 
-const adapted = {
-  DocEditor: createReactComponentFromLit({
-    react: React,
-    elementClass: PageEditor,
-  }),
-  DocTitle: createReactComponentFromLit({
-    react: React,
-    elementClass: DocTitle,
-  }),
-  EdgelessEditor: createReactComponentFromLit({
-    react: React,
-    elementClass: EdgelessEditor,
-  }),
-};
-
 interface BlocksuiteEditorProps {
   page: Store;
   readonly?: boolean;
@@ -165,9 +143,8 @@ const usePatchSpecs = (mode: DocMode) => {
         patchNotificationService(confirmModal),
         patchPeekViewService(peekViewService),
         patchOpenDocExtension(),
-        patchEdgelessClipboard(),
-        patchParseDocUrlExtension(framework),
-        patchGenerateDocUrlExtension(framework),
+        EdgelessClipboardWatcher,
+        patchDocUrlExtensions(framework),
         patchQuickSearchService(framework),
         patchSideBarService(framework),
         patchDocModeService(docService, docsService, editorService),
@@ -178,13 +155,7 @@ const usePatchSpecs = (mode: DocMode) => {
       builder.extend([patchForAttachmentEmbedViews(reactToLit)]);
     }
     if (BUILD_CONFIG.isMobileEdition) {
-      builder.omit(formatBarWidget);
-      builder.omit(embedCardToolbarWidget);
-      builder.omit(slashMenuWidget);
-      builder.omit(codeToolbarWidget);
-      builder.omit(imageToolbarWidget);
-      builder.omit(surfaceRefToolbarWidget);
-      builder.extend([patchForMobile()].flat());
+      enableMobileExtension(builder);
     }
     if (BUILD_CONFIG.isElectron) {
       builder.extend([patchForClipboardInElectron(framework)].flat());
@@ -319,7 +290,7 @@ export const BlocksuiteDocEditor = forwardRef<
     <>
       <div className={styles.affineDocViewport}>
         {!isJournal ? (
-          <adapted.DocTitle doc={page} ref={onTitleRef} />
+          <LitDocTitle doc={page} ref={onTitleRef} />
         ) : (
           <BlocksuiteEditorJournalDocTitle page={page} />
         )}
@@ -335,7 +306,7 @@ export const BlocksuiteDocEditor = forwardRef<
             />
           </div>
         ) : null}
-        <adapted.DocEditor
+        <LitDocEditor
           className={styles.docContainer}
           ref={onDocRef}
           doc={page}
@@ -391,7 +362,7 @@ export const BlocksuiteEdgelessEditor = forwardRef<
 
   return (
     <div className={styles.affineEdgelessDocViewport}>
-      <adapted.EdgelessEditor ref={onDocRef} doc={page} specs={specs} />
+      <LitEdgelessEditor ref={onDocRef} doc={page} specs={specs} />
       {portals}
     </div>
   );