changed priority of mobile iframe selection from text to image

3 files changed, 52 insertions, 39 deletions

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 0b7c3eda9..f1620b80e 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -191,29 +191,31 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
         let pressedElement: HTMLElement | undefined;
         let pressedBound: ClientRect | undefined;
         let selectedText: string = "";
+        let pressedImg: boolean = false;
         if (this._iframeRef.current) {
             const B = this._iframeRef.current.getBoundingClientRect();
             const iframeDoc = this._iframeRef.current.contentDocument;
             if (B && iframeDoc) {
-                // check if there is selected text
-                const text = iframeDoc.getSelection();
-                if (text && text.toString().length > 0) {
-                    selectedText = text.toString();
-
-                    // get html of the selected text
-                    const range = text.getRangeAt(0);
-                    const contents = range.cloneContents();
-                    const div = document.createElement("div");
-                    div.appendChild(contents);
-                    pressedElement = div;
-
-                    pressedBound = range.getBoundingClientRect();
+                // TODO: this only works when scale = 1 as it is currently only inteded for mobile upload
+                const element = iframeDoc.elementFromPoint(this._pressX - B.left, this._pressY - B.top);
+                if (element && element.nodeName === "IMG") {
+                    pressedBound = element.getBoundingClientRect();
+                    pressedElement = element.cloneNode(true) as HTMLElement;
+                    pressedImg = true;
                 } else {
-                    // TODO: this only works when scale = 1 as it is currently only inteded for mobile upload
-                    const element = iframeDoc.elementFromPoint(this._pressX - B.left, this._pressY - B.top);
-                    if (element && element.nodeName) {//} === "IMG") {
-                        pressedBound = element.getBoundingClientRect();
-                        pressedElement = element.cloneNode(true) as HTMLElement;
+                    // check if there is selected text
+                    const text = iframeDoc.getSelection();
+                    if (text && text.toString().length > 0) {
+                        selectedText = text.toString();
+
+                        // get html of the selected text
+                        const range = text.getRangeAt(0);
+                        const contents = range.cloneContents();
+                        const div = document.createElement("div");
+                        div.appendChild(contents);
+                        pressedElement = div;
+
+                        pressedBound = range.getBoundingClientRect();
                     }
                 }
             }
@@ -232,19 +234,7 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
 
         // start dragging the pressed element if long pressed
         this._longPressSecondsHack = setTimeout(() => {
-            if (selectedText && pressedBound && pressedElement) {
-                e.stopPropagation();
-                e.preventDefault();
-                // create doc with the selected text's html
-                const doc = Docs.Create.HtmlDocument(pressedElement.innerHTML);
-
-                // create dragging ghost with the selected text
-                if (this._iframeDragRef.current) this._iframeDragRef.current.appendChild(pressedElement);
-
-                // start the drag
-                const dragData = new DragManager.DocumentDragData([doc]);
-                DragManager.StartDocumentDrag([pressedElement], dragData, this._pressX - pressedBound.top, this._pressY - pressedBound.top, { hideSource: true });
-            } else if (pressedElement && pressedBound) {
+            if (pressedImg && pressedElement && pressedBound) {
                 e.stopPropagation();
                 e.preventDefault();
                 if (pressedElement.nodeName === "IMG") {
@@ -260,6 +250,18 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
                         DragManager.StartDocumentDrag([pressedElement], dragData, this._pressX, this._pressY, { hideSource: true });
                     }
                 }
+            } else if (selectedText && pressedBound && pressedElement) {
+                e.stopPropagation();
+                e.preventDefault();
+                // create doc with the selected text's html
+                const doc = Docs.Create.HtmlDocument(pressedElement.innerHTML);
+
+                // create dragging ghost with the selected text
+                if (this._iframeDragRef.current) this._iframeDragRef.current.appendChild(pressedElement);
+
+                // start the drag
+                const dragData = new DragManager.DocumentDragData([doc]);
+                DragManager.StartDocumentDrag([pressedElement], dragData, this._pressX - pressedBound.top, this._pressY - pressedBound.top, { hideSource: true });
             }
         }, 1500);
     }
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index f00c77203..1537ae034 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -78,7 +78,7 @@ export default class MobileInkOverlay extends React.Component {
         };
 
         const target = document.elementFromPoint(this._x + 10, this._y + 10);
-        target ?.dispatchEvent(
+        target?.dispatchEvent(
             new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
                 {
                     bubbles: true,
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 0c2ed8156..5d3a517ae 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -38,6 +38,7 @@ import { DocumentManager } from '../client/util/DocumentManager';
 import RichTextMenu from '../client/util/RichTextMenu';
 import { WebField } from "../new_fields/URLField";
 import { FieldResult } from "../new_fields/Doc";
+import { List } from '../new_fields/List';
 
 library.add(faLongArrowAltLeft);
 
@@ -252,18 +253,28 @@ export default class MobileInterface extends React.Component {
         Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" });
     }
 
+    clearUpload = async () => {
+        if (this.mainContainer) {
+            const data = Cast(this.mainContainer.data, listSpec(Doc));
+            if (data) {
+                const collectionDoc = await data[1];
+                const children = DocListCast(collectionDoc.data);
+                children.forEach(doc => {
+                });
+                // collectionDoc[data] = new List<Doc>();
+            }
+        }
+    }
+
     renderUploadContent() {
         if (this.mainContainer) {
             return (
                 <div className="mobileInterface" onDragOver={this.onDragOver}>
                     <div className="mobileInterface-inkInterfaceButtons">
-                        <div className="navButtons">
-                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
-                        </div>
-                        <div className="uploadSettings">
-                            {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */}
-                            <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button>
-                        </div>
+                        <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
+                        {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */}
+                        {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */}
+                        <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button>
                     </div>
                     <DocumentView
                         Document={this.mainContainer}