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

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;
+    }
+  `;
+};