refactor(editor): extract color picker component (#9456)

blocksuite/affine/components/package.json

@@ -36,6 +36,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./ai-item": "./src/ai-item/index.ts",
+    "./color-picker": "./src/color-picker/index.ts",
     "./icons": "./src/icons/index.ts",
     "./peek": "./src/peek/index.ts",
     "./portal": "./src/portal/index.ts",

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

@@ -1,6 +1,6 @@
-import type { EditorMenuButton } from '@blocksuite/affine-components/toolbar';
 import type { ColorScheme, Palette } from '@blocksuite/affine-model';
 import { resolveColor } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -8,7 +8,7 @@ import { choose } from 'lit/directives/choose.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { ColorEvent } from '../panel/color-panel.js';
+import type { EditorMenuButton } from '../toolbar/menu-button.js';
 import type { ModeType, PickColorEvent, PickColorType } from './types.js';
 import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js';
 

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

@@ -0,0 +1,20 @@
+import { EdgelessColorPickerButton } from './button.js';
+import { EdgelessColorPicker } from './color-picker.js';
+import { EdgelessColorCustomButton } from './custom-button.js';
+
+export * from './button.js';
+export * from './color-picker.js';
+export * from './types.js';
+export * from './utils.js';
+
+export function effects() {
+  customElements.define('edgeless-color-picker', EdgelessColorPicker);
+  customElements.define(
+    'edgeless-color-picker-button',
+    EdgelessColorPickerButton
+  );
+  customElements.define(
+    'edgeless-color-custom-button',
+    EdgelessColorCustomButton
+  );
+}

blocksuite/affine/shared/src/utils/event.ts

@@ -1,3 +1,4 @@
+import type { Palette } from '@blocksuite/affine-model';
 import { IS_IOS, IS_MAC } from '@blocksuite/global/env';
 
 export function isTouchPadPinchEvent(e: WheelEvent) {
@@ -347,3 +348,19 @@ export const createKeydownObserver = ({
   // Fix composition input
   target.addEventListener('compositionend', () => onInput?.(true), { signal });
 };
+
+export class ColorEvent extends Event {
+  detail: Palette;
+
+  constructor(
+    type: string,
+    {
+      detail,
+      composed,
+      bubbles,
+    }: { detail: Palette; composed: boolean; bubbles: boolean }
+  ) {
+    super(type, { bubbles, composed });
+    this.detail = detail;
+  }
+}

blocksuite/blocks/src/effects.ts

@@ -18,6 +18,7 @@ import { effects as componentAiItemEffects } from '@blocksuite/affine-components
 import { BlockSelection } from '@blocksuite/affine-components/block-selection';
 import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
 import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
+import { effects as componentColorPickerEffects } from '@blocksuite/affine-components/color-picker';
 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';
@@ -43,9 +44,6 @@ import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto
 import { EdgelessAutoComplete } from './root-block/edgeless/components/auto-complete/edgeless-auto-complete.js';
 import { EdgelessToolIconButton } from './root-block/edgeless/components/buttons/tool-icon-button.js';
 import { EdgelessToolbarButton } from './root-block/edgeless/components/buttons/toolbar-button.js';
-import { EdgelessColorPickerButton } from './root-block/edgeless/components/color-picker/button.js';
-import { EdgelessColorPicker } from './root-block/edgeless/components/color-picker/color-picker.js';
-import { EdgelessColorCustomButton } from './root-block/edgeless/components/color-picker/custom-button.js';
 import { EdgelessConnectorHandle } from './root-block/edgeless/components/connector/connector-handle.js';
 import {
   NOTE_SLICER_WIDGET,
@@ -221,6 +219,7 @@ export function effects() {
   componentDragIndicatorEffects();
   componentToggleButtonEffects();
   componentAiItemEffects();
+  componentColorPickerEffects();
 
   widgetScrollAnchoringEffects();
   widgetMobileToolbarEffects();
@@ -241,10 +240,6 @@ export function effects() {
     'edgeless-copilot-toolbar-entry',
     EdgelessCopilotToolbarEntry
   );
-  customElements.define(
-    'edgeless-color-custom-button',
-    EdgelessColorCustomButton
-  );
   customElements.define('edgeless-connector-handle', EdgelessConnectorHandle);
   customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
   customElements.define(
@@ -331,13 +326,8 @@ export function effects() {
     EdgelessNavigatorSettingButton
   );
   customElements.define('edgeless-present-button', EdgelessPresentButton);
-  customElements.define('edgeless-color-picker', EdgelessColorPicker);
   customElements.define('overlay-scrollbar', OverlayScrollbar);
   customElements.define('affine-template-loading', AffineTemplateLoading);
-  customElements.define(
-    'edgeless-color-picker-button',
-    EdgelessColorPickerButton
-  );
   customElements.define('edgeless-auto-complete', EdgelessAutoComplete);
   customElements.define(
     'edgeless-font-weight-and-style-panel',

blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts

@@ -1,3 +0,0 @@
-export * from './button.js';
-export * from './color-picker.js';
-export * from './types.js';

blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts

@@ -1,6 +1,7 @@
 import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
 import { isTransparent, resolveColor } from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -8,22 +9,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import isEqual from 'lodash.isequal';
 
-export class ColorEvent extends Event {
-  detail: Palette;
-
-  constructor(
-    type: string,
-    {
-      detail,
-      composed,
-      bubbles,
-    }: { detail: Palette; composed: boolean; bubbles: boolean }
-  ) {
-    super(type, { bubbles, composed });
-    this.detail = detail;
-  }
-}
-
 function TransparentIcon(hollowCircle = false) {
   const CircleIcon: TemplateResult | typeof nothing = hollowCircle
     ? svg`<circle cx="10" cy="10" r="8" fill="white" />`

blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts

@@ -3,11 +3,11 @@ import {
   DefaultTheme,
   type StrokeStyle,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from './color-panel.js';
 import { type LineStyleEvent, LineStylesPanel } from './line-styles-panel.js';
 
 export class StrokeStylePanel extends WithDisposable(LitElement) {

blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts

@@ -3,13 +3,13 @@ import {
   EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { SignalWatcher } from '@blocksuite/global/utils';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from '../../panel/color-panel.js';
 import type { LineWidthEvent } from '../../panel/line-width-panel.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 

blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts

@@ -8,13 +8,13 @@ import {
   EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { SignalWatcher } from '@blocksuite/global/utils';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from '../../panel/color-panel.js';
 import type { LineWidthEvent } from '../../panel/line-width-panel.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 

blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts

@@ -14,13 +14,13 @@ import {
   EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { computed, effect, type Signal, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
-import type { ColorEvent } from '../../panel/color-panel.js';
 import { ShapeComponentConfig } from './shape-menu-config.js';
 
 export class EdgelessShapeMenu extends SignalWatcher(

blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts

@@ -1,11 +1,11 @@
 import { DefaultTheme } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { ColorEvent } from '../../panel/color-panel.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 
 export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts

@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import type {
   BrushElementModel,
   BrushProps,
@@ -9,18 +17,12 @@ import {
   LineWidth,
   resolveColor,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts

@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   AddTextIcon,
   ConnectorCWithArrowIcon,
@@ -34,6 +42,7 @@ import {
   resolveColor,
   StrokeStyle,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -43,13 +52,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
   type LineStyleEvent,
   LineStylesPanel,

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts

@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   NoteIcon,
   RenameIcon,
@@ -14,6 +22,7 @@ import {
   NoteDisplayMode,
   resolveColor,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
 import {
@@ -28,13 +37,6 @@ import { property, query } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
 import { when } from 'lit/directives/when.js';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import type { EdgelessFrameManager } from '../../edgeless/frame-manager.js';
 import { mountFrameTitleEditor } from '../../edgeless/utils/text.js';

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts

@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   ExpandIcon,
   LineStyleIcon,
@@ -35,14 +43,6 @@ import { join } from 'lit/directives/join.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 
-import type {
-  EdgelessColorPickerButton,
-  PickColorEvent,
-} from '../../edgeless/components/color-picker/index.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
 import {
   type LineStyleEvent,
   LineStylesPanel,

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts

@@ -1,4 +1,12 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   AddTextIcon,
   ChangeShapeIcon,
@@ -26,6 +34,7 @@ import {
   ShapeStyle,
   StrokeStyle,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -36,13 +45,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import isEqual from 'lodash.isequal';
 
-import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
-import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
   type LineStyleEvent,
   LineStylesPanel,

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts

@@ -4,6 +4,14 @@ import {
   normalizeShapeBound,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
+import type {
+  EdgelessColorPickerButton,
+  PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  packColor,
+  packColorsWithColorScheme,
+} from '@blocksuite/affine-components/color-picker';
 import {
   SmallArrowDownIcon,
   TextAlignCenterIcon,
@@ -25,6 +33,7 @@ import {
   TextElementModel,
   type TextStyleProps,
 } from '@blocksuite/affine-model';
+import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import {
   Bound,
   countBy,
@@ -37,15 +46,6 @@ import { choose } from 'lit/directives/choose.js';
 import { join } from 'lit/directives/join.js';
 import { when } from 'lit/directives/when.js';
 
-import type {
-  EdgelessColorPickerButton,
-  PickColorEvent,
-} from '../../edgeless/components/color-picker/index.js';
-import {
-  packColor,
-  packColorsWithColorScheme,
-} from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 
 const FONT_SIZE_LIST = [

blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts

@@ -1,3 +1,4 @@
+import { parseStringToRgba } from '@blocksuite/affine-components/color-picker';
 import {
   ColorScheme,
   FrameBlockModel,
@@ -22,7 +23,6 @@ import { themeToVar } from '@toeverything/theme/v2';
 import { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
-import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js';
 import type { EdgelessRootService } from '../../edgeless/index.js';
 import { frameTitleStyle, frameTitleStyleVars } from './styles.js';
 

blocksuite/tests-legacy/edgeless/color-picker.spec.ts

@@ -1,4 +1,4 @@
-import { parseStringToRgba } from '@blocks/root-block/edgeless/components/color-picker/utils.js';
+import { parseStringToRgba } from '@blocksuite/affine-components/color-picker';
 import { expect, type Locator, type Page } from '@playwright/test';
 import { dragBetweenCoords } from 'utils/actions/drag.js';
 import {

blocksuite/tests-legacy/package.json

@@ -7,6 +7,7 @@
     "test": "yarn playwright test"
   },
   "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

tools/utils/src/workspace.gen.ts

@@ -415,6 +415,7 @@ export const PackageList = [
     location: 'blocksuite/tests-legacy',
     name: '@blocksuite/legacy-e2e',
     workspaceDependencies: [
+      'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/framework/block-std',
       'blocksuite/framework/global',

yarn.lock

@@ -3953,6 +3953,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@blocksuite/legacy-e2e@workspace:blocksuite/tests-legacy"
   dependencies:
+    "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/global": "workspace:*"