refactor(editor): simplify color picker (#10776)

### What's Changed!

* Added `enableCustomColor` property into `EdgelessColorPickerButton` component
* Removed redundant code

blocksuite/affine/components/src/color-picker/button.ts

@@ -1,4 +1,4 @@
-import type { ColorScheme, Palette } from '@blocksuite/affine-model';
+import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
 import { DefaultTheme, resolveColor } from '@blocksuite/affine-model';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
@@ -7,23 +7,28 @@ import { property, query, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit-html/directives/when.js';
 
-import type { EditorMenuButton } from '../toolbar/menu-button.js';
-import type { ModeType, PickColorEvent, PickColorType } from './types.js';
-import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js';
+import type { EditorMenuButton } from '../toolbar/menu-button';
+import type { PickColorEvent } from './types';
+import {
+  keepColor,
+  packColorsWithColorScheme,
+  preprocessColor,
+  rgbaToHex8,
+} from './utils.js';
 
 type Type = 'normal' | 'custom';
 
 export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
   readonly #select = (e: ColorEvent) => {
+    e.stopPropagation();
     this.#pick(e.detail);
   };
 
   switchToCustomTab = (e: MouseEvent) => {
     e.stopPropagation();
-    if (this.colorType === 'palette') {
-      this.colorType = 'normal';
-    }
+
     this.tabType = 'custom';
     // refresh menu's position
     this.menuButton.show(true);
@@ -82,12 +87,16 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
   }
 
   override firstUpdated() {
-    this.disposables.addFromEvent(this.menuButton, 'toggle', (e: Event) => {
-      const opened = (e as CustomEvent<boolean>).detail;
-      if (!opened && this.tabType !== 'normal') {
-        this.tabType = 'normal';
+    this.disposables.addFromEvent(
+      this.menuButton,
+      'toggle',
+      (e: CustomEvent<boolean>) => {
+        const opened = e.detail;
+        if (!opened && this.tabType !== 'normal') {
+          this.tabType = 'normal';
+        }
       }
-    });
+    );
   }
 
   override render() {
@@ -99,18 +108,20 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
             aria-label=${this.label}
             .tooltip=${this.tooltip || this.label}
           >
-            ${this.isText
-              ? html`
-                  <edgeless-text-color-icon
-                    .color=${this.colorWithoutAlpha}
-                  ></edgeless-text-color-icon>
-                `
-              : html`
-                  <edgeless-color-button
-                    .color=${this.colorWithoutAlpha}
-                    .hollowCircle=${this.hollowCircle}
-                  ></edgeless-color-button>
-                `}
+            ${when(
+              this.isText,
+              () => html`
+                <edgeless-text-color-icon
+                  .color=${this.colorWithoutAlpha}
+                ></edgeless-text-color-icon>
+              `,
+              () => html`
+                <edgeless-color-button
+                  .color=${this.colorWithoutAlpha}
+                  .hollowCircle=${this.hollowCircle}
+                ></edgeless-color-button>
+              `
+            )}
           </editor-icon-button>
         `}
       >
@@ -128,53 +139,60 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                   .theme=${this.theme}
                   .palettes=${this.palettes}
                   .hollowCircle=${this.hollowCircle}
-                  .openColorPicker=${this.switchToCustomTab}
                   .hasTransparent=${false}
                   @select=${this.#select}
                 >
-                  <edgeless-color-custom-button
-                    slot="custom"
-                    style=${styleMap(this.customButtonStyle)}
-                    ?active=${this.isCustomColor}
-                    @click=${this.switchToCustomTab}
-                  ></edgeless-color-custom-button>
+                  ${when(
+                    this.enableCustomColor,
+                    () => html`
+                      <edgeless-color-custom-button
+                        slot="custom"
+                        style=${styleMap(this.customButtonStyle)}
+                        ?active=${this.isCustomColor}
+                        @click=${this.switchToCustomTab}
+                      ></edgeless-color-custom-button>
+                    `
+                  )}
                 </edgeless-color-panel>
               </div>
             `,
           ],
           [
             'custom',
-            () => html`
-              <edgeless-color-picker
-                class="custom"
-                .pick=${this.pick}
-                .colors=${{
-                  type:
-                    this.colorType === 'palette' ? 'normal' : this.colorType,
-                  modes: this.colors.map(
-                    preprocessColor(window.getComputedStyle(this))
-                  ),
-                }}
-              ></edgeless-color-picker>
-            `,
+            () => {
+              const packed = packColorsWithColorScheme(
+                this.theme,
+                this.color,
+                this.originalColor
+              );
+              const type = packed.type === 'palette' ? 'normal' : packed.type;
+              const modes = packed.colors.map(
+                preprocessColor(window.getComputedStyle(this))
+              );
+
+              return html`
+                <edgeless-color-picker
+                  class="custom"
+                  .pick=${this.pick}
+                  .colors=${{ type, modes }}
+                ></edgeless-color-picker>
+              `;
+            },
           ],
         ])}
       </editor-menu-button>
     `;
   }
 
+  @property()
+  accessor originalColor!: Color;
+
   @property()
   accessor color!: string;
 
   @property()
   accessor colorPanelClass: string | undefined = undefined;
 
-  @property({ attribute: false })
-  accessor colors: { type: ModeType; value: string }[] = [];
-
-  @property()
-  accessor colorType: PickColorType = 'palette';
-
   @property({ attribute: false })
   accessor hollowCircle: boolean = false;
 
@@ -201,4 +219,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
 
   @property()
   accessor tooltip: string | undefined = undefined;
+
+  @property()
+  accessor enableCustomColor: boolean = true;
 }

blocksuite/affine/components/src/color-picker/color-panel.ts

@@ -253,9 +253,6 @@ export class EdgelessColorPanel extends LitElement {
   @property({ attribute: false })
   accessor hollowCircle = false;
 
-  @property()
-  accessor openColorPicker!: (e: MouseEvent) => void;
-
   @property({ type: Array })
   accessor palettes: readonly Palette[] = DefaultTheme.Palettes;