fix(components): 修正 form/Editor 的工具共用颜色选择面板导致的错误

Author: caixw

apps/docs/src/components/demo/form/editor/editor.tsx

@@ -16,7 +16,7 @@ export default function (props: MountProps): JSX.Element {
 	const [Layout, layout] = layoutSelector('_d.demo.componentLayout', 'horizontal');
 
 	return (
-		<div>
+		<>
 			<Portal mount={props.mount}>
 				<Palette />
 				<Disabled />
@@ -40,6 +40,6 @@ export default function (props: MountProps): JSX.Element {
 				placeholder="placeholder text"
 			/>
 			<pre>{txt.getValue()}</pre>
-		</div>
+		</>
 	);
 }

packages/components/src/button/split/root.tsx

@@ -96,6 +96,7 @@ export function Root<T extends AvailableEnumType = string>(props: Props<T>): JSX
 							toggle: () => dropdownRef.toggle(),
 							root: () => dropdownRef.root(),
 							menu: () => dropdownRef.menu(),
+							trigger: () => dropdownRef.trigger(),
 							group: () => el,
 						});
 					}

packages/components/src/color/root.tsx

@@ -59,7 +59,7 @@ export interface Props extends BaseProps, RefProps<Ref> {
 	/**
 	 * 指定的颜色拾取面板的类型
 	 */
-	pickers: Array<PickerPanel>;
+	pickers: ReadonlyArray<PickerPanel>;
 }
 
 /**

packages/components/src/context/options/context.spec.tsx

@@ -54,7 +54,7 @@ type Result = ReturnType<typeof render>;
  * NOTE: 实例需要放在 describe 方法中。
  */
 export class ComponentTester {
-	readonly #component;
+	readonly #component: string;
 	readonly #result: Result;
 
 	private constructor(component: string, result: Result) {

packages/components/src/form/editor/toolbar/style.module.css

@@ -9,7 +9,7 @@
 @layer components {
 	.toolbar {
 		@apply border-b border-palette-border bg-palette-bg text-palette-fg p-1;
-		@apply flex gap-1;
+		@apply flex gap-1 justify-center;
 
 		.item {
 			@apply px-0 flex justify-center items-center h-8;

packages/components/src/form/editor/toolbar/textstyle.tsx

@@ -18,15 +18,6 @@ import { Numeric } from '@components/form/textfield';
 import styles from './style.module.css';
 import type { Props } from './types';
 
-const pickers = [
-	new ColorPanel.TailwindVarsPickerPanel(),
-	new ColorPanel.HSLPickerPanel(),
-	new ColorPanel.OKLCHPickerPanel(),
-	new ColorPanel.PresetPickerPanel(),
-	new ColorPanel.RGBPickerPanel(),
-	new ColorPanel.WebSafePickerPanel(),
-];
-
 /**
  * 指定文本的颜色
  *
@@ -55,6 +46,8 @@ export function Color(props: Props): JSX.Element {
 		if (accessor.getValue() === color) {
 			return;
 		}
+
+		isSelectUpdate = true;
 		accessor.setValue(color);
 	};
 	onMount(() => props.editor.on('selectionUpdate', selectionUpdate));
@@ -77,7 +70,13 @@ export function Color(props: Props): JSX.Element {
 			<ColorPicker.Root
 				ref={el => (picker = el)}
 				accessor={accessor}
-				pickers={pickers}
+				pickers={[
+					new ColorPanel.TailwindVarsPickerPanel(),
+					new ColorPanel.HSLPickerPanel(),
+					new ColorPanel.OKLCHPickerPanel(),
+					new ColorPanel.RGBPickerPanel(),
+					new ColorPanel.WebSafePickerPanel(),
+				]}
 				activatorClass={styles['color-activator']}
 			>
 				<IconColor />
@@ -95,7 +94,7 @@ export function BackgroundColor(props: Props): JSX.Element {
 	const l = useLocale();
 
 	const accessor = fieldAccessor<string | undefined>(
-		'bgcolor',
+		'backgroundColor',
 		props.editor.getAttributes('textStyle').backgroundColor,
 	);
 	let isSelectUpdate = false; // 是否来自 selectionUpdate 事件，如果是来自该事件，不需要执行 setColor 操作
@@ -117,6 +116,8 @@ export function BackgroundColor(props: Props): JSX.Element {
 		if (accessor.getValue() === color) {
 			return;
 		}
+
+		isSelectUpdate = true;
 		accessor.setValue(color);
 	};
 	onMount(() => props.editor.on('selectionUpdate', selectionUpdate));
@@ -139,7 +140,13 @@ export function BackgroundColor(props: Props): JSX.Element {
 			<ColorPicker.Root
 				ref={el => (picker = el)}
 				accessor={accessor}
-				pickers={pickers}
+				pickers={[
+					new ColorPanel.TailwindVarsPickerPanel(),
+					new ColorPanel.HSLPickerPanel(),
+					new ColorPanel.OKLCHPickerPanel(),
+					new ColorPanel.RGBPickerPanel(),
+					new ColorPanel.WebSafePickerPanel(),
+				]}
 				activatorClass={styles['color-activator']}
 			>
 				<IconBackgroundColor />
@@ -159,7 +166,6 @@ export function LineHeight(props: Props): JSX.Element {
 	const lh = props.editor.getAttributes('textStyle').lineHeight;
 	const accessor = fieldAccessor<number | undefined>('lineHeight', lh ? parseFloat(lh) : undefined);
 	accessor.onChange(v => {
-		// TODO
 		if (v) {
 			props.editor.chain().setLineHeight(v.toString()).run();
 		} else {