feat(editor): add more open doc options to editor toolbar (#9588)

fix AF-2036, AF-2092
This commit is contained in:
pengx17
2025-01-09 08:04:21 +00:00
parent 890a962196
commit f78857bb11
41 changed files with 558 additions and 271 deletions
+1 -4
View File
@@ -17,7 +17,6 @@ import type {
insertEmbedLinkedDocCommand,
} from './embed-linked-doc-block/commands/insert-embed-linked-doc';
import { EmbedEdgelessLinkedDocBlockComponent } from './embed-linked-doc-block/embed-edgeless-linked-doc-block';
import type { EmbedLinkedDocBlockConfig } from './embed-linked-doc-block/embed-linked-doc-config';
import {
EmbedLoomBlockComponent,
type EmbedLoomBlockService,
@@ -123,9 +122,7 @@ declare global {
interface CommandContext {
insertedLinkType?: Promise<InsertedLinkType>;
}
interface BlockConfigs {
'affine:embed-linked-doc': EmbedLinkedDocBlockConfig;
}
interface Commands {
insertEmbedLinkedDoc: typeof insertEmbedLinkedDocCommand;
}
@@ -4,7 +4,11 @@ import {
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { FeatureFlagService } from '@blocksuite/affine-shared/services';
import { cloneReferenceInfoWithoutAliases } from '@blocksuite/affine-shared/utils';
import {
cloneReferenceInfoWithoutAliases,
isNewTabTrigger,
isNewViewTrigger,
} from '@blocksuite/affine-shared/utils';
import { Bound } from '@blocksuite/global/utils';
import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
@@ -65,9 +69,10 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
}
protected override _handleClick(evt: MouseEvent): void {
if (this.config.handleClick) {
this.config.handleClick(evt, this.host, this.referenceInfo$.peek());
return;
if (isNewTabTrigger(evt)) {
this.open({ openMode: 'open-in-new-tab', event: evt });
} else if (isNewViewTrigger(evt)) {
this.open({ openMode: 'open-in-new-view', event: evt });
}
}
}
@@ -14,11 +14,15 @@ import {
DocDisplayMetaProvider,
DocModeProvider,
FeatureFlagService,
OpenDocExtensionIdentifier,
type OpenDocMode,
ThemeProvider,
} from '@blocksuite/affine-shared/services';
import {
cloneReferenceInfo,
cloneReferenceInfoWithoutAliases,
isNewTabTrigger,
isNewViewTrigger,
matchFlavours,
referenceToNode,
} from '@blocksuite/affine-shared/utils';
@@ -39,10 +43,6 @@ import {
renderLinkedDocInCard,
} from '../common/render-linked-doc.js';
import { SyncedDocErrorIcon } from '../embed-synced-doc-block/styles.js';
import {
type EmbedLinkedDocBlockConfig,
EmbedLinkedDocBlockConfigIdentifier,
} from './embed-linked-doc-config.js';
import { styles } from './styles.js';
import { getEmbedLinkedDocIcons } from './utils.js';
@@ -205,10 +205,18 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
.icon(pageId, { params, title, referenced: true }).value;
});
open = () => {
this.std
.getOptional(RefNodeSlotsProvider)
?.docLinkClicked.emit(this.referenceInfo$.peek());
open = ({
openMode,
event,
}: {
openMode?: OpenDocMode;
event?: MouseEvent;
} = {}) => {
this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
...this.referenceInfo$.peek(),
openMode,
event,
});
};
refreshData = () => {
@@ -228,12 +236,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
);
});
get config(): EmbedLinkedDocBlockConfig {
return (
this.std.provider.getOptional(EmbedLinkedDocBlockConfigIdentifier) || {}
);
}
get docTitle() {
return this.model.title || this.linkedDoc?.meta?.title || 'Untitled';
}
@@ -247,22 +249,16 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
}
private _handleDoubleClick(event: MouseEvent) {
if (this.config.handleDoubleClick) {
this.config.handleDoubleClick(
event,
this.host,
this.referenceInfo$.peek()
);
if (event.defaultPrevented) {
return;
}
}
if (isPeekable(this)) {
return;
}
event.stopPropagation();
this.open();
const openDocService = this.std.get(OpenDocExtensionIdentifier);
const shouldOpenInPeek =
openDocService.isAllowed('open-in-center-peek') && isPeekable(this);
this.open({
openMode: shouldOpenInPeek
? 'open-in-center-peek'
: 'open-in-active-view',
event,
});
}
private _isDocEmpty() {
@@ -274,13 +270,11 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
}
protected _handleClick(event: MouseEvent) {
if (this.config.handleClick) {
this.config.handleClick(event, this.host, this.referenceInfo$.peek());
if (event.defaultPrevented) {
return;
}
if (isNewTabTrigger(event)) {
this.open({ openMode: 'open-in-new-tab', event });
} else if (isNewViewTrigger(event)) {
this.open({ openMode: 'open-in-new-view', event });
}
this._selectBlock();
}
@@ -1,30 +0,0 @@
import type { ReferenceInfo } from '@blocksuite/affine-model';
import type { EditorHost } from '@blocksuite/block-std';
import { createIdentifier } from '@blocksuite/global/di';
import type { ExtensionType } from '@blocksuite/store';
export interface EmbedLinkedDocBlockConfig {
handleClick?: (
e: MouseEvent,
host: EditorHost,
referenceInfo: ReferenceInfo
) => void;
handleDoubleClick?: (
e: MouseEvent,
host: EditorHost,
referenceInfo: ReferenceInfo
) => void;
}
export const EmbedLinkedDocBlockConfigIdentifier =
createIdentifier<EmbedLinkedDocBlockConfig>('EmbedLinkedDocBlockConfig');
export function EmbedLinkedDocBlockConfigExtension(
config: EmbedLinkedDocBlockConfig
): ExtensionType {
return {
setup: di => {
di.addImpl(EmbedLinkedDocBlockConfigIdentifier, () => config);
},
};
}
@@ -1,5 +1,4 @@
export * from './adapters';
export type { InsertedLinkType } from './commands';
export * from './embed-linked-doc-block';
export * from './embed-linked-doc-config';
export * from './embed-linked-doc-spec';
@@ -1,5 +1,8 @@
import { Peekable } from '@blocksuite/affine-components/peek';
import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
import {
type DocLinkClickedEvent,
RefNodeSlotsProvider,
} from '@blocksuite/affine-components/rich-text';
import {
type AliasInfo,
type DocMode,
@@ -305,11 +308,13 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
.icon(pageId, { params, referenced: true }).value;
});
open = () => {
open = (event?: Partial<DocLinkClickedEvent>) => {
const pageId = this.model.pageId;
if (pageId === this.doc.id) return;
this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({ pageId });
this.std
.getOptional(RefNodeSlotsProvider)
?.docLinkClicked.emit({ ...event, pageId });
};
refreshData = () => {
@@ -1,4 +1,7 @@
export { AffineLink, toggleLinkPopup } from './link-node/index.js';
export * from './reference-node/reference-config.js';
export { AffineReference } from './reference-node/reference-node.js';
export type { RefNodeSlots } from './reference-node/types.js';
export type {
DocLinkClickedEvent,
RefNodeSlots,
} from './reference-node/types.js';
@@ -3,6 +3,8 @@ import {
FeatureFlagService,
GenerateDocUrlProvider,
type LinkEventType,
OpenDocExtensionIdentifier,
type OpenDocMode,
type TelemetryEvent,
TelemetryProvider,
} from '@blocksuite/affine-shared/services';
@@ -26,11 +28,9 @@ import { join } from 'lit/directives/join.js';
import { repeat } from 'lit/directives/repeat.js';
import {
CenterPeekIcon,
CopyIcon,
DeleteIcon,
EditIcon,
ExpandFullSmallIcon,
MoreVerticalIcon,
OpenIcon,
SmallArrowDownIcon,
@@ -47,6 +47,7 @@ import { RefNodeSlotsProvider } from '../../../../extension/index.js';
import type { AffineInlineEditor } from '../../affine-inline-specs.js';
import { ReferenceAliasPopup } from './reference-alias-popup.js';
import { styles } from './styles.js';
import type { DocLinkClickedEvent } from './types.js';
export class ReferencePopup extends WithDisposable(LitElement) {
static override styles = styles;
@@ -66,10 +67,11 @@ export class ReferencePopup extends WithDisposable(LitElement) {
track(this.std, 'CopiedLink', { control: 'copy link' });
};
private readonly _openDoc = () => {
this.std
.getOptional(RefNodeSlotsProvider)
?.docLinkClicked.emit(this.referenceInfo);
private readonly _openDoc = (event?: Partial<DocLinkClickedEvent>) => {
this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
...this.referenceInfo,
...event,
});
};
private readonly _openEditPopup = (e: MouseEvent) => {
@@ -134,8 +136,11 @@ export class ReferencePopup extends WithDisposable(LitElement) {
);
}
get _openButtonDisabled() {
return this.referenceDocId === this.doc.id;
_openButtonDisabled(openMode?: OpenDocMode) {
if (openMode === 'open-in-active-view') {
return this.referenceDocId === this.doc.id;
}
return false;
}
get block() {
@@ -246,28 +251,37 @@ export class ReferencePopup extends WithDisposable(LitElement) {
}
private _openMenuButton() {
const buttons: MenuItem[] = [
{
label: 'Open this doc',
type: 'open-this-doc',
icon: ExpandFullSmallIcon,
action: this._openDoc,
disabled: this._openButtonDisabled,
},
];
const openDocConfig = this.std.get(OpenDocExtensionIdentifier);
// open in new tab
if (isPeekable(this.target)) {
buttons.push({
label: 'Open in center peek',
type: 'open-in-center-peek',
icon: CenterPeekIcon,
action: () => peek(this.target),
});
}
// open in split view
const buttons: MenuItem[] = openDocConfig.items
.map(item => {
if (
(item.type === 'open-in-center-peek' && !isPeekable(this.target)) ||
!openDocConfig?.isAllowed(item.type)
) {
return null;
}
return {
label: item.label,
type: item.type,
icon: item.icon,
action: () => {
if (item.type === 'open-in-center-peek') {
peek(this.target);
} else {
this._openDoc({ openMode: item.type });
}
},
disabled: this._openButtonDisabled(item.type),
when: () => {
if (item.type === 'open-in-center-peek') {
return isPeekable(this.target);
}
return openDocConfig?.isAllowed(item.type) ?? true;
},
};
})
.filter(item => item !== null);
if (buttons.length === 0) {
return nothing;
@@ -1,6 +1,13 @@
import type { ReferenceInfo } from '@blocksuite/affine-model';
import type { OpenDocMode } from '@blocksuite/affine-shared/services';
import type { Slot } from '@blocksuite/global/utils';
export type RefNodeSlots = {
docLinkClicked: Slot<ReferenceInfo>;
export type DocLinkClickedEvent = ReferenceInfo & {
// default is active view
openMode?: OpenDocMode;
event?: MouseEvent;
};
export type RefNodeSlots = {
docLinkClicked: Slot<DocLinkClickedEvent>;
};
@@ -204,6 +204,7 @@ export class EditorMenuAction extends LitElement {
::slotted(svg) {
color: var(--affine-icon-color);
font-size: 20px;
}
`;
@@ -9,6 +9,7 @@ export * from './font-loader';
export * from './generate-url-service';
export * from './native-clipboard-service';
export * from './notification-service';
export * from './open-doc-config';
export * from './page-viewport-service';
export * from './parse-url-service';
export * from './quick-search-service';
@@ -0,0 +1,59 @@
import { createIdentifier } from '@blocksuite/global/di';
import { CenterPeekIcon, ExpandFullIcon } from '@blocksuite/icons/lit';
import { type ExtensionType } from '@blocksuite/store';
import type { TemplateResult } from 'lit';
export type OpenDocMode =
| 'open-in-active-view'
| 'open-in-new-view'
| 'open-in-new-tab'
| 'open-in-center-peek';
// todo: later this will be used to generate the menu items.
// for now we only use it as a hint for whether or not to show the open doc buttons.
export interface OpenDocConfigItem {
type: OpenDocMode;
label: string;
icon: TemplateResult<1>;
}
export interface OpenDocConfig {
items: OpenDocConfigItem[];
}
export interface OpenDocService {
isAllowed: (mode: OpenDocMode) => boolean;
items: OpenDocConfig['items'];
}
export const OpenDocExtensionIdentifier = createIdentifier<OpenDocService>(
'AffineOpenDocExtension'
);
const defaultConfig: OpenDocConfig = {
items: [
{
type: 'open-in-active-view',
label: 'Open this doc',
icon: ExpandFullIcon(),
},
{
type: 'open-in-center-peek',
label: 'Open in center peek',
icon: CenterPeekIcon(),
},
],
};
export const OpenDocExtension = (config: OpenDocConfig): ExtensionType => ({
setup: di => {
di.override(OpenDocExtensionIdentifier, () => {
const allowedOpenDocModes = new Set(config.items.map(item => item.type));
return {
isAllowed: (mode: OpenDocMode) => allowedOpenDocModes.has(mode),
items: config.items,
};
});
},
});
export const DefaultOpenDocExtension = OpenDocExtension(defaultConfig);
@@ -44,6 +44,16 @@ export function isControlledKeyboardEvent(e: KeyboardEvent) {
return e.ctrlKey || e.metaKey || e.altKey;
}
export function isNewTabTrigger(event?: MouseEvent) {
return event
? (event.ctrlKey || event.metaKey || event.button === 1) && !event.altKey
: false;
}
export function isNewViewTrigger(event?: MouseEvent) {
return event ? (event.ctrlKey || event.metaKey) && event.altKey : false;
}
export function on<
T extends HTMLElement,
K extends keyof M,
+2
View File
@@ -28,6 +28,7 @@ import {
RichTextExtensions,
} from '@blocksuite/affine-components/rich-text';
import {
DefaultOpenDocExtension,
DocDisplayMetaService,
EditPropsStore,
FeatureFlagService,
@@ -54,6 +55,7 @@ export const CommonBlockSpecs: ExtensionType[] = [
CodeBlockSpec,
ImageBlockSpec,
ParagraphBlockSpec,
DefaultOpenDocExtension,
].flat();
export const PageFirstPartyBlockSpecs: ExtensionType[] = [
@@ -13,7 +13,6 @@ import {
import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
import {
CaptionIcon,
CenterPeekIcon,
CopyIcon,
EditIcon,
ExpandFullSmallIcon,
@@ -44,6 +43,8 @@ import {
GenerateDocUrlProvider,
type GenerateDocUrlService,
type LinkEventType,
OpenDocExtensionIdentifier,
type OpenDocMode,
type TelemetryEvent,
TelemetryProvider,
ThemeProvider,
@@ -266,8 +267,8 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
return bound.h / EMBED_CARD_HEIGHT[this.model.style];
};
private readonly _open = () => {
this._blockComponent?.open();
private readonly _open = ({ openMode }: { openMode?: OpenDocMode } = {}) => {
this._blockComponent?.open({ openMode });
};
private readonly _openEditPopup = (e: MouseEvent) => {
@@ -493,12 +494,6 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
);
}
get _openButtonDisabled() {
return (
isEmbedLinkedDocBlock(this.model) && this.model.pageId === this._doc.id
);
}
get _originalDocInfo(): AliasInfo | undefined {
const model = this.model;
const doc = isInternalEmbedModel(model)
@@ -543,20 +538,46 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
}
private _openMenuButton() {
const buttons: MenuItem[] = [];
const openDocConfig = this.std.get(OpenDocExtensionIdentifier);
const buttons: MenuItem[] = openDocConfig.items
.map(item => {
if (
item.type === 'open-in-center-peek' &&
this._blockComponent &&
!isPeekable(this._blockComponent)
) {
return null;
}
if (
isEmbedLinkedDocBlock(this.model) ||
isEmbedSyncedDocBlock(this.model)
) {
buttons.push({
type: 'open-this-doc',
label: 'Open this doc',
icon: ExpandFullSmallIcon,
action: this._open,
disabled: this._openButtonDisabled,
});
} else if (this._canShowFullScreenButton) {
if (
!(
isEmbedLinkedDocBlock(this.model) ||
isEmbedSyncedDocBlock(this.model)
)
) {
return null;
}
return {
label: item.label,
type: item.type,
icon: item.icon,
disabled:
this.model.pageId === this._doc.id &&
item.type === 'open-in-active-view',
action: () => {
if (item.type === 'open-in-center-peek') {
this._peek();
} else {
this._open({ openMode: item.type });
}
},
};
})
.filter(item => item !== null);
// todo: abstract this?
if (this._canShowFullScreenButton) {
buttons.push({
type: 'open-this-doc',
label: 'Open this doc',
@@ -565,19 +586,6 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
});
}
// open in new tab
if (this._blockComponent && isPeekable(this._blockComponent)) {
buttons.push({
type: 'open-in-center-peek',
label: 'Open in center peek',
icon: CenterPeekIcon,
action: () => this._peek(),
});
}
// open in split view
if (buttons.length === 0) {
return nothing;
}
@@ -12,7 +12,10 @@ import type { ImageBlockComponent } from '@blocksuite/affine-block-image';
import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
import { isPeekable, peek } from '@blocksuite/affine-components/peek';
import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
import { TelemetryProvider } from '@blocksuite/affine-shared/services';
import {
OpenDocExtensionIdentifier,
TelemetryProvider,
} from '@blocksuite/affine-shared/services';
import { Bound, getCommonBoundWithRotation } from '@blocksuite/global/utils';
import {
ArrowDownBigBottomIcon,
@@ -23,11 +26,13 @@ import {
CopyIcon,
DeleteIcon,
DuplicateIcon,
ExpandFullIcon,
FrameIcon,
GroupIcon,
LinkedPageIcon,
OpenInNewIcon,
ResetIcon,
SplitViewIcon,
} from '@blocksuite/icons/lit';
import { duplicate } from '../../../edgeless/utils/clipboard-utils.js';
@@ -135,11 +140,12 @@ export const reorderGroup: MenuItemGroup<ElementToolbarMoreMenuContext> = {
};
// Open Group
// TODO: construct this group dynamically
export const openGroup: MenuItemGroup<ElementToolbarMoreMenuContext> = {
type: 'open',
items: [
{
icon: OpenInNewIcon({ width: '20', height: '20' }),
icon: ExpandFullIcon({ width: '20', height: '20' }),
label: 'Open this doc',
type: 'open',
generate: ctx => {
@@ -163,6 +169,62 @@ export const openGroup: MenuItemGroup<ElementToolbarMoreMenuContext> = {
disabled,
};
},
when: ctx => {
const openDocService = ctx.std.get(OpenDocExtensionIdentifier);
return openDocService.isAllowed('open-in-active-view');
},
},
{
icon: SplitViewIcon({ width: '20', height: '20' }),
label: 'Open in split view',
type: 'open-in-split-view',
generate: ctx => {
const linkedDocBlock = ctx.getLinkedDocBlock();
if (!linkedDocBlock) return;
return {
action: () => {
const blockComponent = ctx.firstBlockComponent;
if (!blockComponent) return;
if (!('open' in blockComponent)) return;
if (typeof blockComponent.open !== 'function') return;
blockComponent.open({ openMode: 'open-in-new-view' });
},
};
},
when: ctx => {
const openDocService = ctx.std.get(OpenDocExtensionIdentifier);
return openDocService.isAllowed('open-in-new-view');
},
},
{
icon: OpenInNewIcon({ width: '20', height: '20' }),
label: 'Open in new tab',
type: 'open-in-new-tab',
generate: ctx => {
const linkedDocBlock = ctx.getLinkedDocBlock();
if (!linkedDocBlock) return;
return {
action: () => {
const blockComponent = ctx.firstBlockComponent;
if (!blockComponent) return;
if (!('open' in blockComponent)) return;
if (typeof blockComponent.open !== 'function') return;
blockComponent.open({ openMode: 'open-in-new-tab' });
},
};
},
when: ctx => {
const openDocService = ctx.std.get(OpenDocExtensionIdentifier);
return openDocService.isAllowed('open-in-new-tab');
},
},
{
icon: CenterPeekIcon({ width: '20', height: '20' }),
@@ -184,6 +246,10 @@ export const openGroup: MenuItemGroup<ElementToolbarMoreMenuContext> = {
},
};
},
when: ctx => {
const openDocService = ctx.std.get(OpenDocExtensionIdentifier);
return openDocService.isAllowed('open-in-center-peek');
},
},
],
};
@@ -12,10 +12,8 @@ import {
} from '@blocksuite/affine-block-embed';
import {
CaptionIcon,
CenterPeekIcon,
CopyIcon,
EditIcon,
ExpandFullSmallIcon,
MoreVerticalIcon,
OpenIcon,
PaletteIcon,
@@ -48,6 +46,7 @@ import {
GenerateDocUrlProvider,
type GenerateDocUrlService,
type LinkEventType,
OpenDocExtensionIdentifier,
type TelemetryEvent,
TelemetryProvider,
ThemeProvider,
@@ -503,34 +502,42 @@ export class EmbedCardToolbar extends WidgetComponent<
}
private _openMenuButton() {
const buttons: MenuItem[] = [];
if (
this.focusModel &&
(isEmbedLinkedDocBlock(this.focusModel) ||
isEmbedSyncedDocBlock(this.focusModel))
) {
buttons.push({
type: 'open-this-doc',
label: 'Open this doc',
icon: ExpandFullSmallIcon,
action: () => this.focusBlock?.open(),
});
}
// open in new tab
const openDocConfig = this.std.get(OpenDocExtensionIdentifier);
const element = this.focusBlock;
if (element && isPeekable(element)) {
buttons.push({
type: 'open-in-center-peek',
label: 'Open in center peek',
icon: CenterPeekIcon,
action: () => peek(element),
});
}
const buttons: MenuItem[] = openDocConfig.items
.map(item => {
if (
item.type === 'open-in-center-peek' &&
element &&
!isPeekable(element)
) {
return null;
}
// open in split view
if (
!(
this.focusModel &&
(isEmbedLinkedDocBlock(this.focusModel) ||
isEmbedSyncedDocBlock(this.focusModel))
)
) {
return null;
}
return {
label: item.label,
type: item.type,
icon: item.icon,
action: () => {
if (item.type === 'open-in-center-peek') {
element && peek(element);
} else {
this.focusBlock?.open({ openMode: item.type });
}
},
};
})
.filter(item => item !== null);
if (buttons.length === 0) {
return nothing;
@@ -0,0 +1 @@
.build
@@ -0,0 +1,23 @@
{
"pins" : [
{
"identity" : "apollo-ios",
"kind" : "remoteSourceControl",
"location" : "https://github.com/apollographql/apollo-ios.git",
"state" : {
"revision" : "c3f48d45ec1300bc95243bf19f67284f9dc0d14a",
"version" : "1.15.3"
}
},
{
"identity" : "sqlite.swift",
"kind" : "remoteSourceControl",
"location" : "https://github.com/stephencelis/SQLite.swift.git",
"state" : {
"revision" : "a95fc6df17d108bd99210db5e8a9bac90fe984b8",
"version" : "0.15.3"
}
}
],
"version" : 2
}
@@ -1,5 +1,23 @@
{
"pins" : [
{
"identity" : "apollo-ios",
"kind" : "remoteSourceControl",
"location" : "https://github.com/apollographql/apollo-ios.git",
"state" : {
"revision" : "c3f48d45ec1300bc95243bf19f67284f9dc0d14a",
"version" : "1.15.3"
}
},
{
"identity" : "msdisplaylink",
"kind" : "remoteSourceControl",
"location" : "https://github.com/Lakr233/MSDisplayLink",
"state" : {
"revision" : "c2fcd28cb99300d83acc30860ce252ef97c20b61",
"version" : "1.1.1"
}
},
{
"identity" : "networkimage",
"kind" : "remoteSourceControl",
@@ -9,6 +27,24 @@
"version" : "6.0.1"
}
},
{
"identity" : "springinterpolation",
"kind" : "remoteSourceControl",
"location" : "https://github.com/Lakr233/SpringInterpolation",
"state" : {
"revision" : "f9d1ee3d2466bdb00fd0ade7f256ed20229c8413",
"version" : "1.3.0"
}
},
{
"identity" : "sqlite.swift",
"kind" : "remoteSourceControl",
"location" : "https://github.com/stephencelis/SQLite.swift.git",
"state" : {
"revision" : "a95fc6df17d108bd99210db5e8a9bac90fe984b8",
"version" : "0.15.3"
}
},
{
"identity" : "swift-cmark",
"kind" : "remoteSourceControl",
@@ -18,6 +54,15 @@
"version" : "0.5.0"
}
},
{
"identity" : "swift-eventsource",
"kind" : "remoteSourceControl",
"location" : "https://github.com/LaunchDarkly/swift-eventsource.git",
"state" : {
"revision" : "57051701c58a93603ffa2051f8e9cf0c8cff7814",
"version" : "3.3.0"
}
},
{
"identity" : "swift-markdown-ui",
"kind" : "remoteSourceControl",
@@ -1,6 +1,6 @@
import { TagService } from '@affine/core/modules/tag';
import { WorkspaceService } from '@affine/core/modules/workspace';
import { isNewTabTrigger } from '@affine/core/utils';
import { inferOpenMode } from '@affine/core/utils';
import { useI18n } from '@affine/i18n';
import { AllDocsIcon } from '@blocksuite/icons/rc';
import { useLiveData, useService } from '@toeverything/infra';
@@ -36,10 +36,9 @@ export const EmptyDocs = ({
const onCreate = useCallback(
(e: MouseEvent) => {
const doc = pageHelper.createPage(
undefined,
isNewTabTrigger(e) ? 'new-tab' : true
);
const doc = pageHelper.createPage(undefined, {
at: inferOpenMode(e),
});
if (tag) tag.tag(doc.id);
},
@@ -53,13 +53,13 @@ import { extendEdgelessPreviewSpec } from './specs/custom/root-block';
import {
patchDocModeService,
patchEdgelessClipboard,
patchEmbedLinkedDocBlockConfig,
patchForAttachmentEmbedViews,
patchForClipboardInElectron,
patchForMobile,
patchForSharedPage,
patchGenerateDocUrlExtension,
patchNotificationService,
patchOpenDocExtension,
patchParseDocUrlExtension,
patchPeekViewService,
patchQuickSearchService,
@@ -160,11 +160,11 @@ const usePatchSpecs = (shared: boolean, mode: DocMode) => {
patched = patched.concat(patchNotificationService(confirmModal));
patched = patched.concat(patchPeekViewService(peekViewService));
patched = patched.concat(patchOpenDocExtension());
patched = patched.concat(patchEdgelessClipboard());
patched = patched.concat(patchParseDocUrlExtension(framework));
patched = patched.concat(patchGenerateDocUrlExtension(framework));
patched = patched.concat(patchQuickSearchService(framework));
patched = patched.concat(patchEmbedLinkedDocBlockConfig(framework));
if (shared) {
patched = patched.concat(patchForSharedPage());
}
@@ -11,6 +11,7 @@ import {
CodeBlockSpec,
DatabaseBlockSpec,
DataViewBlockSpec,
DefaultOpenDocExtension,
DividerBlockSpec,
EditPropsStore,
EmbedExtensions,
@@ -38,6 +39,7 @@ const CommonBlockSpecs: ExtensionType[] = [
AttachmentBlockSpec,
AdapterFactoryExtensions,
FontLoaderService,
DefaultOpenDocExtension,
].flat();
export const DefaultBlockSpecs: ExtensionType[] = [
@@ -24,10 +24,9 @@ import {
} from '@affine/core/modules/quicksearch';
import { ExternalLinksQuickSearchSession } from '@affine/core/modules/quicksearch/impls/external-links';
import { JournalsQuickSearchSession } from '@affine/core/modules/quicksearch/impls/journals';
import { WorkbenchService } from '@affine/core/modules/workbench';
import { WorkspaceService } from '@affine/core/modules/workspace';
import { isNewTabTrigger } from '@affine/core/utils';
import { DebugLogger } from '@affine/debug';
import { I18n } from '@affine/i18n';
import { track } from '@affine/track';
import {
BlockServiceWatcher,
@@ -39,6 +38,8 @@ import type {
AffineReference,
DocMode,
DocModeProvider,
OpenDocConfig,
OpenDocConfigItem,
PeekOptions,
PeekViewService as BSPeekViewService,
QuickSearchResult,
@@ -50,11 +51,11 @@ import {
DocModeExtension,
EdgelessRootBlockComponent,
EmbedLinkedDocBlockComponent,
EmbedLinkedDocBlockConfigExtension,
GenerateDocUrlExtension,
MobileSpecsPatches,
NativeClipboardExtension,
NotificationExtension,
OpenDocExtension,
ParseDocUrlExtension,
PeekViewExtension,
QuickSearchExtension,
@@ -67,6 +68,12 @@ import {
Text,
} from '@blocksuite/affine/store';
import type { ReferenceParams } from '@blocksuite/affine-model';
import {
CenterPeekIcon,
ExpandFullIcon,
OpenInNewIcon,
SplitViewIcon,
} from '@blocksuite/icons/lit';
import { type FrameworkProvider } from '@toeverything/infra';
import { type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
@@ -236,18 +243,35 @@ export function patchNotificationService({
});
}
export function patchEmbedLinkedDocBlockConfig(framework: FrameworkProvider) {
const getWorkbench = () => framework.get(WorkbenchService).workbench;
return EmbedLinkedDocBlockConfigExtension({
handleClick(e, _, refInfo) {
if (isNewTabTrigger(e)) {
const workbench = getWorkbench();
workbench.openDoc(refInfo.pageId, { at: 'new-tab' });
e.preventDefault();
}
},
});
export function patchOpenDocExtension() {
const openDocConfig: OpenDocConfig = {
items: [
{
type: 'open-in-active-view',
label: I18n['com.affine.peek-view-controls.open-doc'](),
icon: ExpandFullIcon(),
},
BUILD_CONFIG.isElectron
? {
type: 'open-in-new-view',
label:
I18n['com.affine.peek-view-controls.open-doc-in-split-view'](),
icon: SplitViewIcon(),
}
: null,
{
type: 'open-in-new-tab',
label: I18n['com.affine.peek-view-controls.open-doc-in-new-tab'](),
icon: OpenInNewIcon(),
},
{
type: 'open-in-center-peek',
label: I18n['com.affine.peek-view-controls.open-doc-in-center-peek'](),
icon: CenterPeekIcon(),
},
].filter((item): item is OpenDocConfigItem => item !== null),
};
return OpenDocExtension(openDocConfig);
}
export function patchPeekViewService(service: PeekViewService) {
@@ -26,7 +26,16 @@ export const usePageHelper = (docCollection: Workspace) => {
const appSidebar = appSidebarService.sidebar;
const createPageAndOpen = useCallback(
(mode?: DocMode, open?: boolean | 'new-tab') => {
(
mode?: DocMode,
options: {
at?: 'new-tab' | 'tail' | 'active';
show?: boolean;
} = {
at: 'active',
show: true,
}
) => {
appSidebar.setHovering(false);
const docProps: DocProps = {
note: editorSettingService.editorSetting.get('affine:note'),
@@ -37,10 +46,12 @@ export const usePageHelper = (docCollection: Workspace) => {
docRecordList.doc$(page.id).value?.setPrimaryMode(mode);
}
if (open !== false)
if (options.show !== false) {
workbench.openDoc(page.id, {
at: open === 'new-tab' ? 'new-tab' : 'active',
at: options.at,
show: options.show,
});
}
return page;
},
[
@@ -53,8 +64,16 @@ export const usePageHelper = (docCollection: Workspace) => {
);
const createEdgelessAndOpen = useCallback(
(open?: boolean | 'new-tab') => {
return createPageAndOpen('edgeless', open);
(
options: {
at?: 'new-tab' | 'tail' | 'active';
show?: boolean;
} = {
at: 'active',
show: true,
}
) => {
return createPageAndOpen('edgeless', options);
},
[createPageAndOpen]
);
@@ -103,8 +122,13 @@ export const usePageHelper = (docCollection: Workspace) => {
return useMemo(() => {
return {
createPage: (mode?: DocMode, open?: boolean | 'new-tab') =>
createPageAndOpen(mode, open),
createPage: (
mode?: DocMode,
options?: {
at?: 'new-tab' | 'tail' | 'active';
show?: boolean;
}
) => createPageAndOpen(mode, options),
createEdgeless: createEdgelessAndOpen,
importFile: importFileAndOpen,
};
@@ -13,7 +13,7 @@ import type { Tag } from '@affine/core/modules/tag';
import { TagService } from '@affine/core/modules/tag';
import { WorkbenchService } from '@affine/core/modules/workbench';
import { WorkspaceService } from '@affine/core/modules/workspace';
import { isNewTabTrigger } from '@affine/core/utils';
import { inferOpenMode } from '@affine/core/utils';
import type { Collection } from '@affine/env/filter';
import { useI18n } from '@affine/i18n';
import { track } from '@affine/track';
@@ -92,15 +92,11 @@ export const PageListHeader = () => {
<PageListNewPageButton
size="small"
testId="new-page-button-trigger"
onCreateEdgeless={e =>
createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
}
onCreateEdgeless={e => createEdgeless({ at: inferOpenMode(e) })}
onCreatePage={e =>
createPage('page' as DocMode, isNewTabTrigger(e) ? 'new-tab' : true)
}
onCreateDoc={e =>
createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true)
createPage('page' as DocMode, { at: inferOpenMode(e) })
}
onCreateDoc={e => createPage(undefined, { at: inferOpenMode(e) })}
onImportFile={onImportFile}
>
<div className={styles.buttonText}>{t['New Page']()}</div>
@@ -9,7 +9,7 @@ import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-m
import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
import { WorkbenchService } from '@affine/core/modules/workbench';
import { WorkspaceService } from '@affine/core/modules/workspace';
import { isNewTabTrigger } from '@affine/core/utils';
import { inferOpenMode } from '@affine/core/utils';
import type { Filter } from '@affine/env/filter';
import { track } from '@affine/track';
import { PlusIcon } from '@blocksuite/icons/rc';
@@ -89,15 +89,9 @@ export const AllPageHeader = ({
styles.headerCreateNewButton,
!showCreateNew && styles.headerCreateNewButtonHidden
)}
onCreateEdgeless={e =>
createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
}
onCreatePage={e =>
createPage('page', isNewTabTrigger(e) ? 'new-tab' : true)
}
onCreateDoc={e =>
createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true)
}
onCreateEdgeless={e => createEdgeless({ at: inferOpenMode(e) })}
onCreatePage={e => createPage('page', { at: inferOpenMode(e) })}
onCreateDoc={e => createPage(undefined, { at: inferOpenMode(e) })}
onImportFile={onImportFile}
>
<PlusIcon />
@@ -11,9 +11,11 @@ import { DocService } from '@affine/core/modules/doc';
import { EditorService } from '@affine/core/modules/editor';
import { FeatureFlagService } from '@affine/core/modules/feature-flag';
import { GlobalContextService } from '@affine/core/modules/global-context';
import { PeekViewService } from '@affine/core/modules/peek-view';
import { RecentDocsService } from '@affine/core/modules/quicksearch';
import { ViewService } from '@affine/core/modules/workbench';
import { WorkspaceService } from '@affine/core/modules/workspace';
import { isNewTabTrigger } from '@affine/core/utils';
import { RefNodeSlotsProvider } from '@blocksuite/affine/blocks';
import { DisposableGroup } from '@blocksuite/affine/global/utils';
import { type AffineEditorContainer } from '@blocksuite/affine/presets';
@@ -39,7 +41,6 @@ import { GlobalPageHistoryModal } from '../../../../components/affine/page-histo
import { useRegisterBlocksuiteEditorCommands } from '../../../../components/hooks/affine/use-register-blocksuite-editor-commands';
import { useActiveBlocksuiteEditor } from '../../../../components/hooks/use-block-suite-editor';
import { usePageDocumentTitle } from '../../../../components/hooks/use-global-state';
import { useNavigateHelper } from '../../../../components/hooks/use-navigate-helper';
import { PageDetailEditor } from '../../../../components/page-detail-editor';
import { TrashPageFooter } from '../../../../components/pure/trash-page-footer';
import { TopTip } from '../../../../components/top-tip';
@@ -81,7 +82,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
const editor = editorService.editor;
const view = viewService.view;
const workspace = workspaceService.workspace;
const docCollection = workspace.docCollection;
const globalContext = globalContextService.globalContext;
const doc = docService.doc;
@@ -89,7 +89,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
const activeSidebarTab = useLiveData(view.activeSidebarTab$);
const isInTrash = useLiveData(doc.meta$.map(meta => meta.trash));
const { openPage, jumpToPageBlock } = useNavigateHelper();
const editorContainer = useLiveData(editor.editorContainer$);
const isSideBarOpen = useLiveData(workbench.sidebarOpen$);
@@ -97,6 +96,8 @@ const DetailPageImpl = memo(function DetailPageImpl() {
const chatPanelRef = useRef<ChatPanel | null>(null);
const { setDocReadonly } = useDocMetaHelper();
const peekView = useService(PeekViewService).peekView;
const isActiveView = useIsActiveView();
// TODO(@eyhn): remove jotai here
const [_, setActiveBlockSuiteEditor] = useActiveBlocksuiteEditor();
@@ -178,25 +179,50 @@ const DetailPageImpl = memo(function DetailPageImpl() {
const refNodeSlots = std.getOptional(RefNodeSlotsProvider);
if (refNodeSlots) {
disposable.add(
refNodeSlots.docLinkClicked.on(({ pageId, params }) => {
if (params) {
const { mode, blockIds, elementIds } = params;
jumpToPageBlock(
docCollection.id,
pageId,
mode,
blockIds,
elementIds
);
return;
// the event should not be emitted by AffineReference
refNodeSlots.docLinkClicked.on(
({ pageId, params, openMode, event }) => {
openMode ??=
event && isNewTabTrigger(event)
? 'open-in-new-tab'
: 'open-in-active-view';
if (openMode !== 'open-in-center-peek') {
const at = (() => {
if (openMode === 'open-in-active-view') {
return 'active';
}
// split view is only supported on electron
if (openMode === 'open-in-new-view') {
return BUILD_CONFIG.isElectron ? 'tail' : 'new-tab';
}
if (openMode === 'open-in-new-tab') {
return 'new-tab';
}
return 'active';
})();
workbench.openDoc(
{
docId: pageId,
blockIds: params?.blockIds,
elementIds: params?.elementIds,
},
{
at: at,
show: true,
}
);
} else {
peekView
.open({
docRef: {
docId: pageId,
},
...params,
})
.catch(console.error);
}
}
if (editor.doc.id === pageId) {
return;
}
openPage(docCollection.id, pageId);
})
)
);
}
}
@@ -212,7 +238,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
disposable.dispose();
};
},
[editor, openPage, docCollection.id, jumpToPageBlock]
[editor, workbench, peekView]
);
const [hasScrollTop, setHasScrollTop] = useState(false);
@@ -18,7 +18,7 @@ export const AppTabCreate = ({ tab }: AppTabCustomFCProps) => {
const createPage = useCallback(
(isActive: boolean) => {
if (isActive) return;
const doc = pageHelper.createPage(undefined, false);
const doc = pageHelper.createPage(undefined, { show: false });
workbench.openDoc({ docId: doc.id, fromTab: 'true' });
track.$.navigationPanel.$.createDoc();
},
@@ -1,7 +1,7 @@
import { IconButton } from '@affine/component';
import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
import { WorkspaceService } from '@affine/core/modules/workspace';
import { isNewTabTrigger } from '@affine/core/utils';
import { inferOpenMode } from '@affine/core/utils';
import { useI18n } from '@affine/i18n';
import track from '@affine/track';
import { PlusIcon } from '@blocksuite/icons/rc';
@@ -25,7 +25,7 @@ export function AddPageButton({ className, style }: AddPageButtonProps) {
const onClickNewPage = useCallback(
(e?: MouseEvent) => {
pageHelper.createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true);
pageHelper.createPage(undefined, { at: inferOpenMode(e) });
track.$.navigationPanel.$.createDoc();
},
[pageHelper]
@@ -15,7 +15,7 @@ import {
} from '@affine/core/modules/favorite';
import { WorkspaceService } from '@affine/core/modules/workspace';
import type { AffineDNDData } from '@affine/core/types/dnd';
import { isNewTabTrigger } from '@affine/core/utils';
import { inferOpenMode } from '@affine/core/utils';
import { useI18n } from '@affine/i18n';
import { track } from '@affine/track';
import { PlusIcon } from '@blocksuite/icons/rc';
@@ -81,10 +81,7 @@ export const ExplorerFavorites = () => {
const handleCreateNewFavoriteDoc: MouseEventHandler = useCallback(
e => {
const newDoc = createPage(
undefined,
isNewTabTrigger(e) ? 'new-tab' : true
);
const newDoc = createPage(undefined, { at: inferOpenMode(e) });
favoriteService.favoriteList.add(
'doc',
newDoc.id,
@@ -27,13 +27,13 @@ export class DesktopWorkbenchNewTabHandler
constructor(private readonly electronApi: DesktopApiService) {
super();
}
handle({ basename, to }: { basename: string; to: To }) {
handle({ basename, to, show }: { basename: string; to: To; show: boolean }) {
const path = typeof to === 'string' ? parsePath(to) : to;
this.electronApi.api.handler.ui
.addTab({
basename,
view: { path },
show: false,
show: show,
})
.catch(console.error);
}
@@ -240,6 +240,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
dropTargetRef.current = node;
dragRef.current = node;
}}
data-is-active={isActive && views.length > 1 && !draggingEntity}
className={styles.splitViewPanelDrag}
>
<div draggable={false} className={styles.splitViewPanelContent}>
@@ -74,7 +74,7 @@ export const splitViewPanelDrag = style({
transition: 'box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
},
'[data-is-active="true"] &::after': {
'[data-is-active="true"]&::after': {
boxShadow: `inset 0 0 0 1px ${cssVarV2('button/primary')}`,
},
@@ -1,7 +1,7 @@
import { useDraggable } from '@affine/component';
import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
import type { AffineDNDData, AffineDNDEntity } from '@affine/core/types/dnd';
import { isNewTabTrigger } from '@affine/core/utils';
import { inferOpenMode as inferOpenAt } from '@affine/core/utils';
import { useLiveData, useServices } from '@toeverything/infra';
import { type To } from 'history';
import { forwardRef, type MouseEvent } from 'react';
@@ -62,13 +62,8 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
if (event.defaultPrevented) {
return;
}
const at = (() => {
if (isNewTabTrigger(event)) {
return BUILD_CONFIG.isElectron && event.altKey ? 'tail' : 'new-tab';
}
return 'active';
})();
workbench.open(to, { at, replaceHistory });
const at = inferOpenAt(event);
workbench.open(to, { at, replaceHistory, show: false });
event.preventDefault();
event.stopPropagation();
},
+15 -5
View File
@@ -8,11 +8,21 @@ export function preventDefault(event: BaseSyntheticEvent) {
event.preventDefault();
}
export function stopEvent(event: BaseSyntheticEvent) {
event.stopPropagation();
event.preventDefault();
export function isNewTabTrigger(event?: React.MouseEvent | MouseEvent) {
return event
? (event.ctrlKey || event.metaKey || event.button === 1) && !event.altKey
: false;
}
export function isNewTabTrigger(event?: React.MouseEvent | MouseEvent) {
return event ? event.ctrlKey || event.metaKey || event.button === 1 : false;
export function isNewViewTrigger(event?: React.MouseEvent | MouseEvent) {
return event ? (event.ctrlKey || event.metaKey) && event.altKey : false;
}
export function inferOpenMode(event?: React.MouseEvent | MouseEvent) {
if (isNewTabTrigger(event)) {
return 'new-tab';
} else if (isNewViewTrigger(event)) {
return BUILD_CONFIG.isElectron ? 'tail' : 'new-tab';
}
return 'active';
}
@@ -1042,6 +1042,7 @@
"com.affine.peek-view-controls.open-attachment": "Open this attachment",
"com.affine.peek-view-controls.open-attachment-in-new-tab": "Open in new tab",
"com.affine.peek-view-controls.open-attachment-in-split-view": "Open in split view",
"com.affine.peek-view-controls.open-doc-in-center-peek": "Open in center peek",
"com.affine.quicksearch.group.creation": "New",
"com.affine.quicksearch.group.searchfor": "Search for \"{{query}}\"",
"com.affine.resetSyncStatus.button": "Reset sync",
+2 -2
View File
@@ -28,8 +28,8 @@ test('open split view', async ({ page }) => {
await expect(page.getByTestId('split-view-label')).toHaveCount(2);
await expectTabTitle(page, 0, ['Untitled', 'hi from another page']);
// the second split view should be active
await expectActiveTab(page, 0, 1);
// the first split view should be active
await expectActiveTab(page, 0, 0);
// by clicking the first split view label, the first split view should be active
await page.getByTestId('split-view-label').nth(0).click();
+1
View File
@@ -1,6 +1,7 @@
{
"extends": "../../tsconfig.web.json",
"compilerOptions": {
"composite": true,
"rootDir": "./e2e",
"outDir": "./dist",
"tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+1 -1
View File
@@ -1,5 +1,5 @@
import chalk from 'chalk';
import identity from 'lodash-es/identity';
import { identity } from 'lodash-es';
export const newLineSeparator = /\r\n|[\n\r\x85\u2028\u2029]/g;
+1 -1
View File
@@ -1,4 +1,4 @@
import once from 'lodash-es/once';
import { once } from 'lodash-es';
import { Logger } from './logger';
import { Package, readPackageJson } from './package';