Skip to content

Commit

Permalink
feat(blocks): allow peek view to be closed by the caller
Browse files Browse the repository at this point in the history
  • Loading branch information
@pengx17
pengx17 committed Oct 22, 2024
1 parent 8eae597 commit 03cb2c8
Show file tree
Hide file tree
Showing 8 changed files with 324 additions and 271 deletions.
19 changes: 18 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,23 @@
"which-typed-array": "npm:@nolyfill/which-typed-array@latest",
"@reforged/maker-appimage/@electron-forge/maker-base": "7.5.0",
"macos-alias": "npm:@napi-rs/[email protected]",
"fs-xattr": "npm:@napi-rs/xattr@latest"
"fs-xattr": "npm:@napi-rs/xattr@latest",
"@blocksuite/affine": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/all",
"@blocksuite/affine-block-embed": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/block-embed",
"@blocksuite/affine-block-list": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/block-list",
"@blocksuite/affine-block-paragraph": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/block-paragraph",
"@blocksuite/affine-block-surface": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/block-surface",
"@blocksuite/affine-components": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/components",
"@blocksuite/data-view": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/data-view",
"@blocksuite/affine-model": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/model",
"@blocksuite/affine-shared": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/shared",
"@blocksuite/affine-widget-scroll-anchoring": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/affine/widget-scroll-anchoring",
"@blocksuite/blocks": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/blocks",
"@blocksuite/block-std": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/framework/block-std",
"@blocksuite/global": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/framework/global",
"@blocksuite/inline": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/framework/inline",
"@blocksuite/store": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/framework/store",
"@blocksuite/sync": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/framework/sync",
"@blocksuite/presets": "portal:/C:/Users/xp/Documents/GitHub/blocksuite/packages/presets"
}
}
6 changes: 5 additions & 1 deletion packages/frontend/core/src/components/affine/reference-link/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,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) {
Expand Down
27 changes: 22 additions & 5 deletions ...frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -35,6 +34,8 @@ import type {
AffineReference,
DocMode,
DocModeProvider,
PeekOptions,
PeekViewService as BSPeekViewService,
QuickSearchResult,
RootService,
} from '@blocksuite/affine/blocks';
Expand Down Expand Up @@ -243,11 +244,27 @@ 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,
...props,
},
template,
options?.abortSignal
);
},
});
} satisfies BSPeekViewService);
}

export function patchDocModeService(
Expand Down
174 changes: 103 additions & 71 deletions packages/frontend/core/src/modules/peek-view/entities/peek-view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,17 @@ import { firstValueFrom, map, race } from 'rxjs';
import { resolveLinkToDoc } from '../../navigation';
import type { WorkbenchService } from '../../workbench';

export type PeekViewTarget =
export type PeekViewElement =
| HTMLElement
| BlockComponent
| AffineReference
| HTMLAnchorElement
| { docId: string; blockIds?: string[] };
| HTMLAnchorElement;

export interface PeekViewTarget {
element?: PeekViewElement;
docId?: string;
blockIds?: string[];
}

export interface DocPeekViewInfo {
type: 'doc';
Expand Down Expand Up @@ -101,79 +106,83 @@ function resolvePeekInfoFromPeekTarget(
};
}

if (peekTarget instanceof AffineReference) {
const referenceInfo = peekTarget.referenceInfo;
if (referenceInfo) {
const { pageId: docId } = referenceInfo;
const info: DocPeekViewInfo = {
type: 'doc',
docId,
};
Object.assign(info, referenceInfo.params);
return info;
}
} else if ('model' in peekTarget) {
const blockModel = peekTarget.model;
if (isEmbedLinkedDocModel(blockModel)) {
const info: DocPeekViewInfo = {
type: 'doc',
docId: blockModel.pageId,
};
Object.assign(info, blockModel.params);
return info;
} else if (isEmbedSyncedDocModel(blockModel)) {
return {
type: 'doc',
docId: blockModel.pageId,
};
} else if (isSurfaceRefModel(blockModel)) {
const refModel = (peekTarget as SurfaceRefBlockComponent).referenceModel;
// refModel can be null if the reference is invalid
if (refModel) {
const docId =
'doc' in refModel ? refModel.doc.id : refModel.surface.doc.id;
return {
const element = peekTarget.element;

if (element) {
if (element instanceof AffineReference) {
const referenceInfo = element.referenceInfo;
if (referenceInfo) {
const { pageId: docId } = referenceInfo;
const info: DocPeekViewInfo = {
type: 'doc',
docId,
mode: 'edgeless',
xywh: refModel.xywh,
};
Object.assign(info, referenceInfo.params);
return info;
}
} else if (isImageBlockModel(blockModel)) {
return {
type: 'image',
docId: blockModel.doc.id,
blockIds: [blockModel.id],
};
} else if (isAIChatBlockModel(blockModel)) {
return {
type: 'ai-chat-block',
docId: blockModel.doc.id,
model: blockModel,
host: peekTarget.host,
};
}
} else if (peekTarget instanceof HTMLAnchorElement) {
const maybeDoc = resolveLinkToDoc(peekTarget.href);
if (maybeDoc) {
const info: DocPeekViewInfo = {
type: 'doc',
docId: maybeDoc.docId,
};

if (maybeDoc.mode) {
info.mode = maybeDoc.mode;
}
if (maybeDoc.blockIds?.length) {
info.blockIds = maybeDoc.blockIds;
}
if (maybeDoc.elementIds?.length) {
info.elementIds = maybeDoc.elementIds;
} else if ('model' in element) {
const blockModel = element.model;
if (isEmbedLinkedDocModel(blockModel)) {
const info: DocPeekViewInfo = {
type: 'doc',
docId: blockModel.pageId,
};
Object.assign(info, blockModel.params);
return info;
} else if (isEmbedSyncedDocModel(blockModel)) {
return {
type: 'doc',
docId: blockModel.pageId,
};
} else if (isSurfaceRefModel(blockModel)) {
const refModel = (element as SurfaceRefBlockComponent).referenceModel;
// refModel can be null if the reference is invalid
if (refModel) {
const docId =
'doc' in refModel ? refModel.doc.id : refModel.surface.doc.id;
return {
type: 'doc',
docId,
mode: 'edgeless',
xywh: refModel.xywh,
};
}
} else if (isImageBlockModel(blockModel)) {
return {
type: 'image',
docId: blockModel.doc.id,
blockIds: [blockModel.id],
};
} else if (isAIChatBlockModel(blockModel)) {
return {
type: 'ai-chat-block',
docId: blockModel.doc.id,
model: blockModel,
host: element.host,
};
}
} else if (element instanceof HTMLAnchorElement) {
const maybeDoc = resolveLinkToDoc(element.href);
if (maybeDoc) {
const info: DocPeekViewInfo = {
type: 'doc',
docId: maybeDoc.docId,
};

return info;
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) {
} else if ('docId' in peekTarget && peekTarget.docId) {
return {
type: 'doc',
docId: peekTarget.docId,
Expand Down Expand Up @@ -208,7 +217,8 @@ export class PeekViewEntity extends Entity {
// return true if the peek view will be handled
open = async (
target: ActivePeekView['target'],
template?: TemplateResult
template?: TemplateResult,
abortSignal?: AbortSignal
) => {
const resolvedInfo = resolvePeekInfoFromPeekTarget(target, template);
if (!resolvedInfo) {
Expand All @@ -220,7 +230,11 @@ 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(active.info.docId);
this.workbenchService.workbench.openDoc({
docId: active.info.docId,
blockIds: active.info.blockIds,
elementIds: active.info.elementIds,
});
}

this._active$.next({ target, info: resolvedInfo });
Expand All @@ -231,6 +245,24 @@ export class PeekViewEntity extends Entity {
? 'zoom'
: 'fade',
});

if (abortSignal) {
const abortListener = () => {
if (this.active$.value?.target === target) {
this.close();
}
};

abortSignal.addEventListener('abort', abortListener);

const showSubscription = this.show$.subscribe(v => {
if (!v && !abortSignal.aborted) {
abortSignal.removeEventListener('abort', abortListener);
showSubscription.unsubscribe();
}
});
}

return firstValueFrom(race(this._active$, this.show$).pipe(map(() => {})));
};

Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ function DocPeekPreviewEditor({
if (!refNodeSlots) return;
// doc change event inside peek view should be handled by peek view
disposableGroup.add(
// todo(@pengx17): seems not working
refNodeSlots.docLinkClicked.on(options => {
peekView
.open({
type: 'doc',
docId: options.pageId,
...options.params,
})
Expand Down
8 changes: 4 additions & 4 deletions packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ const getRendererProps = (
children: preview,
controls,
target:
activePeekView?.target instanceof HTMLElement
? activePeekView.target
activePeekView?.target.element instanceof HTMLElement
? activePeekView.target.element
: undefined,
mode: getMode(activePeekView.info),
dialogFrame: activePeekView.info.type !== 'image',
Expand All @@ -108,8 +108,8 @@ export const PeekViewManagerModal = () => {

useEffect(() => {
const subscription = peekViewEntity.show$.subscribe(() => {
if (activePeekView?.target instanceof BlockComponent) {
activePeekView.target.requestUpdate();
if (activePeekView?.target.element instanceof BlockComponent) {
activePeekView.target.element.requestUpdate();
}
});

Expand Down
18 changes: 9 additions & 9 deletions packages/frontend/i18n/src/i18n-completenesses.json
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
{
"ar": 86,
"ar": 85,
"ca": 6,
"da": 7,
"da": 6,
"de": 32,
"en": 100,
"es-AR": 15,
"es-CL": 18,
"es-CL": 17,
"es": 15,
"fr": 77,
"fr": 75,
"hi": 2,
"it": 1,
"ja": 100,
"ko": 91,
"ja": 99,
"ko": 89,
"pl": 0,
"pt-BR": 99,
"ru": 84,
"pt-BR": 97,
"ru": 83,
"sv-SE": 5,
"ur": 3,
"zh-Hans": 99,
"zh-Hant": 99
"zh-Hant": 97
}
Loading

0 comments on commit 03cb2c8

Please sign in to comment.