From 6376a4b6d6a730c6c170fa25dd5f19dea6b8f82a Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Wed, 25 Aug 2021 05:20:50 -0400
Subject: many updates

---
 src/client/views/nodes/formattedText/RichTextMenu.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 82ad2b7db..c081b8e26 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -277,6 +277,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         const found = new Set<Mark>();
         const { from, to } = state.selection as TextSelection;
         state.doc.nodesBetween(from, to, (node) => node.marks.forEach(m => found.add(m)));
+        console.log("Marks: " + found);
         return found;
     }
 
-- 
cgit v1.2.3-70-g09d2


From c1fb227c364af5defb99adc793e850d681caa36a Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Thu, 26 Aug 2021 06:34:54 -0400
Subject: really close

---
 src/client/util/CurrentUserUtils.ts                |  40 +-
 src/client/views/MainView.tsx                      |   2 +
 .../collectionLinearView/CollectionLinearView.scss |   6 +-
 src/client/views/nodes/button/FontIconBox.tsx      | 160 ++++---
 .../views/nodes/formattedText/FormattedTextBox.tsx |   2 +-
 .../views/nodes/formattedText/RichTextMenu.tsx     | 494 ++++-----------------
 src/server/index.ts                                |   2 +-
 7 files changed, 227 insertions(+), 479 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index cd2803373..8f75947d1 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -51,6 +51,7 @@ interface Button {
     numBtnMax?: number;
     switchToggle?: boolean;
     script?: string;
+    checkResult?: string;
     width?: number;
     list?: string[];
     ignoreClick?: boolean;
@@ -958,29 +959,28 @@ export class CurrentUserUtils {
                 },
                 { title: "Font size", toolTip: "Font size", width: 75, btnType: ButtonType.NumberButton, numBtnMax: 200, numBtnMin: 0, numBtnType: NumButtonType.DropdownOptions, ignoreClick: true, script: 'setFontSize' },
                 { title: "Font color", toolTip: "Font color", btnType: ButtonType.ColorButton, icon: "font", ignoreClick: true, script: 'setFontColor' },
-                { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', script: 'toggleBold' },
-                { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', script: 'toggleItalic' },
-                { title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', script: 'toggleUnderline' },
+                { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', checkResult: 'toggleBold(true)' },
+                { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', checkResult: 'toggleItalic(true)' },
+                { title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', checkResult: 'toggleUnderline(true)' },
                 // { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", click: 'toggleStrikethrough()'},
                 // { title: "Superscript", tooltip: "Superscript", btnType: ButtonType.ToggleButton, icon: "superscript", click: 'toggleSuperscript()'},
                 // { title: "Subscript", tooltip: "Subscript", btnType: ButtonType.ToggleButton, icon: "subscript", click: 'toggleSubscript()'},
-                { title: "Left align", toolTip: "Left align", btnType: ButtonType.ToggleButton, icon: "align-left", ignoreClick: true, script: 'setAlignment("left")' },
-                { title: "Center align", toolTip: "Center align", btnType: ButtonType.ToggleButton, icon: "align-center", ignoreClick: true, script: 'setAlignment("center")' },
-                { title: "Right align", toolTip: "Right align", btnType: ButtonType.ToggleButton, icon: "align-right", ignoreClick: true, script: 'setAlignment("right")' },
+                { title: "Left align", toolTip: "Left align", btnType: ButtonType.ToggleButton, icon: "align-left", click: 'setAlignment("left")', checkResult: 'setAlignment("left", true)' },
+                { title: "Center align", toolTip: "Center align", btnType: ButtonType.ToggleButton, icon: "align-center", click: 'setAlignment("center")', checkResult: 'setAlignment("center", true)' },
+                { title: "Right align", toolTip: "Right align", btnType: ButtonType.ToggleButton, icon: "align-right", click: 'setAlignment("right")', checkResult: 'setAlignment("right", true)' },
             ];
         return tools;
     }
 
     static inkTools(doc: Doc) {
         const tools: Button[] = [
-            { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen", click: 'setActiveInkTool("pen")', script: 'setActiveInkTool("pen" , true)' },
-            { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", click: 'setActiveInkTool("highlighter")', script: 'setActiveInkTool("highlighter", true)' },
-            { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'setActiveInkTool("circle")', script: 'setActiveInkTool("circle" , true)' },
-            { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'setActiveInkTool("square")', script: 'setActiveInkTool("square" , true)' },
-            { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "minus", click: 'setActiveInkTool("line")', script: 'setActiveInkTool("line" , true)' },
+            { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen", click: 'setActiveInkTool("pen")', checkResult: 'setActiveInkTool("pen" , true)' },
+            { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", click: 'setActiveInkTool("highlighter")', checkResult: 'setActiveInkTool("highlighter", true)' },
+            { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'setActiveInkTool("circle")', checkResult: 'setActiveInkTool("circle" , true)' },
+            { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'setActiveInkTool("square")', checkResult: 'setActiveInkTool("square" , true)' },
+            { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "minus", click: 'setActiveInkTool("line")', checkResult: 'setActiveInkTool("line" , true)' },
             { title: "Stroke width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, numBtnType: NumButtonType.Slider, ignoreClick: true, script: 'setStrokeWidth' },
             { title: "Stroke color", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "minus", ignoreClick: true, script: 'setStrokeColor' },
-
         ];
         return tools;
     }
@@ -995,8 +995,8 @@ export class CurrentUserUtils {
                     width: 50,
                     switchToggle: true,
                     icon: "eye",
-                    ignoreClick: true,
-                    script: 'toggleSchemaShow'
+                    click: 'toggleSchemaShow()',
+                    checkResult: 'toggleSchemaShow(true)'
                 },
             ];
         return tools;
@@ -1029,7 +1029,7 @@ export class CurrentUserUtils {
                 title: "Background", toolTip: "Background", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip",
                 script: "setBackgroundColor", hidden: 'selectedDocumentType()'
             }, // Only when a document is selected
-            { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', script: 'toggleOverlay', hidden: 'selectedDocumentType(undefined, "freeform", true)' }, // Only when floating document is selected in freeform
+            { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', checkResult: 'toggleOverlay(true)', hidden: 'selectedDocumentType(undefined, "freeform", true)' }, // Only when floating document is selected in freeform
             { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy", hidden: 'selectedDocumentType()' }, // Only when a document is selected 
             { title: "Text", type: "textTools", subMenu: true, expanded: 'selectedDocumentType("rtf")' }, // Always available
             { title: "Ink", type: "inkTools", subMenu: true, expanded: 'selectedDocumentType("ink")' }, // Always available
@@ -1042,7 +1042,7 @@ export class CurrentUserUtils {
     static async setupContextMenuButtons(doc: Doc) {
         const docList: Doc[] = [];
 
-        (await CurrentUserUtils.contextMenuTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, type, btnType, click, script, subMenu, hidden, expanded }) => {
+        (await CurrentUserUtils.contextMenuTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, type, btnType, click, script, subMenu, hidden, expanded, checkResult }) => {
             const menuDocList: Doc[] = [];
             if (subMenu) {
                 // default is textTools
@@ -1064,7 +1064,7 @@ export class CurrentUserUtils {
                         tools = CurrentUserUtils.textTools(doc);
                         break;
                 }
-                tools.map(({ title, toolTip, icon, btnType, numBtnType, click, script, width, list, ignoreClick, switchToggle }) => {
+                tools.map(({ title, toolTip, icon, btnType, numBtnType, click, script, width, list, ignoreClick, switchToggle, checkResult }) => {
                     menuDocList.push(Docs.Create.FontIconDocument({
                         _nativeWidth: width ? width : 25,
                         _nativeHeight: 25,
@@ -1085,7 +1085,7 @@ export class CurrentUserUtils {
                         title,
                         switchToggle,
                         color: Colors.WHITE,
-                        backgroundColor: "transparent",
+                        backgroundColor: checkResult ? ComputedField.MakeFunction(checkResult) as any  : "transparent",
                         _dropAction: "alias",
                         _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
                         onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
@@ -1098,7 +1098,7 @@ export class CurrentUserUtils {
                     linearViewExpandable: true,
                     icon: title,
                     _height: 30,
-                    backgroundColor: "transparent",
+                    backgroundColor: checkResult ? ComputedField.MakeFunction(checkResult) as any  : "transparent",
                     linearViewIsExpanded: expanded ? ComputedField.MakeFunction(expanded) as any : undefined,
                     hidden: hidden ? ComputedField.MakeFunction(hidden) as any : undefined,
                 }, menuDocList));
@@ -1276,6 +1276,7 @@ export class CurrentUserUtils {
         doc._raiseWhenDragged = true;
         doc._showLabel = false;
         doc._showMenuLabel = true;
+        doc.textAlign = StrCast(doc.textAlign, "left");
         doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0, 0)");
         doc.activeInkWidth = NumCast(doc.activeInkWidth, 1);
         doc.activeInkBezier = StrCast(doc.activeInkBezier, "0");
@@ -1592,7 +1593,6 @@ Scripting.addGlobal(function selectedDocumentType(docType?: DocumentType, colTyp
         const parentDoc: Doc = Cast(selected.context, Doc, null);
         selected = parentDoc;
     }
-    console.log(selected, docType, colType);
     if (selected && docType && selected.type === docType) return false;
     else if (selected && colType && selected.viewType === colType) return false;
     else if (selected && !colType && !docType) return false;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index dcdf6b9c3..52dbd451c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -62,6 +62,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import { RichTextMenu } from './nodes/formattedText/RichTextMenu';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -596,6 +597,7 @@ export class MainView extends React.Component {
             <MarqueeOptionsMenu />
             <OverlayView />
             <TimelineMenu />
+            <RichTextMenu />
             {this.snapLines}
             <div className="mainView-webRef" ref={this.makeWebRef} />
             <LightboxView PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 24c9bc9cb..f249eb1f5 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -98,11 +98,7 @@
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
-            transition: 0.1s;
-
-            &:hover {
-                transform: scale(1.05);
-            }
+            transition: 0.15s;
         }
 
         >input {
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";
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index d1027dfd7..f4053d69f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -214,7 +214,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     setupAnchorMenu = () => {
         AnchorMenu.Instance.Status = "marquee";
         AnchorMenu.Instance.Highlight = action((color: string, isLinkButton: boolean) => {
-            this._editorView?.state && RichTextMenu.Instance.insertHighlight(color, this._editorView.state, this._editorView?.dispatch);
+            this._editorView?.state && RichTextMenu.Instance.setHighlight(color, this._editorView, this._editorView?.dispatch);
             return undefined;
         });
         AnchorMenu.Instance.onMakeAnchor = this.getAnchor;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index c081b8e26..e32eccb62 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -37,11 +37,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     public editorProps: FieldViewProps & FormattedTextBoxProps | undefined;
 
     public _brushMap: Map<string, Set<Mark>> = new Map();
-    private fontSizeOptions: { mark: Mark | null, title: string, label: string, command: any, hidden?: boolean, style?: {} }[];
-    private fontFamilyOptions: { mark: Mark | null, title: string, label: string, command: any, hidden?: boolean, style?: {} }[];
-    private listTypeOptions: { node: NodeType | any | null, title: string, label: string, command: any, style?: {} }[];
-    private fontColors: (string | undefined)[];
-    private highlightColors: (string | undefined)[];
 
     @observable private collapsed: boolean = false;
     @observable private boldActive: boolean = false;
@@ -76,70 +71,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         this._canFade = false;
         //this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]);
         runInAction(() => this.Pinned = true);
-
-        this.fontSizeOptions = [
-            { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 8 }), title: "Set font size", label: "8px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 9 }), title: "Set font size", label: "9px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 10 }), title: "Set font size", label: "10px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 12 }), title: "Set font size", label: "12px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 14 }), title: "Set font size", label: "14px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 16 }), title: "Set font size", label: "16px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 18 }), title: "Set font size", label: "18px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 20 }), title: "Set font size", label: "20px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 24 }), title: "Set font size", label: "24px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 32 }), title: "Set font size", label: "32px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 48 }), title: "Set font size", label: "48px", command: this.changeFontSize },
-            { mark: schema.marks.pFontSize.create({ fontSize: 72 }), title: "Set font size", label: "72px", command: this.changeFontSize },
-            { mark: null, title: "", label: "...", command: unimplementedFunction, hidden: true },
-            { mark: null, title: "", label: "13px", command: unimplementedFunction, hidden: true }, // this is here because the default size is 13, but there is no actual 13pt option
-        ];
-
-        this.fontFamilyOptions = [
-            { mark: schema.marks.pFontFamily.create({ family: "Times New Roman" }), title: "Set font family", label: "Times New Roman", command: this.changeFontFamily, style: { fontFamily: "Times New Roman" } },
-            { mark: schema.marks.pFontFamily.create({ family: "Arial" }), title: "Set font family", label: "Arial", command: this.changeFontFamily, style: { fontFamily: "Arial" } },
-            { mark: schema.marks.pFontFamily.create({ family: "Georgia" }), title: "Set font family", label: "Georgia", command: this.changeFontFamily, style: { fontFamily: "Georgia" } },
-            { mark: schema.marks.pFontFamily.create({ family: "Comic Sans MS" }), title: "Set font family", label: "Comic Sans MS", command: this.changeFontFamily, style: { fontFamily: "Comic Sans MS" } },
-            { mark: schema.marks.pFontFamily.create({ family: "Tahoma" }), title: "Set font family", label: "Tahoma", command: this.changeFontFamily, style: { fontFamily: "Tahoma" } },
-            { mark: schema.marks.pFontFamily.create({ family: "Impact" }), title: "Set font family", label: "Impact", command: this.changeFontFamily, style: { fontFamily: "Impact" } },
-            { mark: schema.marks.pFontFamily.create({ family: "Crimson Text" }), title: "Set font family", label: "Crimson Text", command: this.changeFontFamily, style: { fontFamily: "Crimson Text" } },
-            { mark: null, title: "", label: "various", command: unimplementedFunction, hidden: true },
-            // { mark: null, title: "", label: "default", command: unimplementedFunction, hidden: true },
-        ];
-
-        this.listTypeOptions = [
-            { node: schema.nodes.ordered_list.create({ mapStyle: "bullet" }), title: "Set list type", label: ":", command: this.changeListType },
-            { node: schema.nodes.ordered_list.create({ mapStyle: "decimal" }), title: "Set list type", label: "1.1", command: this.changeListType },
-            { node: schema.nodes.ordered_list.create({ mapStyle: "multi" }), title: "Set list type", label: "A.1", command: this.changeListType },
-            { node: schema.nodes.ordered_list.create({ mapStyle: "" }), title: "Set list type", label: "<none>", command: this.changeListType },
-            //{ node: undefined, title: "Set list type", label: "Remove", command: this.changeListType },
-        ];
-
-        this.fontColors = [
-            DarkPastelSchemaPalette.get("pink2"),
-            DarkPastelSchemaPalette.get("purple4"),
-            DarkPastelSchemaPalette.get("bluegreen1"),
-            DarkPastelSchemaPalette.get("yellow4"),
-            DarkPastelSchemaPalette.get("red2"),
-            DarkPastelSchemaPalette.get("bluegreen7"),
-            DarkPastelSchemaPalette.get("bluegreen5"),
-            DarkPastelSchemaPalette.get("orange1"),
-            "#757472",
-            "#000"
-        ];
-
-        this.highlightColors = [
-            PastelSchemaPalette.get("pink2"),
-            PastelSchemaPalette.get("purple4"),
-            PastelSchemaPalette.get("bluegreen1"),
-            PastelSchemaPalette.get("yellow4"),
-            PastelSchemaPalette.get("red2"),
-            PastelSchemaPalette.get("bluegreen7"),
-            PastelSchemaPalette.get("bluegreen5"),
-            PastelSchemaPalette.get("orange1"),
-            "white",
-            "transparent"
-        ];
     }
 
     componentDidMount() {
@@ -348,102 +279,38 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         });
     }
 
-    createButton(faIcon: string, title: string, isActive: boolean = false, command?: any, onclick?: any) {
-        const self = this;
-        function onClick(e: React.PointerEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-            self.TextView?.endUndoTypingBatch();
-            UndoManager.RunInBatch(() => {
-                self.view && command && command(self.view.state, self.view.dispatch, self.view);
-                self.view && onclick && onclick(self.view.state, self.view.dispatch, self.view);
-            }, "rich text menu command");
-            self.setActiveMarkButtons(self.getActiveMarksOnSelection());
-        }
-
-        return (
-            <Tooltip title={<div className="dash-tooltip">{title}</div>} key={title} placement="bottom">
-                <button className={"antimodeMenu-button" + (isActive ? " active" : "")} onPointerDown={onClick}>
-                    <FontAwesomeIcon icon={faIcon as IconProp} size="lg" />
-                </button>
-            </Tooltip>
-        );
-    }
-
-    createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[], key: string, setter: (val: string) => void): JSX.Element {
-        const items = options.map(({ title, label, hidden, style }) => {
-            if (hidden) {
-                return <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option>;
-            }
-            return <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option>;
-        });
-
-        const self = this;
-        function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
-            e.stopPropagation();
-            e.preventDefault();
-            self.TextView?.endUndoTypingBatch();
-            UndoManager.RunInBatch(() => {
-                options.forEach(({ label, mark, command }) => {
-                    if (e.target.value === label && mark) {
-                        if (!self.TextView?.props.isSelected(true)) {
-                            switch (mark.type) {
-                                case schema.marks.pFontFamily: setter(Doc.UserDoc().fontFamily = mark.attrs.family); break;
-                                case schema.marks.pFontSize: setter(Doc.UserDoc().fontSize = mark.attrs.fontSize.toString() + "px"); break;
-                            }
-                        }
-                        else self.view && mark && command(mark, self.view);
-                    }
-                });
-            }, "text mark dropdown");
-        }
-
-        return <Tooltip key={key} title={<div className="dash-tooltip">{key}</div>} placement="bottom">
-            <select onChange={onChange} value={activeOption}>{items}</select>
-        </Tooltip>;
-    }
-
-    createNodesDropdown(activeMap: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[], key: string, setter: (val: string) => {}): JSX.Element {
-        const activeOption = activeMap === "bullet" ? ":" : activeMap === "decimal" ? "1.1" : activeMap === "multi" ? "A.1" : "<none>";
-        const items = options.map(({ title, label, hidden, style }) => {
-            if (hidden) {
-                return <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option>;
-            }
-            return <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option>;
-        });
 
-        const self = this;
-        function onChange(val: string) {
-            self.TextView.endUndoTypingBatch();
-            options.forEach(({ label, node, command }) => {
-                if (val === label && node) {
-                    if (self.TextView.props.isSelected(true)) {
-                        UndoManager.RunInBatch(() => self.view && node && command(node), "nodes dropdown");
-                        setter(val);
-                    }
-                }
-            });
-        }
-
-        return <Tooltip key={key} title={<div className="dash-tooltip">{key}</div>} placement="bottom">
-            <select value={activeOption} onChange={e => onChange(e.target.value)}>{items}</select>
-        </Tooltip>;
-    }
-
-    changeFontSize = (mark: Mark, view: EditorView) => {
-        const fmark = view.state.schema.marks.pFontSize.create({ fontSize: mark.attrs.fontSize });
+    setFontSize = (size:number, view: EditorView) => {
+        const fmark = view.state.schema.marks.pFontSize.create({ fontSize: size });
         this.setMark(fmark, view.state, (tx: any) => view.dispatch(tx.addStoredMark(fmark)), true);
         view.focus();
         this.updateMenu(view, undefined, this.props);
     }
 
-    changeFontFamily = (mark: Mark, view: EditorView) => {
-        const fmark = view.state.schema.marks.pFontFamily.create({ family: mark.attrs.family });
+    setFontFamily = (family:string, view: EditorView) => {
+        const fmark = view.state.schema.marks.pFontFamily.create({ family: family });
         this.setMark(fmark, view.state, (tx: any) => view.dispatch(tx.addStoredMark(fmark)), true);
         view.focus();
         this.updateMenu(view, undefined, this.props);
     }
 
+    setHighlight(color: String, view: EditorView, dispatch: any) {
+        const highlightMark = view.state.schema.mark(view.state.schema.marks.marker, { highlight: color });
+        if (view.state.selection.empty) return false;
+        view.focus();
+        this.setMark(highlightMark, view.state, dispatch, false);
+    }
+
+    setColor(color: String, view: EditorView, dispatch: any) {
+        const colorMark = view.state.schema.mark(view.state.schema.marks.pFontColor, { color: color });
+        if (view.state.selection.empty) {
+            dispatch(view.state.tr.addStoredMark(colorMark));
+            return false;
+        }
+        this.setMark(colorMark, view.state, dispatch, true);
+        view.focus();
+    }
+
     // TODO: remove doesn't work
     //remove all node type and apply the passed-in one to the selected text
     changeListType = (nodeType: Node | undefined) => {
@@ -491,23 +358,24 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         dispatch?.(tr.replaceSelectionWith(newNode).removeMark(tr.selection.from - 1, tr.selection.from, mark));
         return true;
     }
-    alignCenter = (state: EditorState<any>, dispatch: any) => {
-        return this.TextView.props.isSelected(true) && this.alignParagraphs(state, "center", dispatch);
+    alignCenter = (view: EditorView, dispatch: any) => {
+        return this.TextView.props.isSelected(true) && this.alignParagraphs(view, "center", dispatch);
     }
-    alignLeft = (state: EditorState<any>, dispatch: any) => {
-        return this.TextView.props.isSelected(true) && this.alignParagraphs(state, "left", dispatch);
+    alignLeft = (view: EditorView, dispatch: any) => {
+        return this.TextView.props.isSelected(true) && this.alignParagraphs(view, "left", dispatch);
     }
-    alignRight = (state: EditorState<any>, dispatch: any) => {
-        return this.TextView.props.isSelected(true) && this.alignParagraphs(state, "right", dispatch);
+    alignRight = (view: EditorView, dispatch: any) => {
+        return this.TextView.props.isSelected(true) && this.alignParagraphs(view, "right", dispatch);
     }
 
-    alignParagraphs(state: EditorState<any>, align: "left" | "right" | "center", dispatch: any) {
-        var tr = state.tr;
-        state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => {
+    alignParagraphs(view: EditorView, align: "left" | "right" | "center", dispatch: any) {
+        var tr = view.state.tr;
+        view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos, parent, index) => {
             if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) {
                 tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, align }, node.marks);
                 return false;
             }
+            view.focus();
             return true;
         });
         dispatch?.(tr);
@@ -598,47 +466,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     }
     _brushNameRef = React.createRef<HTMLInputElement>();
 
-    createBrushButton() {
-        const self = this;
-        const onBrushClick = (e: React.MouseEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            self.TextView.endUndoTypingBatch();
-            UndoManager.RunInBatch(() => self.view && self.fillBrush(self.view.state, self.view.dispatch), "rt brush");
-        };
-
-        let label = "Stored marks: ";
-        if (this.brushMarks && this.brushMarks.size > 0) {
-            this.brushMarks.forEach((mark: Mark) => {
-                const markType = mark.type;
-                label += markType.name;
-                label += ", ";
-            });
-            label = label.substring(0, label.length - 2);
-        } else {
-            label = "No marks are currently stored";
-        }
-
-        //onPointerDown={onBrushClick}
-
-        const button = <Tooltip title={<div className="dash-tooltip">style brush</div>} placement="bottom">
-            <button className="antimodeMenu-button" onClick={onBrushClick} style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
-                <FontAwesomeIcon icon="paint-roller" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.brushMarks?.size > 0 ? 45 : 0}deg)` }} />
-            </button>
-        </Tooltip>;
-
-        const dropdownContent =
-            <div className="dropdown">
-                <p>{label}</p>
-                <button onPointerDown={this.clearBrush}>Clear brush</button>
-                <input placeholder="-brush name-" ref={this._brushNameRef} onKeyPress={this.onBrushNameKeyPress} />
-            </div>;
-
-        return (
-            <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} openDropdownOnButton={false} dropdownContent={dropdownContent} />
-        );
-    }
-
     @action
     clearBrush() {
         RichTextMenu.Instance.brushMarks = new Set();
@@ -667,123 +494,14 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         }
     }
 
-    @action toggleColorDropdown() { this.showColorDropdown = !this.showColorDropdown; }
-    @action setActiveColor(color: string) { this.activeFontColor = color; }
     get TextView() { return (this.view as any)?.TextView as FormattedTextBox; }
     get TextViewFieldKey() { return this.TextView?.props.fieldKey; }
 
-    createColorButton() {
-        const self = this;
-        function onColorClick(e: React.PointerEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-            self.TextView.endUndoTypingBatch();
-            if (self.view) {
-                UndoManager.RunInBatch(() => self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch), "rt menu color");
-                self.view.focus();
-                self.updateMenu(self.view, undefined, self.props);
-            }
-        }
-        function changeColor(e: React.PointerEvent, color: string) {
-            e.preventDefault();
-            e.stopPropagation();
-            self.setActiveColor(color);
-            self.TextView.endUndoTypingBatch();
-            if (self.view) {
-                UndoManager.RunInBatch(() => self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch), "rt menu color");
-                self.view.focus();
-                self.updateMenu(self.view, undefined, self.props);
-            }
-        }
-
-        // onPointerDown={onColorClick}
-        const button = <Tooltip title={<div className="dash-tooltip">set font color</div>} placement="bottom">
-            <button className="antimodeMenu-button color-preview-button">
-                <FontAwesomeIcon icon="palette" size="lg" />
-                <div className="color-preview" style={{ backgroundColor: this.activeFontColor }}></div>
-            </button>
-        </Tooltip>;
+    
 
-        const dropdownContent =
-            <div className="dropdown" >
-                <p>Change font color:</p>
-                <div className="color-wrapper">
-                    {this.fontColors.map(color => {
-                        if (color) {
-                            return this.activeFontColor === color ?
-                                <button className="color-button active" key={"active" + color} style={{ backgroundColor: color }} onPointerDown={e => changeColor(e, color)}></button> :
-                                <button className="color-button" key={"other" + color} style={{ backgroundColor: color }} onPointerDown={e => changeColor(e, color)}></button>;
-                        }
-                    })}
-                </div>
-            </div>;
-
-        return (
-            <ButtonDropdown view={this.view} key={"color dropdown"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
-        );
-    }
-
-    public insertColor(color: String, state: EditorState<any>, dispatch: any) {
-        const colorMark = state.schema.mark(state.schema.marks.pFontColor, { color: color });
-        if (state.selection.empty) {
-            dispatch(state.tr.addStoredMark(colorMark));
-            return false;
-        }
-        this.setMark(colorMark, state, dispatch, true);
-    }
-
-    @action toggleHighlightDropdown() { this.showHighlightDropdown = !this.showHighlightDropdown; }
     @action setActiveHighlight(color: string) { this.activeHighlightColor = color; }
 
-    createHighlighterButton() {
-        const self = this;
-        function onHighlightClick(e: React.PointerEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-            self.TextView.endUndoTypingBatch();
-            UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highligher");
-        }
-        function changeHighlight(e: React.PointerEvent, color: string) {
-            e.preventDefault();
-            e.stopPropagation();
-            self.setActiveHighlight(color);
-            self.TextView.endUndoTypingBatch();
-            UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highlighter");
-        }
-
-        //onPointerDown={onHighlightClick}
-        const button = <Tooltip title={<div className="dash-tooltip">set highlight color</div>} placement="bottom">
-            <button className="antimodeMenu-button color-preview-button" key="highilghter-button" >
-                <FontAwesomeIcon icon="highlighter" size="lg" />
-                <div className="color-preview" style={{ backgroundColor: this.activeHighlightColor }}></div>
-            </button>
-        </Tooltip>;
-
-        const dropdownContent =
-            <div className="dropdown">
-                <p>Change highlight color:</p>
-                <div className="color-wrapper">
-                    {this.highlightColors.map(color => {
-                        if (color) {
-                            return this.activeHighlightColor === color ?
-                                <button className="color-button active" key={`active ${color}`} style={{ backgroundColor: color }} onPointerDown={e => changeHighlight(e, color)}>{color === "transparent" ? "X" : ""}</button> :
-                                <button className="color-button" key={`inactive ${color}`} style={{ backgroundColor: color }} onPointerDown={e => changeHighlight(e, color)}>{color === "transparent" ? "X" : ""}</button>;
-                        }
-                    })}
-                </div>
-            </div>;
-
-        return (
-            <ButtonDropdown view={this.view} key={"highlighter"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
-        );
-    }
 
-    insertHighlight(color: String, state: EditorState<any>, dispatch: any) {
-        if (state.selection.empty) return false;
-        toggleMark(state.schema.marks.marker, { highlight: color })(state, dispatch);
-    }
-
-    @action toggleLinkDropdown() { this.showLinkDropdown = !this.showLinkDropdown; }
     @action setCurrentLink(link: string) { this.currentLink = link; }
 
     createLinkButton() {
@@ -922,93 +640,73 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         return ref_node;
     }
 
-    @action onPointerEnter(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = false; }
-    @action onPointerLeave(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = false; }
-
-    @action
-    toggleMenuPin = (e: React.MouseEvent) => {
-        Doc.UserDoc()["menuRichText-pinned"] = this.Pinned = !this.Pinned;
-        if (!this.Pinned) {
-            this.fadeOut(true);
-        }
-    }
-
-    @action
-    protected toggleCollapse = (e: React.MouseEvent) => {
-        this.collapsed = !this.collapsed;
-        setTimeout(() => {
-            const x = Math.min(this._left, window.innerWidth - RichTextMenu.Instance.width);
-            RichTextMenu.Instance.jumpTo(x, this._top, true);
-        }, 0);
-    }
-
     render() {
-        TraceMobx();
-        const row1 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[
-            //!this.collapsed ? this.getDragger() : (null),
-            // !this.Pinned ? (null) : <div key="frag1"> {[
-            //     this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
-            //     this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
-            //     this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
-            //     this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
-            //     this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
-            //     this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
-            //     <div className="richTextMenu-divider" key="divider" />
-            // ]}</div>,
-            this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
-            this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
-            this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
-            this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
-            this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
-            this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
-            this.createColorButton(),
-            this.createHighlighterButton(),
-            this.createLinkButton(),
-            this.createBrushButton(),
-            <div className="collectionMenu-divider" key="divider 2" />,
-            this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft),
-            this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter),
-            this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight),
-            this.createButton("indent", "Inset More", undefined, this.insetParagraph),
-            this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph),
-            this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph),
-            this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph),
-        ]}</div>;
-
-        const row2 = <div className="antimodeMenu-row row-2" key="row2">
-            {this.collapsed ? this.getDragger() : (null)}
-            <div key="row 2" style={{ display: this.collapsed ? "none" : undefined }}>
-                <div className="collectionMenu-divider" key="divider 3" />
-                {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => {
-                    this.activeFontSize = val;
-                    SelectionManager.Views().map(dv => dv.props.Document._fontSize = val);
-                })),
-                this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => {
-                    this.activeFontFamily = val;
-                    SelectionManager.Views().map(dv => dv.props.Document._fontFamily = val);
-                })),
-                <div className="collectionMenu-divider" key="divider 4" />,
-                this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})),
-                this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
-                this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),
-                this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule)
-                ]}
-            </div>
-            {/* <div key="collapser">
-                {<div key="collapser">
-                    <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}>
-                        <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} />
-                    </button>
-                </div> }
-                <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
-                    <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
-                </button>
-            </div> */}
-        </div>;
+        // TraceMobx();
+        // const row1 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[
+        //     //!this.collapsed ? this.getDragger() : (null),
+        //     // !this.Pinned ? (null) : <div key="frag1"> {[
+        //     //     this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+        //     //     this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+        //     //     this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+        //     //     this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+        //     //     this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+        //     //     this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
+        //     //     <div className="richTextMenu-divider" key="divider" />
+        //     // ]}</div>,
+        //     this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+        //     this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+        //     this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+        //     this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+        //     this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+        //     this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
+        //     this.createColorButton(),
+        //     this.createHighlighterButton(),
+        //     this.createLinkButton(),
+        //     this.createBrushButton(),
+        //     <div className="collectionMenu-divider" key="divider 2" />,
+        //     this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft),
+        //     this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter),
+        //     this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight),
+        //     this.createButton("indent", "Inset More", undefined, this.insetParagraph),
+        //     this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph),
+        //     this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph),
+        //     this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph),
+        // ]}</div>;
+
+        // const row2 = <div className="antimodeMenu-row row-2" key="row2">
+        //     {this.collapsed ? this.getDragger() : (null)}
+        //     <div key="row 2" style={{ display: this.collapsed ? "none" : undefined }}>
+        //         <div className="collectionMenu-divider" key="divider 3" />
+        //         {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => {
+        //             this.activeFontSize = val;
+        //             SelectionManager.Views().map(dv => dv.props.Document._fontSize = val);
+        //         })),
+        //         this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => {
+        //             this.activeFontFamily = val;
+        //             SelectionManager.Views().map(dv => dv.props.Document._fontFamily = val);
+        //         })),
+        //         <div className="collectionMenu-divider" key="divider 4" />,
+        //         this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})),
+        //         this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
+        //         this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),
+        //         this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule)
+        //         ]}
+        //     </div>
+        //     {/* <div key="collapser">
+        //         {<div key="collapser">
+        //             <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}>
+        //                 <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} />
+        //             </button>
+        //         </div> }
+        //         <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
+        //             <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
+        //         </button>
+        //     </div> */}
+        // </div>;
 
         return (
-            <div className="richTextMenu" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} >
-                {this.getElementWithRows([row1, row2], 2, false)}
+            <div className="richTextMenu">
+                {/* {this.getElementWithRows([row1, row2], 2, false)} */}
             </div>
         );
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index 9687c3b23..f8c32103b 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -16,6 +16,7 @@ import UserManager from './ApiManagers/UserManager';
 import UtilManager from './ApiManagers/UtilManager';
 import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
 import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils";
+import { DashSessionAgent } from "./DashSession/DashSessionAgent";
 import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent";
 import { DashUploadUtils } from './DashUploadUtils';
 import { Database } from './database';
@@ -23,7 +24,6 @@ import { Logger } from "./ProcessFactory";
 import RouteManager, { Method, PublicHandler } from './RouteManager';
 import RouteSubscriber from './RouteSubscriber';
 import initializeServer, { resolvedPorts } from './server_Initialization';
-import { DashSessionAgent } from "./DashSession/DashSessionAgent";
 
 export const AdminPriviliges: Map<string, boolean> = new Map();
 export const onWindows = process.platform === "win32";
-- 
cgit v1.2.3-70-g09d2


From cf7beac8b1de637fb4c0de86234ab617798d9379 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Thu, 26 Aug 2021 11:06:17 -0400
Subject: added toggleBold

---
 src/client/views/nodes/button/FontIconBox.tsx         | 17 +++++++++++------
 src/client/views/nodes/formattedText/RichTextMenu.tsx | 12 ++++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index e09e15a60..5d82fe123 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -591,10 +591,6 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
  *      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, checkResult?: boolean) {
@@ -708,7 +704,12 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
         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);
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    if (editorView){
+        console.log("editorView");
+        editorView?.state && RichTextMenu.Instance.toggleBold(editorView);
+    }
+    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.bold = !dv.props.Document.bold);
     Doc.UserDoc().bold = !Doc.UserDoc().bold;
     return Doc.UserDoc().bold;
 });
@@ -718,7 +719,9 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
         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);
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+
+    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.underline = !dv.props.Document.underline);
     Doc.UserDoc().underline = !Doc.UserDoc().underline;
     return Doc.UserDoc().underline;
 });
@@ -728,6 +731,8 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
         if (Doc.UserDoc().italic) return Colors.MEDIUM_BLUE;
         else return "transparent";
     }
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+
     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;
     return Doc.UserDoc().italic;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index e32eccb62..4f40b59f2 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -279,6 +279,17 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         });
     }
 
+    toggleBold = (view: EditorView, forceBool?:boolean) => {
+        if (forceBool) { 
+            const mark = view.state.schema.marks.bold.create({bold: true});
+            this.setMark(mark, view.state, view.dispatch, true);
+        }
+        else {
+            console.log(toggleMark);
+            toggleMark(view.state.schema.marks.bold);
+        }
+    }
+
 
     setFontSize = (size:number, view: EditorView) => {
         const fmark = view.state.schema.marks.pFontSize.create({ fontSize: size });
@@ -378,6 +389,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
             view.focus();
             return true;
         });
+        view.focus();
         dispatch?.(tr);
         return true;
     }
-- 
cgit v1.2.3-70-g09d2


From 702ba59ac0235e24121ffff9fcca7c35717867ab Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Thu, 26 Aug 2021 12:40:42 -0400
Subject: hopefully ready!

---
 src/client/util/CurrentUserUtils.ts                |  9 ++--
 src/client/views/MainView.tsx                      |  2 +-
 src/client/views/nodes/button/FontIconBox.tsx      | 53 ++++++++++++++++++++--
 .../views/nodes/formattedText/RichTextMenu.tsx     | 32 +++++++------
 4 files changed, 72 insertions(+), 24 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8f75947d1..4975b749c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -962,6 +962,9 @@ export class CurrentUserUtils {
                 { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', checkResult: 'toggleBold(true)' },
                 { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', checkResult: 'toggleItalic(true)' },
                 { title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', checkResult: 'toggleUnderline(true)' },
+                { title: "Bullet List", toolTip: "Bullet", btnType: ButtonType.ToggleButton, icon: "list", click: 'setBulletList("bullet")', checkResult: 'setBulletList("bullet", true)' },
+                { title: "Number List", toolTip: "Number", btnType: ButtonType.ToggleButton, icon: "list-ol", click: 'setBulletList("decimal")', checkResult: 'setBulletList("decimal", true)' },
+
                 // { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", click: 'toggleStrikethrough()'},
                 // { title: "Superscript", tooltip: "Superscript", btnType: ButtonType.ToggleButton, icon: "superscript", click: 'toggleSuperscript()'},
                 // { title: "Subscript", tooltip: "Subscript", btnType: ButtonType.ToggleButton, icon: "subscript", click: 'toggleSubscript()'},
@@ -992,11 +995,9 @@ export class CurrentUserUtils {
                     title: "Show preview",
                     toolTip: "Show preview of selected document",
                     btnType: ButtonType.ToggleButton,
-                    width: 50,
-                    switchToggle: true,
                     icon: "eye",
-                    click: 'toggleSchemaShow()',
-                    checkResult: 'toggleSchemaShow(true)'
+                    click: 'toggleSchemaPreview()',
+                    checkResult: 'toggleSchemaPreview(true)'
                 },
             ];
         return tools;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 52dbd451c..c95e56584 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -173,7 +173,7 @@ export class MainView extends React.Component {
             fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
             fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
             fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines,
-            fa.faSave, fa.faBookmark);
+            fa.faSave, fa.faBookmark, fa.faList, fa.faListOl);
         this.initAuthenticationRouters();
     }
 
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 5d82fe123..745a85b21 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -164,7 +164,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                             e.stopPropagation();
                             e.preventDefault();
                         }}
-                        onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
+                        onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
                     >
                         <input
                             style={{ width: 30 }}
@@ -641,6 +641,25 @@ Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", ch
     Doc.UserDoc().textAlign = align;
 });
 
+Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", checkResult?:boolean){
+    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+    if (checkResult){
+        const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
+        console.log(active, mapStyle);
+        if (active === mapStyle) return Colors.MEDIUM_BLUE;
+        else return "transparent";
+    }
+    if (editorView){
+        const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
+        if (active === mapStyle) {
+            console.log("set bullet list");
+            editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: "" }));
+        } else {
+            editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: mapStyle }));
+        }
+    }
+});
+
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) {
     const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
@@ -707,7 +726,7 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (editorView){
         console.log("editorView");
-        editorView?.state && RichTextMenu.Instance.toggleBold(editorView);
+        editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true);
     }
     SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.bold = !dv.props.Document.bold);
     Doc.UserDoc().bold = !Doc.UserDoc().bold;
@@ -720,7 +739,10 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
         else return "transparent";
     }
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
-
+    if (editorView){
+        console.log("editorView");
+        editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true);
+    }
     SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.underline = !dv.props.Document.underline);
     Doc.UserDoc().underline = !Doc.UserDoc().underline;
     return Doc.UserDoc().underline;
@@ -732,7 +754,10 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
         else return "transparent";
     }
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
-
+    if (editorView){
+        console.log("editorView");
+        editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true);
+    }
     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;
     return Doc.UserDoc().italic;
@@ -815,4 +840,24 @@ Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) {
     else if (selected && selected.type === DocumentType.WEB){
         selected.data = url;
     }
+});
+
+
+/** Schema
+ *      toggleSchemaPreview
+ **/ 
+ Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) {
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+    if (checkResult && selected){
+        const result:boolean = NumCast(selected.schemaPreviewWidth) > 0;
+        if (result) return Colors.MEDIUM_BLUE;
+        else return "transparent";
+    }
+    else if (selected){
+        if (NumCast(selected.schemaPreviewWidth) > 0){
+            selected.schemaPreviewWidth = 200;
+        } else {
+            selected.schemaPreviewWidth = 0;
+        }
+    }
 });
\ No newline at end of file
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 4f40b59f2..3d9d9543d 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -280,14 +280,21 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     }
 
     toggleBold = (view: EditorView, forceBool?:boolean) => {
-        if (forceBool) { 
-            const mark = view.state.schema.marks.bold.create({bold: true});
-            this.setMark(mark, view.state, view.dispatch, true);
-        }
-        else {
-            console.log(toggleMark);
-            toggleMark(view.state.schema.marks.bold);
-        }
+        const mark = view.state.schema.mark(view.state.schema.marks.strong, {strong: forceBool});
+        this.setMark(mark, view.state, view.dispatch, false);
+        view.focus();
+    }
+
+    toggleUnderline = (view: EditorView, forceBool?:boolean) => {
+        const mark = view.state.schema.mark(view.state.schema.marks.underline, {underline: forceBool});
+        this.setMark(mark, view.state, view.dispatch, false);
+        view.focus();
+    }
+
+    toggleItalic = (view: EditorView, forceBool?:boolean) => {
+        const mark = view.state.schema.mark(view.state.schema.marks.em, {em: forceBool});
+        this.setMark(mark, view.state, view.dispatch, false);
+        view.focus();
     }
 
 
@@ -323,7 +330,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     }
 
     // TODO: remove doesn't work
-    //remove all node type and apply the passed-in one to the selected text
+    // remove all node type and apply the passed-in one to the selected text
     changeListType = (nodeType: Node | undefined) => {
         if (!this.view || (nodeType as any)?.attrs.mapStyle === "") return;
 
@@ -653,6 +660,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     }
 
     render() {
+        return null;
         // TraceMobx();
         // const row1 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[
         //     //!this.collapsed ? this.getDragger() : (null),
@@ -715,12 +723,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         //         </button>
         //     </div> */}
         // </div>;
-
-        return (
-            <div className="richTextMenu">
-                {/* {this.getElementWithRows([row1, row2], 2, false)} */}
-            </div>
-        );
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 9d177851ecaaea1a89ac9b7de1cec16368603eaa Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 9 Sep 2021 22:49:13 -0400
Subject: added SelectionManager.Docs() to avoid having to dereference props to
 get at the seelcted Doc.  this was causing a cycle in menu items when
 selected.  fixed sizing of filterBox.  enabled showing titles for VID,COL,and
 IMG in addition to RTF.

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/util/HypothesisUtils.ts                 |  2 +-
 src/client/util/SelectionManager.ts                | 12 ++--
 src/client/views/GlobalKeyHandler.ts               |  4 +-
 src/client/views/PropertiesView.tsx                |  2 +-
 src/client/views/StyleProvider.tsx                 |  2 +-
 src/client/views/collections/CollectionMenu.tsx    | 21 +++----
 src/client/views/collections/CollectionSubView.tsx |  8 +--
 .../collectionLinear/CollectionLinearView.tsx      | 19 +++---
 src/client/views/nodes/DocumentView.tsx            |  5 +-
 src/client/views/nodes/FilterBox.tsx               | 11 ++--
 src/client/views/nodes/button/FontIconBox.tsx      | 68 ++++++++++------------
 .../views/nodes/formattedText/RichTextMenu.tsx     | 20 +++----
 13 files changed, 81 insertions(+), 95 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8435825c9..60bb375c8 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1616,7 +1616,7 @@ Scripting.addGlobal(function dynamicOffScreenDocs(dashboard: Doc) {
     return [];
 });
 Scripting.addGlobal(function selectedDocumentType(docType?: DocumentType, colType?: CollectionViewType, checkParent?: boolean) {
-    let selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+    let selected = SelectionManager.Docs().length ? SelectionManager.Docs()[0] : undefined;
     if (selected && checkParent) {
         const parentDoc: Doc = Cast(selected.context, Doc, null);
         selected = parentDoc;
diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts
index 635673025..e910a9118 100644
--- a/src/client/util/HypothesisUtils.ts
+++ b/src/client/util/HypothesisUtils.ts
@@ -29,7 +29,7 @@ export namespace Hypothesis {
      * Search for a WebDocument whose url field matches the given uri, return undefined if not found
      */
     export const findWebDoc = async (uri: string) => {
-        const currentDoc = SelectionManager.Views().length && SelectionManager.Views()[0].props.Document;
+        const currentDoc = SelectionManager.Docs().lastElement();
         if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise
 
         const results: Doc[] = [];
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0cfaebbf2..bac13373c 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -11,7 +11,7 @@ export namespace SelectionManager {
     class Manager {
 
         @observable IsDragging: boolean = false;
-        SelectedViews: ObservableMap<DocumentView, boolean> = new ObservableMap();
+        SelectedViews: ObservableMap<DocumentView, Doc> = new ObservableMap();
         @observable SelectedSchemaDocument: Doc | undefined;
         @observable SelectedSchemaCollection: CollectionSchemaView | undefined;
 
@@ -28,19 +28,18 @@ export namespace SelectionManager {
                     this.DeselectAll();
                 }
 
-                manager.SelectedViews.set(docView, true);
+                manager.SelectedViews.set(docView, docView.rootDoc);
                 docView.props.whenChildContentsActiveChanged(true);
             } else if (!ctrlPressed && Array.from(manager.SelectedViews.entries()).length > 1) {
                 Array.from(manager.SelectedViews.keys()).map(dv => dv !== docView && dv.props.whenChildContentsActiveChanged(false));
                 manager.SelectedSchemaDocument = undefined;
                 manager.SelectedSchemaCollection = undefined;
                 manager.SelectedViews.clear();
-                manager.SelectedViews.set(docView, true);
+                manager.SelectedViews.set(docView, docView.rootDoc);
             }
         }
         @action
         DeselectView(docView: DocumentView): void {
-
             if (manager.SelectedViews.get(docView)) {
                 manager.SelectedViews.delete(docView);
                 docView.props.whenChildContentsActiveChanged(false);
@@ -92,7 +91,7 @@ export namespace SelectionManager {
     }
 
     export function Views(): Array<DocumentView> {
-        return Array.from(manager.SelectedViews.keys()).filter(dv => dv.props.Document._viewType !== CollectionViewType.Docking);
+        return Array.from(manager.SelectedViews.keys()).filter(dv => manager.SelectedViews.get(dv)?._viewType !== CollectionViewType.Docking);
     }
     export function SelectedSchemaDoc(): Doc | undefined {
         return manager.SelectedSchemaDocument;
@@ -100,4 +99,7 @@ export namespace SelectionManager {
     export function SelectedSchemaCollection(): CollectionSchemaView | undefined {
         return manager.SelectedSchemaCollection;
     }
+    export function Docs(): Doc[] {
+        return Array.from(manager.SelectedViews.values()).filter(doc => doc?._viewType !== CollectionViewType.Docking);
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 0127d3080..f66c9c788 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -229,8 +229,8 @@ export class KeyManager {
                 }
                 break;
             case "o":
-                const target = SelectionManager.Views()[0];
-                target && CollectionDockingView.OpenFullScreen(target.props.Document);
+                const target = SelectionManager.Docs().lastElement();
+                target && CollectionDockingView.OpenFullScreen(target);
                 break;
             case "r":
                 preventDefault = false;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 09e12443b..ab9022a84 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -366,7 +366,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return <Tooltip title={<div className="dash-tooltip">{"Show more permissions"}</div>}>
             <div className="expansion-button" onPointerDown={() => {
                 if (this.selectedDocumentView || this.selectedDoc) {
-                    SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDocumentView ? this.selectedDocumentView : undefined, this.selectedDoc);
+                    SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
                 }
             }}>
                 <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 3413179ed..3c88a4830 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -96,7 +96,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.ShowTitle: return (doc && !doc.presentationTargetDoc &&
             StrCast(doc._showTitle,
                 props?.showTitle?.() ||
-                (!Doc.IsSystem(doc) && doc.type === DocumentType.RTF ?
+                (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any) ?
                     (doc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) :
                         "author;creationDate") : "")) || "");
         case StyleProp.Color:
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index ce5846502..aefa1ec3d 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -62,7 +62,7 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     componentDidMount() {
         reaction(() => SelectionManager.Views().length && SelectionManager.Views()[0],
-            (doc) => doc && this.SetSelection(doc));
+            view => view && this.SetSelection(view));
     }
 
     @action
@@ -441,10 +441,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         </div>);
     }
 
-    @computed get selectedDocumentView() {
-        return SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-    }
-    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get selectedDocumentView() { return SelectionManager.Views().lastElement(); }
+    @computed get selectedDoc() { return SelectionManager.Docs().lastElement(); }
     @computed get notACollection() {
         if (this.selectedDoc) {
             const layoutField = Doc.LayoutField(this.selectedDoc);
@@ -552,8 +550,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     @undoBatch
     onAliasButtonMoved = (e: PointerEvent) => {
         const contentDiv = this.selectedDocumentView?.ContentDiv;
-        if (contentDiv) {
-            const dragData = new DragManager.DocumentDragData([this.selectedDocumentView!.props.Document]);
+        if (contentDiv && this.selectedDoc) {
+            const dragData = new DragManager.DocumentDragData([this.selectedDoc]);
             const offset = [e.clientX - contentDiv.getBoundingClientRect().x, e.clientY - contentDiv.getBoundingClientRect().y];
             dragData.defaultDropAction = "alias";
             dragData.canEmbed = true;
@@ -648,11 +646,9 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
         return this.document[this.props.docView.LayoutFieldKey + (this.props.isOverlay ? "-annotations" : "")];
     }
     @computed get childDocs() { return DocListCast(this.dataField); }
-    @computed get selectedDocumentView() { return SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; }
-    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
-    @computed get isText() {
-        return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any) ? true : false;
-    }
+    @computed get selectedDocumentView() { return SelectionManager.Views().lastElement(); }
+    @computed get selectedDoc() { return SelectionManager.Docs().lastElement(); }
+    @computed get isText() { return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any) ? true : false; }
 
     @undoBatch
     @action
@@ -826,7 +822,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
 
             </div>;
     }
-    @observable viewType = this.selectedDoc?._viewType;
 
     render() {
         return !this.props.docView.layoutDoc ? (null) :
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index b70df93da..06d20f015 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -321,12 +321,8 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                                 }
                             });
                         } else {
-                            let srcUrl: string | undefined;
-                            let srcWeb: Doc | undefined;
-                            if (SelectionManager.Views().length) {
-                                srcWeb = SelectionManager.Views()[0].props.Document;
-                                srcUrl = (srcWeb.data as WebField).url?.href?.match(/http[s]?:\/\/[^/]*/)?.[0];
-                            }
+                            const srcWeb = SelectionManager.Docs().lastElement();
+                            const srcUrl = (srcWeb?.data as WebField).url?.href?.match(/http[s]?:\/\/[^/]*/)?.[0];
                             const reg = new RegExp(Utils.prepend(""), "g");
                             const modHtml = srcUrl ? html.replace(reg, srcUrl) : html;
                             const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 });
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index fae92e076..7fe95fef0 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -1,24 +1,24 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
+import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, HeightSym, WidthSym, Opt } from '../../../../fields/Doc';
+import { Doc, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
 import { Id } from '../../../../fields/FieldSymbols';
 import { makeInterface } from '../../../../fields/Schema';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, Utils } from '../../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils';
 import { DragManager } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
+import { Colors, Shadows } from '../../global/globalEnums';
 import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { DocumentView } from '../../nodes/DocumentView';
 import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup';
 import { StyleProp } from '../../StyleProvider';
-import "./CollectionLinearView.scss";
 import { CollectionSubView } from '../CollectionSubView';
 import { CollectionViewType } from '../CollectionView';
-import { Colors, Shadows } from '../../global/globalEnums';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import "./CollectionLinearView.scss";
 
 
 type LinearDocument = makeInterface<[typeof documentSchema,]>;
@@ -115,9 +115,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
     }
 
 
-    getDisplayDoc(doc: Doc) {
+    getDisplayDoc = (doc: Doc) => {
         const nested = doc._viewType === CollectionViewType.Linear;
-        const hidden = doc.hidden === true;;
+        const hidden = doc.hidden === true;
 
         let dref: Opt<HTMLDivElement>;
         const docXf = () => this.getTransform(dref);
@@ -142,8 +142,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                 pinToPres={emptyFunction}
                 rootSelected={this.props.isSelected}
                 removeDocument={this.props.removeDocument}
-                // ScreenToLocalTransform={docXf} // bcz: Ugh -- this is what we want, but it breaks things when right-clicking on linear view item since docXf is not a constant value across invalidations
-                ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                ScreenToLocalTransform={docXf}
                 PanelWidth={nested ? doc[WidthSym] : this.dimension}
                 PanelHeight={nested ? doc[HeightSym] : this.dimension}
                 renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6f97cdbd8..8b19fb204 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -649,7 +649,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         if (e && this.rootDoc._hideContextMenu && Doc.UserDoc().noviceMode) {
             e.preventDefault();
             e.stopPropagation();
-            !this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), false);
+            //!this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), false);
         }
         // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
         if (e) {
@@ -952,11 +952,12 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     hideOnLeave={true}
                     styleProvider={this.captionStyleProvider}
                     dontRegisterView={true}
+                    isContentActive={this.isContentActive}
                     onClick={this.onClickFunc}
                 />
             </div>;
         const targetDoc = (showTitle?.startsWith("_") ? this.layoutDoc : this.rootDoc);
-        const background = StrCast(SharingManager.Instance.users.find(users => users.user.email === this.dataDoc.author)?.sharingDoc.userColor, this.rootDoc.type === DocumentType.RTF ? StrCast(Doc.SharingDoc().userColor) : "rgba(0,0,0,0.4)");
+        const background = StrCast(SharingManager.Instance.users.find(users => users.user.email === this.dataDoc.author)?.sharingDoc.userColor, [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : "rgba(0,0,0,0.4)");
         const titleView = !showTitle ? (null) :
             <div className={`documentView-titleWrapper${showTitleHover ? "-hover" : ""}`} key="title" style={{
                 position: this.headerMargin ? "relative" : "absolute",
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 7ad03e055..e9f19bf9e 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -9,7 +9,7 @@ import { List } from "../../../fields/List";
 import { RichTextField } from "../../../fields/RichTextField";
 import { listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField, ScriptField } from "../../../fields/ScriptField";
-import { Cast, StrCast } from "../../../fields/Types";
+import { Cast, StrCast, NumCast } from "../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../../Utils";
 import { Docs } from "../../documents/Documents";
 import { DocumentType } from "../../documents/DocumentTypes";
@@ -79,7 +79,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
     * @returns the relevant doc according to the value of FilterBox._filterScope i.e. either the Current Dashboard or the Current Collection
     */
     @computed static get targetDoc() {
-        return SelectionManager.Views().length ? SelectionManager.Views()[0].Document : CurrentUserUtils.ActiveDashboard;
+        return SelectionManager.Docs().length ? SelectionManager.Docs()[0] : CurrentUserUtils.ActiveDashboard;
     }
     @computed static get targetDocChildKey() {
         if (SelectionManager.Views().length) {
@@ -88,10 +88,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
         return "data";
     }
     @computed static get targetDocChildren() {
-        if (SelectionManager.Views().length) {
-            return DocListCast(FilterBox.targetDoc[FilterBox.targetDocChildKey]);
-        }
-        return DocListCast(CurrentUserUtils.ActiveDashboard.data);
+        return DocListCast(FilterBox.targetDoc?.[FilterBox.targetDocChildKey] || CurrentUserUtils.ActiveDashboard.data);
     }
 
     @observable _loaded = false;
@@ -347,7 +344,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
         );
     }
     setTreeHeight = (hgt: number) => {
-        this.layoutDoc._height = hgt + 140; // 50?  need to add all the border sizes together.
+        this.layoutDoc._height = NumCast(this.layoutDoc._autoHeightMargins) + 150; // need to add all the border sizes together.
     }
 
     /**
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 4475cf347..df7c54f67 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -248,14 +248,15 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         let noneSelected: boolean = false;
 
         if (script === 'setView') {
-            const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-            if (selected && StrCast(selected.Document.type) === DocumentType.COL) {
-                text = StrCast(selected.Document._viewType);
-            } else if (selected) {
-                dropdown = false;
-                text = StrCast(selected.Document.type);
-                if (text === DocumentType.RTF) text = "Text";
-                icon = Doc.toIcon(selected.Document);
+            const selected = SelectionManager.Docs().lastElement();
+            if (selected) {
+                if (StrCast(selected.type) === DocumentType.COL) {
+                    text = StrCast(selected._viewType);
+                } else {
+                    dropdown = false;
+                    text = selected.type === DocumentType.RTF ? "Text" : StrCast(selected.type);
+                    icon = Doc.toIcon(selected);
+                }
             } else {
                 dropdown = false;
                 icon = "globe-asia";
@@ -263,13 +264,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             }
             noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
         } else if (script === 'setFont') {
-            const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-            if (selected && StrCast(selected.Document.type) === DocumentType.RTF) {
-                text = StrCast(selected.Document._fontFamily);
-            } else {
-                const fontFamily = StrCast(Doc.UserDoc()._fontFamily);
-                text = fontFamily;
-            }
+            const selected = SelectionManager.Docs().lastElement();
+            text = StrCast((selected?.type === DocumentType.RTF ? selected : Doc.UserDoc())._fontFamily);
             noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
                 "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
         }
@@ -584,13 +580,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setView(view: string) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-    selected ? selected.Document._viewType = view : console.log("[FontIconBox.tsx] changeView failed");
+    const selected = SelectionManager.Docs().lastElement();
+    selected ? selected._viewType = view : console.log("[FontIconBox.tsx] changeView failed");
 });
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: boolean) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+    const selected = SelectionManager.Docs().lastElement();
     if (checkResult) {
         if (selected) {
             console.log("[Background] (selected): " + StrCast(selected._backgroundColor));
@@ -635,7 +631,7 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setFont(font: string, checkResult?: boolean) {
-    SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font);
+    SelectionManager.Docs().map(doc => doc._fontFamily = font);
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     editorView?.state && RichTextMenu.Instance.setFontFamily(font, editorView);
     Doc.UserDoc()._fontFamily = font;
@@ -665,7 +661,7 @@ Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", ch
         if (active === align) return Colors.MEDIUM_BLUE;
         else return "transparent";
     }
-    SelectionManager.Views().map(dv => dv.props.Document.textAlign = align);
+    SelectionManager.Docs().map(doc => doc.textAlign = align);
     switch (align) {
         case "left":
             editorView?.state && RichTextMenu.Instance.alignLeft(editorView, editorView.dispatch);
@@ -703,13 +699,13 @@ Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", check
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    const selected = SelectionManager.Docs().lastElement();
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
 
     if (checkResult) {
         if (selected) {
-            console.log("[Font color] (selected): " + StrCast(selected.rootDoc._fontColor));
-            return selected.rootDoc._fontColor;
+            console.log("[Font color] (selected): " + StrCast(selected._fontColor));
+            return selected._fontColor;
         } else {
             console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
             return Doc.UserDoc()._fontColor;
@@ -717,7 +713,7 @@ Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean)
     }
 
     if (selected) {
-        selected.rootDoc._fontColor = color;
+        selected._fontColor = color;
         if (color) {
             editorView?.state && RichTextMenu.Instance.setColor(color, editorView, editorView?.dispatch);
         }
@@ -727,18 +723,18 @@ Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean)
 
 // 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 selected = SelectionManager.Docs().lastElement();
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
 
     if (checkResult) {
         if (selected) {
-            return selected.Document._fontHighlight;
+            return selected._fontHighlight;
         } else {
             return Doc.UserDoc()._fontHighlight;
         }
     }
     if (selected) {
-        selected.rootDoc._fontColor = color;
+        selected._fontColor = color;
         if (color) {
             editorView?.state && RichTextMenu.Instance.setHighlight(color, editorView, editorView?.dispatch);
         }
@@ -769,7 +765,7 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
         console.log("editorView");
         editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true);
     }
-    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.bold = !dv.props.Document.bold);
+    SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.bold = !doc.bold);
     Doc.UserDoc().bold = !Doc.UserDoc().bold;
     return Doc.UserDoc().bold;
 });
@@ -784,7 +780,7 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
         console.log("editorView");
         editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true);
     }
-    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.underline = !dv.props.Document.underline);
+    SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.underline = !doc.underline);
     Doc.UserDoc().underline = !Doc.UserDoc().underline;
     return Doc.UserDoc().underline;
 });
@@ -799,7 +795,7 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
         console.log("editorView");
         editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true);
     }
-    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic);
+    SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.italic = !doc.italic);
     Doc.UserDoc().italic = !Doc.UserDoc().italic;
     return Doc.UserDoc().italic;
 });
@@ -841,7 +837,7 @@ Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolea
 
 Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean) {
     if (checkResult) {
-        const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+        const selected = SelectionManager.Docs().lastElement();
         if (selected && selected.type === DocumentType.INK) {
             return Number(selected.strokeWidth);
         } else {
@@ -850,13 +846,13 @@ Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean
         }
     }
     Doc.UserDoc().activeInkWidth = width;
-    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(width));
+    SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.INK).map(doc => doc.strokeWidth = Number(width));
 });
 
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function setStrokeColor(color?: string, checkResult?: boolean) {
     if (checkResult) {
-        const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+        const selected = SelectionManager.Docs().lastElement();
         if (selected && selected.type === DocumentType.INK) {
             return selected.color;
         } else {
@@ -865,7 +861,7 @@ Scripting.addGlobal(function setStrokeColor(color?: string, checkResult?: boolea
         }
     }
     SetActiveInkColor(StrCast(color));
-    SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.color = String(color));
+    SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.INK).map(doc => doc.color = String(color));
 });
 
 
@@ -873,7 +869,7 @@ Scripting.addGlobal(function setStrokeColor(color?: string, checkResult?: boolea
  *      webSetURL
  **/
 Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+    const selected = SelectionManager.Docs().lastElement();
     console.log("URL: ", url);
     if (checkResult && selected && selected.type === DocumentType.WEB) {
         return Cast(selected.data, WebField, null).url;
@@ -888,7 +884,7 @@ Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) {
  *      toggleSchemaPreview
  **/
 Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined;
+    const selected = SelectionManager.Docs().lastElement();
     console.log(selected && selected.title);
     if (checkResult && selected) {
         const result: boolean = NumCast(selected.schemaPreviewWidth) > 0;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 3d9d9543d..3919fbf94 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -279,33 +279,33 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         });
     }
 
-    toggleBold = (view: EditorView, forceBool?:boolean) => {
-        const mark = view.state.schema.mark(view.state.schema.marks.strong, {strong: forceBool});
+    toggleBold = (view: EditorView, forceBool?: boolean) => {
+        const mark = view.state.schema.mark(view.state.schema.marks.strong, { strong: forceBool });
         this.setMark(mark, view.state, view.dispatch, false);
         view.focus();
     }
 
-    toggleUnderline = (view: EditorView, forceBool?:boolean) => {
-        const mark = view.state.schema.mark(view.state.schema.marks.underline, {underline: forceBool});
+    toggleUnderline = (view: EditorView, forceBool?: boolean) => {
+        const mark = view.state.schema.mark(view.state.schema.marks.underline, { underline: forceBool });
         this.setMark(mark, view.state, view.dispatch, false);
         view.focus();
     }
 
-    toggleItalic = (view: EditorView, forceBool?:boolean) => {
-        const mark = view.state.schema.mark(view.state.schema.marks.em, {em: forceBool});
+    toggleItalic = (view: EditorView, forceBool?: boolean) => {
+        const mark = view.state.schema.mark(view.state.schema.marks.em, { em: forceBool });
         this.setMark(mark, view.state, view.dispatch, false);
         view.focus();
     }
 
 
-    setFontSize = (size:number, view: EditorView) => {
+    setFontSize = (size: number, view: EditorView) => {
         const fmark = view.state.schema.marks.pFontSize.create({ fontSize: size });
         this.setMark(fmark, view.state, (tx: any) => view.dispatch(tx.addStoredMark(fmark)), true);
         view.focus();
         this.updateMenu(view, undefined, this.props);
     }
 
-    setFontFamily = (family:string, view: EditorView) => {
+    setFontFamily = (family: string, view: EditorView) => {
         const fmark = view.state.schema.marks.pFontFamily.create({ family: family });
         this.setMark(fmark, view.state, (tx: any) => view.dispatch(tx.addStoredMark(fmark)), true);
         view.focus();
@@ -516,7 +516,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     get TextView() { return (this.view as any)?.TextView as FormattedTextBox; }
     get TextViewFieldKey() { return this.TextView?.props.fieldKey; }
 
-    
+
 
     @action setActiveHighlight(color: string) { this.activeHighlightColor = color; }
 
@@ -566,7 +566,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
                         if (linkDoc instanceof Doc) {
                             const anchor1 = await Cast(linkDoc.anchor1, Doc);
                             const anchor2 = await Cast(linkDoc.anchor2, Doc);
-                            const currentDoc = SelectionManager.Views().length && SelectionManager.Views()[0].props.Document;
+                            const currentDoc = SelectionManager.Docs().lastElement();
                             if (currentDoc && anchor1 && anchor2) {
                                 if (Doc.AreProtosEqual(currentDoc, anchor1)) {
                                     return StrCast(anchor2.title);
-- 
cgit v1.2.3-70-g09d2


From 23962e5ea718e62c2797bc38c60c4205c5ed198a Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Sun, 12 Sep 2021 12:47:10 -0400
Subject: updates pres so it works

---
 src/client/util/CurrentUserUtils.ts                |  8 ++++----
 src/client/util/DocumentManager.ts                 |  2 +-
 src/client/views/DocumentButtonBar.tsx             |  6 +-----
 src/client/views/MarqueeAnnotator.tsx              |  2 +-
 src/client/views/nodes/button/FontIconBox.tsx      | 23 ++++++++--------------
 .../views/nodes/formattedText/RichTextMenu.tsx     | 14 +++++++++++--
 src/client/views/nodes/trails/PresBox.tsx          |  2 --
 7 files changed, 27 insertions(+), 30 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a68c0fbc2..9a5ccffa0 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -807,7 +807,7 @@ export class CurrentUserUtils {
         await doc.myDashboards;
         if (doc.myDashboards === undefined) {
             const newDashboard = ScriptField.MakeScript(`createNewDashboard(Doc.UserDoc())`);
-            const newDashboardButton:Doc = Docs.Create.FontIconDocument({ onClick: newDashboard, _forceActive: true, toolTip: "Create new dashboard", _stayInCollection: true, _hideContextMenu: true, title: "new dashboard", btnType: ButtonType.ClickButton, _width: 30, _height: 30, buttonText: "New trail", icon: "plus", system: true });
+            const newDashboardButton: Doc = Docs.Create.FontIconDocument({ onClick: newDashboard, _forceActive: true, toolTip: "Create new dashboard", _stayInCollection: true, _hideContextMenu: true, title: "new dashboard", btnType: ButtonType.ClickButton, _width: 30, _height: 30, buttonText: "New trail", icon: "plus", system: true });
             doc.myDashboards = new PrefetchProxy(Docs.Create.TreeDocument([], {
                 title: "My Dashboards", _showTitle: "title", _height: 400, childHideLinkButton: true,
                 treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, _forceActive: true, childDropAction: "alias",
@@ -1219,7 +1219,7 @@ export class CurrentUserUtils {
     // Import sidebar is where shared documents are contained
     static setupImportSidebar(doc: Doc) {
         if (doc.myImportDocs === undefined) {
-            const newImportButton:Doc = Docs.Create.FontIconDocument({ onClick: ScriptField.MakeScript("importDocument()"), _forceActive: true, toolTip: "Import from computer", _width: 30, _height: 30, _stayInCollection: true, _hideContextMenu: true, title: "Import", btnType: ButtonType.ClickButton, buttonText: "Import", icon: "upload", system: true });
+            const newImportButton: Doc = Docs.Create.FontIconDocument({ onClick: ScriptField.MakeScript("importDocument()"), _forceActive: true, toolTip: "Import from computer", _width: 30, _height: 30, _stayInCollection: true, _hideContextMenu: true, title: "Import", btnType: ButtonType.ClickButton, buttonText: "Import", icon: "upload", system: true });
             doc.myImportDocs = new PrefetchProxy(Docs.Create.StackingDocument([], {
                 title: "My Imports", _forceActive: true, buttonMenu: true, buttonMenuDoc: newImportButton, ignoreClick: true, _showTitle: "title", _stayInCollection: true, _hideContextMenu: true, childLimitHeight: 0,
                 childDropAction: "copy", _autoHeight: true, _yMargin: 50, _gridGap: 15, boxShadow: "0 0", _lockedPosition: true, system: true, _chromeHidden: true,
@@ -1519,9 +1519,9 @@ export class CurrentUserUtils {
         CurrentUserUtils.openDashboard(userDoc, dashboardDoc);
     }
 
-    public static GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, maxHeight?: number) {
+    public static GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, maxHeight?: number, backgroundColor?: string) {
         const tbox = Docs.Create.TextDocument("", {
-            _xMargin: noMargins ? 0 : undefined, _yMargin: noMargins ? 0 : undefined, annotationOn, docMaxAutoHeight: maxHeight,
+            _xMargin: noMargins ? 0 : undefined, _yMargin: noMargins ? 0 : undefined, annotationOn, docMaxAutoHeight: maxHeight, backgroundColor: backgroundColor,
             _width: width || 200, _height: height || 100, x: x, y: y, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize),
             _fontFamily: StrCast(Doc.UserDoc().fontFamily), title
         });
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 02c65ca99..dfec9823b 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -190,7 +190,7 @@ export class DocumentManager {
             annoContainerView.focus(targetDoc);  // this allows something like a PDF view to remove its doc filters to expose the target so that it can be found in the retry code below
         }
         if (focusView) {
-            Doc.linkFollowHighlight(focusView.rootDoc);
+            !noSelect && Doc.linkFollowHighlight(focusView.rootDoc); //TODO:glr make this a setting in PresBox
             focusView.focus(targetDoc, {
                 originalTarget, willZoom, afterFocus: (didFocus: boolean) =>
                     new Promise<ViewAdjustment>(res => {
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index e75693d0e..7f428a881 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -198,16 +198,12 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     }
     @computed
     get pinButton() {
-        const pin = () => {
-            // undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))
-            undoBatch(e => this.props.views().map(view => view && this.pinWithView(view.props.Document)))
-        }
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={
             <div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div>}>
             <div className="documentButtonBar-icon"
                 style={{ color: "white" }}
-                onClick={pin}>
+                onClick={undoBatch(e => this.props.views().map(view => view && this.pinWithView(view.props.Document)))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
             </div>
         </Tooltip>;
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index eee365ed8..26e76090a 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -81,7 +81,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
                 return annoDoc;
             };
             const targetCreator = (annotationOn: Doc | undefined) => {
-                const target = CurrentUserUtils.GetNewTextDoc("Note linked to " + this.props.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn);
+                const target = CurrentUserUtils.GetNewTextDoc("Note linked to " + this.props.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn, undefined, "yellow");
                 FormattedTextBox.SelectOnLoad = target[Id];
                 return target;
             };
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index b1d74261b..fb96969c5 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -522,7 +522,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 // button = <TextButton {...buttonProps}></TextButton>
                 break;
             case ButtonType.EditableText:
-                console.log("Editable text");
                 button = this.editableText;
                 break;
             case ButtonType.NumberButton:
@@ -592,7 +591,6 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo
     const selected = SelectionManager.Docs().lastElement();
     if (checkResult) {
         if (selected) {
-            console.log("[Background] (selected): " + StrCast(selected._backgroundColor));
             return selected._backgroundColor;
         } else {
             return "#FFFFFF";
@@ -685,14 +683,12 @@ Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", check
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     if (checkResult) {
         const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
-        console.log(active, mapStyle);
         if (active === mapStyle) return Colors.MEDIUM_BLUE;
         else return "transparent";
     }
     if (editorView) {
         const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
         if (active === mapStyle) {
-            console.log("set bullet list");
             editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: "" }));
         } else {
             editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: mapStyle }));
@@ -707,10 +703,8 @@ Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean)
 
     if (checkResult) {
         if (selected) {
-            console.log("[Font color] (selected): " + StrCast(selected._fontColor));
             return selected._fontColor;
         } else {
-            console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
             return Doc.UserDoc()._fontColor;
         }
     }
@@ -760,12 +754,16 @@ Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) {
 
 Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
     if (checkResult) {
-        if (Doc.UserDoc().bold) return Colors.MEDIUM_BLUE;
+        const editorView = RichTextMenu.Instance.TextView?.EditorView;
+        if (editorView) {
+            const bold: boolean = editorView?.state && RichTextMenu.Instance.getBoldStatus();
+            if (bold) return Colors.MEDIUM_BLUE;
+            else return "transparent";
+        }
         else return "transparent";
     }
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (editorView) {
-        console.log("editorView");
         editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true);
     }
     SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.bold = !doc.bold);
@@ -775,12 +773,10 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
 
 Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
     if (checkResult) {
-        if (Doc.UserDoc().underline) return Colors.MEDIUM_BLUE;
-        else return "transparent";
+        return "transparent";
     }
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (editorView) {
-        console.log("editorView");
         editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true);
     }
     SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.underline = !doc.underline);
@@ -790,12 +786,10 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
 
 Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
     if (checkResult) {
-        if (Doc.UserDoc().italic) return Colors.MEDIUM_BLUE;
-        else return "transparent";
+        return "transparent";
     }
     const editorView = RichTextMenu.Instance.TextView?.EditorView;
     if (editorView) {
-        console.log("editorView");
         editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true);
     }
     SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.italic = !doc.italic);
@@ -909,7 +903,6 @@ Scripting.addGlobal(function webBack() {
  **/
 Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) {
     const selected = SelectionManager.Docs().lastElement();
-    console.log(selected && selected.title);
     if (checkResult && selected) {
         const result: boolean = NumCast(selected.schemaPreviewWidth) > 0;
         if (result) return Colors.MEDIUM_BLUE;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 3919fbf94..86f2810ab 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -142,6 +142,18 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         }
     }
 
+    getBoldStatus() {
+        if (this.view && this.TextView.props.isSelected(true)) {
+            const path = (this.view.state.selection.$from as any).path;
+            for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) {
+                if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) {
+                    console.log(path[i].attrs);
+                    return path[i].attrs.strong;
+                }
+            }
+        }
+    }
+
     // finds font sizes and families in selection
     getActiveAlignment() {
         if (this.view && this.TextView.props.isSelected(true)) {
@@ -208,7 +220,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
         const found = new Set<Mark>();
         const { from, to } = state.selection as TextSelection;
         state.doc.nodesBetween(from, to, (node) => node.marks.forEach(m => found.add(m)));
-        console.log("Marks: " + found);
         return found;
     }
 
@@ -590,7 +601,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
     @undoBatch
     makeLinkToURL = (target: string, lcoation: string) => {
         ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
-        console.log((this.view as any)?.TextView);
     }
 
     @undoBatch
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 90620d765..add84ff83 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -413,8 +413,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             // if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target
             this.navigateToView(targetDoc, activeItem);
         }
-        // TODO: Add progressivize for navigating web (storing websites for given frames)
-
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2


From f71b10a04506cd45ec157a05dbe41217380d814f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 15 Sep 2021 12:14:49 -0400
Subject: fixed documentdecoration resizers.  fixed grouping and added button
 to switch between freeform / group

---
 src/client/views/DocumentDecorations.scss          | 23 +---------------------
 src/client/views/PropertiesButtons.tsx             | 11 +++++++++++
 src/client/views/collections/CollectionMenu.tsx    |  1 -
 src/client/views/collections/CollectionView.tsx    |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 19 ++++++++++++++----
 .../views/nodes/formattedText/RichTextMenu.tsx     |  1 -
 6 files changed, 28 insertions(+), 29 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 76b7481a0..a9f50f81b 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -7,27 +7,7 @@ $linkGap: 3px;
   z-index: 2000;
 }
 .documentDecorations-container {
-  z-index: $docDecorations-zindex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: grid;
-  grid-template-rows: 20px 8px 1fr 8px;
-  grid-template-columns: 8px 16px 1fr 8px 8px;
-  pointer-events: none;
-
-  .documentDecorations-centerCont {
-    grid-column: 3;
-    background: none;
-  }
-
-  .documentDecorations-selectorButton {
-    pointer-events: auto;
-    height: 15px;
-    width: 15px;
-    left: -20px;
-    top: 20px;
-    display: inline-block;
+    z-index: $docDecorations-zindex;
     position: absolute;
     top: 0;
     left: 0;
@@ -142,7 +122,6 @@ $linkGap: 3px;
     .documentDecorations-bottomRightResizer:hover {
         opacity: 1;
     }
-  }
 
   .documentDecorations-topLeftResizer,
   .documentDecorations-leftResizer,
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index dd737dc9d..e3da7ce2a 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -16,6 +16,8 @@ import { DocumentView } from './nodes/DocumentView';
 import './PropertiesButtons.scss';
 import React = require("react");
 import { Colors } from "./global/globalEnums";
+import { CollectionFreeFormView } from "./collections/collectionFreeForm";
+import { DocumentManager } from "../util/DocumentManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -86,6 +88,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed get gridButton() {
         return this.propertyToggleBtn("Grid", "_backgroundGridShow", on => `Display background grid in collection`, on => "border-all");
     }
+    @computed get groupButton() {
+        return this.propertyToggleBtn("Group", "isGroup", on => `Display collection as a Group`, on => "object-group", (dv, doc) => {
+            doc.isGroup = !doc.isGroup;
+            doc.forceActive = doc.isGroup;
+            const dview = dv || DocumentManager.Instance.getFirstDocumentView(doc);
+            (dview?.ComponentView as CollectionFreeFormView)?.updateGroupBounds?.()
+        });
+    }
     @computed get snapButton() {
         return this.propertyToggleBtn("Snap\xA0Lines", "showSnapLines", on => `Display snapping lines when objects are dragged`, on => "border-all", undefined, true);
     }
@@ -219,6 +229,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.maskButton, { display: !isInk ? "none" : "" })}
                 {toggle(this.chromeButton, { display: !isCollection || isNovice ? "none" : "" })}
                 {toggle(this.gridButton, { display: !isCollection ? "none" : "" })}
+                {toggle(this.groupButton, { display: !isCollection ? "none" : "" })}
                 {toggle(this.snapButton, { display: !isCollection ? "none" : "" })}
                 {toggle(this.clustersButton, { display: !isFreeForm ? "none" : "" })}
                 {toggle(this.panButton, { display: !isFreeForm ? "none" : "" })}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 8e03b2db2..2c2d5dc75 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -99,7 +99,6 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps>{
     }
 
     @computed get contMenuButtons() {
-        trace();
         const selDoc = Doc.UserDoc().contextMenuBtns;
         return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }} >
             <CollectionLinearView
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index bc02c44f0..5c9c8063b 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -166,7 +166,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab
         !Doc.UserDoc().noviceMode && subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" });
         subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" });
 
-        if (!Doc.IsSystem(this.rootDoc) && !this.rootDoc.annotationOn) {
+        if (!Doc.IsSystem(this.rootDoc) && !this.rootDoc.isGroup && !this.rootDoc.annotationOn) {
             const existingVm = ContextMenu.Instance.findByDescription(category);
             const catItems = existingVm && "subitems" in existingVm ? existingVm.subitems : [];
             catItems.push({ description: "Add a Perspective...", addDivider: true, noexpand: true, subitems: subItems, icon: "eye" });
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c8561d901..ef127d328 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -183,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     addDocument = (newBox: Doc | Doc[]) => {
         let retVal = false;
         if (newBox instanceof Doc) {
-            if (retVal = this.props.addDocument?.(newBox) || false) {
+            if (retVal = (this.props.addDocument?.(newBox) || false)) {
                 this.bringToFront(newBox);
                 this.updateCluster(newBox);
             }
@@ -1236,6 +1236,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             { fireImmediately: true, name: "doLayout" });
 
         this._marqueeRef.current?.addEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
+        this.rootDoc.isGroup && this.updateGroupBounds()
     }
 
     componentWillUnmount() {
@@ -1327,8 +1328,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         !options && ContextMenu.Instance.addItem({ description: "Options...", subitems: optionItems, icon: "eye" });
         const mores = ContextMenu.Instance.findByDescription("More...");
         const moreItems = mores && "subitems" in mores ? mores.subitems : [];
-        moreItems.push({ description: "Export collection", icon: "download", event: async () => Doc.Zip(this.props.Document) });
-        moreItems.push({ description: "Import exported collection", icon: "upload", event: ({ x, y }) => this.importDocument(x, y) });
+        if (!Doc.UserDoc().noviceMode) {
+            moreItems.push({ description: "Export collection", icon: "download", event: async () => Doc.Zip(this.props.Document) });
+            moreItems.push({ description: "Import exported collection", icon: "upload", event: ({ x, y }) => this.importDocument(x, y) });
+        }
         !mores && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "eye" });
     }
 
@@ -1484,6 +1487,14 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return wscale < hscale ? wscale : hscale;
     }
 
+    private groupDropDisposer?: DragManager.DragDropDisposer;
+    protected createGroupEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view
+        this.groupDropDisposer?.();
+        if (ele) {
+            this.groupDropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this));
+        }
+    }
+
     render() {
         TraceMobx();
         const clientRect = this._mainCont?.getBoundingClientRect();
@@ -1527,7 +1538,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 </div>}
 
             {this.props.Document._isGroup && SnappingManager.GetIsDragging() && (this.ChildDrag || this.props.layerProvider?.(this.props.Document) === false) ?
-                <div className="collectionFreeForm-groupDropper" ref={this.createDashEventsTarget} style={{
+                <div className="collectionFreeForm-groupDropper" ref={this.createGroupEventsTarget} style={{
                     width: this.ChildDrag ? "10000" : "100%",
                     height: this.ChildDrag ? "10000" : "100%",
                     left: this.ChildDrag ? "-5000" : 0,
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 86f2810ab..9904a7939 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -147,7 +147,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps>   {
             const path = (this.view.state.selection.$from as any).path;
             for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) {
                 if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) {
-                    console.log(path[i].attrs);
                     return path[i].attrs.strong;
                 }
             }
-- 
cgit v1.2.3-70-g09d2

