fixed up editable textview title widths and clicking to set cursor insertion point.

5 files changed, 16 insertions, 34 deletions

diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index 4a89cc69c..e912bc85a 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -23,4 +23,5 @@
 .editableView-input {
     width: 100%;
     background: inherit;
+    pointer-events: all;
 }
\ No newline at end of file
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index e2f171f9d..03d9efff3 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -173,7 +173,7 @@ export class EditableView extends React.Component<EditableProps> {
                 }}
             />
             : <input className="editableView-input" ref={this._inputref}
-                style={{ display: this.props.display, fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
+                style={{ display: this.props.display, overflow: "auto", fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
                 placeholder={this.props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this.props.GetValue()}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 9de20ef10..73ce60aa1 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -88,7 +88,6 @@ export class TreeView extends React.Component<TreeViewProps> {
     private _treedropDisposer?: DragManager.DragDropDisposer;
     private _tref = React.createRef<HTMLDivElement>();
     private _docRef: Opt<DocumentView>;
-    private _editMaxWidth: number | string = 0;
     private _selDisposer: Opt<IReactionDisposer>;
 
     set treeViewOpen(c: boolean) {
@@ -535,7 +534,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             }
         }
     }
-    titleWidth = () => Math.max(60, Math.min(this.props.treeView.truncateTitleWidth(), this.props.panelWidth() - treeBulletWidth()))
+    titleWidth = () => Math.max(20, Math.min(this.props.treeView.truncateTitleWidth(), this.props.panelWidth() - treeBulletWidth()))
 
     /**
      * Renders the EditableView title element for placement into the tree.
@@ -627,11 +626,10 @@ export class TreeView extends React.Component<TreeViewProps> {
         </>;
     }
 
-    renderBulletHeader = (contents: JSX.Element) => {
+    renderBulletHeader = (contents: JSX.Element, editing: boolean) => {
         return <>
-            <div className={`treeView-header` + (this._editMaxWidth ? "-editing" : "")} key="titleheader"
+            <div className={`treeView-header` + (editing ? "-editing" : "")} key="titleheader"
                 ref={this._header}
-                style={{ maxWidth: this._editMaxWidth }}
                 onClick={this.ignoreEvent}
                 onPointerDown={this.ignoreEvent}
                 onPointerEnter={this.onPointerEnter}
@@ -708,29 +706,18 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     render() {
         TraceMobx();
-        if (this.props.renderedIds.indexOf(this.doc[Id]) !== -1) return "<" + this.doc.title + ">";
-        if (this._editTitle) { // find containing CollectionTreeView and set our maximum width so the containing tree view won't have to scroll
-            let par: any = this._header?.current;
-            while (par && par.className !== "collectionTreeView-dropTarget") par = par.parentNode;
-            if (par) {
-                const par_rect = (par as HTMLElement).getBoundingClientRect();
-                const my_recct = this._docRef?.ContentDiv?.getBoundingClientRect();
-                this._editMaxWidth = Math.max(100, par_rect.right - (my_recct?.left || 0));
-            }
-        }
-        else this._editMaxWidth = "";
-
         const hideTitle = this.doc.treeViewHideHeader || this.props.treeView.outlineMode;
-        return <div className={`treeView-container${this._dref?.contentsActive() ? "-active" : ""}`}
-            ref={this.createTreeDropTarget}
-            onPointerDown={e => this.props.isContentActive(true) && SelectionManager.DeselectAll()}
-            onKeyDown={this.onKeyDown}>
-            <li className="collection-child">
-                {hideTitle && this.doc.type !== DocumentType.RTF ?
-                    this.renderEmbeddedDocument(false) :
-                    this.renderBulletHeader(hideTitle ? this.renderDocumentAsHeader : this.renderTitleAsHeader)}
-            </li>
-        </div>;
+        return this.props.renderedIds.indexOf(this.doc[Id]) !== -1 ? "<" + this.doc.title + ">" : // just print the title of documents we've previously rendered in this hierarchical path to avoid cycles
+            <div className={`treeView-container${this.props.isContentActive() ? "-active" : ""}`}
+                ref={this.createTreeDropTarget}
+                onPointerDown={e => this.props.isContentActive(true) && SelectionManager.DeselectAll()}
+                onKeyDown={this.onKeyDown}>
+                <li className="collection-child">
+                    {hideTitle && this.doc.type !== DocumentType.RTF ?
+                        this.renderEmbeddedDocument(false) :
+                        this.renderBulletHeader(hideTitle ? this.renderDocumentAsHeader : this.renderTitleAsHeader, this._editTitle)}
+                </li>
+            </div>;
     }
 
     public static sortDocs(childDocs: Doc[], criterion: string | undefined) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b5c61fba2..ccf8831a4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -106,7 +106,6 @@ export interface DocumentViewSharedProps {
     docFilters: () => string[];
     docRangeFilters: () => string[];
     searchFilterDocs: () => Doc[];
-    contentsActive?: (setActive: () => boolean) => void;
     whenChildContentsActiveChanged: (isActive: boolean) => void;
     rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
     addDocTab: (doc: Doc, where: string) => boolean;
@@ -761,8 +760,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     onClickFunc = () => this.onClickHandler;
     setHeight = (height: number) => this.layoutDoc._height = height;
     setContentView = (view: { getAnchor?: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view;
-    @observable contentsActive: () => boolean = returnFalse;
-    @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
     isContentActive = (outsideReaction?: boolean) => this.props.isContentActive() ? true : false;
     @computed get contents() {
         TraceMobx();
@@ -788,7 +785,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 PanelHeight={this.panelHeight}
                 setHeight={this.setHeight}
                 isContentActive={this.isContentActive}
-                contentsActive={this.setContentsActive}
                 ScreenToLocalTransform={this.screenToLocal}
                 rootSelected={this.rootSelected}
                 onClick={this.onClickFunc}
@@ -1033,7 +1029,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed get centeringY() { return this.fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
 
     toggleNativeDimensions = () => this.docView && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.ContentScale, this.props.PanelWidth(), this.props.PanelHeight());
-    contentsActive = () => this.docView?.contentsActive();
     focus = (doc: Doc, options?: DocFocusOptions) => this.docView?.focus(doc, options);
     getBounds = () => {
         if (!this.docView || !this.docView.ContentDiv || this.docView.props.renderDepth === 0 || this.docView.props.treeViewDoc || Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 89aa687cb..e8dc4bbae 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -782,7 +782,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
     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.
-        this.props.contentsActive?.(this.isContentActive);
         this._cachedLinks = DocListCast(this.Document.links);
         this._disposers.breakupDictation = reaction(() => DocumentManager.Instance.RecordingEvent, this.breakupDictation);
         this._disposers.autoHeight = reaction(() => this.autoHeight, autoHeight => autoHeight && this.tryUpdateScrollHeight());