fixes for fontcolor dropdown to be continuous as pointer moves.

2 files changed, 24 insertions, 22 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 6a782b105..368699dea 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -318,27 +318,33 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         );
     }
 
+    @computed get colorScript() {
+        const script = StrCast(this.rootDoc.script);
+        return ScriptField.MakeScript(script + '(colValue, checkResult)', { colValue: "string", checkResult: "boolean" });
+    }
+    colorPicker = (boolResult: string) => {
+        const click = (value: ColorState) => {
+            const s = this.colorScript;
+            s && undoBatch(() => s.script.run({ colValue: Utils.colorString(value), checkResult: false }).result)();
+        };
+        const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+            '#FFFFFF', '#f1efeb', "transparent"];
+        return <SketchPicker
+            disableAlpha={false}
+            onChange={click}
+            color={boolResult}
+            presetColors={colorOptions} />;
+    }
     /**
      * Color button
      */
     @computed get colorButton() {
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
+        const active = StrCast(this.rootDoc.dropDownOpen);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        const boolResult = this.colorScript?.script.run({ colValue: undefined, checkResult: true }).result;
 
-        const script: string = StrCast(this.rootDoc.script);
-        const scriptCheck: string = script + "(undefined, true)";
-        const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
-
-        const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
-            '#FFFFFF', '#f1efeb', "transparent"];
-
-        const colorBox = (func: (color: ColorState) => void) => <SketchPicker
-            disableAlpha={false}
-            onChange={func}
-            color={boolResult ?? "transparent"}
-            presetColors={colorOptions} />;
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                 {this.label}
@@ -350,10 +356,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
         </div>;
 
-        const click = (value: ColorState) => {
-            const s = ScriptField.MakeScript(script + '("' + Utils.colorString(value) + '", false)');
-            s && undoBatch(() => s.script.run().result)();
-        };
         return (
             <div className={`menuButton ${this.type} ${active}`}
                 style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
@@ -368,7 +370,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                         <div className="menuButton-dropdownBox"
                             onPointerDown={e => e.stopPropagation()}
                             onClick={e => e.stopPropagation()}>
-                            {colorBox(click)}
+                            {this.colorPicker(boolResult ?? "transparent")}
                         </div>
                         <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
                     </div>
@@ -574,7 +576,6 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo
         return selected?._backgroundColor ?? "transparent";
     }
     if (selected) selected._backgroundColor = color;
-    Doc.UserDoc()._fontColor = color;
 });
 
 // toggle: Set overlay status of selected document
@@ -683,7 +684,7 @@ Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean)
     }
 
     if (editorView) color && RichTextMenu.Instance.setColor(color, editorView, editorView?.dispatch);
-    else Doc.UserDoc()._fontColor = color;
+    else Doc.UserDoc().fontColor = color;
 });
 
 // toggle: Set overlay status of selected document
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 0a2a54aae..3efc46259 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -336,8 +336,9 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     setColor(color: String, view: EditorView, dispatch: any) {
         if (this.view) {
             const colorMark = view.state.schema.mark(view.state.schema.marks.pFontColor, { color });
-            view.focus();
             this.setMark(colorMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(colorMark)), true);
+            view.focus();
+            this.updateMenu(this.view, undefined, this.props);
         }
     }