really close

1 files changed, 106 insertions, 54 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 53cd017b0..e09e15a60 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { StringifyOptions } from 'querystring';
 import * as React from 'react';
 import { ColorState, SketchPicker } from 'react-color';
 import { Doc, StrListCast } from '../../../../fields/Doc';
@@ -11,6 +10,7 @@ import { InkTool } from '../../../../fields/InkField';
 import { createSchema, makeInterface } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { WebField } from '../../../../fields/URLField';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Scripting } from "../../../util/Scripting";
 import { SelectionManager } from '../../../util/SelectionManager';
@@ -20,14 +20,13 @@ import { CollectionViewType } from '../../collections/CollectionView';
 import { ContextMenu } from '../../ContextMenu';
 import { DocComponent } from '../../DocComponent';
 import { EditableView } from '../../EditableView';
+import { GestureOverlay } from '../../GestureOverlay';
 import { Colors } from '../../global/globalEnums';
+import { SetActiveInkColor } from '../../InkingStroke';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '.././FieldView';
-import { RichTextMenu } from '../formattedText/RichTextMenu';
 import './FontIconBox.scss';
-import { SetActiveInkWidth, SetActiveInkColor } from '../../InkingStroke';
-import { GestureOverlay } from '../../GestureOverlay';
-import { WebField } from '../../../../fields/URLField';
+import { RichTextMenu } from '../formattedText/RichTextMenu';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -241,7 +240,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         let text: string | undefined;
         let dropdown = true;
         let icon: IconProp = "caret-down";
-
+        let noneSelected:boolean = false;
 
         if (script === 'setView') {
             const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
@@ -253,6 +252,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 icon = Doc.toIcon(selected.Document);
             } else {
                 dropdown = false;
+                noneSelected = true;
                 text = "None selected";
             }
             noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
@@ -298,7 +298,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             <div className={`menuButton ${this.type} ${active}`}
                 style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : "flex" }}
                 onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}>
-                {dropdown ? (null) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
+                {dropdown || noneSelected ? (null) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
                 <div className="menuButton-dropdown-header">
                     {text && text[0].toUpperCase() + text.slice(1)}
                 </div>
@@ -395,22 +395,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         // Determine the type of toggle button
         const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
 
-        // Script for running the toggle
-        const script: string = StrCast(this.rootDoc.script);
-
-        // Script for checking the outcome of the toggle
-        let checkScript:string;
-        if (StrCast(this.rootDoc.script).includes("(")){
-            checkScript = StrCast(this.rootDoc.script)
-
-        } else {
-            checkScript = StrCast(this.rootDoc.script) + "(true)";
-        }
-
-        // Function to run the script
-        const runScript = () => ScriptField.MakeScript(script + "()")?.script.run();
-        const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result;
-
         // Colors
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
@@ -423,13 +407,10 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
 
         if (switchToggle) {
             return (
-                <div className={`menuButton ${this.type} ${'switch'}`}
-                    onClick={runScript}
-                >
+                <div className={`menuButton ${this.type} ${'switch'}`}>
                     <label className="switch">
                         <input type="checkbox"
-                            checked={checkResult}
-                            onChange={runScript}
+                            checked={backgroundColor === Colors.MEDIUM_BLUE}
                         />
                         <span className="slider round"></span>
                     </label>
@@ -438,10 +419,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         } else {
             return (
                 <div className={`menuButton ${this.type}`}
-                    style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }}
-                    onClick={this.layoutDoc.ignoreClick ? runScript : undefined}
-                >
-                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
+                    style={{ opacity: 1, backgroundColor: backgroundColor, color: color }}>
+                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                     {label}
                 </div>
             );
@@ -595,7 +574,8 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo
 Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
     const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
     if (checkResult && selected) {
-        return NumCast(selected.Document.z) === 1;
+        if(NumCast(selected.Document.z) === 1) return Colors.MEDIUM_BLUE;
+        else return "transparent";
     }
     selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
 });
@@ -606,43 +586,109 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
  *      toggleBold
  *      toggleUnderline
  *      toggleItalic
+ *      setAlignment
+ *      toggleBold
+ *      toggleItalic
+ *      toggleUnderline
  **/ 
+Scripting.addGlobal(function toggleBold(){
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+});
+
 
 // toggle: Set overlay status of selected document
-Scripting.addGlobal(function setFont(font: string) {
+Scripting.addGlobal(function setFont(font: string, checkResult?: boolean) {
     SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font);
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    editorView?.state && RichTextMenu.Instance.setFontFamily(font, editorView);
     Doc.UserDoc()._fontFamily = font;
     return Doc.UserDoc()._fontFamily;
 });
 
+Scripting.addGlobal(function getActiveTextInfo(info:"family" | "size" | "color" | "highlight"){
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    const style = editorView?.state && RichTextMenu.Instance.getActiveFontStylesOnSelection();
+    switch(info){
+        case "family": return style?.activeColors[0];
+        case "size": return style?.activeSizes[0];
+        case "color": return style?.activeColors[0];
+        case "highlight": return style?.activeHighlights[0];
+    }
+})
+
+Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", checkResult?: boolean) {
+    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+    if (checkResult) {
+        let active:string;
+        if (editorView){
+            active = editorView?.state && RichTextMenu.Instance.getActiveAlignment();
+        } else {
+            active = StrCast(Doc.UserDoc().textAlign); 
+        }
+        if (active === align) return Colors.MEDIUM_BLUE;
+        else return "transparent";
+    }
+    SelectionManager.Views().map(dv => dv.props.Document.textAlign = align);
+    switch(align){
+        case "left":
+            editorView?.state && RichTextMenu.Instance.alignLeft( editorView, editorView.dispatch);
+            break;
+        case "center":
+            editorView?.state && RichTextMenu.Instance.alignCenter(editorView, editorView.dispatch);
+            break;
+        case "right":
+            editorView?.state && RichTextMenu.Instance.alignRight(editorView, editorView.dispatch);
+            break;
+        default:
+            break;
+    }
+    Doc.UserDoc().textAlign = align;
+});
+
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+
     if (checkResult) {
         if (selected) {
-            console.log("[Font color] (selected): " + StrCast(selected._fontColor));
-            return selected._fontColor;
+            console.log("[Font color] (selected): " + StrCast(selected.rootDoc._fontColor));
+            return selected.rootDoc._fontColor;
         } else {
             console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
             return Doc.UserDoc()._fontColor;
         }
     }
-    if (selected) selected._fontColor = color;
+
+    if (selected) {
+        selected.rootDoc._fontColor = color;
+        if (color) {
+            editorView?.state && RichTextMenu.Instance.setColor(color, editorView, editorView?.dispatch);
+        }
+    }
     Doc.UserDoc()._fontColor = color;
 });
 
-// // toggle: Set overlay status of selected document
-// Scripting.addGlobal(function setFontHighlight(color?: string, checkResult?: boolean) {
-//     const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-//     if (checkResult) {
-//         if (selected) {
-//             return selected.Document._fontColor;
-//         } else {
-//             return Doc.UserDoc()._fontColor;
-//         }
-//     }
-//     Doc.UserDoc()._fontColor = color;
-// });
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function setFontHighlight(color?: string, checkResult?: boolean) {
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+
+    if (checkResult) {
+        if (selected) {
+            return selected.Document._fontHighlight;
+        } else {
+            return Doc.UserDoc()._fontHighlight;
+        }
+    }
+    if (selected) {
+        selected.rootDoc._fontColor = color;
+        if (color) {
+            editorView?.state && RichTextMenu.Instance.setHighlight(color, editorView, editorView?.dispatch);
+        }
+    }
+    Doc.UserDoc()._fontHighlight = color;
+});
 
 
 
@@ -652,12 +698,15 @@ Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) {
         const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10);
         return size;
     }
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    editorView?.state && RichTextMenu.Instance.setFontSize(Number(size), editorView);
     Doc.UserDoc()._fontSize = size + "px";
 });
 
 Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
     if (checkResult) {
-        return Doc.UserDoc().bold;
+        if (Doc.UserDoc().bold) return Colors.MEDIUM_BLUE;
+        else return "transparent";
     }
     SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic);
     Doc.UserDoc().bold = !Doc.UserDoc().bold;
@@ -666,7 +715,8 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
 
 Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
     if (checkResult) {
-        return Doc.UserDoc().underline;
+        if (Doc.UserDoc().underline) return Colors.MEDIUM_BLUE;
+        else return "transparent";
     }
     SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic);
     Doc.UserDoc().underline = !Doc.UserDoc().underline;
@@ -675,7 +725,8 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
 
 Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
     if (checkResult) {
-        return Doc.UserDoc().italic;
+        if (Doc.UserDoc().italic) return Colors.MEDIUM_BLUE;
+        else return "transparent";
     }
     SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic);
     Doc.UserDoc().italic = !Doc.UserDoc().italic;
@@ -693,7 +744,8 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
 
 Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolean) {
     if (checkResult) {
-        return Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool;
+        if (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool) return Colors.MEDIUM_BLUE;
+        else return "transparent";
     }
     if (tool === "circle") {
         Doc.UserDoc().activeInkTool = "pen";