feat(editor): extract linked doc widget package (#11589)

Close [BS-2738](https://github.com/toeverything/AFFiNE/pull/11589)

blocksuite/affine/all/package.json

@@ -55,6 +55,7 @@
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
+    "@blocksuite/affine-widget-linked-doc": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
     "@blocksuite/affine-widget-slash-menu": "workspace:*",
@@ -115,6 +116,7 @@
     "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
     "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar.ts",
     "./widgets/frame-title": "./src/widgets/frame-title.ts",
+    "./widgets/linked-doc": "./src/widgets/linked-doc.ts",
     "./widgets/remote-selection": "./src/widgets/remote-selection.ts",
     "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring.ts",
     "./widgets/slash-menu": "./src/widgets/slash-menu.ts",

blocksuite/affine/all/src/widgets/linked-doc.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-linked-doc';

blocksuite/affine/all/tsconfig.json

@@ -52,6 +52,7 @@
     { "path": "../widgets/edgeless-auto-connect" },
     { "path": "../widgets/edgeless-toolbar" },
     { "path": "../widgets/frame-title" },
+    { "path": "../widgets/linked-doc" },
     { "path": "../widgets/remote-selection" },
     { "path": "../widgets/scroll-anchoring" },
     { "path": "../widgets/slash-menu" },

blocksuite/affine/blocks/root/package.json

@@ -46,6 +46,7 @@
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
+    "@blocksuite/affine-widget-linked-doc": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
     "@blocksuite/affine-widget-slash-menu": "workspace:*",

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

@@ -33,6 +33,7 @@ import {
   ToolbarRegistryExtension,
 } from '@blocksuite/affine-shared/services';
 import { dragHandleWidget } from '@blocksuite/affine-widget-drag-handle';
+import { linkedDocWidget } from '@blocksuite/affine-widget-linked-doc';
 import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring';
 import { SlashMenuExtension } from '@blocksuite/affine-widget-slash-menu';
@@ -44,7 +45,7 @@ import { RootBlockAdapterExtensions } from '../adapters/extension';
 import { clipboardConfigs } from '../clipboard';
 import { builtinToolbarConfig } from '../configs/toolbar';
 import { fallbackKeymap } from '../keyboard/keymap';
-import { linkedDocWidget, modalWidget, viewportOverlayWidget } from './widgets';
+import { modalWidget, viewportOverlayWidget } from './widgets';
 
 /**
  * Why do we add these extensions into CommonSpecs?

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

@@ -1,7 +1,6 @@
 import { WidgetViewExtension } from '@blocksuite/std';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
-import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
 import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
 import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
 
@@ -10,11 +9,6 @@ export const modalWidget = WidgetViewExtension(
   AFFINE_MODAL_WIDGET,
   literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`
 );
-export const linkedDocWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_LINKED_DOC_WIDGET,
-  literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}`
-);
 export const viewportOverlayWidget = WidgetViewExtension(
   'affine:page',
   AFFINE_VIEWPORT_OVERLAY_WIDGET,

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-block.ts

@@ -45,7 +45,6 @@ import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import type { EdgelessRootBlockWidgetName } from '../types.js';
 import type { EdgelessSelectedRectWidget } from './components/rects/edgeless-selected-rect.js';
 import { EdgelessPageKeyboardManager } from './edgeless-keyboard.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
@@ -53,8 +52,7 @@ import { isCanvasElement } from './utils/query.js';
 
 export class EdgelessRootBlockComponent extends BlockComponent<
   RootBlockModel,
-  EdgelessRootService,
+  EdgelessRootService
-  EdgelessRootBlockWidgetName
 > {
   static override styles = css`
     affine-edgeless-root {

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-preview-block.ts

@@ -25,14 +25,12 @@ import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootBlockWidgetName } from '../types.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
 import { isCanvasElement } from './utils/query.js';
 
 export class EdgelessRootPreviewBlockComponent extends BlockComponent<
   RootBlockModel,
-  EdgelessRootService,
+  EdgelessRootService
-  EdgelessRootBlockWidgetName
 > {
   static override styles = css`
     affine-edgeless-root-preview {

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

@@ -7,6 +7,7 @@ import { effects as gfxShapeEffects } from '@blocksuite/affine-gfx-shape/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';
+import { effects as widgetLinkedDocEffects } from '@blocksuite/affine-widget-linked-doc/effects';
 
 import { EdgelessAutoCompletePanel } from './edgeless/components/auto-complete/auto-complete-panel.js';
 import { EdgelessAutoComplete } from './edgeless/components/auto-complete/edgeless-auto-complete.js';
@@ -44,8 +45,6 @@ import {
 import { ZoomBarToggleButton } from './widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
 import { EdgelessZoomToolbar } from './widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
 import { effects as widgetMobileToolbarEffects } from './widgets/keyboard-toolbar/effects.js';
-import { effects as widgetLinkedDocEffects } from './widgets/linked-doc/effects.js';
-import { Loader } from './widgets/linked-doc/import-doc/loader.js';
 import { AffineCustomModal } from './widgets/modal/custom-modal.js';
 import { AFFINE_MODAL_WIDGET } from './widgets/modal/modal.js';
 import {
@@ -127,9 +126,6 @@ function registerMiscComponents() {
   // Modal and menu components
   customElements.define('affine-custom-modal', AffineCustomModal);
 
-  // Loading and preview components
-  customElements.define('loader-element', Loader);
-
   // Toolbar and UI components
   customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
   customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);

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

@@ -10,7 +10,6 @@ export * from './page/page-root-spec.js';
 export * from './preview/preview-root-block.js';
 export * from './root-config.js';
 export { RootService } from './root-service.js';
-export * from './transformers/index.js';
 export * from './types.js';
 export * from './utils/index.js';
 export * from './widgets/index.js';

blocksuite/affine/blocks/root/src/page/page-root-block.ts

@@ -27,7 +27,6 @@ import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import type { PageRootBlockWidgetName } from '../index.js';
 import { PageKeyboardManager } from '../keyboard/keyboard-manager.js';
 import type { PageRootService } from './page-root-service.js';
 
@@ -52,8 +51,7 @@ function testClickOnBlankArea(
 
 export class PageRootBlockComponent extends BlockComponent<
   RootBlockModel,
-  PageRootService,
+  PageRootService
-  PageRootBlockWidgetName
 > {
   static override styles = css`
     editor-host:has(> affine-page-root, * > affine-page-root) {

blocksuite/affine/blocks/root/src/root-config.ts

@@ -1,10 +1,8 @@
 import { ConfigExtensionFactory } from '@blocksuite/std';
 
 import type { KeyboardToolbarConfig } from './widgets/keyboard-toolbar/config.js';
-import type { LinkedWidgetConfig } from './widgets/linked-doc/index.js';
 
 export interface RootBlockConfig {
-  linkedWidget?: Partial<LinkedWidgetConfig>;
   keyboardToolbar?: Partial<KeyboardToolbarConfig>;
 }
 

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

@@ -1,40 +1,5 @@
-import type { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
-import type { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
-import type {
-  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
-  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
-} from '@blocksuite/affine-widget-remote-selection';
-import type { AFFINE_SLASH_MENU_WIDGET } from '@blocksuite/affine-widget-slash-menu';
-
 import type { EdgelessRootBlockComponent } from './edgeless/edgeless-root-block.js';
 import type { PageRootBlockComponent } from './page/page-root-block.js';
-import type { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './widgets/edgeless-zoom-toolbar/index.js';
-import type { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from './widgets/index.js';
-import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/config.js';
-import type { AFFINE_MODAL_WIDGET } from './widgets/modal/modal.js';
-import type { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from './widgets/page-dragging-area/page-dragging-area.js';
-import type { AFFINE_VIEWPORT_OVERLAY_WIDGET } from './widgets/viewport-overlay/viewport-overlay.js';
-
-export type PageRootBlockWidgetName =
-  | typeof AFFINE_KEYBOARD_TOOLBAR_WIDGET
-  | typeof AFFINE_MODAL_WIDGET
-  | typeof AFFINE_SLASH_MENU_WIDGET
-  | typeof AFFINE_LINKED_DOC_WIDGET
-  | typeof AFFINE_PAGE_DRAGGING_AREA_WIDGET
-  | typeof AFFINE_DRAG_HANDLE_WIDGET
-  | typeof AFFINE_DOC_REMOTE_SELECTION_WIDGET
-  | typeof AFFINE_VIEWPORT_OVERLAY_WIDGET;
-
-export type EdgelessRootBlockWidgetName =
-  | typeof AFFINE_MODAL_WIDGET
-  | typeof AFFINE_SLASH_MENU_WIDGET
-  | typeof AFFINE_LINKED_DOC_WIDGET
-  | typeof AFFINE_DRAG_HANDLE_WIDGET
-  | typeof AFFINE_DOC_REMOTE_SELECTION_WIDGET
-  | typeof AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET
-  | typeof AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET
-  | typeof AFFINE_VIEWPORT_OVERLAY_WIDGET
-  | typeof AFFINE_FRAME_TITLE_WIDGET;
 
 export type RootBlockComponent =
   | PageRootBlockComponent

blocksuite/affine/blocks/root/src/widgets/index.ts

@@ -1,17 +1,5 @@
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export * from './keyboard-toolbar/index.js';
-export {
-  type LinkedMenuAction,
-  type LinkedMenuGroup,
-  type LinkedMenuItem,
-  type LinkedWidgetConfig,
-  LinkedWidgetUtils,
-} from './linked-doc/config.js';
-export {
-  // It's used in the AFFiNE!
-  showImportModal,
-} from './linked-doc/import-doc/index.js';
-export { AffineLinkedDocWidget } from './linked-doc/index.js';
 export { AffineModalWidget } from './modal/modal.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
 export * from './viewport-overlay/viewport-overlay.js';

blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/config.ts

@@ -55,6 +55,7 @@ import {
   openFileOrFiles,
   type Signal,
 } from '@blocksuite/affine-shared/utils';
+import type { AffineLinkedDocWidget } from '@blocksuite/affine-widget-linked-doc';
 import { viewPresets } from '@blocksuite/data-view/view-presets';
 import { assertType } from '@blocksuite/global/utils';
 import {
@@ -105,7 +106,6 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import type { TemplateResult } from 'lit';
 
 import type { PageRootBlockComponent } from '../../page/page-root-block.js';
-import type { AffineLinkedDocWidget } from '../linked-doc/index.js';
 import {
   FigmaDuotoneIcon,
   HeadingIcon,

blocksuite/affine/blocks/root/tsconfig.json

@@ -43,6 +43,7 @@
     { "path": "../../widgets/edgeless-auto-connect" },
     { "path": "../../widgets/edgeless-toolbar" },
     { "path": "../../widgets/frame-title" },
+    { "path": "../../widgets/linked-doc" },
     { "path": "../../widgets/remote-selection" },
     { "path": "../../widgets/scroll-anchoring" },
     { "path": "../../widgets/slash-menu" },

blocksuite/affine/widgets/linked-doc/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@blocksuite/affine-widget-linked-doc",
+  "description": "Affine linked doc widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-image": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-inline-reference": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.10",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "fflate": "^0.8.2",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}

blocksuite/affine/widgets/linked-doc/src/config.ts

@@ -16,7 +16,11 @@ import {
   isFuzzyMatch,
   type Signal,
 } from '@blocksuite/affine-shared/utils';
-import type { BlockStdScope, EditorHost } from '@blocksuite/std';
+import {
+  type BlockStdScope,
+  ConfigExtensionFactory,
+  type EditorHost,
+} from '@blocksuite/std';
 import type { InlineRange } from '@blocksuite/std/inline';
 import type { TemplateResult } from 'lit';
 
@@ -260,3 +264,7 @@ export const LinkedWidgetUtils = {
 };
 
 export const AFFINE_LINKED_DOC_WIDGET = 'affine-linked-doc-widget';
+
+export const LinkedWidgetConfigExtension = ConfigExtensionFactory<
+  Partial<LinkedWidgetConfig>
+>('affine:widget-linked-doc');

blocksuite/affine/widgets/linked-doc/src/effects.ts

@@ -1,5 +1,6 @@
 import { AFFINE_LINKED_DOC_WIDGET } from './config.js';
 import { ImportDoc } from './import-doc/import-doc.js';
+import { Loader } from './import-doc/loader.js';
 import { AffineLinkedDocWidget } from './index.js';
 import { LinkedDocPopover } from './linked-doc-popover.js';
 import { AffineMobileLinkedDocMenu } from './mobile-linked-doc-menu.js';
@@ -8,9 +9,9 @@ export function effects() {
   customElements.define('affine-linked-doc-popover', LinkedDocPopover);
   customElements.define(AFFINE_LINKED_DOC_WIDGET, AffineLinkedDocWidget);
   customElements.define('import-doc', ImportDoc);
-
   customElements.define(
     'affine-mobile-linked-doc-menu',
     AffineMobileLinkedDocMenu
   );
+  customElements.define('loader-element', Loader);
 }

blocksuite/affine/widgets/linked-doc/src/import-doc/import-doc.ts

@@ -12,9 +12,9 @@ import type { Schema, Workspace } from '@blocksuite/store';
 import { html, LitElement, type PropertyValues } from 'lit';
 import { query, state } from 'lit/decorators.js';
 
-import { HtmlTransformer } from '../../../transformers/html.js';
+import { HtmlTransformer } from '../transformers/html.js';
-import { MarkdownTransformer } from '../../../transformers/markdown.js';
+import { MarkdownTransformer } from '../transformers/markdown.js';
-import { NotionHtmlTransformer } from '../../../transformers/notion-html.js';
+import { NotionHtmlTransformer } from '../transformers/notion-html.js';
 import { styles } from './styles.js';
 
 export type OnSuccessHandler = (

blocksuite/affine/widgets/linked-doc/src/index.ts

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './import-doc';
+export * from './transformers';
+export * from './widget';

blocksuite/affine/widgets/linked-doc/src/mobile-linked-doc-menu.ts

@@ -16,7 +16,6 @@ import { property } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { PageRootBlockComponent } from '../../index.js';
 import type {
   LinkedDocContext,
   LinkedMenuGroup,
@@ -29,7 +28,6 @@ export const AFFINE_MOBILE_LINKED_DOC_MENU = 'affine-mobile-linked-doc-menu';
 
 @requiredProperties({
   context: PropTypes.object,
-  rootComponent: PropTypes.instanceOf(PageRootBlockComponent),
 })
 export class AffineMobileLinkedDocMenu extends SignalWatcher(
   WithDisposable(LitElement)
@@ -250,7 +248,4 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
 
   @property({ attribute: false })
   accessor context!: LinkedDocContext;
-
-  @property({ attribute: false })
-  accessor rootComponent!: PageRootBlockComponent;
 }

blocksuite/affine/widgets/linked-doc/src/transformers/zip.ts

@@ -6,7 +6,7 @@ import { sha } from '@blocksuite/global/utils';
 import type { DocSnapshot, Schema, Store, Workspace } from '@blocksuite/store';
 import { extMimeMap, getAssetName, Transformer } from '@blocksuite/store';
 
-import { download, Unzip, Zip } from '../transformers/utils.js';
+import { download, Unzip, Zip } from './utils.js';
 
 async function exportDocs(
   collection: Workspace,

blocksuite/affine/widgets/linked-doc/src/widget.ts

@@ -7,7 +7,11 @@ import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { getViewportElement } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import type { BlockComponent } from '@blocksuite/std';
-import { BLOCK_ID_ATTR, WidgetComponent } from '@blocksuite/std';
+import {
+  BLOCK_ID_ATTR,
+  WidgetComponent,
+  WidgetViewExtension,
+} from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import {
   INLINE_ROOT_ATTR,
@@ -19,22 +23,18 @@ import { html, nothing } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
 
-import type { PageRootBlockComponent } from '../../page/page-root-block.js';
-import { RootBlockConfigExtension } from '../../root-config.js';
 import {
-  type AFFINE_LINKED_DOC_WIDGET,
+  AFFINE_LINKED_DOC_WIDGET,
   getMenus,
   type LinkedDocContext,
   type LinkedWidgetConfig,
+  LinkedWidgetConfigExtension,
 } from './config.js';
 import { linkedDocWidgetStyles } from './styles.js';
-export { type LinkedWidgetConfig } from './config.js';
 
-export class AffineLinkedDocWidget extends WidgetComponent<
+export class AffineLinkedDocWidget extends WidgetComponent<RootBlockModel> {
-  RootBlockModel,
-  PageRootBlockComponent
-> {
   static override styles = linkedDocWidgetStyles;
 
   private _context: LinkedDocContext | null = null;
@@ -217,8 +217,7 @@ export class AffineLinkedDocWidget extends WidgetComponent<
         scrollContainer: getViewportElement(this.std.host) ?? window,
         scrollTopOffset: 46,
       },
-      ...this.std.getOptional(RootBlockConfigExtension.identifier)
+      ...this.std.getOptional(LinkedWidgetConfigExtension.identifier),
-        ?.linkedWidget,
     };
   }
 
@@ -316,6 +315,12 @@ export class AffineLinkedDocWidget extends WidgetComponent<
   }
 }
 
+export const linkedDocWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_LINKED_DOC_WIDGET,
+  literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}`
+);
+
 declare global {
   interface HTMLElementTagNameMap {
     [AFFINE_LINKED_DOC_WIDGET]: AffineLinkedDocWidget;

blocksuite/affine/widgets/linked-doc/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/image" },
+    { "path": "../../components" },
+    { "path": "../../inlines/reference" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}

blocksuite/integration-test/src/__tests__/main/snapshot.spec.ts

@@ -1,6 +1,6 @@
-import { ZipTransformer } from '@blocksuite/affine/blocks/root';
 import type { SurfaceBlockModel } from '@blocksuite/affine/blocks/surface';
 import { AffineSchemas } from '@blocksuite/affine/schemas';
+import { ZipTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import type { PointLocation } from '@blocksuite/global/gfx';
 import { Schema } from '@blocksuite/store';
 import { beforeEach, expect, test } from 'vitest';

blocksuite/playground/apps/_common/components/starter-debug-menu.ts

@@ -17,14 +17,6 @@ import '@shoelace-style/shoelace/dist/themes/dark.css';
 import './left-side-panel.js';
 
 import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
-import {
-  createAssetsArchive,
-  download,
-  HtmlTransformer,
-  MarkdownTransformer,
-  NotionHtmlTransformer,
-  ZipTransformer,
-} from '@blocksuite/affine/blocks/root';
 import { ExportManager } from '@blocksuite/affine/blocks/surface';
 import { toast } from '@blocksuite/affine/components/toast';
 import {
@@ -55,6 +47,14 @@ import {
   Text,
   type Workspace,
 } from '@blocksuite/affine/store';
+import {
+  createAssetsArchive,
+  download,
+  HtmlTransformer,
+  MarkdownTransformer,
+  NotionHtmlTransformer,
+  ZipTransformer,
+} from '@blocksuite/affine/widgets/linked-doc';
 import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { TestAffineEditorContainer } from '@blocksuite/integration-test';

blocksuite/playground/apps/starter/data/affine-snapshot.ts

@@ -1,6 +1,6 @@
-import { ZipTransformer } from '@blocksuite/affine/blocks/root';
 import { AffineSchemas } from '@blocksuite/affine/schemas';
 import { Schema, Text, type Workspace } from '@blocksuite/affine/store';
+import { ZipTransformer } from '@blocksuite/affine/widgets/linked-doc';
 export async function affineSnapshot(collection: Workspace, id: string) {
   const doc = collection.createDoc(id);
   doc.load();

blocksuite/playground/apps/starter/data/preset.ts

@@ -1,5 +1,5 @@
-import { MarkdownTransformer } from '@blocksuite/affine/blocks/root';
 import { Text, type Workspace } from '@blocksuite/affine/store';
+import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
 
 import type { InitFn } from './utils.js';
 

blocksuite/playground/apps/starter/data/synced.ts

@@ -1,5 +1,5 @@
-import { MarkdownTransformer } from '@blocksuite/affine/blocks/root';
 import { Text, type Workspace } from '@blocksuite/affine/store';
+import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
 
 import type { InitFn } from './utils';
 

packages/frontend/apps/ios/src/app.tsx

@@ -39,13 +39,13 @@ import { getWorkerUrl } from '@affine/env/worker';
 import { I18n } from '@affine/i18n';
 import { StoreManagerClient } from '@affine/nbstore/worker/client';
 import { getMarkdownAdapterExtensions } from '@blocksuite/affine/adapters';
-import { MarkdownTransformer } from '@blocksuite/affine/blocks/root';
 import { Container } from '@blocksuite/affine/global/di';
 import {
   docLinkBaseURLMiddleware,
   MarkdownAdapter,
   titleMiddleware,
 } from '@blocksuite/affine/shared/adapters';
+import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import { App as CapacitorApp } from '@capacitor/app';
 import { Browser } from '@capacitor/browser';
 import { Haptics } from '@capacitor/haptics';

packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/type.ts

@@ -5,8 +5,8 @@ import type {
   SearchTagMenuAction,
 } from '@affine/core/modules/search-menu/services';
 import type { Collection } from '@affine/env/filter';
-import type { LinkedMenuGroup } from '@blocksuite/affine/blocks/root';
 import type { DocMeta, Store } from '@blocksuite/affine/store';
+import type { LinkedMenuGroup } from '@blocksuite/affine/widgets/linked-doc';
 import type { Signal } from '@preact/signals-core';
 
 export type ChipState = 'candidate' | 'processing' | 'finished' | 'failed';

packages/frontend/core/src/blocksuite/block-suite-page-list/utils.tsx

@@ -89,7 +89,7 @@ export const usePageHelper = (docCollection: Workspace) => {
   const importFileAndOpen = useMemo(
     () => async () => {
       const { showImportModal } = await import(
-        '@blocksuite/affine/blocks/root'
+        '@blocksuite/affine/widgets/linked-doc'
       );
       const { promise, resolve, reject } =
         Promise.withResolvers<

packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts

@@ -1,10 +1,10 @@
 import { WorkspaceServerService } from '@affine/core/modules/cloud';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { DatabaseConfigExtension } from '@blocksuite/affine/blocks/database';
-import { RootBlockConfigExtension } from '@blocksuite/affine/blocks/root';
 import { ToolbarMoreMenuConfigExtension } from '@blocksuite/affine/components/toolbar';
 import { EditorSettingExtension } from '@blocksuite/affine/shared/services';
 import type { ExtensionType } from '@blocksuite/affine/store';
+import { LinkedWidgetConfigExtension } from '@blocksuite/affine/widgets/linked-doc';
 import type { FrameworkProvider } from '@toeverything/infra';
 
 import { createDatabaseOptionsConfig } from './database';
@@ -24,9 +24,7 @@ export function getEditorConfigExtension(
   return [
     EditorSettingExtension(editorSettingService.editorSetting.settingSignal),
     DatabaseConfigExtension(createDatabaseOptionsConfig(framework)),
-    RootBlockConfigExtension({
+    LinkedWidgetConfigExtension(createLinkedWidgetConfig(framework)),
-      linkedWidget: createLinkedWidgetConfig(framework),
-    }),
     ToolbarMoreMenuConfigExtension(createToolbarMoreMenuConfig(framework)),
 
     createCustomToolbarExtension(editorSettingService.editorSetting, baseUrl),

packages/frontend/core/src/blocksuite/extensions/editor-config/linked.ts

@@ -1,5 +1,5 @@
 import { AtMenuConfigService } from '@affine/core/modules/at-menu-config/services';
-import type { LinkedWidgetConfig } from '@blocksuite/affine/blocks/root';
+import type { LinkedWidgetConfig } from '@blocksuite/affine/widgets/linked-doc';
 import { type FrameworkProvider } from '@toeverything/infra';
 
 export function createLinkedWidgetConfig(

packages/frontend/core/src/components/hooks/affine/use-export-page.ts

@@ -7,13 +7,6 @@ import { EditorService } from '@affine/core/modules/editor';
 import { getAFFiNEWorkspaceSchema } from '@affine/core/modules/workspace/global-schema';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
-import {
-  createAssetsArchive,
-  download,
-  HtmlTransformer,
-  MarkdownTransformer,
-  ZipTransformer,
-} from '@blocksuite/affine/blocks/root';
 import { ExportManager } from '@blocksuite/affine/blocks/surface';
 import {
   docLinkBaseURLMiddleware,
@@ -25,6 +18,13 @@ import {
 import { printToPdf } from '@blocksuite/affine/shared/utils';
 import type { BlockStdScope } from '@blocksuite/affine/std';
 import { type Store, Transformer } from '@blocksuite/affine/store';
+import {
+  createAssetsArchive,
+  download,
+  HtmlTransformer,
+  MarkdownTransformer,
+  ZipTransformer,
+} from '@blocksuite/affine/widgets/linked-doc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';

packages/frontend/core/src/components/providers/workspace-side-effects.tsx

@@ -31,8 +31,8 @@ import {
 } from '@affine/core/modules/workspace';
 import { useI18n } from '@affine/i18n';
 import track from '@affine/track';
-import { ZipTransformer } from '@blocksuite/affine/blocks/root';
 import type { DocMode } from '@blocksuite/affine/model';
+import { ZipTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import {
   effect,
   fromPromise,

packages/frontend/core/src/desktop/dialogs/import/index.tsx

@@ -12,14 +12,14 @@ import {
 import { DebugLogger } from '@affine/debug';
 import { useI18n } from '@affine/i18n';
 import track from '@affine/track';
+import { openFileOrFiles } from '@blocksuite/affine/shared/utils';
+import type { Workspace } from '@blocksuite/affine/store';
 import {
   HtmlTransformer,
   MarkdownTransformer,
   NotionHtmlTransformer,
   ZipTransformer,
-} from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/widgets/linked-doc';
-import { openFileOrFiles } from '@blocksuite/affine/shared/utils';
-import type { Workspace } from '@blocksuite/affine/store';
 import {
   ExportToHtmlIcon,
   ExportToMarkdownIcon,

packages/frontend/core/src/desktop/pages/workspace/index.tsx

@@ -15,7 +15,7 @@ import {
   type WorkspaceMetadata,
   WorkspacesService,
 } from '@affine/core/modules/workspace';
-import { ZipTransformer } from '@blocksuite/affine/blocks/root';
+import { ZipTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import {
   FrameworkScope,
   LiveData,

packages/frontend/core/src/modules/at-menu-config/services/index.ts

@@ -7,12 +7,6 @@ import {
 } from '@affine/graphql';
 import { I18n, i18nTime } from '@affine/i18n';
 import track from '@affine/track';
-import {
-  type LinkedMenuGroup,
-  type LinkedMenuItem,
-  type LinkedWidgetConfig,
-  LinkedWidgetUtils,
-} from '@blocksuite/affine/blocks/root';
 import type { DocMode } from '@blocksuite/affine/model';
 import { DocModeProvider } from '@blocksuite/affine/shared/services';
 import type { AffineInlineEditor } from '@blocksuite/affine/shared/types';
@@ -23,6 +17,12 @@ import {
 } from '@blocksuite/affine/std';
 import type { DocMeta } from '@blocksuite/affine/store';
 import { Text } from '@blocksuite/affine/store';
+import {
+  type LinkedMenuGroup,
+  type LinkedMenuItem,
+  type LinkedWidgetConfig,
+  LinkedWidgetUtils,
+} from '@blocksuite/affine/widgets/linked-doc';
 import {
   DateTimeIcon,
   NewXxxEdgelessIcon,

packages/frontend/core/src/modules/import-clipper/services/import.ts

@@ -1,4 +1,4 @@
-import { MarkdownTransformer } from '@blocksuite/affine/blocks/root';
+import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import { Service } from '@toeverything/infra';
 
 import { DocsService } from '../../doc';

packages/frontend/core/src/modules/import-template/services/import.ts

@@ -1,5 +1,5 @@
-import { ZipTransformer } from '@blocksuite/affine/blocks/root';
 import type { DocMode } from '@blocksuite/affine/model';
+import { ZipTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import { Service } from '@toeverything/infra';
 
 import { DocsService } from '../../doc';

packages/frontend/core/src/modules/integration/entities/writer.ts

@@ -1,4 +1,4 @@
-import { MarkdownTransformer } from '@blocksuite/affine/blocks/root';
+import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import { Entity } from '@toeverything/infra';
 
 import type { TagService } from '../../tag';

packages/frontend/core/src/modules/search-menu/services/index.ts

@@ -4,12 +4,12 @@ import type {
 } from '@affine/core/components/page-list';
 import { fuzzyMatch } from '@affine/core/utils/fuzzy-match';
 import { I18n } from '@affine/i18n';
+import { createSignalFromObservable } from '@blocksuite/affine/shared/utils';
+import type { DocMeta } from '@blocksuite/affine/store';
 import type {
   LinkedMenuGroup,
   LinkedMenuItem,
-} from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/widgets/linked-doc';
-import { createSignalFromObservable } from '@blocksuite/affine/shared/utils';
-import type { DocMeta } from '@blocksuite/affine/store';
 import { CollectionsIcon } from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
 import { Service } from '@toeverything/infra';

packages/frontend/core/src/utils/first-app-data.ts

@@ -4,7 +4,7 @@ import '../blocksuite/block-suite-editor';
 import { DebugLogger } from '@affine/debug';
 import { DEFAULT_WORKSPACE_NAME } from '@affine/env/constant';
 import onboardingUrl from '@affine/templates/onboarding.zip';
-import { ZipTransformer } from '@blocksuite/affine/blocks/root';
+import { ZipTransformer } from '@blocksuite/affine/widgets/linked-doc';
 
 import { DocsService } from '../modules/doc';
 import {

tools/utils/src/workspace.gen.ts

@@ -50,6 +50,7 @@ export const PackageList = [
       'blocksuite/affine/widgets/edgeless-auto-connect',
       'blocksuite/affine/widgets/edgeless-toolbar',
       'blocksuite/affine/widgets/frame-title',
+      'blocksuite/affine/widgets/linked-doc',
       'blocksuite/affine/widgets/remote-selection',
       'blocksuite/affine/widgets/scroll-anchoring',
       'blocksuite/affine/widgets/slash-menu',
@@ -337,6 +338,7 @@ export const PackageList = [
       'blocksuite/affine/widgets/edgeless-auto-connect',
       'blocksuite/affine/widgets/edgeless-toolbar',
       'blocksuite/affine/widgets/frame-title',
+      'blocksuite/affine/widgets/linked-doc',
       'blocksuite/affine/widgets/remote-selection',
       'blocksuite/affine/widgets/scroll-anchoring',
       'blocksuite/affine/widgets/slash-menu',
@@ -770,6 +772,21 @@ export const PackageList = [
       'blocksuite/framework/std',
     ],
   },
+  {
+    location: 'blocksuite/affine/widgets/linked-doc',
+    name: '@blocksuite/affine-widget-linked-doc',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/image',
+      'blocksuite/affine/components',
+      'blocksuite/affine/inlines/reference',
+      'blocksuite/affine/model',
+      'blocksuite/affine/rich-text',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/global',
+      'blocksuite/framework/std',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/widgets/remote-selection',
     name: '@blocksuite/affine-widget-remote-selection',
@@ -1220,6 +1237,7 @@ export type PackageName =
   | '@blocksuite/affine-widget-edgeless-auto-connect'
   | '@blocksuite/affine-widget-edgeless-toolbar'
   | '@blocksuite/affine-widget-frame-title'
+  | '@blocksuite/affine-widget-linked-doc'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'
   | '@blocksuite/affine-widget-slash-menu'

tsconfig.json

@@ -97,6 +97,7 @@
     { "path": "./blocksuite/affine/widgets/edgeless-auto-connect" },
     { "path": "./blocksuite/affine/widgets/edgeless-toolbar" },
     { "path": "./blocksuite/affine/widgets/frame-title" },
+    { "path": "./blocksuite/affine/widgets/linked-doc" },
     { "path": "./blocksuite/affine/widgets/remote-selection" },
     { "path": "./blocksuite/affine/widgets/scroll-anchoring" },
     { "path": "./blocksuite/affine/widgets/slash-menu" },

yarn.lock

@@ -2819,6 +2819,7 @@ __metadata:
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
+    "@blocksuite/affine-widget-linked-doc": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
     "@blocksuite/affine-widget-slash-menu": "workspace:*"
@@ -3646,6 +3647,31 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-linked-doc@workspace:*, @blocksuite/affine-widget-linked-doc@workspace:blocksuite/affine/widgets/linked-doc":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-linked-doc@workspace:blocksuite/affine/widgets/linked-doc"
+  dependencies:
+    "@blocksuite/affine-block-image": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-inline-reference": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-rich-text": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.10"
+    "@blocksuite/std": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    fflate: "npm:^0.8.2"
+    lit: "npm:^3.2.0"
+    lodash-es: "npm:^4.17.21"
+    rxjs: "npm:^7.8.1"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-remote-selection@workspace:*, @blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widgets/remote-selection":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widgets/remote-selection"
@@ -3779,6 +3805,7 @@ __metadata:
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
+    "@blocksuite/affine-widget-linked-doc": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
     "@blocksuite/affine-widget-slash-menu": "workspace:*"