feat: allow peek view to be closed by the caller && bump bs (#8542)

depends on https://github.com/toeverything/blocksuite/pull/8558
fix BS-1570

packages/frontend/core/src/components/affine/reference-link/index.tsx

@@ -83,7 +83,11 @@ export function AffinePageReference({
       if (e.shiftKey && ref.current) {
         e.preventDefault();
         e.stopPropagation();
-        peekView.open(ref.current).catch(console.error);
+        peekView
+          .open({
+            element: ref.current,
+          })
+          .catch(console.error);
       }
 
       if (isInPeekView) {

packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx

@@ -21,6 +21,7 @@ import {
   useRef,
 } from 'react';
 
+import type { DefaultOpenProperty } from '../../doc-properties';
 import { BlocksuiteDocEditor, BlocksuiteEdgelessEditor } from './lit-adaper';
 import * as styles from './styles.css';
 
@@ -29,6 +30,7 @@ interface BlocksuiteEditorContainerProps {
   mode: DocMode;
   shared?: boolean;
   className?: string;
+  defaultOpenProperty?: DefaultOpenProperty;
   style?: React.CSSProperties;
 }
 
@@ -43,7 +45,7 @@ export const BlocksuiteEditorContainer = forwardRef<
   AffineEditorContainer,
   BlocksuiteEditorContainerProps
 >(function AffineEditorContainer(
-  { page, mode, className, style, shared },
+  { page, mode, className, style, shared, defaultOpenProperty },
   ref
 ) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -171,6 +173,7 @@ export const BlocksuiteEditorContainer = forwardRef<
           ref={docRef}
           titleRef={docTitleRef}
           onClickBlank={handleClickPageModeBlank}
+          defaultOpenProperty={defaultOpenProperty}
         />
       ) : (
         <BlocksuiteEdgelessEditor

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

@@ -16,6 +16,7 @@ import { use } from 'foxact/use';
 import type { CSSProperties } from 'react';
 import { Suspense, useEffect } from 'react';
 
+import type { DefaultOpenProperty } from '../../doc-properties';
 import { BlocksuiteEditorContainer } from './blocksuite-editor-container';
 import { NoPageRootError } from './no-page-error';
 
@@ -23,6 +24,7 @@ export type EditorProps = {
   page: Doc;
   mode: DocMode;
   shared?: boolean;
+  defaultOpenProperty?: DefaultOpenProperty;
   // on Editor ready
   onEditorReady?: (editor: AffineEditorContainer) => (() => void) | void;
   style?: CSSProperties;
@@ -58,6 +60,7 @@ const BlockSuiteEditorImpl = ({
   shared,
   style,
   onEditorReady,
+  defaultOpenProperty,
 }: EditorProps) => {
   usePageRoot(page);
 
@@ -134,6 +137,7 @@ const BlockSuiteEditorImpl = ({
       mode={mode}
       page={page}
       shared={shared}
+      defaultOpenProperty={defaultOpenProperty}
       ref={editorRef}
       className={className}
       style={style}

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

@@ -39,7 +39,10 @@ import {
   AffinePageReference,
   AffineSharedPageReference,
 } from '../../affine/reference-link';
-import { DocPropertiesTable } from '../../doc-properties';
+import {
+  type DefaultOpenProperty,
+  DocPropertiesTable,
+} from '../../doc-properties';
 import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
 import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
 import {
@@ -76,6 +79,7 @@ const adapted = {
 interface BlocksuiteEditorProps {
   page: Doc;
   shared?: boolean;
+  defaultOpenProperty?: DefaultOpenProperty;
 }
 
 const usePatchSpecs = (shared: boolean, mode: DocMode) => {
@@ -191,7 +195,13 @@ export const BlocksuiteDocEditor = forwardRef<
     titleRef?: React.Ref<DocTitle>;
   }
 >(function BlocksuiteDocEditor(
-  { page, shared, onClickBlank, titleRef: externalTitleRef },
+  {
+    page,
+    shared,
+    onClickBlank,
+    titleRef: externalTitleRef,
+    defaultOpenProperty,
+  },
   ref
 ) {
   const titleRef = useRef<DocTitle | null>(null);
@@ -245,7 +255,9 @@ export const BlocksuiteDocEditor = forwardRef<
         ) : (
           <BlocksuiteEditorJournalDocTitle page={page} />
         )}
-        {!shared ? <DocPropertiesTable /> : null}
+        {!shared ? (
+          <DocPropertiesTable defaultOpenProperty={defaultOpenProperty} />
+        ) : null}
         <adapted.DocEditor
           className={styles.docContainer}
           ref={onDocRef}

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -9,7 +9,9 @@ import {
   type ExtensionType,
 } from '@blocksuite/affine/block-std';
 import {
+  EdgelessBuiltInManager,
   EdgelessRootBlockSpec,
+  EdgelessToolExtension,
   EditorSettingExtension,
   FontLoaderService,
   PageRootBlockSpec,
@@ -74,6 +76,8 @@ export function createEdgelessRootBlockSpec(
   return [
     enableAI ? AIEdgelessRootBlockSpec : EdgelessRootBlockSpec,
     FontLoaderService,
+    EdgelessToolExtension,
+    EdgelessBuiltInManager,
     getFontConfigExtension(),
     getTelemetryExtension(),
     getEditorConfigExtension(framework),

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -11,7 +11,6 @@ import type { EditorService } from '@affine/core/modules/editor';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { resolveLinkToDoc } from '@affine/core/modules/navigation';
 import type { PeekViewService } from '@affine/core/modules/peek-view';
-import type { ActivePeekView } from '@affine/core/modules/peek-view/entities/peek-view';
 import {
   CreationQuickSearchSession,
   DocsQuickSearchSession,
@@ -35,6 +34,8 @@ import type {
   AffineReference,
   DocMode,
   DocModeProvider,
+  PeekOptions,
+  PeekViewService as BSPeekViewService,
   QuickSearchResult,
   RootService,
 } from '@blocksuite/affine/blocks';
@@ -243,11 +244,28 @@ export function patchEmbedLinkedDocBlockConfig(framework: FrameworkProvider) {
 
 export function patchPeekViewService(service: PeekViewService) {
   return PeekViewExtension({
-    peek: (target: ActivePeekView['target'], template?: TemplateResult) => {
-      logger.debug('center peek', target, template);
-      return service.peekView.open(target, template);
+    peek: (
+      element: {
+        target: HTMLElement;
+        docId: string;
+        blockIds?: string[];
+        template?: TemplateResult;
+      },
+      options?: PeekOptions
+    ) => {
+      logger.debug('center peek', element);
+      const { template, target, ...props } = element;
+
+      return service.peekView.open(
+        {
+          element: target,
+          docRef: props,
+        },
+        template,
+        options?.abortSignal
+      );
     },
-  });
+  } satisfies BSPeekViewService);
 }
 
 export function patchDocModeService(

packages/frontend/core/src/components/doc-properties/table.tsx

@@ -41,6 +41,20 @@ type DocBacklinksPopupProps = PropsWithChildren<{
   backlinks: { docId: string; blockId: string; title: string }[];
 }>;
 
+export type DefaultOpenProperty =
+  | {
+      type: 'workspace';
+    }
+  | {
+      type: 'database';
+      databaseId: string;
+      databaseRowId: string;
+    };
+
+export interface DocPropertiesTableProps {
+  defaultOpenProperty?: DefaultOpenProperty;
+}
+
 export const DocBacklinksPopup = ({
   backlinks,
   children,
@@ -231,18 +245,19 @@ export const DocPropertyRow = ({
   );
 };
 
-interface DocPropertiesTableBodyProps {
+interface DocWorkspacePropertiesTableBodyProps {
   className?: string;
   style?: React.CSSProperties;
+  defaultOpen?: boolean;
 }
 
 // 🏷️ Tags     (⋅ xxx) (⋅ yyy)
 // #️⃣ Number   123456
 // +  Add a property
-export const DocPropertiesTableBody = forwardRef<
+const DocWorkspacePropertiesTableBody = forwardRef<
   HTMLDivElement,
-  DocPropertiesTableBodyProps & HTMLProps<HTMLDivElement>
->(({ className, style, ...props }, ref) => {
+  DocWorkspacePropertiesTableBodyProps & HTMLProps<HTMLDivElement>
+>(({ className, style, defaultOpen, ...props }, ref) => {
   const t = useI18n();
   const docsService = useService(DocsService);
   const workbenchService = useService(WorkbenchService);
@@ -258,6 +273,7 @@ export const DocPropertiesTableBody = forwardRef<
       className={clsx(styles.tableBodyRoot, className)}
       style={style}
       title={t.t('com.affine.workspace.properties')}
+      defaultCollapsed={!defaultOpen}
       {...props}
     >
       <PropertyCollapsibleContent
@@ -334,10 +350,12 @@ export const DocPropertiesTableBody = forwardRef<
     </PropertyCollapsibleSection>
   );
 });
-DocPropertiesTableBody.displayName = 'PagePropertiesTableBody';
+DocWorkspacePropertiesTableBody.displayName = 'PagePropertiesTableBody';
 
-const DocPropertiesTableInner = () => {
-  const [expanded, setExpanded] = useState(false);
+const DocPropertiesTableInner = ({
+  defaultOpenProperty,
+}: DocPropertiesTableProps) => {
+  const [expanded, setExpanded] = useState(!!defaultOpenProperty);
   return (
     <div className={styles.root}>
       <Collapsible.Root
@@ -347,9 +365,24 @@ const DocPropertiesTableInner = () => {
       >
         <DocPropertiesTableHeader open={expanded} onOpenChange={setExpanded} />
         <Collapsible.Content>
-          <DocPropertiesTableBody />
+          <DocWorkspacePropertiesTableBody
+            defaultOpen={
+              !defaultOpenProperty || defaultOpenProperty.type === 'workspace'
+            }
+          />
           <div className={styles.tableHeaderDivider} />
-          <DocDatabaseBacklinkInfo />
+          <DocDatabaseBacklinkInfo
+            defaultOpen={
+              defaultOpenProperty?.type === 'database'
+                ? [
+                    {
+                      databaseId: defaultOpenProperty.databaseId,
+                      rowId: defaultOpenProperty.databaseRowId,
+                    },
+                  ]
+                : []
+            }
+          />
         </Collapsible.Content>
       </Collapsible.Root>
     </div>
@@ -358,6 +391,8 @@ const DocPropertiesTableInner = () => {
 
 // this is the main component that renders the page properties table at the top of the page below
 // the page title
-export const DocPropertiesTable = () => {
-  return <DocPropertiesTableInner />;
+export const DocPropertiesTable = ({
+  defaultOpenProperty,
+}: DocPropertiesTableProps) => {
+  return <DocPropertiesTableInner defaultOpenProperty={defaultOpenProperty} />;
 };

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -31,6 +31,7 @@ export interface PageDetailEditorProps {
 export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
   const editor = useService(EditorService).editor;
   const mode = useLiveData(editor.mode$);
+  const defaultOpenProperty = useLiveData(editor.defaultOpenProperty$);
 
   const isSharedMode = editor.isSharedMode;
   const editorSetting = useService(EditorSettingService).editorSetting;
@@ -68,6 +69,7 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
         } as CSSProperties
       }
       mode={mode}
+      defaultOpenProperty={defaultOpenProperty}
       page={editor.doc.blockSuiteDoc}
       shared={isSharedMode}
       onEditorReady={onLoad}