fixed webBox forward/backward and in lightbox.

7 files changed, 73 insertions, 162 deletions

diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index be21cec12..6eeb83ba9 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -3,7 +3,7 @@
 
 .antimodeMenu-cont {
     position: absolute;
-    z-index: 10000;
+    z-index: 10001;
     height: $antimodemenu-height;
     background: #323232;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 524462401..0cf958681 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -607,7 +607,7 @@ export class GestureOverlay extends Touchable {
                 this.makePolygon(this.InkShape, false);
                 this.dispatchGesture(GestureUtils.Gestures.Stroke);
                 this._points = [];
-                if (!CollectionFreeFormViewChrome.Instance._keepMode) {
+                if (!CollectionFreeFormViewChrome.Instance._keepPrimitiveMode) {
                     this.InkShape = "";
                 }
             }
@@ -654,9 +654,9 @@ export class GestureOverlay extends Touchable {
             this._points = [];
         }
         //get out of ink mode after each stroke=
-        if (CollectionFreeFormViewChrome.Instance && !CollectionFreeFormViewChrome.Instance?._keepMode) {
+        if (CollectionFreeFormViewChrome.Instance && !CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) {
             Doc.SetSelectedTool(InkTool.None);
-            CollectionFreeFormViewChrome.Instance._selected = CollectionFreeFormViewChrome.Instance._shapesNum;
+            CollectionFreeFormViewChrome.Instance._selectedPrimitive = CollectionFreeFormViewChrome.Instance._shapesPrimNum;
             SetActiveArrowStart("none");
             GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
             SetActiveArrowEnd("none");
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index de73004a0..78905bfb2 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -133,7 +133,7 @@ export class KeyManager {
                 GoogleAuthenticationManager.Instance.cancel();
                 SharingManager.Instance.close();
                 GroupManager.Instance.close();
-                CollectionFreeFormViewChrome.Instance?.clearKeep();
+                CollectionFreeFormViewChrome.Instance?.clearKeepPrimitiveMode();
                 window.getSelection()?.empty();
                 document.body.focus();
                 break;
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index e36e5caa7..180eaba4e 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -315,6 +315,13 @@
     }
 }
 
+.collectionMenu-webUrlButtons {
+    margin-left: 44;
+    background: lightGray;
+    width: 100%;
+    display: flex;
+}
+
 .webBox-urlEditor {
     position: relative;
     opacity: 0.9;
@@ -354,7 +361,7 @@
     }
 }
 
-.webpage-urlInput {
+.collectionMenu-urlInput {
     padding: 12px 10px 11px 10px;
     border: 0px;
     color: black;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 5670d45f5..4e2d81e61 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -5,7 +5,7 @@ import { Tooltip } from "@material-ui/core";
 import { action, computed, Lambda, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { ColorState } from "react-color";
-import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
+import { Doc, DocListCast, Opt } from "../../../fields/Doc";
 import { Document } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { InkTool } from "../../../fields/InkField";
@@ -15,7 +15,6 @@ import { RichTextField } from "../../../fields/RichTextField";
 import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from "../../../fields/ScriptField";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
-import { WebField } from "../../../fields/URLField";
 import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
@@ -549,17 +548,13 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     @computed get dataField() {
         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 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 webBoxUrl() { return this.selectedDocumentView?.ComponentView?.url?.(); }
 
     @undoBatch
     @action
@@ -591,20 +586,17 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"];
     private _head = ["", "", "", "arrow", "", ""];
     private _end = ["", "", "arrow", "arrow", "", ""];
-    private _shape = ["", "line", "line", "line", "rectangle", "circle"];
+    private _shapePrims = ["", "line", "line", "line", "rectangle", "circle"];
     private _title = ["pen", "line", "line with arrow", "line with double arrows", "square", "circle",];
     private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"];
-    @observable _shapesNum = this._shape.length;
-    @observable _selected = this._shapesNum;
-
-    @observable _keepMode = false;
+    @observable _selectedPrimitive = this._shapePrims.length;
+    @observable _keepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode
 
     @observable _colorBtn = false;
     @observable _widthBtn = false;
     @observable _fillBtn = false;
 
-    @action
-    clearKeep() { this._selected = this._shapesNum; }
+    @action clearKeepPrimitiveMode() { this._selectedPrimitive = this._shapePrims.length; }
 
     @action
     changeColor = (color: string, type: string) => {
@@ -636,17 +628,17 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
 
     @computed get drawButtons() {
         const func = action((i: number, keep: boolean) => {
-            this._keepMode = keep;
-            if (this._selected !== i) {
-                this._selected = i;
+            this._keepPrimitiveMode = keep;
+            if (this._selectedPrimitive !== i) {
+                this._selectedPrimitive = i;
                 Doc.SetSelectedTool(InkTool.Pen);
                 SetActiveArrowStart(this._head[i]);
                 SetActiveArrowEnd(this._end[i]);
                 SetActiveBezierApprox("300");
 
-                GestureOverlay.Instance.InkShape = this._shape[i];
+                GestureOverlay.Instance.InkShape = this._shapePrims[i];
             } else {
-                this._selected = this._shapesNum;
+                this._selectedPrimitive = this._shapePrims.length;
                 Doc.SetSelectedTool(InkTool.None);
                 SetActiveArrowStart("");
                 SetActiveArrowEnd("");
@@ -660,7 +652,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                     <button className="antimodeMenu-button"
                         onPointerDown={() => func(i, false)}
                         onDoubleClick={() => func(i, true)}
-                        style={{ backgroundColor: i === this._selected ? "525252" : "", fontSize: "20" }}>
+                        style={{ backgroundColor: i === this._selectedPrimitive ? "525252" : "", fontSize: "20" }}>
                         <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
                     </button>
                 </Tooltip>)}
@@ -729,120 +721,35 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
             </div>;
     }
 
-    onUrlDrop = (e: React.DragEvent) => {
+    onWebUrlDrop = (e: React.DragEvent) => {
         const { dataTransfer } = e;
         const html = dataTransfer.getData("text/html");
         const uri = dataTransfer.getData("text/uri-list");
-        const url = uri || html || this._url;
+        const url = uri || html || this.webBoxUrl || "";
         const newurl = url.startsWith(window.location.origin) ?
-            url.replace(window.location.origin, this._url.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url;
-        this.submitURL(newurl);
+            url.replace(window.location.origin, this.webBoxUrl?.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url;
+        this.submitWebUrl(newurl);
         e.stopPropagation();
     }
-    onUrlDragover = (e: React.DragEvent) => {
-        e.preventDefault();
-    }
-
-    @computed get _url() {
-        return this.selectedDoc?.data instanceof WebField ? Cast(this.selectedDoc.data, WebField, null)?.url.toString() : Field.toString(this.selectedDoc?.data as Field);
-    }
-
-    set _url(value) {
-        if (this.selectedDoc) {
-            Doc.GetProto(this.selectedDoc).data = new WebField(value);
-            Doc.SetInPlace(this.selectedDoc, "title", value, true);
-            const annots = Doc.GetProto(this.selectedDoc)["data-annotations-" + this.urlHash(value)];
-            Doc.GetProto(this.selectedDoc)["data-annotations"] = annots instanceof ObjectField ? ObjectField.MakeCopy(annots) : new List<Doc>([]);
-        }
-    }
-
-    @action
-    submitURL = (url: string) => {
-        if (!url.startsWith("http")) url = "http://" + url;
-        try {
-            const selectedDoc = this.selectedDoc;
-            if (selectedDoc) {
-                const URLy = new URL(url);
-                const future = Cast(selectedDoc["data-future"], listSpec("string"), null);
-                const history = Cast(selectedDoc["data-history"], listSpec("string"), null);
-                const annos = DocListCast(selectedDoc["data-annotations"]);
-                if (Field.toString(selectedDoc.data as Field) === Field.toString(new WebField(URLy))) {
-                    Doc.GetProto(selectedDoc).data = new WebField(new URL("http://cs.brown.edu/~avd"));
-                    setTimeout(action(() => Doc.GetProto(selectedDoc).data = new WebField(URLy)), 100);
-                } else {
-                    if (url) {
-                        Doc.GetProto(selectedDoc)["data-annotations-" + this.urlHash(this._url)] = new List<Doc>(annos);
-                        if (history === undefined) {
-                            selectedDoc["data-history"] = new List<string>([this._url]);
-                        } else {
-                            history.push(this._url);
-                        }
-                        this.props.docView.props.Document._scrollTop = 0;
-                        future && (future.length = 0);
-                    }
-                    this._url = url;
-                }
-            }
-        } catch (e) {
-            console.log("WebBox URL error:" + url);
-        }
-    }
-
-    urlHash(s: string) {
-        return s.split('').reduce((a: any, b: any) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0);
-    }
-
-    onValueKeyDown = async (e: React.KeyboardEvent) => {
-        e.key === "Enter" && this.submitURL(this._keyInput.current!.value);
+    onWebUrlValueKeyDown = (e: React.KeyboardEvent) => {
+        e.key === "Enter" && this.submitWebUrl(this._keyInput.current!.value);
         e.stopPropagation();
     }
-
-    @action
-    forward = () => {
-        const selectedDoc = this.selectedDoc;
-        if (selectedDoc) {
-            const future = Cast(selectedDoc["data-future"], listSpec("string"), null);
-            const history = Cast(selectedDoc["data-history"], listSpec("string"), null);
-            if (future?.length) {
-                history?.push(this._url);
-                Doc.GetProto(selectedDoc)["data-annotations-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(selectedDoc["data-annotations"]));
-                const newurl = future.pop()!;
-                Doc.GetProto(selectedDoc).data = new WebField(new URL(this._url = newurl));
-                Doc.GetProto(selectedDoc)["data-annotations"] = new List<Doc>(DocListCast(selectedDoc["data-annotations-" + this.urlHash(newurl)]));
-            }
-        }
-    }
-
-    @action
-    back = () => {
-        const selectedDoc = this.selectedDoc;
-        if (selectedDoc) {
-            const future = Cast(selectedDoc["data-future"], listSpec("string"), null);
-            const history = Cast(selectedDoc["data-history"], listSpec("string"), null);
-            if (history?.length) {
-                if (future === undefined) selectedDoc["data-future"] = new List<string>([this._url]);
-                else future.push(this._url);
-                Doc.GetProto(selectedDoc)["data-annotations-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(selectedDoc["data-annotations"]));
-                const newurl = history.pop()!;
-                Doc.GetProto(selectedDoc).data = new WebField(new URL(this._url = newurl));
-                Doc.GetProto(selectedDoc)["data-annotations"] = new List<Doc>(DocListCast(selectedDoc["data-annotations-" + this.urlHash(newurl)]));
-            }
-        }
-    }
+    submitWebUrl = (url: string) => this.selectedDocumentView?.ComponentView?.submitURL?.(url);
+    webUrlForward = () => this.selectedDocumentView?.ComponentView?.forward?.();
+    webUrlBack = () => this.selectedDocumentView?.ComponentView?.back?.();
 
     private _keyInput = React.createRef<HTMLInputElement>();
 
     @computed get urlEditor() {
         return (
-            <div className="webBox-buttons"
-                onDrop={this.onUrlDrop}
-                onDragOver={this.onUrlDragover} style={{ display: "flex" }}>
-                <input className="webpage-urlInput" key={this._url}
+            <div className="collectionMenu-webUrlButtons" onDrop={this.onWebUrlDrop} onDragOver={e => e.preventDefault()} >
+                <input className="collectionMenu-urlInput" key={this.webBoxUrl}
                     placeholder="ENTER URL"
-                    defaultValue={this._url}
-                    onDrop={this.onUrlDrop}
-                    onDragOver={this.onUrlDragover}
-                    onKeyDown={this.onValueKeyDown}
+                    defaultValue={this.webBoxUrl}
+                    onDrop={this.onWebUrlDrop}
+                    onDragOver={e => e.preventDefault()}
+                    onKeyDown={this.onWebUrlValueKeyDown}
                     onClick={(e) => {
                         this._keyInput.current!.select();
                         e.stopPropagation();
@@ -850,13 +757,13 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                     ref={this._keyInput}
                 />
                 <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", maxWidth: "250px", }}>
-                    <button className="submitUrl" onClick={() => this.submitURL(this._keyInput.current!.value)} onDragOver={this.onUrlDragover} onDrop={this.onUrlDrop}>
+                    <button className="submitUrl" onClick={() => this.submitWebUrl(this._keyInput.current!.value)} onDragOver={e => e.stopPropagation()} onDrop={this.onWebUrlDrop}>
                         GO
                     </button>
-                    <button className="submitUrl" onClick={this.back}>
+                    <button className="submitUrl" onClick={this.webUrlBack}>
                         <FontAwesomeIcon icon="caret-left" size="lg"></FontAwesomeIcon>
                     </button>
-                    <button className="submitUrl" onClick={this.forward}>
+                    <button className="submitUrl" onClick={this.webUrlForward}>
                         <FontAwesomeIcon icon="caret-right" size="lg"></FontAwesomeIcon>
                     </button>
                 </div>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5ce8fcdcb..099433168 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -44,6 +44,13 @@ import React = require("react");
 export type DocAfterFocusFunc = (notFocused: boolean) => boolean;
 export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void;
 export type StyleProviderFunc = (doc: Opt<Doc>, props: Opt<DocumentViewProps | FieldViewProps>, property: string) => any;
+export interface DocComponentView {
+    getAnchor: () => Doc;
+    back?: () => boolean;
+    forward?: () => boolean;
+    url?: () => string;
+    submitURL?: (url: string) => boolean;
+}
 export interface DocumentViewSharedProps {
     renderDepth: number;
     Document: Doc;
@@ -51,7 +58,7 @@ export interface DocumentViewSharedProps {
     fitContentsToDoc?: boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document
     ContainingCollectionView: Opt<CollectionView>;
     ContainingCollectionDoc: Opt<Doc>;
-    setContentView?: (view: { getAnchor: () => Doc }) => any;
+    setContentView?: (view: DocComponentView) => any;
     CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
     PanelWidth: () => number;
     PanelHeight: () => number;
@@ -122,6 +129,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     private _timeout: NodeJS.Timeout | undefined;
     private _dropDisposer?: DragManager.DragDropDisposer;
     private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
+    _componentView: Opt<DocComponentView>;
     protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
     private get topMost() { return this.props.renderDepth === 0; }
@@ -701,10 +709,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     contentScaling = () => this.ContentScale;
     onClickFunc = () => this.onClickHandler;
     makeLink = () => this.props.DocumentView.LinkBeingCreated; // pass the link placeholde to child views so they can react to make a specialized anchor.  This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined.
-    setContentView = (view: { getAnchor: () => Doc }) => this._componentView = view;
+    setContentView = (view: { getAnchor: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view;
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
-    _componentView: { getAnchor: () => Doc } | undefined;
     @computed get contents() {
         TraceMobx();
         return <div className="documentView-contentsView"
@@ -864,6 +871,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     get dataDoc() { return this.docView?.dataDoc || this.Document; }
     get finalLayoutKey() { return this.docView?.finalLayoutKey || "layout"; }
     get ContentDiv() { return this.docView?.ContentDiv; }
+    get ComponentView() { return this.docView?._componentView; }
     get allLinks() { return this.docView?.allLinks || []; }
     get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; }
 
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 4b7f0bf77..438395ab0 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -25,7 +25,6 @@ import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
 import { DocumentDecorations } from "../DocumentDecorations";
 import { Annotation } from "../pdf/Annotation";
-import { AnchorMenu } from "../pdf/AnchorMenu";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./WebBox.scss";
 import React = require("react");
@@ -57,6 +56,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; }
     set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; }
     get webpage() { return this._iframe?.contentDocument?.children[0]; }
+    url = () => this._url;
 
     constructor(props: any) {
         super(props);
@@ -76,8 +76,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                     href = (typeof (ele.href) === "string" ? ele.href : ele.href?.baseVal) || ele.parentElement?.href || href;
                 }
                 if (href) {
-                    this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin);
-                    this.submitURL();
+                    this.submitURL(href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin));
                 }
             })));
             iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false);
@@ -149,7 +148,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             }));
         }
     }
+
+    getAnchor = () => this.rootDoc;
+
+
     async componentDidMount() {
+        this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
+
         const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField);
         runInAction(() => this._url = urlField?.url.toString() || "");
 
@@ -194,21 +199,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         this._iframe?.removeEventListener('wheel', this.iframeWheel);
     }
 
-    onUrlDragover = (e: React.DragEvent) => { e.preventDefault(); };
-
-    @undoBatch
-    @action
-    onUrlDrop = (e: React.DragEvent) => {
-        const { dataTransfer } = e;
-        const html = dataTransfer.getData("text/html");
-        const uri = dataTransfer.getData("text/uri-list");
-        const url = uri || html || this._url;
-        this._url = url.startsWith(window.location.origin) ?
-            url.replace(window.location.origin, this._url.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url;
-        this.submitURL();
-        e.stopPropagation();
-    }
-
     @action
     forward = () => {
         const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
@@ -218,7 +208,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey]));
             this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = future.pop()!));
             this.dataDoc[this.annotationKey] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)]));
+            return true;
         }
+        return false;
     }
 
     @action
@@ -231,7 +223,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey]));
             this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = history.pop()!));
             this.dataDoc[this.annotationKey] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)]));
+            return true;
         }
+        return false;
     }
 
     urlHash(s: string) {
@@ -239,10 +233,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     }
 
     @action
-    submitURL = () => {
-        if (!this._url.startsWith("http")) this._url = "http://" + this._url;
+    submitURL = (newUrl: string) => {
+        if (!newUrl.startsWith("http")) newUrl = "http://" + newUrl;
         try {
-            const URLy = new URL(this._url);
             const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
             const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null);
             const annos = DocListCast(this.dataDoc[this.annotationKey]);
@@ -250,25 +243,21 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             if (url) {
                 if (history === undefined) {
                     this.dataDoc[this.fieldKey + "-history"] = new List<string>([url]);
-
                 } else {
                     history.push(url);
                 }
+                this.layoutDoc._scrollTop = 0;
                 future && (future.length = 0);
                 this.dataDoc[this.annotationKey + "-" + this.urlHash(url)] = new List<Doc>(annos);
             }
-            this.dataDoc[this.fieldKey] = new WebField(URLy);
+            this._url = newUrl;
+            this.dataDoc[this.fieldKey] = new WebField(new URL(newUrl));
             this.dataDoc[this.annotationKey] = new List<Doc>([]);
         } catch (e) {
             console.log("WebBox URL error:" + this._url);
         }
     }
 
-    onValueKeyDown = async (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") this.submitURL();
-        e.stopPropagation();
-    }
-
     editToggleBtn() {
         return <Tooltip title={<div className="dash-tooltip" >{`${this.props.Document.isAnnotating ? "Exit" : "Enter"} annotation mode`}</div>}>
             <div className="webBox-annotationToggle"