diff --git a/packages/blocks/src/root-block/widgets/keyboard-toolbar/config.ts b/packages/blocks/src/root-block/widgets/keyboard-toolbar/config.ts index 518302970e6d..7fced9c72046 100644 --- a/packages/blocks/src/root-block/widgets/keyboard-toolbar/config.ts +++ b/packages/blocks/src/root-block/widgets/keyboard-toolbar/config.ts @@ -295,7 +295,7 @@ const pageToolGroup: KeyboardToolPanelGroup = { return std.doc.schema.flavourSchemaMap.has('affine:embed-linked-doc'); }, - action: ({ rootComponent, closeToolbar }) => { + action: ({ rootComponent, closeToolPanel }) => { const { std } = rootComponent; const linkedDocWidget = std.view.getWidget( @@ -321,7 +321,7 @@ const pageToolGroup: KeyboardToolPanelGroup = { // Wait for range to be updated inlineEditor?.slots.inlineRangeSync.once(() => { linkedDocWidget.show('mobile'); - closeToolbar(); + closeToolPanel(); }); }) .run(); diff --git a/packages/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts b/packages/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts index 79117a7e38a3..051400be0f31 100644 --- a/packages/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts +++ b/packages/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts @@ -23,6 +23,7 @@ import { } from '../../../_common/components/utils.js'; import { getPopperPosition } from '../../utils/position.js'; import { linkedDocPopoverStyles } from './styles.js'; +import { resolveSignal } from './utils.js'; @requiredProperties({ context: PropTypes.object, @@ -90,7 +91,7 @@ export class LinkedDocPopover extends SignalWatcher( private _getActionItems(group: LinkedMenuGroup) { const isExpanded = !!this._expanded.get(group.name); - const items = Array.isArray(group.items) ? group.items : group.items.value; + const items = resolveSignal(group.items); if (isExpanded) { return items; } diff --git a/packages/blocks/src/root-block/widgets/linked-doc/mobile-linked-doc-menu.ts b/packages/blocks/src/root-block/widgets/linked-doc/mobile-linked-doc-menu.ts index 155fbb43550d..425564b1ae6a 100644 --- a/packages/blocks/src/root-block/widgets/linked-doc/mobile-linked-doc-menu.ts +++ b/packages/blocks/src/root-block/widgets/linked-doc/mobile-linked-doc-menu.ts @@ -9,6 +9,7 @@ import { MoreHorizontalIcon } from '@blocksuite/icons/lit'; import { signal } from '@preact/signals-core'; import { html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; +import { join } from 'lit/directives/join.js'; import { repeat } from 'lit/directives/repeat.js'; import type { @@ -24,6 +25,7 @@ import { } from '../../../_common/components/utils.js'; import { PageRootBlockComponent } from '../../index.js'; import { mobileLinkedDocMenuStyles } from './styles.js'; +import { resolveSignal } from './utils.js'; export const AFFINE_MOBILE_LINKED_DOC_MENU = 'affine-mobile-linked-doc-menu'; @@ -36,7 +38,7 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher( ) { static override styles = mobileLinkedDocMenuStyles; - private readonly _expand$ = signal(false); + private readonly _expand = new Set(); private _firstActionItem: LinkedMenuItem | null = null; @@ -44,6 +46,33 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher( private readonly _linkedDocGroup$ = signal([]); + private _renderGroup = (group: LinkedMenuGroup) => { + let items = resolveSignal(group.items); + + const isOverflow = !!group.maxDisplay && items.length > group.maxDisplay; + const expanded = this._expand.has(group.name); + + let moreItem = null; + if (!expanded && isOverflow) { + items = items.slice(0, group.maxDisplay); + + moreItem = html`
{ + this._expand.add(group.name); + this.requestUpdate(); + }} + > + ${MoreHorizontalIcon()} +
${group.overflowText || 'more'}
+
`; + } + + return html` + ${repeat(items, item => item.key, this._renderItem)} ${moreItem} + `; + }; + private readonly _renderItem = ({ key, name, @@ -198,54 +227,17 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher( override firstUpdated() { if (!this._keyboardController.opened) { this._keyboardController.show(); - const id = setInterval(() => { - if (!this._keyboardController.opened) return; - this._scrollInputToTop(); - clearInterval(id); - }, 50); - this.disposables.add(() => { - clearInterval(id); - }); - } else { - this._scrollInputToTop(); } + this._scrollInputToTop(); } override render() { - // todo: get rid of hard coded config - if (this._linkedDocGroup$.value.length === 0) { + const groups = this._linkedDocGroup$.value; + if (groups.length === 0) { return nothing; } - let group = this._linkedDocGroup$.value[0]; - - let items = Array.isArray(group.items) ? group.items : group.items.value; - - if (items.length === 0) { - group = this._linkedDocGroup$.value[1]; - items = ( - Array.isArray(group.items) ? group.items : group.items.value - ).filter(item => item.name !== 'Import'); - } - - const isOverflow = !!group.maxDisplay && items.length > group.maxDisplay; - - let moreItem = null; - if (!this._expand$.value && isOverflow) { - items = items.slice(0, group.maxDisplay); - - moreItem = html`
{ - this._expand$.value = true; - }} - > - ${MoreHorizontalIcon()} -
${group.overflowText || 'more'}
-
`; - } - - this._firstActionItem = items[0]; + this._firstActionItem = resolveSignal(groups[0].items)[0]; this.style.bottom = this.context.config.mobile.useScreenHeight && @@ -254,7 +246,7 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher( : `max(0px, ${this._keyboardController.keyboardHeight}px)`; return html` - ${repeat(items, item => item.key, this._renderItem)} ${moreItem} + ${join(groups.map(this._renderGroup), html`
`)} `; } diff --git a/packages/blocks/src/root-block/widgets/linked-doc/styles.ts b/packages/blocks/src/root-block/widgets/linked-doc/styles.ts index 8e46246d5b91..6784db9c4938 100644 --- a/packages/blocks/src/root-block/widgets/linked-doc/styles.ts +++ b/packages/blocks/src/root-block/widgets/linked-doc/styles.ts @@ -94,7 +94,14 @@ export const mobileLinkedDocMenuStyles = css` box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.07); } - ${scrollbarStyle(':host')} + :host::-webkit-scrollbar { + display: none; + } + + .divider { + width: 100%; + border-top: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')}; + } .mobile-linked-doc-menu-item { display: flex; diff --git a/packages/blocks/src/root-block/widgets/linked-doc/utils.ts b/packages/blocks/src/root-block/widgets/linked-doc/utils.ts new file mode 100644 index 000000000000..dd2a91afab4c --- /dev/null +++ b/packages/blocks/src/root-block/widgets/linked-doc/utils.ts @@ -0,0 +1,5 @@ +import { Signal } from '@preact/signals-core'; + +export function resolveSignal(data: T | Signal): T { + return data instanceof Signal ? data.value : data; +}