From 34844fe41f826f1e2ab55e2fed07cdecbb3165d1 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Mon, 28 Oct 2024 13:05:35 +0800 Subject: [PATCH] feat(core): allow database properties to be expanded via peek view --- .../blocksuite-editor-container.tsx | 5 +- .../block-suite-editor/blocksuite-editor.tsx | 4 + .../block-suite-editor/lit-adaper.tsx | 18 +++- .../specs/custom/spec-patchers.tsx | 3 +- .../src/components/doc-properties/table.tsx | 57 ++++++++++--- .../src/components/page-detail-editor.tsx | 2 + .../workspace/detail/sheets/doc-info.tsx | 15 +++- .../doc-database-backlink-info.tsx | 24 ++++-- .../src/modules/editor/entities/editor.ts | 19 +++++ .../core/src/modules/navigation/utils.ts | 11 ++- .../modules/peek-view/entities/peek-view.ts | 84 ++++++++++--------- .../view/doc-preview/doc-peek-view.tsx | 41 ++++----- .../peek-view/view/peek-view-controls.tsx | 34 +++----- .../peek-view/view/peek-view-manager.tsx | 26 ++---- .../core/src/modules/peek-view/view/utils.ts | 7 +- 15 files changed, 222 insertions(+), 128 deletions(-) diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx index e769b4bdb9827..3a19799d94867 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx +++ b/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(null); @@ -171,6 +173,7 @@ export const BlocksuiteEditorContainer = forwardRef< ref={docRef} titleRef={docTitleRef} onClickBlank={handleClickPageModeBlank} + defaultOpenProperty={defaultOpenProperty} /> ) : ( (() => 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} diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx index 0a131f6235805..49cb5043f69e6 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/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; } >(function BlocksuiteDocEditor( - { page, shared, onClickBlank, titleRef: externalTitleRef }, + { + page, + shared, + onClickBlank, + titleRef: externalTitleRef, + defaultOpenProperty, + }, ref ) { const titleRef = useRef(null); @@ -245,7 +255,9 @@ export const BlocksuiteDocEditor = forwardRef< ) : ( )} - {!shared ? : null} + {!shared ? ( + + ) : null} { logger.debug('center peek', element); const { template, target, ...props } = element; + return service.peekView.open( { element: target, - ...props, + docRef: props, }, template, options?.abortSignal diff --git a/packages/frontend/core/src/components/doc-properties/table.tsx b/packages/frontend/core/src/components/doc-properties/table.tsx index 16fe542a2c589..7c6f93060dba3 100644 --- a/packages/frontend/core/src/components/doc-properties/table.tsx +++ b/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 ->(({ className, style, ...props }, ref) => { + DocWorkspacePropertiesTableBodyProps & HTMLProps +>(({ 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} > ); }); -DocPropertiesTableBody.displayName = 'PagePropertiesTableBody'; +DocWorkspacePropertiesTableBody.displayName = 'PagePropertiesTableBody'; -const DocPropertiesTableInner = () => { - const [expanded, setExpanded] = useState(false); +const DocPropertiesTableInner = ({ + defaultOpenProperty, +}: DocPropertiesTableProps) => { + const [expanded, setExpanded] = useState(!!defaultOpenProperty); return (
{ > - +
- +
@@ -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 ; +export const DocPropertiesTable = ({ + defaultOpenProperty, +}: DocPropertiesTableProps) => { + return ; }; diff --git a/packages/frontend/core/src/components/page-detail-editor.tsx b/packages/frontend/core/src/components/page-detail-editor.tsx index 7c55411eb3e94..f81b982a6a907 100644 --- a/packages/frontend/core/src/components/page-detail-editor.tsx +++ b/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} diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx index 4a1b5ea5fdf5d..82bf78eebc638 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx @@ -1,5 +1,8 @@ import { Divider, Scrollable } from '@affine/component'; -import { DocPropertiesTable } from '@affine/core/components/doc-properties'; +import { + type DefaultOpenProperty, + DocPropertiesTable, +} from '@affine/core/components/doc-properties'; import { LinksRow } from '@affine/core/components/doc-properties/info-modal/links-row'; import { TimeRow } from '@affine/core/components/doc-properties/info-modal/time-row'; import { DocsSearchService } from '@affine/core/modules/docs-search'; @@ -9,7 +12,13 @@ import { Suspense, useMemo } from 'react'; import * as styles from './doc-info.css'; -export const DocInfoSheet = ({ docId }: { docId: string }) => { +export const DocInfoSheet = ({ + docId, + defaultOpenProperty, +}: { + docId: string; + defaultOpenProperty?: DefaultOpenProperty; +}) => { const docsSearchService = useService(DocsSearchService); const t = useI18n(); @@ -52,7 +61,7 @@ export const DocInfoSheet = ({ docId }: { docId: string }) => { ) : null} - + diff --git a/packages/frontend/core/src/modules/doc-info/views/database-properties/doc-database-backlink-info.tsx b/packages/frontend/core/src/modules/doc-info/views/database-properties/doc-database-backlink-info.tsx index 96371ece3a016..7595641286589 100644 --- a/packages/frontend/core/src/modules/doc-info/views/database-properties/doc-database-backlink-info.tsx +++ b/packages/frontend/core/src/modules/doc-info/views/database-properties/doc-database-backlink-info.tsx @@ -95,6 +95,14 @@ const DatabaseBacklinkRow = ({ }, [row?.cells]); const t = useI18n(); + const pageRefParams = useMemo(() => { + const params = new URLSearchParams(); + if (row?.id) { + params.set('blockIds', row.databaseId); + } + return params; + }, [row]); + if (!row || !sortedCells) { return null; } @@ -105,7 +113,11 @@ const DatabaseBacklinkRow = ({ defaultCollapsed={!defaultOpen} icon={} suffix={ - + } > { const doc = useService(DocService).doc; @@ -151,11 +163,13 @@ export const DocDatabaseBacklinkInfo = ({ return (
- {rows.map(({ docId, rowId, row$ }) => ( + {rows.map(({ docId, databaseBlockId, rowId, row$ }) => ( backlink.docId === docId && backlink.blockId === rowId + backlink => + backlink.databaseId === databaseBlockId && + backlink.rowId === rowId )} row$={row$} /> diff --git a/packages/frontend/core/src/modules/editor/entities/editor.ts b/packages/frontend/core/src/modules/editor/entities/editor.ts index a5c74639479ed..6228d1c9e1801 100644 --- a/packages/frontend/core/src/modules/editor/entities/editor.ts +++ b/packages/frontend/core/src/modules/editor/entities/editor.ts @@ -1,3 +1,4 @@ +import type { DefaultOpenProperty } from '@affine/core/components/doc-properties'; import type { DocMode, EdgelessRootService, @@ -30,6 +31,9 @@ export class Editor extends Entity { this.workspaceService.workspace.openOptions.isSharedMode; readonly editorContainer$ = new LiveData(null); + readonly defaultOpenProperty$ = new LiveData( + undefined + ); isPresenting$ = new LiveData(false); @@ -61,6 +65,10 @@ export class Editor extends Entity { this.editorContainer$.next(editorContainer); } + setDefaultOpenProperty(defaultOpenProperty: DefaultOpenProperty | undefined) { + this.defaultOpenProperty$.next(defaultOpenProperty); + } + /** * sync editor params with view query string */ @@ -103,6 +111,17 @@ export class Editor extends Entity { if (!isEqual(selector, omit(editorParams, ['mode']))) { this.setSelector(selector); } + + if (params.databaseId && params.databaseRowId) { + const defaultOpenProperty: DefaultOpenProperty = { + type: 'database', + databaseId: params.databaseId, + databaseRowId: params.databaseRowId, + }; + if (!isEqual(defaultOpenProperty, this.defaultOpenProperty$.value)) { + this.setDefaultOpenProperty(defaultOpenProperty); + } + } } finally { updating = false; } diff --git a/packages/frontend/core/src/modules/navigation/utils.ts b/packages/frontend/core/src/modules/navigation/utils.ts index c1f7db8ef1bb2..e3bf3185af162 100644 --- a/packages/frontend/core/src/modules/navigation/utils.ts +++ b/packages/frontend/core/src/modules/navigation/utils.ts @@ -129,7 +129,14 @@ export const preprocessParams = ( result.elementIds = result.elementIds.filter(v => v.length); } - return pick(result, ['mode', 'blockIds', 'elementIds', 'refreshKey']); + return pick(result, [ + 'mode', + 'blockIds', + 'elementIds', + 'databaseId', + 'databaseRowId', + 'refreshKey', + ]); }; export const paramsParseOptions: ParseOptions = { @@ -142,6 +149,8 @@ export const paramsParseOptions: ParseOptions = { value.length ? value.split(',').filter(v => v.length) : [], elementIds: value => value.length ? value.split(',').filter(v => v.length) : [], + databaseId: 'string', + databaseRowId: 'string', refreshKey: 'string', }, }; diff --git a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts index 0f17db7d5b31b..9dfe4935d6280 100644 --- a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts +++ b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts @@ -17,6 +17,19 @@ import { firstValueFrom, map, race } from 'rxjs'; import { resolveLinkToDoc } from '../../navigation'; import type { WorkbenchService } from '../../workbench'; +export type DocReferenceInfo = { + docId: string; + mode?: DocMode; + blockIds?: string[]; + elementIds?: string[]; + databaseId?: string; + databaseRowId?: string; + /** + * viewport in edgeless mode + */ + xywh?: `[${number},${number},${number},${number}]`; +}; + export type PeekViewElement = | HTMLElement | BlockComponent @@ -25,28 +38,22 @@ export type PeekViewElement = export interface PeekViewTarget { element?: PeekViewElement; - docId?: string; - blockIds?: string[]; + docRef?: DocReferenceInfo; } export interface DocPeekViewInfo { type: 'doc'; - docId: string; - mode?: DocMode; - blockIds?: string[]; - elementIds?: string[]; - xywh?: `[${number},${number},${number},${number}]`; + docRef: DocReferenceInfo; } export type ImagePeekViewInfo = { type: 'image'; - docId: string; - blockIds: [string]; + docRef: DocReferenceInfo; }; export type AIChatBlockPeekViewInfo = { type: 'ai-chat-block'; - docId: string; + docRef: DocReferenceInfo; host: EditorHost; model: AIChatBlockModel; }; @@ -115,7 +122,9 @@ function resolvePeekInfoFromPeekTarget( const { pageId: docId } = referenceInfo; const info: DocPeekViewInfo = { type: 'doc', - docId, + docRef: { + docId, + }, }; Object.assign(info, referenceInfo.params); return info; @@ -125,14 +134,18 @@ function resolvePeekInfoFromPeekTarget( if (isEmbedLinkedDocModel(blockModel)) { const info: DocPeekViewInfo = { type: 'doc', - docId: blockModel.pageId, + docRef: { + docId: blockModel.pageId, + }, }; Object.assign(info, blockModel.params); return info; } else if (isEmbedSyncedDocModel(blockModel)) { return { type: 'doc', - docId: blockModel.pageId, + docRef: { + docId: blockModel.pageId, + }, }; } else if (isSurfaceRefModel(blockModel)) { const refModel = (element as SurfaceRefBlockComponent).referenceModel; @@ -142,21 +155,28 @@ function resolvePeekInfoFromPeekTarget( 'doc' in refModel ? refModel.doc.id : refModel.surface.doc.id; return { type: 'doc', - docId, - mode: 'edgeless', - xywh: refModel.xywh, + docRef: { + docId, + mode: 'edgeless', + xywh: refModel.xywh, + }, }; } } else if (isImageBlockModel(blockModel)) { return { type: 'image', - docId: blockModel.doc.id, - blockIds: [blockModel.id], + docRef: { + docId: blockModel.doc.id, + blockIds: [blockModel.id], + }, }; } else if (isAIChatBlockModel(blockModel)) { return { type: 'ai-chat-block', - docId: blockModel.doc.id, + docRef: { + docId: blockModel.doc.id, + blockIds: [blockModel.id], + }, model: blockModel, host: element.host, }; @@ -166,27 +186,17 @@ function resolvePeekInfoFromPeekTarget( if (maybeDoc) { const info: DocPeekViewInfo = { type: 'doc', - docId: maybeDoc.docId, + docRef: maybeDoc, }; - - if (maybeDoc.mode) { - info.mode = maybeDoc.mode; - } - if (maybeDoc.blockIds?.length) { - info.blockIds = maybeDoc.blockIds; - } - if (maybeDoc.elementIds?.length) { - info.elementIds = maybeDoc.elementIds; - } - return info; } } - } else if ('docId' in peekTarget && peekTarget.docId) { + } + + if ('docRef' in peekTarget && peekTarget.docRef) { return { type: 'doc', - docId: peekTarget.docId, - blockIds: peekTarget.blockIds, + docRef: peekTarget.docRef, }; } return; @@ -230,11 +240,7 @@ export class PeekViewEntity extends Entity { // if there is an active peek view and it is a doc peek view, we will navigate it first if (active?.info.type === 'doc' && this.show$.value?.value) { // TODO(@pengx17): scroll to the viewing position? - this.workbenchService.workbench.openDoc({ - docId: active.info.docId, - blockIds: active.info.blockIds, - elementIds: active.info.elementIds, - }); + this.workbenchService.workbench.openDoc(active.info.docRef); } this._active$.next({ target, info: resolvedInfo }); diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx index 1c921370a7b48..d716de2281d9e 100644 --- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx @@ -8,7 +8,6 @@ import { PageNotFound } from '@affine/core/desktop/pages/404'; import { EditorService } from '@affine/core/modules/editor'; import { DebugLogger } from '@affine/debug'; import { - type DocMode, type EdgelessRootService, RefNodeSlotsProvider, } from '@blocksuite/affine/blocks'; @@ -24,6 +23,7 @@ import clsx from 'clsx'; import { useCallback, useEffect } from 'react'; import { WorkbenchService } from '../../../workbench'; +import type { DocReferenceInfo } from '../../entities/peek-view'; import { PeekViewService } from '../../services/peek-view'; import { useEditor } from '../utils'; import * as styles from './doc-peek-view.css'; @@ -81,6 +81,7 @@ function DocPeekPreviewEditor({ const doc = editor.doc; const workspace = editor.doc.workspace; const mode = useLiveData(editor.mode$); + const defaultOpenProperty = useLiveData(editor.defaultOpenProperty$); const workbench = useService(WorkbenchService).workbench; const peekView = useService(PeekViewService).peekView; const editorElement = useLiveData(editor.editorContainer$); @@ -100,7 +101,7 @@ function DocPeekPreviewEditor({ refNodeSlots.docLinkClicked.on(options => { peekView .open({ - docId: options.pageId, + docRef: { docId: options.pageId }, ...options.params, }) .catch(console.error); @@ -158,6 +159,7 @@ function DocPeekPreviewEditor({ mode={mode} page={doc.blockSuiteDoc} onEditorReady={handleOnEditorReady} + defaultOpenProperty={defaultOpenProperty} /> @@ -171,23 +173,24 @@ function DocPeekPreviewEditor({ ); } -export function DocPeekPreview({ - docId, - blockIds, - elementIds, - mode, - xywh, -}: { - docId: string; - blockIds?: string[]; - elementIds?: string[]; - mode?: DocMode; - xywh?: `[${number},${number},${number},${number}]`; -}) { - const { doc, editor, loading } = useEditor(docId, mode, { - blockIds, - elementIds, - }); +export function DocPeekPreview({ docRef }: { docRef: DocReferenceInfo }) { + const { docId, blockIds, elementIds, mode, xywh, databaseId, databaseRowId } = + docRef; + const { doc, editor, loading } = useEditor( + docId, + mode, + { + blockIds, + elementIds, + }, + databaseId && databaseRowId + ? { + databaseId, + databaseRowId, + type: 'database', + } + : undefined + ); // if sync engine has been synced and the page is null, show 404 page. if (!doc || !editor) { diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx index 20849c9fcfc0d..d08fd99202d25 100644 --- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx @@ -20,6 +20,7 @@ import { import { DocInfoService } from '../../doc-info'; import { WorkbenchService } from '../../workbench'; +import type { DocReferenceInfo } from '../entities/peek-view'; import { PeekViewService } from '../services/peek-view'; import * as styles from './peek-view-controls.css'; @@ -60,10 +61,8 @@ export const ControlButton = ({ }; type DocPeekViewControlsProps = HTMLAttributes & { - docId: string; mode?: DocMode; - blockIds?: string[]; - elementIds?: string[]; + docRef: DocReferenceInfo; }; export const DefaultPeekViewControls = ({ @@ -92,10 +91,7 @@ export const DefaultPeekViewControls = ({ }; export const DocPeekViewControls = ({ - docId, - mode, - blockIds, - elementIds, + docRef, className, ...rest }: DocPeekViewControlsProps) => { @@ -116,7 +112,7 @@ export const DocPeekViewControls = ({ name: t['com.affine.peek-view-controls.open-doc'](), nameKey: 'open', onClick: () => { - workbench.openDoc({ docId, mode, blockIds, elementIds }); + workbench.openDoc(docRef); peekView.close('none'); }, }, @@ -125,10 +121,7 @@ export const DocPeekViewControls = ({ nameKey: 'new-tab', name: t['com.affine.peek-view-controls.open-doc-in-new-tab'](), onClick: () => { - workbench.openDoc( - { docId, mode, blockIds, elementIds }, - { at: 'new-tab' } - ); + workbench.openDoc(docRef, { at: 'new-tab' }); peekView.close('none'); }, }, @@ -137,7 +130,7 @@ export const DocPeekViewControls = ({ nameKey: 'split-view', name: t['com.affine.peek-view-controls.open-doc-in-split-view'](), onClick: () => { - workbench.openDoc({ docId, mode }, { at: 'beside' }); + workbench.openDoc(docRef, { at: 'beside' }); peekView.close('none'); }, }, @@ -146,20 +139,13 @@ export const DocPeekViewControls = ({ nameKey: 'info', name: t['com.affine.peek-view-controls.open-info'](), onClick: () => { - docInfoService.modal.open(docId); + docInfoService.modal.open( + typeof docRef === 'string' ? docRef : docRef.docId + ); }, }, ].filter((opt): opt is ControlButtonProps => Boolean(opt)); - }, [ - t, - peekView, - workbench, - docId, - mode, - blockIds, - elementIds, - docInfoService.modal, - ]); + }, [t, peekView, workbench, docRef, docInfoService.modal]); return (
{controls.map(option => ( diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx index 5ee69feb7eaf4..f2fe712a6090c 100644 --- a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx @@ -22,20 +22,15 @@ function renderPeekView({ info }: ActivePeekView) { return toReactNode(info.template); } if (info.type === 'doc') { - return ( - - ); + return ; } - if (info.type === 'image') { + if (info.type === 'image' && info.docRef.blockIds?.[0]) { return ( - + ); } @@ -49,14 +44,7 @@ function renderPeekView({ info }: ActivePeekView) { const renderControls = ({ info }: ActivePeekView) => { if (info.type === 'doc') { - return ( - - ); + return ; } if (info.type === 'image') { diff --git a/packages/frontend/core/src/modules/peek-view/view/utils.ts b/packages/frontend/core/src/modules/peek-view/view/utils.ts index 765ac2ff26330..27dadbcc61268 100644 --- a/packages/frontend/core/src/modules/peek-view/view/utils.ts +++ b/packages/frontend/core/src/modules/peek-view/view/utils.ts @@ -1,3 +1,4 @@ +import type { DefaultOpenProperty } from '@affine/core/components/doc-properties'; import type { DocMode } from '@blocksuite/affine/blocks'; import type { Doc } from '@toeverything/infra'; import { @@ -13,7 +14,8 @@ import { type Editor, type EditorSelector, EditorsService } from '../../editor'; export const useEditor = ( pageId: string, preferMode?: DocMode, - preferSelector?: EditorSelector + preferSelector?: EditorSelector, + defaultOpenProperty?: DefaultOpenProperty ) => { const currentWorkspace = useService(WorkspaceService).workspace; const docsService = useService(DocsService); @@ -22,7 +24,7 @@ export const useEditor = ( const docRecord = docRecordList.doc$(pageId).value; const preferModeRef = useRef(preferMode); const preferSelectorRef = useRef(preferSelector); - + const defaultOpenPropertyRef = useRef(defaultOpenProperty); const [doc, setDoc] = useState(null); const [editor, setEditor] = useState(null); @@ -44,6 +46,7 @@ export const useEditor = ( const editor = doc.scope.get(EditorsService).createEditor(); editor.setMode(preferModeRef.current || doc.primaryMode$.value); editor.setSelector(preferSelectorRef.current); + editor.setDefaultOpenProperty(defaultOpenPropertyRef.current); setEditor(editor); return () => { editor.dispose();