diff --git a/blocksuite/affine/block-attachment/src/attachment-block.ts b/blocksuite/affine/block-attachment/src/attachment-block.ts index 20b0737ad8..da9eef209c 100644 --- a/blocksuite/affine/block-attachment/src/attachment-block.ts +++ b/blocksuite/affine/block-attachment/src/attachment-block.ts @@ -1,6 +1,5 @@ import { getEmbedCardIcons } from '@blocksuite/affine-block-embed'; import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption'; -import { HoverController } from '@blocksuite/affine-components/hover'; import { AttachmentIcon16, getAttachmentFileIcon, @@ -16,19 +15,16 @@ import { ThemeProvider, } from '@blocksuite/affine-shared/services'; import { humanFileSize } from '@blocksuite/affine-shared/utils'; -import { BlockSelection, TextSelection } from '@blocksuite/block-std'; +import { BlockSelection } from '@blocksuite/block-std'; import { Slice } from '@blocksuite/store'; -import { flip, offset } from '@floating-ui/dom'; -import { html, nothing } from 'lit'; +import { html } from 'lit'; import { property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import { ref } from 'lit/directives/ref.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { AttachmentOptionsTemplate } from './components/options.js'; -import { AttachmentEmbedProvider } from './embed.js'; -import { styles } from './styles.js'; -import { checkAttachmentBlob, downloadAttachmentBlob } from './utils.js'; +import { AttachmentEmbedProvider } from './embed'; +import { styles } from './styles'; +import { checkAttachmentBlob, downloadAttachmentBlob } from './utils'; @Peekable({ enableOn: ({ model }: AttachmentBlockComponent) => { @@ -42,43 +38,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent { - const selection = this.host.selection; - const textSelection = selection.find(TextSelection); - if ( - !!textSelection && - (!!textSelection.to || !!textSelection.from.length) - ) { - return null; - } - - const blockSelections = selection.filter(BlockSelection); - if ( - blockSelections.length > 1 || - (blockSelections.length === 1 && - blockSelections[0].blockId !== this.blockId) - ) { - return null; - } - - return { - template: AttachmentOptionsTemplate({ - block: this, - model: this.model, - abortController, - }), - computePosition: { - referenceElement: this, - placement: 'top-start', - middleware: [flip(), offset(4)], - autoUpdate: true, - }, - }; - } - ); - blockDraggable = true; protected containerStyleMap = styleMap({ @@ -227,11 +186,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent +
${embedView ? html`
${embedView} diff --git a/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts b/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts index 04dd3429a0..71f857aa31 100644 --- a/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts +++ b/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts @@ -1,5 +1,4 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; -import type { HoverController } from '@blocksuite/affine-components/hover'; import { AttachmentBlockStyles } from '@blocksuite/affine-model'; import { EMBED_CARD_HEIGHT, @@ -13,8 +12,6 @@ import { AttachmentBlockComponent } from './attachment-block.js'; export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent( AttachmentBlockComponent ) { - protected override _whenHover: HoverController | null = null; - override blockDraggable = false; get slots() { diff --git a/blocksuite/affine/block-attachment/src/attachment-spec.ts b/blocksuite/affine/block-attachment/src/attachment-spec.ts index 6a9859dfa3..40df90ab0a 100644 --- a/blocksuite/affine/block-attachment/src/attachment-spec.ts +++ b/blocksuite/affine/block-attachment/src/attachment-spec.ts @@ -1,17 +1,26 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { AttachmentBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockFlavourIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; import { AttachmentBlockNotionHtmlAdapterExtension } from './adapters/notion-html.js'; import { AttachmentDropOption } from './attachment-service.js'; +import { builtinToolbarConfig } from './configs/toolbar'; import { AttachmentEmbedConfigExtension, AttachmentEmbedService, -} from './embed.js'; +} from './embed'; + +const flavour = AttachmentBlockSchema.model.flavour; export const AttachmentBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:attachment'), - BlockViewExtension('affine:attachment', model => { + FlavourExtension(flavour), + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-edgeless-attachment` : literal`affine-attachment`; @@ -20,4 +29,8 @@ export const AttachmentBlockSpec: ExtensionType[] = [ AttachmentEmbedConfigExtension(), AttachmentEmbedService, AttachmentBlockNotionHtmlAdapterExtension, + ToolbarModuleExtension({ + id: BlockFlavourIdentifier(flavour), + config: builtinToolbarConfig, + }), ]; diff --git a/blocksuite/affine/block-attachment/src/components/config.ts b/blocksuite/affine/block-attachment/src/components/config.ts deleted file mode 100644 index 5bcb411aff..0000000000 --- a/blocksuite/affine/block-attachment/src/components/config.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { - CopyIcon, - DeleteIcon, - DownloadIcon, - DuplicateIcon, - RefreshIcon, -} from '@blocksuite/affine-components/icons'; -import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar'; - -import { cloneAttachmentProperties } from '../utils.js'; -import type { AttachmentToolbarMoreMenuContext } from './context.js'; - -export const BUILT_IN_GROUPS: MenuItemGroup[] = - [ - { - type: 'clipboard', - items: [ - { - type: 'copy', - label: 'Copy', - icon: CopyIcon, - disabled: ({ doc }) => doc.readonly, - action: ctx => ctx.blockComponent.copy(), - }, - { - type: 'duplicate', - label: 'Duplicate', - icon: DuplicateIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ doc, blockComponent, close }) => { - const model = blockComponent.model; - const prop: { flavour: 'affine:attachment' } = { - flavour: 'affine:attachment', - ...cloneAttachmentProperties(model), - }; - doc.addSiblingBlocks(model, [prop]); - close(); - }, - }, - { - type: 'reload', - label: 'Reload', - icon: RefreshIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ blockComponent, close }) => { - blockComponent.refreshData(); - close(); - }, - }, - { - type: 'download', - label: 'Download', - icon: DownloadIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ blockComponent, close }) => { - blockComponent.download(); - close(); - }, - }, - ], - }, - { - type: 'delete', - items: [ - { - type: 'delete', - label: 'Delete', - icon: DeleteIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ doc, blockComponent, close }) => { - doc.deleteBlock(blockComponent.model); - close(); - }, - }, - ], - }, - ]; diff --git a/blocksuite/affine/block-attachment/src/components/context.ts b/blocksuite/affine/block-attachment/src/components/context.ts deleted file mode 100644 index f3697fb094..0000000000 --- a/blocksuite/affine/block-attachment/src/components/context.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { MenuContext } from '@blocksuite/affine-components/toolbar'; - -import type { AttachmentBlockComponent } from '../attachment-block.js'; - -export class AttachmentToolbarMoreMenuContext extends MenuContext { - override close = () => { - this.abortController.abort(); - }; - - get doc() { - return this.blockComponent.doc; - } - - get host() { - return this.blockComponent.host; - } - - get selectedBlockModels() { - if (this.blockComponent.model) return [this.blockComponent.model]; - return []; - } - - get std() { - return this.blockComponent.std; - } - - constructor( - public blockComponent: AttachmentBlockComponent, - public abortController: AbortController - ) { - super(); - } - - isEmpty() { - return false; - } - - isMultiple() { - return false; - } - - isSingle() { - return true; - } -} diff --git a/blocksuite/affine/block-attachment/src/components/options.ts b/blocksuite/affine/block-attachment/src/components/options.ts deleted file mode 100644 index f23b43db99..0000000000 --- a/blocksuite/affine/block-attachment/src/components/options.ts +++ /dev/null @@ -1,229 +0,0 @@ -import { - CaptionIcon, - DownloadIcon, - EditIcon, -} from '@blocksuite/affine-components/icons'; -import { createLitPortal } from '@blocksuite/affine-components/portal'; -import { - cloneGroups, - getMoreMenuConfig, - renderGroups, - renderToolbarSeparator, -} from '@blocksuite/affine-components/toolbar'; -import { - type AttachmentBlockModel, - defaultAttachmentProps, -} from '@blocksuite/affine-model'; -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; -import { Bound } from '@blocksuite/global/gfx'; -import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; -import { flip, offset } from '@floating-ui/dom'; -import { html, nothing } from 'lit'; -import { join } from 'lit/directives/join.js'; -import { repeat } from 'lit/directives/repeat.js'; - -import type { AttachmentBlockComponent } from '../attachment-block.js'; -import { BUILT_IN_GROUPS } from './config.js'; -import { AttachmentToolbarMoreMenuContext } from './context.js'; -import { RenameModal } from './rename-model.js'; -import { styles } from './styles.js'; - -export function attachmentViewToggleMenu({ - block, - callback, -}: { - block: AttachmentBlockComponent; - callback?: () => void; -}) { - const model = block.model; - const readonly = model.doc.readonly; - const embedded = model.embed; - const viewType = embedded ? 'embed' : 'card'; - const viewActions = [ - { - type: 'card', - label: 'Card view', - disabled: readonly || !embedded, - action: () => { - const style = defaultAttachmentProps.style!; - const width = EMBED_CARD_WIDTH[style]; - const height = EMBED_CARD_HEIGHT[style]; - const bound = Bound.deserialize(model.xywh); - bound.w = width; - bound.h = height; - model.doc.updateBlock(model, { - style, - embed: false, - xywh: bound.serialize(), - }); - callback?.(); - }, - }, - { - type: 'embed', - label: 'Embed view', - disabled: readonly || embedded || !block.embedded(), - action: () => { - block.convertTo(); - callback?.(); - }, - }, - ]; - - return html` - -
- ${viewType} - view -
- ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} - - `} - > -
- ${repeat( - viewActions, - button => button.type, - ({ type, label, action, disabled }) => html` - - ${label} - - ` - )} -
- - `; -} - -export function AttachmentOptionsTemplate({ - block, - model, - abortController, -}: { - block: AttachmentBlockComponent; - model: AttachmentBlockModel; - abortController: AbortController; -}) { - const std = block.std; - const editorHost = block.host; - const readonly = model.doc.readonly; - const context = new AttachmentToolbarMoreMenuContext(block, abortController); - const groups = getMoreMenuConfig(std).configure(cloneGroups(BUILT_IN_GROUPS)); - const moreMenuActions = renderGroups(groups, context); - - const buttons = [ - // preview - // html` - // - // ${ViewIcon} - // - // `, - - readonly - ? nothing - : html` - { - abortController.abort(); - const renameAbortController = new AbortController(); - createLitPortal({ - template: RenameModal({ - model, - editorHost, - abortController: renameAbortController, - }), - computePosition: { - referenceElement: block, - placement: 'top-start', - middleware: [flip(), offset(4)], - // It has a overlay mask, so we don't need to update the position. - // autoUpdate: true, - }, - abortController: renameAbortController, - }); - }} - > - ${EditIcon} - - `, - - attachmentViewToggleMenu({ - block, - callback: () => abortController.abort(), - }), - - readonly - ? nothing - : html` - block.download()} - > - ${DownloadIcon} - - `, - - readonly - ? nothing - : html` - block.captionEditor?.show()} - > - ${CaptionIcon} - - `, - - html` - - ${MoreVerticalIcon()} - - `} - > -
- ${moreMenuActions} -
- - `, - ]; - - return html` - - - ${join( - buttons.filter(button => button !== nothing), - renderToolbarSeparator - )} - - `; -} diff --git a/blocksuite/affine/block-attachment/src/components/rename-model.ts b/blocksuite/affine/block-attachment/src/components/rename-model.ts index 8613ea16e2..8957e4da87 100644 --- a/blocksuite/affine/block-attachment/src/components/rename-model.ts +++ b/blocksuite/affine/block-attachment/src/components/rename-model.ts @@ -5,7 +5,7 @@ import type { EditorHost } from '@blocksuite/block-std'; import { html } from 'lit'; import { createRef, ref } from 'lit/directives/ref.js'; -import { renameStyles } from './styles.js'; +import { renameStyles } from './styles'; export const RenameModal = ({ editorHost, @@ -34,6 +34,7 @@ export const RenameModal = ({ let fileName = includeExtension ? nameWithoutExtension : originalName; const extension = includeExtension ? originalExtension : ''; + const abort = () => abortController.abort(); const onConfirm = () => { const newFileName = fileName + extension; if (!newFileName) { @@ -43,7 +44,7 @@ export const RenameModal = ({ model.doc.updateBlock(model, { name: newFileName, }); - abortController.abort(); + abort(); }; const onInput = (e: InputEvent) => { fileName = (e.target as HTMLInputElement).value; @@ -52,7 +53,7 @@ export const RenameModal = ({ e.stopPropagation(); if (e.key === 'Escape' && !e.isComposing) { - abortController.abort(); + abort(); return; } if (e.key === 'Enter' && !e.isComposing) { @@ -65,10 +66,7 @@ export const RenameModal = ({ -
+
icon-button { - display: flex; - align-items: center; - padding: 8px; - gap: 8px; - } - .affine-attachment-options-more-container > icon-button[hidden] { - display: none; - } - - .affine-attachment-options-more-container > icon-button:hover.danger { - background: var(--affine-background-error-color); - color: var(--affine-error-color); - } - .affine-attachment-options-more-container > icon-button:hover.danger > svg { - color: var(--affine-error-color); - } -`; - export const styles = css` :host { z-index: 1; diff --git a/blocksuite/affine/block-attachment/src/configs/toolbar.ts b/blocksuite/affine/block-attachment/src/configs/toolbar.ts new file mode 100644 index 0000000000..53cfe9d88b --- /dev/null +++ b/blocksuite/affine/block-attachment/src/configs/toolbar.ts @@ -0,0 +1,278 @@ +import { createLitPortal } from '@blocksuite/affine-components/portal'; +import { + AttachmentBlockModel, + defaultAttachmentProps, +} from '@blocksuite/affine-model'; +import { + EMBED_CARD_HEIGHT, + EMBED_CARD_WIDTH, +} from '@blocksuite/affine-shared/consts'; +import { + ActionPlacement, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarContext, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std'; +import { Bound } from '@blocksuite/global/gfx'; +import { + CaptionIcon, + CopyIcon, + DeleteIcon, + DownloadIcon, + DuplicateIcon, + EditIcon, + ResetIcon, +} from '@blocksuite/icons/lit'; +import type { SelectionConstructor } from '@blocksuite/store'; +import { flip, offset } from '@floating-ui/dom'; +import { computed } from '@preact/signals-core'; +import { html } from 'lit'; +import { keyed } from 'lit/directives/keyed.js'; + +import { AttachmentBlockComponent } from '../attachment-block'; +import { RenameModal } from '../components/rename-model'; +import { AttachmentEmbedProvider } from '../embed'; +import { cloneAttachmentProperties } from '../utils'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'attachment', + type: 'card view', +}; + +const createAttachmentViewDropdownMenuWith = ( + t: T +) => { + return { + id: 'b.conversions', + actions: [ + { + id: 'card', + label: 'Card view', + run(ctx) { + const model = ctx.getCurrentModelByType(t, AttachmentBlockModel); + if (!model) return; + + const style = defaultAttachmentProps.style!; + const width = EMBED_CARD_WIDTH[style]; + const height = EMBED_CARD_HEIGHT[style]; + const bound = Bound.deserialize(model.xywh); + bound.w = width; + bound.h = height; + + ctx.store.updateBlock(model, { + style, + embed: false, + xywh: bound.serialize(), + }); + }, + }, + { + id: 'embed', + label: 'Embed view', + run(ctx) { + const model = ctx.getCurrentModelByType(t, AttachmentBlockModel); + if (!model) return; + + // Clears + ctx.reset(); + ctx.select('note'); + + ctx.std.get(AttachmentEmbedProvider).convertTo(model); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'embed view', + }); + }, + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType(t, AttachmentBlockModel); + if (!model) return null; + + const embedProvider = ctx.std.get(AttachmentEmbedProvider); + const actions = this.actions.map(action => ({ ...action })); + const viewType$ = computed(() => { + const [cardAction, embedAction] = actions; + const embed = model.embed$.value ?? false; + + cardAction.disabled = !embed; + embedAction.disabled = embed && embedProvider.embedded(model); + + return embed ? embedAction.label : cardAction.label; + }); + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup; +}; + +export const builtinToolbarConfig = { + actions: [ + { + id: 'a.rename', + content(cx) { + const component = cx.getCurrentBlockComponentBy( + BlockSelection, + AttachmentBlockComponent + ); + if (!component) return null; + + const abortController = new AbortController(); + abortController.signal.onabort = () => cx.show(); + + return html` + { + cx.hide(); + + createLitPortal({ + template: RenameModal({ + model: component.model, + editorHost: cx.host, + abortController, + }), + computePosition: { + referenceElement: component, + placement: 'top-start', + middleware: [flip(), offset(4)], + }, + abortController, + }); + }} + > + ${EditIcon()} + + `; + }, + }, + createAttachmentViewDropdownMenuWith(BlockSelection), + { + id: 'c.download', + tooltip: 'Download', + icon: DownloadIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + AttachmentBlockComponent + ); + component?.download(); + }, + }, + { + id: 'd.caption', + tooltip: 'Caption', + icon: CaptionIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + AttachmentBlockComponent + ); + component?.captionEditor?.show(); + + ctx.track('OpenedCaptionEditor', { + ...trackBaseProps, + control: 'add caption', + }); + }, + }, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run(ctx) { + // TODO(@fundon): unify `clone` method + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + AttachmentBlockComponent + ); + component?.copy(); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run(ctx) { + const model = ctx.getCurrentBlockComponentBy( + BlockSelection, + AttachmentBlockComponent + )?.model; + if (!model) return; + + // TODO(@fundon): unify `duplicate` method + ctx.store.addSiblingBlocks(model, [ + { + flavour: model.flavour, + ...cloneAttachmentProperties(model), + }, + ]); + }, + }, + ], + }, + { + placement: ActionPlacement.More, + id: 'b.refresh', + label: 'Reload', + icon: ResetIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + AttachmentBlockComponent + ); + component?.refreshData(); + }, + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model) return; + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; + +export const attachmentViewDropdownMenu = (ctx: ToolbarContext) => { + return createAttachmentViewDropdownMenuWith(SurfaceSelection).content(ctx); +}; diff --git a/blocksuite/affine/block-attachment/src/index.ts b/blocksuite/affine/block-attachment/src/index.ts index 4298e7a67f..0cec7006a5 100644 --- a/blocksuite/affine/block-attachment/src/index.ts +++ b/blocksuite/affine/block-attachment/src/index.ts @@ -2,7 +2,7 @@ export * from './adapters/notion-html'; export * from './attachment-block'; export * from './attachment-service'; export * from './attachment-spec'; -export { attachmentViewToggleMenu } from './components/options'; +export { attachmentViewDropdownMenu } from './configs/toolbar'; export { type AttachmentEmbedConfig, AttachmentEmbedConfigIdentifier, diff --git a/blocksuite/affine/block-bookmark/package.json b/blocksuite/affine/block-bookmark/package.json index 2fcd52653d..e3109fc204 100644 --- a/blocksuite/affine/block-bookmark/package.json +++ b/blocksuite/affine/block-bookmark/package.json @@ -22,12 +22,12 @@ "@blocksuite/icons": "^2.2.1", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", - "@floating-ui/dom": "^1.6.13", "@lit/context": "^1.1.2", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", "lit": "^3.2.0", "minimatch": "^10.0.1", + "yjs": "^13.6.23", "zod": "^3.23.8" }, "exports": { diff --git a/blocksuite/affine/block-bookmark/src/bookmark-spec.ts b/blocksuite/affine/block-bookmark/src/bookmark-spec.ts index 0bd93b6ae3..3467c4d277 100644 --- a/blocksuite/affine/block-bookmark/src/bookmark-spec.ts +++ b/blocksuite/affine/block-bookmark/src/bookmark-spec.ts @@ -1,15 +1,28 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { BookmarkBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockFlavourIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { BookmarkBlockAdapterExtensions } from './adapters/extension.js'; +import { BookmarkBlockAdapterExtensions } from './adapters/extension'; +import { builtinToolbarConfig } from './configs/toolbar'; + +const flavour = BookmarkBlockSchema.model.flavour; export const BookmarkBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:bookmark'), - BlockViewExtension('affine:bookmark', model => { + FlavourExtension(flavour), + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-edgeless-bookmark` : literal`affine-bookmark`; }), BookmarkBlockAdapterExtensions, + ToolbarModuleExtension({ + id: BlockFlavourIdentifier(flavour), + config: builtinToolbarConfig, + }), ].flat(); diff --git a/blocksuite/affine/block-bookmark/src/configs/toolbar.ts b/blocksuite/affine/block-bookmark/src/configs/toolbar.ts new file mode 100644 index 0000000000..fbfbc1def9 --- /dev/null +++ b/blocksuite/affine/block-bookmark/src/configs/toolbar.ts @@ -0,0 +1,324 @@ +import { toast } from '@blocksuite/affine-components/toast'; +import { BookmarkBlockModel } from '@blocksuite/affine-model'; +import { + ActionPlacement, + EmbedOptionProvider, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { getBlockProps } from '@blocksuite/affine-shared/utils'; +import { BlockSelection } from '@blocksuite/block-std'; +import { + CaptionIcon, + CopyIcon, + DeleteIcon, + DuplicateIcon, + ResetIcon, +} from '@blocksuite/icons/lit'; +import { Slice, Text } from '@blocksuite/store'; +import { signal } from '@preact/signals-core'; +import { html } from 'lit'; +import { keyed } from 'lit/directives/keyed.js'; +import * as Y from 'yjs'; + +import { BookmarkBlockComponent } from '../bookmark-block'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'bookmark', + type: 'card view', +}; + +export const builtinToolbarConfig = { + actions: [ + { + id: 'a.preview', + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + BookmarkBlockModel + ); + if (!model) return null; + + const { url } = model; + + return html``; + }, + }, + { + id: 'b.conversions', + actions: [ + { + id: 'inline', + label: 'Inline view', + run(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + BookmarkBlockModel + ); + if (!model) return; + + const { title, caption, url, parent } = model; + const index = parent?.children.indexOf(model); + + const yText = new Y.Text(); + const insert = title || caption || url; + yText.insert(0, insert); + yText.format(0, insert.length, { link: url }); + + const text = new Text(yText); + + ctx.store.addBlock('affine:paragraph', { text }, parent, index); + + ctx.store.deleteBlock(model); + + // Clears + ctx.reset(); + ctx.select('note'); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'inline view', + }); + }, + }, + { + id: 'card', + label: 'Card view', + disabled: true, + }, + { + id: 'embed', + label: 'Embed view', + disabled(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + BookmarkBlockModel + ); + if (!model) return true; + + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(model.url); + + return options?.viewType !== 'embed'; + }, + run(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + BookmarkBlockModel + ); + if (!model) return; + + const { caption, url, style, parent } = model; + const index = parent?.children.indexOf(model); + + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + if (!options) return; + + const { flavour, styles } = options; + + const newStyle = styles.includes(style) + ? style + : styles.find(s => s !== 'vertical' && s !== 'cube'); + + const blockId = ctx.store.addBlock( + flavour, + { + url, + caption, + style: newStyle, + }, + parent, + index + ); + + ctx.store.deleteBlock(model); + + // Selects new block + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'embed view', + }); + }, + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + BookmarkBlockModel + ); + if (!model) return null; + + const actions = this.actions.map(action => ({ ...action })); + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'c.style', + actions: [ + { + id: 'horizontal', + label: 'Large horizontal style', + }, + { + id: 'list', + label: 'Small horizontal style', + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + BookmarkBlockModel + ); + if (!model) return null; + + const actions = this.actions.map(action => ({ + ...action, + run: ({ store }) => { + store.updateBlock(model, { style: action.id }); + + ctx.track('SelectedCardStyle', { + ...trackBaseProps, + control: 'select card style', + type: action.id, + }); + }, + })) satisfies ToolbarAction[]; + + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedCardStyleSelector', { + ...trackBaseProps, + control: 'switch card style', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'd.caption', + tooltip: 'Caption', + icon: CaptionIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + BookmarkBlockComponent + ); + component?.captionEditor?.show(); + + ctx.track('OpenedCaptionEditor', { + ...trackBaseProps, + control: 'add caption', + }); + }, + }, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model) return; + + const slice = Slice.fromModels(ctx.store, [model]); + ctx.clipboard + .copySlice(slice) + .then(() => toast(ctx.host, 'Copied to clipboard')) + .catch(console.error); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model) return; + + const { flavour, parent } = model; + const props = getBlockProps(model); + const index = parent?.children.indexOf(model); + + ctx.store.addBlock(flavour, props, parent, index); + }, + }, + ], + }, + { + placement: ActionPlacement.More, + id: 'b.refresh', + label: 'Reload', + icon: ResetIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + BookmarkBlockComponent + ); + component?.refreshData(); + }, + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model) return; + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/block-embed/src/configs/toolbar.ts b/blocksuite/affine/block-embed/src/configs/toolbar.ts new file mode 100644 index 0000000000..0257858980 --- /dev/null +++ b/blocksuite/affine/block-embed/src/configs/toolbar.ts @@ -0,0 +1,404 @@ +import { toast } from '@blocksuite/affine-components/toast'; +import { + BookmarkStyles, + EmbedGithubModel, + isExternalEmbedModel, +} from '@blocksuite/affine-model'; +import { + ActionPlacement, + EmbedOptionProvider, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { getBlockProps } from '@blocksuite/affine-shared/utils'; +import { BlockSelection } from '@blocksuite/block-std'; +import { + CaptionIcon, + CopyIcon, + DeleteIcon, + DuplicateIcon, + ResetIcon, +} from '@blocksuite/icons/lit'; +import { Slice, Text } from '@blocksuite/store'; +import { signal } from '@preact/signals-core'; +import { html } from 'lit'; +import { keyed } from 'lit/directives/keyed.js'; +import * as Y from 'yjs'; + +import type { EmbedFigmaBlockComponent } from '../embed-figma-block'; +import type { EmbedGithubBlockComponent } from '../embed-github-block'; +import type { EmbedLoomBlockComponent } from '../embed-loom-block'; +import type { EmbedYoutubeBlockComponent } from '../embed-youtube-block'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'link', + type: 'card view', +}; + +// External embed blocks +export function createBuiltinToolbarConfigForExternal( + klass: + | typeof EmbedGithubBlockComponent + | typeof EmbedFigmaBlockComponent + | typeof EmbedLoomBlockComponent + | typeof EmbedYoutubeBlockComponent +) { + return { + actions: [ + { + id: 'a.preview', + content(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return null; + + const { url } = model; + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + if (options?.viewType !== 'card') return null; + + return html``; + }, + }, + { + id: 'b.conversions', + actions: [ + { + id: 'inline', + label: 'Inline view', + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return; + + const { title, caption, url: link, parent } = model; + const index = parent?.children.indexOf(model); + + const yText = new Y.Text(); + const insert = title || caption || link; + yText.insert(0, insert); + yText.format(0, insert.length, { link }); + + const text = new Text(yText); + + ctx.store.addBlock('affine:paragraph', { text }, parent, index); + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'inline view', + }); + }, + }, + { + id: 'card', + label: 'Card view', + disabled(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return true; + + const { url } = model; + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + return options?.viewType === 'card'; + }, + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return; + + const { url, caption, parent } = model; + const index = parent?.children.indexOf(model); + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + let { style } = model; + let flavour = 'affine:bookmark'; + + if (options?.viewType === 'card') { + flavour = options.flavour; + if (!options.styles.includes(style)) { + style = options.styles[0]; + } + } else { + style = + BookmarkStyles.find(s => s !== 'vertical' && s !== 'cube') ?? + BookmarkStyles[1]; + } + + const blockId = ctx.store.addBlock( + flavour, + { url, caption, style }, + parent, + index + ); + + ctx.store.deleteBlock(model); + + // Selects new block + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'card view', + }); + }, + }, + { + id: 'embed', + label: 'Embed view', + disabled(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return false; + + const { url } = model; + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + return options?.viewType === 'embed'; + }, + when(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return false; + + const { url } = model; + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + return options?.viewType === 'embed'; + }, + run(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return; + + const { url, caption, parent } = model; + const index = parent?.children.indexOf(model); + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + + if (options?.viewType !== 'embed') return; + + const { flavour, styles } = options; + let { style } = model; + + if (!styles.includes(style)) { + style = + styles.find(s => s !== 'vertical' && s !== 'cube') ?? + styles[0]; + } + + const blockId = ctx.store.addBlock( + flavour, + { url, caption, style }, + parent, + index + ); + + ctx.store.deleteBlock(model); + + // Selects new block + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'embed view', + }); + }, + }, + ], + content(ctx) { + const model = ctx.getCurrentBlockBy(BlockSelection)?.model; + if (!model || !isExternalEmbedModel(model)) return null; + + const { url } = model; + const viewType = + ctx.std.get(EmbedOptionProvider).getEmbedBlockOptions(url) + ?.viewType ?? 'card'; + const actions = this.actions.map(action => ({ ...action })); + const viewType$ = signal( + `${viewType === 'card' ? 'Card' : 'Embed'} view` + ); + + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'c.style', + actions: [ + { + id: 'horizontal', + label: 'Large horizontal style', + }, + { + id: 'list', + label: 'Small horizontal style', + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + EmbedGithubModel + ); + if (!model) return null; + + const actions = this.actions.map(action => ({ + ...action, + run: ({ store }) => { + store.updateBlock(model, { style: action.id }); + + ctx.track('SelectedCardStyle', { + ...trackBaseProps, + control: 'select card style', + type: action.id, + }); + }, + })) satisfies ToolbarAction[]; + + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedCardStyleSelector', { + ...trackBaseProps, + control: 'switch card style', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'd.caption', + tooltip: 'Caption', + icon: CaptionIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + klass + ); + if (!component) return; + + component.captionEditor?.show(); + + ctx.track('OpenedCaptionEditor', { + ...trackBaseProps, + control: 'add caption', + }); + }, + }, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model || !isExternalEmbedModel(model)) return; + + const slice = Slice.fromModels(ctx.store, [model]); + ctx.clipboard + .copySlice(slice) + .then(() => toast(ctx.host, 'Copied to clipboard')) + .catch(console.error); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model || !isExternalEmbedModel(model)) return; + + const { flavour, parent } = model; + const props = getBlockProps(model); + const index = parent?.children.indexOf(model); + + ctx.store.addBlock(flavour, props, parent, index); + }, + }, + ], + }, + { + placement: ActionPlacement.More, + id: 'b.reload', + label: 'Reload', + icon: ResetIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + klass + ); + component?.refreshData(); + }, + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model || !isExternalEmbedModel(model)) return; + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + }, + }, + ], + } as const satisfies ToolbarModuleConfig; +} diff --git a/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts b/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts index 680c1aeb19..1b91f3a0aa 100644 --- a/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts +++ b/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts @@ -1,17 +1,31 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockServiceIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { EmbedFigmaBlockAdapterExtensions } from './adapters/extension.js'; -import { EmbedFigmaBlockOptionConfig } from './embed-figma-service.js'; +import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar'; +import { EmbedFigmaBlockAdapterExtensions } from './adapters/extension'; +import { EmbedFigmaBlockComponent } from './embed-figma-block'; +import { EmbedFigmaBlockOptionConfig } from './embed-figma-service'; + +const flavour = EmbedFigmaBlockSchema.model.flavour; export const EmbedFigmaBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:embed-figma'), - BlockViewExtension('affine:embed-figma', model => { + FlavourExtension(flavour), + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-figma-block` : literal`affine-embed-figma-block`; }), EmbedFigmaBlockAdapterExtensions, EmbedFigmaBlockOptionConfig, + ToolbarModuleExtension({ + id: BlockServiceIdentifier(flavour), + config: createBuiltinToolbarConfigForExternal(EmbedFigmaBlockComponent), + }), ].flat(); diff --git a/blocksuite/affine/block-embed/src/embed-github-block/embed-github-spec.ts b/blocksuite/affine/block-embed/src/embed-github-block/embed-github-spec.ts index 90635abbb1..a9655b2a33 100644 --- a/blocksuite/affine/block-embed/src/embed-github-block/embed-github-spec.ts +++ b/blocksuite/affine/block-embed/src/embed-github-block/embed-github-spec.ts @@ -1,21 +1,35 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { EmbedGithubBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockServiceIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { EmbedGithubBlockAdapterExtensions } from './adapters/extension.js'; +import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar'; +import { EmbedGithubBlockAdapterExtensions } from './adapters/extension'; +import { EmbedGithubBlockComponent } from './embed-github-block'; import { EmbedGithubBlockOptionConfig, EmbedGithubBlockService, -} from './embed-github-service.js'; +} from './embed-github-service'; + +const flavour = EmbedGithubBlockSchema.model.flavour; export const EmbedGithubBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:embed-github'), + FlavourExtension(flavour), EmbedGithubBlockService, - BlockViewExtension('affine:embed-github', model => { + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-github-block` : literal`affine-embed-github-block`; }), EmbedGithubBlockAdapterExtensions, EmbedGithubBlockOptionConfig, + ToolbarModuleExtension({ + id: BlockServiceIdentifier(flavour), + config: createBuiltinToolbarConfigForExternal(EmbedGithubBlockComponent), + }), ].flat(); diff --git a/blocksuite/affine/block-embed/src/embed-html-block/configs/toolbar.ts b/blocksuite/affine/block-embed/src/embed-html-block/configs/toolbar.ts new file mode 100644 index 0000000000..8292585a45 --- /dev/null +++ b/blocksuite/affine/block-embed/src/embed-html-block/configs/toolbar.ts @@ -0,0 +1,167 @@ +import { toast } from '@blocksuite/affine-components/toast'; +import { EmbedHtmlModel } from '@blocksuite/affine-model'; +import { + ActionPlacement, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { getBlockProps } from '@blocksuite/affine-shared/utils'; +import { BlockSelection } from '@blocksuite/block-std'; +import { + CaptionIcon, + CopyIcon, + DeleteIcon, + DuplicateIcon, + ExpandFullIcon, +} from '@blocksuite/icons/lit'; +import { Slice } from '@blocksuite/store'; +import { html } from 'lit'; +import { keyed } from 'lit/directives/keyed.js'; + +import { EmbedHtmlBlockComponent } from '../embed-html-block'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'html', + type: 'card view', +}; + +export const builtinToolbarConfig = { + actions: [ + { + id: 'a.open-doc', + icon: ExpandFullIcon(), + tooltip: 'Open this doc', + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedHtmlBlockComponent + ); + component?.open(); + }, + }, + { + id: 'b.style', + actions: [ + { + id: 'horizontal', + label: 'Large horizontal style', + }, + { + id: 'list', + label: 'Small horizontal style', + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType(BlockSelection, EmbedHtmlModel); + if (!model) return null; + + const actions = this.actions.map(action => ({ + ...action, + run: ({ store }) => { + store.updateBlock(model, { style: action.id }); + + ctx.track('SelectedCardStyle', { + ...trackBaseProps, + control: 'select card style', + type: action.id, + }); + }, + })); + + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedCardStyleSelector', { + ...trackBaseProps, + control: 'switch card style', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'c.caption', + tooltip: 'Caption', + icon: CaptionIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedHtmlBlockComponent + ); + component?.captionEditor?.show(); + + ctx.track('OpenedCaptionEditor', { + ...trackBaseProps, + control: 'add caption', + }); + }, + }, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + const slice = Slice.fromModels(ctx.store, [model]); + ctx.clipboard + .copySlice(slice) + .then(() => toast(ctx.host, 'Copied to clipboard')) + .catch(console.error); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + const { flavour, parent } = model; + const props = getBlockProps(model); + const index = parent?.children.indexOf(model); + + ctx.store.addBlock(flavour, props, parent, index); + }, + }, + ], + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/block-embed/src/embed-html-block/embed-html-spec.ts b/blocksuite/affine/block-embed/src/embed-html-block/embed-html-spec.ts index 8f9d6bd5d9..8ff079907b 100644 --- a/blocksuite/affine/block-embed/src/embed-html-block/embed-html-spec.ts +++ b/blocksuite/affine/block-embed/src/embed-html-block/embed-html-spec.ts @@ -1,11 +1,24 @@ -import { BlockViewExtension } from '@blocksuite/block-std'; +import { EmbedHtmlBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockFlavourIdentifier, + BlockViewExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; +import { builtinToolbarConfig } from './configs/toolbar'; + +const flavour = EmbedHtmlBlockSchema.model.flavour; + export const EmbedHtmlBlockSpec: ExtensionType[] = [ - BlockViewExtension('affine:embed-html', model => { + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-html-block` : literal`affine-embed-html-block`; }), + ToolbarModuleExtension({ + id: BlockFlavourIdentifier(flavour), + config: builtinToolbarConfig, + }), ]; diff --git a/blocksuite/affine/block-embed/src/embed-linked-doc-block/configs/toolbar.ts b/blocksuite/affine/block-embed/src/embed-linked-doc-block/configs/toolbar.ts new file mode 100644 index 0000000000..503a8bd8b4 --- /dev/null +++ b/blocksuite/affine/block-embed/src/embed-linked-doc-block/configs/toolbar.ts @@ -0,0 +1,276 @@ +import { toast } from '@blocksuite/affine-components/toast'; +import { EmbedLinkedDocModel } from '@blocksuite/affine-model'; +import { + ActionPlacement, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { + getBlockProps, + referenceToNode, +} from '@blocksuite/affine-shared/utils'; +import { BlockSelection } from '@blocksuite/block-std'; +import { + CaptionIcon, + CopyIcon, + DeleteIcon, + DuplicateIcon, +} from '@blocksuite/icons/lit'; +import { Slice } from '@blocksuite/store'; +import { signal } from '@preact/signals-core'; +import { html } from 'lit'; +import { keyed } from 'lit/directives/keyed.js'; + +import { EmbedLinkedDocBlockComponent } from '../embed-linked-doc-block'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'card view', +}; + +export const builtinToolbarConfig = { + actions: [ + { + id: 'a.doc-title', + content(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedLinkedDocBlockComponent + ); + if (!component) return null; + + const model = component.model; + if (!model.title) return null; + + const originalTitle = + ctx.workspace.getDoc(model.pageId)?.meta?.title || 'Untitled'; + + return html` component.open({ event })} + >`; + }, + }, + { + id: 'b.conversions', + actions: [ + { + id: 'inline', + label: 'Inline view', + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedLinkedDocBlockComponent + ); + component?.covertToInline(); + + // Clears + ctx.select('note'); + ctx.reset(); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'inline view', + }); + }, + }, + { + id: 'card', + label: 'Card view', + disabled: true, + }, + { + id: 'embed', + label: 'Embed view', + disabled(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedLinkedDocBlockComponent + ); + if (!component) return true; + + if (component.closest('affine-embed-synced-doc-block')) return true; + + const model = component.model; + + // same doc + if (model.pageId === ctx.store.id) return true; + + // linking to block + if (referenceToNode(model)) return true; + + return false; + }, + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedLinkedDocBlockComponent + ); + component?.convertToEmbed(); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'embed view', + }); + }, + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + EmbedLinkedDocModel + ); + if (!model) return null; + + const actions = this.actions.map(action => ({ ...action })); + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'c.style', + actions: [ + { + id: 'horizontal', + label: 'Large horizontal style', + }, + { + id: 'list', + label: 'Small horizontal style', + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + EmbedLinkedDocModel + ); + if (!model) return null; + + const actions = this.actions.map(action => ({ + ...action, + run: ({ store }) => { + store.updateBlock(model, { style: action.id }); + + ctx.track('SelectedCardStyle', { + ...trackBaseProps, + control: 'select card style', + type: action.id, + }); + }, + })) satisfies ToolbarAction[]; + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedCardStyleSelector', { + ...trackBaseProps, + control: 'switch card style', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'd.caption', + tooltip: 'Caption', + icon: CaptionIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedLinkedDocBlockComponent + ); + component?.captionEditor?.show(); + + ctx.track('OpenedCaptionEditor', { + ...trackBaseProps, + control: 'add caption', + }); + }, + }, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + const slice = Slice.fromModels(ctx.store, [model]); + ctx.clipboard + .copySlice(slice) + .then(() => toast(ctx.host, 'Copied to clipboard')) + .catch(console.error); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + const { flavour, parent } = model; + const props = getBlockProps(model); + const index = parent?.children.indexOf(model); + + ctx.store.addBlock(flavour, props, parent, index); + }, + }, + ], + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts index bce117957b..e60c8efbf7 100644 --- a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts +++ b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts @@ -109,7 +109,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent { - const selectionManager = this.host.selection; + const selectionManager = this.std.selection; const blockSelection = selectionManager.create(BlockSelection, { blockId: this.blockId, }); @@ -129,15 +129,10 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent { if (this._referenceToNode) return; - const { doc, caption } = this.model; + const { doc, caption, parent } = this.model; + const index = parent?.children.indexOf(this.model); - const parent = doc.getParent(this.model); - if (!parent) { - return; - } - const index = parent.children.indexOf(this.model); - - doc.addBlock( + const blockId = doc.addBlock( 'affine:embed-synced-doc', { caption, @@ -147,8 +142,11 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent { diff --git a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts index 128171c90d..6be8956c32 100644 --- a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts +++ b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts @@ -1,14 +1,26 @@ -import { BlockViewExtension } from '@blocksuite/block-std'; +import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockServiceIdentifier, + BlockViewExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { EmbedLinkedDocBlockAdapterExtensions } from './adapters/extension.js'; +import { EmbedLinkedDocBlockAdapterExtensions } from './adapters/extension'; +import { builtinToolbarConfig } from './configs/toolbar'; + +const flavour = EmbedLinkedDocBlockSchema.model.flavour; export const EmbedLinkedDocBlockSpec: ExtensionType[] = [ - BlockViewExtension('affine:embed-linked-doc', model => { + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-linked-doc-block` : literal`affine-embed-linked-doc-block`; }), EmbedLinkedDocBlockAdapterExtensions, + ToolbarModuleExtension({ + id: BlockServiceIdentifier(flavour), + config: builtinToolbarConfig, + }), ].flat(); diff --git a/blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-spec.ts b/blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-spec.ts index 4a1668a0f3..8d0f878605 100644 --- a/blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-spec.ts +++ b/blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-spec.ts @@ -1,21 +1,35 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { EmbedLoomBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockServiceIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { EmbedLoomBlockAdapterExtensions } from './adapters/extension.js'; +import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar'; +import { EmbedLoomBlockAdapterExtensions } from './adapters/extension'; +import { EmbedLoomBlockComponent } from './embed-loom-block'; import { EmbedLoomBlockOptionConfig, EmbedLoomBlockService, -} from './embed-loom-service.js'; +} from './embed-loom-service'; + +const flavour = EmbedLoomBlockSchema.model.flavour; export const EmbedLoomBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:embed-loom'), + FlavourExtension(flavour), EmbedLoomBlockService, - BlockViewExtension('affine:embed-loom', model => { + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-loom-block` : literal`affine-embed-loom-block`; }), EmbedLoomBlockAdapterExtensions, EmbedLoomBlockOptionConfig, + ToolbarModuleExtension({ + id: BlockServiceIdentifier(flavour), + config: createBuiltinToolbarConfigForExternal(EmbedLoomBlockComponent), + }), ].flat(); diff --git a/blocksuite/affine/block-embed/src/embed-synced-doc-block/configs/toolbar.ts b/blocksuite/affine/block-embed/src/embed-synced-doc-block/configs/toolbar.ts new file mode 100644 index 0000000000..d57a11c809 --- /dev/null +++ b/blocksuite/affine/block-embed/src/embed-synced-doc-block/configs/toolbar.ts @@ -0,0 +1,259 @@ +import { toast } from '@blocksuite/affine-components/toast'; +import { EmbedSyncedDocModel } from '@blocksuite/affine-model'; +import { + ActionPlacement, + type OpenDocMode, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarContext, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { getBlockProps } from '@blocksuite/affine-shared/utils'; +import { BlockSelection } from '@blocksuite/block-std'; +import { + ArrowDownSmallIcon, + CaptionIcon, + CopyIcon, + DeleteIcon, + DuplicateIcon, + ExpandFullIcon, + OpenInNewIcon, +} from '@blocksuite/icons/lit'; +import { Slice } from '@blocksuite/store'; +import { signal } from '@preact/signals-core'; +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { keyed } from 'lit/directives/keyed.js'; +import { repeat } from 'lit/directives/repeat.js'; + +import { EmbedSyncedDocBlockComponent } from '../embed-synced-doc-block'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'embed view', +}; + +export const builtinToolbarConfig = { + actions: [ + { + placement: ActionPlacement.Start, + id: 'A.open-doc', + actions: [ + { + id: 'open-in-active-view', + label: 'Open this doc', + icon: ExpandFullIcon(), + }, + ], + content(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedSyncedDocBlockComponent + ); + if (!component) return null; + + const actions = this.actions + .map(action => { + const shouldOpenInActiveView = action.id === 'open-in-active-view'; + const allowed = + typeof action.when === 'function' + ? action.when(ctx) + : (action.when ?? true); + return { + ...action, + disabled: shouldOpenInActiveView + ? component.model.pageId === ctx.store.id + : false, + when: allowed, + run: (_ctx: ToolbarContext) => + component.open({ + openMode: action.id as OpenDocMode, + }), + }; + }) + .filter(action => { + if (typeof action.when === 'function') return action.when(ctx); + return action.when ?? true; + }); + + return html` + + ${OpenInNewIcon()} ${ArrowDownSmallIcon()} + + `} + > +
+ ${repeat( + actions, + action => action.id, + ({ label, icon, run, disabled }) => html` + run?.(ctx)} + > + ${icon}${label} + + ` + )} +
+ + `; + }, + } satisfies ToolbarActionGroup, + { + id: 'a.conversions', + actions: [ + { + id: 'inline', + label: 'Inline view', + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedSyncedDocBlockComponent + ); + component?.covertToInline(); + + // Clears + ctx.reset(); + ctx.select('note'); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'inline view', + }); + }, + }, + { + id: 'card', + label: 'Card view', + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedSyncedDocBlockComponent + ); + component?.convertToCard(); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'card view', + }); + }, + }, + { + id: 'embed', + label: 'Embed view', + disabled: true, + }, + ], + content(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + EmbedSyncedDocModel + ); + if (!model) return null; + + const actions = this.actions.map(action => ({ ...action })); + + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + model, + html`` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'b.caption', + tooltip: 'Caption', + icon: CaptionIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedSyncedDocBlockComponent + ); + component?.captionEditor?.show(); + ctx.track('OpenedCaptionEditor', { + ...trackBaseProps, + control: 'add caption', + }); + }, + }, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + const slice = Slice.fromModels(ctx.store, [model]); + ctx.clipboard + .copySlice(slice) + .then(() => toast(ctx.host, 'Copied to clipboard')) + .catch(console.error); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + const { flavour, parent } = model; + const props = getBlockProps(model); + const index = parent?.children.indexOf(model); + + ctx.store.addBlock(flavour, props, parent, index); + }, + }, + ], + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const model = ctx.getCurrentModelBy(BlockSelection); + if (!model) return; + + ctx.store.deleteBlock(model); + + // Clears + ctx.select('note'); + ctx.reset(); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts b/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts index e88a18acad..53ffd239cc 100644 --- a/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts +++ b/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts @@ -291,15 +291,18 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent { @@ -469,7 +472,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent { + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-synced-doc-block` : literal`affine-embed-synced-doc-block`; }), EmbedSyncedDocBlockAdapterExtensions, + ToolbarModuleExtension({ + id: BlockServiceIdentifier(flavour), + config: builtinToolbarConfig, + }), ].flat(); diff --git a/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-spec.ts b/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-spec.ts index f10e9fb94f..dfa9466001 100644 --- a/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-spec.ts +++ b/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-spec.ts @@ -1,21 +1,35 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { EmbedYoutubeBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockServiceIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { EmbedYoutubeBlockAdapterExtensions } from './adapters/extension.js'; +import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar'; +import { EmbedYoutubeBlockAdapterExtensions } from './adapters/extension'; +import { EmbedYoutubeBlockComponent } from './embed-youtube-block'; import { EmbedYoutubeBlockOptionConfig, EmbedYoutubeBlockService, -} from './embed-youtube-service.js'; +} from './embed-youtube-service'; + +const flavour = EmbedYoutubeBlockSchema.model.flavour; export const EmbedYoutubeBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:embed-youtube'), + FlavourExtension(flavour), EmbedYoutubeBlockService, - BlockViewExtension('affine:embed-youtube', model => { + BlockViewExtension(flavour, model => { return model.parent?.flavour === 'affine:surface' ? literal`affine-embed-edgeless-youtube-block` : literal`affine-embed-youtube-block`; }), EmbedYoutubeBlockAdapterExtensions, EmbedYoutubeBlockOptionConfig, + ToolbarModuleExtension({ + id: BlockServiceIdentifier(flavour), + config: createBuiltinToolbarConfigForExternal(EmbedYoutubeBlockComponent), + }), ].flat(); diff --git a/blocksuite/affine/block-embed/src/index.ts b/blocksuite/affine/block-embed/src/index.ts index 3ceed9ecd5..7e87f978cd 100644 --- a/blocksuite/affine/block-embed/src/index.ts +++ b/blocksuite/affine/block-embed/src/index.ts @@ -9,11 +9,14 @@ import { EmbedSyncedDocBlockSpec } from './embed-synced-doc-block'; import { EmbedYoutubeBlockSpec } from './embed-youtube-block'; export const EmbedExtensions: ExtensionType[] = [ + // External embed blocks EmbedFigmaBlockSpec, EmbedGithubBlockSpec, - EmbedHtmlBlockSpec, EmbedLoomBlockSpec, EmbedYoutubeBlockSpec, + + // Internal embed blocks + EmbedHtmlBlockSpec, EmbedLinkedDocBlockSpec, EmbedSyncedDocBlockSpec, ].flat(); @@ -22,7 +25,7 @@ export { createEmbedBlockHtmlAdapterMatcher } from './common/adapters/html'; export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdown'; export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text'; export { EmbedBlockComponent } from './common/embed-block-element'; -export { insertEmbedCard } from './common/insert-embed-card.js'; +export { insertEmbedCard } from './common/insert-embed-card'; export * from './common/render-linked-doc'; export { toEdgelessEmbedBlock } from './common/to-edgeless-embed-block'; export * from './common/utils'; @@ -33,3 +36,4 @@ export * from './embed-linked-doc-block'; export * from './embed-loom-block'; export * from './embed-synced-doc-block'; export * from './embed-youtube-block'; +export * from './types'; diff --git a/blocksuite/affine/block-embed/src/types.ts b/blocksuite/affine/block-embed/src/types.ts new file mode 100644 index 0000000000..a8cf14f8cd --- /dev/null +++ b/blocksuite/affine/block-embed/src/types.ts @@ -0,0 +1,33 @@ +import type { BlockComponent } from '@blocksuite/block-std'; + +import { EmbedFigmaBlockComponent } from './embed-figma-block'; +import { EmbedGithubBlockComponent } from './embed-github-block'; +import type { EmbedLinkedDocBlockComponent } from './embed-linked-doc-block'; +import { EmbedLoomBlockComponent } from './embed-loom-block'; +import type { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block'; +import { EmbedYoutubeBlockComponent } from './embed-youtube-block'; + +export type ExternalEmbedBlockComponent = + | EmbedFigmaBlockComponent + | EmbedGithubBlockComponent + | EmbedLoomBlockComponent + | EmbedYoutubeBlockComponent; + +export type InternalEmbedBlockComponent = + | EmbedLinkedDocBlockComponent + | EmbedSyncedDocBlockComponent; + +export type LinkableEmbedBlockComponent = + | ExternalEmbedBlockComponent + | InternalEmbedBlockComponent; + +export function isExternalEmbedBlockComponent( + block: BlockComponent +): block is ExternalEmbedBlockComponent { + return ( + block instanceof EmbedFigmaBlockComponent || + block instanceof EmbedGithubBlockComponent || + block instanceof EmbedLoomBlockComponent || + block instanceof EmbedYoutubeBlockComponent + ); +} diff --git a/blocksuite/affine/block-image/src/image-spec.ts b/blocksuite/affine/block-image/src/image-spec.ts index 9457153154..ec020e9a3c 100644 --- a/blocksuite/affine/block-image/src/image-spec.ts +++ b/blocksuite/affine/block-image/src/image-spec.ts @@ -6,9 +6,11 @@ import { import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; -import { ImageBlockAdapterExtensions } from './adapters/extension.js'; -import { ImageProxyService } from './image-proxy-service.js'; -import { ImageBlockService, ImageDropOption } from './image-service.js'; +import { ImageBlockAdapterExtensions } from './adapters/extension'; +import { ImageProxyService } from './image-proxy-service'; +import { ImageBlockService, ImageDropOption } from './image-service'; + +const flavour = 'affine:image'; export const imageToolbarWidget = WidgetViewExtension( 'affine:image', @@ -17,9 +19,9 @@ export const imageToolbarWidget = WidgetViewExtension( ); export const ImageBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:image'), + FlavourExtension(flavour), ImageBlockService, - BlockViewExtension('affine:image', model => { + BlockViewExtension(flavour, model => { const parent = model.doc.getParent(model.id); if (parent?.flavour === 'affine:surface') { diff --git a/blocksuite/affine/block-note/package.json b/blocksuite/affine/block-note/package.json index 84ce7bd6ec..be4652247b 100644 --- a/blocksuite/affine/block-note/package.json +++ b/blocksuite/affine/block-note/package.json @@ -13,17 +13,18 @@ "author": "toeverything", "license": "MIT", "dependencies": { + "@blocksuite/affine-block-database": "workspace:*", "@blocksuite/affine-block-embed": "workspace:*", "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/block-std": "workspace:*", + "@blocksuite/data-view": "workspace:*", "@blocksuite/global": "workspace:*", "@blocksuite/icons": "^2.2.1", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", - "@floating-ui/dom": "^1.6.13", "@lit/context": "^1.1.2", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.12", diff --git a/blocksuite/affine/block-note/src/configs/toolbar.ts b/blocksuite/affine/block-note/src/configs/toolbar.ts new file mode 100644 index 0000000000..2107b6a0f7 --- /dev/null +++ b/blocksuite/affine/block-note/src/configs/toolbar.ts @@ -0,0 +1,374 @@ +import { + convertToDatabase, + DATABASE_CONVERT_WHITE_LIST, +} from '@blocksuite/affine-block-database'; +import { + convertSelectedBlocksToLinkedDoc, + getTitleFromSelectedModels, + notifyDocCreated, + promptDocTitle, +} from '@blocksuite/affine-block-embed'; +import { + deleteTextCommand, + formatBlockCommand, + formatNativeCommand, + formatTextCommand, + isFormatSupported, + textConversionConfigs, + textFormatConfigs, +} from '@blocksuite/affine-components/rich-text'; +import { toast } from '@blocksuite/affine-components/toast'; +import { + copySelectedModelsCommand, + deleteSelectedModelsCommand, + draftSelectedModelsCommand, + duplicateSelectedModelsCommand, + getBlockSelectionsCommand, + getImageSelectionsCommand, + getSelectedBlocksCommand, + getSelectedModelsCommand, + getTextSelectionCommand, +} from '@blocksuite/affine-shared/commands'; +import type { + ToolbarAction, + ToolbarActionGenerator, + ToolbarActionGroup, + ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { ActionPlacement } from '@blocksuite/affine-shared/services'; +import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; +import { type BlockComponent, BlockSelection } from '@blocksuite/block-std'; +import { tableViewMeta } from '@blocksuite/data-view/view-presets'; +import { + ArrowDownSmallIcon, + CopyIcon, + DatabaseTableViewIcon, + DeleteIcon, + DuplicateIcon, + LinkedPageIcon, +} from '@blocksuite/icons/lit'; +import { toDraftModel } from '@blocksuite/store'; +import { html } from 'lit'; +import { repeat } from 'lit/directives/repeat.js'; + +import { updateBlockType } from '../commands'; + +const conversionsActionGroup = { + id: 'a.conversions', + when: ({ chain }) => isFormatSupported(chain).run()[0], + generate({ chain }) { + const [ok, { selectedModels = [] }] = chain + .tryAll(chain => [ + chain.pipe(getTextSelectionCommand), + chain.pipe(getBlockSelectionsCommand), + ]) + .pipe(getSelectedModelsCommand, { types: ['text', 'block'] }) + .run(); + + // only support model with text + // TODO(@fundon): displays only in a single paragraph, `length === 1`. + const allowed = ok && selectedModels.filter(model => model.text).length > 0; + if (!allowed) return null; + + const model = selectedModels[0]; + const conversion = + textConversionConfigs.find( + ({ flavour, type }) => + flavour === model.flavour && + (type ? 'type' in model && type === model.type : true) + ) ?? textConversionConfigs[0]; + const update = (flavour: string, type?: string) => { + chain + .pipe(updateBlockType, { + flavour, + ...(type && { props: { type } }), + }) + .run(); + }; + + return { + content: html` + + ${conversion.icon} ${ArrowDownSmallIcon()} + + `} + > +
+ ${repeat( + textConversionConfigs.filter(c => c.flavour !== 'affine:divider'), + item => item.name, + ({ flavour, type, name, icon }) => html` + update(flavour, type)} + > + ${icon}${name} + + ` + )} +
+ + `, + }; + }, +} as const satisfies ToolbarActionGenerator; + +const inlineTextActionGroup = { + id: 'b.inline-text', + when: ({ chain }) => isFormatSupported(chain).run()[0], + actions: textFormatConfigs.map( + ({ id, name, action, activeWhen, icon }, score) => { + return { + id, + icon, + score, + tooltip: name, + run: ({ host }) => action(host), + active: ({ host }) => activeWhen(host), + }; + } + ), +} as const satisfies ToolbarActionGroup; + +const highlightActionGroup = { + id: 'c.highlight', + when: ({ chain }) => isFormatSupported(chain).run()[0], + content({ chain }) { + const updateHighlight = (styles: AffineTextAttributes) => { + const payload = { styles }; + chain + .try(chain => [ + chain.pipe(getTextSelectionCommand).pipe(formatTextCommand, payload), + chain + .pipe(getBlockSelectionsCommand) + .pipe(formatBlockCommand, payload), + chain.pipe(formatNativeCommand, payload), + ]) + .run(); + }; + return html` + + `; + }, +} as const satisfies ToolbarAction; + +export const turnIntoDatabase = { + id: 'd.convert-to-database', + tooltip: 'Create Table', + icon: DatabaseTableViewIcon(), + when({ chain }) { + const middleware = (count = 0) => { + return (ctx: { selectedBlocks: BlockComponent[] }, next: () => void) => { + const { selectedBlocks } = ctx; + if (!selectedBlocks || selectedBlocks.length === count) return; + + const allowed = selectedBlocks.every(block => + DATABASE_CONVERT_WHITE_LIST.includes(block.flavour) + ); + if (!allowed) return; + + next(); + }; + }; + + let [ok] = chain + .pipe(getTextSelectionCommand) + .pipe(getSelectedBlocksCommand, { + types: ['text'], + }) + .pipe(middleware(1)) + .run(); + + if (ok) return true; + + [ok] = chain + .tryAll(chain => [ + chain.pipe(getBlockSelectionsCommand), + chain.pipe(getImageSelectionsCommand), + ]) + .pipe(getSelectedBlocksCommand, { + types: ['block', 'image'], + }) + .pipe(middleware(0)) + .run(); + + return ok; + }, + run({ host }) { + convertToDatabase(host, tableViewMeta.type); + }, +} as const satisfies ToolbarAction; + +export const turnIntoLinkedDoc = { + id: 'e.convert-to-linked-doc', + tooltip: 'Create Linked Doc', + icon: LinkedPageIcon(), + when({ chain }) { + const [ok, { selectedModels }] = chain + .pipe(getSelectedModelsCommand, { + types: ['block', 'text'], + mode: 'flat', + }) + .run(); + return ok && Boolean(selectedModels?.length); + }, + run({ chain, store, selection, std, track }) { + const [ok, { draftedModels, selectedModels }] = chain + .pipe(getSelectedModelsCommand, { + types: ['block', 'text'], + mode: 'flat', + }) + .pipe(draftSelectedModelsCommand) + .run(); + if (!ok || !draftedModels || !selectedModels?.length) return; + + selection.clear(); + + const autofill = getTitleFromSelectedModels( + selectedModels.map(toDraftModel) + ); + promptDocTitle(std, autofill) + .then(async title => { + if (title === null) return; + await convertSelectedBlocksToLinkedDoc( + std, + store, + draftedModels, + title + ); + notifyDocCreated(std, store); + + track('DocCreated', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + control: 'create linked doc', + type: 'embed-linked-doc', + }); + + track('LinkedDocCreated', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + control: 'create linked doc', + type: 'embed-linked-doc', + }); + }) + .catch(console.error); + }, +} as const satisfies ToolbarAction; + +export const builtinToolbarConfig = { + actions: [ + conversionsActionGroup, + inlineTextActionGroup, + highlightActionGroup, + turnIntoDatabase, + turnIntoLinkedDoc, + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy', + label: 'Copy', + icon: CopyIcon(), + run({ chain, host }) { + const [ok] = chain + .pipe(getSelectedModelsCommand) + .pipe(draftSelectedModelsCommand) + .pipe(copySelectedModelsCommand) + .run(); + + if (!ok) return; + + toast(host, 'Copied to clipboard'); + }, + }, + { + id: 'duplicate', + label: 'Duplicate', + icon: DuplicateIcon(), + run({ chain, store, selection }) { + store.captureSync(); + + const [ok, { selectedBlocks = [] }] = chain + .pipe(getTextSelectionCommand) + .pipe(getSelectedBlocksCommand, { + types: ['text'], + mode: 'highest', + }) + .run(); + + // If text selection exists, convert to block selection + if (ok && selectedBlocks.length) { + selection.setGroup( + 'note', + selectedBlocks.map(block => + selection.create(BlockSelection, { + blockId: block.model.id, + }) + ) + ); + } + + chain + .pipe(getSelectedModelsCommand, { + types: ['block', 'image'], + mode: 'highest', + }) + .pipe(draftSelectedModelsCommand) + .pipe(duplicateSelectedModelsCommand) + .run(); + }, + }, + ], + when(ctx) { + return !ctx.flags.isNative(); + }, + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + actions: [ + { + id: 'delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run({ chain }) { + // removes text + const [ok] = chain + .pipe(getTextSelectionCommand) + .pipe(deleteTextCommand) + .run(); + + if (ok) return; + + // removes blocks + chain + .tryAll(chain => [ + chain.pipe(getBlockSelectionsCommand), + chain.pipe(getImageSelectionsCommand), + ]) + .pipe(getSelectedModelsCommand) + .pipe(deleteSelectedModelsCommand) + .run(); + }, + }, + ], + when(ctx) { + return !ctx.flags.isNative(); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/block-note/src/note-spec.ts b/blocksuite/affine/block-note/src/note-spec.ts index a51d9e54ce..2ebf489f4c 100644 --- a/blocksuite/affine/block-note/src/note-spec.ts +++ b/blocksuite/affine/block-note/src/note-spec.ts @@ -1,4 +1,10 @@ -import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std'; +import { NoteBlockSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { + BlockFlavourIdentifier, + BlockViewExtension, + FlavourExtension, +} from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; @@ -6,18 +12,29 @@ import { DocNoteBlockAdapterExtensions, EdgelessNoteBlockAdapterExtensions, } from './adapters/index.js'; +import { builtinToolbarConfig } from './configs/toolbar.js'; import { NoteBlockService } from './note-service.js'; +const flavour = NoteBlockSchema.model.flavour; + export const NoteBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:note'), + FlavourExtension(flavour), NoteBlockService, - BlockViewExtension('affine:note', literal`affine-note`), + BlockViewExtension(flavour, literal`affine-note`), DocNoteBlockAdapterExtensions, + ToolbarModuleExtension({ + id: BlockFlavourIdentifier(flavour), + config: builtinToolbarConfig, + }), ].flat(); export const EdgelessNoteBlockSpec: ExtensionType[] = [ - FlavourExtension('affine:note'), + FlavourExtension(flavour), NoteBlockService, - BlockViewExtension('affine:note', literal`affine-edgeless-note`), + BlockViewExtension(flavour, literal`affine-edgeless-note`), EdgelessNoteBlockAdapterExtensions, + ToolbarModuleExtension({ + id: BlockFlavourIdentifier(flavour), + config: builtinToolbarConfig, + }), ].flat(); diff --git a/blocksuite/affine/block-root/package.json b/blocksuite/affine/block-root/package.json index 5563e4b555..2919dd7374 100644 --- a/blocksuite/affine/block-root/package.json +++ b/blocksuite/affine/block-root/package.json @@ -36,6 +36,7 @@ "@blocksuite/affine-widget-frame-title": "workspace:*", "@blocksuite/affine-widget-remote-selection": "workspace:*", "@blocksuite/affine-widget-scroll-anchoring": "workspace:*", + "@blocksuite/affine-widget-toolbar": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/data-view": "workspace:*", "@blocksuite/global": "workspace:*", diff --git a/blocksuite/affine/block-root/src/common-specs/index.ts b/blocksuite/affine/block-root/src/common-specs/index.ts index 1cc89358d7..b01a54736e 100644 --- a/blocksuite/affine/block-root/src/common-specs/index.ts +++ b/blocksuite/affine/block-root/src/common-specs/index.ts @@ -5,17 +5,17 @@ import { EmbedOptionService, PageViewportServiceExtension, ThemeService, + ToolbarRegistryExtension, } from '@blocksuite/affine-shared/services'; import { dragHandleWidget } from '@blocksuite/affine-widget-drag-handle'; import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection'; import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring'; +import { toolbarWidget } from '@blocksuite/affine-widget-toolbar'; import { FlavourExtension } from '@blocksuite/block-std'; import type { ExtensionType } from '@blocksuite/store'; import { RootBlockAdapterExtensions } from '../adapters/extension'; import { - embedCardToolbarWidget, - formatBarWidget, innerModalWidget, linkedDocWidget, modalWidget, @@ -31,6 +31,7 @@ export const CommonSpecs: ExtensionType[] = [ PageViewportServiceExtension, DNDAPIExtension, FileDropExtension, + ToolbarRegistryExtension, ...RootBlockAdapterExtensions, modalWidget, @@ -38,11 +39,10 @@ export const CommonSpecs: ExtensionType[] = [ slashMenuWidget, linkedDocWidget, dragHandleWidget, - embedCardToolbarWidget, - formatBarWidget, docRemoteSelectionWidget, viewportOverlayWidget, scrollAnchoringWidget, + toolbarWidget, ]; export * from './widgets'; diff --git a/blocksuite/affine/block-root/src/common-specs/widgets.ts b/blocksuite/affine/block-root/src/common-specs/widgets.ts index a247391d67..c72600a173 100644 --- a/blocksuite/affine/block-root/src/common-specs/widgets.ts +++ b/blocksuite/affine/block-root/src/common-specs/widgets.ts @@ -1,8 +1,6 @@ import { WidgetViewExtension } from '@blocksuite/block-std'; import { literal, unsafeStatic } from 'lit/static-html.js'; -import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js'; -import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js'; import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js'; import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js'; import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js'; @@ -29,16 +27,6 @@ export const linkedDocWidget = WidgetViewExtension( AFFINE_LINKED_DOC_WIDGET, literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}` ); -export const embedCardToolbarWidget = WidgetViewExtension( - 'affine:page', - AFFINE_EMBED_CARD_TOOLBAR_WIDGET, - literal`${unsafeStatic(AFFINE_EMBED_CARD_TOOLBAR_WIDGET)}` -); -export const formatBarWidget = WidgetViewExtension( - 'affine:page', - AFFINE_FORMAT_BAR_WIDGET, - literal`${unsafeStatic(AFFINE_FORMAT_BAR_WIDGET)}` -); export const viewportOverlayWidget = WidgetViewExtension( 'affine:page', AFFINE_VIEWPORT_OVERLAY_WIDGET, diff --git a/blocksuite/affine/block-root/src/effects.ts b/blocksuite/affine/block-root/src/effects.ts index 96c058bae4..f0d004b2fe 100644 --- a/blocksuite/affine/block-root/src/effects.ts +++ b/blocksuite/affine/block-root/src/effects.ts @@ -75,15 +75,11 @@ import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/te import { EdgelessTemplateButton } from './edgeless/components/toolbar/template/template-tool-button.js'; import { EdgelessTextMenu } from './edgeless/components/toolbar/text/text-menu.js'; import { - AFFINE_EMBED_CARD_TOOLBAR_WIDGET, - AFFINE_FORMAT_BAR_WIDGET, - AffineFormatBarWidget, AffineImageToolbarWidget, AffineModalWidget, EDGELESS_TOOLBAR_WIDGET, EdgelessRootBlockComponent, EdgelessRootPreviewBlockComponent, - EmbedCardToolbar, FramePreview, PageRootBlockComponent, PreviewRootBlockComponent, @@ -153,7 +149,6 @@ function registerRootComponents() { } function registerWidgets() { - customElements.define(AFFINE_EMBED_CARD_TOOLBAR_WIDGET, EmbedCardToolbar); customElements.define(AFFINE_INNER_MODAL_WIDGET, AffineInnerModalWidget); customElements.define(AFFINE_MODAL_WIDGET, AffineModalWidget); customElements.define( @@ -171,7 +166,6 @@ function registerWidgets() { AffineEdgelessZoomToolbarWidget ); customElements.define(AFFINE_SURFACE_REF_TOOLBAR, AffineSurfaceRefToolbar); - customElements.define(AFFINE_FORMAT_BAR_WIDGET, AffineFormatBarWidget); } function registerEdgelessToolbarComponents() { diff --git a/blocksuite/affine/block-root/src/types.ts b/blocksuite/affine/block-root/src/types.ts index d7a89c9ba1..409b693d73 100644 --- a/blocksuite/affine/block-root/src/types.ts +++ b/blocksuite/affine/block-root/src/types.ts @@ -9,8 +9,6 @@ import type { EdgelessRootBlockComponent } from './edgeless/edgeless-root-block. 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 { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from './widgets/element-toolbar/index.js'; -import type { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from './widgets/embed-card-toolbar/embed-card-toolbar.js'; -import type { AFFINE_FORMAT_BAR_WIDGET } from './widgets/format-bar/format-bar.js'; import type { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from './widgets/index.js'; import type { AFFINE_INNER_MODAL_WIDGET } from './widgets/inner-modal/inner-modal.js'; import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/config.js'; @@ -27,8 +25,6 @@ export type PageRootBlockWidgetName = | typeof AFFINE_LINKED_DOC_WIDGET | typeof AFFINE_PAGE_DRAGGING_AREA_WIDGET | typeof AFFINE_DRAG_HANDLE_WIDGET - | typeof AFFINE_EMBED_CARD_TOOLBAR_WIDGET - | typeof AFFINE_FORMAT_BAR_WIDGET | typeof AFFINE_DOC_REMOTE_SELECTION_WIDGET | typeof AFFINE_VIEWPORT_OVERLAY_WIDGET; @@ -38,8 +34,6 @@ export type EdgelessRootBlockWidgetName = | typeof AFFINE_SLASH_MENU_WIDGET | typeof AFFINE_LINKED_DOC_WIDGET | typeof AFFINE_DRAG_HANDLE_WIDGET - | typeof AFFINE_EMBED_CARD_TOOLBAR_WIDGET - | typeof AFFINE_FORMAT_BAR_WIDGET | typeof AFFINE_DOC_REMOTE_SELECTION_WIDGET | typeof AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET | typeof AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET diff --git a/blocksuite/affine/block-root/src/utils/types.ts b/blocksuite/affine/block-root/src/utils/types.ts index 4f2c1d742e..91ff028e42 100644 --- a/blocksuite/affine/block-root/src/utils/types.ts +++ b/blocksuite/affine/block-root/src/utils/types.ts @@ -7,25 +7,12 @@ import { EmbedLoomBlockComponent, EmbedSyncedDocBlockComponent, EmbedYoutubeBlockComponent, + type LinkableEmbedBlockComponent, } from '@blocksuite/affine-block-embed'; import type { BlockComponent } from '@blocksuite/block-std'; -export type ExternalEmbedBlockComponent = - | BookmarkBlockComponent - | EmbedFigmaBlockComponent - | EmbedGithubBlockComponent - | EmbedLoomBlockComponent - | EmbedYoutubeBlockComponent; - -export type InternalEmbedBlockComponent = - | EmbedLinkedDocBlockComponent - | EmbedSyncedDocBlockComponent; - -export type LinkableEmbedBlockComponent = - | ExternalEmbedBlockComponent - | InternalEmbedBlockComponent; - export type BuiltInEmbedBlockComponent = + | BookmarkBlockComponent | LinkableEmbedBlockComponent | EmbedHtmlBlockComponent; diff --git a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-attachment-button.ts b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-attachment-button.ts index 68c093ec7e..747e55dc79 100644 --- a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-attachment-button.ts +++ b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-attachment-button.ts @@ -1,6 +1,6 @@ import { type AttachmentBlockComponent, - attachmentViewToggleMenu, + attachmentViewDropdownMenu, } from '@blocksuite/affine-block-attachment'; import { getEmbedCardIcons } from '@blocksuite/affine-block-embed'; import { @@ -17,7 +17,10 @@ import { EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH, } from '@blocksuite/affine-shared/consts'; -import { ThemeProvider } from '@blocksuite/affine-shared/services'; +import { + ThemeProvider, + ToolbarContext, +} from '@blocksuite/affine-shared/services'; import { Bound } from '@blocksuite/global/gfx'; import { WithDisposable } from '@blocksuite/global/utils'; import type { TemplateResult } from 'lit'; @@ -79,17 +82,6 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) { return this.edgeless.std; } - get viewToggleMenu() { - const block = this._block; - const model = this.model; - if (!block || !model) return nothing; - - return attachmentViewToggleMenu({ - block, - callback: () => this.requestUpdate(), - }); - } - override render() { return join( [ @@ -115,7 +107,10 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) { `, - this.viewToggleMenu, + + // TODO(@fundon): should remove it when refactoring the element toolbar + attachmentViewDropdownMenu(new ToolbarContext(this.std)), + html` `, - ].filter(button => button !== nothing && button), + ].filter(button => button !== null), renderToolbarSeparator ); } diff --git a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/config.ts b/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/config.ts deleted file mode 100644 index 942399e541..0000000000 --- a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/config.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { - CopyIcon, - DeleteIcon, - DuplicateIcon, - RefreshIcon, -} from '@blocksuite/affine-components/icons'; -import { toast } from '@blocksuite/affine-components/toast'; -import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar'; -import { getBlockProps } from '@blocksuite/affine-shared/utils'; -import { Slice } from '@blocksuite/store'; - -import { - isAttachmentBlock, - isBookmarkBlock, - isEmbeddedLinkBlock, - isImageBlock, -} from '../../edgeless/utils/query.js'; -import type { EmbedCardToolbarContext } from './context.js'; - -export const BUILT_IN_GROUPS: MenuItemGroup[] = [ - { - type: 'clipboard', - items: [ - { - type: 'copy', - label: 'Copy', - icon: CopyIcon, - disabled: ({ doc }) => doc.readonly, - action: async ({ host, doc, std, blockComponent, close }) => { - const slice = Slice.fromModels(doc, [blockComponent.model]); - await std.clipboard.copySlice(slice); - toast(host, 'Copied link to clipboard'); - close(); - }, - }, - { - type: 'duplicate', - label: 'Duplicate', - icon: DuplicateIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ doc, blockComponent, close }) => { - const model = blockComponent.model; - const blockProps = getBlockProps(model); - const { - width: _width, - height: _height, - xywh: _xywh, - rotate: _rotate, - zIndex: _zIndex, - ...duplicateProps - } = blockProps; - - const parent = doc.getParent(model); - const index = parent?.children.indexOf(model); - doc.addBlock(model.flavour, duplicateProps, parent, index); - close(); - }, - }, - { - type: 'reload', - label: 'Reload', - icon: RefreshIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ blockComponent, close }) => { - blockComponent?.refreshData(); - close(); - }, - when: ({ blockComponent }) => { - const model = blockComponent.model; - - return ( - !!model && - (isImageBlock(model) || - isBookmarkBlock(model) || - isAttachmentBlock(model) || - isEmbeddedLinkBlock(model)) - ); - }, - }, - ], - }, - { - type: 'delete', - items: [ - { - type: 'delete', - label: 'Delete', - icon: DeleteIcon, - disabled: ({ doc }) => doc.readonly, - action: ({ doc, blockComponent, close }) => { - doc.deleteBlock(blockComponent.model); - close(); - }, - }, - ], - }, -]; diff --git a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/context.ts b/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/context.ts deleted file mode 100644 index e4cb7f791a..0000000000 --- a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/context.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { MenuContext } from '@blocksuite/affine-components/toolbar'; - -import type { BuiltInEmbedBlockComponent } from '../../utils'; - -export class EmbedCardToolbarContext extends MenuContext { - override close = () => { - this.abortController.abort(); - }; - - get doc() { - return this.blockComponent.doc; - } - - get host() { - return this.blockComponent.host; - } - - get selectedBlockModels() { - if (this.blockComponent.model) return [this.blockComponent.model]; - return []; - } - - get std() { - return this.host.std; - } - - constructor( - public blockComponent: BuiltInEmbedBlockComponent, - public abortController: AbortController - ) { - super(); - } - - isEmpty() { - return false; - } - - isMultiple() { - return false; - } - - isSingle() { - return true; - } -} diff --git a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/embed-card-toolbar.ts b/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/embed-card-toolbar.ts deleted file mode 100644 index 7b25a7dcb1..0000000000 --- a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/embed-card-toolbar.ts +++ /dev/null @@ -1,923 +0,0 @@ -import { - EmbedLinkedDocBlockComponent, - EmbedSyncedDocBlockComponent, - getDocContentWithMaxLength, - getEmbedCardIcons, -} from '@blocksuite/affine-block-embed'; -import { - toggleEmbedCardCaptionEditModal, - toggleEmbedCardEditModal, -} from '@blocksuite/affine-components/embed-card-modal'; -import { - CaptionIcon, - CopyIcon, - EditIcon, - OpenIcon, - PaletteIcon, -} from '@blocksuite/affine-components/icons'; -import { - notifyLinkedDocClearedAliases, - notifyLinkedDocSwitchedToCard, - notifyLinkedDocSwitchedToEmbed, -} from '@blocksuite/affine-components/notification'; -import { isPeekable, peek } from '@blocksuite/affine-components/peek'; -import { toast } from '@blocksuite/affine-components/toast'; -import { - cloneGroups, - getMoreMenuConfig, - type MenuItem, - type MenuItemGroup, - renderGroups, - renderToolbarSeparator, -} from '@blocksuite/affine-components/toolbar'; -import { - type AliasInfo, - type BookmarkBlockModel, - BookmarkStyles, - type BuiltInEmbedModel, - type EmbedCardStyle, - type EmbedGithubModel, - type EmbedLinkedDocModel, - isInternalEmbedModel, - type RootBlockModel, -} from '@blocksuite/affine-model'; -import { - EmbedOptionProvider, - type EmbedOptions, - GenerateDocUrlProvider, - type GenerateDocUrlService, - type LinkEventType, - OpenDocExtensionIdentifier, - type TelemetryEvent, - TelemetryProvider, - ThemeProvider, -} from '@blocksuite/affine-shared/services'; -import { getHostName, referenceToNode } from '@blocksuite/affine-shared/utils'; -import { - BlockSelection, - type BlockStdScope, - TextSelection, - WidgetComponent, -} from '@blocksuite/block-std'; -import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; -import { type BlockModel, Text } from '@blocksuite/store'; -import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom'; -import { html, nothing, type TemplateResult } from 'lit'; -import { query, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { join } from 'lit/directives/join.js'; -import { repeat } from 'lit/directives/repeat.js'; -import * as Y from 'yjs'; - -import { - isBookmarkBlock, - isEmbedGithubBlock, - isEmbedHtmlBlock, - isEmbedLinkedDocBlock, - isEmbedSyncedDocBlock, -} from '../../edgeless/utils/query.js'; -import type { RootBlockComponent } from '../../types.js'; -import { - type BuiltInEmbedBlockComponent, - isEmbedCardBlockComponent, -} from '../../utils/types'; -import { BUILT_IN_GROUPS } from './config.js'; -import { EmbedCardToolbarContext } from './context.js'; -import { embedCardToolbarStyle } from './styles.js'; - -export const AFFINE_EMBED_CARD_TOOLBAR_WIDGET = 'affine-embed-card-toolbar'; - -export class EmbedCardToolbar extends WidgetComponent< - RootBlockModel, - RootBlockComponent -> { - static override styles = embedCardToolbarStyle; - - private _abortController = new AbortController(); - - private readonly _copyUrl = () => { - const model = this.focusModel; - if (!model) return; - - let url!: ReturnType; - const isInternal = isInternalEmbedModel(model); - - if ('url' in model) { - url = model.url; - } else if (isInternal) { - url = this.std - .getOptional(GenerateDocUrlProvider) - ?.generateDocUrl(model.pageId, model.params); - } - - if (!url) return; - - navigator.clipboard.writeText(url).catch(console.error); - toast(this.std.host, 'Copied link to clipboard'); - - track(this.std, model, this._viewType, 'CopiedLink', { - control: 'copy link', - }); - }; - - private _embedOptions: EmbedOptions | null = null; - - private readonly _openEditPopup = (e: MouseEvent) => { - e.stopPropagation(); - - const model = this.focusModel; - if (!model || isEmbedHtmlBlock(model)) return; - - const originalDocInfo = this._originalDocInfo; - - this._hide(); - - toggleEmbedCardEditModal( - this.host, - model, - this._viewType, - originalDocInfo, - (std, component) => { - if ( - isEmbedLinkedDocBlock(model) && - component instanceof EmbedLinkedDocBlockComponent - ) { - component.refreshData(); - - notifyLinkedDocClearedAliases(std); - } - }, - (std, component, props) => { - if ( - isEmbedSyncedDocBlock(model) && - component instanceof EmbedSyncedDocBlockComponent - ) { - component.convertToCard(props); - - notifyLinkedDocSwitchedToCard(std); - } else { - this.model.doc.updateBlock(model, props); - component.requestUpdate(); - } - } - ); - - track(this.std, model, this._viewType, 'OpenedAliasPopup', { - control: 'edit', - }); - }; - - private readonly _resetAbortController = () => { - this._abortController.abort(); - this._abortController = new AbortController(); - }; - - private readonly _showCaption = () => { - const focusBlock = this.focusBlock; - if (!focusBlock) { - return; - } - try { - focusBlock.captionEditor?.show(); - } catch { - toggleEmbedCardCaptionEditModal(focusBlock); - } - this._resetAbortController(); - - const model = this.focusModel; - if (!model) return; - - track(this.std, model, this._viewType, 'OpenedCaptionEditor', { - control: 'add caption', - }); - }; - - private readonly _toggleCardStyleSelector = (e: Event) => { - const opened = (e as CustomEvent).detail; - if (!opened) return; - - const model = this.focusModel; - if (!model) return; - - track(this.std, model, this._viewType, 'OpenedCardStyleSelector', { - control: 'switch card style', - }); - }; - - private readonly _toggleViewSelector = (e: Event) => { - const opened = (e as CustomEvent).detail; - if (!opened) return; - - const model = this.focusModel; - if (!model) return; - - track(this.std, model, this._viewType, 'OpenedViewSelector', { - control: 'switch view', - }); - }; - - private readonly _trackViewSelected = (type: string) => { - const model = this.focusModel; - if (!model) return; - - track(this.std, model, this._viewType, 'SelectedView', { - control: 'selected view', - type: `${type} view`, - }); - }; - - /* - * Caches the more menu items. - * Currently only supports configuring more menu. - */ - moreGroups: MenuItemGroup[] = - cloneGroups(BUILT_IN_GROUPS); - - private get _canConvertToEmbedView() { - if (!this.focusBlock) return false; - - return ( - 'convertToEmbed' in this.focusBlock || - this._embedOptions?.viewType === 'embed' - ); - } - - private get _canShowUrlOptions() { - return this.focusModel && 'url' in this.focusModel && this._isCardView; - } - - private get _embedViewButtonDisabled() { - if (this.doc.readonly) { - return true; - } - return ( - this.focusModel && - this.focusBlock && - isEmbedLinkedDocBlock(this.focusModel) && - (referenceToNode(this.focusModel) || - !!this.focusBlock.closest('affine-embed-synced-doc-block') || - this.focusModel.pageId === this.doc.id) - ); - } - - private get _isCardView() { - return ( - this.focusModel && - (isBookmarkBlock(this.focusModel) || - isEmbedLinkedDocBlock(this.focusModel) || - this._embedOptions?.viewType === 'card') - ); - } - - private get _isEmbedView() { - return ( - this.focusModel && - !isBookmarkBlock(this.focusModel) && - (isEmbedSyncedDocBlock(this.focusModel) || - this._embedOptions?.viewType === 'embed') - ); - } - - get _openButtonDisabled() { - return ( - this.focusModel && - isEmbedLinkedDocBlock(this.focusModel) && - this.focusModel.pageId === this.doc.id - ); - } - - get _originalDocInfo(): AliasInfo | undefined { - const model = this.focusModel; - if (!model) return undefined; - - const doc = isInternalEmbedModel(model) - ? this.std.workspace.getDoc(model.pageId) - : null; - - if (doc) { - const title = doc.meta?.title; - const description = isEmbedLinkedDocBlock(model) - ? getDocContentWithMaxLength(doc) - : undefined; - return { title, description }; - } - - return undefined; - } - - get _originalDocTitle() { - const model = this.focusModel; - if (!model) return undefined; - - const doc = isInternalEmbedModel(model) - ? this.std.workspace.getDoc(model.pageId) - : null; - - return doc?.meta?.title || 'Untitled'; - } - - private get _selection() { - return this.host.selection; - } - - private get _viewType(): 'inline' | 'embed' | 'card' { - if (this._isCardView) { - return 'card'; - } - - if (this._isEmbedView) { - return 'embed'; - } - - return 'inline'; - } - - get focusModel(): BuiltInEmbedModel | undefined { - return this.focusBlock?.model; - } - - private _canShowCardStylePanel( - model: BlockModel - ): model is BookmarkBlockModel | EmbedGithubModel | EmbedLinkedDocModel { - return ( - isBookmarkBlock(model) || - isEmbedGithubBlock(model) || - isEmbedLinkedDocBlock(model) - ); - } - - private _cardStyleSelector() { - const model = this.focusModel; - - if (!model) return nothing; - if (!this._canShowCardStylePanel(model)) return nothing; - - const theme = this.std.get(ThemeProvider).theme; - const { EmbedCardHorizontalIcon, EmbedCardListIcon } = - getEmbedCardIcons(theme); - - const buttons = [ - { - type: 'horizontal', - label: 'Large horizontal style', - icon: EmbedCardHorizontalIcon, - }, - { - type: 'list', - label: 'Small horizontal style', - icon: EmbedCardListIcon, - }, - ] as { - type: EmbedCardStyle; - label: string; - icon: TemplateResult<1>; - }[]; - - return html` - - ${PaletteIcon} - - `} - @toggle=${this._toggleCardStyleSelector} - > -
- ${repeat( - buttons, - button => button.type, - ({ type, label, icon }) => html` - this._setEmbedCardStyle(type)} - > - ${icon} - ${label} - - ` - )} -
- - `; - } - - private _convertToCardView() { - if (this._isCardView) { - return; - } - if (!this.focusBlock) { - return; - } - - if ('convertToCard' in this.focusBlock) { - this.focusBlock.convertToCard(); - return; - } - - if (!this.focusModel || !('url' in this.focusModel)) { - return; - } - - const targetModel = this.focusModel; - const { doc, url, style, caption } = targetModel; - - let targetFlavour = 'affine:bookmark', - targetStyle = style; - - if (this._embedOptions && this._embedOptions.viewType === 'card') { - const { flavour, styles } = this._embedOptions; - targetFlavour = flavour; - targetStyle = styles.includes(style) ? style : styles[0]; - } else { - targetStyle = BookmarkStyles.includes(style) - ? style - : BookmarkStyles.filter( - style => style !== 'vertical' && style !== 'cube' - )[0]; - } - - const parent = doc.getParent(targetModel); - if (!parent) return; - const index = parent.children.indexOf(targetModel); - - doc.addBlock( - targetFlavour as never, - { url, style: targetStyle, caption }, - parent, - index - ); - this.std.selection.setGroup('note', []); - doc.deleteBlock(targetModel); - } - - private _convertToEmbedView() { - if (this._isEmbedView) { - return; - } - - if (!this.focusBlock) { - return; - } - - if ('convertToEmbed' in this.focusBlock) { - const referenceInfo = this.focusBlock.referenceInfo$.peek(); - - this.focusBlock.convertToEmbed(); - - if (referenceInfo.title || referenceInfo.description) { - notifyLinkedDocSwitchedToEmbed(this.std); - } - - return; - } - - if (!this.focusModel || !('url' in this.focusModel)) { - return; - } - - const targetModel = this.focusModel; - const { doc, url, style, caption } = targetModel; - - if (!this._embedOptions || this._embedOptions.viewType !== 'embed') { - return; - } - const { flavour, styles } = this._embedOptions; - - const targetStyle = styles.includes(style) - ? style - : styles.filter(style => style !== 'vertical' && style !== 'cube')[0]; - - const parent = doc.getParent(targetModel); - if (!parent) return; - const index = parent.children.indexOf(targetModel); - - doc.addBlock( - flavour as never, - { url, style: targetStyle, caption }, - parent, - index - ); - - this.std.selection.setGroup('note', []); - doc.deleteBlock(targetModel); - } - - private _hide() { - this._resetAbortController(); - this.focusBlock = null; - this.hide = true; - } - - private _moreActions() { - if (!this.focusBlock) return nothing; - const context = new EmbedCardToolbarContext( - this.focusBlock, - this._abortController - ); - return renderGroups(this.moreGroups, context); - } - - private _openMenuButton() { - const openDocConfig = this.std.get(OpenDocExtensionIdentifier); - const element = this.focusBlock; - const buttons: MenuItem[] = openDocConfig.items - .map(item => { - if ( - item.type === 'open-in-center-peek' && - element && - !isPeekable(element) - ) { - return null; - } - - 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; - } - - return html` - - ${OpenIcon}${ArrowDownSmallIcon({ width: '16px', height: '16px' })} - - `} - > -
- ${repeat( - buttons, - button => button.label, - ({ label, icon, action, disabled }) => html` - - ${icon}${label} - - ` - )} -
- - `; - } - - private _setEmbedCardStyle(style: EmbedCardStyle) { - const model = this.focusModel; - if (!model) return; - - model.doc.updateBlock(model, { style }); - this.requestUpdate(); - this._abortController.abort(); - - track(this.std, model, this._viewType, 'SelectedCardStyle', { - control: 'select card style', - type: style, - }); - } - - private _show() { - if (!this.focusBlock) { - return; - } - this.hide = false; - this._abortController.signal.addEventListener( - 'abort', - autoUpdate(this.focusBlock, this, () => { - if (!this.focusBlock) { - return; - } - computePosition(this.focusBlock, this, { - placement: 'top-start', - middleware: [flip(), offset(8)], - }) - .then(({ x, y }) => { - this.style.left = `${x}px`; - this.style.top = `${y}px`; - }) - .catch(console.error); - }) - ); - } - - private _turnIntoInlineView() { - if (this.focusBlock && 'covertToInline' in this.focusBlock) { - this.focusBlock.covertToInline(); - return; - } - - if (!this.focusModel || !('url' in this.focusModel)) { - return; - } - - const targetModel = this.focusModel; - const { doc, title, caption, url } = targetModel; - const parent = doc.getParent(targetModel); - const index = parent?.children.indexOf(targetModel); - - const yText = new Y.Text(); - const insert = title || caption || url; - yText.insert(0, insert); - yText.format(0, insert.length, { link: url }); - const text = new Text(yText); - doc.addBlock( - 'affine:paragraph', - { - text, - }, - parent, - index - ); - - doc.deleteBlock(targetModel); - } - - private _viewSelector() { - const buttons = []; - - buttons.push({ - type: 'inline', - label: 'Inline view', - action: () => this._turnIntoInlineView(), - disabled: this.doc.readonly, - }); - - buttons.push({ - type: 'card', - label: 'Card view', - action: () => this._convertToCardView(), - disabled: this.doc.readonly, - }); - - if (this._canConvertToEmbedView || this._isEmbedView) { - buttons.push({ - type: 'embed', - label: 'Embed view', - action: () => this._convertToEmbedView(), - disabled: this.doc.readonly || this._embedViewButtonDisabled, - }); - } - - return html` - -
- ${this._viewType} - view -
- ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} - - `} - @toggle=${this._toggleViewSelector} - > -
- ${repeat( - buttons, - button => button.type, - ({ type, label, action, disabled }) => html` - { - action(); - this._trackViewSelected(type); - this._hide(); - }} - > - ${label} - - ` - )} -
- - `; - } - - override connectedCallback() { - super.connectedCallback(); - - this.moreGroups = getMoreMenuConfig(this.std).configure(this.moreGroups); - - this.disposables.add( - this._selection.slots.changed.on(() => { - const hasTextSelection = this._selection.find(TextSelection); - if (hasTextSelection) { - this._hide(); - return; - } - - const blockSelections = this._selection.filter(BlockSelection); - if (!blockSelections || blockSelections.length !== 1) { - this._hide(); - return; - } - - const block = this.std.view.getBlock(blockSelections[0].blockId); - if (!block || !isEmbedCardBlockComponent(block)) { - this._hide(); - return; - } - - this.focusBlock = block as BuiltInEmbedBlockComponent; - this._show(); - }) - ); - } - - override render() { - if (this.hide) return nothing; - - const model = this.focusModel; - if (!model) return nothing; - - this._embedOptions = - 'url' in model - ? this.std.get(EmbedOptionProvider).getEmbedBlockOptions(model.url) - : null; - - const hasUrl = this._canShowUrlOptions && 'url' in model; - - const buttons = [ - this._openMenuButton(), - - hasUrl - ? html` - - ${getHostName(model.url)} - - ` - : nothing, - - // internal embed model - isEmbedLinkedDocBlock(model) && model.title - ? html` - - ${this._originalDocTitle} - - ` - : nothing, - - isEmbedHtmlBlock(model) - ? nothing - : html` - - ${CopyIcon} - - - - ${EditIcon} - - `, - - this._viewSelector(), - - this._cardStyleSelector(), - - html` - - ${CaptionIcon} - - `, - - html` - - ${MoreVerticalIcon()} - - `} - > -
- ${this._moreActions()} -
- - `, - ]; - - return html` - - ${join( - buttons.filter(button => button !== nothing), - renderToolbarSeparator - )} - - `; - } - - @query('.embed-card-toolbar-button.card-style') - accessor cardStyleButton: HTMLElement | null = null; - - @query('.embed-card-toolbar') - accessor embedCardToolbarElement!: HTMLElement; - - @state() - accessor focusBlock: BuiltInEmbedBlockComponent | null = null; - - @state() - accessor hide: boolean = true; - - @query('.embed-card-toolbar-button.more-button') - accessor moreButton: HTMLElement | null = null; -} - -declare global { - interface HTMLElementTagNameMap { - [AFFINE_EMBED_CARD_TOOLBAR_WIDGET]: EmbedCardToolbar; - } -} - -function track( - std: BlockStdScope, - model: BuiltInEmbedModel, - viewType: string, - event: LinkEventType, - props: Partial -) { - std.getOptional(TelemetryProvider)?.track(event, { - segment: 'toolbar', - page: 'doc editor', - module: 'embed card toolbar', - type: `${viewType} view`, - category: isInternalEmbedModel(model) ? 'linked doc' : 'link', - ...props, - }); -} diff --git a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/styles.ts b/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/styles.ts deleted file mode 100644 index c042746bcf..0000000000 --- a/blocksuite/affine/block-root/src/widgets/embed-card-toolbar/styles.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { css } from 'lit'; - -export const embedCardToolbarStyle = css` - :host { - position: absolute; - top: 0; - left: 0; - z-index: var(--affine-z-index-popover); - } - - .affine-link-preview { - display: flex; - justify-content: flex-start; - min-width: 60px; - max-width: 140px; - padding: var(--1, 0px); - border-radius: var(--1, 0px); - opacity: var(--add, 1); - user-select: none; - cursor: pointer; - - color: var(--affine-link-color); - font-feature-settings: - 'clig' off, - 'liga' off; - font-family: var(--affine-font-family); - font-size: var(--affine-font-sm); - font-style: normal; - font-weight: 400; - text-decoration: none; - text-wrap: nowrap; - } - - .affine-link-preview > span { - display: inline-block; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - - text-overflow: ellipsis; - overflow: hidden; - opacity: var(--add, 1); - } - - .card-style-select icon-button.selected { - border: 1px solid var(--affine-brand-color); - } - - editor-icon-button.doc-title .label { - max-width: 110px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - user-select: none; - cursor: pointer; - color: var(--affine-link-color); - font-feature-settings: - 'clig' off, - 'liga' off; - font-family: var(--affine-font-family); - font-size: var(--affine-font-sm); - font-style: normal; - font-weight: 400; - text-decoration: none; - text-wrap: nowrap; - } -`; diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/components/config-renderer.ts b/blocksuite/affine/block-root/src/widgets/format-bar/components/config-renderer.ts deleted file mode 100644 index cf8fd35753..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/components/config-renderer.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { isFormatSupported } from '@blocksuite/affine-components/rich-text'; -import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; -import { html, type TemplateResult } from 'lit'; - -import type { AffineFormatBarWidget } from '../format-bar.js'; -import { HighlightButton } from './highlight/highlight-button.js'; -import { ParagraphButton } from './paragraph-button.js'; - -export function ConfigRenderer(formatBar: AffineFormatBarWidget) { - return ( - formatBar.configItems - .filter(item => { - if (item.type === 'paragraph-action') { - return false; - } - if (item.type === 'highlighter-dropdown') { - const [supported] = isFormatSupported( - formatBar.std.command.chain() - ).run(); - return supported; - } - if (item.type === 'inline-action') { - return item.showWhen(formatBar.std.command.chain(), formatBar); - } - return true; - }) - .map(item => { - let template: TemplateResult | null = null; - switch (item.type) { - case 'divider': - template = renderToolbarSeparator(); - break; - case 'highlighter-dropdown': { - template = HighlightButton(formatBar); - break; - } - case 'paragraph-dropdown': - template = ParagraphButton(formatBar); - break; - case 'inline-action': { - template = html` - { - item.action(formatBar.std.command.chain(), formatBar); - formatBar.requestUpdate(); - }} - > - ${typeof item.icon === 'function' ? item.icon() : item.icon} - - `; - break; - } - case 'custom': { - template = item.render(formatBar); - break; - } - default: - template = null; - } - - return [template, item] as const; - }) - .filter(([template]) => template !== null && template !== undefined) - // 1. delete the redundant dividers in the middle - .filter(([_, item], index, list) => { - if ( - item.type === 'divider' && - index + 1 < list.length && - list[index + 1][1].type === 'divider' - ) { - return false; - } - return true; - }) - // 2. delete the redundant dividers at the head and tail - .filter(([_, item], index, list) => { - if (item.type === 'divider') { - if (index === 0) { - return false; - } - if (index === list.length - 1) { - return false; - } - } - return true; - }) - .map(([template]) => template) - ); -} diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/components/highlight/consts.ts b/blocksuite/affine/block-root/src/widgets/format-bar/components/highlight/consts.ts deleted file mode 100644 index 1d52057c93..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/components/highlight/consts.ts +++ /dev/null @@ -1,42 +0,0 @@ -interface HighlightConfig { - name: string; - color: string | null; - hotkey: string | null; -} - -const colors = [ - 'red', - 'orange', - 'yellow', - 'green', - 'teal', - 'blue', - 'purple', - 'grey', -]; - -export const backgroundConfig: HighlightConfig[] = [ - { - name: 'Default Background', - color: null, - hotkey: null, - }, - ...colors.map(color => ({ - name: `${color[0].toUpperCase()}${color.slice(1)} Background`, - color: `var(--affine-text-highlight-${color})`, - hotkey: null, - })), -]; - -export const foregroundConfig: HighlightConfig[] = [ - { - name: 'Default Color', - color: null, - hotkey: null, - }, - ...colors.map(color => ({ - name: `${color[0].toUpperCase()}${color.slice(1)}`, - color: `var(--affine-text-highlight-foreground-${color})`, - hotkey: null, - })), -]; diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/components/highlight/highlight-button.ts b/blocksuite/affine/block-root/src/widgets/format-bar/components/highlight/highlight-button.ts deleted file mode 100644 index e0f73d14ba..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/components/highlight/highlight-button.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { whenHover } from '@blocksuite/affine-components/hover'; -import { - ArrowDownIcon, - HighLightDuotoneIcon, - TextBackgroundDuotoneIcon, - TextForegroundDuotoneIcon, -} from '@blocksuite/affine-components/icons'; -import { - formatBlockCommand, - formatNativeCommand, - formatTextCommand, -} from '@blocksuite/affine-components/rich-text'; -import { - getBlockSelectionsCommand, - getTextSelectionCommand, -} from '@blocksuite/affine-shared/commands'; -import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; -import type { EditorHost } from '@blocksuite/block-std'; -import { computePosition, flip, offset, shift } from '@floating-ui/dom'; -import { html } from 'lit'; -import { ref, type RefOrCallback } from 'lit/directives/ref.js'; - -import type { AffineFormatBarWidget } from '../../format-bar.js'; -import { backgroundConfig, foregroundConfig } from './consts.js'; - -enum HighlightType { - Color = 'color', - Background = 'background', -} - -let lastUsedColor: string | null = null; -let lastUsedHighlightType: HighlightType = HighlightType.Background; - -const updateHighlight = ( - host: EditorHost, - color: string | null, - highlightType: HighlightType -) => { - lastUsedColor = color; - lastUsedHighlightType = highlightType; - - const payload: { - styles: AffineTextAttributes; - } = { - styles: { - [`${highlightType}`]: color, - }, - }; - host.std.command - .chain() - .try(chain => [ - chain.pipe(getTextSelectionCommand).pipe(formatTextCommand, payload), - chain.pipe(getBlockSelectionsCommand).pipe(formatBlockCommand, payload), - chain.pipe(formatNativeCommand, payload), - ]) - .run(); -}; - -const HighlightPanel = ( - formatBar: AffineFormatBarWidget, - containerRef?: RefOrCallback -) => { - return html` - -
- -
Color
- ${foregroundConfig.map( - ({ name, color }) => html` - - - ${TextForegroundDuotoneIcon} - - ${name} - - ` - )} - - -
Background
- ${backgroundConfig.map( - ({ name, color }) => html` - - - ${TextBackgroundDuotoneIcon} - - ${name} - - ` - )} -
- - `; -}; - -export const HighlightButton = (formatBar: AffineFormatBarWidget) => { - const editorHost = formatBar.host; - - const { setFloating, setReference } = whenHover(isHover => { - if (!isHover) { - const panel = - formatBar.shadowRoot?.querySelector('.highlight-panel'); - if (!panel) return; - panel.style.display = 'none'; - return; - } - const button = - formatBar.shadowRoot?.querySelector('.highlight-button'); - const panel = - formatBar.shadowRoot?.querySelector('.highlight-panel'); - if (!button || !panel) { - return; - } - panel.style.display = 'flex'; - computePosition(button, panel, { - placement: 'bottom', - middleware: [ - flip(), - offset(6), - shift({ - padding: 6, - }), - ], - }) - .then(({ x, y }) => { - panel.style.left = `${x}px`; - panel.style.top = `${y}px`; - }) - .catch(console.error); - }); - - const highlightPanel = HighlightPanel(formatBar, setFloating); - - return html` -
- - - ${HighLightDuotoneIcon} - - ${ArrowDownIcon} - - ${highlightPanel} -
- `; -}; diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/components/paragraph-button.ts b/blocksuite/affine/block-root/src/widgets/format-bar/components/paragraph-button.ts deleted file mode 100644 index 609e8e333c..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/components/paragraph-button.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { whenHover } from '@blocksuite/affine-components/hover'; -import { ArrowDownIcon } from '@blocksuite/affine-components/icons'; -import { textConversionConfigs } from '@blocksuite/affine-components/rich-text'; -import type { ParagraphBlockModel } from '@blocksuite/affine-model'; -import type { EditorHost } from '@blocksuite/block-std'; -import { computePosition, flip, offset, shift } from '@floating-ui/dom'; -import { html } from 'lit'; -import { ref, type RefOrCallback } from 'lit/directives/ref.js'; -import { repeat } from 'lit/directives/repeat.js'; - -import type { ParagraphActionConfigItem } from '../config.js'; -import type { AffineFormatBarWidget } from '../format-bar.js'; - -interface ParagraphPanelProps { - host: EditorHost; - formatBar: AffineFormatBarWidget; - ref?: RefOrCallback; -} - -const ParagraphPanel = ({ - formatBar, - host, - ref: containerRef, -}: ParagraphPanelProps) => { - const config = formatBar.configItems - .filter( - (item): item is ParagraphActionConfigItem => - item.type === 'paragraph-action' - ) - .filter(({ flavour }) => host.doc.schema.flavourSchemaMap.has(flavour)); - - const renderedConfig = repeat( - config, - item => html` - - ${typeof item.icon === 'function' ? item.icon() : item.icon} - ${item.name} - - ` - ); - - return html` - -
${renderedConfig}
- - `; -}; - -export const ParagraphButton = (formatBar: AffineFormatBarWidget) => { - if (formatBar.displayType !== 'text' && formatBar.displayType !== 'block') { - return null; - } - - const selectedBlocks = formatBar.selectedBlocks; - // only support model with text - if (selectedBlocks.some(el => !el.model.text)) { - return null; - } - - const paragraphIcon = - selectedBlocks.length < 1 - ? textConversionConfigs[0].icon - : (textConversionConfigs.find( - ({ flavour, type }) => - selectedBlocks[0].flavour === flavour && - (selectedBlocks[0].model as ParagraphBlockModel).type === type - )?.icon ?? textConversionConfigs[0].icon); - - const rootComponent = formatBar.block; - if (rootComponent.model.flavour !== 'affine:page') { - console.error('paragraph button host is not a page component'); - return null; - } - - const { setFloating, setReference } = whenHover(isHover => { - if (!isHover) { - const panel = - formatBar.shadowRoot?.querySelector('.paragraph-panel'); - if (!panel) return; - panel.style.display = 'none'; - return; - } - const formatQuickBarElement = formatBar.formatBarElement; - const panel = - formatBar.shadowRoot?.querySelector('.paragraph-panel'); - if (!panel || !formatQuickBarElement) { - return; - } - panel.style.display = 'flex'; - computePosition(formatQuickBarElement, panel, { - placement: 'top-start', - middleware: [ - flip(), - offset(6), - shift({ - padding: 6, - }), - ], - }) - .then(({ x, y }) => { - panel.style.left = `${x}px`; - panel.style.top = `${y}px`; - }) - .catch(console.error); - }); - - const paragraphPanel = ParagraphPanel({ - formatBar, - host: formatBar.host, - ref: setFloating, - }); - - return html` -
- - ${paragraphIcon} ${ArrowDownIcon} - - ${paragraphPanel} -
- `; -}; diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/config.ts b/blocksuite/affine/block-root/src/widgets/format-bar/config.ts deleted file mode 100644 index 6c2606eb0e..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/config.ts +++ /dev/null @@ -1,492 +0,0 @@ -import { - convertToDatabase, - DATABASE_CONVERT_WHITE_LIST, -} from '@blocksuite/affine-block-database'; -import { - convertSelectedBlocksToLinkedDoc, - getTitleFromSelectedModels, - notifyDocCreated, - promptDocTitle, -} from '@blocksuite/affine-block-embed'; -import { - BoldIcon, - BulletedListIcon, - CheckBoxIcon, - CodeIcon, - CopyIcon, - DatabaseTableViewIcon20, - DeleteIcon, - DuplicateIcon, - Heading1Icon, - Heading2Icon, - Heading3Icon, - Heading4Icon, - Heading5Icon, - Heading6Icon, - ItalicIcon, - LinkedDocIcon, - LinkIcon, - NumberedListIcon, - QuoteIcon, - StrikethroughIcon, - TextIcon, - UnderlineIcon, -} from '@blocksuite/affine-components/icons'; -import { - deleteTextCommand, - toggleBold, - toggleCode, - toggleItalic, - toggleLink, - toggleStrike, - toggleUnderline, -} from '@blocksuite/affine-components/rich-text'; -import { toast } from '@blocksuite/affine-components/toast'; -import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar'; -import { renderGroups } from '@blocksuite/affine-components/toolbar'; -import { - copySelectedModelsCommand, - deleteSelectedModelsCommand, - draftSelectedModelsCommand, - getBlockIndexCommand, - getBlockSelectionsCommand, - getImageSelectionsCommand, - getSelectedBlocksCommand, - getSelectedModelsCommand, - getTextSelectionCommand, -} from '@blocksuite/affine-shared/commands'; -import { TelemetryProvider } from '@blocksuite/affine-shared/services'; -import type { - BlockComponent, - Chain, - InitCommandCtx, -} from '@blocksuite/block-std'; -import { tableViewMeta } from '@blocksuite/data-view/view-presets'; -import { MoreVerticalIcon } from '@blocksuite/icons/lit'; -import { Slice, toDraftModel } from '@blocksuite/store'; -import { html, type TemplateResult } from 'lit'; - -import { FormatBarContext } from './context.js'; -import type { AffineFormatBarWidget } from './format-bar.js'; - -export type DividerConfigItem = { - type: 'divider'; -}; -export type HighlighterDropdownConfigItem = { - type: 'highlighter-dropdown'; -}; -export type ParagraphDropdownConfigItem = { - type: 'paragraph-dropdown'; -}; -export type InlineActionConfigItem = { - id: string; - name: string; - type: 'inline-action'; - action: ( - chain: Chain, - formatBar: AffineFormatBarWidget - ) => void; - icon: TemplateResult | (() => HTMLElement); - isActive: ( - chain: Chain, - formatBar: AffineFormatBarWidget - ) => boolean; - showWhen: ( - chain: Chain, - formatBar: AffineFormatBarWidget - ) => boolean; -}; -export type ParagraphActionConfigItem = { - id: string; - type: 'paragraph-action'; - name: string; - action: ( - chain: Chain, - formatBar: AffineFormatBarWidget - ) => void; - icon: TemplateResult | (() => HTMLElement); - flavour: string; -}; - -export type CustomConfigItem = { - type: 'custom'; - render: (formatBar: AffineFormatBarWidget) => TemplateResult | null; -}; - -export type FormatBarConfigItem = - | DividerConfigItem - | HighlighterDropdownConfigItem - | ParagraphDropdownConfigItem - | ParagraphActionConfigItem - | InlineActionConfigItem - | CustomConfigItem; - -export function toolbarDefaultConfig(toolbar: AffineFormatBarWidget) { - toolbar - .clearConfig() - .addParagraphDropdown() - .addDivider() - .addTextStyleToggle({ - key: 'bold', - action: chain => chain.pipe(toggleBold).run(), - icon: BoldIcon, - }) - .addTextStyleToggle({ - key: 'italic', - action: chain => chain.pipe(toggleItalic).run(), - icon: ItalicIcon, - }) - .addTextStyleToggle({ - key: 'underline', - action: chain => chain.pipe(toggleUnderline).run(), - icon: UnderlineIcon, - }) - .addTextStyleToggle({ - key: 'strike', - action: chain => chain.pipe(toggleStrike).run(), - icon: StrikethroughIcon, - }) - .addTextStyleToggle({ - key: 'code', - action: chain => chain.pipe(toggleCode).run(), - icon: CodeIcon, - }) - .addTextStyleToggle({ - key: 'link', - action: chain => chain.pipe(toggleLink).run(), - icon: LinkIcon, - }) - .addDivider() - .addHighlighterDropdown() - .addDivider() - .addInlineAction({ - id: 'convert-to-database', - name: 'Create Table', - icon: DatabaseTableViewIcon20, - isActive: () => false, - action: () => { - convertToDatabase(toolbar.host, tableViewMeta.type); - }, - showWhen: chain => { - const middleware = (count = 0) => { - return ( - ctx: { selectedBlocks: BlockComponent[] }, - next: () => void - ) => { - const { selectedBlocks } = ctx; - if (!selectedBlocks || selectedBlocks.length === count) return; - - const allowed = selectedBlocks.every(block => - DATABASE_CONVERT_WHITE_LIST.includes(block.flavour) - ); - if (!allowed) return; - - next(); - }; - }; - let [result] = chain - .pipe(getTextSelectionCommand) - .pipe(getSelectedBlocksCommand, { - types: ['text'], - }) - .pipe(middleware(1)) - .run(); - - if (result) return true; - - [result] = chain - .tryAll(chain => [ - chain.pipe(getBlockSelectionsCommand), - chain.pipe(getImageSelectionsCommand), - ]) - .pipe(getSelectedBlocksCommand, { - types: ['block', 'image'], - }) - .pipe(middleware(0)) - .run(); - - return result; - }, - }) - .addDivider() - .addInlineAction({ - id: 'convert-to-linked-doc', - name: 'Create Linked Doc', - icon: LinkedDocIcon, - isActive: () => false, - action: (chain, formatBar) => { - const [_, ctx] = chain - .pipe(getSelectedModelsCommand, { - types: ['block', 'text'], - mode: 'flat', - }) - .pipe(draftSelectedModelsCommand) - .run(); - const { draftedModels, selectedModels, std } = ctx; - if (!selectedModels?.length || !draftedModels) return; - - const host = formatBar.host; - host.selection.clear(); - - const doc = host.doc; - const autofill = getTitleFromSelectedModels( - selectedModels.map(toDraftModel) - ); - promptDocTitle(std, autofill) - .then(async title => { - if (title === null) return; - await convertSelectedBlocksToLinkedDoc( - std, - doc, - draftedModels, - title - ); - notifyDocCreated(std, doc); - host.std.getOptional(TelemetryProvider)?.track('DocCreated', { - control: 'create linked doc', - page: 'doc editor', - module: 'format toolbar', - type: 'embed-linked-doc', - }); - host.std.getOptional(TelemetryProvider)?.track('LinkedDocCreated', { - control: 'create linked doc', - page: 'doc editor', - module: 'format toolbar', - type: 'embed-linked-doc', - }); - }) - .catch(console.error); - }, - showWhen: chain => { - const [_, ctx] = chain - .pipe(getSelectedModelsCommand, { - types: ['block', 'text'], - mode: 'highest', - }) - .run(); - const { selectedModels } = ctx; - return !!selectedModels && selectedModels.length > 0; - }, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'text', - name: 'Text', - icon: TextIcon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'h1', - name: 'Heading 1', - icon: Heading1Icon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'h2', - name: 'Heading 2', - icon: Heading2Icon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'h3', - name: 'Heading 3', - icon: Heading3Icon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'h4', - name: 'Heading 4', - icon: Heading4Icon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'h5', - name: 'Heading 5', - icon: Heading5Icon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'h6', - name: 'Heading 6', - icon: Heading6Icon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:list', - type: 'bulleted', - name: 'Bulleted List', - icon: BulletedListIcon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:list', - type: 'numbered', - name: 'Numbered List', - icon: NumberedListIcon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:list', - type: 'todo', - name: 'To-do List', - icon: CheckBoxIcon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:code', - name: 'Code Block', - icon: CodeIcon, - }) - .addBlockTypeSwitch({ - flavour: 'affine:paragraph', - type: 'quote', - name: 'Quote', - icon: QuoteIcon, - }); -} - -export const BUILT_IN_GROUPS: MenuItemGroup[] = [ - { - type: 'clipboard', - items: [ - { - type: 'copy', - label: 'Copy', - icon: CopyIcon, - disabled: c => c.doc.readonly, - action: c => { - c.std.command - .chain() - .pipe(getSelectedModelsCommand) - .with({ - onCopy: () => { - toast(c.host, 'Copied to clipboard'); - }, - }) - .pipe(draftSelectedModelsCommand) - .pipe(copySelectedModelsCommand) - .run(); - }, - }, - { - type: 'duplicate', - label: 'Duplicate', - icon: DuplicateIcon, - disabled: c => c.doc.readonly, - action: c => { - c.doc.captureSync(); - c.std.command - .chain() - .try<{ currentSelectionPath: string }>(cmd => [ - cmd.pipe(getTextSelectionCommand).pipe((ctx, next) => { - const textSelection = ctx.currentTextSelection; - if (!textSelection) { - return; - } - const end = textSelection.to ?? textSelection.from; - next({ currentSelectionPath: end.blockId }); - }), - cmd.pipe(getBlockSelectionsCommand).pipe((ctx, next) => { - const currentBlockSelections = ctx.currentBlockSelections; - if (!currentBlockSelections) { - return; - } - const blockSelection = currentBlockSelections.at(-1); - if (!blockSelection) { - return; - } - next({ currentSelectionPath: blockSelection.blockId }); - }), - ]) - .pipe(getBlockIndexCommand) - .pipe(getSelectedModelsCommand) - .pipe(draftSelectedModelsCommand) - .pipe((ctx, next) => { - ctx.draftedModels - .then(models => { - const slice = Slice.fromModels(ctx.std.store, models); - return ctx.std.clipboard.duplicateSlice( - slice, - ctx.std.store, - ctx.parentBlock?.model.id, - ctx.blockIndex ? ctx.blockIndex + 1 : 1 - ); - }) - .catch(console.error); - - return next(); - }) - .run(); - }, - }, - ], - }, - { - type: 'delete', - items: [ - { - type: 'delete', - label: 'Delete', - icon: DeleteIcon, - disabled: c => c.doc.readonly, - action: c => { - // remove text - const [result] = c.std.command - .chain() - .pipe(getTextSelectionCommand) - .pipe(deleteTextCommand) - .run(); - - if (result) { - return; - } - - // remove blocks - c.std.command - .chain() - .tryAll(chain => [ - chain.pipe(getBlockSelectionsCommand), - chain.pipe(getImageSelectionsCommand), - ]) - .pipe(getSelectedModelsCommand) - .pipe(deleteSelectedModelsCommand) - .run(); - - c.toolbar.reset(); - }, - }, - ], - }, -]; - -export function toolbarMoreButton(toolbar: AffineFormatBarWidget) { - const richText = getRichText(); - if (richText?.dataset.disableAskAi !== undefined) return null; - const context = new FormatBarContext(toolbar); - const actions = renderGroups(toolbar.moreGroups, context); - - return html` - - ${MoreVerticalIcon()} - - `}" - > -
${actions}
- - `; -} -const getRichText = () => { - const selection = getSelection(); - if (!selection) return null; - if (selection.rangeCount === 0) return null; - const range = selection.getRangeAt(0); - const commonAncestorContainer = - range.commonAncestorContainer instanceof Element - ? range.commonAncestorContainer - : range.commonAncestorContainer.parentElement; - if (!commonAncestorContainer) return null; - return commonAncestorContainer.closest('rich-text'); -}; diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/context.ts b/blocksuite/affine/block-root/src/widgets/format-bar/context.ts deleted file mode 100644 index f58ceded45..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/context.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { MenuContext } from '@blocksuite/affine-components/toolbar'; -import { - getBlockSelectionsCommand, - getImageSelectionsCommand, - getSelectedModelsCommand, - getTextSelectionCommand, -} from '@blocksuite/affine-shared/commands'; - -import type { AffineFormatBarWidget } from './format-bar.js'; - -export class FormatBarContext extends MenuContext { - get doc() { - return this.toolbar.host.doc; - } - - get host() { - return this.toolbar.host; - } - - get selectedBlockModels() { - const [success, result] = this.std.command - .chain() - .tryAll(chain => [ - chain.pipe(getTextSelectionCommand), - chain.pipe(getBlockSelectionsCommand), - chain.pipe(getImageSelectionsCommand), - ]) - .pipe(getSelectedModelsCommand, { - mode: 'highest', - }) - .run(); - - if (!success) { - return []; - } - - // should return an empty array if `to` of the range is null - if ( - result.currentTextSelection && - !result.currentTextSelection.to && - result.currentTextSelection.from.length === 0 - ) { - return []; - } - - if (result.selectedModels?.length) { - return result.selectedModels; - } - - return []; - } - - get std() { - return this.toolbar.std; - } - - constructor(public toolbar: AffineFormatBarWidget) { - super(); - } - - isEmpty() { - return this.selectedBlockModels.length === 0; - } - - isMultiple() { - return this.selectedBlockModels.length > 1; - } - - isSingle() { - return this.selectedBlockModels.length === 1; - } -} diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/format-bar.ts b/blocksuite/affine/block-root/src/widgets/format-bar/format-bar.ts deleted file mode 100644 index d40aaf8be2..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/format-bar.ts +++ /dev/null @@ -1,614 +0,0 @@ -import { updateBlockType } from '@blocksuite/affine-block-note'; -import { HoverController } from '@blocksuite/affine-components/hover'; -import { - isFormatSupported, - isTextStyleActive, - type RichText, -} from '@blocksuite/affine-components/rich-text'; -import { - cloneGroups, - getMoreMenuConfig, - type MenuItemGroup, -} from '@blocksuite/affine-components/toolbar'; -import { - CodeBlockModel, - ImageBlockModel, - ListBlockModel, - ParagraphBlockModel, -} from '@blocksuite/affine-model'; -import { - getSelectedBlocksCommand, - getTextSelectionCommand, -} from '@blocksuite/affine-shared/commands'; -import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; -import { matchModels } from '@blocksuite/affine-shared/utils'; -import { - type BlockComponent, - BlockSelection, - CursorSelection, - TextSelection, - WidgetComponent, -} from '@blocksuite/block-std'; -import { DisposableGroup, nextTick } from '@blocksuite/global/utils'; -import type { BaseSelection } from '@blocksuite/store'; -import { - autoUpdate, - computePosition, - inline, - offset, - type Placement, - type ReferenceElement, - shift, -} from '@floating-ui/dom'; -import { html, nothing } from 'lit'; -import { query, state } from 'lit/decorators.js'; - -import { ConfigRenderer } from './components/config-renderer.js'; -import { - BUILT_IN_GROUPS, - type FormatBarConfigItem, - type InlineActionConfigItem, - type ParagraphActionConfigItem, - toolbarDefaultConfig, - toolbarMoreButton, -} from './config.js'; -import type { FormatBarContext } from './context.js'; -import { formatBarStyle } from './styles.js'; - -export const AFFINE_FORMAT_BAR_WIDGET = 'affine-format-bar-widget'; - -export class AffineFormatBarWidget extends WidgetComponent { - static override styles = formatBarStyle; - - private _abortController = new AbortController(); - - private _floatDisposables: DisposableGroup | null = null; - - private _lastCursor: CursorSelection | undefined = undefined; - - private _placement: Placement = 'top'; - - /* - * Caches the more menu items. - * Currently only supports configuring more menu. - */ - moreGroups: MenuItemGroup[] = cloneGroups(BUILT_IN_GROUPS); - - private get _selectionManager() { - return this.host.selection; - } - - get displayType() { - return this._displayType; - } - - get nativeRange() { - const sl = document.getSelection(); - if (!sl || sl.rangeCount === 0) return null; - return sl.getRangeAt(0); - } - - get selectedBlocks() { - return this._selectedBlocks; - } - - private _calculatePlacement() { - const rootComponent = this.block; - - this.handleEvent('dragStart', () => { - this._dragging = true; - }); - - this.handleEvent('dragEnd', () => { - this._dragging = false; - }); - - // calculate placement - this.disposables.add( - this.host.event.add('pointerUp', ctx => { - let targetRect: DOMRect | null = null; - if (this.displayType === 'text' || this.displayType === 'native') { - const range = this.nativeRange; - if (!range) { - this.reset(); - return; - } - targetRect = range.getBoundingClientRect(); - } else if (this.displayType === 'block') { - const block = this._selectedBlocks[0]; - if (!block) return; - targetRect = block.getBoundingClientRect(); - } else { - return; - } - - const { top: editorHostTop, bottom: editorHostBottom } = - this.host.getBoundingClientRect(); - const e = ctx.get('pointerState'); - if (editorHostBottom - targetRect.bottom < 50) { - this._placement = 'top'; - } else if (targetRect.top - Math.max(editorHostTop, 0) < 50) { - this._placement = 'bottom'; - } else if (e.raw.y < targetRect.top + targetRect.height / 2) { - this._placement = 'top'; - } else { - this._placement = 'bottom'; - } - }) - ); - - // listen to selection change - this.disposables.add( - this._selectionManager.slots.changed.on(() => { - const update = async () => { - const textSelection = rootComponent.selection.find(TextSelection); - const blockSelections = - rootComponent.selection.filter(BlockSelection); - - // Should not re-render format bar when only cursor selection changed in edgeless - const cursorSelection = rootComponent.selection.find(CursorSelection); - if (cursorSelection) { - if (!this._lastCursor) { - this._lastCursor = cursorSelection; - return; - } - - if (!this._selectionEqual(cursorSelection, this._lastCursor)) { - this._lastCursor = cursorSelection; - return; - } - } - - // We cannot use `host.getUpdateComplete()` here - // because it would cause excessive DOM queries, leading to UI jamming. - await nextTick(); - - if (textSelection) { - const block = this.host.view.getBlock(textSelection.blockId); - - if ( - !textSelection.isCollapsed() && - block && - block.model.role === 'content' - ) { - this._displayType = 'text'; - if (!rootComponent.std.range) return; - this.host.std.command - .chain() - .pipe(getTextSelectionCommand) - .pipe(getSelectedBlocksCommand, { - types: ['text'], - }) - .pipe(ctx => { - const { selectedBlocks } = ctx; - if (!selectedBlocks) return; - this._selectedBlocks = selectedBlocks; - }) - .run(); - - return; - } - - this.reset(); - return; - } - - if (this.block && blockSelections.length > 0) { - this._displayType = 'block'; - const selectedBlocks = blockSelections - .map(selection => { - const path = selection.blockId; - return this.block.host.view.getBlock(path); - }) - .filter((el): el is BlockComponent => !!el); - - this._selectedBlocks = selectedBlocks; - return; - } - - this.reset(); - }; - - update().catch(console.error); - }) - ); - this.disposables.addFromEvent(document, 'selectionchange', () => { - if (!this.host.event.active) return; - const reset = () => { - this.reset(); - this.requestUpdate(); - }; - const range = this.nativeRange; - if (!range) return; - const container = - range.commonAncestorContainer instanceof Element - ? range.commonAncestorContainer - : range.commonAncestorContainer.parentElement; - if (!container) return; - const notBlockText = container.closest('rich-text')?.dataset.notBlockText; - if (notBlockText == null) return; - if (range.collapsed) return reset(); - this._displayType = 'native'; - this.requestUpdate(); - }); - } - - private _listenFloatingElement() { - const formatQuickBarElement = this.formatBarElement; - if (!formatQuickBarElement) { - return; - } - - const listenFloatingElement = ( - getElement: () => ReferenceElement | void - ) => { - const initialElement = getElement(); - if (!initialElement) { - return; - } - - if (!this._floatDisposables) { - return; - } - - HoverController.globalAbortController?.abort(); - this._floatDisposables.add( - autoUpdate( - initialElement, - formatQuickBarElement, - () => { - const element = getElement(); - if (!element) return; - - computePosition(element, formatQuickBarElement, { - placement: this._placement, - middleware: [ - offset(10), - inline(), - shift({ - padding: 6, - }), - ], - }) - .then(({ x, y }) => { - formatQuickBarElement.style.display = 'flex'; - formatQuickBarElement.style.top = `${y}px`; - formatQuickBarElement.style.left = `${x}px`; - }) - .catch(console.error); - }, - { - // follow edgeless viewport update - animationFrame: true, - } - ) - ); - }; - - const getReferenceElementFromBlock = () => { - const firstBlock = this._selectedBlocks[0]; - let rect = firstBlock?.getBoundingClientRect(); - - if (!rect) return; - - this._selectedBlocks.forEach(el => { - const elRect = el.getBoundingClientRect(); - if (elRect.top < rect.top) { - rect = new DOMRect(rect.left, elRect.top, rect.width, rect.bottom); - } - if (elRect.bottom > rect.bottom) { - rect = new DOMRect(rect.left, rect.top, rect.width, elRect.bottom); - } - if (elRect.left < rect.left) { - rect = new DOMRect(elRect.left, rect.top, rect.right, rect.bottom); - } - if (elRect.right > rect.right) { - rect = new DOMRect(rect.left, rect.top, elRect.right, rect.bottom); - } - }); - return { - getBoundingClientRect: () => rect, - getClientRects: () => - this._selectedBlocks.map(el => el.getBoundingClientRect()), - }; - }; - - const getReferenceElementFromText = () => { - const range = this.nativeRange; - if (!range) { - return; - } - return { - getBoundingClientRect: () => range.getBoundingClientRect(), - getClientRects: () => range.getClientRects(), - }; - }; - - switch (this.displayType) { - case 'text': - case 'native': - return listenFloatingElement(getReferenceElementFromText); - case 'block': - return listenFloatingElement(getReferenceElementFromBlock); - default: - return; - } - } - - private _selectionEqual( - target: BaseSelection | undefined, - current: BaseSelection | undefined - ) { - if (target === current || (target && current && target.equals(current))) { - return true; - } - - return false; - } - - private _shouldDisplay() { - const readonly = this.doc.readonly; - const active = this.host.event.active; - if (readonly || !active) return false; - - if ( - this.displayType === 'block' && - this._selectedBlocks?.[0]?.flavour === 'affine:surface-ref' - ) { - return false; - } - - if (this.displayType === 'block' && this._selectedBlocks.length === 1) { - const selectedBlock = this._selectedBlocks[0]; - if ( - !matchModels(selectedBlock.model, [ - ParagraphBlockModel, - ListBlockModel, - CodeBlockModel, - ImageBlockModel, - ]) - ) { - return false; - } - } - - if (this.displayType === 'none' || this._dragging) { - return false; - } - - // if the selection is on an embed (ex. linked page), we should not display the format bar - if (this.displayType === 'text' && this._selectedBlocks.length === 1) { - const isEmbed = () => { - const [element] = this._selectedBlocks; - const richText = element.querySelector('rich-text'); - const inline = richText?.inlineEditor; - if (!richText || !inline) { - return false; - } - const range = inline.getInlineRange(); - if (!range || range.length > 1) { - return false; - } - const deltas = inline.getDeltasByInlineRange(range); - if (deltas.length > 2) { - return false; - } - const delta = deltas?.[1]?.[0]; - if (!delta) { - return false; - } - - return inline.isEmbed(delta); - }; - - if (isEmbed()) { - return false; - } - } - - // todo: refactor later that ai panel & format bar should not depend on each other - // do not display if AI panel is open - const rootBlockId = this.host.doc.root?.id; - const aiPanel = rootBlockId - ? this.host.view.getWidget('affine-ai-panel-widget', rootBlockId) - : null; - - // @ts-expect-error FIXME: ts error - if (aiPanel && aiPanel?.state !== 'hidden') { - return false; - } - - return true; - } - - addBlockTypeSwitch(config: { - flavour: string; - icon: ParagraphActionConfigItem['icon']; - type?: string; - name?: string; - }) { - const { flavour, type, icon } = config; - return this.addParagraphAction({ - id: `${flavour}/${type ?? ''}`, - icon, - flavour, - name: config.name ?? camelCaseToWords(type ?? flavour), - action: chain => { - chain - .pipe(updateBlockType, { - flavour, - props: type != null ? { type } : undefined, - }) - .run(); - }, - }); - } - - addDivider() { - this.configItems.push({ type: 'divider' }); - return this; - } - - addHighlighterDropdown() { - this.configItems.push({ type: 'highlighter-dropdown' }); - return this; - } - - addInlineAction(config: Omit) { - this.configItems.push({ ...config, type: 'inline-action' }); - return this; - } - - addParagraphAction(config: Omit) { - this.configItems.push({ ...config, type: 'paragraph-action' }); - return this; - } - - addParagraphDropdown() { - this.configItems.push({ type: 'paragraph-dropdown' }); - return this; - } - - addRawConfigItems(configItems: FormatBarConfigItem[], index?: number) { - if (index === undefined) { - this.configItems.push(...configItems); - } else { - this.configItems.splice(index, 0, ...configItems); - } - return this; - } - - addTextStyleToggle(config: { - icon: InlineActionConfigItem['icon']; - key: Exclude< - keyof AffineTextAttributes, - 'color' | 'background' | 'reference' - >; - action: InlineActionConfigItem['action']; - }) { - const { key } = config; - return this.addInlineAction({ - id: key, - name: camelCaseToWords(key), - icon: config.icon, - isActive: chain => { - const [result] = chain.pipe(isTextStyleActive, { key }).run(); - return result; - }, - action: config.action, - showWhen: chain => { - const [result] = isFormatSupported(chain).run(); - return result; - }, - }); - } - - clearConfig() { - this.configItems = []; - return this; - } - - override connectedCallback() { - super.connectedCallback(); - this._abortController = new AbortController(); - - const rootComponent = this.block; - if (!rootComponent) { - return; - } - const widgets = rootComponent.widgets; - - // check if the host use the format bar widget - if (!Object.hasOwn(widgets, AFFINE_FORMAT_BAR_WIDGET)) { - return; - } - - // check if format bar widget support the host - if (rootComponent.model.flavour !== 'affine:page') { - console.error( - `format bar not support rootComponent: ${rootComponent.constructor.name} but its widgets has format bar` - ); - return; - } - - this._calculatePlacement(); - - if (this.configItems.length === 0) { - toolbarDefaultConfig(this); - } - - this.moreGroups = getMoreMenuConfig(this.std).configure(this.moreGroups); - } - - override disconnectedCallback() { - super.disconnectedCallback(); - this._abortController.abort(); - this.reset(); - this._lastCursor = undefined; - } - - override render() { - if (!this._shouldDisplay()) { - return nothing; - } - - const items = ConfigRenderer(this); - const moreButton = toolbarMoreButton(this); - return html` - - ${items} - ${moreButton - ? html` - - ${moreButton} - ` - : nothing} - - `; - } - - reset() { - this._displayType = 'none'; - this._selectedBlocks = []; - } - - override updated() { - if (this._floatDisposables) { - this._floatDisposables.dispose(); - this._floatDisposables = null; - } - - if (!this._shouldDisplay()) { - return; - } - - this._floatDisposables = new DisposableGroup(); - this._listenFloatingElement(); - } - - @state() - private accessor _displayType: 'text' | 'block' | 'native' | 'none' = 'none'; - - @state() - private accessor _dragging = false; - - @state() - private accessor _selectedBlocks: BlockComponent[] = []; - - @state() - accessor configItems: FormatBarConfigItem[] = []; - - @query(`.${AFFINE_FORMAT_BAR_WIDGET}`) - accessor formatBarElement: HTMLElement | null = null; -} - -function camelCaseToWords(s: string) { - const result = s.replace(/([A-Z])/g, ' $1'); - return result.charAt(0).toUpperCase() + result.slice(1); -} - -declare global { - interface HTMLElementTagNameMap { - [AFFINE_FORMAT_BAR_WIDGET]: AffineFormatBarWidget; - } -} diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/index.ts b/blocksuite/affine/block-root/src/widgets/format-bar/index.ts deleted file mode 100644 index efe6a4df4e..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './config.js'; -export { AffineFormatBarWidget } from './format-bar.js'; diff --git a/blocksuite/affine/block-root/src/widgets/format-bar/styles.ts b/blocksuite/affine/block-root/src/widgets/format-bar/styles.ts deleted file mode 100644 index 93fdeb237e..0000000000 --- a/blocksuite/affine/block-root/src/widgets/format-bar/styles.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { scrollbarStyle } from '@blocksuite/affine-shared/styles'; -import { css } from 'lit'; - -const paragraphButtonStyle = css` - .paragraph-button-icon > svg:nth-child(2) { - transition-duration: 0.3s; - } - .paragraph-button-icon:is(:hover, :focus-visible, :active) - > svg:nth-child(2) { - transform: rotate(180deg); - } - - .highlight-icon > svg:nth-child(2) { - transition-duration: 0.3s; - } - .highlight-icon:is(:hover, :focus-visible, :active) > svg:nth-child(2) { - transform: rotate(180deg); - } - - .highlight-panel { - max-height: 380px; - } - - .highligh-panel-heading { - display: flex; - color: var(--affine-text-secondary-color); - padding: 4px; - } - - editor-menu-content { - display: none; - position: absolute; - padding: 0; - z-index: var(--affine-z-index-popover); - --packed-height: 6px; - } - - editor-menu-content > div[data-orientation='vertical'] { - padding: 8px; - overflow-y: auto; - } - - ${scrollbarStyle('editor-menu-content > div[data-orientation="vertical"]')} -`; - -export const formatBarStyle = css` - .affine-format-bar-widget { - position: absolute; - display: none; - z-index: var(--affine-z-index-popover); - user-select: none; - } - - ${paragraphButtonStyle} -`; diff --git a/blocksuite/affine/block-root/src/widgets/index.ts b/blocksuite/affine/block-root/src/widgets/index.ts index fee243af60..97f27644bf 100644 --- a/blocksuite/affine/block-root/src/widgets/index.ts +++ b/blocksuite/affine/block-root/src/widgets/index.ts @@ -4,15 +4,6 @@ export { EDGELESS_ELEMENT_TOOLBAR_WIDGET, EdgelessElementToolbarWidget, } from './element-toolbar/index.js'; -export { - AFFINE_EMBED_CARD_TOOLBAR_WIDGET, - EmbedCardToolbar, -} from './embed-card-toolbar/embed-card-toolbar.js'; -export { toolbarDefaultConfig } from './format-bar/config.js'; -export { - AFFINE_FORMAT_BAR_WIDGET, - AffineFormatBarWidget, -} from './format-bar/format-bar.js'; export { AffineImageToolbarWidget } from './image-toolbar/index.js'; export { AffineInnerModalWidget } from './inner-modal/inner-modal.js'; export * from './keyboard-toolbar/index.js'; diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json index 2dbee20831..bfb944c927 100644 --- a/blocksuite/affine/components/package.json +++ b/blocksuite/affine/components/package.json @@ -63,7 +63,12 @@ "./block-zero-width": "./src/block-zero-width/index.ts", "./block-selection": "./src/block-selection/index.ts", "./doc-title": "./src/doc-title/index.ts", - "./embed-card-modal": "./src/embed-card-modal/index.ts" + "./embed-card-modal": "./src/embed-card-modal/index.ts", + "./link-preview": "./src/link-preview/index.ts", + "./linked-doc-title": "./src/linked-doc-title/index.ts", + "./view-dropdown-menu": "./src/view-dropdown-menu/index.ts", + "./card-style-dropdown-menu": "./src/card-style-dropdown-menu/index.ts", + "./highlight-dropdown-menu": "./src/highlight-dropdown-menu/index.ts" }, "files": [ "src", diff --git a/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts new file mode 100644 index 0000000000..b483fc2bb2 --- /dev/null +++ b/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts @@ -0,0 +1,115 @@ +import type { ColorScheme } from '@blocksuite/affine-model'; +import { + type ToolbarAction, + ToolbarContext, +} from '@blocksuite/affine-shared/services'; +import { + PropTypes, + requiredProperties, + ShadowlessElement, +} from '@blocksuite/block-std'; +import { SignalWatcher } from '@blocksuite/global/utils'; +import { PaletteIcon } from '@blocksuite/icons/lit'; +import { + computed, + type ReadonlySignal, + type Signal, +} from '@preact/signals-core'; +import { property } from 'lit/decorators.js'; +import { html, type TemplateResult } from 'lit-html'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; +import { repeat } from 'lit-html/directives/repeat.js'; + +import { + EmbedCardDarkHorizontalIcon, + EmbedCardDarkListIcon, + EmbedCardLightHorizontalIcon, + EmbedCardLightListIcon, +} from '../icons'; + +const cardStyleMap: Record> = { + light: { + horizontal: EmbedCardLightHorizontalIcon, + list: EmbedCardLightListIcon, + }, + dark: { + horizontal: EmbedCardDarkHorizontalIcon, + list: EmbedCardDarkListIcon, + }, +}; + +@requiredProperties({ + actions: PropTypes.array, + context: PropTypes.instanceOf(ToolbarContext), + style$: PropTypes.object, +}) +export class CardStyleDropdownMenu extends SignalWatcher(ShadowlessElement) { + @property({ attribute: false }) + accessor actions!: ToolbarAction[]; + + @property({ attribute: false }) + accessor context!: ToolbarContext; + + @property({ attribute: false }) + accessor style$!: Signal | ReadonlySignal; + + @property({ attribute: false }) + accessor toggle: ((e: CustomEvent) => void) | undefined; + + icons$ = computed( + () => cardStyleMap[this.context.themeProvider.theme$.value] + ); + + override render() { + const { + actions, + context, + toggle, + style$: { value: style }, + icons$: { value: icons }, + } = this; + + return html` + + ${PaletteIcon()} + + `} + > +
+ ${repeat( + actions, + action => action.id, + ({ id, label, icon, disabled, run }) => html` + run?.(context)} + > + ${icon || icons[id]} + + ` + )} +
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-card-style-dropdown-menu': CardStyleDropdownMenu; + } +} diff --git a/blocksuite/affine/components/src/card-style-dropdown-menu/index.ts b/blocksuite/affine/components/src/card-style-dropdown-menu/index.ts new file mode 100644 index 0000000000..2cb2cb72af --- /dev/null +++ b/blocksuite/affine/components/src/card-style-dropdown-menu/index.ts @@ -0,0 +1,10 @@ +import { CardStyleDropdownMenu } from './dropdown-menu'; + +export * from './dropdown-menu'; + +export function effects() { + customElements.define( + 'affine-card-style-dropdown-menu', + CardStyleDropdownMenu + ); +} diff --git a/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts b/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts index 4714fa2b8b..d7ff6c4ba4 100644 --- a/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts +++ b/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts @@ -20,7 +20,11 @@ import type { BlockStdScope, EditorHost, } from '@blocksuite/block-std'; -import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; +import { + nextTick, + SignalWatcher, + WithDisposable, +} from '@blocksuite/global/utils'; import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom'; import { computed, signal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; @@ -137,6 +141,7 @@ export class EmbedCardEditModal extends SignalWatcher( private readonly _hide = () => { this.remove(); + this.abortController?.abort(); }; private readonly _onKeydown = (e: KeyboardEvent) => { @@ -146,7 +151,7 @@ export class EmbedCardEditModal extends SignalWatcher( } if (e.key === 'Escape') { e.preventDefault(); - this.remove(); + this._hide(); } }; @@ -154,7 +159,7 @@ export class EmbedCardEditModal extends SignalWatcher( const blockComponent = this._blockComponent; if (!blockComponent) { - this.remove(); + this._hide(); return; } @@ -168,14 +173,14 @@ export class EmbedCardEditModal extends SignalWatcher( track(std, this.model, this.viewType, 'ResetedAlias', { control: 'reset' }); - this.remove(); + this._hide(); }; private readonly _onSave = () => { const blockComponent = this._blockComponent; if (!blockComponent) { - this.remove(); + this._hide(); return; } @@ -196,7 +201,7 @@ export class EmbedCardEditModal extends SignalWatcher( track(std, this.model, this.viewType, 'SavedAlias', { control: 'save' }); - this.remove(); + this._hide(); }; private readonly _updateDescription = (e: InputEvent) => { @@ -278,7 +283,10 @@ export class EmbedCardEditModal extends SignalWatcher( }) ); - this.disposables.add(listenClickAway(this, this._hide)); + // Resolves the click event is triggered after the first rendering. + nextTick() + .then(() => this.disposables.add(listenClickAway(this, this._hide))) + .catch(console.error); this.disposables.addFromEvent(this, 'keydown', this._onKeydown); this.disposables.addFromEvent(this, 'pointerdown', stopPropagation); this.disposables.addFromEvent(this, 'cut', stopPropagation); @@ -401,6 +409,9 @@ export class EmbedCardEditModal extends SignalWatcher( @property({ attribute: false }) accessor viewType!: string; + + @property({ attribute: false }) + accessor abortController: AbortController | undefined = undefined; } export function toggleEmbedCardEditModal( @@ -413,7 +424,8 @@ export function toggleEmbedCardEditModal( std: BlockStdScope, component: BlockComponent, props: AliasInfo - ) => void + ) => void, + abortController?: AbortController ) { document.body.querySelector('embed-card-edit-modal')?.remove(); @@ -424,6 +436,7 @@ export function toggleEmbedCardEditModal( embedCardEditModal.originalDocInfo = originalDocInfo; embedCardEditModal.onReset = onReset; embedCardEditModal.onSave = onSave; + embedCardEditModal.abortController = abortController; document.body.append(embedCardEditModal); } diff --git a/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts new file mode 100644 index 0000000000..13c6ab3673 --- /dev/null +++ b/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts @@ -0,0 +1,120 @@ +import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; +import { PropTypes, requiredProperties } from '@blocksuite/block-std'; +import { ArrowDownSmallIcon } from '@blocksuite/icons/lit'; +import { LitElement } from 'lit'; +import { property } from 'lit/decorators.js'; +import { styleMap } from 'lit/directives/style-map.js'; +import { html } from 'lit-html'; +import { repeat } from 'lit-html/directives/repeat.js'; + +const colors = [ + 'default', + 'red', + 'orange', + 'yellow', + 'green', + 'teal', + 'blue', + 'purple', + 'grey', +] as const; + +type HighlightType = 'color' | 'background'; + +// TODO(@fundon): these recent settings should be added to the dropdown menu +// blocksuite/tests-legacy/e2e/format-bar.spec.ts#253 +// +// let latestHighlightColor: string | null = null; +// let latestHighlightType: HighlightType = 'background'; + +@requiredProperties({ + updateHighlight: PropTypes.instanceOf(Function), +}) +export class HighlightDropdownMenu extends LitElement { + @property({ attribute: false }) + accessor updateHighlight!: (styles: AffineTextAttributes) => void; + + private readonly _update = (value: string | null, type: HighlightType) => { + // latestHighlightColor = value; + // latestHighlightType = type; + + this.updateHighlight({ [`${type}`]: value }); + }; + + override render() { + const prefix = '--affine-text-highlight'; + + return html` + + + + ${ArrowDownSmallIcon()} + + `} + > +
+
Color
+ ${repeat(colors, color => { + const isDefault = color === 'default'; + const value = isDefault + ? null + : `var(${prefix}-foreground-${color})`; + return html` + this._update(value, 'color')} + > + + ${isDefault ? `${color} color` : color} + + `; + })} + +
Background
+ ${repeat(colors, color => { + const isDefault = color === 'default'; + const value = isDefault ? null : `var(${prefix}-${color})`; + return html` + this._update(value, 'background')} + > + + + ${isDefault ? `${color} background` : color} + + `; + })} +
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-highlight-dropdown-menu': HighlightDropdownMenu; + } +} diff --git a/blocksuite/affine/components/src/highlight-dropdown-menu/highlight-duotone-icon.ts b/blocksuite/affine/components/src/highlight-dropdown-menu/highlight-duotone-icon.ts new file mode 100644 index 0000000000..326609db93 --- /dev/null +++ b/blocksuite/affine/components/src/highlight-dropdown-menu/highlight-duotone-icon.ts @@ -0,0 +1,23 @@ +import { HighLightDuotoneIcon } from '@blocksuite/icons/lit'; +import { css, LitElement } from 'lit'; + +export class HighlightDuotoneIcon extends LitElement { + static override styles = css` + svg { + display: flex; + font-size: 20px; + } + svg > path:nth-child(1) { + fill: var(--color, unset); + } + `; + override render() { + return HighLightDuotoneIcon(); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-highlight-duotone-icon': HighlightDuotoneIcon; + } +} diff --git a/blocksuite/affine/components/src/highlight-dropdown-menu/index.ts b/blocksuite/affine/components/src/highlight-dropdown-menu/index.ts new file mode 100644 index 0000000000..25c0ad1078 --- /dev/null +++ b/blocksuite/affine/components/src/highlight-dropdown-menu/index.ts @@ -0,0 +1,16 @@ +import { HighlightDropdownMenu } from './dropdown-menu'; +import { HighlightDuotoneIcon } from './highlight-duotone-icon'; +import { TextDuotoneIcon } from './text-duotone-icon'; + +export * from './dropdown-menu'; +export * from './highlight-duotone-icon'; +export * from './text-duotone-icon'; + +export function effects() { + customElements.define( + 'affine-highlight-dropdown-menu', + HighlightDropdownMenu + ); + customElements.define('affine-highlight-duotone-icon', HighlightDuotoneIcon); + customElements.define('affine-text-duotone-icon', TextDuotoneIcon); +} diff --git a/blocksuite/affine/components/src/highlight-dropdown-menu/text-duotone-icon.ts b/blocksuite/affine/components/src/highlight-dropdown-menu/text-duotone-icon.ts new file mode 100644 index 0000000000..9c93143af1 --- /dev/null +++ b/blocksuite/affine/components/src/highlight-dropdown-menu/text-duotone-icon.ts @@ -0,0 +1,26 @@ +import { TextBackgroundDuotoneIcon } from '@blocksuite/icons/lit'; +import { css, LitElement } from 'lit'; + +export class TextDuotoneIcon extends LitElement { + static override styles = css` + svg { + display: flex; + font-size: 20px; + } + svg > path:nth-child(1) { + fill: var(--background, unset); + } + svg > path:nth-child(3) { + fill: var(--color, unset); + } + `; + override render() { + return TextBackgroundDuotoneIcon(); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-text-duotone-icon': TextDuotoneIcon; + } +} diff --git a/blocksuite/affine/components/src/hover/middlewares/basic.ts b/blocksuite/affine/components/src/hover/middlewares/basic.ts index 66a15748fd..a62eeaccb8 100644 --- a/blocksuite/affine/components/src/hover/middlewares/basic.ts +++ b/blocksuite/affine/components/src/hover/middlewares/basic.ts @@ -12,7 +12,7 @@ export const dedupe = (keepWhenFloatingNotReady = true): HoverMiddleware => { let hoverState = false; return ({ event, floatingElement }) => { const curState = hoverState; - if (event.type === 'mouseover') { + if (event.type === 'mouseenter') { // hover in hoverState = true; if (curState !== hoverState) @@ -55,7 +55,7 @@ export const delayShow = (delay: number): HoverMiddleware => { abortController.abort(); const newAbortController = new AbortController(); abortController = newAbortController; - if (event.type !== 'mouseover') return true; + if (event.type !== 'mouseenter') return true; if (delay <= 0) return true; await sleep(delay, newAbortController.signal); return !newAbortController.signal.aborted; diff --git a/blocksuite/affine/components/src/hover/when-hover.ts b/blocksuite/affine/components/src/hover/when-hover.ts index 4c8959a28c..57a79cdb4a 100644 --- a/blocksuite/affine/components/src/hover/when-hover.ts +++ b/blocksuite/affine/components/src/hover/when-hover.ts @@ -80,7 +80,7 @@ export const whenHover = ( } // ignore expired event if (e !== currentEvent) return; - const isHover = e.type === 'mouseover' ? true : false; + const isHover = e.type === 'mouseenter' ? true : false; whenHoverChange(isHover, e); }) as (e: Event) => void; @@ -90,9 +90,9 @@ export const whenHover = ( const alreadyHover = element.matches(':hover'); if (alreadyHover && !abortController.signal.aborted) { // When the element is already hovered, we need to trigger the callback manually - onHoverChange(new MouseEvent('mouseover')); + onHoverChange(new MouseEvent('mouseenter')); } - element.addEventListener('mouseover', onHoverChange, { + element.addEventListener('mouseenter', onHoverChange, { capture: true, signal: abortController.signal, }); @@ -112,7 +112,9 @@ export const whenHover = ( const removeHoverListener = (element?: Element) => { if (!element) return; - element.removeEventListener('mouseover', onHoverChange); + element.removeEventListener('mouseenter', onHoverChange, { + capture: true, + }); element.removeEventListener('mouseleave', onHoverChange); }; diff --git a/blocksuite/affine/components/src/link-preview/index.ts b/blocksuite/affine/components/src/link-preview/index.ts new file mode 100644 index 0000000000..7b8f1bc2c4 --- /dev/null +++ b/blocksuite/affine/components/src/link-preview/index.ts @@ -0,0 +1,7 @@ +import { LinkPreview } from './link'; + +export * from './link'; + +export function effects() { + customElements.define('affine-link-preview', LinkPreview); +} diff --git a/blocksuite/affine/components/src/link-preview/link.ts b/blocksuite/affine/components/src/link-preview/link.ts new file mode 100644 index 0000000000..f7e7f9f493 --- /dev/null +++ b/blocksuite/affine/components/src/link-preview/link.ts @@ -0,0 +1,73 @@ +import { getHostName } from '@blocksuite/affine-shared/utils'; +import { + PropTypes, + requiredProperties, + ShadowlessElement, +} from '@blocksuite/block-std'; +import { css } from 'lit'; +import { property } from 'lit/decorators.js'; +import { html } from 'lit-html'; + +@requiredProperties({ + url: PropTypes.string, +}) +export class LinkPreview extends ShadowlessElement { + static override styles = css` + .affine-link-preview { + display: flex; + justify-content: flex-start; + min-width: 60px; + max-width: 140px; + padding: var(--1, 0px); + border-radius: var(--1, 0px); + opacity: var(--add, 1); + user-select: none; + cursor: pointer; + + color: var(--affine-link-color); + font-feature-settings: + 'clig' off, + 'liga' off; + font-family: var(--affine-font-family); + font-size: var(--affine-font-sm); + font-style: normal; + font-weight: 400; + text-decoration: none; + text-wrap: nowrap; + } + + .affine-link-preview > span { + display: inline-block; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + + text-overflow: ellipsis; + overflow: hidden; + opacity: var(--add, 1); + } + `; + + @property({ attribute: false }) + accessor url!: string; + + override render() { + const { url } = this; + + return html` + + ${getHostName(url)} + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-link-preview': LinkPreview; + } +} diff --git a/blocksuite/affine/components/src/linked-doc-title/doc-title.ts b/blocksuite/affine/components/src/linked-doc-title/doc-title.ts new file mode 100644 index 0000000000..aa920a0639 --- /dev/null +++ b/blocksuite/affine/components/src/linked-doc-title/doc-title.ts @@ -0,0 +1,65 @@ +import { + PropTypes, + requiredProperties, + ShadowlessElement, +} from '@blocksuite/block-std'; +import { css } from 'lit'; +import { property } from 'lit/decorators.js'; +import { html } from 'lit-html'; + +@requiredProperties({ + title: PropTypes.string, + open: PropTypes.instanceOf(Function), +}) +export class DocTitle extends ShadowlessElement { + static override styles = css` + editor-icon-button .label { + min-width: 60px; + max-width: 140px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + user-select: none; + cursor: pointer; + color: var(--affine-link-color); + font-feature-settings: + 'clig' off, + 'liga' off; + font-family: var(--affine-font-family); + font-size: var(--affine-font-sm); + font-style: normal; + font-weight: 400; + text-decoration: none; + text-wrap: nowrap; + } + `; + + @property({ attribute: false }) + override accessor title!: string; + + @property({ attribute: false }) + accessor open!: (event: MouseEvent) => void; + + override render() { + const { title, open } = this; + + return html` + open(event)} + > + ${title} + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-linked-doc-title': DocTitle; + } +} diff --git a/blocksuite/affine/components/src/linked-doc-title/index.ts b/blocksuite/affine/components/src/linked-doc-title/index.ts new file mode 100644 index 0000000000..e921a18a9a --- /dev/null +++ b/blocksuite/affine/components/src/linked-doc-title/index.ts @@ -0,0 +1,7 @@ +import { DocTitle } from './doc-title'; + +export * from './doc-title'; + +export function effects() { + customElements.define('affine-linked-doc-title', DocTitle); +} diff --git a/blocksuite/affine/components/src/rich-text/effects.ts b/blocksuite/affine/components/src/rich-text/effects.ts index 59c8b7e307..7ff84171be 100644 --- a/blocksuite/affine/components/src/rich-text/effects.ts +++ b/blocksuite/affine/components/src/rich-text/effects.ts @@ -10,8 +10,7 @@ import { LatexEditorMenu } from './inline/presets/nodes/latex-node/latex-editor- import { LatexEditorUnit } from './inline/presets/nodes/latex-node/latex-editor-unit.js'; import { AffineLatexNode } from './inline/presets/nodes/latex-node/latex-node.js'; import { LinkPopup } from './inline/presets/nodes/link-node/link-popup/link-popup.js'; -import { ReferenceAliasPopup } from './inline/presets/nodes/reference-node/reference-alias-popup.js'; -import { ReferencePopup } from './inline/presets/nodes/reference-node/reference-popup.js'; +import { ReferencePopup } from './inline/presets/nodes/reference-node/reference-popup/reference-popup.js'; import { RichText } from './rich-text.js'; export function effects() { @@ -23,7 +22,6 @@ export function effects() { customElements.define('link-popup', LinkPopup); customElements.define('affine-link', AffineLink); customElements.define('reference-popup', ReferencePopup); - customElements.define('reference-alias-popup', ReferenceAliasPopup); customElements.define('affine-reference', AffineReference); customElements.define('affine-footnote-node', AffineFootnoteNode); customElements.define('footnote-popup', FootNotePopup); @@ -41,7 +39,6 @@ declare global { 'affine-text': AffineText; 'rich-text': RichText; 'reference-popup': ReferencePopup; - 'reference-alias-popup': ReferenceAliasPopup; 'latex-editor-unit': LatexEditorUnit; 'latex-editor-menu': LatexEditorMenu; 'link-popup': LinkPopup; diff --git a/blocksuite/affine/components/src/rich-text/format/text-style.ts b/blocksuite/affine/components/src/rich-text/format/text-style.ts index 64feb32fe7..29abb1f54a 100644 --- a/blocksuite/affine/components/src/rich-text/format/text-style.ts +++ b/blocksuite/affine/components/src/rich-text/format/text-style.ts @@ -68,7 +68,7 @@ export const toggleUnderline = toggleTextStyleCommandWrapper('underline'); export const toggleStrike = toggleTextStyleCommandWrapper('strike'); export const toggleCode = toggleTextStyleCommandWrapper('code'); -export const toggleLink: Command = (_ctx, next) => { +export const toggleLink: Command = (ctx, next) => { const selection = document.getSelection(); if (!selection || selection.rangeCount === 0) return false; @@ -92,8 +92,9 @@ export const toggleLink: Command = (_ctx, next) => { const abortController = new AbortController(); const popup = toggleLinkPopup( - inlineEditor, + ctx.std, 'create', + inlineEditor, targetInlineRange, abortController ); diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/affine-inline-specs.ts b/blocksuite/affine/components/src/rich-text/inline/presets/affine-inline-specs.ts index e94a9d1184..e6c3dee572 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/affine-inline-specs.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/affine-inline-specs.ts @@ -1,12 +1,15 @@ import { FootNoteSchema, ReferenceInfoSchema } from '@blocksuite/affine-model'; +import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; -import { StdIdentifier } from '@blocksuite/block-std'; +import { BlockFlavourIdentifier, StdIdentifier } from '@blocksuite/block-std'; import type { InlineEditor, InlineRootElement } from '@blocksuite/inline'; import { html } from 'lit'; import { z } from 'zod'; import { InlineSpecExtension } from '../../extension/index.js'; import { FootNoteNodeConfigIdentifier } from './nodes/footnote-node/footnote-config.js'; +import { builtinInlineLinkToolbarConfig } from './nodes/link-node/configs/toolbar.js'; +import { builtinInlineReferenceToolbarConfig } from './nodes/reference-node/configs/toolbar.js'; import { ReferenceNodeConfigIdentifier, ReferenceNodeConfigProvider, @@ -220,4 +223,14 @@ export const InlineSpecExtensions = [ LinkInlineSpecExtension, LatexEditorUnitSpecExtension, FootNoteInlineSpecExtension, + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('affine:reference'), + config: builtinInlineReferenceToolbarConfig, + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('affine:link'), + config: builtinInlineLinkToolbarConfig, + }), ]; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/index.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/index.ts index c316fd4c8a..deeb48450b 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/index.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/index.ts @@ -2,9 +2,4 @@ export { affineTextStyles } from './affine-text.js'; export * from './footnote-node/footnote-config.js'; export { AffineFootnoteNode } from './footnote-node/footnote-node.js'; 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 { - DocLinkClickedEvent, - RefNodeSlots, -} from './reference-node/types.js'; +export * from './reference-node/index.js'; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts index 76e8af258d..de8b1bb9bb 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts @@ -1,13 +1,12 @@ import type { ReferenceInfo } from '@blocksuite/affine-model'; -import { ParseDocUrlProvider } from '@blocksuite/affine-shared/services'; +import { + ParseDocUrlProvider, + ToolbarRegistryIdentifier, +} from '@blocksuite/affine-shared/services'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; import type { BlockComponent, BlockStdScope } from '@blocksuite/block-std'; -import { - BLOCK_ID_ATTR, - BlockSelection, - ShadowlessElement, - TextSelection, -} from '@blocksuite/block-std'; +import { BLOCK_ID_ATTR, ShadowlessElement } from '@blocksuite/block-std'; +import { WithDisposable } from '@blocksuite/global/utils'; import { type DeltaInsert, INLINE_ROOT_ATTR, @@ -16,15 +15,13 @@ import { } from '@blocksuite/inline'; import { css, html } from 'lit'; import { property } from 'lit/decorators.js'; -import { ref } from 'lit/directives/ref.js'; import { type StyleInfo, styleMap } from 'lit/directives/style-map.js'; -import { HoverController } from '../../../../../hover/index.js'; -import { RefNodeSlotsProvider } from '../../../../extension/index.js'; -import { affineTextStyles } from '../affine-text.js'; -import { toggleLinkPopup } from './link-popup/toggle-link-popup.js'; +import { whenHover } from '../../../../../hover/index'; +import { RefNodeSlotsProvider } from '../../../../extension/index'; +import { affineTextStyles } from '../affine-text'; -export class AffineLink extends ShadowlessElement { +export class AffineLink extends WithDisposable(ShadowlessElement) { static override styles = css` affine-link a:hover [data-v-text='true'] { text-decoration: underline; @@ -66,43 +63,41 @@ export class AffineLink extends ShadowlessElement { }); }; - private readonly _whenHover = new HoverController( - this, - ({ abortController }) => { - if (this.block?.doc.readonly) { - return null; - } - if (!this.inlineEditor || !this.selfInlineRange) { - return null; + _whenHover = whenHover( + hovered => { + const message$ = this.std.get(ToolbarRegistryIdentifier).message$; + + if (hovered) { + message$.value = { + flavour: 'affine:link', + element: this, + setFloating: this._whenHover.setFloating, + }; + return; } - const selection = this.std.selection; - const textSelection = selection?.find(TextSelection); - if (!!textSelection && !textSelection.isCollapsed()) { - return null; - } - - const blockSelections = selection?.filter(BlockSelection); - if (blockSelections?.length) { - return null; - } - - return { - template: toggleLinkPopup( - this.inlineEditor, - 'view', - this.selfInlineRange, - abortController, - (e?: MouseEvent) => { - this.openLink(e); - abortController.abort(); - } - ), - }; + // Clears previous bindings + message$.value = null; + this._whenHover.setFloating(); }, { enterDelay: 500 } ); + override connectedCallback() { + super.connectedCallback(); + + this._whenHover.setReference(this); + + const message$ = this.std.get(ToolbarRegistryIdentifier).message$; + + this._disposables.add(() => { + if (message$?.value) { + message$.value = null; + } + this._whenHover.dispose(); + }); + } + // Workaround for links not working in contenteditable div // see also https://stackoverflow.com/questions/12059211/how-to-make-clickable-anchor-in-contenteditable-div // @@ -149,7 +144,6 @@ export class AffineLink extends ShadowlessElement { private _renderLink(style: StyleInfo) { return html``; + }, + }, + { + id: 'b.copy-link-and-edit', + actions: [ + { + id: 'copy-link', + tooltip: 'Copy link', + icon: CopyIcon(), + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return; + + const { link } = target; + + if (!link) return; + + // Clears + ctx.reset(); + + navigator.clipboard.writeText(link).catch(console.error); + toast(ctx.host, 'Copied link to clipboard'); + + ctx.track('CopiedLink', { + ...trackBaseProps, + control: 'copy link', + }); + }, + }, + { + id: 'edit', + tooltip: 'Edit', + icon: EditIcon(), + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return; + + const { inlineEditor, selfInlineRange } = target; + + if (!inlineEditor || !selfInlineRange) return; + + const abortController = new AbortController(); + const popover = toggleLinkPopup( + ctx.std, + 'edit', + inlineEditor, + selfInlineRange, + abortController + ); + abortController.signal.onabort = () => popover.remove(); + + ctx.track('OpenedAliasPopup', { + ...trackBaseProps, + control: 'edit', + }); + }, + }, + ], + }, + { + id: 'c.conversions', + actions: [ + { + id: 'inline', + label: 'Inline view', + disabled: true, + }, + { + id: 'card', + label: 'Card view', + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return; + if (!target.block) return; + + const { + block: { model }, + inlineEditor, + selfInlineRange, + } = target; + const { parent } = model; + + if (!inlineEditor || !selfInlineRange || !parent) return; + + const url = inlineEditor.getFormat(selfInlineRange).link; + if (!url) return; + + // Clears + ctx.reset(); + + const title = inlineEditor.yTextString.slice( + selfInlineRange.index, + selfInlineRange.index + selfInlineRange.length + ); + + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + const flavour = + options?.viewType === 'card' + ? options.flavour + : 'affine:bookmark'; + const index = parent.children.indexOf(model); + const props = { + url, + title: title === url ? '' : title, + }; + + const blockId = ctx.store.addBlock( + flavour, + props, + parent, + index + 1 + ); + + const totalTextLength = inlineEditor.yTextLength; + const inlineTextLength = selfInlineRange.length; + if (totalTextLength === inlineTextLength) { + ctx.store.deleteBlock(model); + } else { + inlineEditor.formatText(selfInlineRange, { link: null }); + } + + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'card view', + }); + }, + }, + { + id: 'embed', + label: 'Embed view', + when(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return false; + if (!target.block) return false; + + const { + block: { model }, + inlineEditor, + selfInlineRange, + } = target; + const { parent } = model; + + if (!inlineEditor || !selfInlineRange || !parent) return false; + + const url = inlineEditor.getFormat(selfInlineRange).link; + if (!url) return false; + + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + return options?.viewType === 'embed'; + }, + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return; + if (!target.block) return; + + const { + block: { model }, + inlineEditor, + selfInlineRange, + } = target; + const { parent } = model; + + if (!inlineEditor || !selfInlineRange || !parent) return; + + const url = inlineEditor.getFormat(selfInlineRange).link; + if (!url) return; + + // Clears + ctx.reset(); + + const options = ctx.std + .get(EmbedOptionProvider) + .getEmbedBlockOptions(url); + if (options?.viewType !== 'embed') return; + + const flavour = options.flavour; + const index = parent.children.indexOf(model); + const props = { url }; + + const blockId = ctx.store.addBlock( + flavour, + props, + parent, + index + 1 + ); + + const totalTextLength = inlineEditor.yTextLength; + const inlineTextLength = selfInlineRange.length; + if (totalTextLength === inlineTextLength) { + ctx.store.deleteBlock(model); + } else { + inlineEditor.formatText(selfInlineRange, { link: null }); + } + + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'embed view', + }); + }, + }, + ], + content(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return null; + + const actions = this.actions.map(action => ({ ...action })); + const viewType$ = signal(actions[0].label); + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + target, + html`` + )}`; + }, + when(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return false; + if (!target.block) return false; + + if (ctx.flags.isNative()) return false; + if ( + target.block.closest('affine-database') || + target.block.closest('affine-table') + ) + return false; + + const { model } = target.block; + const parent = model.parent; + if (!parent) return false; + + const schema = ctx.store.schema; + const bookmarkSchema = schema.flavourSchemaMap.get('affine:bookmark'); + if (!bookmarkSchema) return false; + + const parentSchema = schema.flavourSchemaMap.get(parent.flavour); + if (!parentSchema) return false; + + try { + schema.validateSchema(bookmarkSchema, parentSchema); + } catch { + return false; + } + + return true; + }, + } satisfies ToolbarActionGroup, + { + placement: ActionPlacement.More, + id: 'b.remove-link', + label: 'Remove link', + icon: UnlinkIcon(), + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return; + + const { inlineEditor, selfInlineRange } = target; + if (!inlineEditor || !selfInlineRange) return; + + if (!inlineEditor.isValidInlineRange(selfInlineRange)) return; + + inlineEditor.formatText(selfInlineRange, { link: null }); + }, + }, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineLink)) return; + + const { inlineEditor, selfInlineRange } = target; + if (!inlineEditor || !selfInlineRange) return; + + if (!inlineEditor.isValidInlineRange(selfInlineRange)) return; + + inlineEditor.deleteText(selfInlineRange); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts index c2c462c808..0ef80f8582 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts @@ -1,48 +1,20 @@ import { - EmbedOptionProvider, - type LinkEventType, - type TelemetryEvent, - TelemetryProvider, -} from '@blocksuite/affine-shared/services'; -import type { EmbedOptions } from '@blocksuite/affine-shared/types'; -import { - getHostName, isValidUrl, normalizeUrl, stopPropagation, } from '@blocksuite/affine-shared/utils'; -import { - BLOCK_ID_ATTR, - type BlockComponent, - type BlockStdScope, - TextSelection, -} from '@blocksuite/block-std'; +import { type BlockStdScope, TextSelection } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/utils'; -import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; +import { DoneIcon } from '@blocksuite/icons/lit'; import type { InlineRange } from '@blocksuite/inline/types'; import { computePosition, inline, offset, shift } from '@floating-ui/dom'; -import { html, LitElement, nothing } from 'lit'; +import { html, LitElement } from 'lit'; import { property, query } from 'lit/decorators.js'; import { choose } from 'lit/directives/choose.js'; -import { join } from 'lit/directives/join.js'; -import { repeat } from 'lit/directives/repeat.js'; -import { - ConfirmIcon, - CopyIcon, - DeleteIcon, - EditIcon, - OpenIcon, - UnlinkIcon, -} from '../../../../../../icons/index.js'; -import { toast } from '../../../../../../toast/index.js'; -import type { EditorIconButton } from '../../../../../../toolbar/index.js'; -import { - renderActions, - renderToolbarSeparator, -} from '../../../../../../toolbar/index.js'; -import type { AffineInlineEditor } from '../../../affine-inline-specs.js'; -import { linkPopupStyle } from './styles.js'; +import type { EditorIconButton } from '../../../../../../toolbar/index'; +import type { AffineInlineEditor } from '../../../affine-inline-specs'; +import { linkPopupStyle } from './styles'; export class LinkPopup extends WithDisposable(LitElement) { static override styles = linkPopupStyle; @@ -74,21 +46,6 @@ export class LinkPopup extends WithDisposable(LitElement) { `; }; - private readonly _delete = () => { - if (this.inlineEditor.isValidInlineRange(this.targetInlineRange)) { - this.inlineEditor.deleteText(this.targetInlineRange); - } - this.abortController.abort(); - }; - - private readonly _edit = () => { - if (!this.host) return; - - this.type = 'edit'; - - track(this.host.std, 'OpenedAliasPopup', { control: 'edit' }); - }; - private readonly _editTemplate = () => { this.updateComplete .then(() => { @@ -137,154 +94,6 @@ export class LinkPopup extends WithDisposable(LitElement) { `; }; - private _embedOptions: EmbedOptions | null = null; - - private readonly _openLink = () => { - if (this.openLink) { - this.openLink(); - return; - } - - let link = this.currentLink; - if (!link) return; - if (!link.match(/^[a-zA-Z]+:\/\//)) { - link = 'https://' + link; - } - window.open(link, '_blank'); - this.abortController.abort(); - }; - - private readonly _removeLink = () => { - if (this.inlineEditor.isValidInlineRange(this.targetInlineRange)) { - this.inlineEditor.formatText(this.targetInlineRange, { - link: null, - }); - } - this.abortController.abort(); - }; - - private readonly _toggleViewSelector = (e: Event) => { - if (!this.host) return; - - const opened = (e as CustomEvent).detail; - if (!opened) return; - - track(this.host.std, 'OpenedViewSelector', { control: 'switch view' }); - }; - - private readonly _trackViewSelected = (type: string) => { - if (!this.host) return; - - track(this.host.std, 'SelectedView', { - control: 'select view', - type: `${type} view`, - }); - }; - - private readonly _viewTemplate = () => { - if (!this.currentLink) return; - - this._embedOptions = - this.std - ?.get(EmbedOptionProvider) - .getEmbedBlockOptions(this.currentLink) ?? null; - - const buttons = [ - html` - this.openLink?.(e)} - > - ${getHostName(this.currentLink)} - - - - ${CopyIcon} - - - - ${EditIcon} - - `, - - this._viewSelector(), - - html` - - ${MoreVerticalIcon()} - - `} - > -
- ${this._moreActions()} -
- - `, - ]; - - return html` - - ${join( - buttons.filter(button => button !== nothing), - renderToolbarSeparator - )} - - `; - }; - - private get _canConvertToEmbedView() { - return this._embedOptions?.viewType === 'embed'; - } - - private get _isBookmarkAllowed() { - const block = this.block; - if (!block) return false; - const schema = block.doc.schema; - const parent = block.doc.getParent(block.model); - if (!parent) return false; - const bookmarkSchema = schema.flavourSchemaMap.get('affine:bookmark'); - if (!bookmarkSchema) return false; - const parentSchema = schema.flavourSchemaMap.get(parent.flavour); - if (!parentSchema) return false; - - try { - schema.validateSchema(bookmarkSchema, parentSchema); - } catch { - return false; - } - - return true; - } - - get block() { - const { rootElement } = this.inlineEditor; - if (!rootElement) return null; - - const block = rootElement.closest(`[${BLOCK_ID_ATTR}]`); - if (!block) return null; - return block; - } - get currentLink() { return this.inlineEditor.getFormat(this.targetInlineRange).link; } @@ -296,137 +105,19 @@ export class LinkPopup extends WithDisposable(LitElement) { ); } - get host() { - return this.block?.host; - } - - get std() { - return this.block?.std; - } - private _confirmBtnTemplate() { return html` - ${ConfirmIcon} + ${DoneIcon()} `; } - private _convertToCardView() { - if (!this.inlineEditor.isValidInlineRange(this.targetInlineRange)) { - return; - } - - let targetFlavour = 'affine:bookmark'; - - if (this._embedOptions && this._embedOptions.viewType === 'card') { - targetFlavour = this._embedOptions.flavour; - } - - const block = this.block; - if (!block) return; - const url = this.currentLink; - const title = this.currentText; - const props = { - url, - title: title === url ? '' : title, - }; - const doc = block.doc; - const parent = doc.getParent(block.model); - if (!parent) return; - const index = parent.children.indexOf(block.model); - doc.addBlock(targetFlavour as never, props, parent, index + 1); - - const totalTextLength = this.inlineEditor.yTextLength; - const inlineTextLength = this.targetInlineRange.length; - if (totalTextLength === inlineTextLength) { - doc.deleteBlock(block.model); - } else { - this.inlineEditor.formatText(this.targetInlineRange, { link: null }); - } - - this.abortController.abort(); - } - - private _convertToEmbedView() { - if (!this._embedOptions || this._embedOptions.viewType !== 'embed') { - return; - } - - const { flavour } = this._embedOptions; - const url = this.currentLink; - - const block = this.block; - if (!block) return; - const doc = block.doc; - const parent = doc.getParent(block.model); - if (!parent) return; - const index = parent.children.indexOf(block.model); - - doc.addBlock(flavour as never, { url }, parent, index + 1); - - const totalTextLength = this.inlineEditor.yTextLength; - const inlineTextLength = this.targetInlineRange.length; - if (totalTextLength === inlineTextLength) { - doc.deleteBlock(block.model); - } else { - this.inlineEditor.formatText(this.targetInlineRange, { link: null }); - } - - this.abortController.abort(); - } - - private _copyUrl() { - if (!this.currentLink) return; - navigator.clipboard.writeText(this.currentLink).catch(console.error); - if (!this.host) return; - toast(this.host, 'Copied link to clipboard'); - this.abortController.abort(); - - track(this.host.std, 'CopiedLink', { control: 'copy link' }); - } - - private _moreActions() { - return renderActions([ - [ - { - label: 'Open', - type: 'open', - icon: OpenIcon, - action: this._openLink, - }, - - { - label: 'Copy', - type: 'copy', - icon: CopyIcon, - action: this._copyUrl, - }, - - { - label: 'Remove link', - type: 'remove-link', - icon: UnlinkIcon, - action: this._removeLink, - }, - ], - - [ - { - type: 'delete', - label: 'Delete', - icon: DeleteIcon, - action: this._delete, - }, - ], - ]); - } - private _onConfirm() { if (!this.inlineEditor.isValidInlineRange(this.targetInlineRange)) return; if (!this.linkInput) return; @@ -442,10 +133,6 @@ export class LinkPopup extends WithDisposable(LitElement) { reference: null, }); this.inlineEditor.setInlineRange(this.targetInlineRange); - const textSelection = this.host?.selection.find(TextSelection); - if (!textSelection) return; - - this.std?.range.syncTextSelectionToRange(textSelection); } else if (this.type === 'edit') { const text = this.textInput?.value ?? link; this.inlineEditor.insertText(this.targetInlineRange, text, { @@ -456,10 +143,11 @@ export class LinkPopup extends WithDisposable(LitElement) { index: this.targetInlineRange.index, length: text.length, }); - const textSelection = this.host?.selection.find(TextSelection); - if (!textSelection) return; + } - this.std?.range.syncTextSelectionToRange(textSelection); + const textSelection = this.std.host.selection.find(TextSelection); + if (textSelection) { + this.std.range.syncTextSelectionToRange(textSelection); } this.abortController.abort(); @@ -467,9 +155,17 @@ export class LinkPopup extends WithDisposable(LitElement) { private _onKeydown(e: KeyboardEvent) { e.stopPropagation(); - if (e.key === 'Enter' && !e.isComposing) { - e.preventDefault(); - this._onConfirm(); + if (!e.isComposing) { + if (e.key === 'Escape') { + e.preventDefault(); + this.abortController.abort(); + this.std.host.selection.clear(); + return; + } + if (e.key === 'Enter') { + e.preventDefault(); + this._onConfirm(); + } } } @@ -484,70 +180,6 @@ export class LinkPopup extends WithDisposable(LitElement) { this.confirmButton.requestUpdate(); } - private _viewSelector() { - if (!this._isBookmarkAllowed) return nothing; - - const buttons = []; - - buttons.push({ - type: 'inline', - label: 'Inline view', - }); - - buttons.push({ - type: 'card', - label: 'Card view', - action: () => this._convertToCardView(), - }); - - if (this._canConvertToEmbedView) { - buttons.push({ - type: 'embed', - label: 'Embed view', - action: () => this._convertToEmbedView(), - }); - } - - return html` - -
Inline view
- ${ArrowDownSmallIcon()} - - `} - @toggle=${this._toggleViewSelector} - > -
- ${repeat( - buttons, - button => button.type, - ({ type, label, action }) => html` - { - action?.(); - this._trackViewSelected(type); - }} - > - ${label} - - ` - )} -
- - `; - } - override connectedCallback() { super.connectedCallback(); @@ -555,45 +187,38 @@ export class LinkPopup extends WithDisposable(LitElement) { return; } - if (this.type === 'edit' || this.type === 'create') { - // disable body scroll - this._bodyOverflowStyle = document.body.style.overflow; - document.body.style.overflow = 'hidden'; - this.disposables.add({ - dispose: () => { - document.body.style.overflow = this._bodyOverflowStyle; - }, - }); - } + // disable body scroll + this._bodyOverflowStyle = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + this.disposables.add({ + dispose: () => { + document.body.style.overflow = this._bodyOverflowStyle; + }, + }); } - protected override firstUpdated() { - if (!this.linkInput) return; + override firstUpdated() { + this.disposables.addFromEvent(this, 'keydown', this._onKeydown); - this._disposables.addFromEvent(this.linkInput, 'copy', stopPropagation); - this._disposables.addFromEvent(this.linkInput, 'cut', stopPropagation); - this._disposables.addFromEvent(this.linkInput, 'paste', stopPropagation); + this.disposables.addFromEvent(this, 'copy', stopPropagation); + this.disposables.addFromEvent(this, 'cut', stopPropagation); + this.disposables.addFromEvent(this, 'paste', stopPropagation); + + this.disposables.addFromEvent(this.overlayMask, 'click', e => { + e.stopPropagation(); + this.std.host.selection.setGroup('note', []); + this.abortController.abort(); + }); } override render() { return html`
- ${this.type === 'view' - ? nothing - : html` -
{ - this.abortController.abort(); - this.host?.selection.clear(); - }} - >
- `} -
+
+
${choose(this.type, [ ['create', this._createTemplate], ['edit', this._editTemplate], - ['view', this._viewTemplate], ])}
@@ -607,29 +232,29 @@ export class LinkPopup extends WithDisposable(LitElement) { return; } - if (this.type !== 'view') { - const domRects = range.getClientRects(); + const domRects = range.getClientRects(); - Object.values(domRects).forEach(domRect => { - if (!this.mockSelectionContainer) { - return; - } - const mockSelection = document.createElement('div'); - mockSelection.classList.add('mock-selection'); - mockSelection.style.left = `${domRect.left}px`; - mockSelection.style.top = `${domRect.top}px`; - mockSelection.style.width = `${domRect.width}px`; - mockSelection.style.height = `${domRect.height}px`; + Object.values(domRects).forEach(domRect => { + if (!this.mockSelectionContainer) { + return; + } + const mockSelection = document.createElement('div'); + mockSelection.classList.add('mock-selection'); + mockSelection.style.left = `${domRect.left}px`; + mockSelection.style.top = `${domRect.top}px`; + mockSelection.style.width = `${domRect.width}px`; + mockSelection.style.height = `${domRect.height}px`; - this.mockSelectionContainer.append(mockSelection); - }); - } + this.mockSelectionContainer.append(mockSelection); + }); const visualElement = { getBoundingClientRect: () => range.getBoundingClientRect(), getClientRects: () => range.getClientRects(), }; - computePosition(visualElement, this.popupContainer, { + const popover = this.popoverContainer; + + computePosition(visualElement, popover, { middleware: [ offset(10), inline(), @@ -639,10 +264,8 @@ export class LinkPopup extends WithDisposable(LitElement) { ], }) .then(({ x, y }) => { - const popupContainer = this.popupContainer; - if (!popupContainer) return; - popupContainer.style.left = `${x}px`; - popupContainer.style.top = `${y}px`; + popover.style.left = `${x}px`; + popover.style.top = `${y}px`; }) .catch(console.error); } @@ -662,11 +285,11 @@ export class LinkPopup extends WithDisposable(LitElement) { @query('.mock-selection-container') accessor mockSelectionContainer!: HTMLDivElement; - @property({ attribute: false }) - accessor openLink: ((e?: MouseEvent) => void) | null = null; + @query('.overlay-mask') + accessor overlayMask!: HTMLDivElement; - @query('.affine-link-popover-container') - accessor popupContainer!: HTMLDivElement; + @query('.popover-container') + accessor popoverContainer!: HTMLDivElement; @property({ attribute: false }) accessor targetInlineRange!: InlineRange; @@ -675,20 +298,8 @@ export class LinkPopup extends WithDisposable(LitElement) { accessor textInput: HTMLInputElement | null = null; @property() - accessor type: 'create' | 'edit' | 'view' = 'create'; -} + accessor type: 'create' | 'edit' = 'create'; -function track( - std: BlockStdScope, - event: LinkEventType, - props: Partial -) { - std.getOptional(TelemetryProvider)?.track(event, { - segment: 'toolbar', - page: 'doc editor', - module: 'link toolbar', - type: 'inline view', - category: 'link', - ...props, - }); + @property({ attribute: false }) + accessor std!: BlockStdScope; } diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/styles.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/styles.ts index 4c13bf89a0..e6af4d449e 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/styles.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/styles.ts @@ -99,7 +99,7 @@ export const linkPopupStyle = css` background-color: rgba(35, 131, 226, 0.28); } - .affine-link-popover-container { + .popover-container { z-index: var(--affine-z-index-popover); animation: affine-popover-fade-in 0.2s ease; position: absolute; @@ -116,7 +116,7 @@ export const linkPopupStyle = css` } } - .affine-link-popover-overlay-mask { + .overlay-mask { position: fixed; top: 0; left: 0; @@ -125,39 +125,6 @@ export const linkPopupStyle = css` z-index: var(--affine-z-index-popover); } - .affine-link-preview { - display: flex; - justify-content: flex-start; - min-width: 60px; - max-width: 140px; - padding: var(--1, 0px); - border-radius: var(--1, 0px); - opacity: var(--add, 1); - user-select: none; - cursor: pointer; - - color: var(--affine-link-color); - font-feature-settings: - 'clig' off, - 'liga' off; - font-family: var(--affine-font-family); - font-size: var(--affine-font-sm); - font-style: normal; - font-weight: 400; - text-decoration: none; - text-wrap: nowrap; - } - - .affine-link-preview > span { - display: inline-block; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - - text-overflow: ellipsis; - overflow: hidden; - opacity: var(--add, 1); - } - .affine-link-popover.create { ${PANEL_BASE}; gap: 12px; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/toggle-link-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/toggle-link-popup.ts index 8ef9186b96..3d7e3a00da 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/toggle-link-popup.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/toggle-link-popup.ts @@ -1,20 +1,21 @@ +import type { BlockStdScope } from '@blocksuite/block-std'; import type { InlineRange } from '@blocksuite/inline'; -import type { AffineInlineEditor } from '../../../affine-inline-specs.js'; -import { LinkPopup } from './link-popup.js'; +import type { AffineInlineEditor } from '../../../affine-inline-specs'; +import { LinkPopup } from './link-popup'; export function toggleLinkPopup( - inlineEditor: AffineInlineEditor, + std: BlockStdScope, type: LinkPopup['type'], + inlineEditor: AffineInlineEditor, targetInlineRange: InlineRange, - abortController: AbortController, - openLink: ((e?: MouseEvent) => void) | null = null + abortController: AbortController ): LinkPopup { const popup = new LinkPopup(); - popup.inlineEditor = inlineEditor; + popup.std = std; popup.type = type; + popup.inlineEditor = inlineEditor; popup.targetInlineRange = targetInlineRange; - popup.openLink = openLink; popup.abortController = abortController; document.body.append(popup); diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/configs/toolbar.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/configs/toolbar.ts new file mode 100644 index 0000000000..1ccb11cfeb --- /dev/null +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/configs/toolbar.ts @@ -0,0 +1,241 @@ +import { + ActionPlacement, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { + cloneReferenceInfoWithoutAliases, + isInsideBlockByFlavour, +} from '@blocksuite/affine-shared/utils'; +import { BlockSelection } from '@blocksuite/block-std'; +import { DeleteIcon } from '@blocksuite/icons/lit'; +import { signal } from '@preact/signals-core'; +import { html } from 'lit-html'; +import { keyed } from 'lit-html/directives/keyed.js'; + +import { notifyLinkedDocSwitchedToEmbed } from '../../../../../../notification'; +import { AffineReference } from '../reference-node'; + +const trackBaseProps = { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'inline view', +}; + +export const builtinInlineReferenceToolbarConfig = { + actions: [ + { + id: 'a.doc-title', + content(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return null; + if (!target.referenceInfo.title) return null; + + return html` target.open({ event })} + >`; + }, + }, + { + id: 'c.conversions', + actions: [ + { + id: 'inline', + label: 'Inline view', + disabled: true, + }, + { + id: 'card', + label: 'Card view', + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return; + if (!target.block) return; + + const { + block: { model }, + referenceInfo, + inlineEditor, + selfInlineRange, + } = target; + const { parent } = model; + + if (!inlineEditor || !selfInlineRange || !parent) return; + + // Clears + ctx.reset(); + + const index = parent.children.indexOf(model); + + const blockId = ctx.store.addBlock( + 'affine:embed-linked-doc', + referenceInfo, + parent, + index + 1 + ); + + const totalTextLength = inlineEditor.yTextLength; + const inlineTextLength = selfInlineRange.length; + if (totalTextLength === inlineTextLength) { + ctx.store.deleteBlock(model); + } else { + inlineEditor.insertText(selfInlineRange, target.docTitle); + } + + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'card view', + }); + }, + }, + { + id: 'embed', + label: 'Embed view', + disabled(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return true; + if (!target.block) return true; + + if ( + isInsideBlockByFlavour( + ctx.store, + target.block.model, + 'affine:edgeless-text' + ) + ) + return true; + + // nesting is not supported + if (target.closest('affine-embed-synced-doc-block')) return true; + + // same doc + if (target.referenceInfo.pageId === ctx.store.id) return true; + + // linking to block + if (target.referenceToNode()) return true; + + return false; + }, + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return; + if (!target.block) return; + + const { + block: { model }, + referenceInfo, + inlineEditor, + selfInlineRange, + } = target; + const { parent } = model; + + if (!inlineEditor || !selfInlineRange || !parent) return; + + // Clears + ctx.reset(); + + const index = parent.children.indexOf(model); + + const blockId = ctx.store.addBlock( + 'affine:embed-synced-doc', + cloneReferenceInfoWithoutAliases(referenceInfo), + parent, + index + 1 + ); + + const totalTextLength = inlineEditor.yTextLength; + const inlineTextLength = selfInlineRange.length; + if (totalTextLength === inlineTextLength) { + ctx.store.deleteBlock(model); + } else { + inlineEditor.insertText(selfInlineRange, target.docTitle); + } + + const hasTitleAlias = Boolean(referenceInfo.title); + + if (hasTitleAlias) { + notifyLinkedDocSwitchedToEmbed(ctx.std); + } + + ctx.select('note', [ + ctx.selection.create(BlockSelection, { blockId }), + ]); + + ctx.track('SelectedView', { + ...trackBaseProps, + control: 'select view', + type: 'embed view', + }); + }, + }, + ], + content(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return null; + + const actions = this.actions.map(action => ({ ...action })); + const viewType$ = signal(actions[0].label); + const toggle = (e: CustomEvent) => { + const opened = e.detail; + if (!opened) return; + + ctx.track('OpenedViewSelector', { + ...trackBaseProps, + control: 'switch view', + }); + }; + + return html`${keyed( + target, + html`` + )}`; + }, + when(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return false; + if (!target.block) return false; + + if (ctx.flags.isNative()) return false; + if ( + target.block.closest('affine-database') || + target.block.closest('affine-table') + ) + return false; + + return true; + }, + } satisfies ToolbarActionGroup, + { + placement: ActionPlacement.More, + id: 'c.delete', + label: 'Delete', + icon: DeleteIcon(), + variant: 'destructive', + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return; + + const { inlineEditor, selfInlineRange } = target; + if (!inlineEditor || !selfInlineRange) return; + + if (!inlineEditor.isValidInlineRange(selfInlineRange)) return; + + inlineEditor.deleteText(selfInlineRange); + }, + }, + ], +} as const satisfies ToolbarModuleConfig; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/index.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/index.ts new file mode 100644 index 0000000000..75f2c9d3eb --- /dev/null +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/index.ts @@ -0,0 +1,4 @@ +export * from './reference-config'; +export { AffineReference } from './reference-node'; +export { toggleReferencePopup } from './reference-popup/toggle-reference-popup'; +export type { DocLinkClickedEvent, RefNodeSlots } from './types'; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-config.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-config.ts index 400ab764cd..6553b17cf9 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-config.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-config.ts @@ -3,7 +3,7 @@ import { createIdentifier } from '@blocksuite/global/di'; import type { ExtensionType } from '@blocksuite/store'; import type { TemplateResult } from 'lit'; -import type { AffineReference } from './reference-node.js'; +import type { AffineReference } from './reference-node'; export interface ReferenceNodeConfig { customContent?: (reference: AffineReference) => TemplateResult; diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts index 5aad9b60c0..afc7f19e05 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts @@ -3,20 +3,17 @@ import { DEFAULT_DOC_NAME, REFERENCE_NODE, } from '@blocksuite/affine-shared/consts'; -import { DocDisplayMetaProvider } from '@blocksuite/affine-shared/services'; +import { + DocDisplayMetaProvider, + ToolbarRegistryIdentifier, +} from '@blocksuite/affine-shared/services'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; import { cloneReferenceInfo, referenceToNode, } from '@blocksuite/affine-shared/utils'; -import { - BLOCK_ID_ATTR, - type BlockComponent, - BlockSelection, - type BlockStdScope, - ShadowlessElement, - TextSelection, -} from '@blocksuite/block-std'; +import type { BlockComponent, BlockStdScope } from '@blocksuite/block-std'; +import { BLOCK_ID_ATTR, ShadowlessElement } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/utils'; import { LinkedPageIcon } from '@blocksuite/icons/lit'; import { @@ -31,15 +28,14 @@ import { css, html, nothing } from 'lit'; import { property, state } from 'lit/decorators.js'; import { choose } from 'lit/directives/choose.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { ref } from 'lit/directives/ref.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { HoverController } from '../../../../../hover/index.js'; -import { Peekable } from '../../../../../peek/index.js'; -import { RefNodeSlotsProvider } from '../../../../extension/index.js'; -import { affineTextStyles } from '../affine-text.js'; -import type { ReferenceNodeConfigProvider } from './reference-config.js'; -import { toggleReferencePopup } from './reference-popup.js'; +import { whenHover } from '../../../../../hover/index'; +import { Peekable } from '../../../../../peek/index'; +import { RefNodeSlotsProvider } from '../../../../extension/index'; +import { affineTextStyles } from '../affine-text'; +import type { ReferenceNodeConfigProvider } from './reference-config'; +import type { DocLinkClickedEvent } from './types'; @Peekable({ action: false }) export class AffineReference extends WithDisposable(ShadowlessElement) { @@ -73,6 +69,10 @@ export class AffineReference extends WithDisposable(ShadowlessElement) { } `; + get docTitle() { + return this.refMeta?.title ?? DEFAULT_DOC_NAME; + } + private readonly _updateRefMeta = (doc: Store) => { const refAttribute = this.delta.attributes?.reference; if (!refAttribute) { @@ -93,48 +93,6 @@ export class AffineReference extends WithDisposable(ShadowlessElement) { @state() accessor refMeta: DocMeta | undefined = undefined; - private readonly _whenHover: HoverController = new HoverController( - this, - ({ abortController }) => { - if ( - this.config.hidePopup || - this.doc?.readonly || - this.closest('.prevent-reference-popup') || - !this.selfInlineRange || - !this.inlineEditor - ) { - return null; - } - - const selection = this.std.selection; - if (!selection) { - return null; - } - const textSelection = selection.find(TextSelection); - if (!!textSelection && !textSelection.isCollapsed()) { - return null; - } - - const blockSelections = selection.filter(BlockSelection); - if (blockSelections.length) { - return null; - } - - return { - template: toggleReferencePopup( - this, - this.referenceToNode(), - this.referenceInfo, - this.inlineEditor, - this.selfInlineRange, - this.refMeta?.title ?? DEFAULT_DOC_NAME, - abortController - ), - }; - }, - { enterDelay: 500 } - ); - get _icon() { const { pageId, params, title } = this.referenceInfo; return this.std @@ -187,17 +145,52 @@ export class AffineReference extends WithDisposable(ShadowlessElement) { return selfInlineRange; } - private _onClick() { + readonly open = (event?: Partial) => { if (!this.config.interactable) return; + this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({ ...this.referenceInfo, + ...event, host: this.std.host, }); - } + }; + + _whenHover = whenHover( + hovered => { + if (!this.config.interactable) return; + + const message$ = this.std.get(ToolbarRegistryIdentifier).message$; + + if (hovered) { + message$.value = { + flavour: 'affine:reference', + element: this, + setFloating: this._whenHover.setFloating, + }; + return; + } + + // Clears previous bindings + message$.value = null; + this._whenHover.setFloating(); + }, + { enterDelay: 500 } + ); override connectedCallback() { super.connectedCallback(); + this._whenHover.setReference(this); + + const message$ = this.std.get(ToolbarRegistryIdentifier).message$; + + this._disposables.add(() => { + if (message$?.value) { + message$.value = null; + } + this._whenHover.dispose(); + }); + if (!this.config) { console.error('`reference-node` need `ReferenceNodeConfig`.'); return; @@ -281,11 +274,10 @@ export class AffineReference extends WithDisposable(ShadowlessElement) { // we need to add `` in an // embed element to make sure inline range calculation is correct return html` this.open({ event })} >${content}`; } diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts deleted file mode 100644 index cc28695e1a..0000000000 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts +++ /dev/null @@ -1,607 +0,0 @@ -import type { ReferenceInfo } from '@blocksuite/affine-model'; -import { - GenerateDocUrlProvider, - type LinkEventType, - OpenDocExtensionIdentifier, - type OpenDocMode, - type TelemetryEvent, - TelemetryProvider, -} from '@blocksuite/affine-shared/services'; -import { - cloneReferenceInfoWithoutAliases, - isInsideBlockByFlavour, -} from '@blocksuite/affine-shared/utils'; -import { - BLOCK_ID_ATTR, - type BlockComponent, - type BlockStdScope, -} from '@blocksuite/block-std'; -import { WithDisposable } from '@blocksuite/global/utils'; -import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit'; -import type { InlineRange } from '@blocksuite/inline'; -import { computePosition, inline, offset, shift } from '@floating-ui/dom'; -import { effect } from '@preact/signals-core'; -import { html, LitElement, nothing } from 'lit'; -import { property, query } from 'lit/decorators.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { join } from 'lit/directives/join.js'; -import { repeat } from 'lit/directives/repeat.js'; - -import { - CopyIcon, - DeleteIcon, - EditIcon, - OpenIcon, -} from '../../../../../icons/index.js'; -import { notifyLinkedDocSwitchedToEmbed } from '../../../../../notification/index.js'; -import { isPeekable, peek } from '../../../../../peek/index.js'; -import { toast } from '../../../../../toast/toast.js'; -import { - type MenuItem, - renderActions, - renderToolbarSeparator, -} from '../../../../../toolbar/index.js'; -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; - - private readonly _copyLink = () => { - if (!this.std) { - console.error('`std` is not found'); - return; - } - const url = this.std - .getOptional(GenerateDocUrlProvider) - ?.generateDocUrl(this.referenceInfo.pageId, this.referenceInfo.params); - - if (url) { - navigator.clipboard.writeText(url).catch(console.error); - toast(this.std.host, 'Copied link to clipboard'); - } - - this.abortController.abort(); - - track(this.std, 'CopiedLink', { control: 'copy link' }); - }; - - private readonly _openDoc = (event?: Partial) => { - if (!this.std) { - console.error('`std` is not found'); - return; - } - this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({ - ...this.referenceInfo, - ...event, - host: this.std.host, - }); - }; - - private readonly _openEditPopup = (e: MouseEvent) => { - e.stopPropagation(); - - if (document.body.querySelector('reference-alias-popup')) { - return; - } - - const { - std, - docTitle, - referenceInfo, - inlineEditor, - targetInlineRange, - abortController, - } = this; - - if (!std) { - console.error('`std` is not found'); - return; - } - - const aliasPopup = new ReferenceAliasPopup(); - - aliasPopup.std = std; - aliasPopup.docTitle = docTitle; - aliasPopup.referenceInfo = referenceInfo; - aliasPopup.inlineEditor = inlineEditor; - aliasPopup.inlineRange = targetInlineRange; - - document.body.append(aliasPopup); - - abortController.abort(); - - track(std, 'OpenedAliasPopup', { control: 'edit' }); - }; - - private readonly _toggleViewSelector = (e: Event) => { - if (!this.std) { - console.error('`std` is not found'); - return; - } - const opened = (e as CustomEvent).detail; - if (!opened) return; - - track(this.std, 'OpenedViewSelector', { control: 'switch view' }); - }; - - private readonly _trackViewSelected = (type: string) => { - if (!this.std) { - console.error('`std` is not found'); - return; - } - track(this.std, 'SelectedView', { - control: 'select view', - type: `${type} view`, - }); - }; - - get _embedViewButtonDisabled() { - if (!this.block) { - console.error('`block` is not found'); - return true; - } - - if ( - this.block.doc.readonly || - isInsideBlockByFlavour( - this.block.doc, - this.block.model, - 'affine:edgeless-text' - ) - ) { - return true; - } - return ( - !!this.block.closest('affine-embed-synced-doc-block') || - this.referenceDocId === this.block.doc.id - ); - } - - _openButtonDisabled(openMode?: OpenDocMode) { - if (openMode === 'open-in-active-view') { - return this.referenceDocId === this.doc?.id; - } - return false; - } - - get block() { - const block = this.inlineEditor.rootElement?.closest( - `[${BLOCK_ID_ATTR}]` - ); - return block; - } - - get doc() { - const doc = this.block?.doc; - return doc; - } - - get referenceDocId() { - const docId = this.inlineEditor.getFormat(this.targetInlineRange).reference - ?.pageId; - return docId; - } - - get std() { - const std = this.block?.std; - return std; - } - - private _convertToCardView() { - const block = this.block; - if (!block) return; - - const doc = block.host.doc; - const parent = doc.getParent(block.model); - if (!parent) return; - - const index = parent.children.indexOf(block.model); - - doc.addBlock( - 'affine:embed-linked-doc', - this.referenceInfo, - parent, - index + 1 - ); - - const totalTextLength = this.inlineEditor.yTextLength; - const inlineTextLength = this.targetInlineRange.length; - if (totalTextLength === inlineTextLength) { - doc.deleteBlock(block.model); - } else { - this.inlineEditor.insertText(this.targetInlineRange, this.docTitle); - } - - this.abortController.abort(); - } - - private _convertToEmbedView() { - const block = this.block; - const std = block?.std; - if (!std || !block) { - console.error('`std` or `block` is not found'); - return; - } - const doc = block.host.doc; - const parent = doc.getParent(block.model); - if (!parent) { - console.error('`parent` is not found'); - return; - } - - const index = parent.children.indexOf(block.model); - const referenceInfo = this.referenceInfo; - const hasTitleAlias = Boolean(referenceInfo.title); - - doc.addBlock( - 'affine:embed-synced-doc', - cloneReferenceInfoWithoutAliases(referenceInfo), - parent, - index + 1 - ); - - const totalTextLength = this.inlineEditor.yTextLength; - const inlineTextLength = this.targetInlineRange.length; - if (totalTextLength === inlineTextLength) { - doc.deleteBlock(block.model); - } else { - this.inlineEditor.insertText(this.targetInlineRange, this.docTitle); - } - - if (hasTitleAlias) { - notifyLinkedDocSwitchedToEmbed(std); - } - - this.abortController.abort(); - } - - private _delete() { - if (this.inlineEditor.isValidInlineRange(this.targetInlineRange)) { - this.inlineEditor.deleteText(this.targetInlineRange); - } - this.abortController.abort(); - } - - private _moreActions() { - return renderActions([ - [ - { - type: 'delete', - label: 'Delete', - icon: DeleteIcon, - disabled: this.doc?.readonly, - action: () => this._delete(), - }, - ], - ]); - } - - private _openMenuButton() { - if (!this.std) { - console.error('`std` is not found'); - return nothing; - } - const openDocConfig = this.std.get(OpenDocExtensionIdentifier); - - 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; - } - - return html` - - ${OpenIcon} ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} - - `} - > -
- ${repeat( - buttons, - button => button.label, - ({ label, icon, action, disabled }) => html` - - ${icon}${label} - - ` - )} -
- - `; - } - - private _viewSelector() { - const buttons = []; - - buttons.push({ - type: 'inline', - label: 'Inline view', - }); - - buttons.push({ - type: 'card', - label: 'Card view', - action: () => this._convertToCardView(), - disabled: this.doc?.readonly, - }); - - buttons.push({ - type: 'embed', - label: 'Embed view', - action: () => this._convertToEmbedView(), - disabled: - this.doc?.readonly || - this.isLinkedNode || - this._embedViewButtonDisabled, - }); - - return html` - - Inline view - ${ArrowDownSmallIcon({ width: '16px', height: '16px' })} - - `} - @toggle=${this._toggleViewSelector} - > -
- ${repeat( - buttons, - button => button.type, - ({ type, label, action, disabled }) => html` - { - action?.(); - this._trackViewSelected(type); - }} - > - ${label} - - ` - )} -
- - `; - } - - override connectedCallback() { - super.connectedCallback(); - - if (this.targetInlineRange.length === 0) { - return; - } - - if (!this.block) return; - - const parent = this.block.host.doc.getParent(this.block.model); - if (!parent) return; - - this.disposables.add( - effect(() => { - if (!this.block) return; - const children = parent.children; - if (children.includes(this.block.model)) return; - this.abortController.abort(); - }) - ); - } - - override render() { - const titleButton = this.referenceInfo.title - ? html` - - ${this.docTitle} - - ` - : nothing; - - const buttons = [ - this._openMenuButton(), - - html` - ${titleButton} - - - ${CopyIcon} - - - - ${EditIcon} - - `, - - this._viewSelector(), - - html` - - ${MoreVerticalIcon()} - - `} - > -
- ${this._moreActions()} -
- - `, - ]; - - return html` -
-
- - ${join( - buttons.filter(button => button !== nothing), - renderToolbarSeparator - )} - -
-
- `; - } - - override updated() { - const range = this.inlineEditor.toDomRange(this.targetInlineRange); - if (!range) return; - const visualElement = { - getBoundingClientRect: () => range.getBoundingClientRect(), - getClientRects: () => range.getClientRects(), - }; - computePosition(visualElement, this.popupContainer, { - middleware: [ - offset(10), - inline(), - shift({ - padding: 6, - }), - ], - }) - .then(({ x, y }) => { - const popupContainer = this.popupContainer; - if (!popupContainer) return; - popupContainer.style.left = `${x}px`; - popupContainer.style.top = `${y}px`; - }) - .catch(console.error); - } - - @property({ attribute: false }) - accessor abortController!: AbortController; - - @property({ attribute: false }) - accessor docTitle!: string; - - @property({ attribute: false }) - accessor inlineEditor!: AffineInlineEditor; - - @property({ attribute: false }) - accessor isLinkedNode!: boolean; - - @query('.affine-reference-popover-container') - accessor popupContainer!: HTMLDivElement; - - @property({ type: Object }) - accessor referenceInfo!: ReferenceInfo; - - @property({ attribute: false }) - accessor target!: LitElement; - - @property({ attribute: false }) - accessor targetInlineRange!: InlineRange; -} - -export function toggleReferencePopup( - target: LitElement, - isLinkedNode: boolean, - referenceInfo: ReferenceInfo, - inlineEditor: AffineInlineEditor, - targetInlineRange: InlineRange, - docTitle: string, - abortController: AbortController -): ReferencePopup { - const popup = new ReferencePopup(); - popup.target = target; - popup.isLinkedNode = isLinkedNode; - popup.referenceInfo = referenceInfo; - popup.inlineEditor = inlineEditor; - popup.targetInlineRange = targetInlineRange; - popup.docTitle = docTitle; - popup.abortController = abortController; - - document.body.append(popup); - - return popup; -} - -function track( - std: BlockStdScope, - event: LinkEventType, - props: Partial -) { - std.getOptional(TelemetryProvider)?.track(event, { - segment: 'toolbar', - page: 'doc editor', - module: 'reference toolbar', - type: 'inline view', - category: 'linked doc', - ...props, - }); -} diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-alias-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup/reference-popup.ts similarity index 86% rename from blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-alias-popup.ts rename to blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup/reference-popup.ts index a55332f9b6..7ec0ebda76 100644 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-alias-popup.ts +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup/reference-popup.ts @@ -7,20 +7,21 @@ import { } from '@blocksuite/affine-shared/services'; import { FONT_XS, PANEL_BASE } from '@blocksuite/affine-shared/styles'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; +import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { type BlockStdScope, ShadowlessElement } from '@blocksuite/block-std'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { DoneIcon, ResetIcon } from '@blocksuite/icons/lit'; -import type { DeltaInsert, InlineRange } from '@blocksuite/inline'; +import type { InlineRange } from '@blocksuite/inline'; import { computePosition, inline, offset, shift } from '@floating-ui/dom'; import { signal } from '@preact/signals-core'; import { css, html } from 'lit'; import { property, query } from 'lit/decorators.js'; import { live } from 'lit/directives/live.js'; -import type { EditorIconButton } from '../../../../../toolbar/index.js'; -import type { AffineInlineEditor } from '../../affine-inline-specs.js'; +import type { EditorIconButton } from '../../../../../../toolbar/index'; +import type { AffineInlineEditor } from '../../../affine-inline-specs'; -export class ReferenceAliasPopup extends SignalWatcher( +export class ReferencePopup extends SignalWatcher( WithDisposable(ShadowlessElement) ) { static override styles = css` @@ -37,7 +38,7 @@ export class ReferenceAliasPopup extends SignalWatcher( height: 100vh; } - .alias-form-popup { + .popover-container { ${PANEL_BASE}; position: absolute; display: flex; @@ -159,11 +160,16 @@ export class ReferenceAliasPopup extends SignalWatcher( } override firstUpdated() { + this.disposables.addFromEvent(this, 'keydown', this._onKeydown); + + this.disposables.addFromEvent(this, 'copy', stopPropagation); + this.disposables.addFromEvent(this, 'cut', stopPropagation); + this.disposables.addFromEvent(this, 'paste', stopPropagation); + this.disposables.addFromEvent(this.overlayMask, 'click', e => { e.stopPropagation(); this.remove(); }); - this.disposables.addFromEvent(this, 'keydown', this._onKeydown); this.inputElement.focus(); this.inputElement.select(); @@ -173,7 +179,7 @@ export class ReferenceAliasPopup extends SignalWatcher( return html`
-
+
range.getBoundingClientRect(), getClientRects: () => range.getClientRects(), }; - computePosition(visualElement, this.popupContainer, { + const popover = this.popoverContainer; + + computePosition(visualElement, popover, { middleware: [ offset(10), inline(), @@ -225,16 +231,14 @@ export class ReferenceAliasPopup extends SignalWatcher( ], }) .then(({ x, y }) => { - const popupContainer = this.popupContainer; - if (!popupContainer) return; - popupContainer.style.left = `${x}px`; - popupContainer.style.top = `${y}px`; + popover.style.left = `${x}px`; + popover.style.top = `${y}px`; }) .catch(console.error); } - @property({ type: Object }) - accessor delta!: DeltaInsert; + @property({ attribute: false }) + accessor abortController!: AbortController; @property({ attribute: false }) accessor docTitle!: string; @@ -251,8 +255,8 @@ export class ReferenceAliasPopup extends SignalWatcher( @query('.overlay-mask') accessor overlayMask!: HTMLDivElement; - @query('.alias-form-popup') - accessor popupContainer!: HTMLDivElement; + @query('.popover-container') + accessor popoverContainer!: HTMLDivElement; @property({ type: Object }) accessor referenceInfo!: ReferenceInfo; @@ -272,11 +276,11 @@ function track( props: Partial ) { std.getOptional(TelemetryProvider)?.track(event, { - segment: 'toolbar', + segment: 'doc', page: 'doc editor', - module: 'reference edit popup', - type: 'inline view', + module: 'toolbar', category: 'linked doc', + type: 'inline view', ...props, }); } diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup/toggle-reference-popup.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup/toggle-reference-popup.ts new file mode 100644 index 0000000000..e9bb8b514c --- /dev/null +++ b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup/toggle-reference-popup.ts @@ -0,0 +1,27 @@ +import type { ReferenceInfo } from '@blocksuite/affine-model'; +import type { BlockStdScope } from '@blocksuite/block-std'; +import type { InlineRange } from '@blocksuite/inline'; + +import type { AffineInlineEditor } from '../../../affine-inline-specs'; +import { ReferencePopup } from './reference-popup'; + +export function toggleReferencePopup( + std: BlockStdScope, + docTitle: string, + referenceInfo: ReferenceInfo, + inlineEditor: AffineInlineEditor, + inlineRange: InlineRange, + abortController: AbortController +): ReferencePopup { + const popup = new ReferencePopup(); + popup.std = std; + popup.docTitle = docTitle; + popup.referenceInfo = referenceInfo; + popup.inlineEditor = inlineEditor; + popup.inlineRange = inlineRange; + popup.abortController = abortController; + + document.body.append(popup); + + return popup; +} diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/styles.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/styles.ts deleted file mode 100644 index 0079ee412f..0000000000 --- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/styles.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { css } from 'lit'; - -export const styles = css` - :host { - box-sizing: border-box; - } - - .affine-reference-popover-container { - z-index: var(--affine-z-index-popover); - animation: affine-popover-fade-in 0.2s ease; - position: absolute; - } - - @keyframes affine-popover-fade-in { - from { - opacity: 0; - transform: translateY(-3px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - editor-icon-button.doc-title .label { - max-width: 110px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - user-select: none; - cursor: pointer; - color: var(--affine-link-color); - font-feature-settings: - 'clig' off, - 'liga' off; - font-family: var(--affine-font-family); - font-size: var(--affine-font-sm); - font-style: normal; - font-weight: 400; - text-decoration: none; - text-wrap: nowrap; - } -`; diff --git a/blocksuite/affine/components/src/toolbar/icon-button.ts b/blocksuite/affine/components/src/toolbar/icon-button.ts index c020f8d8ef..de8432fde0 100644 --- a/blocksuite/affine/components/src/toolbar/icon-button.ts +++ b/blocksuite/affine/components/src/toolbar/icon-button.ts @@ -25,6 +25,7 @@ export class EditorIconButton extends LitElement { white-space: nowrap; box-sizing: border-box; width: var(--icon-container-width, unset); + height: var(--icon-container-height, unset); justify-content: var(--justify, unset); user-select: none; } @@ -33,6 +34,10 @@ export class EditorIconButton extends LitElement { color: var(--affine-primary-color); } + :host([active]) .icon-container.active-mode-border { + border: 1px solid var(--affine-brand-color); + } + :host([active]) .icon-container.active-mode-background { background: var(--affine-hover-color); } @@ -44,8 +49,7 @@ export class EditorIconButton extends LitElement { ::slotted(svg) { flex-shrink: 0; - width: var(--icon-size, unset); - height: var(--icon-size, unset); + font-size: var(--icon-size, 20px); } ::slotted(.label) { @@ -116,6 +120,7 @@ export class EditorIconButton extends LitElement { const padding = this.iconContainerPadding; const iconContainerStyles = styleMap({ '--icon-container-width': this.iconContainerWidth, + '--icon-container-height': this.iconContainerHeight, '--icon-container-padding': Array.isArray(padding) ? padding.map(v => `${v}px`).join(' ') : `${padding}px`, @@ -156,7 +161,7 @@ export class EditorIconButton extends LitElement { accessor active = false; @property({ attribute: false }) - accessor activeMode: 'color' | 'background' = 'color'; + accessor activeMode: 'color' | 'border' | 'background' = 'color'; @property({ attribute: false }) accessor arrow = true; @@ -179,6 +184,9 @@ export class EditorIconButton extends LitElement { @property({ attribute: false }) accessor iconContainerWidth: string | undefined = undefined; + @property({ attribute: false }) + accessor iconContainerHeight: string | undefined = undefined; + @property({ attribute: false }) accessor iconSize: string | undefined = undefined; diff --git a/blocksuite/affine/components/src/toolbar/menu-button.ts b/blocksuite/affine/components/src/toolbar/menu-button.ts index 4edb3c369f..ffc0b286b9 100644 --- a/blocksuite/affine/components/src/toolbar/menu-button.ts +++ b/blocksuite/affine/components/src/toolbar/menu-button.ts @@ -44,6 +44,7 @@ export class EditorMenuButton extends WithDisposable(LitElement) { { mainAxis: 12, ignoreShift: true, + offsetHeight: 6 * 4, } ); this._disposables.addFromEvent(this, 'keydown', (e: KeyboardEvent) => { @@ -54,9 +55,6 @@ export class EditorMenuButton extends WithDisposable(LitElement) { }); this._disposables.addFromEvent(this._trigger, 'click', (_: MouseEvent) => { this._popper.toggle(); - if (this._popper.state === 'show') { - this._content.focus({ preventScroll: true }); - } }); this._disposables.add(this._popper); } @@ -91,7 +89,7 @@ export class EditorMenuButton extends WithDisposable(LitElement) { private accessor _trigger!: EditorIconButton; @property({ attribute: false }) - accessor button!: string | TemplateResult<1>; + accessor button!: TemplateResult; @property({ attribute: false }) accessor contentPadding: string | undefined = undefined; @@ -104,6 +102,7 @@ export class EditorMenuContent extends LitElement { --offset-height: calc(-1 * var(--packed-height)); display: none; outline: none; + overscroll-behavior: contain; } :host::before, @@ -154,6 +153,7 @@ export class EditorMenuContent extends LitElement { align-items: stretch; gap: unset; min-height: unset; + overflow-y: auto; } `; @@ -206,6 +206,13 @@ export class EditorMenuAction extends LitElement { color: var(--affine-icon-color); font-size: 20px; } + + ::slotted(.label) { + color: inherit !important; + } + ::slotted(.label.capitalize) { + text-transform: capitalize !important; + } `; override connectedCallback() { diff --git a/blocksuite/affine/components/src/toolbar/utils.ts b/blocksuite/affine/components/src/toolbar/utils.ts index 3f0e1cb0ea..ff61a2d2ef 100644 --- a/blocksuite/affine/components/src/toolbar/utils.ts +++ b/blocksuite/affine/components/src/toolbar/utils.ts @@ -106,8 +106,10 @@ export function renderGroups(groups: MenuItemGroup[], context: T) { return renderActions(groupsToActions(groups, context)); } -export function renderToolbarSeparator() { - return html``; +export function renderToolbarSeparator(orientation?: 'horizontal') { + return html``; } export function getMoreMenuConfig(std: BlockStdScope): ToolbarMoreMenuConfig { diff --git a/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts new file mode 100644 index 0000000000..cd06957713 --- /dev/null +++ b/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts @@ -0,0 +1,92 @@ +import { + type ToolbarAction, + ToolbarContext, +} from '@blocksuite/affine-shared/services'; +import { + PropTypes, + requiredProperties, + ShadowlessElement, +} from '@blocksuite/block-std'; +import { SignalWatcher } from '@blocksuite/global/utils'; +import { ArrowDownSmallIcon } from '@blocksuite/icons/lit'; +import type { ReadonlySignal, Signal } from '@preact/signals-core'; +import { property } from 'lit/decorators.js'; +import { html } from 'lit-html'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; +import { repeat } from 'lit-html/directives/repeat.js'; + +@requiredProperties({ + actions: PropTypes.array, + context: PropTypes.instanceOf(ToolbarContext), + viewType$: PropTypes.object, +}) +export class ViewDropdownMenu extends SignalWatcher(ShadowlessElement) { + @property({ attribute: false }) + accessor actions!: ToolbarAction[]; + + @property({ attribute: false }) + accessor context!: ToolbarContext; + + @property({ attribute: false }) + accessor viewType$!: Signal | ReadonlySignal; + + @property({ attribute: false }) + accessor toggle: ((e: CustomEvent) => void) | undefined; + + override render() { + const { + actions, + context, + toggle, + viewType$: { value: viewType }, + } = this; + + return html` + + ${viewType} + ${ArrowDownSmallIcon()} + + `} + > +
+ ${repeat( + actions.filter(action => { + if (typeof action.when === 'function') + return action.when(context); + return action.when ?? true; + }), + action => action.id, + ({ id, label, disabled, run }) => html` + run?.(context)} + > + ${label} + + ` + )} +
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'affine-view-dropdown-menu': ViewDropdownMenu; + } +} diff --git a/blocksuite/affine/components/src/view-dropdown-menu/index.ts b/blocksuite/affine/components/src/view-dropdown-menu/index.ts new file mode 100644 index 0000000000..d72330db20 --- /dev/null +++ b/blocksuite/affine/components/src/view-dropdown-menu/index.ts @@ -0,0 +1,7 @@ +import { ViewDropdownMenu } from './dropdown-menu'; + +export * from './dropdown-menu'; + +export function effects() { + customElements.define('affine-view-dropdown-menu', ViewDropdownMenu); +} diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/cell.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/cell.ts index 97f548c97f..fb4c497df4 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc/cell.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc/cell.ts @@ -16,6 +16,7 @@ import { type TableViewSelectionWithType, } from '../selection'; import type { TableColumn } from '../table-view-manager.js'; +import type { TableGroup } from './group.js'; export class DatabaseCellContainer extends SignalWatcher( WithDisposable(ShadowlessElement) @@ -85,7 +86,7 @@ export class DatabaseCellContainer extends SignalWatcher( } private get groupKey() { - return this.closest('affine-data-view-table-group')?.group?.key; + return this.closest('affine-data-view-table-group')?.group?.key; } private get readonly() { diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/controller/selection.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/controller/selection.ts index d6b0ed9435..ff5a012a17 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc/controller/selection.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc/controller/selection.ts @@ -19,6 +19,7 @@ import { type TableViewSelectionWithType, } from '../../selection'; import type { DatabaseCellContainer } from '../cell.js'; +import type { TableGroup } from '../group.js'; import type { TableRow } from '../row/row.js'; import type { DataViewTable } from '../table-view.js'; import { @@ -812,7 +813,8 @@ export class TableSelectionController implements ReactiveController { cell: DatabaseCellContainer, fillValues?: boolean ) { - const groupKey = cell.closest('affine-data-view-table-group')?.group?.key; + const groupKey = cell.closest('affine-data-view-table-group') + ?.group?.key; const table = this.tableContainer; const scrollContainer = table?.parentElement; if (!table || !scrollContainer) { diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts index 49d9329821..381b98eb90 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts @@ -14,6 +14,7 @@ import { type TableViewSelection, } from '../../selection'; import type { TableSingleView } from '../../table-view-manager.js'; +import type { TableGroup } from '../group.js'; import { openDetail, popRowMenu } from '../menu.js'; export class TableRow extends SignalWatcher(WithDisposable(ShadowlessElement)) { @@ -156,7 +157,7 @@ export class TableRow extends SignalWatcher(WithDisposable(ShadowlessElement)) { }; get groupKey() { - return this.closest('affine-data-view-table-group')?.group?.key; + return this.closest('affine-data-view-table-group')?.group?.key; } get selectionController() { diff --git a/blocksuite/affine/model/src/blocks/embed/types.ts b/blocksuite/affine/model/src/blocks/embed/types.ts index 9a4e1c685f..2d08cb98ef 100644 --- a/blocksuite/affine/model/src/blocks/embed/types.ts +++ b/blocksuite/affine/model/src/blocks/embed/types.ts @@ -1,3 +1,5 @@ +import type { BlockModel } from '@blocksuite/store'; + import { EmbedFigmaModel } from './figma'; import { EmbedGithubModel } from './github'; import type { EmbedHtmlModel } from './html'; @@ -6,21 +8,31 @@ import { EmbedLoomModel } from './loom'; import { EmbedSyncedDocModel } from './synced-doc'; import { EmbedYoutubeModel } from './youtube'; -export type ExternalEmbedModel = - | EmbedFigmaModel - | EmbedGithubModel - | EmbedLoomModel - | EmbedYoutubeModel; +export const ExternalEmbedModels = [ + EmbedFigmaModel, + EmbedGithubModel, + EmbedLoomModel, + EmbedYoutubeModel, +] as const; -export type InternalEmbedModel = EmbedLinkedDocModel | EmbedSyncedDocModel; +export const InternalEmbedModels = [ + EmbedLinkedDocModel, + EmbedSyncedDocModel, +] as const; -export type LinkableEmbedModel = ExternalEmbedModel | InternalEmbedModel; +export type ExternalEmbedModel = (typeof ExternalEmbedModels)[number]; + +export type InternalEmbedModel = (typeof InternalEmbedModels)[number]; + +export type LinkableEmbedModel = InstanceType< + ExternalEmbedModel | InternalEmbedModel +>; export type BuiltInEmbedModel = LinkableEmbedModel | EmbedHtmlModel; export function isExternalEmbedModel( - model: BuiltInEmbedModel -): model is ExternalEmbedModel { + model: BlockModel +): model is InstanceType { return ( model instanceof EmbedFigmaModel || model instanceof EmbedGithubModel || @@ -30,8 +42,8 @@ export function isExternalEmbedModel( } export function isInternalEmbedModel( - model: BuiltInEmbedModel -): model is InternalEmbedModel { + model: BlockModel +): model is InstanceType { return ( model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel ); diff --git a/blocksuite/affine/shared/src/commands/block-crud/get-block-index.ts b/blocksuite/affine/shared/src/commands/block-crud/get-block-index.ts index 896fceee92..220b8f0de5 100644 --- a/blocksuite/affine/shared/src/commands/block-crud/get-block-index.ts +++ b/blocksuite/affine/shared/src/commands/block-crud/get-block-index.ts @@ -21,15 +21,13 @@ export const getBlockIndexCommand: Command< const parentModel = ctx.std.store.getParent(path); if (!parentModel) return; - const parent = ctx.std.view.getBlock(parentModel.id); - if (!parent) return; + const parentBlock = ctx.std.view.getBlock(parentModel.id); + if (!parentBlock) return; - const index = parent.childBlocks.findIndex(x => { - return x.blockId === path; - }); + const blockIndex = parentBlock.childBlocks.findIndex(x => x.blockId === path); next({ - blockIndex: index, - parentBlock: parent as BlockComponent, + blockIndex, + parentBlock, }); }; diff --git a/blocksuite/affine/shared/src/consts/index.ts b/blocksuite/affine/shared/src/consts/index.ts index 4f6d911873..a2c4dfe839 100644 --- a/blocksuite/affine/shared/src/consts/index.ts +++ b/blocksuite/affine/shared/src/consts/index.ts @@ -78,7 +78,7 @@ export const DEFAULT_LINK_PREVIEW_ENDPOINT = export const CANVAS_EXPORT_IGNORE_TAGS = [ 'EDGELESS-TOOLBAR-WIDGET', 'AFFINE-DRAG-HANDLE-WIDGET', - 'AFFINE-FORMAT-BAR-WIDGET', + 'AFFINE-TOOLBAR-WIDGET', 'AFFINE-BLOCK-SELECTION', ]; diff --git a/blocksuite/affine/shared/src/services/index.ts b/blocksuite/affine/shared/src/services/index.ts index 5dbb11c667..a26d4cd9ac 100644 --- a/blocksuite/affine/shared/src/services/index.ts +++ b/blocksuite/affine/shared/src/services/index.ts @@ -19,5 +19,6 @@ export * from './quick-search-service'; export * from './sidebar-service'; export * from './telemetry-service'; export * from './theme-service'; +export * from './toolbar-service'; export * from './user-service'; export * from './virtual-keyboard-service'; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/action.ts b/blocksuite/affine/shared/src/services/toolbar-service/action.ts new file mode 100644 index 0000000000..2594531bd6 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/action.ts @@ -0,0 +1,56 @@ +import type { TemplateResult } from 'lit'; + +import type { ToolbarContext } from './context'; + +export enum ActionPlacement { + Start = 0, + End = 1 << 1, + More = 1 << 2, +} + +type ActionBase = { + id: string; + score?: number; + when?: ((cx: ToolbarContext) => boolean) | boolean; + active?: ((cx: ToolbarContext) => boolean) | boolean; + placement?: ActionPlacement; +}; + +export type ToolbarAction = ActionBase & { + label?: string; + icon?: TemplateResult; + tooltip?: string; + variant?: 'destructive'; + disabled?: ((cx: ToolbarContext) => boolean) | boolean; + content?: + | ((cx: ToolbarContext) => TemplateResult | null) + | (TemplateResult | null); + run?: (cx: ToolbarContext) => void; +}; + +// Generates an action at runtime +export type ToolbarActionGenerator = ActionBase & { + generate: (cx: ToolbarContext) => Omit | null; +}; + +export type ToolbarActionGroup< + T extends ActionBase = ToolbarAction | ToolbarActionGenerator, +> = ActionBase & { + actions: T[]; + content?: + | ((cx: ToolbarContext) => TemplateResult | null) + | (TemplateResult | null); +}; + +// Generates an action group at runtime +export type ToolbarActionGroupGenerator = ActionBase & { + generate: (cx: ToolbarContext) => Omit | null; +}; + +export type ToolbarGenericAction = + | ToolbarAction + | ToolbarActionGenerator + | ToolbarActionGroup + | ToolbarActionGroupGenerator; + +export type ToolbarActions = T[]; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/config.ts b/blocksuite/affine/shared/src/services/toolbar-service/config.ts new file mode 100644 index 0000000000..f8c9ca6416 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/config.ts @@ -0,0 +1,9 @@ +import type { Placement } from '@floating-ui/dom'; + +import type { ToolbarActions } from './action'; + +export type ToolbarModuleConfig = { + actions: ToolbarActions; + + placement?: Extract; +}; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/context.ts b/blocksuite/affine/shared/src/services/toolbar-service/context.ts new file mode 100644 index 0000000000..56c4a5f857 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/context.ts @@ -0,0 +1,172 @@ +import { + type BlockComponent, + BlockSelection, + type BlockStdScope, +} from '@blocksuite/block-std'; +import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; +import { nextTick } from '@blocksuite/global/utils'; +import type { + BaseSelection, + Block, + SelectionConstructor, +} from '@blocksuite/store'; + +import { matchModels } from '../../utils'; +import { DocModeProvider } from '../doc-mode-service'; +import { TelemetryProvider, type TelemetryService } from '../telemetry-service'; +import { ThemeProvider } from '../theme-service'; +import { ToolbarRegistryIdentifier } from './registry'; + +abstract class ToolbarContextBase { + constructor(readonly std: BlockStdScope) {} + + get command() { + return this.std.command; + } + + get chain() { + return this.command.chain(); + } + + get doc() { + return this.store.doc; + } + + get workspace() { + return this.std.workspace; + } + + get host() { + return this.std.host; + } + + get clipboard() { + return this.std.clipboard; + } + + get selection() { + return this.std.selection; + } + + get store() { + return this.std.store; + } + + get view() { + return this.std.view; + } + + get activated() { + if (this.readonly) return false; + if (this.flags.accept()) return true; + if (this.host.event.active) return true; + // Selects `embed-synced-doc-block` + return this.host.contains(document.activeElement); + } + + get readonly() { + return this.store.readonly; + } + + get docModeProvider() { + return this.std.get(DocModeProvider); + } + + get editorMode() { + return this.docModeProvider.getEditorMode() ?? 'page'; + } + + get isPageMode() { + return this.editorMode === 'page'; + } + + get isEdgelessMode() { + return this.editorMode === 'edgeless'; + } + + get gfx() { + return this.std.get(GfxControllerIdentifier); + } + + get themeProvider() { + return this.std.get(ThemeProvider); + } + + get theme() { + return this.themeProvider.theme; + } + + get toolbarRegistry() { + return this.std.get(ToolbarRegistryIdentifier); + } + + get flags() { + return this.toolbarRegistry.flags; + } + + get message$() { + return this.toolbarRegistry.message$; + } + + getCurrentBlockBy(type?: T): Block | null { + const selection = this.selection.find(type ?? BlockSelection); + return (selection && this.store.getBlock(selection.blockId)) ?? null; + } + + getCurrentModelBy(type: T) { + return this.getCurrentBlockBy(type)?.model ?? null; + } + + getCurrentModelByType< + T extends SelectionConstructor, + M extends Parameters[1][number], + >(type: T, klass: M) { + const model = this.getCurrentModelBy(type); + return matchModels(model, [klass]) ? model : null; + } + + getCurrentBlockComponentBy< + T extends SelectionConstructor, + K extends abstract new (...args: any) => any, + >(type: T, klass: K): InstanceType | null { + const block = this.getCurrentBlockBy(type); + const component = block && this.view.getBlock(block.id); + return this.blockComponentIs(component, klass) ? component : null; + } + + blockComponentIs any>( + component: BlockComponent | null, + ...classes: K[] + ): component is InstanceType { + return classes.some(k => component instanceof k); + } + + select(group: string, selections: BaseSelection[] = []) { + nextTick() + .then(() => this.selection.setGroup(group, selections)) + .catch(console.error); + } + + show() { + this.flags.show(); + } + + hide() { + this.flags.hide(); + } + + reset() { + this.flags.reset(); + this.message$.value = null; + } + + get telemetryProvider() { + return this.std.getOptional(TelemetryProvider); + } + + track = (...args: Parameters) => { + this.telemetryProvider?.track(...args); + }; +} + +export class ToolbarContext extends ToolbarContextBase {} diff --git a/blocksuite/affine/shared/src/services/toolbar-service/flags.ts b/blocksuite/affine/shared/src/services/toolbar-service/flags.ts new file mode 100644 index 0000000000..45a3f25e79 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/flags.ts @@ -0,0 +1,80 @@ +import { batch, signal } from '@preact/signals-core'; + +export enum Flag { + None = 0b0, + Surface = 0b1, + Block = 0b10, + Text = 0b100, + Native = 0b1000, + // Hovering something, e.g. inline links + Hovering = 0b10000, + // Dragging something or opening modal, e.g. drag handle, drag resources from outside, bookmark rename modal + Hiding = 0b100000, + // When the editor is inactive and the toolbar is hidden, we still want to accept the message + Accepting = 0b1000000, +} + +export class Flags { + value$ = signal(Flag.None); + + get value() { + return this.value$.peek(); + } + + toggle(flag: Flag, activated: boolean) { + if (activated) { + this.value$.value |= flag; + return; + } + this.value$.value &= ~flag; + } + + check(flag: Flag, value = this.value) { + return (flag & value) === flag; + } + + contains(flag: number, value = this.value) { + return (flag & value) !== Flag.None; + } + + refresh(flag: Flag) { + batch(() => { + this.toggle(flag, false); + this.toggle(flag, true); + }); + } + + reset() { + this.value$.value = Flag.None; + } + + hide() { + batch(() => { + this.toggle(Flag.Accepting, true); + this.toggle(Flag.Hiding, true); + }); + } + + show() { + batch(() => { + this.toggle(Flag.Hiding, false); + this.toggle(Flag.Accepting, false); + }); + } + + isText() { + return this.check(Flag.Text); + } + + isBlock() { + return this.check(Flag.Block); + } + + isNative() { + return this.check(Flag.Native); + } + + accept() { + return this.check(Flag.Accepting); + } +} diff --git a/blocksuite/affine/shared/src/services/toolbar-service/index.ts b/blocksuite/affine/shared/src/services/toolbar-service/index.ts new file mode 100644 index 0000000000..f2620f5876 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/index.ts @@ -0,0 +1,6 @@ +export * from './action'; +export * from './config'; +export * from './context'; +export { Flag as ToolbarFlag } from './flags'; +export * from './module'; +export * from './registry'; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/module.ts b/blocksuite/affine/shared/src/services/toolbar-service/module.ts new file mode 100644 index 0000000000..3892fc3f98 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/module.ts @@ -0,0 +1,9 @@ +import type { BlockFlavourIdentifier } from '@blocksuite/block-std'; + +import type { ToolbarModuleConfig } from './config'; + +export type ToolbarModule = { + readonly id: ReturnType; + + readonly config: ToolbarModuleConfig; +}; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/registry.ts b/blocksuite/affine/shared/src/services/toolbar-service/registry.ts new file mode 100644 index 0000000000..13597c7d56 --- /dev/null +++ b/blocksuite/affine/shared/src/services/toolbar-service/registry.ts @@ -0,0 +1,44 @@ +import { type BlockStdScope, StdIdentifier } from '@blocksuite/block-std'; +import { type Container, createIdentifier } from '@blocksuite/global/di'; +import { Extension, type ExtensionType } from '@blocksuite/store'; +import { signal } from '@preact/signals-core'; + +import { Flags } from './flags'; +import type { ToolbarModule } from './module'; + +export const ToolbarModuleIdentifier = createIdentifier( + 'AffineToolbarModuleIdentifier' +); + +export const ToolbarRegistryIdentifier = + createIdentifier('AffineToolbarRegistryIdentifier'); + +export function ToolbarModuleExtension(module: ToolbarModule): ExtensionType { + return { + setup: di => { + di.addImpl(ToolbarModuleIdentifier(module.id.variant), module); + }, + }; +} + +export class ToolbarRegistryExtension extends Extension { + message$ = signal<{ + flavour: string; + element: Element; + setFloating: (element?: Element) => void; + } | null>(null); + + flags = new Flags(); + + constructor(readonly std: BlockStdScope) { + super(); + } + + get modules() { + return this.std.provider.getAll(ToolbarModuleIdentifier); + } + + static override setup(di: Container) { + di.addImpl(ToolbarRegistryIdentifier, this, [StdIdentifier]); + } +} diff --git a/blocksuite/affine/shared/src/utils/button-popper.ts b/blocksuite/affine/shared/src/utils/button-popper.ts index 2d24e95316..6c0cf25f28 100644 --- a/blocksuite/affine/shared/src/utils/button-popper.ts +++ b/blocksuite/affine/shared/src/utils/button-popper.ts @@ -55,11 +55,13 @@ export function createButtonPopper( crossAxis, rootBoundary, ignoreShift, + offsetHeight, }: { mainAxis?: number; crossAxis?: number; rootBoundary?: Rect | (() => Rect | undefined); ignoreShift?: boolean; + offsetHeight?: number; } = {} ) { let display: Display = 'hidden'; @@ -87,9 +89,10 @@ export function createButtonPopper( size({ ...overflowOptions, apply({ availableHeight }) { - popperElement.style.maxHeight = originMaxHeight - ? `min(${originMaxHeight}, ${availableHeight}px)` - : `${availableHeight}px`; + popperElement.style.maxHeight = + originMaxHeight && originMaxHeight !== 'none' + ? `min(${originMaxHeight}, ${availableHeight}px)` + : `${availableHeight - (offsetHeight ?? 0)}px`; }, }), ], diff --git a/blocksuite/affine/widget-toolbar/package.json b/blocksuite/affine/widget-toolbar/package.json new file mode 100644 index 0000000000..7ec927e94f --- /dev/null +++ b/blocksuite/affine/widget-toolbar/package.json @@ -0,0 +1,49 @@ +{ + "name": "@blocksuite/affine-widget-toolbar", + "description": "Affine toolbar widget.", + "type": "module", + "scripts": { + "build": "tsc", + "test:unit": "nx vite:test --run --passWithNoTests", + "test:unit:coverage": "nx vite:test --run --coverage", + "test:e2e": "playwright test" + }, + "sideEffects": false, + "keywords": [], + "author": "toeverything", + "license": "MIT", + "dependencies": { + "@blocksuite/affine-block-database": "workspace:*", + "@blocksuite/affine-block-table": "workspace:*", + "@blocksuite/affine-components": "workspace:*", + "@blocksuite/affine-model": "workspace:*", + "@blocksuite/affine-shared": "workspace:*", + "@blocksuite/block-std": "workspace:*", + "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.1", + "@floating-ui/dom": "^1.6.13", + "@preact/signals-core": "^1.8.0", + "@toeverything/theme": "^1.1.12", + "@types/lodash-es": "^4.17.12", + "lit": "^3.2.0", + "lodash-es": "^4.17.21" + }, + "exports": { + ".": "./src/index.ts", + "./effects": "./src/effects.ts" + }, + "files": [ + "src", + "dist", + "!src/__tests__", + "!dist/__tests__" + ], + "version": "0.19.0", + "devDependencies": { + "@types/lodash.groupby": "^4", + "@types/lodash.mergewith": "^4", + "@types/lodash.orderby": "^4", + "@types/lodash.partition": "^4", + "@types/lodash.topairs": "^4" + } +} diff --git a/blocksuite/affine/widget-toolbar/src/effects.ts b/blocksuite/affine/widget-toolbar/src/effects.ts new file mode 100644 index 0000000000..8dcc6c2dc3 --- /dev/null +++ b/blocksuite/affine/widget-toolbar/src/effects.ts @@ -0,0 +1,11 @@ +import { AFFINE_TOOLBAR_WIDGET, AffineToolbarWidget } from './toolbar'; + +export function effects() { + customElements.define(AFFINE_TOOLBAR_WIDGET, AffineToolbarWidget); +} + +declare global { + interface HTMLElementTagNameMap { + [AFFINE_TOOLBAR_WIDGET]: AffineToolbarWidget; + } +} diff --git a/blocksuite/affine/widget-toolbar/src/index.ts b/blocksuite/affine/widget-toolbar/src/index.ts new file mode 100644 index 0000000000..dcddd4cf33 --- /dev/null +++ b/blocksuite/affine/widget-toolbar/src/index.ts @@ -0,0 +1,12 @@ +import { WidgetViewExtension } from '@blocksuite/block-std'; +import { literal, unsafeStatic } from 'lit/static-html.js'; + +import { AFFINE_TOOLBAR_WIDGET } from './toolbar'; + +export * from './toolbar'; + +export const toolbarWidget = WidgetViewExtension( + 'affine:page', + AFFINE_TOOLBAR_WIDGET, + literal`${unsafeStatic(AFFINE_TOOLBAR_WIDGET)}` +); diff --git a/blocksuite/affine/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widget-toolbar/src/toolbar.ts new file mode 100644 index 0000000000..44e9d2acdc --- /dev/null +++ b/blocksuite/affine/widget-toolbar/src/toolbar.ts @@ -0,0 +1,438 @@ +import { DatabaseSelection } from '@blocksuite/affine-block-database'; +import { TableSelection } from '@blocksuite/affine-block-table'; +import { EditorToolbar } from '@blocksuite/affine-components/toolbar'; +import { + CodeBlockModel, + ImageBlockModel, + ListBlockModel, + ParagraphBlockModel, +} from '@blocksuite/affine-model'; +import { + getBlockSelectionsCommand, + getSelectedBlocksCommand, +} from '@blocksuite/affine-shared/commands'; +import { + ToolbarContext, + ToolbarFlag as Flag, + ToolbarRegistryIdentifier, +} from '@blocksuite/affine-shared/services'; +import { matchModels } from '@blocksuite/affine-shared/utils'; +import { + BlockSelection, + SurfaceSelection, + TextSelection, + WidgetComponent, +} from '@blocksuite/block-std'; +import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; +import { Bound, getCommonBound } from '@blocksuite/global/gfx'; +import { nextTick } from '@blocksuite/global/utils'; +import type { Placement, ReferenceElement } from '@floating-ui/dom'; +import { batch, effect, signal } from '@preact/signals-core'; +import { css } from 'lit'; +import throttle from 'lodash-es/throttle'; + +import { autoUpdatePosition, renderToolbar } from './utils'; + +export const AFFINE_TOOLBAR_WIDGET = 'affine-toolbar-widget'; + +export class AffineToolbarWidget extends WidgetComponent { + static override styles = css` + editor-toolbar { + position: absolute; + top: 0; + left: 0; + opacity: 0; + display: none; + width: max-content; + backface-visibility: hidden; + z-index: var(--affine-z-index-popover); + + will-change: opacity, transform; + transition-property: opacity, overlay, display; + transition-duration: 120ms; + transition-timing-function: ease-out; + transition-behavior: allow-discrete; + } + + editor-toolbar[data-open] { + display: flex; + opacity: 1; + transition-timing-function: ease-in; + + @starting-style { + opacity: 0; + } + } + `; + + range$ = signal(null); + + flavour$ = signal('affine:note'); + + toolbar = new EditorToolbar(); + + get toolbarRegistry() { + return this.std.get(ToolbarRegistryIdentifier); + } + + override connectedCallback() { + super.connectedCallback(); + + const { + flavour$, + range$, + disposables, + toolbar, + toolbarRegistry, + host, + std, + } = this; + const { flags, message$ } = toolbarRegistry; + const context = new ToolbarContext(std); + + // TODO(@fundon): fix toolbar position shaking when the wheel scrolls + // document.body.append(toolbar); + this.shadowRoot!.append(toolbar); + + // Formatting + // Selects text in note. + disposables.add( + std.selection.find$(TextSelection).subscribe(result => { + const activated = + context.activated && + Boolean( + result && + !result.isCollapsed() && + result.from.length + (result.to?.length ?? 0) + ); + + batch(() => { + flags.toggle(Flag.Text, activated); + + if (!activated) return; + + const range = std.range.value ?? null; + range$.value = activated ? range : null; + + flags.refresh(Flag.Text); + }); + }) + ); + + // Formatting + // Selects `native` text in database's cell or in table. + disposables.addFromEvent(document, 'selectionchange', () => { + const range = std.range.value ?? null; + let activated = context.activated && Boolean(range && !range.collapsed); + + if (activated) { + const result = std.selection.find(DatabaseSelection); + const viewSelection = result?.viewSelection; + + activated = Boolean( + viewSelection && + ((viewSelection.selectionType === 'area' && + viewSelection.isEditing) || + (viewSelection.selectionType === 'cell' && + viewSelection.isEditing)) + ); + + if (!activated) { + const result = std.selection.find(TableSelection); + const viewSelection = result?.data; + activated = Boolean(viewSelection && viewSelection.type === 'area'); + } + } + + batch(() => { + flags.toggle(Flag.Native, activated); + + if (!activated) return; + + range$.value = activated ? range : null; + flavour$.value = 'affine:note'; + + flags.refresh(Flag.Native); + }); + }); + + // Selects blocks in note. + disposables.add( + std.selection.filter$(BlockSelection).subscribe(result => { + const count = result.length; + let flavour = 'affine:note'; + let activated = context.activated && Boolean(count); + + if (activated) { + // Handles a signal block. + const block = count === 1 && std.store.getBlock(result[0].blockId); + + // Chencks if block's config exists. + if (block) { + const modelFlavour = block.model.flavour; + const existed = + toolbarRegistry.modules.has(modelFlavour) || + toolbarRegistry.modules.has(`custom:${modelFlavour}`); + if (existed) { + flavour = modelFlavour; + } else { + activated = matchModels(block.model, [ + ParagraphBlockModel, + ListBlockModel, + CodeBlockModel, + ImageBlockModel, + ]); + } + } + } + + batch(() => { + flavour$.value = flavour; + + flags.toggle(Flag.Block, activated); + + if (!activated) return; + + flags.refresh(Flag.Block); + }); + }) + ); + + // Selects elements in edgeless. + // Triggered only when not in editing state. + disposables.add( + std.selection.filter$(SurfaceSelection).subscribe(result => { + const activated = + context.activated && + Boolean(result.length) && + !result.some(e => e.editing); + flags.toggle(Flag.Surface, activated); + }) + ); + + disposables.add( + std.selection.slots.changed.on(selections => { + if (!context.activated) return; + + const value = flags.value$.peek(); + if (flags.contains(Flag.Hovering | Flag.Hiding, value)) return; + if (!flags.check(Flag.Text, value)) return; + + const hasTextSelection = + selections.filter(s => s.is(TextSelection)).length > 0; + if (!hasTextSelection) return; + + const range = std.range.value ?? null; + range$.value = range && !range.collapsed ? range : null; + + // TODO(@fundon): maybe here can be further optimized + // 1. Prevents flickering effects. + // 2. We cannot use `host.getUpdateComplete()` here + // because it would cause excessive DOM queries, leading to UI jamming. + nextTick() + .then(() => flags.refresh(Flag.Text)) + .catch(console.error); + }) + ); + + // TODO(@fundon): improve these cases + // When switch the view mode, wait until the view is created + // `card view` or `embed view` + disposables.add( + std.view.viewUpdated + .filter(view => view.type === 'block') + .on(record => { + if ( + flags.isBlock() && + std.selection + .filter$(BlockSelection) + .peek() + .find(s => s.blockId === record.id) + ) { + if (record.method === 'add') { + flags.refresh(Flag.Block); + } + return; + } + }) + ); + + // Handles `drag and drop` + const dragStart = () => flags.toggle(Flag.Hiding, true); + const dragEnd = () => flags.toggle(Flag.Hiding, false); + const eventOptions = { passive: false }; + this.handleEvent('dragStart', dragStart); + this.handleEvent('dragEnd', dragEnd); + this.handleEvent('nativeDrop', dragEnd); + disposables.addFromEvent(host, 'dragenter', dragStart, eventOptions); + disposables.addFromEvent( + host, + 'dragleave', + throttle( + event => { + const { x, y, target } = event; + if (target === this) return; + const rect = host.getBoundingClientRect(); + if ( + x >= rect.left && + y >= rect.top && + x <= rect.bottom && + y <= rect.right + ) + return; + dragEnd(); + }, + 144, + { trailing: true } + ), + eventOptions + ); + + // Handles hover elements + disposables.add( + toolbarRegistry.message$.subscribe(data => { + if ( + !context.activated || + flags.contains(Flag.Text | Flag.Native | Flag.Block) + ) { + flags.toggle(Flag.Hovering, false); + return; + } + + const activated = !!data; + + batch(() => { + flags.toggle(Flag.Hovering, activated); + + if (!activated) return; + + const { flavour, setFloating } = data; + + setFloating(toolbar); + + flavour$.value = flavour; + + flags.refresh(Flag.Hovering); + }); + }) + ); + + // Should update position of notes' toolbar in edgeless + disposables.add( + this.std.get(GfxControllerIdentifier).viewport.viewportUpdated.on(() => { + if (!context.activated) return; + + if (flags.value === Flag.None || flags.check(Flag.Hiding)) { + return; + } + + if (flags.isText()) { + flags.refresh(Flag.Text); + return; + } + + if (flags.isNative()) { + flags.refresh(Flag.Native); + return; + } + + if (flags.isBlock()) { + flags.refresh(Flag.Block); + return; + } + }) + ); + + disposables.add( + flags.value$.subscribe(value => { + // Hides toolbar + if (value === Flag.None || flags.check(Flag.Hiding, value)) { + delete toolbar.dataset.open; + return; + } + + // Shows toolbar + // 1. `Flag.Text`: formatting in note + // 2. `Flag.Native`: formating in database + // 3. `Flag.Block`: blocks in note + // 4. `Flag.Hovering`: inline links in note/database + if ( + flags.contains( + Flag.Hovering | Flag.Text | Flag.Native | Flag.Block, + value + ) + ) { + renderToolbar(toolbar, context, flavour$.peek()); + toolbar.dataset.open = 'true'; + return; + } + + // Shows toolbar in edgeles + // TODO(@fundon): handles edgeless toolbar + }) + ); + + disposables.add( + effect(() => { + const value = flags.value$.value; + const flavour = flavour$.value; + if (!context.activated || flags.contains(Flag.Hiding, value)) return; + if ( + !flags.contains( + Flag.Hovering | Flag.Text | Flag.Native | Flag.Block, + value + ) + ) + return; + + // TODO(@fundon): improves here + const isNote = flavour === 'affine:note'; + let placement = isNote ? ('top' as Placement) : undefined; + let virtualEl: ReferenceElement | null = null; + + if (flags.check(Flag.Hovering, value)) { + const message = message$.value; + if (!message) return; + + const { element } = message; + + virtualEl = element; + placement = 'top'; + } else if (flags.check(Flag.Block, value)) { + const [ok, { selectedBlocks }] = context.chain + .pipe(getBlockSelectionsCommand) + .pipe(getSelectedBlocksCommand, { types: ['block'] }) + .run(); + + if (!ok || !selectedBlocks?.length) return; + + virtualEl = { + getBoundingClientRect: () => { + const rects = selectedBlocks.map(e => e.getBoundingClientRect()); + const bounds = getCommonBound(rects.map(Bound.fromDOMRect)); + if (!bounds) return rects[0]; + return new DOMRect(bounds.x, bounds.y, bounds.w, bounds.h); + }, + getClientRects: () => + selectedBlocks.map(e => e.getBoundingClientRect()), + }; + } else { + const range = range$.value; + if (!range) return; + + virtualEl = { + getBoundingClientRect: () => range.getBoundingClientRect(), + getClientRects: () => + Array.from(range.getClientRects()).filter(rect => + Math.round(rect.width) + ), + }; + } + + if (!virtualEl) return; + + return autoUpdatePosition(virtualEl, toolbar, placement); + }) + ); + } +} diff --git a/blocksuite/affine/widget-toolbar/src/utils.ts b/blocksuite/affine/widget-toolbar/src/utils.ts new file mode 100644 index 0000000000..bc93f8cac8 --- /dev/null +++ b/blocksuite/affine/widget-toolbar/src/utils.ts @@ -0,0 +1,298 @@ +import { + type EditorToolbar, + renderToolbarSeparator, +} from '@blocksuite/affine-components/toolbar'; +import { + ActionPlacement, + type ToolbarAction, + type ToolbarActions, + type ToolbarContext, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { BlockSelection } from '@blocksuite/block-std'; +import { nextTick } from '@blocksuite/global/utils'; +import { MoreVerticalIcon } from '@blocksuite/icons/lit'; +import type { + AutoUpdateOptions, + Placement, + ReferenceElement, +} from '@floating-ui/dom'; +import { + autoUpdate, + computePosition, + flip, + inline, + offset, + shift, +} from '@floating-ui/dom'; +import { html, render, type TemplateResult } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { join } from 'lit/directives/join.js'; +import { keyed } from 'lit/directives/keyed.js'; +import { repeat } from 'lit/directives/repeat.js'; +import groupBy from 'lodash-es/groupBy'; +import mergeWith from 'lodash-es/mergeWith'; +import orderBy from 'lodash-es/orderBy'; +import partition from 'lodash-es/partition'; +import toPairs from 'lodash-es/toPairs'; + +export function autoUpdatePosition( + referenceElement: ReferenceElement, + toolbar: EditorToolbar, + placement: Placement = 'top-start', + options: AutoUpdateOptions = { elementResize: false, animationFrame: true } +) { + const abortController = new AbortController(); + const signal = abortController.signal; + const update = async () => { + await Promise.race([ + new Promise(resolve => { + const listener = () => resolve(signal.reason); + signal.addEventListener('abort', listener, { once: true }); + + if (signal.aborted) return; + + signal.removeEventListener('abort', listener); + resolve(null); + }), + toolbar.updateComplete.then(nextTick), + ]); + + if (signal.aborted) return; + + const { x, y } = await computePosition(referenceElement, toolbar, { + placement, + middleware: [offset(10), inline(), shift({ padding: 6 }), flip()], + }); + + toolbar.style.transform = `translate3d(${x}px, ${y}px, 0)`; + }; + + const cleanup = autoUpdate( + referenceElement, + toolbar, + () => { + update().catch(console.error); + }, + options + ); + + return () => { + cleanup(); + if (signal.aborted) return; + abortController.abort(); + }; +} + +function group(actions: ToolbarAction[]) { + const grouped = groupBy(actions, a => a.id); + + const paired = toPairs(grouped).map(([_, items]) => { + if (items.length === 1) return items[0]; + const [first, ...others] = items; + if (others.length === 1) return merge({ ...first }, others[0]); + return others.reduce(merge, { ...first }); + }); + + return paired; +} + +export function combine(actions: ToolbarActions, context: ToolbarContext) { + const grouped = group(actions); + + const generated = grouped.map(action => { + if ('generate' in action && action.generate) { + // TODO(@fundon): should delete `generate` fn + return { + ...action, + ...action.generate(context), + }; + } + return action; + }); + + const filtered = generated.filter(action => { + if (typeof action.when === 'function') return action.when(context); + return action.when ?? true; + }); + + return filtered; +} + +const merge = (a: any, b: any) => + mergeWith(a, b, (obj, src) => + Array.isArray(obj) ? group(obj.concat(src)) : src + ); + +/** + * Renders toolbar + * + * Merges the following configs: + * 1. `affine:note` + * 2. `custom:affine:note` + * 3. `affine:*` + * 4. `custom:affine:*` + */ +export function renderToolbar( + toolbar: EditorToolbar, + context: ToolbarContext, + flavour: string +) { + const toolbarRegistry = context.toolbarRegistry; + const module = toolbarRegistry.modules.get(flavour); + if (!module) return; + const customModule = toolbarRegistry.modules.get(`custom:${flavour}`); + const customWildcardModule = toolbarRegistry.modules.get(`custom:affine:*`); + const config = module.config satisfies ToolbarModuleConfig; + const customConfig = (customModule?.config ?? { + actions: [], + }) satisfies ToolbarModuleConfig; + const customWildcardConfig = (customWildcardModule?.config ?? { + actions: [], + }) satisfies ToolbarModuleConfig; + + const combined = combine( + [ + ...config.actions, + ...customConfig.actions, + ...customWildcardConfig.actions, + ], + context + ); + + const ordered = orderBy( + combined, + ['placement', 'id', 'score'], + ['asc', 'asc', 'asc'] + ); + + const [moreActionGroup, primaryActionGroup] = partition( + ordered, + a => a.placement === ActionPlacement.More + ); + + if (moreActionGroup.length) { + const moreMenuItems = renderActions( + moreActionGroup, + context, + renderMenuActionItem + ); + if (moreMenuItems.length) { + // TODO(@fundon): edgeless case needs to be considered + const key = `${flavour}:${context.getCurrentModelBy(BlockSelection)?.id}`; + + primaryActionGroup.push({ + id: 'more', + content: html`${keyed( + key, + html` + + ${MoreVerticalIcon()} + + `} + > +
+ ${join(moreMenuItems, () => + renderToolbarSeparator('horizontal') + )} +
+ + ` + )}`, + }); + } + } + + render( + join(renderActions(primaryActionGroup, context), () => + renderToolbarSeparator() + ), + toolbar + ); +} + +function renderActions( + actions: ToolbarActions, + context: ToolbarContext, + render = renderActionItem +) { + return actions + .map(action => { + let content: TemplateResult | null = null; + if ('content' in action && action.content) { + if (typeof action.content === 'function') { + content = action.content(context); + } else { + content = action.content; + } + return content; + } + + if ('actions' in action && action.actions.length) { + const combined = combine(action.actions, context); + + if (!combined.length) return content; + + const ordered = orderBy(combined, ['score', 'id'], ['asc', 'asc']); + + return repeat( + ordered, + b => b.id, + b => render(b, context) + ); + } + + if ('run' in action && action.run) { + return render(action, context); + } + + return content; + }) + .filter(action => action !== null); +} + +// TODO(@fundon): supports templates +function renderActionItem(action: ToolbarAction, context: ToolbarContext) { + const ids = action.id.split('.'); + const id = ids[ids.length - 1]; + return html` + action.run?.(context)} + > + ${action.icon} + ${action.label ? html`${action.label}` : null} + + `; +} + +function renderMenuActionItem(action: ToolbarAction, context: ToolbarContext) { + const ids = action.id.split('.'); + const id = ids[ids.length - 1]; + return html` + action.run?.(context)} + > + ${action.icon} + ${action.label ? html`${action.label}` : null} + + `; +} diff --git a/blocksuite/affine/widget-toolbar/tsconfig.json b/blocksuite/affine/widget-toolbar/tsconfig.json new file mode 100644 index 0000000000..66f5a8a88e --- /dev/null +++ b/blocksuite/affine/widget-toolbar/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./dist", + "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo" + }, + "include": ["./src"], + "references": [ + { "path": "../components" }, + { "path": "../model" }, + { "path": "../shared" }, + { "path": "../../framework/block-std" }, + { "path": "../data-view" }, + { "path": "../../framework/global" } + ] +} diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json index 1a08405ef5..c7b3c6f761 100644 --- a/blocksuite/blocks/package.json +++ b/blocksuite/blocks/package.json @@ -43,6 +43,7 @@ "@blocksuite/affine-widget-frame-title": "workspace:*", "@blocksuite/affine-widget-remote-selection": "workspace:*", "@blocksuite/affine-widget-scroll-anchoring": "workspace:*", + "@blocksuite/affine-widget-toolbar": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/data-view": "workspace:*", "@blocksuite/global": "workspace:*", diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index ed1c9fa1ea..3940d7be2d 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/blocksuite/blocks/src/effects.ts @@ -20,6 +20,7 @@ import { effects as blockTableEffects } from '@blocksuite/affine-block-table/eff import { BlockSelection } from '@blocksuite/affine-components/block-selection'; import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width'; import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption'; +import { effects as componentCardStyleDropdownMenuEffects } from '@blocksuite/affine-components/card-style-dropdown-menu'; import { effects as componentColorPickerEffects } from '@blocksuite/affine-components/color-picker'; import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu'; import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker'; @@ -27,13 +28,17 @@ import { effects as componentDocTitleEffects } from '@blocksuite/affine-componen import { effects as componentDropIndicatorEffects } from '@blocksuite/affine-components/drop-indicator'; import { effects as componentEmbedCardModalEffects } from '@blocksuite/affine-components/embed-card-modal'; import { FilterableListComponent } from '@blocksuite/affine-components/filterable-list'; +import { effects as componentHighlightDropdownMenuEffects } from '@blocksuite/affine-components/highlight-dropdown-menu'; import { IconButton } from '@blocksuite/affine-components/icon-button'; +import { effects as componentLinkPreviewEffects } from '@blocksuite/affine-components/link-preview'; +import { effects as componentLinkedDocTitleEffects } from '@blocksuite/affine-components/linked-doc-title'; import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal'; import { effects as componentRichTextEffects } from '@blocksuite/affine-components/rich-text'; import { SmoothCorner } from '@blocksuite/affine-components/smooth-corner'; import { effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button'; import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch'; import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar'; +import { effects as componentViewDropdownMenuEffects } from '@blocksuite/affine-components/view-dropdown-menu'; import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects'; import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects'; import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects'; @@ -41,6 +46,7 @@ import { effects as widgetEdgelessAutoConnectEffects } from '@blocksuite/affine- import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects'; import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects'; import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects'; +import { effects as widgetToolbarEffects } from '@blocksuite/affine-widget-toolbar/effects'; import { effects as stdEffects } from '@blocksuite/block-std/effects'; import { effects as dataViewEffects } from '@blocksuite/data-view/effects'; import { effects as inlineEffects } from '@blocksuite/inline/effects'; @@ -86,12 +92,18 @@ export function effects() { componentColorPickerEffects(); componentEmbedCardModalEffects(); componentDocTitleEffects(); + componentLinkPreviewEffects(); + componentLinkedDocTitleEffects(); + componentCardStyleDropdownMenuEffects(); + componentHighlightDropdownMenuEffects(); + componentViewDropdownMenuEffects(); widgetScrollAnchoringEffects(); widgetFrameTitleEffects(); widgetRemoteSelectionEffects(); widgetDragHandleEffects(); widgetEdgelessAutoConnectEffects(); + widgetToolbarEffects(); fragmentFramePanelEffects(); fragmentOutlineEffects(); diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts index 7b9ee0f274..d1188b4994 100644 --- a/blocksuite/blocks/src/index.ts +++ b/blocksuite/blocks/src/index.ts @@ -28,6 +28,7 @@ export { DocTitle, getDocTitleByEditorHost, } from '@blocksuite/affine-components/doc-title'; +export { toggleEmbedCardEditModal } from '@blocksuite/affine-components/embed-card-modal'; export { HoverController, whenHover, @@ -41,6 +42,11 @@ export { TagsIcon, } from '@blocksuite/affine-components/icons'; export * from '@blocksuite/affine-components/icons'; +export { + notifyLinkedDocClearedAliases, + notifyLinkedDocSwitchedToCard, + notifyLinkedDocSwitchedToEmbed, +} from '@blocksuite/affine-components/notification'; export * from '@blocksuite/affine-components/peek'; export { createLitPortal, @@ -106,6 +112,7 @@ export { ViewportTurboRendererIdentifier, } from '@blocksuite/affine-shared/viewport-renderer'; export type { DragBlockPayload } from '@blocksuite/affine-widget-drag-handle'; +export { toolbarWidget } from '@blocksuite/affine-widget-toolbar'; const env: Record = typeof globalThis !== 'undefined' diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json index ea50fa270e..141c89065e 100644 --- a/blocksuite/blocks/tsconfig.json +++ b/blocksuite/blocks/tsconfig.json @@ -36,6 +36,7 @@ { "path": "../affine/widget-frame-title" }, { "path": "../affine/widget-remote-selection" }, { "path": "../affine/widget-scroll-anchoring" }, + { "path": "../affine/widget-toolbar" }, { "path": "../framework/block-std" }, { "path": "../affine/data-view" }, { "path": "../framework/global" }, diff --git a/blocksuite/tests-legacy/e2e/attachment.spec.ts b/blocksuite/tests-legacy/e2e/attachment.spec.ts index 18a8373b79..426efd6f80 100644 --- a/blocksuite/tests-legacy/e2e/attachment.spec.ts +++ b/blocksuite/tests-legacy/e2e/attachment.spec.ts @@ -51,7 +51,7 @@ const FILE_PATH = path.resolve( function getAttachment(page: Page) { const attachment = page.locator('affine-attachment'); const loading = attachment.locator('.affine-attachment-card.loading'); - const toolbar = page.locator('.affine-attachment-toolbar'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); const switchViewButton = toolbar.getByRole('button', { name: 'Switch view' }); const renameBtn = toolbar.getByRole('button', { name: 'Rename' }); const renameInput = page.locator('.affine-attachment-rename-container input'); @@ -110,7 +110,7 @@ function getAttachment(page: Page) { await assertRichImage(page, 1); }, rename: async (newName: string) => { - await attachment.hover(); + await attachment.click(); await expect(toolbar).toBeVisible(); await renameBtn.click(); await page.keyboard.press(`${SHORT_KEY}+a`, { delay: 50 }); @@ -207,7 +207,7 @@ test('should rename attachment works', async ({ page }) => { expect(await getName()).toBe(FILE_NAME); - await attachment.hover(); + await attachment.click(); await expect(renameBtn).toBeVisible(); await renameBtn.click(); await assertKeyboardWorkInInput(page, renameInput); @@ -225,20 +225,28 @@ test('should rename attachment works', async ({ page }) => { test('should turn attachment to image works', async ({ page }, testInfo) => { await enterPlaygroundRoom(page); await initEmptyParagraphState(page); - const { insertAttachment, waitLoading, turnToEmbed, turnImageToCard } = - getAttachment(page); + const { + attachment, + insertAttachment, + waitLoading, + turnToEmbed, + turnImageToCard, + } = getAttachment(page); await focusRichText(page); await insertAttachment(); // Wait for the attachment to be uploaded await waitLoading(); + await attachment.click(); await turnToEmbed(); expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_1.json` ); + await turnImageToCard(); + expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_2.json` ); diff --git a/blocksuite/tests-legacy/e2e/bookmark.spec.ts b/blocksuite/tests-legacy/e2e/bookmark.spec.ts index 58e80e21e9..f55941da53 100644 --- a/blocksuite/tests-legacy/e2e/bookmark.spec.ts +++ b/blocksuite/tests-legacy/e2e/bookmark.spec.ts @@ -237,7 +237,8 @@ test.describe('embed card toolbar', () => { await showEmbedCardToolbar(page); }); - test('copy bookmark url by copy button', async ({ page }, testInfo) => { + // TODO(@fundon): should move to affine side + test.skip('copy bookmark url by copy button', async ({ page }, testInfo) => { await showEmbedCardToolbar(page); const { copyButton } = getEmbedCardToolbar(page); await copyButton.click(); @@ -374,7 +375,7 @@ test.describe('embed youtube card', () => { await page.waitForTimeout(100); // change to card view - const embedToolbar = page.locator('affine-embed-card-toolbar'); + const embedToolbar = page.locator('affine-toolbar-widget editor-toolbar'); await expect(embedToolbar).toBeVisible(); const embedView = page.locator('editor-menu-button', { hasText: 'embed view', @@ -429,7 +430,7 @@ test.describe('embed figma card', () => { await page.waitForTimeout(100); // change to card view - const embedToolbar = page.locator('affine-embed-card-toolbar'); + const embedToolbar = page.locator('affine-toolbar-widget editor-toolbar'); await expect(embedToolbar).toBeVisible(); const embedView = page.locator('editor-menu-button', { hasText: 'embed view', diff --git a/blocksuite/tests-legacy/e2e/edgeless/note/note.spec.ts b/blocksuite/tests-legacy/e2e/edgeless/note/note.spec.ts index 022f88a090..5b308c9a7c 100644 --- a/blocksuite/tests-legacy/e2e/edgeless/note/note.spec.ts +++ b/blocksuite/tests-legacy/e2e/edgeless/note/note.spec.ts @@ -228,7 +228,7 @@ test('format quick bar should show up when double-clicking on text', async ({ delay: 20, }); await page.waitForTimeout(200); - const formatBar = page.locator('.affine-format-bar-widget'); + const formatBar = page.locator('affine-toolbar-widget editor-toolbar'); await expect(formatBar).toBeVisible(); }); diff --git a/blocksuite/tests-legacy/e2e/embed-synced-doc.spec.ts b/blocksuite/tests-legacy/e2e/embed-synced-doc.spec.ts index 2382db0637..a2e3e3e212 100644 --- a/blocksuite/tests-legacy/e2e/embed-synced-doc.spec.ts +++ b/blocksuite/tests-legacy/e2e/embed-synced-doc.spec.ts @@ -30,13 +30,15 @@ test.describe('Embed synced doc', () => { ); await waitNextFrame(page, 200); - const referencePopup = page.locator('.affine-reference-popover-container'); - await expect(referencePopup).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); - const switchButton = page.getByRole('button', { name: 'Switch view' }); + const switchButton = toolbar.getByRole('button', { name: 'Switch view' }); await switchButton.click(); - const embedSyncedDocBtn = page.getByRole('button', { name: 'Embed view' }); + const embedSyncedDocBtn = toolbar.getByRole('button', { + name: 'Embed view', + }); await expect(embedSyncedDocBtn).toBeVisible(); await embedSyncedDocBtn.click(); @@ -70,7 +72,7 @@ test.describe('Embed synced doc', () => { ); await waitNextFrame(page, 200); - const toolbar = page.locator('.embed-card-toolbar'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); await expect(toolbar).toBeVisible(); const switchBtn = toolbar.getByRole('button', { name: 'Switch view' }); @@ -213,11 +215,13 @@ test.describe('Embed synced doc', () => { await initEmptyParagraphState(page); await focusRichText(page); await createAndConvertToEmbedSyncedDoc(page); + const locator = page.locator('affine-embed-synced-doc-block'); + await expect(locator).toBeVisible(); await locator.click(); - const toolbar = page.locator('editor-toolbar'); - const openMenu = toolbar.getByRole('button', { name: 'Open' }); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + const openMenu = toolbar.getByRole('button', { name: 'Open doc' }); await openMenu.click(); const button = toolbar.getByRole('button', { name: 'Open this doc' }); diff --git a/blocksuite/tests-legacy/e2e/format-bar.spec.ts b/blocksuite/tests-legacy/e2e/format-bar.spec.ts index 7ccb2ec57a..498b4403dc 100644 --- a/blocksuite/tests-legacy/e2e/format-bar.spec.ts +++ b/blocksuite/tests-legacy/e2e/format-bar.spec.ts @@ -60,7 +60,7 @@ test('should format quick bar show when select text', async ({ page }) => { } const rect = await getSelectionRect(page); assertAlmostEqual(box.x - rect.left, -98, 5); - assertAlmostEqual(box.y - rect.bottom, 10, 5); + assertAlmostEqual(box.y - rect.bottom, -133, 5); // Click the edge of the format quick bar await page.mouse.click(box.x + 4, box.y + box.height / 2); @@ -247,17 +247,22 @@ test('should format quick bar be able to change background color', async ({ const { highlight } = getFormatBar(page); - await highlight.highlightBtn.hover(); + await highlight.highlightBtn.click(); await expect(highlight.redForegroundBtn).toBeVisible(); - await expect(highlight.highlightBtn).toHaveAttribute( - 'data-last-used', - 'unset' - ); + + // TODO(@fundon): these recent settings should be added to the dropdown menu. + // await expect(highlight.highlightBtn).toHaveAttribute( + // 'data-last-used', + // 'unset' + // ); + await highlight.redForegroundBtn.click(); - await expect(highlight.highlightBtn).toHaveAttribute( - 'data-last-used', - 'var(--affine-text-highlight-foreground-red)' - ); + + // TODO(@fundon): these recent settings should be added to the dropdown menu. + // await expect(highlight.highlightBtn).toHaveAttribute( + // 'data-last-used', + // 'var(--affine-text-highlight-foreground-red)' + // ); expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_init.json` @@ -266,13 +271,17 @@ test('should format quick bar be able to change background color', async ({ // select `123` paragraph by ctrl + a await focusRichText(page); await selectAllByKeyboard(page); - // use last used color + // // use last used color + // await highlight.highlightBtn.click(); + await highlight.highlightBtn.click(); + await highlight.redForegroundBtn.click(); expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_select_all.json` ); + await highlight.highlightBtn.click(); await expect(highlight.defaultColorBtn).toBeVisible(); await highlight.defaultColorBtn.click(); @@ -329,8 +338,6 @@ test('should format quick bar be able to link text', async ({ `${testInfo.title}_init.json` ); - // FIXME: remove this - await focusRichText(page); await setSelection(page, 3, 0, 3, 3); // The link button should be active after click await expect(linkBtn).toHaveAttribute('active', ''); @@ -352,24 +359,23 @@ test('should format quick bar be able to change to heading paragraph type', asyn // drag only the `456` paragraph await dragBetweenIndices(page, [0, 0], [0, 3]); - const { openParagraphMenu, h1Btn, bulletedBtn } = getFormatBar(page); - await openParagraphMenu(); + const { openParagraphMenu, textBtn, h1Btn, bulletedBtn } = getFormatBar(page); - await expect(h1Btn).toBeVisible(); + await openParagraphMenu(); await h1Btn.click(); expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_init.json` ); - await bulletedBtn.click(); await openParagraphMenu(); + await bulletedBtn.click(); expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_bulleted.json` ); - const { textBtn } = getFormatBar(page); + await openParagraphMenu(); await textBtn.click(); expect(await getPageSnapshot(page, true)).toMatchSnapshot( @@ -485,7 +491,7 @@ test('should format quick bar position correct at the start of second line', asy } const selectionRect = await getSelectionRect(page); assertAlmostEqual(formatBox.x - selectionRect.x, -99, 5); - assertAlmostEqual(formatBox.y + formatBox.height - selectionRect.top, 68, 5); + assertAlmostEqual(formatBox.y + formatBox.height - selectionRect.top, -10, 5); }); test('should format quick bar action status updated while undo', async ({ @@ -542,7 +548,7 @@ test('should format quick bar work in single block selection', async ({ throw new Error('selectionRect is not found'); } assertAlmostEqual(formatRect.x - selectionRect.x, 147.5, 10); - assertAlmostEqual(formatRect.y - selectionRect.y, 33, 10); + assertAlmostEqual(formatRect.y - selectionRect.y, -48, 10); const boldBtn = formatBar.getByTestId('bold'); await boldBtn.click(); @@ -597,7 +603,7 @@ test('should format quick bar work in multiple block selection', async ({ throw new Error('rect is not found'); } assertAlmostEqual(box.x - rect.x, 147.5, 10); - assertAlmostEqual(box.y - rect.y, 99, 10); + assertAlmostEqual(box.y - rect.y, -48, 10); await formatBarController.boldBtn.click(); await formatBarController.italicBtn.click(); @@ -647,7 +653,7 @@ test('should format quick bar with block selection works when update block type' `${testInfo.title}_init.json` ); - await expect(formatBarController.formatBar).toBeVisible(); + await formatBarController.openParagraphMenu(); await formatBarController.h1Btn.click(); expect(await getPageSnapshot(page, true)).toMatchSnapshot( `${testInfo.title}_final.json` diff --git a/blocksuite/tests-legacy/e2e/link.spec.ts b/blocksuite/tests-legacy/e2e/link.spec.ts index 0682198b16..cfabd48660 100644 --- a/blocksuite/tests-legacy/e2e/link.spec.ts +++ b/blocksuite/tests-legacy/e2e/link.spec.ts @@ -54,18 +54,18 @@ test('basic link', async ({ page }, testInfo) => { // clear text selection await page.keyboard.press('ArrowLeft'); - const viewLinkPopoverLocator = page.locator('.affine-link-popover.view'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); // Hover link - await expect(viewLinkPopoverLocator).not.toBeVisible(); + await expect(toolbar).not.toBeVisible(); await linkLocator.hover(); // wait for popover delay open await page.waitForTimeout(200); - await expect(viewLinkPopoverLocator).toBeVisible(); + await expect(toolbar).toBeVisible(); // Edit link const text2 = 'link2'; const link2 = 'https://github.com'; - const editLinkBtn = viewLinkPopoverLocator.getByTestId('edit'); + const editLinkBtn = toolbar.getByTestId('edit'); await editLinkBtn.click(); const editLinkPopoverLocator = page.locator('.affine-link-edit-popover'); @@ -166,7 +166,7 @@ test('type character after link should not extend the link attributes', async ({ ); }); -test('readonly mode should not trigger link popup', async ({ page }) => { +test('readonly mode should not trigger toolbar', async ({ page }) => { await enterPlaygroundRoom(page); const linkText = 'linkText'; await createLinkBlock(page, 'linkText', 'http://example.com'); @@ -174,9 +174,10 @@ test('readonly mode should not trigger link popup', async ({ page }) => { const linkLocator = page.locator(`text="${linkText}"`); // Hover link - const linkPopoverLocator = page.locator('.affine-link-popover'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); await linkLocator.hover(); - await expect(linkPopoverLocator).toBeVisible(); + await expect(toolbar).toBeVisible(); + await switchReadonly(page); await page.mouse.move(0, 0); @@ -184,7 +185,7 @@ test('readonly mode should not trigger link popup', async ({ page }) => { await page.waitForTimeout(300); await linkLocator.hover(); - await expect(linkPopoverLocator).not.toBeVisible(); + await expect(toolbar).not.toBeVisible(); // --- // press hotkey should not trigger create link popup @@ -192,7 +193,7 @@ test('readonly mode should not trigger link popup', async ({ page }) => { await dragBetweenIndices(page, [0, 0], [0, 3]); await pressCreateLinkShortCut(page); - await expect(linkPopoverLocator).not.toBeVisible(); + await expect(toolbar).not.toBeVisible(); const linkPopoverInput = page.locator('.affine-link-popover-input'); await expect(linkPopoverInput).not.toBeVisible(); }); @@ -237,17 +238,16 @@ test('should keyboard work in link popover', async ({ page }) => { await assertKeyboardWorkInInput(page, linkPopoverInput); await page.mouse.click(500, 500); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); const linkLocator = page.locator(`text="${linkText}"`); - const linkPopover = page.locator('.affine-link-popover'); - await linkLocator.hover(); - await waitNextFrame(page, 200); - await expect(linkLocator).toBeVisible(); - // Hover link + + // hover link await linkLocator.hover(); // wait for popover delay open - await page.waitForTimeout(200); - await expect(linkPopover).toBeVisible(); - const editLinkBtn = linkPopover.getByTestId('edit'); + await page.waitForTimeout(500); + await expect(toolbar).toBeVisible(); + + const editLinkBtn = toolbar.getByTestId('edit'); await editLinkBtn.click(); const editLinkPopover = page.locator('.affine-link-edit-popover'); @@ -347,13 +347,12 @@ test('convert link to card', async ({ page }, testInfo) => { await setSelection(page, 3, 1, 3, 9); await pressCreateLinkShortCut(page); await waitNextFrame(page); - const linkPopoverLocator = page.locator('.affine-link-popover'); - await expect(linkPopoverLocator).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); const linkPopoverInput = page.locator('.affine-link-popover-input'); await expect(linkPopoverInput).toBeVisible(); await type(page, link); await pressEnter(page); - await expect(linkPopoverLocator).not.toBeVisible(); await focusRichText(page, 1); expect(await getPageSnapshot(page, true)).toMatchSnapshot( @@ -364,24 +363,24 @@ test('convert link to card', async ({ page }, testInfo) => { await linkLocator.hover(); await waitNextFrame(page); - await expect(linkPopoverLocator).toBeVisible(); + await expect(toolbar).toBeVisible(); - await page.getByRole('button', { name: 'Switch view' }).click(); - const linkToCardBtn = page.getByTestId('link-to-card'); - const linkToEmbedBtn = page.getByTestId('link-to-embed'); + await toolbar.getByRole('button', { name: 'Switch view' }).click(); + const linkToCardBtn = toolbar.getByTestId('link-to-card'); + const linkToEmbedBtn = toolbar.getByTestId('link-to-embed'); await expect(linkToCardBtn).toBeVisible(); await expect(linkToEmbedBtn).not.toBeVisible(); await page.mouse.move(0, 0); await waitNextFrame(page); - await expect(linkPopoverLocator).not.toBeVisible(); + await expect(toolbar).not.toBeVisible(); await focusRichText(page, 1); await pressTab(page); await linkLocator.hover(); await waitNextFrame(page); - await expect(linkPopoverLocator).toBeVisible(); - await page.getByRole('button', { name: 'Switch view' }).click(); + await expect(toolbar).toBeVisible(); + await toolbar.getByRole('button', { name: 'Switch view' }).click(); await expect(linkToCardBtn).toBeVisible(); await expect(linkToEmbedBtn).not.toBeVisible(); }); @@ -400,13 +399,12 @@ test('convert link to embed', async ({ page }, testInfo) => { await setSelection(page, 3, 1, 3, 9); await pressCreateLinkShortCut(page); await waitNextFrame(page); - const linkPopoverLocator = page.locator('.affine-link-popover'); - await expect(linkPopoverLocator).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); const linkPopoverInput = page.locator('.affine-link-popover-input'); await expect(linkPopoverInput).toBeVisible(); await type(page, link); await pressEnter(page); - await expect(linkPopoverLocator).not.toBeVisible(); await focusRichText(page); expect(await getPageSnapshot(page, true)).toMatchSnapshot( @@ -417,5 +415,5 @@ test('convert link to embed', async ({ page }, testInfo) => { await linkLocator.hover(); await waitNextFrame(page); - await expect(linkPopoverLocator).toBeVisible(); + await expect(toolbar).toBeVisible(); }); diff --git a/blocksuite/tests-legacy/e2e/linked-page.spec.ts b/blocksuite/tests-legacy/e2e/linked-page.spec.ts index a4b51c1e03..0942246b93 100644 --- a/blocksuite/tests-legacy/e2e/linked-page.spec.ts +++ b/blocksuite/tests-legacy/e2e/linked-page.spec.ts @@ -51,13 +51,13 @@ async function createAndConvertToEmbedLinkedDoc(page: Page) { ); await waitNextFrame(page, 200); - const referencePopup = page.locator('.affine-reference-popover-container'); - await expect(referencePopup).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); - const switchButton = page.getByRole('button', { name: 'Switch view' }); + const switchButton = toolbar.getByRole('button', { name: 'Switch view' }); await switchButton.click(); - const embedLinkedDocBtn = page.getByRole('button', { name: 'Card view' }); + const embedLinkedDocBtn = toolbar.getByRole('button', { name: 'Card view' }); await expect(embedLinkedDocBtn).toBeVisible(); await embedLinkedDocBtn.click(); await waitNextFrame(page, 200); @@ -680,8 +680,9 @@ test('linked doc can be dragged from note to surface top level block', async ({ await assertParentBlockFlavour(page, '9', 'affine:surface'); }); +// TODO(@fundon): should move to affine // Aliases -test.describe('Customize linked doc title and description', () => { +test.describe.skip('Customize linked doc title and description', () => { // Inline View test('should set a custom title for inline link', async ({ page }) => { await enterPlaygroundRoom(page); @@ -711,14 +712,14 @@ test.describe('Customize linked doc title and description', () => { await page0.hover(); await waitNextFrame(page, 200); - const referencePopup = page.locator('.affine-reference-popover-container'); - await expect(referencePopup).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); - const editButton = referencePopup.getByRole('button', { name: 'Edit' }); + const editButton = toolbar.getByRole('button', { name: 'Edit' }); await editButton.click(); await waitNextFrame(page, 200); - const popup = page.locator('.alias-form-popup'); + const popup = page.locator('reference-popup .popover-container'); await expect(popup).toBeVisible(); const input = popup.locator('input'); @@ -737,10 +738,10 @@ test.describe('Customize linked doc title and description', () => { await page0Alias.hover(); await waitNextFrame(page, 200); - await expect(referencePopup).toBeVisible(); + await expect(toolbar).toBeVisible(); // original title button - const docTitle = referencePopup.getByRole('button', { name: 'Doc title' }); + const docTitle = toolbar.getByRole('button', { name: 'Doc title' }); await expect(docTitle).toHaveText('title0', { useInnerText: true }); // reedit @@ -757,7 +758,7 @@ test.describe('Customize linked doc title and description', () => { await resetedPage0.hover(); await waitNextFrame(page, 200); - await expect(referencePopup).toBeVisible(); + await expect(toolbar).toBeVisible(); await expect(docTitle).not.toBeVisible(); }); @@ -786,9 +787,9 @@ test.describe('Customize linked doc title and description', () => { await page0.hover(); await waitNextFrame(page, 200); - const referencePopup = page.locator('.affine-reference-popover-container'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); - let editButton = referencePopup.getByRole('button', { name: 'Edit' }); + let editButton = toolbar.getByRole('button', { name: 'Edit' }); await editButton.click(); // title alias @@ -802,13 +803,13 @@ test.describe('Customize linked doc title and description', () => { await page0Alias.hover(); await waitNextFrame(page, 200); - const switchButton = referencePopup.getByRole('button', { + const switchButton = toolbar.getByRole('button', { name: 'Switch view', }); await switchButton.click(); // switches to card view - const toCardButton = referencePopup.getByRole('button', { + const toCardButton = toolbar.getByRole('button', { name: 'Card view', }); await toCardButton.click(); @@ -825,13 +826,12 @@ test.describe('Customize linked doc title and description', () => { await linkedDocBlock.click(); await waitNextFrame(page, 200); - const cardToolbar = page.locator('affine-embed-card-toolbar'); - const docTitleButton = cardToolbar.getByRole('button', { + const docTitleButton = toolbar.getByRole('button', { name: 'Doc title', }); await expect(docTitleButton).toBeVisible(); - editButton = cardToolbar.getByRole('button', { name: 'Edit' }); + editButton = toolbar.getByRole('button', { name: 'Edit' }); await editButton.click(); await waitNextFrame(page, 200); diff --git a/blocksuite/tests-legacy/e2e/multiple-editors/selection.spec.ts b/blocksuite/tests-legacy/e2e/multiple-editors/selection.spec.ts index 7b42798ab8..3f061f64cf 100644 --- a/blocksuite/tests-legacy/e2e/multiple-editors/selection.spec.ts +++ b/blocksuite/tests-legacy/e2e/multiple-editors/selection.spec.ts @@ -28,6 +28,8 @@ test('should only show one format bar when multiple editors are toggled', async await dragBetweenCoords(page, above123, bottomRight789, { steps: 10 }); // should only show one format bar - const formatBar = page.locator('.affine-format-bar-widget'); + const formatBar = page.locator( + 'affine-toolbar-widget editor-toolbar[data-open]' + ); await expect(formatBar).toHaveCount(1); }); diff --git a/blocksuite/tests-legacy/e2e/utils/actions/drag.ts b/blocksuite/tests-legacy/e2e/utils/actions/drag.ts index 0c58cc1fb5..67b4b1daed 100644 --- a/blocksuite/tests-legacy/e2e/utils/actions/drag.ts +++ b/blocksuite/tests-legacy/e2e/utils/actions/drag.ts @@ -202,7 +202,9 @@ export async function dragBlockToPoint( export async function moveToImage(page: Page) { const { x, y } = await page.evaluate(() => { - const bottomRightButton = document.querySelector('img') as HTMLElement; + const bottomRightButton = document.querySelector( + 'affine-image img' + ) as HTMLElement; const imageClient = bottomRightButton.getBoundingClientRect(); const y = imageClient.top; return { diff --git a/blocksuite/tests-legacy/e2e/utils/query.ts b/blocksuite/tests-legacy/e2e/utils/query.ts index d8c40d15af..0f24c1a1ed 100644 --- a/blocksuite/tests-legacy/e2e/utils/query.ts +++ b/blocksuite/tests-legacy/e2e/utils/query.ts @@ -4,7 +4,7 @@ import { waitNextFrame } from './actions/misc.js'; import { assertAlmostEqual } from './asserts.js'; export function getFormatBar(page: Page) { - const formatBar = page.locator('.affine-format-bar-widget'); + const formatBar = page.locator('affine-toolbar-widget editor-toolbar'); const boldBtn = formatBar.getByTestId('bold'); const italicBtn = formatBar.getByTestId('italic'); const underlineBtn = formatBar.getByTestId('underline'); @@ -12,28 +12,26 @@ export function getFormatBar(page: Page) { const codeBtn = formatBar.getByTestId('code'); const linkBtn = formatBar.getByTestId('link'); // highlight - const highlightBtn = formatBar.locator('.highlight-icon'); - const redForegroundBtn = formatBar.getByTestId( - 'var(--affine-text-highlight-foreground-red)' - ); + const highlightBtn = formatBar.getByRole('button', { name: 'highlight' }); + const redForegroundBtn = formatBar.getByTestId('foreground-red'); const createLinkedDocBtn = formatBar.getByTestId('convert-to-linked-doc'); - const defaultColorBtn = formatBar.getByTestId('unset'); + const defaultColorBtn = formatBar.getByTestId('foreground-default'); const highlight = { highlightBtn, redForegroundBtn, defaultColorBtn, }; - const paragraphBtn = formatBar.locator(`.paragraph-button`); + const paragraphBtn = formatBar.getByRole('button', { name: 'Conversions' }); const openParagraphMenu = async () => { await expect(formatBar).toBeVisible(); - await paragraphBtn.hover(); + await paragraphBtn.click(); }; - const textBtn = formatBar.getByTestId('affine:paragraph/text'); - const h1Btn = formatBar.getByTestId('affine:paragraph/h1'); - const bulletedBtn = formatBar.getByTestId('affine:list/bulleted'); - const codeBlockBtn = formatBar.getByTestId('affine:code/'); + const textBtn = formatBar.getByRole('button', { name: 'Text' }); + const h1Btn = formatBar.getByRole('button', { name: 'Heading 1' }); + const bulletedBtn = formatBar.getByRole('button', { name: 'Bulleted List' }); + const codeBlockBtn = formatBar.getByRole('button', { name: 'Code Block' }); const moreBtn = formatBar.getByRole('button', { name: 'More' }); const copyBtn = formatBar.getByRole('button', { name: 'Copy' }); @@ -81,11 +79,11 @@ export function getFormatBar(page: Page) { } export function getEmbedCardToolbar(page: Page) { - const embedCardToolbar = page.locator('.embed-card-toolbar'); + const embedCardToolbar = page.locator('affine-toolbar-widget editor-toolbar'); function createButtonLocator(name: string) { return embedCardToolbar.getByRole('button', { name }); } - const copyButton = createButtonLocator('copy'); + const copyButton = createButtonLocator('copy-link'); const editButton = createButtonLocator('edit'); const cardStyleButton = createButtonLocator('card style'); const captionButton = createButtonLocator('caption'); diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json index ad58c2a149..ef55f9bbbc 100644 --- a/blocksuite/tests-legacy/package.json +++ b/blocksuite/tests-legacy/package.json @@ -16,7 +16,7 @@ "@blocksuite/integration-test": "workspace:*", "@blocksuite/store": "workspace:*", "@playwright/test": "=1.50.1", - "@toeverything/theme": "^1.1.7" + "@toeverything/theme": "^1.1.12" }, "bsImport": { "@atlaskit/pragmatic-drag-and-drop/element/adapter": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js", diff --git a/packages/frontend/core/src/blocksuite/ai/entries/format-bar/setup-format-bar.ts b/packages/frontend/core/src/blocksuite/ai/entries/format-bar/setup-format-bar.ts index 425b8a93c6..36b7aa1347 100644 --- a/packages/frontend/core/src/blocksuite/ai/entries/format-bar/setup-format-bar.ts +++ b/packages/frontend/core/src/blocksuite/ai/entries/format-bar/setup-format-bar.ts @@ -1,44 +1,28 @@ import '../../components/ask-ai-button'; import { - type AffineFormatBarWidget, - toolbarDefaultConfig, + ActionPlacement, + type ToolbarModuleConfig, } from '@blocksuite/affine/blocks'; -import { html, type TemplateResult } from 'lit'; +import { html } from 'lit'; import { pageAIGroups } from '../../_common/config'; -export function setupFormatBarAIEntry(formatBar: AffineFormatBarWidget) { - toolbarDefaultConfig(formatBar); - formatBar.addRawConfigItems( - [ +export function toolbarAIEntryConfig(): ToolbarModuleConfig { + return { + actions: [ { - type: 'custom' as const, - render(formatBar: AffineFormatBarWidget): TemplateResult | null { - const richText = getRichText(); - if (richText?.dataset.disableAskAi !== undefined) return null; - return html` - - `; - }, + placement: ActionPlacement.Start, + id: 'A.ai', + score: -1, + when: ({ flags }) => !flags.isNative(), + content: ({ host }) => html` + + `, }, - { type: 'divider' }, ], - 0 - ); + }; } -const getRichText = () => { - const selection = getSelection(); - if (!selection) return null; - if (selection.rangeCount === 0) return null; - const range = selection.getRangeAt(0); - const commonAncestorContainer = - range.commonAncestorContainer instanceof Element - ? range.commonAncestorContainer - : range.commonAncestorContainer.parentElement; - if (!commonAncestorContainer) return null; - return commonAncestorContainer.closest('rich-text'); -}; diff --git a/packages/frontend/core/src/blocksuite/ai/extensions/ai-edgeless-root.ts b/packages/frontend/core/src/blocksuite/ai/extensions/ai-edgeless-root.ts index cde2d31f0c..d169cc2489 100644 --- a/packages/frontend/core/src/blocksuite/ai/extensions/ai-edgeless-root.ts +++ b/packages/frontend/core/src/blocksuite/ai/extensions/ai-edgeless-root.ts @@ -1,19 +1,22 @@ -import { LifeCycleWatcher } from '@blocksuite/affine/block-std'; import { - AffineFormatBarWidget, + BlockFlavourIdentifier, + LifeCycleWatcher, +} from '@blocksuite/affine/block-std'; +import { AffineSlashMenuWidget, EdgelessElementToolbarWidget, EdgelessRootBlockSpec, + ToolbarModuleExtension, } from '@blocksuite/affine/blocks'; import type { ExtensionType } from '@blocksuite/affine/store'; import type { FrameworkProvider } from '@toeverything/infra'; import { buildAIPanelConfig } from '../ai-panel'; +import { toolbarAIEntryConfig } from '../entries'; import { setupEdgelessCopilot, setupEdgelessElementToolbarAIEntry, } from '../entries/edgeless/index'; -import { setupFormatBarAIEntry } from '../entries/format-bar/setup-format-bar'; import { setupSlashMenuAIEntry } from '../entries/slash-menu/setup-slash-menu'; import { setupSpaceAIEntry } from '../entries/space/setup-space'; import { CopilotTool } from '../tool/copilot-tool'; @@ -35,6 +38,10 @@ export function createAIEdgelessRootBlockSpec( aiPanelWidget, edgelessCopilotWidget, getAIEdgelessRootWatcher(framework), + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:note'), + config: toolbarAIEntryConfig(), + }), ]; } @@ -64,10 +71,6 @@ function getAIEdgelessRootWatcher(framework: FrameworkProvider) { setupEdgelessElementToolbarAIEntry(component); } - if (component instanceof AffineFormatBarWidget) { - setupFormatBarAIEntry(component); - } - if (component instanceof AffineSlashMenuWidget) { setupSlashMenuAIEntry(component); } diff --git a/packages/frontend/core/src/blocksuite/ai/extensions/ai-page-root.ts b/packages/frontend/core/src/blocksuite/ai/extensions/ai-page-root.ts index c8ec4f7fb1..168dbf718e 100644 --- a/packages/frontend/core/src/blocksuite/ai/extensions/ai-page-root.ts +++ b/packages/frontend/core/src/blocksuite/ai/extensions/ai-page-root.ts @@ -1,14 +1,17 @@ -import { LifeCycleWatcher } from '@blocksuite/affine/block-std'; import { - AffineFormatBarWidget, + BlockFlavourIdentifier, + LifeCycleWatcher, +} from '@blocksuite/affine/block-std'; +import { AffineSlashMenuWidget, PageRootBlockSpec, + ToolbarModuleExtension, } from '@blocksuite/affine/blocks'; import type { ExtensionType } from '@blocksuite/affine/store'; import type { FrameworkProvider } from '@toeverything/infra'; import { buildAIPanelConfig } from '../ai-panel'; -import { setupFormatBarAIEntry } from '../entries/format-bar/setup-format-bar'; +import { toolbarAIEntryConfig } from '../entries'; import { setupSlashMenuAIEntry } from '../entries/slash-menu/setup-slash-menu'; import { setupSpaceAIEntry } from '../entries/space/setup-space'; import { @@ -34,10 +37,6 @@ function getAIPageRootWatcher(framework: FrameworkProvider) { setupSpaceAIEntry(component); } - if (component instanceof AffineFormatBarWidget) { - setupFormatBarAIEntry(component); - } - if (component instanceof AffineSlashMenuWidget) { setupSlashMenuAIEntry(component); } @@ -50,5 +49,13 @@ function getAIPageRootWatcher(framework: FrameworkProvider) { export function createAIPageRootBlockSpec( framework: FrameworkProvider ): ExtensionType[] { - return [...PageRootBlockSpec, aiPanelWidget, getAIPageRootWatcher(framework)]; + return [ + ...PageRootBlockSpec, + aiPanelWidget, + getAIPageRootWatcher(framework), + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:note'), + config: toolbarAIEntryConfig(), + }), + ]; } diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts index 0278e40092..c064902294 100644 --- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts +++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts @@ -4,7 +4,6 @@ import { } from '@blocksuite/affine/block-std'; import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx'; import { - AFFINE_FORMAT_BAR_WIDGET, AFFINE_VIEWPORT_OVERLAY_WIDGET, type AffineViewportOverlayWidget, DocModeProvider, @@ -12,6 +11,8 @@ import { NotificationProvider, stopPropagation, ThemeProvider, + ToolbarFlag, + ToolbarRegistryIdentifier, } from '@blocksuite/affine/blocks'; import type { BaseSelection } from '@blocksuite/affine/store'; import { @@ -519,27 +520,24 @@ export class AffineAIPanelWidget extends WidgetComponent { protected override willUpdate(changed: PropertyValues): void { const prevState = changed.get('state'); if (prevState) { - if (prevState === 'hidden') { + const shouldBeHidden = prevState === 'hidden'; + + if (shouldBeHidden) { this._selection = this.host.selection.value; } else { this.restoreSelection(); } - // tell format bar to show or hide - const rootBlockId = this.host.doc.root?.id; - const formatBar = rootBlockId - ? this.host.view.getWidget(AFFINE_FORMAT_BAR_WIDGET, rootBlockId) - : null; - - if (formatBar) { - formatBar.requestUpdate(); - } + // tell toolbar to show or hide + this.std + .get(ToolbarRegistryIdentifier) + .flags.toggle(ToolbarFlag.Hiding, shouldBeHidden); } - if (this.state !== 'hidden') { - this.viewportOverlayWidget?.lock(); - } else { + if (this.state === 'hidden') { this.viewportOverlayWidget?.unlock(); + } else { + this.viewportOverlayWidget?.lock(); } this.dataset.state = this.state; diff --git a/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts b/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts index d35a3ba349..7f8563ac30 100644 --- a/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts +++ b/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts @@ -1,3 +1,4 @@ +import { WorkspaceServerService } from '@affine/core/modules/cloud'; import { EditorSettingService } from '@affine/core/modules/editor-setting'; import { DatabaseConfigExtension, @@ -10,12 +11,18 @@ import type { FrameworkProvider } from '@toeverything/infra'; import { createDatabaseOptionsConfig } from './database'; import { createLinkedWidgetConfig } from './linked'; -import { createToolbarMoreMenuConfig } from './toolbar'; +import { + createCustomToolbarExtension, + createToolbarMoreMenuConfig, +} from './toolbar'; export function getEditorConfigExtension( framework: FrameworkProvider ): ExtensionType[] { const editorSettingService = framework.get(EditorSettingService); + const workspaceServerService = framework.get(WorkspaceServerService); + const baseUrl = workspaceServerService.server?.baseUrl ?? location.origin; + return [ EditorSettingExtension(editorSettingService.editorSetting.settingSignal), DatabaseConfigExtension(createDatabaseOptionsConfig(framework)), @@ -23,5 +30,7 @@ export function getEditorConfigExtension( linkedWidget: createLinkedWidgetConfig(framework), }), ToolbarMoreMenuConfigExtension(createToolbarMoreMenuConfig(framework)), - ]; + + createCustomToolbarExtension(baseUrl), + ].flat(); } diff --git a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts index 78b3e591ae..111230b6e7 100644 --- a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts +++ b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts @@ -8,13 +8,66 @@ import { EditorService } from '@affine/core/modules/editor'; import { copyLinkToBlockStdScopeClipboard } from '@affine/core/utils/clipboard'; import { I18n } from '@affine/i18n'; import { track } from '@affine/track'; -import type { +import { + BlockFlavourIdentifier, + BlockSelection, + TextSelection, +} from '@blocksuite/affine/block-std'; +import { GfxBlockElementModel, GfxPrimitiveElementModel, } from '@blocksuite/affine/block-std/gfx'; -import type { MenuContext, MenuItemGroup } from '@blocksuite/affine/blocks'; -import { LinkIcon } from '@blocksuite/icons/lit'; +import { + ActionPlacement, + AffineReference, + BookmarkBlockComponent, + BookmarkBlockModel, + EmbedFigmaBlockComponent, + EmbedGithubBlockComponent, + EmbedLinkedDocBlockComponent, + EmbedLinkedDocModel, + EmbedLoomBlockComponent, + EmbedSyncedDocBlockComponent, + EmbedSyncedDocModel, + EmbedYoutubeBlockComponent, + GenerateDocUrlProvider, + getDocContentWithMaxLength, + getSelectedModelsCommand, + ImageSelection, + isPeekable, + matchModels, + type MenuContext, + type MenuItemGroup, + notifyLinkedDocClearedAliases, + notifyLinkedDocSwitchedToCard, + type OpenDocMode, + peek, + toast, + toggleEmbedCardEditModal, + toggleReferencePopup, + type ToolbarAction, + type ToolbarActionGroup, + type ToolbarContext, + type ToolbarModuleConfig, + ToolbarModuleExtension, +} from '@blocksuite/affine/blocks'; +import type { ExtensionType } from '@blocksuite/affine/store'; +import { + ArrowDownSmallIcon, + CenterPeekIcon, + CopyAsImgaeIcon, + CopyIcon, + EditIcon, + ExpandFullIcon, + LinkIcon, + OpenInNewIcon, + SplitViewIcon, +} from '@blocksuite/icons/lit'; import type { FrameworkProvider } from '@toeverything/infra'; +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { keyed } from 'lit/directives/keyed.js'; +import { repeat } from 'lit/directives/repeat.js'; import { createCopyAsPngMenuItem } from './copy-as-image'; @@ -136,3 +189,673 @@ function createCopyLinkToBlockMenuItem( }, }; } + +function createToolbarMoreMenuConfigV2(baseUrl?: string) { + return { + actions: [ + { + placement: ActionPlacement.More, + id: 'a.clipboard', + actions: [ + { + id: 'copy-as-image', + label: 'Copy as Image', + icon: CopyAsImgaeIcon(), + when: ({ isEdgelessMode, gfx }) => + isEdgelessMode && gfx.selection.selectedElements.length > 0, + }, + { + id: 'copy-link-to-block', + label: 'Copy link to block', + icon: LinkIcon(), + when: ({ isPageMode, selection, gfx }) => { + const items = selection + .getGroup('note') + .filter(item => + [TextSelection, BlockSelection, ImageSelection].some(t => + item.is(t) + ) + ); + const hasNoteSelection = items.length > 0; + + if (isPageMode) { + const item = items[0]; + if (item && item.is(TextSelection)) { + return ( + !item.isCollapsed() && + Boolean(item.from.length + (item.to?.length ?? 0)) + ); + } + return hasNoteSelection; + } + + // Linking blocks in notes is currently not supported under edgeless. + if (hasNoteSelection) return false; + + // Linking single block/element in edgeless mode. + return gfx.selection.selectedElements.length === 1; + }, + run({ isPageMode, std, store, gfx, workspace, editorMode }) { + const pageId = store.doc.id; + const mode = editorMode; + const workspaceId = workspace.id; + const options: UseSharingUrl = { workspaceId, pageId, mode }; + let type = ''; + + if (isPageMode) { + const [ok, { selectedModels = [] }] = std.command.exec( + getSelectedModelsCommand + ); + + if (!ok || !selectedModels.length) return; + + options.blockIds = selectedModels.map(model => model.id); + type = selectedModels[0].flavour; + } else { + const firstElement = gfx.selection.firstElement; + if (!firstElement) return; + + const ids = [firstElement.id]; + if (firstElement instanceof GfxPrimitiveElementModel) { + type = firstElement.type; + options.elementIds = ids; + } else if (firstElement instanceof GfxBlockElementModel) { + type = firstElement.flavour; + options.blockIds = ids; + } + } + + if (!type) return; + + const str = generateUrl({ + ...options, + baseUrl: baseUrl ?? location.origin, + }); + + if (!str) return; + + copyLinkToBlockStdScopeClipboard(str, std.clipboard) + .then(ok => { + if (!ok) return; + + notify.success({ title: I18n['Copied link to clipboard']() }); + }) + .catch(console.error); + + track.doc.editor.toolbar.copyBlockToLink({ type }); + }, + }, + ], + }, + ], + } as const satisfies ToolbarModuleConfig; +} + +function createExternalLinkableToolbarConfig( + kclass: + | typeof BookmarkBlockComponent + | typeof EmbedFigmaBlockComponent + | typeof EmbedGithubBlockComponent + | typeof EmbedLoomBlockComponent + | typeof EmbedYoutubeBlockComponent +) { + return { + actions: [ + { + id: 'a.preview.after.copy-link-and-edit', + actions: [ + { + id: 'copy-link', + tooltip: 'Copy link', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentBlockComponentBy( + BlockSelection, + kclass + )?.model; + if (!model) return; + + const { url } = model; + + navigator.clipboard.writeText(url).catch(console.error); + toast(ctx.host, 'Copied link to clipboard'); + + ctx.track('CopiedLink', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: matchModels(model, [BookmarkBlockModel]) + ? 'bookmark' + : 'link', + type: 'card view', + control: 'copy link', + }); + }, + }, + { + id: 'edit', + tooltip: 'Edit', + icon: EditIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + kclass + ); + if (!component) return; + + ctx.hide(); + + const model = component.model; + const abortController = new AbortController(); + abortController.signal.onabort = () => ctx.show(); + + toggleEmbedCardEditModal( + ctx.host, + model, + 'card', + undefined, + undefined, + (_std, _component, props) => { + ctx.store.updateBlock(model, props); + component.requestUpdate(); + }, + abortController + ); + + ctx.track('OpenedAliasPopup', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: matchModels(model, [BookmarkBlockModel]) + ? 'bookmark' + : 'link', + type: 'card view', + control: 'edit', + }); + }, + }, + ], + }, + ], + } as const satisfies ToolbarModuleConfig; +} + +const openDocActions = [ + { + id: 'open-in-active-view', + label: I18n['com.affine.peek-view-controls.open-doc'](), + icon: ExpandFullIcon(), + }, + { + id: 'open-in-new-view', + label: I18n['com.affine.peek-view-controls.open-doc-in-split-view'](), + icon: SplitViewIcon(), + when: () => BUILD_CONFIG.isElectron, + }, + { + id: 'open-in-new-tab', + label: I18n['com.affine.peek-view-controls.open-doc-in-new-tab'](), + icon: OpenInNewIcon(), + }, + { + id: 'open-in-center-peek', + label: I18n['com.affine.peek-view-controls.open-doc-in-center-peek'](), + icon: CenterPeekIcon(), + }, +] as const satisfies ToolbarAction[]; + +function createOpenDocActionGroup( + klass: + | typeof EmbedLinkedDocBlockComponent + | typeof EmbedSyncedDocBlockComponent +) { + return { + placement: ActionPlacement.Start, + id: 'A.open-doc', + actions: openDocActions, + content(ctx) { + const component = ctx.getCurrentBlockComponentBy(BlockSelection, klass); + if (!component) return null; + + const actions = this.actions + .map(action => { + const shouldOpenInCenterPeek = action.id === 'open-in-center-peek'; + const shouldOpenInActiveView = action.id === 'open-in-active-view'; + const allowed = + typeof action.when === 'function' + ? action.when(ctx) + : (action.when ?? true); + return { + ...action, + disabled: shouldOpenInActiveView + ? component.model.pageId === ctx.store.id + : false, + when: + allowed && + (shouldOpenInCenterPeek ? isPeekable(component) : true), + run: shouldOpenInCenterPeek + ? (_ctx: ToolbarContext) => peek(component) + : (_ctx: ToolbarContext) => + component.open({ + openMode: action.id as OpenDocMode, + }), + }; + }) + .filter(action => { + if (typeof action.when === 'function') return action.when(ctx); + return action.when ?? true; + }); + + return html` + + ${OpenInNewIcon()} ${ArrowDownSmallIcon()} + + `} + > +
+ ${repeat( + actions, + action => action.id, + ({ label, icon, run, disabled }) => html` + run?.(ctx)} + > + ${icon}${label} + + ` + )} +
+ + `; + }, + } satisfies ToolbarActionGroup; +} + +const embedLinkedDocToolbarConfig = { + actions: [ + createOpenDocActionGroup(EmbedLinkedDocBlockComponent), + { + id: 'a.doc-title.after.copy-link-and-edit', + actions: [ + { + id: 'copy-link', + tooltip: 'Copy link', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + EmbedLinkedDocModel + ); + if (!model) return; + + const { pageId, params } = model; + + const url = ctx.std + .getOptional(GenerateDocUrlProvider) + ?.generateDocUrl(pageId, params); + + if (!url) return; + + navigator.clipboard.writeText(url).catch(console.error); + toast(ctx.host, 'Copied link to clipboard'); + + ctx.track('CopiedLink', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'card view', + control: 'copy link', + }); + }, + }, + { + id: 'edit', + tooltip: 'Edit', + icon: EditIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedLinkedDocBlockComponent + ); + if (!component) return; + + ctx.hide(); + + const model = component.model; + const doc = ctx.workspace.getDoc(model.pageId); + const abortController = new AbortController(); + abortController.signal.onabort = () => ctx.show(); + + toggleEmbedCardEditModal( + ctx.host, + component.model, + 'card', + doc + ? { + title: doc.meta?.title, + description: getDocContentWithMaxLength(doc), + } + : undefined, + std => { + component.refreshData(); + notifyLinkedDocClearedAliases(std); + }, + (_std, _component, props) => { + ctx.store.updateBlock(model, props); + component.requestUpdate(); + }, + abortController + ); + + ctx.track('OpenedAliasPopup', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'embed view', + control: 'edit', + }); + }, + }, + ], + }, + ], +} as const satisfies ToolbarModuleConfig; + +const embedSyncedDocToolbarConfig = { + actions: [ + createOpenDocActionGroup(EmbedSyncedDocBlockComponent), + { + placement: ActionPlacement.Start, + id: 'B.copy-link-and-edit', + actions: [ + { + id: 'copy-link', + tooltip: 'Copy link', + icon: CopyIcon(), + run(ctx) { + const model = ctx.getCurrentModelByType( + BlockSelection, + EmbedSyncedDocModel + ); + if (!model) return; + + const { pageId, params } = model; + + const url = ctx.std + .getOptional(GenerateDocUrlProvider) + ?.generateDocUrl(pageId, params); + + if (!url) return; + + navigator.clipboard.writeText(url).catch(console.error); + toast(ctx.host, 'Copied link to clipboard'); + + ctx.track('CopiedLink', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'embed view', + control: 'copy link', + }); + }, + }, + { + id: 'edit', + tooltip: 'Edit', + icon: EditIcon(), + run(ctx) { + const component = ctx.getCurrentBlockComponentBy( + BlockSelection, + EmbedSyncedDocBlockComponent + ); + if (!component) return; + + ctx.hide(); + + const model = component.model; + const doc = ctx.workspace.getDoc(model.pageId); + const abortController = new AbortController(); + abortController.signal.onabort = () => ctx.show(); + + toggleEmbedCardEditModal( + ctx.host, + model, + 'embed', + doc ? { title: doc.meta?.title } : undefined, + undefined, + (std, _component, props) => { + component.convertToCard(props); + + notifyLinkedDocSwitchedToCard(std); + }, + abortController + ); + + ctx.track('OpenedAliasPopup', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'embed view', + control: 'edit', + }); + }, + }, + ], + }, + ], +} as const satisfies ToolbarModuleConfig; + +const inlineReferenceToolbarConfig = { + actions: [ + { + placement: ActionPlacement.Start, + id: 'A.open-doc', + actions: openDocActions, + content(ctx) { + const registry = ctx.toolbarRegistry; + const target = registry.message$.peek()?.element; + if (!(target instanceof AffineReference)) return null; + + const actions = this.actions + .map(action => { + const shouldOpenInCenterPeek = action.id === 'open-in-center-peek'; + const shouldOpenInActiveView = action.id === 'open-in-active-view'; + const allowed = + typeof action.when === 'function' + ? action.when(ctx) + : (action.when ?? true); + return { + ...action, + disabled: shouldOpenInActiveView + ? target.referenceInfo.pageId === ctx.store.id + : false, + when: + allowed && (shouldOpenInCenterPeek ? isPeekable(target) : true), + run: shouldOpenInCenterPeek + ? (_ctx: ToolbarContext) => peek(target) + : (_ctx: ToolbarContext) => + target.open({ + openMode: action.id as OpenDocMode, + }), + }; + }) + .filter(action => { + if (typeof action.when === 'function') return action.when(ctx); + return action.when ?? true; + }); + + return html`${keyed( + target, + html` + + ${OpenInNewIcon()} ${ArrowDownSmallIcon()} + + `} + > +
+ ${repeat( + actions, + action => action.id, + ({ label, icon, run, disabled }) => html` + run?.(ctx)} + > + ${icon}${label} + + ` + )} +
+ + ` + )}`; + }, + } satisfies ToolbarActionGroup, + { + id: 'b.copy-link-and-edit', + actions: [ + { + id: 'copy-link', + tooltip: 'Copy link', + icon: CopyIcon(), + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return; + + const { pageId, params } = target.referenceInfo; + + const url = ctx.std + .getOptional(GenerateDocUrlProvider) + ?.generateDocUrl(pageId, params); + + if (!url) return; + + // Clears + ctx.reset(); + + navigator.clipboard.writeText(url).catch(console.error); + toast(ctx.host, 'Copied link to clipboard'); + + ctx.track('CopiedLink', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'inline view', + control: 'copy link', + }); + }, + }, + { + id: 'edit', + tooltip: 'Edit', + icon: EditIcon(), + run(ctx) { + const target = ctx.message$.peek()?.element; + if (!(target instanceof AffineReference)) return; + + // Clears + ctx.reset(); + + const { inlineEditor, selfInlineRange, docTitle, referenceInfo } = + target; + if (!inlineEditor || !selfInlineRange) return; + + const abortController = new AbortController(); + const popover = toggleReferencePopup( + ctx.std, + docTitle, + referenceInfo, + inlineEditor, + selfInlineRange, + abortController + ); + abortController.signal.onabort = () => popover.remove(); + + ctx.track('OpenedAliasPopup', { + segment: 'doc', + page: 'doc editor', + module: 'toolbar', + category: 'linked doc', + type: 'inline view', + control: 'edit', + }); + }, + }, + ], + }, + ], +} as const satisfies ToolbarModuleConfig; + +export const createCustomToolbarExtension = ( + baseUrl: string +): ExtensionType[] => { + return [ + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:*'), + config: createToolbarMoreMenuConfigV2(baseUrl), + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:bookmark'), + config: createExternalLinkableToolbarConfig(BookmarkBlockComponent), + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:embed-figma'), + config: createExternalLinkableToolbarConfig(EmbedFigmaBlockComponent), + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:embed-github'), + config: createExternalLinkableToolbarConfig(EmbedGithubBlockComponent), + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:embed-loom'), + config: createExternalLinkableToolbarConfig(EmbedLoomBlockComponent), + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:embed-youtube'), + config: createExternalLinkableToolbarConfig(EmbedYoutubeBlockComponent), + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:embed-linked-doc'), + config: embedLinkedDocToolbarConfig, + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:embed-synced-doc'), + config: embedSyncedDocToolbarConfig, + }), + + ToolbarModuleExtension({ + id: BlockFlavourIdentifier('custom:affine:reference'), + config: inlineReferenceToolbarConfig, + }), + ]; +}; diff --git a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts index d94266c6c4..a5e034585c 100644 --- a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts +++ b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts @@ -13,14 +13,13 @@ import type { import { codeToolbarWidget, DocModeProvider, - embedCardToolbarWidget, FeatureFlagService, - formatBarWidget, imageToolbarWidget, ParagraphBlockService, ReferenceNodeConfigIdentifier, slashMenuWidget, surfaceRefToolbarWidget, + toolbarWidget, VirtualKeyboardProvider as BSVirtualKeyboardProvider, } from '@blocksuite/affine/blocks'; import type { @@ -167,11 +166,10 @@ export function enableMobileExtension( specBuilder: SpecBuilder, framework: FrameworkProvider ): void { - specBuilder.omit(formatBarWidget); - specBuilder.omit(embedCardToolbarWidget); specBuilder.omit(slashMenuWidget); specBuilder.omit(codeToolbarWidget); specBuilder.omit(imageToolbarWidget); specBuilder.omit(surfaceRefToolbarWidget); + specBuilder.omit(toolbarWidget); specBuilder.extend([MobileSpecsPatches, KeyboardToolbarExtension(framework)]); } diff --git a/tests/affine-cloud-copilot/e2e/copilot.spec.ts b/tests/affine-cloud-copilot/e2e/copilot.spec.ts index ea770eb5fe..dcb067bcd6 100644 --- a/tests/affine-cloud-copilot/e2e/copilot.spec.ts +++ b/tests/affine-cloud-copilot/e2e/copilot.spec.ts @@ -269,7 +269,7 @@ test.describe('chat panel', () => { await focusToEditor(page); // insert below await page.getByTestId('action-insert-below').click(); - await page.waitForSelector('affine-format-bar-widget editor-toolbar'); + await page.waitForSelector('affine-toolbar-widget editor-toolbar'); const editorContent = await getEditorContent(page); expect(editorContent).toBe(content); }); diff --git a/tests/affine-local/e2e/attachment-preview.spec.ts b/tests/affine-local/e2e/attachment-preview.spec.ts index 79492ee7f6..8c719177fa 100644 --- a/tests/affine-local/e2e/attachment-preview.spec.ts +++ b/tests/affine-local/e2e/attachment-preview.spec.ts @@ -157,14 +157,14 @@ test('should preview PDF in embed view', async ({ page }) => { await insertAttachment(page, fixturesDir.join('lorem-ipsum.pdf').value); const attachment = page.locator('affine-attachment'); - await attachment.hover(); + await attachment.click(); - const attachmentToolbar = page.locator('.affine-attachment-toolbar'); - await expect(attachmentToolbar).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); // Switches to embed view - await attachmentToolbar.getByRole('button', { name: 'Switch view' }).click(); - await attachmentToolbar.getByRole('button', { name: 'Embed view' }).click(); + await toolbar.getByRole('button', { name: 'Switch view' }).click(); + await toolbar.getByRole('button', { name: 'Embed view' }).click(); await page.waitForTimeout(500); @@ -207,7 +207,6 @@ test('should preview PDF in embed view', async ({ page }) => { await doc1.click(); const inlineLink = page.locator('affine-reference').nth(0); - const inlineToolbar = page.locator('reference-popup'); const inlineTitle = inlineLink.locator('.affine-reference-title'); await expect(inlineTitle).toHaveText('PDF preview'); @@ -219,10 +218,10 @@ test('should preview PDF in embed view', async ({ page }) => { await page.waitForTimeout(500); await page.mouse.click(bouding!.x - 50, bouding!.y + bouding!.height / 2); - await inlineLink.hover({ timeout: 500 }); + await inlineLink.hover(); // Edits title - await inlineToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); // Title alias await page.keyboard.type('PDF embed preview'); @@ -264,10 +263,10 @@ test('should sync name in pdf embed view', async ({ page }) => { await insertAttachment(page, fixturesDir.join('lorem-ipsum.pdf').value); const attachment = page.locator('affine-attachment'); - await attachment.hover(); + await attachment.click(); - const attachmentToolbar = page.locator('.affine-attachment-toolbar'); - await expect(attachmentToolbar).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); const attachmentTitle = attachment.locator( '.affine-attachment-content-title-text' @@ -275,7 +274,7 @@ test('should sync name in pdf embed view', async ({ page }) => { await expect(attachmentTitle).toHaveText('lorem-ipsum.pdf'); // Renames - await attachmentToolbar.getByRole('button', { name: 'Rename' }).click(); + await toolbar.getByRole('button', { name: 'Rename' }).click(); const input = page .locator('.affine-attachment-rename-input-wrapper') .locator('input'); @@ -283,11 +282,11 @@ test('should sync name in pdf embed view', async ({ page }) => { await page.keyboard.press('Enter'); await expect(attachmentTitle).toHaveText('What is Lorem Ipsum.pdf'); - await attachment.hover(); + await attachment.click(); // Switches to embed view - await attachmentToolbar.getByRole('button', { name: 'Switch view' }).click(); - await attachmentToolbar.getByRole('button', { name: 'Embed view' }).click(); + await toolbar.getByRole('button', { name: 'Switch view' }).click(); + await toolbar.getByRole('button', { name: 'Embed view' }).click(); await page.waitForTimeout(500); @@ -298,10 +297,10 @@ test('should sync name in pdf embed view', async ({ page }) => { await page.waitForTimeout(500); await expect(portalName).toHaveText('What is Lorem Ipsum.pdf'); - await attachment.hover(); + await attachment.click(); // Renames - await attachmentToolbar.getByRole('button', { name: 'Rename' }).click(); + await toolbar.getByRole('button', { name: 'Rename' }).click(); await input.fill('lorem-ipsum'); await page.keyboard.press('Enter'); await expect(portalName).toHaveText('lorem-ipsum.pdf'); diff --git a/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts b/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts index 9cde758522..67d8d834a7 100644 --- a/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts +++ b/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts @@ -47,9 +47,9 @@ test('should not show hidden note in embed view page mode', async ({ // switch to embed view await inlineLink.hover(); - const inlineToolbar = page.locator('reference-popup'); - await inlineToolbar.getByLabel('Switch view').click(); - await inlineToolbar.getByLabel('Embed view').click(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await toolbar.getByLabel('Switch view').click(); + await toolbar.getByLabel('Embed view').click(); // check the content const embedLink = page.locator('affine-embed-synced-doc-block'); diff --git a/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts b/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts index 4aff3cd115..be1a869f6c 100644 --- a/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts +++ b/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts @@ -187,16 +187,11 @@ test('outline viewer should be useable in doc peek preview', async ({ await page.locator('affine-reference').hover(); - await expect( - page.locator('.affine-reference-popover-container') - ).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); - await page - .locator('editor-menu-button editor-icon-button[aria-label="Open doc"]') - .click(); - await page - .locator('editor-menu-action:has-text("Open in center peek")') - .click(); + await toolbar.getByLabel('Open doc').click(); + await toolbar.getByLabel('Open in center peek').click(); const peekView = page.getByTestId('peek-view-modal'); await expect(peekView).toBeVisible(); diff --git a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts index b9fd823fbe..e0992e511d 100644 --- a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts +++ b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts @@ -34,15 +34,15 @@ test('heading icon should be updated after change heading level', async ({ await selectAllByKeyboard(page); const formatBar = locateFormatBar(page); - await formatBar.locator('.paragraph-button').hover(); - await formatBar.getByTestId('affine:paragraph/h1').click(); + await formatBar.getByLabel('Conversions').click(); + await formatBar.getByLabel('Heading 1').click(); await paragraph.hover(); await expect(page.getByTestId('heading-icon-1')).toBeVisible(); await selectAllByKeyboard(page); - await formatBar.locator('.paragraph-button').hover(); - await formatBar.getByTestId('affine:paragraph/h2').click(); + await formatBar.getByLabel('Conversions').click(); + await formatBar.getByLabel('Heading 2').click(); await paragraph.hover(); await expect(page.getByTestId('heading-icon-1')).toBeHidden(); diff --git a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts index a3bcca4964..d1be7de761 100644 --- a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts +++ b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts @@ -7,6 +7,27 @@ import { } from '@affine-test/kit/utils/page-logic'; import { expect } from '@playwright/test'; +function hexToRGB(hex: string) { + hex = hex.replace(/^#/, ''); + const len = hex.length; + let arr: string[] = []; + + if (len === 3 || len === 4) { + arr = hex.split('').map(s => s.repeat(2)); + } else if (len === 6 || len === 8) { + arr = Array.from({ length: len / 2 }) + .fill(0) + .map((n, i) => n + i * 2) + .map(n => hex.substring(n, n + 2)); + } + + const values = arr + .map(s => parseInt(s, 16)) + .map((n, i) => (i === 3 ? (n % 255) / 255 : n)); + + return `rgb${values.length === 4 ? 'a' : ''}(${values.join(', ')})`; +} + test.beforeEach(async ({ page }) => { await openHomePage(page); await clickNewPageButton(page); @@ -23,26 +44,25 @@ test.describe('Formatting', () => { await page.keyboard.press('Shift+ArrowLeft'); const formatBar = locateFormatBar(page); - await formatBar.locator('.highlight-icon').hover(); - const fgGreenButton = formatBar.locator( - '[data-testid="var(--affine-text-highlight-foreground-green)"]' - ); + const highlightButton = formatBar.locator('affine-highlight-duotone-icon'); + + await highlightButton.click(); + + const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]'); await fgGreenButton.click(); - const fgColor1 = await fgGreenButton - .locator('span') - .evaluate(e => window.getComputedStyle(e).getPropertyValue('color')); + const fgColor = await fgGreenButton + .locator('affine-text-duotone-icon') + .evaluate(e => window.getComputedStyle(e).getPropertyValue('--color')); const paragraph = page.locator('affine-paragraph'); const textSpan = paragraph .locator('affine-text:has-text("rld")') .locator('span') .first(); - await expect(textSpan).toBeVisible(); - const fgColor2 = await textSpan.evaluate(e => - window.getComputedStyle(e).getPropertyValue('color') - ); - expect(fgColor1).toBe(fgColor2); + await expect(textSpan).toBeVisible(); + + await expect(textSpan).toHaveCSS('color', hexToRGB(fgColor)); }); test('should change text background color', async ({ page }) => { @@ -54,26 +74,26 @@ test.describe('Formatting', () => { await page.keyboard.press('Shift+ArrowLeft'); const formatBar = locateFormatBar(page); - await formatBar.locator('.highlight-icon').hover(); + const highlightButton = formatBar.locator('affine-highlight-duotone-icon'); - const fgGreenButton = formatBar.locator( - '[data-testid="var(--affine-text-highlight-foreground-green)"]' - ); + await highlightButton.click(); + + const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]'); await fgGreenButton.click(); - const fgColor1 = await fgGreenButton - .locator('span') - .evaluate(e => window.getComputedStyle(e).getPropertyValue('color')); + + await page.waitForTimeout(200); + + const fgColor = await fgGreenButton + .locator('affine-text-duotone-icon') + .evaluate(e => window.getComputedStyle(e).getPropertyValue('--color')); const paragraph = page.locator('affine-paragraph'); const textSpan1 = paragraph .locator('affine-text:has-text("rld")') .locator('span') .first(); - const fgColor2 = await textSpan1.evaluate(e => - window.getComputedStyle(e).getPropertyValue('color') - ); - expect(fgColor1).toBe(fgColor2); + await expect(textSpan1).toHaveCSS('color', hexToRGB(fgColor)); await page.keyboard.press('ArrowRight'); @@ -81,10 +101,12 @@ test.describe('Formatting', () => { await page.keyboard.press('Shift+ArrowLeft'); } - await formatBar.locator('.highlight-icon').hover(); + await highlightButton.click(); const yellow = 'var(--affine-text-highlight-yellow)'; - const bgYellowButton = formatBar.locator(`[data-testid="${yellow}"]`); + const bgYellowButton = formatBar.locator( + '[data-testid="background-yellow"]' + ); await bgYellowButton.click(); const textSpan2 = paragraph @@ -95,10 +117,18 @@ test.describe('Formatting', () => { await expect(textSpan2).toBeVisible(); const bgColor1 = await textSpan1.evaluate(e => e.style.backgroundColor); - const bgColor2 = await textSpan2.evaluate(e => e.style.backgroundColor); expect(yellow).toBe(bgColor1); expect(yellow).toBe(bgColor2); + + const bgColor = await bgYellowButton + .locator('affine-text-duotone-icon') + .evaluate(e => + window.getComputedStyle(e).getPropertyValue('--background') + ); + + await expect(textSpan1).toHaveCSS('background-color', hexToRGB(bgColor)); + await expect(textSpan2).toHaveCSS('background-color', hexToRGB(bgColor)); }); }); diff --git a/tests/affine-local/e2e/drag-page.spec.ts b/tests/affine-local/e2e/drag-page.spec.ts index 961ced37f3..825da065ad 100644 --- a/tests/affine-local/e2e/drag-page.spec.ts +++ b/tests/affine-local/e2e/drag-page.spec.ts @@ -269,11 +269,11 @@ test('drag a page card block to another page', async ({ page }) => { await pageReference.hover(); - const inlineToolbar = page.locator('reference-popup'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); // convert page reference to card block - await inlineToolbar.getByRole('button', { name: 'Switch view' }).click(); - await inlineToolbar.getByRole('button', { name: 'Card view' }).click(); + await toolbar.getByRole('button', { name: 'Switch view' }).click(); + await toolbar.getByRole('button', { name: 'Card view' }).click(); // hover the card block to show the drag handle const box = await page.locator('affine-embed-linked-doc-block').boundingBox(); diff --git a/tests/affine-local/e2e/links.spec.ts b/tests/affine-local/e2e/links.spec.ts index ea7d54eb4b..c0fac4122e 100644 --- a/tests/affine-local/e2e/links.spec.ts +++ b/tests/affine-local/e2e/links.spec.ts @@ -26,6 +26,22 @@ test.beforeEach(async ({ page }) => { await waitForEmptyEditor(page); }); +function toolbarButtons(page: Page) { + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + const switchViewBtn = toolbar.getByLabel('Switch view'); + const inlineViewBtn = toolbar.getByLabel('Inline view'); + const cardViewBtn = toolbar.getByLabel('Card view'); + const embedViewBtn = toolbar.getByLabel('Embed view'); + + return { + toolbar, + switchViewBtn, + inlineViewBtn, + cardViewBtn, + embedViewBtn, + }; +} + async function enableEmojiDocIcon(page: Page) { // Opens settings panel await openEditorSetting(page); @@ -64,23 +80,36 @@ test('not allowed to switch to embed view when linking to the same document', as await writeTextToClipboard(page, url0.toString()); await pasteByKeyboard(page); + const { toolbar, switchViewBtn, inlineViewBtn, cardViewBtn, embedViewBtn } = + toolbarButtons(page); + // Inline const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); await inlineLink.hover(); - await inlineToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await notClickable(inlineToolbar.getByLabel('Inline view')); - await clickable(inlineToolbar.getByLabel('Card view')); - await notClickable(inlineToolbar.getByLabel('Embed view')); + await notClickable(inlineViewBtn); + await clickable(cardViewBtn); + await notClickable(embedViewBtn); // Switches to card view - await inlineToolbar.getByLabel('Card view').click(); + await cardViewBtn.click(); // Card const cardLink = page.locator('affine-embed-linked-doc-block'); - const cardToolbar = page.locator('affine-embed-card-toolbar'); + await expect(cardLink).toBeVisible(); + + await cardLink.click(); + // In the test environment, a text selection update is triggered, which is very unstable. + await cardLink.click(); + + await expect(toolbar).toBeVisible(); + await switchViewBtn.click(); + + await clickable(inlineViewBtn); + await notClickable(cardViewBtn); + await notClickable(embedViewBtn); await cardLink.dblclick(); @@ -90,13 +119,6 @@ test('not allowed to switch to embed view when linking to the same document', as await page.keyboard.press('Escape'); await expect(peekViewModel).not.toBeVisible(); await page.click('body'); - - await cardLink.click(); - await cardToolbar.getByLabel('Switch view').click(); - - await clickable(cardToolbar.getByLabel('Inline view')); - await notClickable(cardToolbar.getByLabel('Card view')); - await notClickable(cardToolbar.getByLabel('Embed view')); }); test('not allowed to switch to embed view when linking to block', async ({ @@ -105,23 +127,24 @@ test('not allowed to switch to embed view when linking to block', async ({ await page.keyboard.press('Enter'); await createLinkedPage(page, 'Test Page'); + const { toolbar, switchViewBtn, inlineViewBtn, cardViewBtn, embedViewBtn } = + toolbarButtons(page); + // Inline const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); await inlineLink.hover(); - await inlineToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await notClickable(inlineToolbar.getByLabel('Inline view')); - await clickable(inlineToolbar.getByLabel('Card view')); - await clickable(inlineToolbar.getByLabel('Embed view')); + await notClickable(inlineViewBtn); + await clickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to card view - await inlineToolbar.getByLabel('Card view').click(); + await cardViewBtn.click(); // Card const cardLink = page.locator('affine-embed-linked-doc-block'); - const cardToolbar = page.locator('affine-embed-card-toolbar'); await cardLink.dblclick(); @@ -131,26 +154,26 @@ test('not allowed to switch to embed view when linking to block', async ({ await page.keyboard.press('Escape'); await expect(peekViewModel).not.toBeVisible(); - await page.click('body'); await cardLink.click(); - await cardToolbar.getByLabel('More').click(); - await cardToolbar.getByLabel('Copy link to block').click(); + await toolbar.getByLabel('More').click(); + await toolbar.getByLabel('Copy link to block').click(); await page.keyboard.press('Enter'); await pasteByKeyboard(page); + await expect(inlineLink).toBeVisible(); const href0 = await inlineLink.locator('a').getAttribute('href'); await inlineLink.hover(); - await inlineToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await notClickable(inlineToolbar.getByLabel('Inline view')); - await clickable(inlineToolbar.getByLabel('Card view')); - await notClickable(inlineToolbar.getByLabel('Embed view')); + await notClickable(inlineViewBtn); + await clickable(cardViewBtn); + await notClickable(embedViewBtn); // Switches to card view - await inlineToolbar.getByLabel('Card view').click(); + await cardViewBtn.click(); const otherCardLink = page.locator('affine-embed-linked-doc-block').nth(1); await otherCardLink.dblclick(); @@ -162,14 +185,14 @@ test('not allowed to switch to embed view when linking to block', async ({ await page.click('body'); await otherCardLink.click(); - await cardToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await clickable(cardToolbar.getByLabel('Inline view')); - await notClickable(cardToolbar.getByLabel('Card view')); - await notClickable(cardToolbar.getByLabel('Embed view')); + await clickable(inlineViewBtn); + await notClickable(cardViewBtn); + await notClickable(embedViewBtn); // Switches to inline view - await cardToolbar.getByLabel('Inline view').click(); + await inlineViewBtn.click(); const href1 = await inlineLink.locator('a').getAttribute('href'); @@ -190,88 +213,79 @@ test('allow switching to embed view when linking to the other document without m await page.keyboard.press('Enter'); await createLinkedPage(page, 'Test Page'); + const { switchViewBtn, inlineViewBtn, cardViewBtn, embedViewBtn } = + toolbarButtons(page); + // Inline const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); await inlineLink.hover(); - await inlineToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await notClickable(inlineToolbar.getByLabel('Inline view')); - await clickable(inlineToolbar.getByLabel('Card view')); - await clickable(inlineToolbar.getByLabel('Embed view')); + await notClickable(inlineViewBtn); + await clickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to card view - await inlineToolbar.getByLabel('Card view').click(); + await cardViewBtn.click(); // Card const cardLink = page.locator('affine-embed-linked-doc-block'); - const cardToolbar = page.locator('affine-embed-card-toolbar'); + await expect(cardLink).toBeVisible(); await cardLink.click(); - await cardToolbar.getByLabel('Switch view').click(); + await cardLink.click(); - await clickable(cardToolbar.getByLabel('Inline view')); - await notClickable(cardToolbar.getByLabel('Card view')); - await clickable(cardToolbar.getByLabel('Embed view')); + await switchViewBtn.click(); + + await clickable(inlineViewBtn); + await notClickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to embed view - await cardToolbar.getByLabel('Embed view').click(); + await embedViewBtn.click(); // Embed const embedLink = page.locator('affine-embed-synced-doc-block'); - const embedToolbar = page.locator('affine-embed-card-toolbar'); - await expect(embedLink).toBeVisible(); + + await embedLink.click(); await embedLink.click(); - // refocus - await embedLink.click(); - await expect(embedToolbar).toBeVisible(); - await embedToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await clickable(embedToolbar.getByLabel('Inline view')); - await clickable(embedToolbar.getByLabel('Card view')); - await notClickable(embedToolbar.getByLabel('Embed view')); + await clickable(inlineViewBtn); + await clickable(cardViewBtn); + await notClickable(embedViewBtn); // Closes - await embedToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); await expect( page.locator('.affine-embed-synced-doc-container.page') ).toBeVisible(); - // Opens in peek view - await embedLink.dblclick(); - - const peekViewModel = page.getByTestId('peek-view-modal'); - await expect(peekViewModel).toBeVisible(); - await expect(peekViewModel.locator('page-editor')).toBeVisible(); - await page.keyboard.press('Escape'); - await expect(peekViewModel).not.toBeVisible(); - await page.waitForTimeout(300); - await embedLink.click(); - await embedToolbar.getByLabel('Switch view').click(); + await embedLink.click(); - await clickable(embedToolbar.getByLabel('Inline view')); - await clickable(embedToolbar.getByLabel('Card view')); - await notClickable(embedToolbar.getByLabel('Embed view')); + await switchViewBtn.click(); + + await clickable(inlineViewBtn); + await clickable(cardViewBtn); + await notClickable(embedViewBtn); // Switches to card view - await embedToolbar.getByLabel('Card view').click(); + await cardViewBtn.click(); await cardLink.click(); - - // refocus await cardLink.click(); - await cardToolbar.getByLabel('Switch view').click(); - await clickable(cardToolbar.getByLabel('Inline view')); - await notClickable(cardToolbar.getByLabel('Card view')); - await clickable(cardToolbar.getByLabel('Embed view')); + await switchViewBtn.click(); + await clickable(inlineViewBtn); + await notClickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to inline view - await cardToolbar.getByLabel('Inline view').click(); + await inlineViewBtn.click(); await expect(inlineLink).toBeVisible(); }); @@ -285,8 +299,10 @@ test('allow switching to embed view when linking to the other document with mode const url = new URL(page.url()); url.searchParams.append('mode', 'edgeless'); + const { switchViewBtn, inlineViewBtn, cardViewBtn, embedViewBtn } = + toolbarButtons(page); + const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); await inlineLink.click(); @@ -298,85 +314,69 @@ test('allow switching to embed view when linking to the other document with mode // Inline await inlineLink.hover(); - await inlineToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await notClickable(inlineToolbar.getByLabel('Inline view')); - await clickable(inlineToolbar.getByLabel('Card view')); - await clickable(inlineToolbar.getByLabel('Embed view')); + await notClickable(inlineViewBtn); + await clickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to card view - await inlineToolbar.getByLabel('Card view').click(); - await page.waitForTimeout(300); + await cardViewBtn.click(); // Card const cardLink = page.locator('affine-embed-linked-doc-block'); - const cardToolbar = page.locator('affine-embed-card-toolbar'); - await expect(cardLink).toBeVisible(); - await cardLink.click(); // refocus await cardLink.click(); - await cardToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await clickable(cardToolbar.getByLabel('Inline view')); - await notClickable(cardToolbar.getByLabel('Card view')); - await clickable(cardToolbar.getByLabel('Embed view')); + await clickable(inlineViewBtn); + await notClickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to embed view - await cardToolbar.getByLabel('Embed view').click(); + await embedViewBtn.click(); // Embed const embedLink = page.locator('affine-embed-synced-doc-block'); - const embedToolbar = page.locator('affine-embed-card-toolbar'); - await expect(embedLink).toBeVisible(); - await embedLink.click(); // refocus await embedLink.click(); - await expect(embedToolbar).toBeVisible(); - await embedToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await clickable(embedToolbar.getByLabel('Inline view')); - await clickable(embedToolbar.getByLabel('Card view')); - await notClickable(embedToolbar.getByLabel('Embed view')); + await clickable(inlineViewBtn); + await clickable(cardViewBtn); + await notClickable(embedViewBtn); // Closes - await embedToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); await expect( page.locator('.affine-embed-synced-doc-container.edgeless') ).toBeVisible(); - // Opens in peek view - await embedLink.dblclick(); - - const peekViewModel = page.getByTestId('peek-view-modal'); - await expect(peekViewModel).toBeVisible(); - await expect(peekViewModel.locator('edgeless-editor')).toBeVisible(); - await page.keyboard.press('Escape'); - await expect(peekViewModel).not.toBeVisible(); - await page.waitForTimeout(300); - + // refocus await embedLink.click(); - await embedToolbar.getByLabel('Switch view').click(); - await clickable(embedToolbar.getByLabel('Inline view')); - await clickable(embedToolbar.getByLabel('Card view')); - await notClickable(embedToolbar.getByLabel('Embed view')); + await switchViewBtn.click(); + + await clickable(inlineViewBtn); + await clickable(cardViewBtn); + await notClickable(embedViewBtn); // Switches to card view - await embedToolbar.getByLabel('Card view').click(); + await cardViewBtn.click(); await cardLink.click(); - await cardToolbar.getByLabel('Switch view').click(); + await switchViewBtn.click(); - await clickable(cardToolbar.getByLabel('Inline view')); - await notClickable(cardToolbar.getByLabel('Card view')); - await clickable(cardToolbar.getByLabel('Embed view')); + await clickable(inlineViewBtn); + await notClickable(cardViewBtn); + await clickable(embedViewBtn); // Switches to inline view - await cardToolbar.getByLabel('Inline view').click(); + await inlineViewBtn.click(); await inlineLink.click(); @@ -655,14 +655,18 @@ test.describe('Customize linked doc title and description', () => { await page.keyboard.press('Enter'); await createLinkedPage(page, 'Test Page'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + const link = page.locator('affine-reference'); const title = link.locator('.affine-reference-title'); - await link.hover(); - const toolbar = page.locator('reference-popup'); + await link.hover(); + await expect(toolbar).toBeVisible(); // Copies link await toolbar.getByRole('button', { name: 'Copy link' }).click(); + await expect(toolbar).toBeHidden(); + const url0 = await link.locator('a').getAttribute('href'); const url1 = await ( await page.evaluateHandle(() => navigator.clipboard.readText()) @@ -670,7 +674,10 @@ test.describe('Customize linked doc title and description', () => { expect(url0).not.toBeNull(); expect(new URL(url0!, coreUrl).pathname).toBe(new URL(url1).pathname); + await page.waitForTimeout(200); + // Edits title + await link.hover(); await toolbar.getByRole('button', { name: 'Edit' }).click(); // Title alias @@ -679,6 +686,8 @@ test.describe('Customize linked doc title and description', () => { await expect(title).toHaveText('Test Page Alias'); + await page.waitForTimeout(200); + // Original title await link.hover(); const docTitle = toolbar.getByRole('button', { name: 'Doc title' }); @@ -687,7 +696,7 @@ test.describe('Customize linked doc title and description', () => { // Edits title await toolbar.getByRole('button', { name: 'Edit' }).click(); - const aliasPopup = page.locator('reference-alias-popup'); + const aliasPopup = page.locator('reference-popup'); // Input await expect(aliasPopup.locator('input')).toHaveValue('Test Page Alias'); @@ -708,29 +717,36 @@ test.describe('Customize linked doc title and description', () => { await page.keyboard.press('Enter'); await createLinkedPage(page, 'Test Page'); - const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); + const { toolbar, switchViewBtn, inlineViewBtn, cardViewBtn } = + toolbarButtons(page); + const inlineLink = page.locator('affine-reference'); await inlineLink.hover(); // Copies link - await inlineToolbar.getByRole('button', { name: 'Copy link' }).click(); + await toolbar.getByRole('button', { name: 'Copy link' }).click(); const url0 = await ( await page.evaluateHandle(() => navigator.clipboard.readText()) ).jsonValue(); + await page.waitForTimeout(200); + + await inlineLink.hover(); + // Edits title - await inlineToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); // Title alias await page.keyboard.type('Test Page Alias'); await page.keyboard.press('Enter'); + await page.waitForTimeout(200); + await inlineLink.hover(); // Switches to card view - await inlineToolbar.getByRole('button', { name: 'Switch view' }).click(); - await inlineToolbar.getByRole('button', { name: 'Card view' }).click(); + await switchViewBtn.click(); + await cardViewBtn.click(); const cardLink = page.locator('affine-embed-linked-doc-block'); const cardTitle = cardLink.locator( @@ -739,12 +755,12 @@ test.describe('Customize linked doc title and description', () => { const cardDescription = cardLink.locator( '.affine-embed-linked-doc-content-note.alias' ); - const cardToolbar = page.locator('affine-embed-card-toolbar'); + await cardLink.click(); await cardLink.click(); // Copies link - await cardToolbar.getByRole('button', { name: 'Copy link' }).click(); + await toolbar.getByRole('button', { name: 'Copy link' }).click(); const url1 = await ( await page.evaluateHandle(() => navigator.clipboard.readText()) ).jsonValue(); @@ -753,12 +769,12 @@ test.describe('Customize linked doc title and description', () => { expect(url1).not.toBeNull(); expect(url0).toBe(url1); - const docTitle = cardToolbar.getByRole('button', { name: 'Doc title' }); + const docTitle = toolbar.getByRole('button', { name: 'Doc title' }); await expect(docTitle).toHaveText('Test Page', { useInnerText: true }); await expect(cardTitle).toHaveText('Test Page Alias'); // Edits title & description - await cardToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); const cardEditPopup = page.locator('embed-card-edit-modal'); @@ -772,13 +788,15 @@ test.describe('Customize linked doc title and description', () => { await cardEditPopup.getByRole('button', { name: 'Save' }).click(); await expect(cardTitle).toHaveText('Test Page Alias Again'); await expect(cardDescription).toHaveText('This is a new description'); + await expect(cardEditPopup).not.toBeVisible(); + await cardLink.click(); await cardLink.click(); // Switches to inline view { - await cardToolbar.getByRole('button', { name: 'Switch view' }).click(); - await cardToolbar.getByRole('button', { name: 'Inline view' }).click(); + await switchViewBtn.click(); + await inlineViewBtn.click(); // Focuses inline editor const bounds = (await inlineLink.boundingBox())!; @@ -793,13 +811,14 @@ test.describe('Customize linked doc title and description', () => { await expect(title).toHaveText('Test Page Alias Again'); // Switches to card view - await inlineToolbar.getByRole('button', { name: 'Switch view' }).click(); - await inlineToolbar.getByRole('button', { name: 'Card view' }).click(); + await switchViewBtn.click(); + await cardViewBtn.click(); } + await cardLink.click(); await cardLink.click(); - await cardToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); // Resets await cardEditPopup.getByRole('button', { name: 'Reset' }).click(); @@ -815,20 +834,25 @@ test.describe('Customize linked doc title and description', () => { await page.keyboard.press('Enter'); await createLinkedPage(page, 'Test Page'); - const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); + const { toolbar, switchViewBtn, inlineViewBtn, cardViewBtn, embedViewBtn } = + toolbarButtons(page); + const inlineLink = page.locator('affine-reference'); await inlineLink.hover(); // Copies link - await inlineToolbar.getByRole('button', { name: 'Copy link' }).click(); + await toolbar.getByRole('button', { name: 'Copy link' }).click(); const url0 = await ( await page.evaluateHandle(() => navigator.clipboard.readText()) ).jsonValue(); + await page.waitForTimeout(200); + + await inlineLink.hover(); + // Switches to card view - await inlineToolbar.getByRole('button', { name: 'Switch view' }).click(); - await inlineToolbar.getByRole('button', { name: 'Card view' }).click(); + await switchViewBtn.click(); + await cardViewBtn.click(); const cardLink = page.locator('affine-embed-linked-doc-block'); const cardTitle = cardLink.locator( @@ -837,31 +861,29 @@ test.describe('Customize linked doc title and description', () => { const cardDescription = cardLink.locator( '.affine-embed-linked-doc-content-note.alias' ); - const cardToolbar = page.locator('affine-embed-card-toolbar'); + await cardLink.click(); await cardLink.click(); // Copies link - await cardToolbar.getByRole('button', { name: 'Copy link' }).click(); + await toolbar.getByRole('button', { name: 'Copy link' }).click(); const url1 = await ( await page.evaluateHandle(() => navigator.clipboard.readText()) ).jsonValue(); // Switches to embed view - await cardToolbar.getByRole('button', { name: 'Switch view' }).click(); - await cardToolbar.getByRole('button', { name: 'Embed view' }).click(); + await switchViewBtn.click(); + await embedViewBtn.click(); const embedLink = page.locator('affine-embed-synced-doc-block'); const embedTitle = embedLink.locator('.affine-embed-synced-doc-title'); - const embedToolbar = page.locator('affine-embed-card-toolbar'); // refocus the page await embedLink.click(); - await embedLink.click(); // Copies link - await embedToolbar.getByRole('button', { name: 'Copy link' }).click(); + await toolbar.getByRole('button', { name: 'Copy link' }).click(); const url2 = await ( await page.evaluateHandle(() => navigator.clipboard.readText()) ).jsonValue(); @@ -873,7 +895,7 @@ test.describe('Customize linked doc title and description', () => { expect(url1).toBe(url2); // Edits title & description - await embedToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); const embedEditPopup = page.locator('embed-card-edit-modal'); @@ -890,7 +912,7 @@ test.describe('Customize linked doc title and description', () => { await embedLink.click(); // Edits title & description - await embedToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); // Title alias await page.keyboard.type('Test Page Alias'); @@ -909,22 +931,23 @@ test.describe('Customize linked doc title and description', () => { await cardLink.click(); - const docTitle = cardToolbar.getByRole('button', { name: 'Doc title' }); + const docTitle = toolbar.getByRole('button', { name: 'Doc title' }); await expect(docTitle).toHaveText('Test Page', { useInnerText: true }); await expect(cardTitle).toHaveText('Test Page Alias'); // Switches to embed view - await cardToolbar.getByRole('button', { name: 'Switch view' }).click(); - await cardToolbar.getByRole('button', { name: 'Embed view' }).click(); + await switchViewBtn.click(); + await embedViewBtn.click(); await expect(embedTitle).toHaveText('Test Page'); + await embedLink.click(); await embedLink.click(); // Switches to inline view { - await embedToolbar.getByRole('button', { name: 'Switch view' }).click(); - await embedToolbar.getByRole('button', { name: 'Inline view' }).click(); + await switchViewBtn.click(); + await inlineViewBtn.click(); // Focuses inline editor const bounds = (await inlineLink.boundingBox())!; @@ -939,15 +962,15 @@ test.describe('Customize linked doc title and description', () => { await expect(title).toHaveText('Test Page'); // Switches to embed view - await inlineToolbar.getByRole('button', { name: 'Switch view' }).click(); - await inlineToolbar.getByRole('button', { name: 'Embed view' }).click(); + await switchViewBtn.click(); + await embedViewBtn.click(); } await embedLink.click(); await expect(embedTitle).toHaveText('Test Page'); await expect( - embedToolbar.getByRole('button', { name: 'Doc title' }) + toolbar.getByRole('button', { name: 'Doc title' }) ).toBeHidden(); }); @@ -962,13 +985,13 @@ test.describe('Customize linked doc title and description', () => { await page.keyboard.press('Enter'); await createLinkedPage(page, 'Test Page'); - const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + const inlineLink = page.locator('affine-reference'); await inlineLink.hover(); // Edits title - await inlineToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); // Title alias await page.keyboard.type('🦀hello'); @@ -992,13 +1015,13 @@ test.describe('Customize linked doc title and description', () => { await page.keyboard.press('Enter'); await createTodayPage(page); - const inlineLink = page.locator('affine-reference'); - const inlineToolbar = page.locator('reference-popup'); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + const inlineLink = page.locator('affine-reference'); await inlineLink.hover(); // Edits title - await inlineToolbar.getByRole('button', { name: 'Edit' }).click(); + await toolbar.getByRole('button', { name: 'Edit' }).click(); // Title alias await page.keyboard.type('🦀'); diff --git a/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts b/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts index 0997c13a94..e322c7d5f9 100644 --- a/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts +++ b/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts @@ -123,12 +123,10 @@ test('ctrl click embedded doc link and open in new tab', async ({ page }) => { // hover on the reference node and change it to embedded card mode await referenceNode.hover(); - const referencePopup = page.locator( - 'reference-popup .affine-reference-popover-container' - ); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); - await expect(referencePopup).toBeVisible(); - await referencePopup.getByRole('button', { name: 'Switch view' }).click(); + await expect(toolbar).toBeVisible(); + await toolbar.getByRole('button', { name: 'Switch view' }).click(); await page.getByRole('button', { name: 'Card view' }).click(); const embededDocBlock = page.locator('affine-embed-linked-doc-block'); diff --git a/tests/affine-local/e2e/peek-view.spec.ts b/tests/affine-local/e2e/peek-view.spec.ts index 08daaca7e9..0949a96609 100644 --- a/tests/affine-local/e2e/peek-view.spec.ts +++ b/tests/affine-local/e2e/peek-view.spec.ts @@ -23,17 +23,12 @@ test('can open peek view via link popover', async ({ page }) => { await page.locator('affine-reference').hover(); - await expect( - page.locator('.affine-reference-popover-container') - ).toBeVisible(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); // click more button - await page - .locator('editor-menu-button editor-icon-button[aria-label="Open doc"]') - .click(); - await page - .locator('editor-menu-action:has-text("Open in center peek")') - .click(); + await toolbar.getByLabel('Open doc').click(); + await toolbar.getByLabel('Open in center peek').click(); // verify peek view is opened await expect(page.getByTestId('peek-view-modal')).toBeVisible(); @@ -64,16 +59,12 @@ test('can open peek view via db+click link card', async ({ page }) => { await createLinkedPage(page, 'Test Page'); await page.locator('affine-reference').hover(); - await expect( - page.locator('.affine-reference-popover-container') - ).toBeVisible(); - await page - .locator('editor-menu-button editor-icon-button[aria-label="Switch view"]') - .click(); - await page - .locator('editor-menu-button editor-menu-action[aria-label="Card view"]') - .click(); + const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); + await expect(toolbar).toBeVisible(); + + await toolbar.getByLabel('Switch view').click(); + await toolbar.getByLabel('Card view').click(); await expect( page.locator('affine-embed-linked-doc-block:has-text("Test Page")') diff --git a/tests/affine-local/e2e/quick-search.spec.ts b/tests/affine-local/e2e/quick-search.spec.ts index 73449c864f..adcd85557c 100644 --- a/tests/affine-local/e2e/quick-search.spec.ts +++ b/tests/affine-local/e2e/quick-search.spec.ts @@ -441,6 +441,7 @@ test('disable quick search when the link-popup is visitable', async ({ const quickSearch = page.locator('[data-testid=cmdk-quick-search]'); await expect(quickSearch).toBeVisible(); await withCtrlOrMeta(page, () => page.keyboard.press('k')); + await expect(quickSearch).toBeHidden(); await getBlockSuiteEditorTitle(page).click(); await getBlockSuiteEditorTitle(page).fill(specialTitle); @@ -544,7 +545,11 @@ test('can use slash menu to insert a newly created doc card', async ({ const testTitle = 'test title'; await page.locator('[cmdk-input]').fill(testTitle); - await page.keyboard.press('Enter'); + + const addNewPage = page.locator( + `[cmdk-item] >> text=New "${testTitle}" Page` + ); + await addNewPage.click(); await expect(page.locator('affine-embed-linked-doc-block')).toBeVisible(); await expect( diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts index 8be04fc3cc..bfaa61b62a 100644 --- a/tests/kit/src/utils/editor.ts +++ b/tests/kit/src/utils/editor.ts @@ -4,7 +4,6 @@ import { expect, type Locator, type Page } from '@playwright/test'; declare type _GLOBAL_ = typeof BlocksuiteBlocks; -const AFFINE_FORMAT_BAR_WIDGET = 'affine-format-bar-widget'; const EDGELESS_ELEMENT_TOOLBAR_WIDGET = 'edgeless-element-toolbar-widget'; const EDGELESS_TOOLBAR_WIDGET = 'edgeless-toolbar-widget'; @@ -67,7 +66,7 @@ export async function focusDocTitle(page: Page, editorIndex = 0) { // ================== Page ================== export function locateFormatBar(page: Page, editorIndex = 0) { return locateEditorContainer(page, editorIndex).locator( - AFFINE_FORMAT_BAR_WIDGET + 'affine-toolbar-widget editor-toolbar' ); } diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 2ac4766614..d25f459165 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -434,6 +434,18 @@ export const PackageList = [ 'blocksuite/framework/global', ], }, + { + location: 'blocksuite/affine/widget-toolbar', + name: '@blocksuite/affine-widget-toolbar', + workspaceDependencies: [ + 'blocksuite/affine/components', + 'blocksuite/affine/model', + 'blocksuite/affine/shared', + 'blocksuite/framework/block-std', + 'blocksuite/affine/data-view', + 'blocksuite/framework/global', + ], + }, { location: 'blocksuite/blocks', name: '@blocksuite/blocks', @@ -467,6 +479,7 @@ export const PackageList = [ 'blocksuite/affine/widget-frame-title', 'blocksuite/affine/widget-remote-selection', 'blocksuite/affine/widget-scroll-anchoring', + 'blocksuite/affine/widget-toolbar', 'blocksuite/framework/block-std', 'blocksuite/affine/data-view', 'blocksuite/framework/global', @@ -859,6 +872,7 @@ export type PackageName = | '@blocksuite/affine-widget-frame-title' | '@blocksuite/affine-widget-remote-selection' | '@blocksuite/affine-widget-scroll-anchoring' + | '@blocksuite/affine-widget-toolbar' | '@blocksuite/blocks' | '@blocksuite/block-std' | '@blocksuite/global' diff --git a/tsconfig.json b/tsconfig.json index c15a713ba5..b41a8eeca7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -81,6 +81,7 @@ { "path": "./blocksuite/affine/widget-frame-title" }, { "path": "./blocksuite/affine/widget-remote-selection" }, { "path": "./blocksuite/affine/widget-scroll-anchoring" }, + { "path": "./blocksuite/affine/widget-toolbar" }, { "path": "./blocksuite/blocks" }, { "path": "./blocksuite/framework/block-std" }, { "path": "./blocksuite/framework/global" }, diff --git a/yarn.lock b/yarn.lock index d54a6cf4d1..0dab003146 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2239,12 +2239,12 @@ __metadata: "@blocksuite/icons": "npm:^2.2.1" "@blocksuite/inline": "workspace:*" "@blocksuite/store": "workspace:*" - "@floating-ui/dom": "npm:^1.6.13" "@lit/context": "npm:^1.1.2" "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.12" lit: "npm:^3.2.0" minimatch: "npm:^10.0.1" + yjs: "npm:^13.6.23" zod: "npm:^3.23.8" languageName: unknown linkType: soft @@ -2524,17 +2524,18 @@ __metadata: version: 0.0.0-use.local resolution: "@blocksuite/affine-block-note@workspace:blocksuite/affine/block-note" dependencies: + "@blocksuite/affine-block-database": "workspace:*" "@blocksuite/affine-block-embed": "workspace:*" "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/block-std": "workspace:*" + "@blocksuite/data-view": "workspace:*" "@blocksuite/global": "workspace:*" "@blocksuite/icons": "npm:^2.2.1" "@blocksuite/inline": "workspace:*" "@blocksuite/store": "workspace:*" - "@floating-ui/dom": "npm:^1.6.13" "@lit/context": "npm:^1.1.2" "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.12" @@ -2595,6 +2596,7 @@ __metadata: "@blocksuite/affine-widget-frame-title": "workspace:*" "@blocksuite/affine-widget-remote-selection": "workspace:*" "@blocksuite/affine-widget-scroll-anchoring": "workspace:*" + "@blocksuite/affine-widget-toolbar": "workspace:*" "@blocksuite/block-std": "workspace:*" "@blocksuite/data-view": "workspace:*" "@blocksuite/global": "workspace:*" @@ -2932,6 +2934,32 @@ __metadata: languageName: unknown linkType: soft +"@blocksuite/affine-widget-toolbar@workspace:*, @blocksuite/affine-widget-toolbar@workspace:blocksuite/affine/widget-toolbar": + version: 0.0.0-use.local + resolution: "@blocksuite/affine-widget-toolbar@workspace:blocksuite/affine/widget-toolbar" + dependencies: + "@blocksuite/affine-block-database": "workspace:*" + "@blocksuite/affine-block-table": "workspace:*" + "@blocksuite/affine-components": "workspace:*" + "@blocksuite/affine-model": "workspace:*" + "@blocksuite/affine-shared": "workspace:*" + "@blocksuite/block-std": "workspace:*" + "@blocksuite/global": "workspace:*" + "@blocksuite/icons": "npm:^2.2.1" + "@floating-ui/dom": "npm:^1.6.13" + "@preact/signals-core": "npm:^1.8.0" + "@toeverything/theme": "npm:^1.1.12" + "@types/lodash-es": "npm:^4.17.12" + "@types/lodash.groupby": "npm:^4" + "@types/lodash.mergewith": "npm:^4" + "@types/lodash.orderby": "npm:^4" + "@types/lodash.partition": "npm:^4" + "@types/lodash.topairs": "npm:^4" + lit: "npm:^3.2.0" + lodash-es: "npm:^4.17.21" + languageName: unknown + linkType: soft + "@blocksuite/affine@workspace:*, @blocksuite/affine@workspace:blocksuite/affine/all": version: 0.0.0-use.local resolution: "@blocksuite/affine@workspace:blocksuite/affine/all" @@ -3007,6 +3035,7 @@ __metadata: "@blocksuite/affine-widget-frame-title": "workspace:*" "@blocksuite/affine-widget-remote-selection": "workspace:*" "@blocksuite/affine-widget-scroll-anchoring": "workspace:*" + "@blocksuite/affine-widget-toolbar": "workspace:*" "@blocksuite/block-std": "workspace:*" "@blocksuite/data-view": "workspace:*" "@blocksuite/global": "workspace:*" @@ -3127,7 +3156,7 @@ __metadata: "@blocksuite/integration-test": "workspace:*" "@blocksuite/store": "workspace:*" "@playwright/test": "npm:=1.50.1" - "@toeverything/theme": "npm:^1.1.7" + "@toeverything/theme": "npm:^1.1.12" languageName: unknown linkType: soft @@ -13500,7 +13529,7 @@ __metadata: languageName: node linkType: hard -"@toeverything/theme@npm:^1.1.12, @toeverything/theme@npm:^1.1.7": +"@toeverything/theme@npm:^1.1.12": version: 1.1.12 resolution: "@toeverything/theme@npm:1.1.12" checksum: 10/32247cf7f7a819445fa7373a3afafaafc6a8527b95934e37e5f2c32181224b2184691b24bd8a400872cca7cd1336efe98bd5ad3366b98d149e48b3baee2609a7 @@ -14134,6 +14163,15 @@ __metadata: languageName: node linkType: hard +"@types/lodash.groupby@npm:^4": + version: 4.6.9 + resolution: "@types/lodash.groupby@npm:4.6.9" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/b8310a9f89badc42a504887ca0b9619c2a284b3fec8dc505cf72508eb6beba47b822df939c7d57c0f69bc685f51ff5a232e0480ecad6b18b7ab76fecc1d74691 + languageName: node + linkType: hard + "@types/lodash.ismatch@npm:^4.4.9": version: 4.4.9 resolution: "@types/lodash.ismatch@npm:4.4.9" @@ -14152,6 +14190,42 @@ __metadata: languageName: node linkType: hard +"@types/lodash.mergewith@npm:^4": + version: 4.6.9 + resolution: "@types/lodash.mergewith@npm:4.6.9" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/c5a67e83040103decfd37090127118f5758773d0ce2a1756d442b371721737c7752f48f62544cc970f44abec8471f260cc4c844e1a4fdef8b76cb96bdec8a595 + languageName: node + linkType: hard + +"@types/lodash.orderby@npm:^4": + version: 4.6.9 + resolution: "@types/lodash.orderby@npm:4.6.9" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/f3ca3a6ba09caef431955f3110a6704e25c90934fb70973e2ed1f4dd9aa48c4776c7e8b909b78f9ae1fb169e437497f8fe8e60fafb5c74ede49c36739ac44c3e + languageName: node + linkType: hard + +"@types/lodash.partition@npm:^4": + version: 4.6.9 + resolution: "@types/lodash.partition@npm:4.6.9" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/29d1fead7f9a71af8279ceb6c1b08128c7f05f06a72ed60fea02a7c010f69006a4e3dc24afb9c4a3187a033b918a1b3dcf611004781f927ff573b104bdf34060 + languageName: node + linkType: hard + +"@types/lodash.topairs@npm:^4": + version: 4.3.9 + resolution: "@types/lodash.topairs@npm:4.3.9" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/8d4d9cb7be1c333b70b8d035d0673ef41158bfe24e06616046879149a15438af89673fe21abe1b1e62ddbc00eae5fe4c3795649de8a98742771ba8949100a300 + languageName: node + linkType: hard + "@types/lodash@npm:*": version: 4.17.15 resolution: "@types/lodash@npm:4.17.15"