1 files changed, 67 insertions, 14 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 054e55c56..7ff3e388f 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -93,23 +93,75 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
      * - Number button
     **/
 
+    _batch: UndoManager.Batch | undefined = undefined;
     /**
      * Number button
      */
     @computed get numberButton() {
-        const numType: string = StrCast(this.rootDoc.numButtonType);
+        const numType: string = StrCast(this.rootDoc.numType);
+        const setValue = (value: number) => {
+            // Script for running the toggle
+            const script: string = StrCast(this.rootDoc.script) + "(" + value + ")";
+            ScriptField.MakeScript(script)?.script.run();
+        };
+
+        // Script for checking the outcome of the toggle
+        const checkScript: string = StrCast(this.rootDoc.script) + "(true)";
+        const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result;
 
-        const dropdown = numType ?
-            <div className="menuButton-dropdownBox"
-                style={{ left: 0 }}>
+        const dropdown =
+            <div
+                className="menuButton-dropdownBox"
+                style={{ left: 0 }}
+            >
                 {/* DROPDOWN BOX CONTENTS */}
-            </div> : null;
+            </div>;
+
+        if (numType === NumButtonType.Slider) {
+            return (
+                <div
+                    className={`menuButton ${this.type} ${numType}`}
+                >
+                    <input type="range" step="1" min="0" max="100" value={checkResult}
+                        className={"toolbar-slider"} id="duration-slider"
+                        onPointerDown={() => { this._batch = UndoManager.StartBatch("presDuration"); }}
+                        onPointerUp={() => { if (this._batch) this._batch.end(); }}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }}
+                    />
+                </div>
+            );
+        } else if (numType === NumButtonType.DropdownOptions) {
+            return (
+                <div
+                    className={`menuButton ${this.type} ${numType}`}
+                    onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
+                >
+                    <div className="numBtn-subtract">
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
+                    </div>
+                    <div>
+                        <input
+                            className="input"
+                            type="number"
+                            value={checkResult}
+                            onChange={action((e) => setValue(Number(e.target.value)))}
+                        />
+                    </div>
+                    <div className="numBtn-plus">
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
+                    </div>
+                    {this.rootDoc.dropDownOpen ? dropdown : null}
+                </div>
+            );
+        } else {
+            return (
+                <div>
+
+                </div>
+            );
+        }
+
 
-        return (
-            <div className={`menuButton ${this.type} ${numType}`}>
-                {this.rootDoc.dropDownOpen ? dropdown : null}
-            </div>
-        );
     }
 
     /**
@@ -172,7 +224,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             if (selected && StrCast(selected.Document.type) === DocumentType.RTF) {
                 text = StrCast(selected.Document._fontFamily);
             } else {
-                text = StrCast(Doc.UserDoc()._fontFamily);
+                const fontFamily = StrCast(Doc.UserDoc()._fontFamily);
+                console.log(fontFamily);
+                text = fontFamily;
             }
             noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
                 "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
@@ -485,9 +539,8 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function changeFont(font: string) {
     SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font);
-    console.log("[changeFont]: ", font);
-    console.log(RichTextMenu.Instance.getActiveMarksOnSelection());
     Doc.UserDoc()._fontFamily = font;
+    console.log(Doc.UserDoc()._fontFamily);
     return Doc.UserDoc()._fontFamily;
 });
 
@@ -555,7 +608,7 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
     return Doc.UserDoc().italic;
 });
 
-Scripting.addGlobal(function setActiveInkTool(checkResult?: boolean, tool?: InkTool) {
+Scripting.addGlobal(function setActiveInkTool(tool: InkTool, checkResult?: boolean) {
     if (checkResult) {
         return Doc.UserDoc().activeInkTool === tool;
     }