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

blocksuite/affine/components/package.json

@@ -46,6 +46,7 @@
     "./context-menu": "./src/context-menu/index.ts",
     "./date-picker": "./src/date-picker/index.ts",
     "./drag-indicator": "./src/drag-indicator/index.ts",
+    "./filterable-list": "./src/filterable-list/index.ts",
     "./virtual-keyboard": "./src/virtual-keyboard/index.ts",
     "./toggle-button": "./src/toggle-button/index.ts",
     "./notification": "./src/notification/index.ts",

blocksuite/affine/components/src/filterable-list/index.ts

@@ -1,7 +1,4 @@
-import {
-  type AdvancedPortalOptions,
-  createLitPortal,
-} from '@blocksuite/affine-components/portal';
+import { PAGE_HEADER_HEIGHT } from '@blocksuite/affine-shared/consts';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { DoneIcon, SearchIcon } from '@blocksuite/icons/lit';
 import { autoPlacement, offset, type Placement, size } from '@floating-ui/dom';
@@ -9,7 +6,7 @@ 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 { type AdvancedPortalOptions, createLitPortal } from '../portal';
 import { filterableListStyles } from './styles.js';
 import type { FilterableListItem, FilterableListOptions } from './types.js';
 

blocksuite/affine/components/src/filterable-list/styles.ts

@@ -1,8 +1,6 @@
-import { PANEL_BASE } from '@blocksuite/affine-shared/styles';
+import { PANEL_BASE, scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
-import { scrollbarStyle } from '../utils.js';
-
 export const filterableListStyles = css`
   :host {
     ${PANEL_BASE};

blocksuite/affine/components/src/filterable-list/types.ts

@@ -1,7 +1,5 @@
 import type { TemplateResult } from 'lit';
 
-export type FilterableListItemKey = string;
-
 export interface FilterableListItem<Props = unknown> {
   name: string;
   label?: string;

blocksuite/affine/shared/src/styles/index.ts

@@ -1,2 +1,3 @@
-export { FONT_BASE, FONT_SM, FONT_XS } from './font.js';
-export { PANEL_BASE, PANEL_BASE_COLORS } from './panel.js';
+export { FONT_BASE, FONT_SM, FONT_XS } from './font';
+export { PANEL_BASE, PANEL_BASE_COLORS } from './panel';
+export { scrollbarStyle } from './scrollbar-style';

blocksuite/affine/shared/src/styles/scrollbar-style.ts

@@ -0,0 +1,37 @@
+import { css, unsafeCSS } from 'lit';
+
+/**
+ * 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/_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;