fixed text selection in docHolder boxes by changing formattedTextBox not to stopPropagation on pointerDowns. added a googleDoc field on documents to open the same Dash-googleDoc doc each time.

6 files changed, 89 insertions, 77 deletions

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 7ba47deb5..db566ee48 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -5,7 +5,7 @@ import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../new_fields/Doc";
 import { RichTextField } from '../../new_fields/RichTextField';
-import { NumCast, StrCast } from "../../new_fields/Types";
+import { NumCast, StrCast, Cast } from "../../new_fields/Types";
 import { emptyFunction, setupMoveUpEvents } from "../../Utils";
 import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
 import { UndoManager } from "../util/UndoManager";
@@ -170,11 +170,16 @@ export class DocumentButtonBar extends React.Component<{ views: (DocumentView |
             style={{ backgroundColor: this.pullColor }}
             onPointerEnter={e => (e.altKey || e.shiftKey) && runInAction(() => this.openHover = true)}
             onPointerLeave={action(() => this.openHover = false)}
-            onClick={e => {
+            onClick={async (e: React.MouseEvent) => {
                 if (e.shiftKey) {
                     e.preventDefault();
-                    CollectionDockingView.AddRightSplit(Docs.Create.WebDocument(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`,
-                        { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false }));
+                    let googleDoc = await Cast(dataDoc.googleDoc, Doc);
+                    if (!googleDoc) {
+                        googleDoc = Docs.Create.WebDocument(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`,
+                            { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false });
+                        dataDoc.googleDoc = googleDoc;
+                    }
+                    CollectionDockingView.AddRightSplit(googleDoc);
                 } else if (e.altKey) {
                     e.preventDefault();
                     window.open(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`);
diff --git a/src/client/views/nodes/DocHolderBox.scss b/src/client/views/nodes/DocHolderBox.scss
index 3a27c16c1..4949d16a3 100644
--- a/src/client/views/nodes/DocHolderBox.scss
+++ b/src/client/views/nodes/DocHolderBox.scss
@@ -8,6 +8,7 @@
         margin: auto;
         color: white;
         position: absolute;
+        padding: 3px;
     }
     .contentFittingDocumentView {
         position: absolute;
diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx
index 9787877cc..17b2daabc 100644
--- a/src/client/views/nodes/DocHolderBox.tsx
+++ b/src/client/views/nodes/DocHolderBox.tsx
@@ -3,7 +3,7 @@ import { action, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, Field } from "../../../new_fields/Doc";
 import { collectionSchema, documentSchema } from "../../../new_fields/documentSchemas";
-import { makeInterface } from "../../../new_fields/Schema";
+import { makeInterface, listSpec } from "../../../new_fields/Schema";
 import { ComputedField } from "../../../new_fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
 import { TraceMobx } from "../../../new_fields/util";
@@ -32,7 +32,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
     _contRef = React.createRef<HTMLDivElement>();
     _curSelection = -1;
     componentDidMount() {
-        this._prevSelectionDisposer = reaction(() => this.layoutDoc[this.props.fieldKey], (data) => {
+        this._prevSelectionDisposer = reaction(() => this.dataDoc[this.fieldKey], (data) => {
             if (data instanceof Doc && !this.isSelectionLocked()) {
                 this._selections.indexOf(data) !== -1 && this._selections.splice(this._selections.indexOf(data), 1);
                 this._selections.push(data);
@@ -53,13 +53,13 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
         ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
     }
     lockSelection = () => {
-        this.layoutDoc[this.props.fieldKey] = this.layoutDoc[this.props.fieldKey];
+        this.dataDoc[this.fieldKey] = this.dataDoc[this.fieldKey];
     }
     showSelection = () => {
-        this.layoutDoc[this.props.fieldKey] = ComputedField.MakeFunction(`selectedDocs(self,this.excludeCollections,[_last_])?.[0]`);
+        this.dataDoc[this.fieldKey] = ComputedField.MakeFunction(`selectedDocs(self,this.excludeCollections,[_last_])?.[0]`);
     }
     isSelectionLocked = () => {
-        const kvpstring = Field.toKeyValueString(this.layoutDoc, this.props.fieldKey);
+        const kvpstring = Field.toKeyValueString(this.dataDoc, this.fieldKey);
         return !kvpstring || kvpstring.includes("DOC");
     }
     toggleLockSelection = () => {
@@ -69,13 +69,13 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
     prevSelection = () => {
         this.lockSelection();
         if (this._curSelection > 0) {
-            this.layoutDoc[this.props.fieldKey] = this._selections[--this._curSelection];
+            this.dataDoc[this.fieldKey] = this._selections[--this._curSelection];
             return true;
         }
     }
     nextSelection = () => {
         if (this._curSelection < this._selections.length - 1 && this._selections.length) {
-            this.layoutDoc[this.props.fieldKey] = this._selections[++this._curSelection];
+            this.dataDoc[this.fieldKey] = this._selections[++this._curSelection];
             return true;
         }
     }
@@ -89,8 +89,8 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
         (e.nativeEvent as any).formattedHandled = true;
         e.stopPropagation();
     }
-    get xPad() { return NumCast(this.props.Document._xPadding); }
-    get yPad() { return NumCast(this.props.Document._yPadding); }
+    get xPad() { return NumCast(this.rootDoc._xPadding); }
+    get yPad() { return NumCast(this.rootDoc._yPadding); }
     onClick = (e: React.MouseEvent) => {
         let hitWidget: boolean | undefined = false;
         if (this._contRef.current!.getBoundingClientRect().top + this.yPad > e.clientY) hitWidget = (() => { this.props.select(false); return true; })();
@@ -107,67 +107,70 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
     pwidth = () => this.props.PanelWidth() - 2 * this.xPad;
     pheight = () => this.props.PanelHeight() - 2 * this.yPad;
     getTransform = () => this.props.ScreenToLocalTransform().translate(-this.xPad, -this.yPad);
-    isActive = () => this.active() || !this.props.renderDepth;
-    layoutTemplateDoc = () => Cast(this.props.Document.childLayoutTemplate, Doc, null);
+    isActive = (outsideReaction: boolean) => this.active(outsideReaction) || this.props.renderDepth <= 1;
+    layoutTemplateDoc = () => Cast(this.layoutDoc.childLayoutTemplate, Doc, null);
     get renderContents() {
-        const containedDoc = Cast(this.dataDoc[this.props.fieldKey], Doc, null);
+        const containedDoc = Cast(this.dataDoc[this.fieldKey], Doc, null);
         const layoutTemplate = StrCast(this.layoutDoc.childLayoutString);
-        const contents = !(containedDoc instanceof Doc) ? (null) : this.layoutDoc.childLayoutString || this.layoutTemplateDoc() ?
-            <DocumentView
-                Document={containedDoc}
-                DataDoc={undefined}
-                LibraryPath={emptyPath}
-                ContainingCollectionView={this as any} // bcz: hack!  need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked.  currently, the up selector allows only a containing collection to be selected
-                ContainingCollectionDoc={undefined}
-                fitToBox={true}
-                LayoutTemplateString={layoutTemplate}
-                LayoutTemplate={this.layoutTemplateDoc}
-                rootSelected={this.props.isSelected}
-                addDocument={this.props.addDocument}
-                moveDocument={this.props.moveDocument}
-                removeDocument={this.props.removeDocument}
-                addDocTab={this.props.addDocTab}
-                pinToPres={this.props.pinToPres}
-                ScreenToLocalTransform={this.getTransform}
-                renderDepth={this.props.renderDepth + 1}
-                NativeHeight={returnZero}
-                NativeWidth={returnZero}
-                PanelWidth={this.pwidth}
-                PanelHeight={this.pheight}
-                focus={this.props.focus}
-                parentActive={this.isActive}
-                dontRegisterView={true}
-                whenActiveChanged={this.props.whenActiveChanged}
-                bringToFront={returnFalse}
-                ContentScaling={returnOne} /> :
-            <ContentFittingDocumentView
-                Document={containedDoc}
-                DataDoc={undefined}
-                LibraryPath={emptyPath}
-                ContainingCollectionView={this as any} // bcz: hack!  need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked.  currently, the up selector allows only a containing collection to be selected
-                ContainingCollectionDoc={undefined}
-                fitToBox={true}
-                LayoutTemplateString={layoutTemplate}
-                LayoutTemplate={this.layoutTemplateDoc}
-                rootSelected={this.props.isSelected}
-                addDocument={this.props.addDocument}
-                moveDocument={this.props.moveDocument}
-                removeDocument={this.props.removeDocument}
-                addDocTab={this.props.addDocTab}
-                pinToPres={this.props.pinToPres}
-                ScreenToLocalTransform={this.getTransform}
-                renderDepth={this.props.renderDepth + 1}
-                NativeHeight={returnZero}
-                NativeWidth={returnZero}
-                PanelWidth={this.pwidth}
-                PanelHeight={this.pheight}
-                focus={this.props.focus}
-                parentActive={this.isActive}
-                dontRegisterView={true}
-                whenActiveChanged={this.props.whenActiveChanged}
-                bringToFront={returnFalse}
-                ContentScaling={returnOne}
-            />;
+        const contents = !(containedDoc instanceof Doc) ||
+            Cast(containedDoc[Doc.LayoutFieldKey(containedDoc)], listSpec(Doc), null)?.includes(this.rootDoc)
+            ? (null) : this.layoutDoc.childLayoutString || this.layoutTemplateDoc() ?
+                <DocumentView
+                    Document={containedDoc}
+                    DataDoc={undefined}
+                    LibraryPath={emptyPath}
+                    ContainingCollectionView={this as any} // bcz: hack!  need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked.  currently, the up selector allows only a containing collection to be selected
+                    ContainingCollectionDoc={undefined}
+                    fitToBox={true}
+                    LayoutTemplateString={layoutTemplate}
+                    LayoutTemplate={this.layoutTemplateDoc}
+                    rootSelected={this.props.isSelected}
+                    addDocument={this.props.addDocument}
+                    moveDocument={this.props.moveDocument}
+                    removeDocument={this.props.removeDocument}
+                    addDocTab={this.props.addDocTab}
+                    pinToPres={this.props.pinToPres}
+                    ScreenToLocalTransform={this.getTransform}
+                    renderDepth={containedDoc.type !== DocumentType.DOCHOLDER && !this.props.renderDepth ? 0 : this.props.renderDepth + 1}
+                    NativeHeight={returnZero}
+                    NativeWidth={returnZero}
+                    PanelWidth={this.pwidth}
+                    PanelHeight={this.pheight}
+                    focus={this.props.focus}
+                    parentActive={this.isActive}
+                    dontRegisterView={true}
+                    whenActiveChanged={this.props.whenActiveChanged}
+                    bringToFront={returnFalse}
+                    ContentScaling={returnOne} /> :
+                <ContentFittingDocumentView
+                    Document={containedDoc}
+                    DataDoc={undefined}
+                    LibraryPath={emptyPath}
+                    ContainingCollectionView={this as any} // bcz: hack!  need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked.  currently, the up selector allows only a containing collection to be selected
+                    ContainingCollectionDoc={undefined}
+                    fitToBox={true}
+                    ignoreAutoHeight={true}
+                    LayoutTemplateString={layoutTemplate}
+                    LayoutTemplate={this.layoutTemplateDoc}
+                    rootSelected={this.props.isSelected}
+                    addDocument={this.props.addDocument}
+                    moveDocument={this.props.moveDocument}
+                    removeDocument={this.props.removeDocument}
+                    addDocTab={this.props.addDocTab}
+                    pinToPres={this.props.pinToPres}
+                    ScreenToLocalTransform={this.getTransform}
+                    renderDepth={containedDoc.type !== DocumentType.DOCHOLDER && !this.props.renderDepth ? 0 : this.props.renderDepth + 1}
+                    NativeHeight={returnZero}
+                    NativeWidth={returnZero}
+                    PanelWidth={this.pwidth}
+                    PanelHeight={this.pheight}
+                    focus={this.props.focus}
+                    parentActive={this.isActive}
+                    dontRegisterView={true}
+                    whenActiveChanged={this.props.whenActiveChanged}
+                    bringToFront={returnFalse}
+                    ContentScaling={returnOne}
+                />;
         return contents;
     }
     render() {
@@ -183,7 +186,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
             }}>
             {this.renderContents}
             <div className="documentBox-lock" onClick={this.onLockClick} ref={this.createDropTarget}
-                style={{ marginTop: - this.yPad }}>
+                style={{ marginTop: - this.yPad, background: "black" }}>
                 <FontAwesomeIcon icon={this.isSelectionLocked() ? "lock" : "unlock"} size="sm" />
             </div>
         </div >;
@@ -195,13 +198,13 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
         if (de.complete.docDragData) {
             if (de.complete.docDragData.draggedDocuments[0].type === DocumentType.FONTICON) {
                 const doc = Cast(de.complete.docDragData.draggedDocuments[0].dragFactory, Doc, null);
-                this.props.Document.childLayoutTemplate = doc;
+                this.layoutDoc.childLayoutTemplate = doc;
             }
         }
     }
     protected createDropTarget = (ele: HTMLDivElement) => {
         this._dropDisposer?.();
-        ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document));
+        ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.rootDoc));
     }
 
 }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5a2ad8c88..2d5d7d231 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -63,6 +63,7 @@ export interface DocumentViewProps {
     LayoutTemplate?: () => Opt<Doc>;
     LibraryPath: Doc[];
     fitToBox?: boolean;
+    ignoreAutoHeight?: boolean;
     contextMenuItems?: () => { script: ScriptField, label: string }[];
     rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
     onClick?: ScriptField;
@@ -1009,6 +1010,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 renderDepth={this.props.renderDepth}
                 PanelWidth={this.panelWidth}
                 PanelHeight={this.panelHeight}
+                ignoreAutoHeight={this.props.ignoreAutoHeight}
                 focus={this.props.focus}
                 parentActive={this.props.parentActive}
                 whenActiveChanged={this.props.whenActiveChanged}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 016d2a1ae..7db634e74 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -43,6 +43,7 @@ export interface FieldViewProps {
     whenActiveChanged: (isActive: boolean) => void;
     dontRegisterView?: boolean;
     focus: (doc: Doc) => void;
+    ignoreAutoHeight?: boolean;
     PanelWidth: () => number;
     PanelHeight: () => number;
     NativeHeight: () => number;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index ce096f81b..5dc22d6f6 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -985,7 +985,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         }
         if (e.button === 0 && this.active(true) && !e.altKey && !e.ctrlKey && !e.metaKey) {
             if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // don't stop propagation if clicking in the sidebar
-                e.stopPropagation();
+                //e.stopPropagation();
             }
         }
         if (e.button === 2 || (e.button === 0 && e.ctrlKey)) {
@@ -1217,7 +1217,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     @action
     tryUpdateHeight(limitHeight?: number) {
         let scrollHeight = this._ref.current?.scrollHeight;
-        if (this.layoutDoc._autoHeight && scrollHeight &&
+        if (this.layoutDoc._autoHeight && !this.props.ignoreAutoHeight && scrollHeight &&
             getComputedStyle(this._ref.current!.parentElement!).top === "0px") {  // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation
             if (limitHeight && scrollHeight > limitHeight) {
                 scrollHeight = limitHeight;