Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 283 insertions, 284 deletions

diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 004857ed1..a7705ea7e 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -1,8 +1,10 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconButton, Size } from 'browndash-components';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Utils, emptyFunction, lightOrDark, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick } from '../../../Utils';
 import { Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
@@ -12,31 +14,29 @@ import { listSpec } from '../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, lightOrDark, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils';
-import { Docs, DocUtils } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
+import { DocUtils, Docs } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../util/DragManager';
 import { LinkManager } from '../../util/LinkManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
-import { SelectionManager } from '../../util/SelectionManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
-import { undoable, undoBatch, UndoManager } from '../../util/UndoManager';
+import { UndoManager, undoBatch, undoable } from '../../util/UndoManager';
 import { EditableView } from '../EditableView';
-import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss';
+import { ObservableReactComponent } from '../ObservableReactComponent';
+import { StyleProp } from '../StyleProvider';
 import { DocumentView, DocumentViewInternal, DocumentViewProps, OpenWhere, StyleProviderFunc } from '../nodes/DocumentView';
 import { FieldViewProps } from '../nodes/FieldView';
+import { KeyValueBox } from '../nodes/KeyValueBox';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
-import { KeyValueBox } from '../nodes/KeyValueBox';
-import { StyleProp } from '../StyleProvider';
 import { CollectionTreeView, TreeViewType } from './CollectionTreeView';
 import { CollectionView } from './CollectionView';
 import { TreeSort } from './TreeSort';
 import './TreeView.scss';
-import React = require('react');
+const { default: { TREE_BULLET_WIDTH } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export interface TreeViewProps {
     treeView: CollectionTreeView;
@@ -44,7 +44,7 @@ export interface TreeViewProps {
     observeHeight: (ref: any) => void;
     unobserveHeight: (ref: any) => void;
     prevSibling?: Doc;
-    document: Doc;
+    Document: Doc;
     dataDoc?: Doc;
     treeViewParent: Doc;
     renderDepth: number;
@@ -87,7 +87,7 @@ const treeBulletWidth = function () {
  * treeView_ExpandedView : name of field whose contents are being displayed as the document's subtree
  */
 @observer
-export class TreeView extends React.Component<TreeViewProps> {
+export class TreeView extends ObservableReactComponent<TreeViewProps> {
     static _editTitleOnLoad: Opt<{ id: string; parent: TreeView | CollectionTreeView | undefined }>;
     static _openTitleScript: Opt<ScriptField | undefined>;
     static _openLevelScript: Opt<ScriptField | undefined>;
@@ -100,57 +100,61 @@ export class TreeView extends React.Component<TreeViewProps> {
     private _treedropDisposer?: DragManager.DragDropDisposer;
 
     get treeViewOpenIsTransient() {
-        return this.props.treeView.doc.treeView_OpenIsTransient || Doc.IsDataProto(this.doc);
+        return this.treeView.Document.treeView_OpenIsTransient || Doc.IsDataProto(this.Document);
     }
     set treeViewOpen(c: boolean) {
         if (this.treeViewOpenIsTransient) this._transientOpenState = c;
         else {
-            this.doc.treeView_Open = c;
+            this.Document.treeView_Open = c;
             this._transientOpenState = false;
         }
     }
     @observable _transientOpenState = false; // override of the treeView_Open field allowing the display state to be independent of the document's state
     @observable _editTitle: boolean = false;
-    @observable _dref: DocumentView | undefined | null;
+    @observable _dref: DocumentView | undefined | null = undefined;
     get displayName() {
-        return 'TreeView(' + this.props.document.title + ')';
+        return 'TreeView(' + this.Document.title + ')';
     } // this makes mobx trace() statements more descriptive
     get defaultExpandedView() {
-        return this.doc._type_collection === CollectionViewType.Docking
-            ? this.fieldKey
-            : this.props.treeView.dashboardMode
+        return this.Document._type_collection === CollectionViewType.Docking
             ? this.fieldKey
-            : this.props.treeView.fileSysMode
-            ? this.doc.isFolder
-                ? this.fieldKey
-                : 'data' // file system folders display their contents (data).  used to be they displayed their embeddings but now its a tree structure and not a flat list
-            : this.props.treeView.outlineMode || this.childDocs
-            ? this.fieldKey
-            : Doc.noviceMode
-            ? 'layout'
-            : StrCast(this.props.treeView.doc.treeView_ExpandedView, 'fields');
+            : this.treeView.dashboardMode
+              ? this.fieldKey
+              : this.treeView.fileSysMode
+                ? this.Document.isFolder
+                    ? this.fieldKey
+                    : 'data' // file system folders display their contents (data).  used to be they displayed their embeddings but now its a tree structure and not a flat list
+                : this.treeView.outlineMode || this.childDocs
+                  ? this.fieldKey
+                  : Doc.noviceMode
+                    ? 'layout'
+                    : StrCast(this.treeView.Document.treeView_ExpandedView, 'fields');
+    }
+
+    @computed get treeView() {
+        return this._props.treeView;
     }
 
-    @computed get doc() {
-        return this.props.document;
+    @computed get Document() {
+        return this._props.Document;
     }
     @computed get treeViewOpen() {
-        return (!this.treeViewOpenIsTransient && Doc.GetT(this.doc, 'treeView_Open', 'boolean', true)) || this._transientOpenState;
+        return (!this.treeViewOpenIsTransient && Doc.GetT(this.Document, 'treeView_Open', 'boolean', true)) || this._transientOpenState;
     }
     @computed get treeViewExpandedView() {
-        return this.validExpandViewTypes.includes(StrCast(this.doc.treeView_ExpandedView)) ? StrCast(this.doc.treeView_ExpandedView) : this.defaultExpandedView;
+        return this.validExpandViewTypes.includes(StrCast(this.Document.treeView_ExpandedView)) ? StrCast(this.Document.treeView_ExpandedView) : this.defaultExpandedView;
     }
     @computed get MAX_EMBED_HEIGHT() {
-        return NumCast(this.props.treeViewParent.maxEmbedHeight, 200);
+        return NumCast(this._props.treeViewParent.maxEmbedHeight, 200);
     }
     @computed get dataDoc() {
-        return this.props.document.treeView_ChildrenOnRoot ? this.doc : this.doc[DocData];
+        return this.Document[DocData];
     }
     @computed get layoutDoc() {
-        return Doc.Layout(this.doc);
+        return Doc.Layout(this.Document);
     }
     @computed get fieldKey() {
-        return StrCast(this.doc._treeView_FieldKey, Doc.LayoutFieldKey(this.doc));
+        return StrCast(this.Document._treeView_FieldKey, Doc.LayoutFieldKey(this.Document));
     }
     @computed get childDocs() {
         return this.childDocList(this.fieldKey);
@@ -169,30 +173,30 @@ export class TreeView extends React.Component<TreeViewProps> {
     }
 
     childDocList(field: string) {
-        const layout = Cast(Doc.LayoutField(this.doc), Doc, null);
-        return DocListCast(this.props.dataDoc?.[field], DocListCast(layout?.[field], DocListCast(this.doc[field])));
+        const layout = Cast(Doc.LayoutField(this.Document), Doc, null);
+        return DocListCast(this._props.dataDoc?.[field], DocListCast(layout?.[field], DocListCast(this.Document[field])));
     }
     moving: boolean = false;
     @undoBatch move = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => {
-        if (this.doc !== target && addDoc !== returnFalse) {
-            const canAdd1 = (this.props.parentTreeView as any).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this.props.parentTreeView?.doc.data)) instanceof ComputedField);
+        if (this.Document !== target && addDoc !== returnFalse) {
+            const canAdd1 = (this._props.parentTreeView as any).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this._props.parentTreeView?.Document.data)) instanceof ComputedField);
 
             // bcz: this should all be running in a Temp undo batch instead of hackily testing for returnFalse
-            if (canAdd1 && this.props.removeDoc?.(doc) === true) {
-                this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.moving = true);
+            if (canAdd1 && this._props.removeDoc?.(doc) === true) {
+                this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.moving = true);
                 const res = addDoc(doc);
-                this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.moving = false);
+                this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.moving = false);
                 return res;
             }
         }
         return false;
     };
-    @undoBatch @action remove = (doc: Doc | Doc[], key: string) => {
-        this.props.treeView.props.select(false);
+    @undoBatch remove = (doc: Doc | Doc[], key: string) => {
+        this.treeView._props.select(false);
         const ind = DocListCast(this.dataDoc[key]).indexOf(doc instanceof Doc ? doc : doc.lastElement());
 
         const res = (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && Doc.RemoveDocFromList(this.dataDoc, key, doc), true);
-        res && ind > 0 && DocumentManager.Instance.getDocumentView(DocListCast(this.dataDoc[key])[ind - 1], this.props.treeView.props.DocumentView?.())?.select(false);
+        res && ind > 0 && DocumentManager.Instance.getDocumentView(DocListCast(this.dataDoc[key])[ind - 1], this.treeView._props.DocumentView?.())?.select(false);
         return res;
     };
 
@@ -200,10 +204,10 @@ export class TreeView extends React.Component<TreeViewProps> {
         this._disposers.selection?.();
         if (!docView) {
             this._editTitle = false;
-        } else if (docView.isSelected()) {
+        } else if (docView.SELECTED) {
             this._editTitle = true;
             this._disposers.selection = reaction(
-                () => docView.isSelected(),
+                () => docView.SELECTED,
                 isSel => !isSel && this.setEditTitle(undefined)
             );
         } else {
@@ -212,17 +216,16 @@ export class TreeView extends React.Component<TreeViewProps> {
     };
     @action
     openLevel = (docView: DocumentView) => {
-        if (this.props.document.isFolder || Doc.IsSystem(this.props.document)) {
+        if (this.Document.isFolder || Doc.IsSystem(this.Document)) {
             this.treeViewOpen = !this.treeViewOpen;
         } else {
             // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns,  (2) has no context field ... otherwise make a new embedding
-            const bestEmbedding = docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document) ? docView.rootDoc : Doc.BestEmbedding(docView.rootDoc);
-            this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
+            const bestEmbedding = docView.Document.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.Document) ? docView.Document : Doc.BestEmbedding(docView.Document);
+            this._props.addDocTab(bestEmbedding, OpenWhere.lightbox);
         }
     };
 
     @undoBatch
-    @action
     recurToggle = (childList: Doc[]) => {
         if (childList.length > 0) {
             childList.forEach(child => {
@@ -233,7 +236,6 @@ export class TreeView extends React.Component<TreeViewProps> {
     };
 
     @undoBatch
-    @action
     getRunningChildren = (childList: Doc[]) => {
         if (childList.length === 0) {
             return [];
@@ -253,23 +255,24 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     static GetRunningChildren = new Map<Doc, any>();
     static ToggleChildrenRun = new Map<Doc, () => void>();
-    constructor(props: any) {
+    constructor(props: TreeViewProps) {
         super(props);
+        makeObservable(this);
         if (!TreeView._openLevelScript) {
             TreeView._openTitleScript = ScriptField.MakeScript('scriptContext.setEditTitle(documentView)', { scriptContext: 'any', documentView: 'any' });
             TreeView._openLevelScript = ScriptField.MakeScript(`scriptContext.openLevel(documentView)`, { scriptContext: 'any', documentView: 'any' });
         }
-        this._openScript = Doc.IsSystem(this.props.document) ? undefined : () => TreeView._openLevelScript!;
-        this._editTitleScript = Doc.IsSystem(this.props.document) ? () => TreeView._openLevelScript! : () => TreeView._openTitleScript!;
+        this._openScript = Doc.IsSystem(this.Document) ? undefined : () => TreeView._openLevelScript!;
+        this._editTitleScript = Doc.IsSystem(this.Document) ? () => TreeView._openLevelScript! : () => TreeView._openTitleScript!;
 
         // set for child processing highligting
         this.dataDoc.hasChildren = this.childDocs.length > 0;
         // this.dataDoc.children = this.childDocs;
-        TreeView.ToggleChildrenRun.set(this.doc, () => {
+        TreeView.ToggleChildrenRun.set(this.Document, () => {
             this.recurToggle(this.childDocs);
         });
 
-        TreeView.GetRunningChildren.set(this.doc, () => {
+        TreeView.GetRunningChildren.set(this.Document, () => {
             return this.getRunningChildren(this.childDocs);
         });
     }
@@ -277,31 +280,32 @@ export class TreeView extends React.Component<TreeViewProps> {
     _treeEle: any;
     protected createTreeDropTarget = (ele: HTMLDivElement) => {
         this._treedropDisposer?.();
-        ele && ((this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this))), this.doc);
-        if (this._treeEle) this.props.unobserveHeight(this._treeEle);
-        this.props.observeHeight((this._treeEle = ele));
+        ele && ((this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this))), this.Document);
+        if (this._treeEle) this._props.unobserveHeight(this._treeEle);
+        this._props.observeHeight((this._treeEle = ele));
     };
 
     componentWillUnmount() {
         this._renderTimer && clearTimeout(this._renderTimer);
         Object.values(this._disposers).forEach(disposer => disposer?.());
-        this._treeEle && this.props.unobserveHeight(this._treeEle);
+        this._treeEle && this._props.unobserveHeight(this._treeEle);
         document.removeEventListener('pointermove', this.onDragMove, true);
         document.removeEventListener('pointermove', this.onDragUp, true);
         // TODO: [AL] add these
-        this.props.hierarchyIndex !== undefined && this.props.RemFromMap?.(this.doc, this.props.hierarchyIndex);
+        this._props.hierarchyIndex !== undefined && this._props.RemFromMap?.(this.Document, this._props.hierarchyIndex);
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: Readonly<TreeViewProps>) {
+        super.componentDidUpdate(prevProps);
         this._disposers.opening = reaction(
             () => this.treeViewOpen,
             open => !open && (this._renderCount = 20)
         );
-        this.props.hierarchyIndex !== undefined && this.props.AddToMap?.(this.doc, this.props.hierarchyIndex);
+        this._props.hierarchyIndex !== undefined && this._props.AddToMap?.(this.Document, this._props.hierarchyIndex);
     }
 
     componentDidMount() {
-        this.props.hierarchyIndex !== undefined && this.props.AddToMap?.(this.doc, this.props.hierarchyIndex);
+        this._props.hierarchyIndex !== undefined && this._props.AddToMap?.(this.Document, this._props.hierarchyIndex);
     }
 
     onDragUp = (e: PointerEvent) => {
@@ -309,8 +313,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         document.removeEventListener('pointermove', this.onDragMove, true);
     };
     onPointerEnter = (e: React.PointerEvent): void => {
-        this.props.isContentActive(true) && Doc.BrushDoc(this.dataDoc);
-        if (e.buttons === 1 && SnappingManager.GetIsDragging() && this.props.isContentActive()) {
+        this._props.isContentActive(true) && Doc.BrushDoc(this.dataDoc);
+        if (e.buttons === 1 && SnappingManager.IsDragging && this._props.isContentActive()) {
             this._header.current!.className = 'treeView-header';
             document.removeEventListener('pointermove', this.onDragMove, true);
             document.removeEventListener('pointerup', this.onDragUp, true);
@@ -333,7 +337,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         const before = pt[1] < rect.top + rect.height / 2;
         const inside = pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length);
         this._header.current!.className = 'treeView-header';
-        if (!this.props.treeView.outlineMode || DragManager.DocDragData?.treeViewDoc === this.props.treeView.rootDoc) {
+        if (!this.treeView.outlineMode || DragManager.DocDragData?.treeViewDoc === this.treeView.Document) {
             if (inside) this._header.current!.className += ' treeView-header-inside';
             else if (before) this._header.current!.className += ' treeView-header-above';
             else if (!before) this._header.current!.className += ' treeView-header-below';
@@ -361,7 +365,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             _width: 1000,
             _height: 10,
         });
-        Doc.GetProto(bullet).title = ComputedField.MakeFunction('self.text?.Text');
+        Doc.GetProto(bullet).title = ComputedField.MakeFunction('this.text?.Text');
         Doc.GetProto(bullet).data = new List<Doc>([]);
         DocumentManager.Instance.AddViewRenderedCb(bullet, dv => dv.ComponentView?.setFocus?.());
 
@@ -371,18 +375,18 @@ export class TreeView extends React.Component<TreeViewProps> {
     makeTextCollection = () => {
         const bullet = TreeView.makeTextBullet();
         TreeView._editTitleOnLoad = { id: bullet[Id], parent: this };
-        return this.props.addDocument(bullet);
+        return this._props.addDocument(bullet);
     };
 
     makeFolder = () => {
         const folder = Docs.Create.TreeDocument([], { title: 'Untitled folder', _dragOnlyWithinContainer: true, isFolder: true });
-        TreeView._editTitleOnLoad = { id: folder[Id], parent: this.props.parentTreeView };
-        return this.props.addDocument(folder);
+        TreeView._editTitleOnLoad = { id: folder[Id], parent: this._props.parentTreeView };
+        return this._props.addDocument(folder);
     };
 
     preTreeDrop = (e: Event, de: DragManager.DropEvent) => {
         const dragData = de.complete.docDragData;
-        dragData && (dragData.dropAction = this.props.treeView.props.Document === dragData.treeViewDoc ? 'same' : dragData.dropAction);
+        dragData && (dragData.dropAction = this.treeView.Document === dragData.treeViewDoc ? 'same' : dragData.dropAction);
     };
 
     @undoBatch
@@ -391,17 +395,17 @@ export class TreeView extends React.Component<TreeViewProps> {
         if (!this._header.current) return false;
         const rect = this._header.current.getBoundingClientRect();
         const before = pt[1] < rect.top + rect.height / 2;
-        const inside = this.props.treeView.fileSysMode && !this.doc.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false);
+        const inside = this.treeView.fileSysMode && !this.Document.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false);
         if (de.complete.linkDragData) {
             const sourceDoc = de.complete.linkDragData.linkSourceGetAnchor();
-            const destDoc = this.doc;
+            const destDoc = this.Document;
             DocUtils.MakeLink(sourceDoc, destDoc, { link_relationship: 'tree link' });
             e.stopPropagation();
             return true;
         }
         const docDragData = de.complete.docDragData;
         if (docDragData && pt[0] < rect.left + rect.width) {
-            if (docDragData.draggedDocuments[0] === this.doc) return true;
+            if (docDragData.draggedDocuments[0] === this.Document) return true;
             const added = this.dropDocuments(
                 docDragData.droppedDocuments, //
                 before,
@@ -409,7 +413,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 docDragData.dropAction,
                 docDragData.removeDocument,
                 docDragData.moveDocument,
-                docDragData.treeViewDoc === this.props.treeView.props.Document
+                docDragData.treeViewDoc === this.treeView.Document
             );
             e.stopPropagation();
             !added && e.preventDefault();
@@ -420,40 +424,40 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     dropping: boolean = false;
     dropDocuments(droppedDocuments: Doc[], before: boolean, inside: number | boolean, dropAction: dropActionType, removeDocument: DragManager.RemoveFunction | undefined, moveDocument: DragManager.MoveFunction | undefined, forceAdd: boolean) {
-        const parentAddDoc = (doc: Doc | Doc[]) => this.props.addDocument(doc, undefined, undefined, before);
+        const parentAddDoc = (doc: Doc | Doc[]) => this._props.addDocument(doc, undefined, undefined, before);
         const localAdd = (doc: Doc | Doc[]) => {
             const innerAdd = (doc: Doc) => {
                 const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[this.fieldKey])) instanceof ComputedField;
                 const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, this.fieldKey, doc);
-                dataIsComputed && Doc.SetContainer(doc, DocCast(this.doc.embedContainer));
+                dataIsComputed && Doc.SetContainer(doc, DocCast(this.Document.embedContainer));
                 return added;
             };
             return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
         };
         const addDoc = inside ? localAdd : parentAddDoc;
         const move = (!dropAction || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same' || dropAction === 'inSame') && moveDocument;
-        const canAdd = (!this.props.treeView.outlineMode && !StrCast((inside ? this.props.document : this.props.treeViewParent)?.treeView_FreezeChildren).includes('add')) || forceAdd;
-        if (canAdd && (dropAction !== 'inSame' || droppedDocuments.every(d => d.embedContainer === this.props.parentTreeView?.doc))) {
-            this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = true);
+        const canAdd = (!this.treeView.outlineMode && !StrCast((inside ? this.Document : this._props.treeViewParent)?.treeView_FreezeChildren).includes('add')) || forceAdd;
+        if (canAdd && (dropAction !== 'inSame' || droppedDocuments.every(d => d.embedContainer === this._props.parentTreeView?.Document))) {
+            this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.dropping = true);
             const res = droppedDocuments.reduce((added, d) => (move ? move(d, undefined, addDoc) || (dropAction === 'proto' ? addDoc(d) : false) : addDoc(d)) || added, false);
-            this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = false);
+            this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.dropping = false);
             return res;
         }
         return false;
     }
 
     refTransform = (ref: HTMLDivElement | undefined | null) => {
-        if (!ref) return this.props.ScreenToLocalTransform();
+        if (!ref) return this._props.ScreenToLocalTransform();
         const { scale, translateX, translateY } = Utils.GetScreenTransform(ref);
-        const outerXf = Utils.GetScreenTransform(this.props.treeView.MainEle());
-        const offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
-        return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]);
+        const outerXf = Utils.GetScreenTransform(this.treeView.MainEle());
+        const offset = this._props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
+        return this._props.ScreenToLocalTransform().translate(offset[0], offset[1]);
     };
     docTransform = () => this.refTransform(this._dref?.ContentRef?.current);
     getTransform = () => this.refTransform(this._tref.current);
-    embeddedPanelWidth = () => this.props.panelWidth() / (this.props.treeView.props.NativeDimScaling?.() || 1);
+    embeddedPanelWidth = () => this._props.panelWidth() / (this.treeView._props.NativeDimScaling?.() || 1);
     embeddedPanelHeight = () => {
-        const layoutDoc = (temp => temp && Doc.expandTemplateLayout(temp, this.props.document))(this.props.treeView.props.childLayoutTemplate?.()) || this.layoutDoc;
+        const layoutDoc = (temp => temp && Doc.expandTemplateLayout(temp, this.Document))(this.treeView._props.childLayoutTemplate?.()) || this.layoutDoc;
         return Math.min(
             NumCast(layoutDoc._height),
             this.MAX_EMBED_HEIGHT,
@@ -463,7 +467,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 return layoutDoc._layout_fitWidth
                     ? !Doc.NativeHeight(layoutDoc)
                         ? NumCast(layoutDoc._height)
-                        : Math.min((this.embeddedPanelWidth() * NumCast(layoutDoc.scrollHeight, Doc.NativeHeight(layoutDoc))) / (Doc.NativeWidth(layoutDoc) || NumCast(this.props.treeViewParent._height)))
+                        : Math.min((this.embeddedPanelWidth() * NumCast(layoutDoc.scrollHeight, Doc.NativeHeight(layoutDoc))) / (Doc.NativeWidth(layoutDoc) || NumCast(this._props.treeViewParent._height)))
                     : (this.embeddedPanelWidth() * NumCast(layoutDoc._height)) / NumCast(layoutDoc._width);
             })()
         );
@@ -471,16 +475,16 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get expandedField() {
         const ids: { [key: string]: string } = {};
         const rows: JSX.Element[] = [];
-        const doc = this.doc;
+        const doc = this.Document;
         doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
 
         for (const key of Object.keys(ids).slice().sort()) {
-            if (this.props.skipFields?.includes(key) || key === 'title' || key === 'treeView_Open') continue;
+            if (this._props.skipFields?.includes(key) || key === 'title' || key === 'treeView_Open') continue;
             const contents = doc[key];
             let contentElement: (JSX.Element | null)[] | JSX.Element = [];
 
             let leftOffset = observable({ width: 0 });
-            const expandedWidth = () => this.props.panelWidth() - leftOffset.width;
+            const expandedWidth = () => this._props.panelWidth() - leftOffset.width;
             if (contents instanceof Doc || (Cast(contents, listSpec(Doc)) && Cast(contents, listSpec(Doc))!.length && Cast(contents, listSpec(Doc))![0] instanceof Doc)) {
                 const remDoc = (doc: Doc | Doc[]) => this.remove(doc, key);
                 const moveDoc = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.move(doc, target, addDoc);
@@ -488,44 +492,44 @@ export class TreeView extends React.Component<TreeViewProps> {
                     const innerAdd = (doc: Doc) => {
                         const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField;
                         const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
-                        dataIsComputed && Doc.SetContainer(doc, DocCast(this.doc.embedContainer));
+                        dataIsComputed && Doc.SetContainer(doc, DocCast(this.Document.embedContainer));
                         return added;
                     };
                     return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
                 };
                 contentElement = TreeView.GetChildElements(
                     contents instanceof Doc ? [contents] : DocListCast(contents),
-                    this.props.treeView,
+                    this.treeView,
                     this,
                     doc,
                     undefined,
-                    this.props.treeViewParent,
-                    this.props.prevSibling,
+                    this._props.treeViewParent,
+                    this._props.prevSibling,
                     addDoc,
                     remDoc,
                     moveDoc,
-                    this.props.dragAction,
-                    this.props.addDocTab,
+                    this._props.dragAction,
+                    this._props.addDocTab,
                     this.titleStyleProvider,
-                    this.props.ScreenToLocalTransform,
-                    this.props.isContentActive,
+                    this._props.ScreenToLocalTransform,
+                    this._props.isContentActive,
                     expandedWidth,
-                    this.props.renderDepth,
-                    this.props.treeViewHideHeaderFields,
-                    [...this.props.renderedIds, doc[Id]],
-                    this.props.onCheckedClick,
-                    this.props.onChildClick,
-                    this.props.skipFields,
+                    this._props.renderDepth,
+                    this._props.treeViewHideHeaderFields,
+                    [...this._props.renderedIds, doc[Id]],
+                    this._props.onCheckedClick,
+                    this._props.onChildClick,
+                    this._props.skipFields,
                     false,
-                    this.props.whenChildContentsActiveChanged,
-                    this.props.dontRegisterView,
+                    this._props.whenChildContentsActiveChanged,
+                    this._props.dontRegisterView,
                     emptyFunction,
                     emptyFunction,
                     this.childContextMenuItems(),
                     // TODO: [AL] Add these
-                    this.props.AddToMap,
-                    this.props.RemFromMap,
-                    this.props.hierarchyIndex
+                    this._props.AddToMap,
+                    this._props.RemFromMap,
+                    this._props.hierarchyIndex
                 );
             } else {
                 contentElement = (
@@ -573,9 +577,9 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get renderContent() {
         TraceMobx();
         const expandKey = this.treeViewExpandedView;
-        const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {};
+        const sortings = (this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {};
         if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) {
-            const sorting = StrCast(this.doc.treeView_SortCriterion, TreeSort.WhenAdded);
+            const sorting = StrCast(this.Document.treeView_SortCriterion, TreeSort.WhenAdded);
             const sortKeys = Object.keys(sortings);
             const curSortIndex = Math.max(
                 0,
@@ -587,7 +591,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             const localAdd = (doc: Doc, addBefore?: Doc, before?: boolean) => {
                 // if there's a sort ordering specified that can be modified on drop (eg, zorder can be modified, alphabetical can't),
                 // then the modification would be done here
-                const ordering = StrCast(this.doc.treeView_SortCriterion);
+                const ordering = StrCast(this.Document.treeView_SortCriterion);
                 if (ordering === TreeSort.Zindex) {
                     const docs = TreeView.sortDocs(this.childDocs || ([] as Doc[]), ordering);
                     doc.zIndex = addBefore ? NumCast(addBefore.zIndex) + (before ? -0.5 : 0.5) : 1000;
@@ -596,7 +600,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }
                 const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField;
                 const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
-                !dataIsComputed && added && Doc.SetContainer(doc, this.doc);
+                !dataIsComputed && added && Doc.SetContainer(doc, this.Document);
 
                 return added;
             };
@@ -614,12 +618,12 @@ export class TreeView extends React.Component<TreeViewProps> {
             }
             return (
                 <div>
-                    {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
+                    {!docs?.length || this._props.AddToMap /* hack to identify pres box trees */ ? null : (
                         <div className="treeView-sorting">
                             <IconButton
                                 color={sortings[sorting]?.color}
                                 size={Size.XSMALL}
-                                tooltip={`Sorted by : ${this.doc.treeView_SortCriterion}. click to cycle`}
+                                tooltip={`Sorted by : ${this.Document.treeView_SortCriterion}. click to cycle`}
                                 icon={sortings[sorting]?.icon}
                                 onPointerDown={e => {
                                     downX = e.clientX;
@@ -627,8 +631,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                                     e.stopPropagation();
                                 }}
                                 onClick={undoable(e => {
-                                    if (this.props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) {
-                                        !this.props.treeView.outlineMode && (this.doc.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]);
+                                    if (this._props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) {
+                                        !this.treeView.outlineMode && (this.Document.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]);
                                         e.stopPropagation();
                                     }
                                 }, 'sort order')}
@@ -638,7 +642,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     <ul
                         style={{ cursor: 'inherit' }}
                         key={expandKey + 'more'}
-                        title={`Sorted by : ${this.doc.treeView_SortCriterion}. click to cycle`}
+                        title={`Sorted by : ${this.Document.treeView_SortCriterion}. click to cycle`}
                         className="" //this.doc.treeView_HideTitle ? 'no-indent' : ''}
                         onPointerDown={e => {
                             downX = e.clientX;
@@ -646,8 +650,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                             e.stopPropagation();
                         }}
                         onClick={undoable(e => {
-                            if (this.props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) {
-                                !this.props.treeView.outlineMode && (this.doc.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]);
+                            if (this._props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) {
+                                !this.treeView.outlineMode && (this.Document.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]);
                                 e.stopPropagation();
                             }
                         }, 'sort order')}>
@@ -655,37 +659,37 @@ export class TreeView extends React.Component<TreeViewProps> {
                             ? null
                             : TreeView.GetChildElements(
                                   docs,
-                                  this.props.treeView,
+                                  this.treeView,
                                   this,
                                   this.layoutDoc,
                                   this.dataDoc,
-                                  this.props.treeViewParent,
-                                  this.props.prevSibling,
+                                  this._props.treeViewParent,
+                                  this._props.prevSibling,
                                   addDoc,
                                   remDoc,
                                   moveDoc,
-                                  StrCast(this.doc.childDragAction, this.props.dragAction) as dropActionType,
-                                  this.props.addDocTab,
+                                  StrCast(this.Document.childDragAction, this._props.dragAction) as dropActionType,
+                                  this._props.addDocTab,
                                   this.titleStyleProvider,
-                                  this.props.ScreenToLocalTransform,
-                                  this.props.isContentActive,
-                                  this.props.panelWidth,
-                                  this.props.renderDepth,
-                                  this.props.treeViewHideHeaderFields,
-                                  [...this.props.renderedIds, this.doc[Id]],
-                                  this.props.onCheckedClick,
-                                  this.props.onChildClick,
-                                  this.props.skipFields,
+                                  this._props.ScreenToLocalTransform,
+                                  this._props.isContentActive,
+                                  this._props.panelWidth,
+                                  this._props.renderDepth,
+                                  this._props.treeViewHideHeaderFields,
+                                  [...this._props.renderedIds, this.Document[Id]],
+                                  this._props.onCheckedClick,
+                                  this._props.onChildClick,
+                                  this._props.skipFields,
                                   false,
-                                  this.props.whenChildContentsActiveChanged,
-                                  this.props.dontRegisterView,
+                                  this._props.whenChildContentsActiveChanged,
+                                  this._props.dontRegisterView,
                                   emptyFunction,
                                   emptyFunction,
                                   this.childContextMenuItems(),
                                   // TODO: [AL] add these
-                                  this.props.AddToMap,
-                                  this.props.RemFromMap,
-                                  this.props.hierarchyIndex,
+                                  this._props.AddToMap,
+                                  this._props.RemFromMap,
+                                  this._props.hierarchyIndex,
                                   this._renderCount
                               )}
                     </ul>
@@ -693,7 +697,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             );
         } else if (this.treeViewExpandedView === 'fields') {
             return (
-                <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit' }}>
+                <ul key={this.Document[Id] + this.Document.title} style={{ cursor: 'inherit' }}>
                     <div>{this.expandedField}</div>
                 </ul>
             );
@@ -705,13 +709,13 @@ export class TreeView extends React.Component<TreeViewProps> {
                     e.preventDefault();
                     e.stopPropagation();
                 }}>
-                {this.renderEmbeddedDocument(false, this.props.treeView.props.childDocumentsActive ?? returnFalse)}
+                {this.renderEmbeddedDocument(false, this.treeView._props.childDocumentsActive ?? returnFalse)}
             </ul>
         ); // "layout"
     }
 
     get onCheckedClick() {
-        return this.doc.type === DocumentType.COL ? undefined : this.props.onCheckedClick?.() ?? ScriptCast(this.doc.onCheckedClick);
+        return this.Document.type === DocumentType.COL ? undefined : this._props.onCheckedClick?.() ?? ScriptCast(this.Document.onCheckedClick);
     }
 
     @action
@@ -719,10 +723,10 @@ export class TreeView extends React.Component<TreeViewProps> {
         if (this.onCheckedClick) {
             this.onCheckedClick?.script.run(
                 {
-                    this: this.doc.isTemplateForField && this.props.dataDoc ? this.props.dataDoc : this.doc,
-                    heading: this.props.treeViewParent.title,
-                    checked: this.doc.treeView_Checked === 'check' ? 'x' : this.doc.treeView_Checked === 'x' ? 'remove' : 'check',
-                    containingTreeView: this.props.treeView.props.Document,
+                    this: this.Document.isTemplateForField && this._props.dataDoc ? this._props.dataDoc : this.Document,
+                    heading: this._props.treeViewParent.title,
+                    checked: this.Document.treeView_Checked === 'check' ? 'x' : this.Document.treeView_Checked === 'x' ? 'remove' : 'check',
+                    containingTreeView: this.treeView.Document,
                 },
                 console.log
             );
@@ -734,28 +738,28 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     @computed get renderBullet() {
         TraceMobx();
-        const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question';
+        const iconType = this.treeView._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question';
         const color = SettingsManager.userColor;
-        const checked = this.onCheckedClick ? this.doc.treeView_Checked ?? 'unchecked' : undefined;
+        const checked = this.onCheckedClick ? this.Document.treeView_Checked ?? 'unchecked' : undefined;
         return (
             <div
-                className={`bullet${this.props.treeView.outlineMode ? '-outline' : ''}`}
+                className={`bullet${this.treeView.outlineMode ? '-outline' : ''}`}
                 key="bullet"
-                title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : `view ${this.props.document.type} content`}
+                title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : `view ${this.Document.type} content`}
                 onClick={this.bulletClick}
                 style={
-                    this.props.treeView.outlineMode
+                    this.treeView.outlineMode
                         ? {
-                              opacity: this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.Opacity),
+                              opacity: this.titleStyleProvider?.(this.Document, this.treeView._props, StyleProp.Opacity),
                           }
                         : {
-                              pointerEvents: this.props.isContentActive() ? 'all' : undefined,
+                              pointerEvents: this._props.isContentActive() ? 'all' : undefined,
                               opacity: checked === 'unchecked' || typeof iconType !== 'string' ? undefined : 0.4,
                               color: checked === 'unchecked' ? SettingsManager.userColor : 'inherit',
                           }
                 }>
-                {this.props.treeView.outlineMode ? (
-                    !(this.doc.text as RichTextField)?.Text ? null : (
+                {this.treeView.outlineMode ? (
+                    !(this.Document.text as RichTextField)?.Text ? null : (
                         <IconButton color={color} icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} />
                     )
                 ) : (
@@ -775,28 +779,28 @@ export class TreeView extends React.Component<TreeViewProps> {
     }
 
     @computed get validExpandViewTypes() {
-        const annos = () => (DocListCast(this.doc[this.fieldKey + '_annotations']).length && !this.props.treeView.dashboardMode ? 'annotations' : '');
-        const links = () => (LinkManager.Links(this.doc).length && !this.props.treeView.dashboardMode ? 'links' : '');
-        const data = () => (this.childDocs || this.props.treeView.dashboardMode ? this.fieldKey : '');
-        const embeddings = () => (this.props.treeView.dashboardMode ? '' : 'embeddings');
+        const annos = () => (DocListCast(this.Document[this.fieldKey + '_annotations']).length && !this.treeView.dashboardMode ? 'annotations' : '');
+        const links = () => (LinkManager.Links(this.Document).length && !this.treeView.dashboardMode ? 'links' : '');
+        const data = () => (this.childDocs || this.treeView.dashboardMode ? this.fieldKey : '');
+        const embeddings = () => (this.treeView.dashboardMode ? '' : 'embeddings');
         const fields = () => (Doc.noviceMode ? '' : 'fields');
-        const layout = Doc.noviceMode || this.doc._type_collection === CollectionViewType.Docking ? [] : ['layout'];
-        return [data(), ...layout, ...(this.props.treeView.fileSysMode ? [embeddings(), links(), annos()] : []), fields()].filter(m => m);
+        const layout = Doc.noviceMode || this.Document._type_collection === CollectionViewType.Docking ? [] : ['layout'];
+        return [data(), ...layout, ...(this.treeView.fileSysMode ? [embeddings(), links(), annos()] : []), fields()].filter(m => m);
     }
     @action
     expandNextviewType = () => {
-        if (this.treeViewOpen && !this.doc.isFolder && !this.props.treeView.outlineMode && !this.doc.treeView_ExpandedViewLock) {
+        if (this.treeViewOpen && !this.Document.isFolder && !this.treeView.outlineMode && !this.Document.treeView_ExpandedViewLock) {
             const next = (modes: any[]) => modes[(modes.indexOf(StrCast(this.treeViewExpandedView)) + 1) % modes.length];
-            this.doc.treeView_ExpandedView = next(this.validExpandViewTypes);
+            this.Document.treeView_ExpandedView = next(this.validExpandViewTypes);
         }
         this.treeViewOpen = true;
     };
 
     @observable headerEleWidth = 0;
     @computed get titleButtons() {
-        const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations);
+        const customHeaderButtons = this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.Decorations);
         const color = SettingsManager.userColor;
-        return this.props.treeViewHideHeaderFields() || this.doc.treeView_HideHeaderFields ? null : (
+        return this._props.treeViewHideHeaderFields() || this.Document.treeView_HideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
                 <IconButton
@@ -808,7 +812,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                         e.stopPropagation();
                     }}
                 />
-                {Doc.noviceMode ? null : this.doc.treeView_ExpandedViewLock || Doc.IsSystem(this.doc) ? null : (
+                {Doc.noviceMode ? null : this.Document.treeView_ExpandedViewLock || Doc.IsSystem(this.Document) ? null : (
                     <span className="collectionTreeView-keyHeader" title="type of expanded data" key={this.treeViewExpandedView} onPointerDown={this.expandNextviewType}>
                         {this.treeViewExpandedView}
                     </span>
@@ -825,54 +829,54 @@ export class TreeView extends React.Component<TreeViewProps> {
     contextMenuItems = () => {
         const makeFolder = { script: ScriptField.MakeFunction(`scriptContext.makeFolder()`, { scriptContext: 'any' })!, icon: 'folder-plus', label: 'New Folder' };
         const folderOp = this.childDocs?.length ? [makeFolder] : [];
-        const openEmbedding = { script: ScriptField.MakeFunction(`openDoc(getEmbedding(self), "${OpenWhere.addRight}")`)!, icon: 'copy', label: 'Open New Embedding' };
-        const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: 'eye', label: 'Focus or Open' };
-        const reopenDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: 'eye', label: 'Reopen' };
+        const openEmbedding = { script: ScriptField.MakeFunction(`openDoc(getEmbedding(this), "${OpenWhere.addRight}")`)!, icon: 'copy', label: 'Open New Embedding' };
+        const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(this)`)!, icon: 'eye', label: 'Focus or Open' };
+        const reopenDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(this)`)!, icon: 'eye', label: 'Reopen' };
         return [
-            ...(this.props.contextMenuItems ?? []).filter(mi => (!mi.filter ? true : mi.filter.script.run({ doc: this.doc })?.result)),
-            ...(this.doc.isFolder
+            ...(this._props.contextMenuItems ?? []).filter(mi => (!mi.filter ? true : mi.filter.script.run({ doc: this.Document })?.result)),
+            ...(this.Document.isFolder
                 ? folderOp
-                : Doc.IsSystem(this.doc)
-                ? []
-                : this.props.treeView.fileSysMode && this.doc === Doc.GetProto(this.doc)
-                ? [openEmbedding, makeFolder]
-                : this.doc._type_collection === CollectionViewType.Docking
-                ? []
-                : this.props.treeView.rootDoc === Doc.MyRecentlyClosed
-                ? [reopenDoc]
-                : [openEmbedding, focusDoc]),
+                : Doc.IsSystem(this.Document)
+                  ? []
+                  : this.treeView.fileSysMode && this.Document === Doc.GetProto(this.Document)
+                    ? [openEmbedding, makeFolder]
+                    : this.Document._type_collection === CollectionViewType.Docking
+                      ? []
+                      : this.treeView.Document === Doc.MyRecentlyClosed
+                        ? [reopenDoc]
+                        : [openEmbedding, focusDoc]),
         ];
     };
     childContextMenuItems = () => {
-        const customScripts = Cast(this.doc.childContextMenuScripts, listSpec(ScriptField), []);
-        const customFilters = Cast(this.doc.childContextMenuFilters, listSpec(ScriptField), []);
-        const icons = StrListCast(this.doc.childContextMenuIcons);
-        return StrListCast(this.doc.childContextMenuLabels).map((label, i) => ({ script: customScripts[i], filter: customFilters[i], icon: icons[i], label }));
+        const customScripts = Cast(this.Document.childContextMenuScripts, listSpec(ScriptField), []);
+        const customFilters = Cast(this.Document.childContextMenuFilters, listSpec(ScriptField), []);
+        const icons = StrListCast(this.Document.childContextMenuIcons);
+        return StrListCast(this.Document.childContextMenuLabels).map((label, i) => ({ script: customScripts[i], filter: customFilters[i], icon: icons[i], label }));
     };
 
-    onChildClick = () => this.props.onChildClick?.() ?? (this._editTitleScript?.() || ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!);
+    onChildClick = () => this._props.onChildClick?.() ?? (this._editTitleScript?.() || ScriptField.MakeFunction(`DocFocusOrOpen(this)`)!);
 
-    onChildDoubleClick = () => ScriptCast(this.props.treeView.Document.treeView_ChildDoubleClick, !this.props.treeView.outlineMode ? this._openScript?.() : null);
+    onChildDoubleClick = () => ScriptCast(this.treeView.Document.treeView_ChildDoubleClick, !this.treeView.outlineMode ? this._openScript?.() : null);
 
-    refocus = () => this.props.treeView.props.focus(this.props.treeView.props.Document, {});
+    refocus = () => this.treeView._props.focus(this.treeView.Document, {});
     ignoreEvent = (e: any) => {
-        if (this.props.isContentActive(true)) {
+        if (this._props.isContentActive(true)) {
             e.stopPropagation();
             e.preventDefault();
         }
     };
     titleStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
-        if (!doc || doc !== this.doc) return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView
+        if (!doc || doc !== this.Document) return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView
 
-        const treeView = this.props.treeView;
+        const treeView = this.treeView;
         // prettier-ignore
         switch (property.split(':')[0]) {
-            case StyleProp.Opacity:         return this.props.treeView.outlineMode ? undefined : 1;
+            case StyleProp.Opacity:         return this.treeView.outlineMode ? undefined : 1;
             case StyleProp.BackgroundColor: return this.selected ? '#7089bb' : StrCast(doc._backgroundColor, StrCast(doc.backgroundColor));
-            case StyleProp.Highlighting:    if (this.props.treeView.outlineMode) return undefined;
+            case StyleProp.Highlighting:    if (this.treeView.outlineMode) return undefined;
             case StyleProp.BoxShadow:       return undefined;
             case StyleProp.DocContents:
-                const highlightIndex = this.props.treeView.outlineMode ? Doc.DocBrushStatus.unbrushed : Doc.GetBrushHighlightStatus(doc);
+                const highlightIndex = this.treeView.outlineMode ? Doc.DocBrushStatus.unbrushed : Doc.GetBrushHighlightStatus(doc);
                 const highlightColor = ['transparent', 'rgb(68, 118, 247)', 'rgb(68, 118, 247)', 'orange', 'lightBlue'][highlightIndex];
                 return treeView.outlineMode ? null : (
                     <div
@@ -881,33 +885,33 @@ export class TreeView extends React.Component<TreeViewProps> {
                             // just render a title for a tree view label (identified by treeViewDoc being set in 'props')
                             maxWidth: props?.PanelWidth() || undefined,
                             background: props?.styleProvider?.(doc, props, StyleProp.BackgroundColor),
-                            outline: SnappingManager.GetIsDragging() ? undefined: `solid ${highlightColor} ${highlightIndex}px`,
-                            paddingLeft: NumCast(treeView.rootDoc.childXPadding, NumCast(treeView.props.childXPadding, Doc.IsComicStyle(doc)?20:0)),
-                            paddingRight: NumCast(treeView.rootDoc.childXPadding, NumCast(treeView.props.childXPadding, Doc.IsComicStyle(doc)?20:0)),
-                            paddingTop: treeView.props.childYPadding,
-                            paddingBottom: treeView.props.childYPadding,
+                            outline: SnappingManager.IsDragging ? undefined: `solid ${highlightColor} ${highlightIndex}px`,
+                            paddingLeft: NumCast(treeView.Document.childXPadding, NumCast(treeView._props.childXPadding, Doc.IsComicStyle(doc)?20:0)),
+                            paddingRight: NumCast(treeView.Document.childXPadding, NumCast(treeView._props.childXPadding, Doc.IsComicStyle(doc)?20:0)),
+                            paddingTop: treeView._props.childYPadding,
+                            paddingBottom: treeView._props.childYPadding,
                         }}>
                         {StrCast(doc?.title)}
                     </div>
                 );
         }
-        return treeView.props.styleProvider?.(doc, props, property);
+        return treeView._props.styleProvider?.(doc, props, property);
     };
     embeddedStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
         if (property.startsWith(StyleProp.Decorations)) return null;
-        return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView
+        return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView
     };
     onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => {
-        if (this.doc.treeView_HideHeader || (this.doc.treeView_HideHeaderIfTemplate && this.props.treeView.props.childLayoutTemplate?.()) || this.props.treeView.outlineMode) {
+        if (this.Document.treeView_HideHeader || (this.Document.treeView_HideHeaderIfTemplate && this.treeView._props.childLayoutTemplate?.()) || this.treeView.outlineMode) {
             switch (e.key) {
                 case 'Tab':
                     e.stopPropagation?.();
                     e.preventDefault?.();
                     setTimeout(() => RichTextMenu.Instance.TextView?.EditorView?.focus(), 150);
-                    UndoManager.RunInBatch(() => (e.shiftKey ? this.props.outdentDocument?.(true) : this.props.indentDocument?.(true)), 'tab');
+                    UndoManager.RunInBatch(() => (e.shiftKey ? this._props.outdentDocument?.(true) : this._props.indentDocument?.(true)), 'tab');
                     return true;
                 case 'Backspace':
-                    if (!(this.doc.text as RichTextField)?.Text && this.props.removeDoc?.(this.doc)) {
+                    if (!(this.Document.text as RichTextField)?.Text && this._props.removeDoc?.(this.Document)) {
                         e.stopPropagation?.();
                         e.preventDefault?.();
                         return true;
@@ -921,7 +925,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
         return false;
     };
-    titleWidth = () => Math.max(20, Math.min(this.props.treeView.truncateTitleWidth(), this.props.panelWidth())) / (this.props.treeView.props.NativeDimScaling?.() || 1) - this.headerEleWidth - treeBulletWidth();
+    titleWidth = () => Math.max(20, Math.min(this.treeView.truncateTitleWidth(), this._props.panelWidth())) / (this.treeView._props.NativeDimScaling?.() || 1) - this.headerEleWidth - treeBulletWidth();
 
     /**
      * Renders the EditableView title element for placement into the tree.
@@ -936,21 +940,21 @@ export class TreeView extends React.Component<TreeViewProps> {
                 display={'inline-block'}
                 editing={this._editTitle}
                 background={'#7089bb'}
-                contents={StrCast(this.doc.title)}
+                contents={StrCast(this.Document.title)}
                 height={12}
                 sizeToContent={true}
                 fontSize={12}
                 isEditingCallback={action(e => (this._editTitle = e))}
-                GetValue={() => StrCast(this.doc.title)}
+                GetValue={() => StrCast(this.Document.title)}
                 OnTab={undoBatch((shift?: boolean) => {
-                    if (!shift) this.props.indentDocument?.(true);
-                    else this.props.outdentDocument?.(true);
+                    if (!shift) this._props.indentDocument?.(true);
+                    else this._props.outdentDocument?.(true);
                 })}
-                OnEmpty={undoBatch(() => this.props.treeView.outlineMode && this.props.removeDoc?.(this.doc))}
-                OnFillDown={val => this.props.treeView.fileSysMode && this.makeFolder()}
+                OnEmpty={undoBatch(() => this.treeView.outlineMode && this._props.removeDoc?.(this.Document))}
+                OnFillDown={val => this.treeView.fileSysMode && this.makeFolder()}
                 SetValue={undoBatch((value: string, shiftKey: boolean, enterKey: boolean) => {
-                    Doc.SetInPlace(this.doc, 'title', value, false);
-                    this.props.treeView.outlineMode && enterKey && this.makeTextCollection();
+                    Doc.SetInPlace(this.Document, 'title', value, false);
+                    this.treeView.outlineMode && enterKey && this.makeTextCollection();
                 })}
             />
         ) : (
@@ -958,49 +962,46 @@ export class TreeView extends React.Component<TreeViewProps> {
                 key="title"
                 ref={action((r: any) => {
                     this._docRef = r ? r : undefined;
-                    if (this._docRef && TreeView._editTitleOnLoad?.id === this.props.document[Id] && TreeView._editTitleOnLoad.parent === this.props.parentTreeView) {
+                    if (this._docRef && TreeView._editTitleOnLoad?.id === this.Document[Id] && TreeView._editTitleOnLoad.parent === this._props.parentTreeView) {
                         this._docRef.select(false);
                         this.setEditTitle(this._docRef);
                         TreeView._editTitleOnLoad = undefined;
                     }
                 })}
-                Document={this.doc}
-                DataDoc={undefined} // or this.dataDoc?
+                Document={this.Document}
                 layout_fitWidth={returnTrue}
                 scriptContext={this}
-                hideDecorationTitle={this.props.treeView.outlineMode}
-                hideResizeHandles={this.props.treeView.outlineMode}
+                hideDecorationTitle={this.treeView.outlineMode}
+                hideResizeHandles={this.treeView.outlineMode}
                 styleProvider={this.titleStyleProvider}
                 onClickScriptDisable="never" // tree docViews have a script to show fields, etc.
-                docViewPath={this.props.treeView.props.docViewPath}
-                treeViewDoc={this.props.treeView.props.Document}
+                docViewPath={this.treeView._props.docViewPath}
+                treeViewDoc={this.treeView.Document}
                 addDocument={undefined}
-                addDocTab={this.props.addDocTab}
-                rootSelected={returnTrue}
-                pinToPres={emptyFunction}
+                addDocTab={this._props.addDocTab}
+                pinToPres={this.treeView._props.pinToPres}
                 onClick={this.onChildClick}
                 onDoubleClick={this.onChildDoubleClick}
-                dragAction={this.props.dragAction}
+                dragAction={this._props.dragAction}
                 moveDocument={this.move}
-                removeDocument={this.props.removeDoc}
+                removeDocument={this._props.removeDoc}
                 ScreenToLocalTransform={this.getTransform}
-                NativeHeight={return18}
+                NativeHeight={returnZero}
                 NativeWidth={returnZero}
-                shouldNotScale={returnTrue}
                 PanelWidth={this.titleWidth}
                 PanelHeight={return18}
                 contextMenuItems={this.contextMenuItems}
                 renderDepth={1}
-                isContentActive={emptyFunction} //this.props.isContentActive}
-                isDocumentActive={this.props.isContentActive}
+                isContentActive={emptyFunction} //this._props.isContentActive}
+                isDocumentActive={this._props.isContentActive}
                 focus={this.refocus}
-                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
+                whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 bringToFront={emptyFunction}
-                disableBrushing={this.props.treeView.props.disableBrushing}
-                hideLinkButton={BoolCast(this.props.treeView.props.Document.childHideLinkButton)}
-                dontRegisterView={BoolCast(this.props.treeView.props.Document.childDontRegisterViews, this.props.dontRegisterView)}
-                xPadding={NumCast(this.props.treeView.props.Document.childXPadding, this.props.treeView.props.childXPadding)}
-                yPadding={NumCast(this.props.treeView.props.Document.childYPadding, this.props.treeView.props.childYPadding)}
+                disableBrushing={this.treeView._props.disableBrushing}
+                hideLinkButton={BoolCast(this.treeView.Document.childHideLinkButton)}
+                dontRegisterView={BoolCast(this.treeView.Document.childDontRegisterViews, this._props.dontRegisterView)}
+                xPadding={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)}
+                yPadding={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)}
                 childFilters={returnEmptyFilter}
                 childFiltersByRanges={returnEmptyFilter}
                 searchFilterDocs={returnEmptyDoclist}
@@ -1009,16 +1010,16 @@ export class TreeView extends React.Component<TreeViewProps> {
         return (
             <>
                 <div
-                    className={`docContainer${Doc.IsSystem(this.props.document) || this.props.document.isFolder ? '-system' : ''}`}
+                    className={`docContainer${Doc.IsSystem(this.Document) || this.Document.isFolder ? '-system' : ''}`}
                     ref={this._tref}
                     title="click to edit title. Double Click or Drag to Open"
                     style={{
-                        backgroundColor: Doc.IsSystem(this.props.document) || this.props.document.isFolder ? SettingsManager.userVariantColor : undefined,
-                        color: Doc.IsSystem(this.props.document) || this.props.document.isFolder ? lightOrDark(SettingsManager.userVariantColor) : undefined,
-                        fontWeight: Doc.IsSearchMatch(this.doc) !== undefined ? 'bold' : undefined,
-                        textDecoration: Doc.GetT(this.doc, 'title', 'string', true) ? 'underline' : undefined,
-                        outline: this.doc === Doc.ActiveDashboard ? 'dashed 1px #06123232' : undefined,
-                        pointerEvents: !this.props.isContentActive() ? 'none' : undefined,
+                        backgroundColor: Doc.IsSystem(this.Document) || this.Document.isFolder ? SettingsManager.userVariantColor : undefined,
+                        color: Doc.IsSystem(this.Document) || this.Document.isFolder ? lightOrDark(SettingsManager.userVariantColor) : undefined,
+                        fontWeight: Doc.IsSearchMatch(this.Document) !== undefined ? 'bold' : undefined,
+                        textDecoration: Doc.GetT(this.Document, 'title', 'string', true) ? 'underline' : undefined,
+                        outline: this.Document === Doc.ActiveDashboard ? 'dashed 1px #06123232' : undefined,
+                        pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
                     }}>
                     {view}
                 </div>
@@ -1058,44 +1059,42 @@ export class TreeView extends React.Component<TreeViewProps> {
         return (
             <div style={{ height: this.embeddedPanelHeight(), width: this.embeddedPanelWidth() }}>
                 <DocumentView
-                    key={this.doc[Id]}
+                    key={this.Document[Id]}
                     ref={action((r: DocumentView | null) => (this._dref = r))}
-                    Document={this.doc}
-                    DataDoc={undefined}
+                    Document={this.Document}
                     layout_fitWidth={this.fitWidthFilter}
                     PanelWidth={this.embeddedPanelWidth}
                     PanelHeight={this.embeddedPanelHeight}
                     LayoutTemplateString={asText ? FormattedTextBox.LayoutString('text') : undefined}
-                    LayoutTemplate={this.props.treeView.props.childLayoutTemplate}
+                    LayoutTemplate={this.treeView._props.childLayoutTemplate}
                     isContentActive={isActive}
                     isDocumentActive={isActive}
                     styleProvider={asText ? this.titleStyleProvider : this.embeddedStyleProvider}
                     hideTitle={asText}
-                    //fitContentsToBox={returnTrue}
-                    hideDecorationTitle={this.props.treeView.outlineMode}
-                    hideResizeHandles={this.props.treeView.outlineMode}
+                    fitContentsToBox={returnTrue}
+                    hideDecorationTitle={this.treeView.outlineMode}
+                    hideResizeHandles={this.treeView.outlineMode}
                     onClick={this.onChildClick}
                     focus={this.refocus}
                     onKey={this.onKeyDown}
-                    hideLinkButton={BoolCast(this.props.treeView.props.Document.childHideLinkButton)}
-                    dontRegisterView={BoolCast(this.props.treeView.props.Document.childDontRegisterViews, this.props.dontRegisterView)}
+                    hideLinkButton={BoolCast(this.treeView.Document.childHideLinkButton)}
+                    dontRegisterView={BoolCast(this.treeView.Document.childDontRegisterViews, this._props.dontRegisterView)}
                     ScreenToLocalTransform={this.docTransform}
-                    renderDepth={this.props.renderDepth + 1}
-                    treeViewDoc={this.props.treeView?.props.Document}
-                    rootSelected={returnTrue}
-                    docViewPath={this.props.treeView.props.docViewPath}
+                    renderDepth={this._props.renderDepth + 1}
+                    treeViewDoc={this.treeView?.Document}
+                    docViewPath={this.treeView._props.docViewPath}
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
-                    addDocument={this.props.addDocument}
+                    addDocument={this._props.addDocument}
                     moveDocument={this.move}
-                    removeDocument={this.props.removeDoc}
-                    whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
-                    xPadding={NumCast(this.props.treeView.props.Document.childXPadding, this.props.treeView.props.childXPadding)}
-                    yPadding={NumCast(this.props.treeView.props.Document.childYPadding, this.props.treeView.props.childYPadding)}
-                    addDocTab={this.props.addDocTab}
-                    pinToPres={this.props.treeView.props.pinToPres}
-                    disableBrushing={this.props.treeView.props.disableBrushing}
+                    removeDocument={this._props.removeDoc}
+                    whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
+                    xPadding={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)}
+                    yPadding={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)}
+                    addDocTab={this._props.addDocTab}
+                    pinToPres={this.treeView._props.pinToPres}
+                    disableBrushing={this.treeView._props.disableBrushing}
                     bringToFront={returnFalse}
                     scriptContext={this}
                 />
@@ -1105,7 +1104,7 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     // renders the text version of a document as the header.  This is used in the file system mode and in other vanilla tree views.
     @computed get renderTitleAsHeader() {
-        return this.props.treeView.Document.treeView_HideUnrendered && this.doc.layout_unrendered && !this.doc.treeView_FieldKey ? (
+        return this.treeView.Document.treeView_HideUnrendered && this.Document.layout_unrendered && !this.Document.treeView_FieldKey ? (
             <div></div>
         ) : (
             <>
@@ -1120,16 +1119,16 @@ export class TreeView extends React.Component<TreeViewProps> {
         return (
             <>
                 {this.renderBullet}
-                {this.renderEmbeddedDocument(asText, this.props.isContentActive)}
+                {this.renderEmbeddedDocument(asText, this._props.isContentActive)}
             </>
         );
     };
 
     @computed get renderBorder() {
-        const sorting = StrCast(this.doc.treeView_SortCriterion, TreeSort.WhenAdded);
-        const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) ?? {}) as { [key: string]: { color: string; label: string } };
+        const sorting = StrCast(this.Document.treeView_SortCriterion, TreeSort.WhenAdded);
+        const sortings = (this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewSortings) ?? {}) as { [key: string]: { color: string; label: string } };
         return (
-            <div className={`treeView-border${this.props.treeView.outlineMode ? TreeViewType.outline : ''}`} style={{ borderColor: sortings[sorting]?.color }}>
+            <div className={`treeView-border${this.treeView.outlineMode ? TreeViewType.outline : ''}`} style={{ borderColor: sortings[sorting]?.color }}>
                 {!this.treeViewOpen ? null : this.renderContent}
             </div>
         );
@@ -1139,28 +1138,28 @@ export class TreeView extends React.Component<TreeViewProps> {
         const pt = [de.clientX, de.clientY];
         const rect = this._header.current!.getBoundingClientRect();
         const before = pt[1] < rect.top + rect.height / 2;
-        const inside = this.props.treeView.fileSysMode && !this.doc.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false);
+        const inside = this.treeView.fileSysMode && !this.Document.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false);
 
-        const docs = this.props.treeView.onTreeDrop(de, (docs: Doc[]) => this.dropDocuments(docs, before, inside, 'copy', undefined, undefined, false));
+        const docs = this.treeView.onTreeDrop(de, (docs: Doc[]) => this.dropDocuments(docs, before, inside, 'copy', undefined, undefined, false));
     };
 
     render() {
         TraceMobx();
-        const hideTitle = this.doc.treeView_HideHeader || (this.doc.treeView_HideHeaderIfTemplate && this.props.treeView.props.childLayoutTemplate?.()) || this.props.treeView.outlineMode;
-        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
+        const hideTitle = this.Document.treeView_HideHeader || (this.Document.treeView_HideHeaderIfTemplate && this.treeView._props.childLayoutTemplate?.()) || this.treeView.outlineMode;
+        return this._props.renderedIds?.indexOf(this.Document[Id]) !== -1 ? (
+            '<' + this.Document.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' : ''}`}
+                className={`treeView-container${this._props.isContentActive() ? '-active' : ''}`}
                 ref={this.createTreeDropTarget}
                 onDrop={this.onTreeDrop}
-                //onPointerDown={e => this.props.isContentActive(true) && SelectionManager.DeselectAll()} // bcz: this breaks entering a text filter in a filterBox since it deselects the filter's target document
+                //onPointerDown={e => this._props.isContentActive(true) && SelectionManager.DeselectAll()} // bcz: this breaks entering a text filter in a filterBox since it deselects the filter's target document
                 // onKeyDown={this.onKeyDown}
             >
                 <li className="collection-child">
-                    {hideTitle && this.doc.type !== DocumentType.RTF && !this.doc.treeView_RenderAsBulletHeader // should test for prop 'treeView_RenderDocWithBulletAsHeader"
+                    {hideTitle && this.Document.type !== DocumentType.RTF && !this.Document.treeView_RenderAsBulletHeader // should test for prop 'treeView_RenderDocWithBulletAsHeader"
                         ? this.renderEmbeddedDocument(false, returnFalse)
-                        : this.renderBulletHeader(hideTitle ? this.renderDocumentAsHeader(!this.doc.treeView_RenderAsBulletHeader) : this.renderTitleAsHeader, this._editTitle)}
+                        : this.renderBulletHeader(hideTitle ? this.renderDocumentAsHeader(!this.Document.treeView_RenderAsBulletHeader) : this.renderTitleAsHeader, this._editTitle)}
                 </li>
             </div>
         );
@@ -1236,7 +1235,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
 
         const docs = TreeView.sortDocs(childDocs, StrCast(treeView_Parent.treeView_SortCriterion, TreeSort.WhenAdded));
-        const rowWidth = () => panelWidth() - treeBulletWidth() * (treeView.props.NativeDimScaling?.() || 1);
+        const rowWidth = () => panelWidth() - treeBulletWidth() * (treeView._props.NativeDimScaling?.() || 1);
         const treeView_Refs = new Map<Doc, TreeView | undefined>();
         return docs
             .filter(child => child instanceof Doc)
@@ -1248,11 +1247,11 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }
 
                 const dentDoc = (editTitle: boolean, newParent: Doc, addAfter: Doc | undefined, parent: TreeView | CollectionTreeView | undefined) => {
-                    if (parent instanceof TreeView && parent.props.treeView.fileSysMode && !newParent.isFolder) return;
+                    if (parent instanceof TreeView && parent._props.treeView.fileSysMode && !newParent.isFolder) return;
                     const fieldKey = Doc.LayoutFieldKey(newParent);
                     if (remove && fieldKey && Cast(newParent[fieldKey], listSpec(Doc)) !== undefined) {
                         remove(child);
-                        FormattedTextBox.SelectOnLoad = child[Id];
+                        FormattedTextBox.SetSelectOnLoad(child);
                         TreeView._editTitleOnLoad = editTitle ? { id: child[Id], parent } : undefined;
                         Doc.AddDocToList(newParent, fieldKey, child, addAfter, false);
                         newParent.treeView_Open = true;
@@ -1260,7 +1259,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     }
                 };
                 const indent = i === 0 ? undefined : (editTitle: boolean) => dentDoc(editTitle, docs[i - 1], undefined, treeView_Refs.get(docs[i - 1]));
-                const outdent = !parentCollectionDoc ? undefined : (editTitle: boolean) => dentDoc(editTitle, parentCollectionDoc, containerPrevSibling, parentTreeView instanceof TreeView ? parentTreeView.props.parentTreeView : undefined);
+                const outdent = !parentCollectionDoc ? undefined : (editTitle: boolean) => dentDoc(editTitle, parentCollectionDoc, containerPrevSibling, parentTreeView instanceof TreeView ? parentTreeView._props.parentTreeView : undefined);
                 const addDocument = (doc: Doc | Doc[], annotationKey?: string, relativeTo?: Doc, before?: boolean) => add(doc, relativeTo ?? docs[i], before !== undefined ? before : false);
                 const childLayout = Doc.Layout(pair.layout);
                 const rowHeight = () => {
@@ -1271,7 +1270,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     <TreeView
                         key={child[Id]}
                         ref={r => treeView_Refs.set(child, r ? r : undefined)}
-                        document={pair.layout}
+                        Document={pair.layout}
                         dataDoc={pair.data}
                         treeViewParent={treeView_Parent}
                         prevSibling={docs[i]}