From b7e66da6b23cdb41c127000dfe13843d35f7d0cc Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 7 Jul 2022 16:20:33 -0400
Subject: fixed more errors.

---
 src/client/views/nodes/button/FontIconBox.tsx | 582 ++++++++++++++------------
 1 file changed, 307 insertions(+), 275 deletions(-)

(limited to 'src/client/views/nodes/button')

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 28874220a..539fb5c99 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -14,7 +14,7 @@ import { WebField } from '../../../../fields/URLField';
 import { aggregateBounds, Utils } from '../../../../Utils';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
-import { ScriptingGlobals } from "../../../util/ScriptingGlobals";
+import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { undoBatch, UndoManager } from '../../../util/UndoManager';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
@@ -34,23 +34,23 @@ import { FontIconBadge } from './FontIconBadge';
 import './FontIconBox.scss';
 
 export enum ButtonType {
-    TextButton = "textBtn",
-    MenuButton = "menuBtn",
-    DropdownList = "drpdownList",
-    DropdownButton = "drpdownBtn",
-    ClickButton = "clickBtn",
-    DoubleButton = "dblBtn",
-    ToggleButton = "tglBtn",
-    ColorButton = "colorBtn",
-    ToolButton = "toolBtn",
-    NumberButton = "numBtn",
-    EditableText = "editableText"
+    TextButton = 'textBtn',
+    MenuButton = 'menuBtn',
+    DropdownList = 'drpdownList',
+    DropdownButton = 'drpdownBtn',
+    ClickButton = 'clickBtn',
+    DoubleButton = 'dblBtn',
+    ToggleButton = 'tglBtn',
+    ColorButton = 'colorBtn',
+    ToolButton = 'toolBtn',
+    NumberButton = 'numBtn',
+    EditableText = 'editableText',
 }
 
 export enum NumButtonType {
-    Slider = "slider",
-    DropdownOptions = "list",
-    Inline = "inline"
+    Slider = 'slider',
+    DropdownOptions = 'list',
+    Inline = 'inline',
 }
 
 export interface ButtonProps extends FieldViewProps {
@@ -58,29 +58,39 @@ export interface ButtonProps extends FieldViewProps {
 }
 @observer
 export class FontIconBox extends DocComponent<ButtonProps>() {
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); }
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(FontIconBox, fieldKey);
+    }
     showTemplate = (): void => {
         const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
-        dragFactory && this.props.addDocTab(dragFactory, "add:right");
-    }
-    dragAsTemplate = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)'); };
-    useAsPrototype = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)'); };
+        dragFactory && this.props.addDocTab(dragFactory, 'add:right');
+    };
+    dragAsTemplate = (): void => {
+        this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)');
+    };
+    useAsPrototype = (): void => {
+        this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)');
+    };
 
     specificContextMenu = (): void => {
         if (!Doc.noviceMode) {
             const cm = ContextMenu.Instance;
-            cm.addItem({ description: "Show Template", event: this.showTemplate, icon: "tag" });
-            cm.addItem({ description: "Use as Render Template", event: this.dragAsTemplate, icon: "tag" });
-            cm.addItem({ description: "Use as Prototype", event: this.useAsPrototype, icon: "tag" });
+            cm.addItem({ description: 'Show Template', event: this.showTemplate, icon: 'tag' });
+            cm.addItem({ description: 'Use as Render Template', event: this.dragAsTemplate, icon: 'tag' });
+            cm.addItem({ description: 'Use as Prototype', event: this.useAsPrototype, icon: 'tag' });
         }
-    }
+    };
 
-    static GetShowLabels() { return BoolCast(Doc.UserDoc()._showLabel); }
-    static SetShowLabels(show:boolean) { Doc.UserDoc()._showLabel = show; }
+    static GetShowLabels() {
+        return BoolCast(Doc.UserDoc()._showLabel);
+    }
+    static SetShowLabels(show: boolean) {
+        Doc.UserDoc()._showLabel = show;
+    }
 
     // Determining UI Specs
     @observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
-    @observable private icon = StrCast(this.dataDoc.icon, "user") as any;
+    @observable private icon = StrCast(this.dataDoc.icon, 'user') as any;
     @observable private dropdown: boolean = BoolCast(this.rootDoc.dropDownOpen);
     @observable private buttonList: string[] = StrListCast(this.rootDoc.btnList);
     @observable private type = StrCast(this.rootDoc.btnType);
@@ -92,11 +102,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * - Expandable button (CollectionLinearView)
      * - Button inside of CollectionLinearView vs. outside of CollectionLinearView
      * - Action button
-     * - Dropdown button 
+     * - Dropdown button
      * - Color button
      * - Dropdown list
      * - Number button
-    **/
+     **/
 
     _batch: UndoManager.Batch | undefined = undefined;
     /**
@@ -110,25 +120,30 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         // Script for checking the outcome of the toggle
         const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0;
 
-        const label = !FontIconBox.GetShowLabels() ? (null) :
-            <div className="fontIconBox-label">
-                {this.label}
-            </div>;
+        const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
         if (numBtnType === NumButtonType.Slider) {
-            const dropdown = <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} >
-                <input type="range" step="1" min={NumCast(this.rootDoc.numBtnMin, 0)} max={NumCast(this.rootDoc.numBtnMax, 100)} value={checkResult}
-                    className={"menu-slider"} id="slider"
-                    onPointerDown={() => this._batch = UndoManager.StartBatch("presDuration")}
-                    onPointerUp={() => this._batch?.end()}
-                    onChange={e => { e.stopPropagation(); setValue(Number(e.target.value)); }}
-                />
-            </div>;
+            const dropdown = (
+                <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()}>
+                    <input
+                        type="range"
+                        step="1"
+                        min={NumCast(this.rootDoc.numBtnMin, 0)}
+                        max={NumCast(this.rootDoc.numBtnMax, 100)}
+                        value={checkResult}
+                        className={'menu-slider'}
+                        id="slider"
+                        onPointerDown={() => (this._batch = UndoManager.StartBatch('presDuration'))}
+                        onPointerUp={() => this._batch?.end()}
+                        onChange={e => {
+                            e.stopPropagation();
+                            setValue(Number(e.target.value));
+                        }}
+                    />
+                </div>
+            );
             return (
-                <div
-                    className={`menuButton ${this.type} ${numBtnType}`}
-                    onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
-                >
+                <div className={`menuButton ${this.type} ${numBtnType}`} onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}>
                     {checkResult}
                     {label}
                     {this.rootDoc.dropDownOpen ? dropdown : null}
@@ -141,62 +156,56 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     items.push(i);
                 }
             }
-            const list = items.map((value) => {
-                return <div className="list-item" key={`${value}`}
-                    style={{
-                        backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined
-                    }}
-                    onClick={() => setValue(value)}>
-                    {value}
-                </div>;
+            const list = items.map(value => {
+                return (
+                    <div
+                        className="list-item"
+                        key={`${value}`}
+                        style={{
+                            backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined,
+                        }}
+                        onClick={() => setValue(value)}>
+                        {value}
+                    </div>
+                );
             });
             return (
-                <div
-                    className={`menuButton ${this.type} ${numBtnType}`}
-                >
-                    <div className={`button`} onClick={action((e) => setValue(Number(checkResult) - 1))}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"minus"} />
+                <div className={`menuButton ${this.type} ${numBtnType}`}>
+                    <div className={`button`} onClick={action(e => setValue(Number(checkResult) - 1))}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'minus'} />
                     </div>
                     <div
                         className={`button ${'number'}`}
-                        onPointerDown={(e) => {
+                        onPointerDown={e => {
                             e.stopPropagation();
                             e.preventDefault();
                         }}
-                        onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
-                    >
-                        <input
-                            style={{ width: 30 }}
-                            className="button-input"
-                            type="number"
-                            value={checkResult}
-                            onChange={action((e) => setValue(Number(e.target.value)))}
-                        />
+                        onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}>
+                        <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} onChange={action(e => setValue(Number(e.target.value)))} />
                     </div>
-                    <div className={`button`} onClick={action((e) => setValue(Number(checkResult) + 1))}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
+                    <div className={`button`} onClick={action(e => setValue(Number(checkResult) + 1))}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'plus'} />
                     </div>
 
-                    {this.rootDoc.dropDownOpen ?
+                    {this.rootDoc.dropDownOpen ? (
                         <div>
-                            <div className="menuButton-dropdownList"
-                                style={{ left: "25%" }}>
+                            <div className="menuButton-dropdownList" style={{ left: '25%' }}>
                                 {list}
                             </div>
-                            <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
-                        </div> : null}
-
+                            <div
+                                className="dropbox-background"
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    this.rootDoc.dropDownOpen = false;
+                                }}
+                            />
+                        </div>
+                    ) : null}
                 </div>
             );
         } else {
-            return (
-                <div>
-
-                </div>
-            );
+            return <div></div>;
         }
-
-
     }
 
     /**
@@ -207,20 +216,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         return (
-            <div className={`menuButton ${this.type} ${active}`}
+            <div
+                className={`menuButton ${this.type} ${active}`}
                 style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}>
+                onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}>
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
-                {!this.label || !FontIconBox.GetShowLabels() ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
-                <div
-                    className="menuButton-dropdown"
-                    style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
+                {!this.label || !FontIconBox.GetShowLabels() ? null : (
+                    <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
+                        {' '}
+                        {this.label}{' '}
+                    </div>
+                )}
+                <div className="menuButton-dropdown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
                     <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
                 </div>
-                {this.rootDoc.dropDownOpen ?
-                    <div className="menuButton-dropdownBox">
-                        {/* DROPDOWN BOX CONTENTS */}
-                    </div> : null}
+                {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null}
             </div>
         );
     }
@@ -234,12 +244,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
 
         const script = ScriptCast(this.rootDoc.script);
-        if (!script) { return null; }
+        if (!script) {
+            return null;
+        }
 
         let noviceList: string[] = [];
         let text: string | undefined;
         let dropdown = true;
-        let icon: IconProp = "caret-down";
+        let icon: IconProp = 'caret-down';
         try {
             if (script.script.originalScript.startsWith('setView')) {
                 const selected = SelectionManager.Docs().lastElement();
@@ -248,100 +260,110 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                         text = StrCast(selected._viewType);
                     } else {
                         dropdown = false;
-                        text = selected.type === DocumentType.RTF ? "Text" : StrCast(selected.type);
+                        text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
                         icon = Doc.toIcon(selected);
                     }
                 } else {
                     dropdown = false;
-                    icon = "globe-asia";
-                    text = "User Default";
+                    icon = 'globe-asia';
+                    text = 'User Default';
                 }
                 noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
             } else if (script.script.originalScript.startsWith('setFont')) {
                 const editorView = RichTextMenu.Instance?.TextView?.EditorView;
                 text = StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-                noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
-                    "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+                noviceList = ['Roboto', 'Times New Roman', 'Arial', 'Georgia', 'Comic Sans MS', 'Tahoma', 'Impact', 'Crimson Text'];
             }
         } catch (e) {
             console.log(e);
         }
 
         // Get items to place into the list
-        const list = this.buttonList.map((value) => {
+        const list = this.buttonList.map(value => {
             if (Doc.noviceMode && !noviceList.includes(value)) {
                 return;
             }
-            return <div className="list-item" key={`${value}`}
-                style={{
-                    fontFamily: script.script.originalScript.startsWith('setFont') ? value : undefined,
-                    backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined
-                }}
-                onClick={() => script.script.run({ value }).result}>
-                {value[0].toUpperCase() + value.slice(1)}
-            </div>;
+            return (
+                <div
+                    className="list-item"
+                    key={`${value}`}
+                    style={{
+                        fontFamily: script.script.originalScript.startsWith('setFont') ? value : undefined,
+                        backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined,
+                    }}
+                    onClick={() => script.script.run({ value }).result}>
+                    {value[0].toUpperCase() + value.slice(1)}
+                </div>
+            );
         });
 
-        const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
-            <div className="fontIconBox-label" style={{ bottom: 0, position: "absolute", color: color, backgroundColor: backgroundColor }}>
-                {this.label}
-            </div>;
+        const label =
+            !this.label || !FontIconBox.GetShowLabels() ? null : (
+                <div className="fontIconBox-label" style={{ bottom: 0, position: 'absolute', color: color, backgroundColor: backgroundColor }}>
+                    {this.label}
+                </div>
+            );
 
         return (
-            <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 style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
-                <div className="menuButton-dropdown-header">
-                    {text && text[0].toUpperCase() + text.slice(1)}
-                </div>
+            <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 style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
+                <div className="menuButton-dropdown-header">{text && text[0].toUpperCase() + text.slice(1)}</div>
                 {label}
-                {!dropdown ? (null) : <div className="menuButton-dropDown">
-                    <FontAwesomeIcon icon={icon} color={color} size="sm" />
-                </div>}
-                {this.rootDoc.dropDownOpen ?
+                {!dropdown ? null : (
+                    <div className="menuButton-dropDown">
+                        <FontAwesomeIcon icon={icon} color={color} size="sm" />
+                    </div>
+                )}
+                {this.rootDoc.dropDownOpen ? (
                     <div>
-                        <div className="menuButton-dropdownList"
-                            style={{ left: 0 }}>
+                        <div className="menuButton-dropdownList" style={{ left: 0 }}>
                             {list}
                         </div>
-                        <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
+                        <div
+                            className="dropbox-background"
+                            onClick={e => {
+                                e.stopPropagation();
+                                this.rootDoc.dropDownOpen = false;
+                            }}
+                        />
                     </div>
-                    : null}
+                ) : null}
             </div>
         );
     }
 
     @observable colorPickerClosed: boolean = true;
-    @computed get colorScript() { return ScriptCast(this.rootDoc.script); }
+    @computed get colorScript() {
+        return ScriptCast(this.rootDoc.script);
+    }
 
     colorPicker = (curColor: string) => {
         const change = (value: ColorState) => {
             const s = this.colorScript;
             s && undoBatch(() => s.script.run({ value: Utils.colorString(value), _readOnly_: false }).result)();
         };
-        const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
-            '#FFFFFF', '#f1efeb', "transparent"];
-        return <SketchPicker
-            onChange={change}
-            color={curColor}
-            presetColors={presets} />;
-    }
+        const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent'];
+        return <SketchPicker onChange={change} color={curColor} presetColors={presets} />;
+    };
     /**
      * 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({ value: undefined, _readOnly_: true }).result ?? "transparent";
-
-        const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
-            <div className="fontIconBox-label" style={{ color, backgroundColor }}>
-                {this.label}
-            </div>;
-            
-        // dropdown caret seems superfluous since clicking the color button does the same thing    
+        const curColor = this.colorScript?.script.run({ value: undefined, _readOnly_: true }).result ?? 'transparent';
+
+        const label =
+            !this.label || !FontIconBox.GetShowLabels() ? null : (
+                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
+                    {this.label}
+                </div>
+            );
+
+        // dropdown caret seems superfluous since clicking the color button does the same thing
         // const dropdownCaret = <div
         //     className="menuButton-dropDown"
         //     style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
@@ -349,26 +371,30 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         // </div>;
         setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView
         return (
-            <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")} ${this.colorPickerClosed}`}
+            <div
+                className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')} ${this.colorPickerClosed}`}
                 style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                onClick={action(() => this.colorPickerClosed = !this.colorPickerClosed)}
+                onClick={action(() => (this.colorPickerClosed = !this.colorPickerClosed))}
                 onPointerDown={e => e.stopPropagation()}>
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                 <div className="colorButton-color" style={{ backgroundColor: curColor }} />
                 {label}
                 {/* {dropdownCaret} */}
-                {this.colorPickerClosed ? (null) :
+                {this.colorPickerClosed ? null : (
                     <div>
-                        <div className="menuButton-dropdownBox"
-                            onPointerDown={e => e.stopPropagation()}
-                            onClick={e => e.stopPropagation()}>
+                        <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
                             {this.colorPicker(curColor)}
                         </div>
-                        <div className="dropbox-background" onPointerDown={action((e) => {
-                            e.preventDefault();
-                            e.stopPropagation(); this.colorPickerClosed = true;
-                        })} />
-                    </div>}
+                        <div
+                            className="dropbox-background"
+                            onPointerDown={action(e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                this.colorPickerClosed = true;
+                            })}
+                        />
+                    </div>
+                )}
             </div>
         );
     }
@@ -382,27 +408,26 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
 
         // Button label
-        const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
-            <div className="fontIconBox-label" style={{ color, backgroundColor }}>
-                {this.label}
-            </div>;
+        const label =
+            !this.label || !FontIconBox.GetShowLabels() ? null : (
+                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
+                    {this.label}
+                </div>
+            );
 
         if (switchToggle) {
             return (
                 <div className={`menuButton ${this.type} ${'switch'}`}>
                     {buttonText ? buttonText : null}
                     <label className="switch">
-                        <input type="checkbox"
-                            checked={backgroundColor === Colors.MEDIUM_BLUE}
-                        />
+                        <input type="checkbox" checked={backgroundColor === Colors.MEDIUM_BLUE} />
                         <span className="slider round" />
                     </label>
                 </div>
             );
         } else {
             return (
-                <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`}
-                    style={{ opacity: 1, backgroundColor, color }}>
+                <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}>
                     <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                     {label}
                 </div>
@@ -410,8 +435,6 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         }
     }
 
-
-
     /**
      * Default
      */
@@ -420,12 +443,15 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const active: string = StrCast(this.rootDoc.dropDownOpen);
         return (
-            <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu}
-                style={{ backgroundColor: "transparent", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
+            <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} style={{ backgroundColor: 'transparent', borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
                 <div className="menuButton-wrap">
-                    <FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={"black"} size={"sm"} />
-                    {!this.label || !FontIconBox.GetShowLabels() ? (null) :
-                        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
+                    <FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={'black'} size={'sm'} />
+                    {!this.label || !FontIconBox.GetShowLabels() ? null : (
+                        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
+                            {' '}
+                            {this.label}{' '}
+                        </div>
+                    )}
                 </div>
             </div>
         );
@@ -435,14 +461,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         // Script for running the toggle
         const script = ScriptCast(this.rootDoc.script);
         // Function to run the script
-        const checkResult = script?.script.run({ value: "", _readOnly_: true }).result;
+        const checkResult = script?.script.run({ value: '', _readOnly_: true }).result;
 
         const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
         return (
             <div className="menuButton editableText">
-                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"lock"} />
-                <div style={{ width: "calc(100% - .875em)", paddingLeft: "4px" }}>
-                    <EditableView GetValue={() => script?.script.run({ value: "", _readOnly_: true }).result} SetValue={setValue} contents={checkResult} />
+                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
+                <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
+                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} contents={checkResult} />
                 </div>
             </div>
         );
@@ -451,15 +477,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     render() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
-            <div className="fontIconBox-label" style={{ color, backgroundColor }}>
-                {this.label}
-            </div>;
+        const label =
+            !this.label || !FontIconBox.GetShowLabels() ? null : (
+                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
+                    {this.label}
+                </div>
+            );
 
-        const menuLabel = !this.label || !FontIconBox.GetShowLabels()  ? (null) :
-            <div className="fontIconBox-label" style={{ color, backgroundColor: "transparent" }}>
-                {this.label}
-            </div>;
+        const menuLabel =
+            !this.label || !FontIconBox.GetShowLabels() ? null : (
+                <div className="fontIconBox-label" style={{ color, backgroundColor: 'transparent' }}>
+                    {this.label}
+                </div>
+            );
 
         const buttonText = StrCast(this.rootDoc.buttonText);
 
@@ -471,11 +501,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 button = (
                     <div className={`menuButton ${this.type}`} style={{ color, backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
-                        {buttonText ?
-                            <div className="button-text">
-                                {buttonText}
-                            </div>
-                            : null}
+                        {buttonText ? <div className="button-text">{buttonText}</div> : null}
                         {label}
                     </div>
                 );
@@ -498,7 +524,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ToolButton:
                 button = (
-                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} style={{ opacity: 1, backgroundColor, color }}>
+                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
@@ -510,48 +536,45 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ClickButton:
                 button = (
-                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} style={{ color, backgroundColor, opacity: 1 }}>
+                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ color, backgroundColor, opacity: 1 }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
                 );
                 break;
             case ButtonType.MenuButton:
-                const trailsIcon = <img src={`/assets/${"presTrails.png"}`}
-                    style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? "0%" : "100%"})` }} />;
+                const trailsIcon = <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
                 button = (
                     <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
-                        {this.icon === "pres-trail" ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />}
+                        {this.icon === 'pres-trail' ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />}
                         {menuLabel}
-                        <FontIconBadge value={Cast(this.Document.badgeValue,"string",null)} />
-                    </div >
+                        <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
+                    </div>
                 );
                 break;
             default:
                 break;
         }
 
-        return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton || this.type === ButtonType.NumberButton || this.type === ButtonType.EditableText ? button :
-            button !== null ?
-                <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
-                    {button}
-                </Tooltip > : null
+        return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton || this.type === ButtonType.NumberButton || this.type === ButtonType.EditableText ? (
+            button
+        ) : button !== null ? (
+            <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip>
+        ) : null;
     }
 }
 
-
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setView(view: string) {
     const selected = SelectionManager.Docs().lastElement();
-    selected ? selected._viewType = view : console.log("[FontIconBox.tsx] changeView failed");
+    selected ? (selected._viewType = view) : console.log('[FontIconBox.tsx] changeView failed');
 });
 
-
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) {
     const selected = SelectionManager.Docs().lastElement();
     if (checkResult) {
-        return selected?._backgroundColor ?? "transparent";
+        return selected?._backgroundColor ?? 'transparent';
     }
     if (selected) selected._backgroundColor = color;
 });
@@ -563,7 +586,7 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole
     }
     Doc.SharingDoc().userColor = undefined;
     Doc.GetProto(Doc.SharingDoc()).userColor = color;
-    Doc.UserDoc().showTitle = color === "transparent" ? undefined : StrCast(Doc.UserDoc().showTitle, "creationDate");
+    Doc.UserDoc().showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().showTitle, 'creationDate');
 });
 
 // toggle: Set overlay status of selected document
@@ -571,9 +594,9 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
     if (checkResult) {
         if (NumCast(selected?.Document.z) >= 1) return Colors.MEDIUM_BLUE;
-        return "transparent";
+        return 'transparent';
     }
-    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
+    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
 /** TEXT
@@ -590,7 +613,7 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
 
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setFont(font: string, checkResult?: boolean) {
-    SelectionManager.Docs().map(doc => doc._fontFamily = font);
+    SelectionManager.Docs().map(doc => (doc._fontFamily = font));
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (checkResult) {
         return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
@@ -599,32 +622,36 @@ ScriptingGlobals.add(function setFont(font: string, checkResult?: boolean) {
     else Doc.UserDoc().fontFamily = font;
 });
 
-ScriptingGlobals.add(function getActiveTextInfo(info: "family" | "size" | "color" | "highlight") {
+ScriptingGlobals.add(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?.activeFamilies[0];
-        case "size": return style?.activeSizes[0];
-        case "color": return style?.activeColors[0];
-        case "highlight": return style?.activeHighlights[0];
+        case 'family':
+            return style?.activeFamilies[0];
+        case 'size':
+            return style?.activeSizes[0];
+        case 'color':
+            return style?.activeColors[0];
+        case 'highlight':
+            return style?.activeHighlights[0];
     }
 });
 
-ScriptingGlobals.add(function setAlignment(align: "left" | "right" | "center", checkResult?: boolean) {
+ScriptingGlobals.add(function setAlignment(align: 'left' | 'right' | 'center', checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
-        return (editorView ? RichTextMenu.Instance.textAlign : Doc.UserDoc().textAlign) === align ? Colors.MEDIUM_BLUE : "transparent";
+        return (editorView ? RichTextMenu.Instance.textAlign : Doc.UserDoc().textAlign) === align ? Colors.MEDIUM_BLUE : 'transparent';
     }
     if (editorView?.state) RichTextMenu.Instance.align(editorView, editorView.dispatch, align);
     else Doc.UserDoc().textAlign = align;
 });
 
-ScriptingGlobals.add(function setBulletList(mapStyle: "bullet" | "decimal", checkResult?: boolean) {
+ScriptingGlobals.add(function setBulletList(mapStyle: 'bullet' | 'decimal', checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
         const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
         if (active === mapStyle) return Colors.MEDIUM_BLUE;
-        return "transparent";
+        return 'transparent';
     }
     editorView?.state && RichTextMenu.Instance.changeListType(mapStyle);
 });
@@ -662,17 +689,17 @@ ScriptingGlobals.add(function setFontHighlight(color?: string, checkResult?: boo
 ScriptingGlobals.add(function setFontSize(size: string | number, checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
-        return RichTextMenu.Instance.fontSize.replace("px", "");
+        return RichTextMenu.Instance.fontSize.replace('px', '');
     }
-    if (typeof size === "number") size = size.toString();
-    if (size && Number(size).toString() === size) size += "px";
+    if (typeof size === 'number') size = size.toString();
+    if (size && Number(size).toString() === size) size += 'px';
     if (editorView) RichTextMenu.Instance.setFontSize(size);
     else Doc.UserDoc()._fontSize = size;
 });
 ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
-        return (editorView ? RichTextMenu.Instance.noAutoLink : false) ? Colors.MEDIUM_BLUE : "transparent";
+        return (editorView ? RichTextMenu.Instance.noAutoLink : false) ? Colors.MEDIUM_BLUE : 'transparent';
     }
     if (editorView) RichTextMenu.Instance?.toggleNoAutoLinkAnchor();
 });
@@ -680,31 +707,30 @@ ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) {
 ScriptingGlobals.add(function toggleBold(checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
-        return (editorView ? RichTextMenu.Instance.bold : Doc.UserDoc().fontWeight === "bold") ? Colors.MEDIUM_BLUE : "transparent";
+        return (editorView ? RichTextMenu.Instance.bold : Doc.UserDoc().fontWeight === 'bold') ? Colors.MEDIUM_BLUE : 'transparent';
     }
     if (editorView) RichTextMenu.Instance?.toggleBold();
-    else Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === "bold" ? undefined : "bold";
+    else Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold';
 });
 
 ScriptingGlobals.add(function toggleUnderline(checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
-        return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === "underline") ? Colors.MEDIUM_BLUE : "transparent";
+        return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === 'underline') ? Colors.MEDIUM_BLUE : 'transparent';
     }
     if (editorView) RichTextMenu.Instance?.toggleUnderline();
-    else Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === "underline" ? undefined : "underline";
+    else Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline';
 });
 
 ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
-        return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === "italics") ? Colors.MEDIUM_BLUE : "transparent";
+        return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === 'italics') ? Colors.MEDIUM_BLUE : 'transparent';
     }
     if (editorView) RichTextMenu.Instance?.toggleItalics();
-    else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === "italics" ? undefined : "italics";
+    else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics';
 });
 
-
 export function checkInksToGroup() {
     // console.log("getting here to inks group");
     if (CurrentUserUtils.ActiveTool === InkTool.Write) {
@@ -725,15 +751,17 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
             // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
             const selected = ffView.unprocessedDocs;
             // loop through selected an get the bound
-            const bounds: { x: number, y: number, width?: number, height?: number }[] = []
-
-            selected.map(action(d => {
-                const x = NumCast(d.x);
-                const y = NumCast(d.y);
-                const width = d[WidthSym]();
-                const height = d[HeightSym]();
-                bounds.push({ x, y, width, height });
-            }))
+            const bounds: { x: number; y: number; width?: number; height?: number }[] = [];
+
+            selected.map(
+                action(d => {
+                    const x = NumCast(d.x);
+                    const y = NumCast(d.y);
+                    const width = d[WidthSym]();
+                    const height = d[HeightSym]();
+                    bounds.push({ x, y, width, height });
+                })
+            );
 
             const aggregBounds = aggregateBounds(bounds, 0, 0);
             const marqViewRef = ffView._marqueeViewRef.current;
@@ -746,21 +774,23 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
                 marqViewRef._lastY = aggregBounds.b;
             }
 
-            selected.map(action(d => {
-                const dx = NumCast(d.x);
-                const dy = NumCast(d.y);
-                delete d.x;
-                delete d.y;
-                delete d.activeFrame;
-                delete d._timecodeToShow;  // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
-                delete d._timecodeToHide;  // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
-                // calculate pos based on bounds
-                if (marqViewRef?.Bounds) {
-                    d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
-                    d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
-                }
-                return d;
-            }));
+            selected.map(
+                action(d => {
+                    const dx = NumCast(d.x);
+                    const dy = NumCast(d.y);
+                    delete d.x;
+                    delete d.y;
+                    delete d.activeFrame;
+                    delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+                    delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+                    // calculate pos based on bounds
+                    if (marqViewRef?.Bounds) {
+                        d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
+                        d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
+                    }
+                    return d;
+                })
+            );
             ffView.props.removeDocument?.(selected);
             // TODO: nda - this is the code to actually get a new grouped collection
             const newCollection = marqViewRef?.getCollection(selected, undefined, true);
@@ -774,13 +804,12 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
             // TODO: nda - will probably need to go through and only remove the unprocessed selected docs
             ffView.unprocessedDocs = [];
 
-            InkTranscription.Instance.transcribeInk(newCollection, selected, false, ffView);
+            InkTranscription.Instance.transcribeInk(newCollection, selected, false);
         });
     }
     CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
 }
 
-
 /** INK
  *      setActiveTool
  *      setStrokeWidth
@@ -790,10 +819,9 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
 ScriptingGlobals.add(function setActiveTool(tool: string, checkResult?: boolean) {
     InkTranscription.Instance?.createInkGroup();
     if (checkResult) {
-        return ((CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ?
-            Colors.MEDIUM_BLUE : "transparent";
+        return (CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool ? Colors.MEDIUM_BLUE : 'transparent';
     }
-    if (["circle", "square", "line"].includes(tool)) {
+    if (['circle', 'square', 'line'].includes(tool)) {
         if (GestureOverlay.Instance.InkShape === tool) {
             CurrentUserUtils.ActiveTool = InkTool.None;
             GestureOverlay.Instance.InkShape = InkTool.None;
@@ -801,16 +829,17 @@ ScriptingGlobals.add(function setActiveTool(tool: string, checkResult?: boolean)
             CurrentUserUtils.ActiveTool = InkTool.Pen;
             GestureOverlay.Instance.InkShape = tool;
         }
-    } else if (tool) { // pen or eraser
+    } else if (tool) {
+        // pen or eraser
         if (CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance.InkShape) {
             CurrentUserUtils.ActiveTool = InkTool.None;
         } else if (tool == InkTool.Write) {
             // console.log("write mode selected - create groupDoc here!", tool)
             CurrentUserUtils.ActiveTool = tool;
-            GestureOverlay.Instance.InkShape = "";
+            GestureOverlay.Instance.InkShape = '';
         } else {
             CurrentUserUtils.ActiveTool = tool as any;
-            GestureOverlay.Instance.InkShape = "";
+            GestureOverlay.Instance.InkShape = '';
         }
     } else {
         CurrentUserUtils.ActiveTool = InkTool.None;
@@ -827,7 +856,9 @@ ScriptingGlobals.add(function setFillColor(color?: string, checkResult?: boolean
         return ActiveFillColor();
     }
     SetActiveFillColor(StrCast(color));
-    SelectionManager.Docs().filter(doc => doc.type === DocumentType.INK).map(doc => doc.fillColor = color);
+    SelectionManager.Docs()
+        .filter(doc => doc.type === DocumentType.INK)
+        .map(doc => (doc.fillColor = color));
 });
 
 ScriptingGlobals.add(function setStrokeWidth(width: number, checkResult?: boolean) {
@@ -839,7 +870,9 @@ ScriptingGlobals.add(function setStrokeWidth(width: number, checkResult?: boolea
         return ActiveInkWidth();
     }
     SetActiveInkWidth(width.toString());
-    SelectionManager.Docs().filter(doc => doc.type === DocumentType.INK).map(doc => doc.strokeWidth = Number(width));
+    SelectionManager.Docs()
+        .filter(doc => doc.type === DocumentType.INK)
+        .map(doc => (doc.strokeWidth = Number(width)));
 });
 
 // toggle: Set overlay status of selected document
@@ -852,10 +885,11 @@ ScriptingGlobals.add(function setStrokeColor(color?: string, checkResult?: boole
         return ActiveInkColor();
     }
     SetActiveInkColor(StrCast(color));
-    SelectionManager.Docs().filter(doc => doc.type === DocumentType.INK).map(doc => doc.color = String(color));
+    SelectionManager.Docs()
+        .filter(doc => doc.type === DocumentType.INK)
+        .map(doc => (doc.color = String(color)));
 });
 
-
 /** WEB
  *      webSetURL
  **/
@@ -870,21 +904,20 @@ ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) {
     }
 });
 ScriptingGlobals.add(function webForward(checkResult?: boolean) {
-    const selected = (SelectionManager.Views().lastElement()?.ComponentView as WebBox);
+    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
     if (checkResult) {
-        return selected?.forward(checkResult) ? undefined : "lightGray";
+        return selected?.forward(checkResult) ? undefined : 'lightGray';
     }
     selected?.forward();
 });
 ScriptingGlobals.add(function webBack(checkResult?: boolean) {
-    const selected = (SelectionManager.Views().lastElement()?.ComponentView as WebBox);
+    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
     if (checkResult) {
-        return selected?.back(checkResult) ? undefined : "lightGray";
+        return selected?.back(checkResult) ? undefined : 'lightGray';
     }
     selected?.back();
 });
 
-
 /** Schema
  *      toggleSchemaPreview
  **/
@@ -893,9 +926,8 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
     if (checkResult && selected) {
         const result: boolean = NumCast(selected.schemaPreviewWidth) > 0;
         if (result) return Colors.MEDIUM_BLUE;
-        else return "transparent";
-    }
-    else if (selected) {
+        else return 'transparent';
+    } else if (selected) {
         if (NumCast(selected.schemaPreviewWidth) > 0) {
             selected.schemaPreviewWidth = 0;
         } else {
@@ -908,11 +940,11 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
  *      groupBy
  */
 ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) {
-    SelectionManager.Docs().map(doc => doc._fontFamily = key);
+    SelectionManager.Docs().map(doc => (doc._fontFamily = key));
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (checkResult) {
         return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
     }
     if (editorView) RichTextMenu.Instance.setFontFamily(key);
     else Doc.UserDoc().fontFamily = key;
-});
\ No newline at end of file
+});
-- 
cgit v1.2.3-70-g09d2