refactor(editor): extract filterable list component (#9278)

blocksuite/blocks/src/_common/components/filterable-list/index.ts

@@ -1,260 +0,0 @@
-import {
-  type AdvancedPortalOptions,
-  createLitPortal,
-} from '@blocksuite/affine-components/portal';
-import { WithDisposable } from '@blocksuite/global/utils';
-import { DoneIcon, SearchIcon } from '@blocksuite/icons/lit';
-import { autoPlacement, offset, type Placement, size } from '@floating-ui/dom';
-import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { PAGE_HEADER_HEIGHT } from '../../consts.js';
-import { filterableListStyles } from './styles.js';
-import type { FilterableListItem, FilterableListOptions } from './types.js';
-
-export * from './types.js';
-
-export class FilterableListComponent<Props = unknown> extends WithDisposable(
-  LitElement
-) {
-  static override styles = filterableListStyles;
-
-  private _buildContent(items: FilterableListItem<Props>[]) {
-    return items.map((item, idx) => {
-      const focussed = this._curFocusIndex === idx;
-
-      return html`
-        <icon-button
-          class=${classMap({
-            'filterable-item': true,
-            focussed,
-          })}
-          @mouseover=${() => (this._curFocusIndex = idx)}
-          @click=${() => this._select(item)}
-          hover=${focussed}
-          width="100%"
-          height="32px"
-        >
-          ${item.icon ?? nothing} ${item.label ?? item.name}
-          <div slot="suffix">
-            ${this.options.active?.(item) ? DoneIcon() : nothing}
-          </div>
-        </icon-button>
-      `;
-    });
-  }
-
-  private _filterItems() {
-    const searchFilter = !this._filterText
-      ? this.options.items
-      : this.options.items.filter(
-          item =>
-            item.name.startsWith(this._filterText.toLowerCase()) ||
-            item.aliases?.some(alias =>
-              alias.startsWith(this._filterText.toLowerCase())
-            )
-        );
-    return searchFilter.sort((a, b) => {
-      const isActiveA = this.options.active?.(a);
-      const isActiveB = this.options.active?.(b);
-
-      if (isActiveA && !isActiveB) return -1;
-      if (!isActiveA && isActiveB) return 1;
-
-      return this.listFilter?.(a, b) ?? 0;
-    });
-  }
-
-  private _scrollFocusedItemIntoView() {
-    this.updateComplete
-      .then(() => {
-        this._focussedItem?.scrollIntoView({
-          block: 'nearest',
-          inline: 'start',
-        });
-      })
-      .catch(console.error);
-  }
-
-  private _select(item: FilterableListItem) {
-    this.abortController?.abort();
-    this.options.onSelect(item);
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    requestAnimationFrame(() => {
-      this._filterInput.focus();
-    });
-  }
-
-  override render() {
-    const filteredItems = this._filterItems();
-    const content = this._buildContent(filteredItems);
-    const isFlip = !!this.placement?.startsWith('top');
-
-    const _handleInputKeydown = (ev: KeyboardEvent) => {
-      switch (ev.key) {
-        case 'ArrowUp': {
-          ev.preventDefault();
-          this._curFocusIndex =
-            (this._curFocusIndex + content.length - 1) % content.length;
-          this._scrollFocusedItemIntoView();
-          break;
-        }
-        case 'ArrowDown': {
-          ev.preventDefault();
-          this._curFocusIndex = (this._curFocusIndex + 1) % content.length;
-          this._scrollFocusedItemIntoView();
-          break;
-        }
-        case 'Enter': {
-          if (ev.isComposing) break;
-          ev.preventDefault();
-          const item = filteredItems[this._curFocusIndex];
-          this._select(item);
-          break;
-        }
-        case 'Escape': {
-          ev.preventDefault();
-          this.abortController?.abort();
-          break;
-        }
-      }
-    };
-
-    return html`
-      <div
-        class=${classMap({ 'affine-filterable-list': true, flipped: isFlip })}
-      >
-        <div class="input-wrapper">
-          ${SearchIcon()}
-          <input
-            id="filter-input"
-            type="text"
-            placeholder=${this.options?.placeholder ?? 'Search'}
-            @input="${() => {
-              this._filterText = this._filterInput?.value;
-              this._curFocusIndex = 0;
-            }}"
-            @keydown="${_handleInputKeydown}"
-          />
-        </div>
-
-        <editor-toolbar-separator
-          data-orientation="horizontal"
-        ></editor-toolbar-separator>
-        <div class="items-container">${content}</div>
-      </div>
-    `;
-  }
-
-  @state()
-  private accessor _curFocusIndex = 0;
-
-  @query('#filter-input')
-  private accessor _filterInput!: HTMLInputElement;
-
-  @state()
-  private accessor _filterText = '';
-
-  @query('.filterable-item.focussed')
-  private accessor _focussedItem!: HTMLElement | null;
-
-  @property({ attribute: false })
-  accessor abortController: AbortController | null = null;
-
-  @property({ attribute: false })
-  accessor listFilter:
-    | ((a: FilterableListItem<Props>, b: FilterableListItem<Props>) => number)
-    | undefined = undefined;
-
-  @property({ attribute: false })
-  accessor options!: FilterableListOptions<Props>;
-
-  @property({ attribute: false })
-  accessor placement: Placement | undefined = undefined;
-}
-
-export function showPopFilterableList({
-  options,
-  filter,
-  abortController = new AbortController(),
-  referenceElement,
-  container,
-  maxHeight = 440,
-  portalStyles,
-}: {
-  options: FilterableListComponent['options'];
-  referenceElement: Element;
-  container?: Element;
-  abortController?: AbortController;
-  filter?: FilterableListComponent['listFilter'];
-  maxHeight?: number;
-  portalStyles?: AdvancedPortalOptions['portalStyles'];
-}) {
-  const portalPadding = {
-    top: PAGE_HEADER_HEIGHT + 12,
-    bottom: 12,
-  } as const;
-
-  const list = new FilterableListComponent();
-  list.options = options;
-  list.listFilter = filter;
-  list.abortController = abortController;
-
-  createLitPortal({
-    closeOnClickAway: true,
-    template: ({ positionSlot }) => {
-      positionSlot.on(({ placement }) => {
-        list.placement = placement;
-      });
-
-      return list;
-    },
-    container,
-    portalStyles,
-    computePosition: {
-      referenceElement,
-      placement: 'bottom-start',
-      middleware: [
-        offset(4),
-        autoPlacement({
-          allowedPlacements: ['top-start', 'bottom-start'],
-          padding: portalPadding,
-        }),
-        size({
-          padding: portalPadding,
-          apply({ availableHeight, elements, placement }) {
-            Object.assign(elements.floating.style, {
-              height: '100%',
-              maxHeight: `${Math.min(maxHeight, availableHeight)}px`,
-              pointerEvents: 'none',
-              ...(placement.startsWith('top')
-                ? {
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                  }
-                : {
-                    display: null,
-                    alignItems: null,
-                  }),
-            });
-          },
-        }),
-      ],
-      autoUpdate: {
-        // fix the lang list position incorrectly when scrolling
-        animationFrame: true,
-      },
-    },
-    abortController,
-  });
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'affine-filterable-list': FilterableListComponent;
-  }
-}

blocksuite/blocks/src/_common/components/filterable-list/styles.ts

@@ -1,109 +0,0 @@
-import { PANEL_BASE } from '@blocksuite/affine-shared/styles';
-import { css } from 'lit';
-
-import { scrollbarStyle } from '../utils.js';
-
-export const filterableListStyles = css`
-  :host {
-    ${PANEL_BASE};
-
-    flex-direction: column;
-    padding: 0;
-
-    max-height: 100%;
-    pointer-events: auto;
-    overflow: hidden;
-    z-index: var(--affine-z-index-popover);
-  }
-
-  .affine-filterable-list {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    width: 230px;
-    padding: 8px;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-
-  .affine-filterable-list.flipped {
-    flex-direction: column-reverse;
-  }
-
-  .items-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    flex: 1;
-    overflow-y: scroll;
-    padding-top: 5px;
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-
-  editor-toolbar-separator {
-    margin: 8px 0;
-  }
-
-  .input-wrapper {
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-    padding: 4px 10px;
-    gap: 4px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: transparent;
-  }
-
-  .input-wrapper:focus-within {
-    border-color: var(--affine-blue-700);
-    box-shadow: var(--affine-active-shadow);
-  }
-
-  ${scrollbarStyle('.items-container')}
-
-  .filterable-item {
-    display: flex;
-    justify-content: space-between;
-    gap: 4px;
-    padding: 12px;
-  }
-
-  .filterable-item > div[slot='suffix'] {
-    display: flex;
-    align-items: center;
-  }
-
-  .filterable-item svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  .filterable-item.focussed {
-    color: var(--affine-blue-700);
-    background: var(--affine-hover-color-filled);
-  }
-
-  #filter-input {
-    flex: 1;
-    align-items: center;
-    height: 20px;
-    width: 140px;
-    border-radius: 8px;
-    padding-top: 2px;
-    border: transparent;
-    background: transparent;
-    color: inherit;
-  }
-
-  #filter-input:focus {
-    outline: none;
-  }
-
-  #filter-input::placeholder {
-    color: var(--affine-placeholder-color);
-    font-size: var(--affine-font-sm);
-  }
-`;

blocksuite/blocks/src/_common/components/filterable-list/types.ts

@@ -1,18 +0,0 @@
-import type { TemplateResult } from 'lit';
-
-export type FilterableListItemKey = string;
-
-export interface FilterableListItem<Props = unknown> {
-  name: string;
-  label?: string;
-  icon?: TemplateResult;
-  aliases?: string[];
-  props?: Props;
-}
-
-export interface FilterableListOptions<Props = unknown> {
-  placeholder?: string;
-  items: FilterableListItem<Props>[];
-  active?: (item: FilterableListItem) => boolean;
-  onSelect: (item: FilterableListItem) => void;
-}

blocksuite/blocks/src/_common/components/index.ts

@@ -1,2 +1 @@
 export * from './ai-item/index.js';
-export { scrollbarStyle } from './utils.js';

blocksuite/blocks/src/_common/components/utils.ts

@@ -7,7 +7,6 @@ import {
 import type { EditorHost } from '@blocksuite/block-std';
 import type { InlineEditor, InlineRange } from '@blocksuite/inline';
 import { BlockModel } from '@blocksuite/store';
-import { css, unsafeCSS } from 'lit';
 
 export function getQuery(
   inlineEditor: InlineEditor,
@@ -218,39 +217,3 @@ export function cleanSpecifiedTail(
     length: 0,
   });
 }
-
-/**
- * You should add a container before the scrollbar style to prevent the style pollution of the whole doc.
- */
-export const scrollbarStyle = (container: string) => {
-  if (!container) {
-    console.error(
-      'To prevent style pollution of the whole doc, you must add a container before the scrollbar style.'
-    );
-    return css``;
-  }
-
-  // sanitize container name
-  if (container.includes('{') || container.includes('}')) {
-    console.error('Invalid container name! Please use a valid CSS selector.');
-    return css``;
-  }
-
-  return css`
-    ${unsafeCSS(container)} {
-      scrollbar-gutter: stable;
-    }
-    ${unsafeCSS(container)}::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 4px;
-      height: 4px;
-    }
-    ${unsafeCSS(container)}::-webkit-scrollbar-thumb {
-      border-radius: 2px;
-      background-color: #b1b1b1;
-    }
-    ${unsafeCSS(container)}::-webkit-scrollbar-corner {
-      display: none;
-    }
-  `;
-};

blocksuite/blocks/src/effects.ts

@@ -8,6 +8,7 @@ import { effects as componentCaptionEffects } from '@blocksuite/affine-component
 import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
 import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
 import { effects as componentDragIndicatorEffects } from '@blocksuite/affine-components/drag-indicator';
+import { FilterableListComponent } from '@blocksuite/affine-components/filterable-list';
 import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal';
 import { effects as componentRichTextEffects } from '@blocksuite/affine-components/rich-text';
 import { effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button';
@@ -27,7 +28,6 @@ import { EmbedCardStyleMenu } from './_common/components/embed-card/embed-card-s
 import { EmbedCardEditCaptionEditModal } from './_common/components/embed-card/modal/embed-card-caption-edit-modal.js';
 import { EmbedCardCreateModal } from './_common/components/embed-card/modal/embed-card-create-modal.js';
 import { EmbedCardEditModal } from './_common/components/embed-card/modal/embed-card-edit-modal.js';
-import { FilterableListComponent } from './_common/components/filterable-list/index.js';
 import { AIItemList } from './_common/components/index.js';
 import { Loader } from './_common/components/loader.js';
 import { SmoothCorner } from './_common/components/smooth-corner.js';

blocksuite/blocks/src/index.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/triple-slash-reference */
+/* oxlint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path="./effects.ts" />
 import { deserializeXYWH, Point } from '@blocksuite/global/utils';
 
@@ -8,7 +8,6 @@ import { isCanvasElement } from './root-block/edgeless/utils/query.js';
 
 export * from './_common/adapters/index.js';
 export * from './_common/components/ai-item/index.js';
-export { scrollbarStyle } from './_common/components/index.js';
 export { type NavigatorMode } from './_common/edgeless/frame/consts.js';
 export {
   ExportManager,
@@ -91,6 +90,7 @@ export {
 } from '@blocksuite/affine-components/toolbar';
 export * from '@blocksuite/affine-model';
 export * from '@blocksuite/affine-shared/services';
+export { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 export {
   ColorVariables,
   FontFamilyVariables,

blocksuite/blocks/src/root-block/widgets/code-toolbar/components/code-toolbar.ts

@@ -5,7 +5,7 @@ import type {
   MenuItemGroup,
 } from '@blocksuite/affine-components/toolbar';
 import { renderGroups } from '@blocksuite/affine-components/toolbar';
-import { assertExists, noop, WithDisposable } from '@blocksuite/global/utils';
+import { noop, WithDisposable } from '@blocksuite/global/utils';
 import { flip, offset } from '@floating-ui/dom';
 import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -68,7 +68,12 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
 
     this._currentOpenMenu = this._popMenuAbortController;
 
-    assertExists(this._moreButton);
+    if (!this._moreButton) {
+      console.error(
+        'Failed to open more menu in code toolbar! Unexpected missing more button'
+      );
+      return;
+    }
 
     createLitPortal({
       template: html`

blocksuite/blocks/src/root-block/widgets/code-toolbar/components/lang-button.ts

@@ -1,3 +1,8 @@
+import {
+  type FilterableListItem,
+  type FilterableListOptions,
+  showPopFilterableList,
+} from '@blocksuite/affine-components/filterable-list';
 import { ArrowDownIcon } from '@blocksuite/affine-components/icons';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { noop, SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
@@ -6,11 +11,6 @@ import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  type FilterableListItem,
-  type FilterableListOptions,
-  showPopFilterableList,
-} from '../../../../_common/components/filterable-list/index.js';
 import type { CodeBlockComponent } from '../../../../code-block/code-block.js';
 
 export class LanguageListButton extends WithDisposable(

blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/index.ts

@@ -1,3 +1,4 @@
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { on, stopPropagation } from '@blocksuite/affine-shared/utils';
 import type { EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
@@ -5,7 +6,6 @@ import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { AIItemGroupConfig } from '../../../_common/components/ai-item/types.js';
-import { scrollbarStyle } from '../../../_common/components/utils.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 
 export class EdgelessCopilotPanel extends WithDisposable(LitElement) {

blocksuite/blocks/src/root-block/widgets/format-bar/styles.ts

@@ -1,7 +1,6 @@
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
-import { scrollbarStyle } from '../../../_common/components/utils.js';
-
 const paragraphButtonStyle = css`
   .paragraph-button-icon > svg:nth-child(2) {
     transition-duration: 0.3s;

blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/styles.ts

@@ -1,8 +1,7 @@
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
-import { scrollbarStyle } from '../../../_common/components/utils.js';
-
 export const TOOLBAR_HEIGHT = 46;
 
 export const keyboardToolbarStyles = css`

blocksuite/blocks/src/root-block/widgets/linked-doc/styles.ts

@@ -1,9 +1,8 @@
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { baseTheme } from '@toeverything/theme';
 import { css, unsafeCSS } from 'lit';
 
-import { scrollbarStyle } from '../../../_common/components/utils.js';
-
 export const linkedDocWidgetStyles = css`
   .input-mask {
     position: absolute;

blocksuite/blocks/src/root-block/widgets/slash-menu/styles.ts

@@ -1,8 +1,7 @@
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { baseTheme } from '@toeverything/theme';
 import { css, unsafeCSS } from 'lit';
 
-import { scrollbarStyle } from '../../../_common/components/utils.js';
-
 export const styles = css`
   .overlay-mask {
     pointer-events: auto;