Merge branch 'mobile_revision_direct' of https://github.com/browngraphicslab/Dash-Web into mobile_revision_direct

14 files changed, 388 insertions, 34 deletions

diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 9c5bf0a1f..170631422 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -53,18 +53,19 @@
         display: flex;
     
         &.with-rows {
-            flex-direction: column
+            flex-direction: column-reverse;
         }
     
         .antimodeMenu-row {
             display: flex;
-            height: 35px;
+            height: 100%;
+            width:100%;
         }
     
         .antimodeMenu-button {
             background-color: transparent;
-            width: 35px;
-            height: 35px;
+            width: 100px;
+            height: 100px;
     
             &.active {
                 background-color: #121212;
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index f65a89422..bd0e4fc9a 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -87,7 +87,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
     onContextMenu = (e: React.MouseEvent): void => {
         // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
         if (!e.isPropagationStopped()) {
-            ContextMenu.Instance.addItem({
+            ContextMenu.Instance?.addItem({
                 description: "Make Hero Image", event: () => {
                     const index = NumCast(this.layoutDoc._itemIndex);
                     (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField);
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6f5a3dfe4..02ba45f9c 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -840,7 +840,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             parentActive={returnTrue}
             whenActiveChanged={emptyFunction}
             focus={emptyFunction}
-            backgroundColor={CollectionDockingView.Instance.props.backgroundColor}
+            backgroundColor={CollectionDockingView.Instance?.props.backgroundColor}
             addDocTab={this.addDocTab}
             pinToPres={DockedFrameRenderer.PinDoc}
             ContainingCollectionView={undefined}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index a25a864af..00a1d27f0 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -213,12 +213,12 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
 
     setupViewTypes(category: string, func: (viewType: CollectionViewType) => Doc, addExtras: boolean) {
-        const existingVm = ContextMenu.Instance.findByDescription(category);
+        const existingVm = ContextMenu.Instance?.findByDescription(category);
         const subItems = existingVm && "subitems" in existingVm ? existingVm.subitems : [];
 
         subItems.push({ description: "Freeform", event: () => func(CollectionViewType.Freeform), icon: "signature" });
         if (addExtras && CollectionView._safeMode) {
-            ContextMenu.Instance.addItem({ description: "Test Freeform", event: () => func(CollectionViewType.Invalid), icon: "project-diagram" });
+            ContextMenu.Instance?.addItem({ description: "Test Freeform", event: () => func(CollectionViewType.Invalid), icon: "project-diagram" });
         }
         subItems.push({ description: "Schema", event: () => func(CollectionViewType.Schema), icon: "th-list" });
         subItems.push({ description: "Tree", event: () => func(CollectionViewType.Tree), icon: "tree" });
@@ -235,7 +235,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) });
         }
         addExtras && subItems.push({ description: "lightbox", event: action(() => this._isLightboxOpen = true), icon: "eye" });
-        !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: subItems, icon: "eye" });
+        !existingVm && ContextMenu.Instance?.addItem({ description: category, subitems: subItems, icon: "eye" });
     }
 
     onContextMenu = (e: React.MouseEvent): void => {
@@ -248,7 +248,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                 return newRendition;
             }, false);
 
-            const existing = ContextMenu.Instance.findByDescription("Options...");
+            const existing = ContextMenu.Instance?.findByDescription("Options...");
             const layoutItems = existing && "subitems" in existing ? existing.subitems : [];
             layoutItems.push({ description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" });
             if (this.props.Document.childLayout instanceof Doc) {
@@ -259,9 +259,9 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             }
             layoutItems.push({ description: `${this.props.Document.isInPlaceContainer ? "Unset" : "Set"} inPlace Container`, event: () => this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" });
 
-            !existing && ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" });
+            !existing && ContextMenu.Instance?.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" });
 
-            const existingOnClick = ContextMenu.Instance.findByDescription("OnClick...");
+            const existingOnClick = ContextMenu.Instance?.findByDescription("OnClick...");
             const onClicks = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
             const funcs = [
                 { key: "onChildClick", name: "On Child Clicked" },
@@ -277,12 +277,12 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                     icon: "edit",
                     event: () => this.props.Document[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)),
                 }));
-            !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
+            !existingOnClick && ContextMenu.Instance?.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
 
-            const more = ContextMenu.Instance.findByDescription("More...");
+            const more = ContextMenu.Instance?.findByDescription("More...");
             const moreItems = more && "subitems" in more ? more.subitems : [];
             moreItems.push({ description: "Export Image Hierarchy", icon: "columns", event: () => ImageUtils.ExportHierarchyToFileSystem(this.props.Document) });
-            !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
+            !more && ContextMenu.Instance?.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         }
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index 3671a84b9..72fdf5af9 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -4,7 +4,6 @@
         height: 100%;
     }
 
-
 }
 
 .sketch-picker {
@@ -31,7 +30,42 @@
         background: #323232;
         display: block;
 
-
     }
 }
 
+@media only screen and (max-width: 1000px) {
+    .antimodeMenu-button {
+        .color-preview {
+            width: 100%;
+            height: 100%;
+        }
+    
+    }
+    
+    .sketch-picker {
+        background: #323232;
+    
+        .flexbox-fit {
+            background: #323232;
+        }
+    }
+    
+    .btn-group {
+        display: grid;
+        grid-template-columns: auto auto;
+        /* Make the buttons appear below each other */
+    }
+    
+    .btn2-group {
+        display: block;
+        background: #323232;
+        grid-template-columns: auto;
+    
+        /* Make the buttons appear below each other */
+        .antimodeMenu-button {
+            background: #323232;
+            display: block;
+    
+        }
+    }
+}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 9f5e217bf..8bebcd047 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -11,6 +11,8 @@ import { Utils } from "../../../../Utils";
 import GestureOverlay from "../../GestureOverlay";
 import { Doc } from "../../../../fields/Doc";
 
+
+
 @observer
 export default class InkOptionsMenu extends AntimodeMenu {
     static Instance: InkOptionsMenu;
@@ -23,6 +25,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
     @observable _colorBtn = false;
     @observable _widthBtn = false;
 
+
+
     constructor(props: Readonly<{}>) {
         super(props);
         InkOptionsMenu.Instance = this;
@@ -126,7 +130,15 @@ export default class InkOptionsMenu extends AntimodeMenu {
             this.widthPicker,
             this.colorPicker,
         ];
-        return this.getElement(buttons);
+
+        const mobileButtons = [
+            this.shapeButtons,
+            this.bezierButton,
+            this.widthPicker,
+            this.colorPicker,
+        ];
+
+        return (window.innerWidth < 1000 ? this.getElement(mobileButtons) : this.getElement(buttons));
     }
 }
 Scripting.addGlobal(function activatePen(penBtn: any) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1d98a2628..66bc73617 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -138,7 +138,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         document.removeEventListener("pointerup", this.onPointerUp);
         console.log(SelectionManager.SelectedDocuments());
         console.log("START");
-        if (RadialMenu.Instance._display === false) {
+        if (RadialMenu.Instance?._display === false) {
             this.addHoldMoveListeners();
             this.addHoldEndListeners();
             this.onRadialMenu(e, me);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index cabf30c13..73410e02f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -174,19 +174,19 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
             //     }), icon: "expand-arrows-alt"
             // });
 
-            const existingAnalyze = ContextMenu.Instance.findByDescription("Analyzers...");
+            const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers...");
             const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : [];
             modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" });
             modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" });
             //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" });
-            !existingAnalyze && ContextMenu.Instance.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
+            !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
 
-            ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
+            ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
 
 
-            const existingMore = ContextMenu.Instance.findByDescription("More...");
+            const existingMore = ContextMenu.Instance?.findByDescription("More...");
             const mores: ContextMenuProps[] = existingMore && "subitems" in existingMore ? existingMore.subitems : [];
-            !existingMore && ContextMenu.Instance.addItem({ description: "More...", subitems: mores, icon: "hand-point-right" });
+            !existingMore && ContextMenu.Instance?.addItem({ description: "More...", subitems: mores, icon: "hand-point-right" });
         }
     }
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 49114d967..e608f9951 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -37,6 +37,7 @@
         position: absolute;
     }
 }
+
 .formattedTextBox-outer {
     position: relative;
     overflow: auto;
@@ -273,4 +274,284 @@ footnote::after {
     .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
     .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
     .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left:   -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 1000px) {
+    @import "../../globalCssVariables";
+
+    .ProseMirror {
+        width: 100%;
+        height: 100%;
+        min-height: 100%;
+    }
+    
+    .ProseMirror:focus {
+        outline: none !important;
+    }
+    
+    .formattedTextBox-cont {
+        touch-action: none;
+        cursor: text;
+        background: inherit;
+        padding: 0;
+        border-width: 0px;
+        border-radius: inherit;
+        border-color: $intermediate-color;
+        box-sizing: border-box;
+        background-color: inherit;
+        border-style: solid;
+        overflow-y: auto;
+        overflow-x: hidden;
+        color: initial;
+        max-height: 100%;
+        display: flex;
+        flex-direction: row;
+        transition: opacity 1s;
+    
+        .formattedTextBox-dictation {
+            height: 12px;
+            width: 10px;
+            top: 0px;
+            left: 0px;
+            position: absolute;
+        }
+    }
+    
+    .formattedTextBox-outer {
+        position: relative;
+        overflow: auto;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .formattedTextBox-sidebar-handle {
+        position: absolute;
+        top: calc(50% - 17.5px);
+        width: 10px;
+        height: 35px;
+        background: lightgray;
+        border-radius: 20px;
+        cursor:grabbing;
+    }
+    
+    .formattedTextBox-cont>.formattedTextBox-sidebar-handle {
+        right: 0;
+        left: unset;
+    }
+    
+    .formattedTextBox-sidebar,
+    .formattedTextBox-sidebar-inking {
+        border-left: dashed 1px black;
+        height: 100%;
+        display: inline-block;
+        position: absolute;
+        right: 0;
+    
+        .collectionfreeformview-container {
+            position: relative;
+        }
+        
+        >.formattedTextBox-sidebar-handle {
+            right: unset;
+            left: -5;
+        }
+    }
+    
+    .formattedTextBox-sidebar-inking {
+        pointer-events: all;
+    }
+    
+    .formattedTextBox-inner-rounded {
+        height: 70%;
+        width: 85%;
+        position: absolute;
+        overflow: auto;
+        top: 15%;
+        left: 10%;
+    }
+    
+    .formattedTextBox-inner-rounded,
+    .formattedTextBox-inner {
+        height: 100%;
+        white-space: pre-wrap; 
+        hr {
+            display: block;
+            unicode-bidi: isolate;
+            margin-block-start: 0.5em;
+            margin-block-end: 0.5em;
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+            overflow: hidden;
+            border-style: inset;
+            border-width: 1px;
+        }
+    }
+    
+    // .menuicon {
+    //     display: inline-block;
+    //     border-right: 1px solid rgba(0, 0, 0, 0.2);
+    //     color: #888;
+    //     line-height: 1;
+    //     padding: 0 7px;
+    //     margin: 1px;
+    //     cursor: pointer;
+    //     text-align: center;
+    //     min-width: 1.4em;
+    // }
+    
+    .strong,
+    .heading {
+        font-weight: bold;
+    }
+    
+    .em {
+        font-style: italic;
+    }
+    
+    .userMarkOpen {
+        background: rgba(255, 255, 0, 0.267);
+        display: inline;
+    }
+    
+    .userMark {
+        background: rgba(255, 255, 0, 0.267);
+        font-size: 2px;
+        display: inline-grid;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 10px;
+        min-height: 10px;
+        text-align: center;
+        align-content: center;
+    }
+    
+    footnote {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+    
+        div {
+            padding: 0 !important;
+        }
+    }
+    
+    footnote::after {
+        content: counter(prosemirror-footnote);
+        vertical-align: super;
+        font-size: 75%;
+        counter-increment: prosemirror-footnote;
+    }
+    
+    .ProseMirror {
+        counter-reset: prosemirror-footnote;
+    }
+    
+    .footnote-tooltip {
+        cursor: auto;
+        font-size: 75%;
+        position: absolute;
+        left: -30px;
+        top: calc(100% + 10px);
+        background: silver;
+        padding: 3px;
+        border-radius: 2px;
+        max-width: 100px;
+        min-width: 50px;
+        width: max-content;
+    }
+    
+    .prosemirror-attribution {
+        font-size: 8px;
+    }
+    
+    .footnote-tooltip::before {
+        border: 5px solid silver;
+        border-top-width: 0px;
+        border-left-color: transparent;
+        border-right-color: transparent;
+        position: absolute;
+        top: -5px;
+        left: 27px;
+        content: " ";
+        height: 0;
+        width: 0;
+    }
+    
+    
+    .formattedTextBox-inlineComment {
+        position: relative;
+        width: 40px;
+        height: 20px;
+        &::before {
+            content: "→";
+        }
+        &:hover {
+            background: orange;
+        }
+    }
+    
+    .formattedTextBox-summarizer {
+        opacity: 0.5;
+        position: relative;
+        width: 40px;
+        height: 20px;
+        &::after {
+            content: "←";
+        }
+    }
+    
+    .formattedTextBox-summarizer-collapsed {
+        opacity: 0.5;
+        position: relative;
+        width: 40px;
+        height: 20px;
+        &::after {
+            content: "...";
+        }
+    }
+    
+    .ProseMirror {
+        touch-action: none;
+        span {
+            font-family: inherit;
+        }
+    
+        ol, ul {
+            counter-reset: deci1 0 multi1 0;
+            padding-left: 1em;
+            font-family: inherit;
+        }
+        ol {
+            margin-left: 1em;
+            font-family: inherit;
+        }
+    
+        .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
+        .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
+        .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
+        .decimal4-ol { counter-reset: deci4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3em;}
+        .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; }
+        .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; }
+        .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; }
+    
+        .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0;     padding-left: 1.2em }
+        .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
+        .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
+        .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
+    
+        .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
+        .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em;  content: counter(deci1) "."counter(deci2) ". ";  }
+        .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
+        .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
+        .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
+        .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
+        .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
+        
+        .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em;    width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
+        .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
+        .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
+        .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left:   -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+    }
+}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index e034e07a0..b0b648b66 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -188,7 +188,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                 }
             }
             const state = this._editorView.state.apply(tx);
-            this._editorView.updateState(state);
+            this?._editorView?.updateState(state);
             (tx.storedMarks && !this._editorView.state.storedMarks) && (this._editorView.state.storedMarks = tx.storedMarks);
 
             const tsel = this._editorView.state.selection.$from;
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
index f75e60a37..215ce02e5 100644
--- a/src/mobile/MobileInterface.scss
+++ b/src/mobile/MobileInterface.scss
@@ -17,6 +17,14 @@
     position: relative;
     touch-action: none;
     width: 100%;
+
+    -webkit-touch-callout:none;
+    -webkit-user-select:none;
+    -khtml-user-select:none;
+    -moz-user-select:none;
+    -ms-user-select:none;
+    user-select:none;
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
 
 .mobileInterface-background {
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 211cc7a1a..979094dda 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -39,6 +39,7 @@ import { SelectionManager } from "../client/util/SelectionManager";
 import { SketchPicker } from "react-color";
 import { ScriptField } from "../fields/ScriptField";
 import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu";
+import { RadialMenu } from "../client/views/nodes/RadialMenu";
 
 library.add(faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
@@ -87,6 +88,14 @@ export class MobileInterface extends React.Component {
         this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false;
         Doc.SetSelectedTool(InkTool.None);
         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
+
+        document.removeEventListener("dblclick", this.onReactDoubleClick);
+        document.addEventListener("dblclick", this.onReactDoubleClick);
+    }
+
+    onReactDoubleClick = (e: MouseEvent) => {
+        console.log("tapped");
+        e.stopPropagation();
     }
 
     @action
@@ -499,20 +508,20 @@ export class MobileInterface extends React.Component {
         const button = document.getElementById("inkButton") as HTMLElement;
         // const color = InkingControl.Instance.selectedColor;
         const color = "lightpink";
-        button.style.backgroundColor = this._ink ? "white" : color;
+        button.style.backgroundColor = this._ink ? "white" : "black";
         button.style.color = this._ink ? "black" : "white";
 
         if (!this._ink) {
             console.log("INK IS ACTIVE");
             // InkingControl.Instance.switchTool(InkTool.Pen);
             Doc.SetSelectedTool(InkTool.Pen);
-            InkOptionsMenu.Instance.jumpTo(300, 300);
+            //InkOptionsMenu.Instance.jumpTo(300, 300);
             this._ink = true;
         } else {
             console.log("INK IS INACTIVE");
             // InkingControl.Instance.switchTool(InkTool.None);
             Doc.SetSelectedTool(InkTool.None);
-            InkOptionsMenu.Instance.fadeOut(true);
+            //InkOptionsMenu.Instance.fadeOut(true);
             this._ink = false;
         }
     }
@@ -520,7 +529,11 @@ export class MobileInterface extends React.Component {
     inkMenu = () => {
         if (this._activeDoc._viewType === "docking") {
             if (this._ink) {
-                return <InkOptionsMenu />
+                console.log("here");
+                return <div className="colorSelector">
+                    <InkOptionsMenu />
+                </div>
+
             }
         }
     }
@@ -724,8 +737,8 @@ export class MobileInterface extends React.Component {
                     {this.drawInk()}
                     {this.uploadAudioButton()}
                     {/* {this.colorTool()} */}
-                    {this.inkMenu()}
                 </div>
+                {this.inkMenu()}
                 <GestureOverlay>
                     {this.displayWorkspaces()}
                     {this.renderDefaultContent()}
@@ -764,7 +777,6 @@ export class MobileInterface extends React.Component {
         } else if (!this.imageUploadActive) {
 
         }
-        console.log("upload");
         return (
             <div>
                 <div className="closeUpload" onClick={this.toggleUpload}>
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 44d3acb6f..8d996f779 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -334,12 +334,17 @@ body {
     top: -450px;
 }
 
-.toolbar .colorSelector {
+.colorSelector {
+    position: absolute;
+    top: 550px;
+    left: 300px;
+    transform: translate(-50%, 0);
+    z-index: 100;
     display: inline-flex;
     width: max-content;
-    padding: 5px;
     height: max-content;
     pointer-events: all;
+    font-size: 90px;
 }
 
 .widthSelector {
diff --git a/src/server/index.ts b/src/server/index.ts
index 590affd06..083173bb5 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -104,6 +104,7 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }:
     const serve: PublicHandler = ({ req, res }) => {
         const detector = new mobileDetect(req.headers['user-agent'] || "");
         const filename = detector.mobile() !== null ? 'mobile/image.html' : 'index.html';
+        console.log(detector.is("iPhone"));
         res.sendFile(path.join(__dirname, '../../deploy/' + filename));
     };