trying to prevent colorpicker from generating undo event for every drag movement.

1 files changed, 8 insertions, 3 deletions

diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 91eac675f..1b2209224 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -267,20 +267,25 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         return ScriptCast(this.rootDoc.script);
     }
 
+    colorBatch:UndoManager.Batch|undefined;
     /**
      * Color button
      */
     @computed get colorButton() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const curColor = this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         return (
             <ColorPicker
                 setSelectedColor={value => {
-                    const s = this.colorScript;
-                    s && undoable(() => s.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false }).result, `Set ${tooltip} to ${value}`)();
+                    if (!this.colorBatch) this.colorBatch = UndoManager.StartBatch(`Set ${tooltip} color`);
+                    this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false });
+                }}
+                setFinalColor={value => {
+                    this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false });
+                    this.colorBatch?.end();
+                    this.colorBatch= undefined;
                 }}
                 selectedColor={curColor}
                 type={Type.PRIM}