Merge branch 'master' into sophie-ai-images

19 files changed, 213 insertions, 527 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 87973fd81..31ca86f0f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -490,7 +490,7 @@ export class CollectionDockingView extends CollectionSubView() {
             // if you close a tab that is not embedded somewhere else (an embedded Doc can be opened simultaneously in a tab), then add the tab to recently closed
             if (tab.DashDoc.embedContainer === this.Document) tab.DashDoc.embedContainer = undefined;
             if (!tab.DashDoc.embedContainer) Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', tab.DashDoc, undefined, true, true);
-            Doc.RemoveDocFromList(tab.DashDoc[DocData], 'proto_embeddings', tab.DashDoc);
+            Doc.RemoveEmbedding(tab.DashDoc, tab.DashDoc);
         }
         if (CollectionDockingView.Instance) {
             const dview = CollectionDockingView.Instance.Document;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 89e72152a..54314f62c 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -135,14 +135,15 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return docs.map((d, i) => {
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
+            const trans = () => this.getDocTransition(d);
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
             // just getting the style
-            const style = this.isStackingView ? { margin: this.Document._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            const style = this.isStackingView ? { margin: this.Document._stacking_alignCenter ? 'auto' : undefined, transition: trans(), width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             // So we're choosing whether we're going to render a column or a masonry doc
             return (
                 <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
-                    {this.getDisplayDoc(d, width, i)}
+                    {this.getDisplayDoc(d, width, trans, i)}
                 </div>
             );
         });
@@ -309,7 +310,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     childFitWidth = (doc: Doc) => Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null));
     // this is what renders the document that you see on the screen
     // called in Children: this actually adds a document to our children list
-    getDisplayDoc(doc: Doc, width: () => number, count: number) {
+    getDisplayDoc(doc: Doc, width: () => number, trans: () => string, count: number) {
         const dataDoc = doc.isTemplateDoc || doc.isTemplateForField ? this._props.TemplateDataDocument : undefined;
         const height = () => this.getDocHeight(doc);
         const panelHeight = () => (this.isStackingView ? height() : Math.min(height(), this._props.PanelHeight()));
@@ -330,6 +331,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 layout_fitWidth={this.childFitWidth}
                 isContentActive={doc.onClick ? this.isChildButtonContentActive : this.isChildContentActive}
                 onKey={this.onKeyDown}
+                DataTransition={trans}
                 onBrowseClickScript={this._props.onBrowseClickScript}
                 isDocumentActive={this.isContentActive}
                 LayoutTemplate={this._props.childLayoutTemplate}
@@ -379,6 +381,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
         return maxWidth;
     }
+    getDocTransition(d?: Doc) {
+        if (!d) return '';
+        return StrCast(d.dataTransition);
+    }
     getDocHeight(d?: Doc) {
         if (!d || d.hidden) return 0;
         const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.());
diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index ee5147428..38f6aa3e7 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -200,8 +200,7 @@ export class CollectionTimeView extends CollectionSubView() {
     }
     menuCallback = (x: number, y: number) => {
         ContextMenu.Instance.clearItems();
-        const docItems: ContextMenuProps[] = [];
-        const keySet: Set<string> = new Set();
+        const keySet: Set<string> = new Set(['tags']);
 
         this.childLayoutPairs.map(pair =>
             this._allFacets
@@ -209,7 +208,9 @@ export class CollectionTimeView extends CollectionSubView() {
                 .filter(fieldKey => fieldKey[0] !== '_' && (fieldKey === 'tags' || fieldKey[0] === toUpper(fieldKey)[0]))
                 .map(fieldKey => keySet.add(fieldKey))
         );
-        Array.from(keySet).map(fieldKey => docItems.push({ description: ':' + fieldKey, event: () => (this.layoutDoc._pivotField = fieldKey), icon: 'compress-arrows-alt' }));
+
+        const docItems: ContextMenuProps[] = Array.from(keySet).map(fieldKey => 
+                     ({ description: ':' + fieldKey, event: () => (this.layoutDoc._pivotField = fieldKey), icon: 'compress-arrows-alt' })); // prettier-ignore
         docItems.push({ description: ':default', event: () => (this.layoutDoc._pivotField = undefined), icon: 'compress-arrows-alt' });
         ContextMenu.Instance.addItem({ description: 'Pivot Fields ...', subitems: docItems, icon: 'eye' });
         ContextMenu.Instance.displayMenu(x, y, ':');
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 741013148..786301136 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -8,8 +8,8 @@ import { listSpec } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnNone, returnOne, returnTrue, returnZero } from '../../../Utils';
-import { DocUtils } from '../../documents/Documents';
+import { emptyFunction, returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnNone, returnOne, returnTrue, returnZero, Utils } from '../../../Utils';
+import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -27,6 +27,7 @@ import { CollectionFreeFormView } from './collectionFreeForm';
 import { CollectionSubView } from './CollectionSubView';
 import './CollectionTreeView.scss';
 import { TreeView } from './TreeView';
+import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type collectionTreeViewProps = {
@@ -51,6 +52,7 @@ export enum TreeViewType {
 
 @observer
 export class CollectionTreeView extends CollectionSubView<Partial<collectionTreeViewProps>>() {
+    public static AddTreeFunc = 'addTreeFolder(this.embedContainer)';
     private _treedropDisposer?: DragManager.DragDropDisposer;
     private _mainEle?: HTMLDivElement;
     private _titleRef?: HTMLDivElement | HTMLInputElement | null;
@@ -140,6 +142,17 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         if ((this._mainEle = ele)) this._treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.Document, this.onInternalPreDrop.bind(this));
     };
 
+    protected onInternalDrop(e: Event, de: DragManager.DropEvent) {
+        const res = super.onInternalDrop(e, de);
+        if (res && de.complete.docDragData) {
+            if (this.Document !== Doc.MyRecentlyClosed)
+                de.complete.docDragData.droppedDocuments.forEach(doc => {
+                    if (this.Document !== Doc.MyRecentlyClosed) Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, doc);
+                });
+        }
+        return res;
+    }
+
     protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent, dropAction: dropActionType) => {
         const dragData = de.complete.docDragData;
         if (dragData) {
@@ -150,9 +163,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         }
     };
 
-    configDrag = (dragData: DragManager.DocumentDragData) => {
-        dragData.treeViewDoc = this.Document;
-    };
+    dragConfig = (dragData: DragManager.DocumentDragData) => (dragData.treeViewDoc = this.Document);
 
     screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, -this._headerHeight);
 
@@ -163,34 +174,41 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         const value = DocListCast(targetDataDoc[this._props.fieldKey]);
         const result = value.filter(v => !docs.includes(v));
         if ((doc instanceof Doc ? [doc] : doc).some(doc => SelectionManager.Views.some(dv => Doc.AreProtosEqual(dv.Document, doc)))) SelectionManager.DeselectAll();
-        if (result.length !== value.length && doc instanceof Doc) {
-            const ind = DocListCast(targetDataDoc[this._props.fieldKey]).indexOf(doc);
-            const prev = ind && DocListCast(targetDataDoc[this._props.fieldKey])[ind - 1];
-            this._props.removeDocument?.(doc);
-            if (ind > 0 && prev) {
-                FormattedTextBox.SetSelectOnLoad(prev);
-                DocumentManager.Instance.getDocumentView(prev, this.DocumentView?.())?.select(false);
+        if (result.length !== value.length) {
+            if (doc instanceof Doc) {
+                const ind = DocListCast(targetDataDoc[this._props.fieldKey]).indexOf(doc);
+                const prev = ind && DocListCast(targetDataDoc[this._props.fieldKey])[ind - 1];
+                this._props.removeDocument?.(doc);
+                if (ind > 0 && prev) {
+                    FormattedTextBox.SetSelectOnLoad(prev);
+                    DocumentManager.Instance.getDocumentView(prev, this.DocumentView?.())?.select(false);
+                }
+                return true;
             }
-            return true;
+            return this._props.removeDocument?.(doc) ?? false;
         }
         return false;
     };
 
     @action
     addDoc = (docs: Doc | Doc[], relativeTo: Opt<Doc>, before?: boolean): boolean => {
-        const doAddDoc = (doc: Doc | Doc[]) =>
-            (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => {
-                const res = flg && Doc.AddDocToList(this.Document[DocData], this._props.fieldKey, doc, relativeTo, before);
-                res && Doc.SetContainer(doc, this.Document);
-                return res;
-            }, true);
+        const doclist = docs instanceof Doc ? [docs] : docs;
+        const addDocRelativeTo = (doc: Doc | Doc[]) => doclist.reduce((flg, doc) => flg && Doc.AddDocToList(this.Document[DocData], this._props.fieldKey, doc, relativeTo, before), true);
         if (this.Document.resolvedDataDoc instanceof Promise) return false;
-        return relativeTo === undefined ? this._props.addDocument?.(docs) || false : doAddDoc(docs);
+        const res = relativeTo === undefined ? this._props.addDocument?.(docs) || false : addDocRelativeTo(docs);
+        res &&
+            doclist.forEach(doc => {
+                Doc.SetContainer(doc, this.Document);
+                if (this.Document !== Doc.MyRecentlyClosed) Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, doc);
+            });
+        return res;
     };
     onContextMenu = (e: React.MouseEvent): void => {
         // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
+        const layoutItems: ContextMenuProps[] = [];
+        const menuDoc = ScriptCast(Cast(this.layoutDoc.layout_headerButton, Doc, null)?.onClick).script.originalScript === CollectionTreeView.AddTreeFunc;
+        menuDoc && layoutItems.push({ description: 'Create new folder', event: () => CollectionTreeView.addTreeFolder(this.Document), icon: 'paint-brush' });
         if (!Doc.noviceMode) {
-            const layoutItems: ContextMenuProps[] = [];
             layoutItems.push({
                 description: 'Make tree state ' + (this.Document.treeView_OpenIsTransient ? 'persistent' : 'transient'),
                 event: () => (this.Document.treeView_OpenIsTransient = !this.Document.treeView_OpenIsTransient),
@@ -198,7 +216,9 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
             });
             layoutItems.push({ description: (this.Document.treeView_HideHeaderFields ? 'Show' : 'Hide') + ' Header Fields', event: () => (this.Document.treeView_HideHeaderFields = !this.Document.treeView_HideHeaderFields), icon: 'paint-brush' });
             layoutItems.push({ description: (this.Document.treeView_HideTitle ? 'Show' : 'Hide') + ' Title', event: () => (this.Document.treeView_HideTitle = !this.Document.treeView_HideTitle), icon: 'paint-brush' });
-            ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' });
+        }
+        ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' });
+        if (!Doc.noviceMode) {
             const existingOnClick = ContextMenu.Instance.findByDescription('OnClick...');
             const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : [];
             onClicks.push({ description: 'Edit onChecked Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onCheckedClick'), 'edit onCheckedClick'), icon: 'edit' });
@@ -467,4 +487,13 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
             </div>
         );
     }
+    static addTreeFolder(container: Doc) {
+        TreeView._editTitleOnLoad = { id: Utils.GenerateGuid(), parent: undefined };
+        const opts = { title: 'Untitled folder', _dragOnlyWithinContainer: true, isFolder: true };
+        return Doc.AddDocToList(container, 'data', Docs.Create.TreeDocument([], opts, TreeView._editTitleOnLoad.id));
+    }
 }
+
+ScriptingGlobals.add(function addTreeFolder(doc: Doc) {
+    CollectionTreeView.addTreeFolder(doc);
+});
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 9bc3ef822..02aa76d82 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -520,6 +520,7 @@ interface TabMiniThumbProps {
     miniLeft: () => number;
 }
 
+@observer
 class TabMiniThumb extends React.Component<TabMiniThumbProps> {
     render() {
         return <div className="miniThumb" style={{ width: `${this.props.miniWidth()}% `, height: `${this.props.miniHeight()}% `, left: `${this.props.miniLeft()}% `, top: `${this.props.miniTop()}% ` }} />;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 0a1946f09..2ab1a5ac1 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -128,6 +128,10 @@
     position: relative;
     z-index: 1;
 
+    .treeView-rightButtons > .iconButton-container {
+        min-height: unset;
+    }
+
     .treeView-background {
         width: 100%;
         height: 100%;
@@ -220,13 +224,13 @@
 }
 
 .treeView-header-above {
-    border-top: black 1px solid;
+    border-top: red 1px solid;
 }
 
 .treeView-header-below {
-    border-bottom: black 1px solid;
+    border-bottom: red 1px solid;
 }
 
 .treeView-header-inside {
-    border: black 1px solid;
+    border: red 1px solid;
 }
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index be5737a25..85f7cf7fe 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -383,7 +383,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
     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);
+        return this.localAdd(folder);
     };
 
     preTreeDrop = (e: Event, de: DragManager.DropEvent, docDropAction: dropActionType) => {
@@ -424,6 +424,16 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         return false;
     };
 
+    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.Document.embedContainer));
+            return added;
+        };
+        return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
+    };
+
     dropping: boolean = false;
     dropDocuments(
         droppedDocuments: Doc[],
@@ -436,16 +446,8 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         canEmbed?: boolean
     ) {
         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.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 addDoc = inside ? this.localAdd : parentAddDoc;
         const canAdd = !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))) {
             const move = (!dropAction || canEmbed || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same' || dropAction === 'inSame') && moveDocument;
@@ -839,14 +841,13 @@ export class TreeView extends ObservableReactComponent<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(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.Document })?.result)),
             ...(this.Document.isFolder
-                ? folderOp
+                ? [makeFolder]
                 : Doc.IsSystem(this.Document)
                   ? []
                   : this.treeView.fileSysMode && this.Document === this.Document[DocData]
@@ -993,6 +994,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
                 onClickScript={this.onChildClick}
                 onDoubleClickScript={this.onChildDoubleClick}
                 dragAction={this._props.dragAction}
+                dragConfig={this.treeView.dragConfig}
                 moveDocument={this.move}
                 removeDocument={this._props.removeDoc}
                 ScreenToLocalTransform={this.getTransform}
@@ -1328,9 +1330,3 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
             });
     }
 }
-
-ScriptingGlobals.add(function TreeView_addNewFolder() {
-    TreeView._editTitleOnLoad = { id: Utils.GenerateGuid(), parent: undefined };
-    const opts = { title: 'Untitled folder', _dragOnlyWithinContainer: true, isFolder: true };
-    return Doc.AddDocToList(Doc.MyFilesystem, 'data', Docs.Create.TreeDocument([], opts, TreeView._editTitleOnLoad.id));
-});
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
deleted file mode 100644
index b44acfce8..000000000
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.collectionfreeformlinkview-linkLine {
-    stroke: black;
-    opacity: 0.8;
-    stroke-width: 3px;
-    transition: opacity 0.5s ease-in;
-    fill: transparent;
-}
-.collectionfreeformlinkview-linkText {
-    stroke: rgb(0, 0, 0);
-    pointer-events: all;
-    cursor: move;
-}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
deleted file mode 100644
index 1b9627bb6..000000000
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { Doc, Field } from '../../../../fields/Doc';
-import { Brushed, DocCss } from '../../../../fields/DocSymbols';
-import { Id } from '../../../../fields/FieldSymbols';
-import { List } from '../../../../fields/List';
-import { Cast, NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils';
-import { LinkManager } from '../../../util/LinkManager';
-import { SelectionManager } from '../../../util/SelectionManager';
-import { SettingsManager } from '../../../util/SettingsManager';
-import { SnappingManager } from '../../../util/SnappingManager';
-import { Colors } from '../../global/globalEnums';
-import { DocumentView } from '../../nodes/DocumentView';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
-import './CollectionFreeFormLinkView.scss';
-
-export interface CollectionFreeFormLinkViewProps {
-    A: DocumentView;
-    B: DocumentView;
-    LinkDocs: Doc[];
-}
-
-@observer
-export class CollectionFreeFormLinkView extends ObservableReactComponent<CollectionFreeFormLinkViewProps> {
-    @observable _opacity: number = 0;
-    @observable _start = 0;
-    _anchorDisposer: IReactionDisposer | undefined;
-    _timeout: NodeJS.Timeout | undefined;
-    constructor(props: any) {
-        super(props);
-        makeObservable(this);
-    }
-
-    componentWillUnmount() {
-        this._anchorDisposer?.();
-    }
-    @action timeout: any = action(() => Date.now() < this._start++ + 1000 && (this._timeout = setTimeout(this.timeout, 25)));
-    componentDidMount() {
-        this._anchorDisposer = reaction(
-            () => [
-                this._props.A.screenToViewTransform(),
-                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
-                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
-                this._props.B.screenToViewTransform(),
-                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
-                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
-            ],
-            action(() => {
-                this._start = Date.now();
-                this._timeout && clearTimeout(this._timeout);
-                this._timeout = setTimeout(this.timeout, 25);
-                setTimeout(this.placeAnchors, 10); // when docs are dragged, their transforms will update before a render has been performed.  placeanchors needs to come after a render to find things in the dom.  a 0 timeout will still come before the render
-            }),
-            { fireImmediately: true }
-        );
-    }
-    placeAnchors = () => {
-        const { A, B, LinkDocs } = this._props;
-        const linkDoc = LinkDocs[0];
-        if (SnappingManager.IsDragging || !A.ContentDiv || !B.ContentDiv) return;
-        setTimeout(
-            action(() => (this._opacity = 0.75)),
-            0
-        ); // since the render code depends on querying the Dom through getBoudndingClientRect, we need to delay triggering render()
-        setTimeout(
-            action(() => (!LinkDocs.length || !(linkDoc.link_displayLine || Doc.UserDoc().showLinkLines)) && (this._opacity = 0.05)),
-            750
-        ); // this will unhighlight the link line.
-        const a = A.ContentDiv.getBoundingClientRect();
-        const b = B.ContentDiv.getBoundingClientRect();
-        const { left: aleft, top: atop, width: awidth, height: aheight } = A.ContentDiv.parentElement!.getBoundingClientRect();
-        const { left: bleft, top: btop, width: bwidth, height: bheight } = B.ContentDiv.parentElement!.getBoundingClientRect();
-        const apt = Utils.closestPtBetweenRectangles(aleft, atop, awidth, aheight, bleft, btop, bwidth, bheight, a.left + a.width / 2, a.top + a.height / 2);
-        const bpt = Utils.closestPtBetweenRectangles(bleft, btop, bwidth, bheight, aleft, atop, awidth, aheight, apt.point.x, apt.point.y);
-
-        // really hacky stuff to make the LinkAnchorBox display where we want it to:
-        //   if there's an element in the DOM with a classname containing a link anchor's id,
-        //   then that DOM element is a hyperlink source for the current anchor and we want to place our link box at it's top right
-        //   otherwise, we just use the computed nearest point on the document boundary to the target Document
-        const targetAhyperlink = Array.from(window.document.getElementsByClassName((linkDoc.link_anchor_1 as Doc)[Id])).lastElement();
-        const targetBhyperlink = Array.from(window.document.getElementsByClassName((linkDoc.link_anchor_2 as Doc)[Id])).lastElement();
-        if ((!targetAhyperlink && !a.width) || (!targetBhyperlink && !b.width)) return;
-        if (!targetAhyperlink) {
-            if (linkDoc.link_autoMoveAnchors) {
-                linkDoc.link_anchor_1_x = ((apt.point.x - aleft) / awidth) * 100;
-                linkDoc.link_anchor_1_y = ((apt.point.y - atop) / aheight) * 100;
-            }
-        } else {
-            const m = targetAhyperlink.getBoundingClientRect();
-            const mp = A.screenToViewTransform().transformPoint(m.right, m.top + 5);
-            const mpx = mp[0] / A._props.PanelWidth();
-            const mpy = mp[1] / A._props.PanelHeight();
-            if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_1_x = mpx * 100;
-            if (mpy >= 0 && mpy <= 1) linkDoc.link_anchor_1_y = mpy * 100;
-            if (getComputedStyle(targetAhyperlink).fontSize === '0px') linkDoc.opacity = 0;
-            else linkDoc.opacity = 1;
-        }
-        if (!targetBhyperlink) {
-            if (linkDoc.link_autoMoveAnchors) {
-                linkDoc.link_anchor_2_x = ((bpt.point.x - bleft) / bwidth) * 100;
-                linkDoc.link_anchor_2_y = ((bpt.point.y - btop) / bheight) * 100;
-            }
-        } else {
-            const m = targetBhyperlink.getBoundingClientRect();
-            const mp = B.screenToViewTransform().transformPoint(m.right, m.top + 5);
-            const mpx = mp[0] / B._props.PanelWidth();
-            const mpy = mp[1] / B._props.PanelHeight();
-            if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_2_x = mpx * 100;
-            if (mpy >= 0 && mpy <= 1) linkDoc.link_anchor_2_y = mpy * 100;
-            if (getComputedStyle(targetBhyperlink).fontSize === '0px') linkDoc.opacity = 0;
-            else linkDoc.opacity = 1;
-        }
-    };
-
-    pointerDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(
-            this,
-            e,
-            (e, down, delta) => {
-                this._props.LinkDocs[0].link_relationship_OffsetX = NumCast(this._props.LinkDocs[0].link_relationship_OffsetX) + delta[0];
-                this._props.LinkDocs[0].link_relationship_OffsetY = NumCast(this._props.LinkDocs[0].link_relationship_OffsetY) + delta[1];
-                return false;
-            },
-            emptyFunction,
-            action(() => {
-                SelectionManager.DeselectAll();
-                SelectionManager.SelectSchemaViewDoc(this._props.LinkDocs[0], true);
-                LinkManager.currentLink = this._props.LinkDocs[0];
-                this.toggleProperties();
-                // OverlayView.Instance.addElement(
-                //     <LinkEditor sourceDoc={this._props.A.Document} linkDoc={this._props.LinkDocs[0]}
-                //         showLinks={action(() => { })}
-                //     />, { x: 300, y: 300 });
-            })
-        );
-    };
-
-    visibleY = (el: any) => {
-        let rect = el.getBoundingClientRect();
-        const top = rect.top,
-            height = rect.height;
-        var el = el.parentNode;
-        while (el && el !== document.body) {
-            if (el.className === 'tabDocView-content') break;
-            rect = el.getBoundingClientRect?.();
-            if (rect?.width) {
-                if (top <= rect.bottom === false && getComputedStyle(el).overflow === 'hidden') return rect.bottom;
-                // Check if the element is out of view due to a container scrolling
-                if (top + height <= rect.top && getComputedStyle(el).overflow === 'hidden') return rect.top;
-            }
-            el = el.parentNode;
-        }
-        // Check its within the document viewport
-        return top; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
-    };
-    visibleX = (el: any) => {
-        let rect = el.getBoundingClientRect();
-        const left = rect.left,
-            width = rect.width;
-        var el = el.parentNode;
-        while (el && el !== document.body) {
-            rect = el?.getBoundingClientRect();
-            if (rect?.width) {
-                if (left <= rect.right === false && getComputedStyle(el).overflow === 'hidden') return rect.right;
-                // Check if the element is out of view due to a container scrolling
-                if (left + width <= rect.left && getComputedStyle(el).overflow === 'hidden') return rect.left;
-            }
-            el = el.parentNode;
-        }
-        // Check its within the document viewport
-        return left; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
-    };
-
-    @action
-    toggleProperties = () => {
-        if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) {
-            SettingsManager.Instance.propertiesWidth = 250;
-        }
-    };
-
-    @action
-    onClickLine = () => {
-        SelectionManager.DeselectAll();
-        SelectionManager.SelectSchemaViewDoc(this._props.LinkDocs[0], true);
-        LinkManager.currentLink = this._props.LinkDocs[0];
-        this.toggleProperties();
-    };
-
-    @computed.struct get renderData() {
-        this._start;
-        SnappingManager.IsDragging;
-        const { A, B, LinkDocs } = this._props;
-        if (!A.ContentDiv || !B.ContentDiv || !LinkDocs.length) return undefined;
-        const acont = A.ContentDiv.getElementsByClassName('linkAnchorBox-cont');
-        const bcont = B.ContentDiv.getElementsByClassName('linkAnchorBox-cont');
-        const adiv = acont.length ? acont[0] : A.ContentDiv;
-        const bdiv = bcont.length ? bcont[0] : B.ContentDiv;
-        for (let apdiv = adiv; apdiv; apdiv = apdiv.parentElement as any) if ((apdiv as any).hidden) return;
-        for (let bpdiv = bdiv; bpdiv; bpdiv = bpdiv.parentElement as any) if ((bpdiv as any).hidden) return;
-        const a = adiv.getBoundingClientRect();
-        const b = bdiv.getBoundingClientRect();
-        const atop = this.visibleY(adiv);
-        const btop = this.visibleY(bdiv);
-        if (!a.width || !b.width) return undefined;
-        const aDocBounds = (A._props as any).DocumentView?.().getBounds || { left: 0, right: 0, top: 0, bottom: 0 };
-        const bDocBounds = (B._props as any).DocumentView?.().getBounds || { left: 0, right: 0, top: 0, bottom: 0 };
-        const aleft = this.visibleX(adiv);
-        const bleft = this.visibleX(bdiv);
-        const aclipped = aleft !== a.left || atop !== a.top;
-        const bclipped = bleft !== b.left || btop !== b.top;
-        if (aclipped && bclipped) return undefined;
-        const clipped = aclipped || bclipped;
-        const pt1inside = NumCast(LinkDocs[0].link_anchor_1_x) % 100 !== 0 && NumCast(LinkDocs[0].link_anchor_1_y) % 100 !== 0;
-        const pt2inside = NumCast(LinkDocs[0].link_anchor_2_x) % 100 !== 0 && NumCast(LinkDocs[0].link_anchor_2_y) % 100 !== 0;
-        const pt1 = [aleft + a.width / 2, atop + a.height / 2];
-        const pt2 = [bleft + b.width / 2, btop + b.width / 2];
-        const pt2vec = pt2inside ? [-0.7071, 0.7071] : [(bDocBounds.left + bDocBounds.right) / 2 - pt2[0], (bDocBounds.top + bDocBounds.bottom) / 2 - pt2[1]];
-        const pt1vec = pt1inside ? [-0.7071, 0.7071] : [(aDocBounds.left + aDocBounds.right) / 2 - pt1[0], (aDocBounds.top + aDocBounds.bottom) / 2 - pt1[1]];
-        const pt1len = Math.sqrt(pt1vec[0] * pt1vec[0] + pt1vec[1] * pt1vec[1]);
-        const pt2len = Math.sqrt(pt2vec[0] * pt2vec[0] + pt2vec[1] * pt2vec[1]);
-        const ptlen = Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0]) + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1])) / 2;
-        const pt1norm = clipped ? [0, 0] : [-(pt1vec[0] / pt1len) * ptlen, -(pt1vec[1] / pt1len) * ptlen];
-        const pt2norm = clipped ? [0, 0] : [-(pt2vec[0] / pt2len) * ptlen, -(pt2vec[1] / pt2len) * ptlen];
-        const pt1normlen = Math.sqrt(pt1norm[0] * pt1norm[0] + pt1norm[1] * pt1norm[1]) || 1;
-        const pt2normlen = Math.sqrt(pt2norm[0] * pt2norm[0] + pt2norm[1] * pt2norm[1]) || 1;
-        const pt1normalized = [pt1norm[0] / pt1normlen, pt1norm[1] / pt1normlen];
-        const pt2normalized = [pt2norm[0] / pt2normlen, pt2norm[1] / pt2normlen];
-        const aActive = A.IsSelected || A.Document[Brushed];
-        const bActive = B.IsSelected || B.Document[Brushed];
-
-        const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetX);
-        const textY = (pt1[1] + pt2[1]) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetY);
-        const link = this._props.LinkDocs[0];
-        return {
-            a,
-            b,
-            pt1norm,
-            pt2norm,
-            aActive,
-            bActive,
-            textX,
-            textY,
-            // fully connected
-            // pt1,
-            // pt2,
-            // this code adds space between links
-            pt1: link.link_displayArrow ? [pt1[0] + pt1normalized[0] * 3 * NumCast(link.link_displayArrow_scale, 4), pt1[1] + pt1normalized[1] * 3 * NumCast(link.link_displayArrow_scale, 3)] : pt1,
-            pt2: link.link_displayArrow ? [pt2[0] + pt2normalized[0] * 3 * NumCast(link.link_displayArrow_scale, 4), pt2[1] + pt2normalized[1] * 3 * NumCast(link.link_displayArrow_scale, 3)] : pt2,
-        };
-    }
-
-    render() {
-        if (!this.renderData) return null;
-
-        const link = this._props.LinkDocs[0];
-        const { a, b, pt1norm, pt2norm, aActive, bActive, textX, textY, pt1, pt2 } = this.renderData;
-        const linkRelationship = Field.toString(link?.link_relationship as any as Field); //get string representing relationship
-        const linkRelationshipList = Doc.UserDoc().link_relationshipList as List<string>;
-        const linkColorList = Doc.UserDoc().link_ColorList as List<string>;
-        const linkRelationshipSizes = Doc.UserDoc().link_relationshipSizes as List<number>;
-        const currRelationshipIndex = linkRelationshipList.indexOf(linkRelationship);
-        const linkDescription = Field.toString(link.link_description as any as Field).split('\n')[0];
-
-        const linkSize = Doc.noviceMode || currRelationshipIndex === -1 || currRelationshipIndex >= linkRelationshipSizes.length ? -1 : linkRelationshipSizes[currRelationshipIndex];
-
-        //access stroke color using index of the relationship in the color list (default black)
-        // const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? StrCast(link._backgroundColor, 'black') : linkColorList[currRelationshipIndex];
-        const stroke = link.link_color ? Field.toString(link.link_color as any as Field) : '#449ef7';
-        // const hexStroke = this.rgbToHex(stroke)
-
-        //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has)
-        //thickness varies linearly from 3px to 12px for increasing link count
-        const strokeWidth = linkSize === -1 ? '3px' : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + 'px';
-
-        const arrowScale = NumCast(link.link_displayArrow_scale, 3);
-        return link.opacity === 0 || !a.width || !b.width || (!(Doc.UserDoc().showLinkLines || link.link_displayLine) && !aActive && !bActive) ? null : (
-            <>
-                <defs>
-                    <marker id={`${link[Id] + 'arrowhead'}`} markerWidth={`${4 * arrowScale}`} markerHeight={`${3 * arrowScale}`} refX="0" refY={`${1.5 * arrowScale}`} orient="auto">
-                        <polygon points={`0 0, ${3 * arrowScale} ${1.5 * arrowScale}, 0 ${3 * arrowScale}`} fill={stroke} />
-                    </marker>
-                    <filter id="outline">
-                        <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="1" />
-                        <feFlood floodColor={`${Colors.DARK_GRAY}`} />
-                        <feComposite in2="expanded" operator="in" />
-                        <feComposite in="SourceGraphic" />
-                    </filter>
-                    <filter x="0" y="0" width="1" height="1" id={`${link[Id] + 'background'}`}>
-                        <feFlood floodColor={`${StrCast(link._backgroundColor, 'white')}`} result="bg" />
-                        <feMerge>
-                            <feMergeNode in="bg" />
-                            <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                    </filter>
-                </defs>
-                <path
-                    filter={LinkManager.currentLink === link ? 'url(#outline)' : ''}
-                    fill="pink"
-                    stroke="antiquewhite"
-                    strokeWidth="4"
-                    className="collectionfreeformlinkview-linkLine"
-                    style={{ pointerEvents: 'visibleStroke', opacity: this._opacity, stroke, strokeWidth }}
-                    onClick={this.onClickLine}
-                    d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`}
-                    markerEnd={link.link_displayArrow ? `url(#${link[Id] + 'arrowhead'})` : ''}
-                />
-                {link.show_description &&
-                    (textX === undefined || !linkDescription ? null : (
-                        <text filter={`url(#${link[Id] + 'background'})`} className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown}>
-                            <tspan>&nbsp;</tspan>
-                            <tspan dy="2">{linkDescription.substring(0, 50) + (linkDescription.length > 50 ? '...' : '')}</tspan>
-                            <tspan dy="2">&nbsp;</tspan>
-                        </text>
-                    ))}
-            </>
-        );
-    }
-}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
deleted file mode 100644
index 4ada1731f..000000000
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// TODO: change z-index to -1 when a modal is active?
-
-.collectionfreeformlinksview-svgCanvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-}
-.collectionfreeformlinksview-container {
-    pointer-events: none;
-}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
deleted file mode 100644
index e5b6c366f..000000000
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { computed } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { Id } from '../../../../fields/FieldSymbols';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { LightboxView } from '../../LightboxView';
-import { CollectionFreeFormLinkView } from './CollectionFreeFormLinkView';
-import './CollectionFreeFormLinksView.scss';
-
-@observer
-export class CollectionFreeFormLinksView extends React.Component {
-    @computed get uniqueConnections() {
-        return Array.from(new Set(DocumentManager.Instance.LinkedDocumentViews))
-            .filter(c => !LightboxView.LightboxDoc || (LightboxView.Contains(c.a) && LightboxView.Contains(c.b)))
-            .map(c => <CollectionFreeFormLinkView key={c.l[Id]} A={c.a} B={c.b} LinkDocs={[c.l]} />);
-    }
-
-    render() {
-        return (
-            <div className="collectionfreeformlinksview-container">
-                <svg className="collectionfreeformlinksview-svgCanvas">{this.uniqueConnections}</svg>
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 7d3acaea7..9e7d364ea 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -176,6 +176,11 @@
     // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions.
     touch-action: none;
     transform-origin: top left;
+    > svg {
+        height: 100%;
+        width: 100%;
+        margin: auto;
+    }
 
     .collectionfreeformview-placeholder {
         background: gray;
@@ -270,34 +275,31 @@
     padding: 10px;
 
     .msg {
-      position: relative;
-      // display: block;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-      
+        position: relative;
+        // display: block;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        user-select: none;
     }
-    
+
     .gif-container {
-      position: relative;
-      margin-top: 5px;
-      // display: block;
-
-      justify-content: center;
-      align-items: center;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-
-      
+        position: relative;
+        margin-top: 5px;
+        // display: block;
+
+        justify-content: center;
+        align-items: center;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+
         .gif {
             background-color: transparent;
             height: 300px;
         }
     }
-
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index fb9d42bc7..1e0840495 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -5,11 +5,12 @@ import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
 import { DocData, Height, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkData, InkField, InkTool, PointData, Segment } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
+import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
@@ -22,8 +23,8 @@ import { Docs, DocUtils } from '../../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../../util/DragManager';
-import { FollowLinkScript } from '../../../util/LinkFollower';
 import { ReplayMovements } from '../../../util/ReplayMovements';
+import { CompileScript } from '../../../util/Scripting';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { freeformScrollMode, SettingsManager } from '../../../util/SettingsManager';
@@ -39,7 +40,7 @@ import { LightboxView } from '../../LightboxView';
 import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView';
 import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
 import { DocumentView, OpenWhere } from '../../nodes/DocumentView';
-import { FocusViewOptions, FieldViewProps } from '../../nodes/FieldView';
+import { FieldViewProps, FocusViewOptions } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { PinProps, PresBox } from '../../nodes/trails/PresBox';
 import { CreateImage } from '../../nodes/WebBoxRenderer';
@@ -78,6 +79,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return 'CollectionFreeFormView(' + this.Document.title?.toString() + ')';
     } // this makes mobx trace() statements more descriptive
 
+    @observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, '');
+    @computed get paintFunc() {
+        const field = this.layoutDoc[this.fieldKey];
+        const paintFunc = StrCast(Field.toJavascriptString(Cast(field, RichTextField, null)?.Text as Field)).trim();
+        return !paintFunc
+            ? ''
+            : paintFunc.includes('dashDiv')
+              ? `const dashDiv = document.querySelector('#${this._paintedId}');
+                    (async () => {  ${paintFunc} })()`
+              : paintFunc;
+    }
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -230,6 +242,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     onChildClickHandler = () => this._props.childClickScript || ScriptCast(this.Document.onChildClick);
     onChildDoubleClickHandler = () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick);
     elementFunc = () => this._layoutElements;
+    viewTransition = () => (this._panZoomTransition ? '' + this._panZoomTransition : undefined);
     fitContentOnce = () => {
         const vals = this.fitToContentVals;
         this.layoutDoc._freeform_panX = vals.bounds.cx;
@@ -301,10 +314,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     focus = (anchor: Doc, options: FocusViewOptions) => {
         if (this._lightboxDoc) return;
         if (anchor === this.Document) {
-            if (options.willZoomCentered && options.zoomScale) {
-                this.fitContentOnce();
-                options.didMove = true;
-            }
+            // if (options.willZoomCentered && options.zoomScale) {
+            //     this.fitContentOnce();
+            //     options.didMove = true;
+            // }
         }
         if (anchor.type !== DocumentType.CONFIG && !DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]).includes(anchor)) return;
         const xfToCollection = options?.docTransform ?? Transform.Identity();
@@ -368,28 +381,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             !d._keepZWhenDragged && (d.zIndex = zsorted.length + 1 + i); // bringToFront
         }
 
-        if (this.layoutDoc._autoArrange || de.metaKey) {
-            const sorted = this.childLayoutPairs.slice().sort((a, b) => NumCast(a.layout.y) - NumCast(b.layout.y));
-            sorted.splice(
-                sorted.findIndex(pair => pair.layout === refDoc),
-                1
-            );
-            if (sorted.length && refDoc && NumCast(sorted[0].layout.y) < NumCast(refDoc.y)) {
-                const topIndexed = NumCast(refDoc.y) < NumCast(sorted[0].layout.y) + NumCast(sorted[0].layout._height) / 2;
-                const deltay = sorted.length > 1 ? NumCast(refDoc.y) - (NumCast(sorted[0].layout.y) + (topIndexed ? 0 : NumCast(sorted[0].layout._height))) : 0;
-                const deltax = sorted.length > 1 ? NumCast(refDoc.x) - NumCast(sorted[0].layout.x) : 0;
-
-                let lastx = NumCast(refDoc.x);
-                let lasty = NumCast(refDoc.y) + (topIndexed ? 0 : NumCast(refDoc._height));
-                runInAction(() =>
-                    sorted.slice(1).forEach((pair, i) => {
-                        lastx = pair.layout.x = lastx + deltax;
-                        lasty = (pair.layout.y = lasty + deltay) + (topIndexed ? 0 : NumCast(pair.layout._height));
-                    })
-                );
-            }
-        }
-
         (docDragData.droppedDocuments.length === 1 || de.shiftKey) && this.updateClusterDocs(docDragData.droppedDocuments);
         return true;
     }
@@ -416,27 +407,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y);
             let added = false;
             //  do nothing if link is dropped into any freeform view parent of dragged document
-            const source =
-                !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.Document
-                    ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' })
-                    : Docs.Create.FontIconDocument({
-                          title: 'anchor',
-                          icon_label: '',
-                          followLinkToggle: true,
-                          icon: 'map-pin',
-                          x,
-                          y,
-                          backgroundColor: '#ACCEF7',
-                          layout_hideAllLinks: true,
-                          layout_hideLinkButton: true,
-                          _width: 15,
-                          _height: 15,
-                          _xPadding: 0,
-                          onClick: FollowLinkScript(),
-                      });
+            const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' });
             added = this._props.addDocument?.(source) ? true : false;
             de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed
-
+            if (de.complete.linkDocument) {
+                de.complete.linkDocument.layout_isSvg = true;
+                this.addDocument(de.complete.linkDocument);
+            }
             e.stopPropagation();
             !added && e.preventDefault();
             return added;
@@ -1005,7 +982,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
         if (!this.isAnnotationOverlay && clamp) {
             // this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds
-            const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc);
+            const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc && doc.type !== DocumentType.LINK);
             const measuredDocs = docs
                 .map(doc => ({ pos: { x: NumCast(doc.x), y: NumCast(doc.y) }, size: { width: NumCast(doc._width), height: NumCast(doc._height) } }))
                 .filter(({ pos, size }) => pos && size)
@@ -1232,6 +1209,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 onKey={this.onKeyDown}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
                 onBrowseClickScript={this.onBrowseClickHandler}
+                bringToFront={this.bringToFront}
                 ScreenToLocalTransform={childLayout.z ? this.ScreenToLocalBoxXf : this.ScreenToContentsXf}
                 PanelWidth={childLayout[Width]}
                 PanelHeight={childLayout[Height]}
@@ -1487,6 +1465,18 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 );
             })
         );
+
+        this._disposers.paintFunc = reaction(
+            () => ({ code: this.paintFunc, first: this._firstRender, width: this.Document._width, height: this.Document._height }),
+            ({ code, first }) => {
+                if (!code.includes('dashDiv')) {
+                    const script = CompileScript(code, { params: { docView: 'any' }, typecheck: false, editable: true });
+                    if (script.compiled) script.run({ this: this.DocumentView?.() });
+                } else code && !first && eval(code);
+            },
+            { fireImmediately: true }
+        );
+
         this._disposers.layoutElements = reaction(
             // layoutElements can't be a computed value because doLayoutComputation() is an action that has side effect of updating clusters
             () => this.doInternalLayoutComputation,
@@ -1630,9 +1620,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     toggleResetView = () => {
         this.dataDoc[this.autoResetFieldKey] = !this.dataDoc[this.autoResetFieldKey];
         if (this.dataDoc[this.autoResetFieldKey]) {
-            this.dataDoc[this.panXFieldKey + '_reset'] = this.dataDoc[this.panXFieldKey];
-            this.dataDoc[this.panYFieldKey + '_reset'] = this.dataDoc[this.panYFieldKey];
-            this.dataDoc[this.scaleFieldKey + '_reset'] = this.dataDoc[this.scaleFieldKey];
+            this.dataDoc[this.panXFieldKey + '_reset'] = this.layoutDoc[this.panXFieldKey];
+            this.dataDoc[this.panYFieldKey + '_reset'] = this.layoutDoc[this.panYFieldKey];
+            this.dataDoc[this.scaleFieldKey + '_reset'] = this.layoutDoc[this.scaleFieldKey];
         }
     };
 
@@ -1737,12 +1727,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : [];
         !this.Document.isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' });
         !this.Document.isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' });
-        !Doc.noviceMode &&
-            appearanceItems.push({
-                description: 'Toggle auto arrange',
-                event: () => (this.layoutDoc._autoArrange = !this.layoutDoc._autoArrange),
-                icon: 'compress-arrows-alt',
-            });
         if (this._props.setContentViewBox === emptyFunction) {
             !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
             return;
@@ -1871,7 +1855,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         );
     }
     get pannableContents() {
-        this.incrementalRender();
+        this.incrementalRender(); // needs to happen synchronously or freshly typed text documents will flash and miss their first characters
         return (
             <CollectionFreeFormPannableContents
                 Document={this.Document}
@@ -1949,6 +1933,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return (
             <div
                 className="collectionfreeformview-container"
+                id={this._paintedId}
                 ref={r => {
                     this.createDashEventsTarget(r);
                     this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
@@ -1970,7 +1955,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     width: `${100 / (this.nativeDimScaling || 1)}%`,
                     height: this._props.getScrollHeight?.() ?? `${100 / (this.nativeDimScaling || 1)}%`,
                 }}>
-                {this._lightboxDoc ? (
+                {this.paintFunc ? null : this._lightboxDoc ? (
                     <div style={{ padding: 15, width: '100%', height: '100%' }}>
                         <DocumentView
                             {...this._props}
@@ -2065,6 +2050,7 @@ ScriptingGlobals.add(function sendToBack(doc: Doc) {
     SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document, true));
 });
 ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
+    // creating a dataviz doc to represent the schema table
     SelectionManager.Views.forEach(view => {
         if (!view.layoutDoc.schema_columnKeys) {
             view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date']);
@@ -2085,15 +2071,15 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
             csvRows.push(eachRow);
         }
         const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' });
-        const options = { x: 0, y: -300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' };
+        const options = { x: 0, y: 0, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' };
         const file = new File([blob], 'schemaTable', options);
         const loading = Docs.Create.LoadingDocument(file, options);
         loading.presentation_openInLightbox = true;
         DocUtils.uploadFileToDoc(file, {}, loading);
 
+        // holds the doc in a popup until it is dragged onto a canvas
         if (view.ComponentView?.addDocument) {
-            //  loading.dataViz_fromSchema = true;
-            loading.dataViz_asSchema = view.layoutDoc;
+            loading._dataViz_asSchema = view.layoutDoc;
             SchemaCSVPopUp.Instance.setView(view);
             SchemaCSVPopUp.Instance.setTarget(view.layoutDoc);
             SchemaCSVPopUp.Instance.setDataVizDoc(loading);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c2f8232c6..a417d777a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -219,7 +219,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
 
         const scrollMode = e.altKey ? (Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? freeformScrollMode.Zoom : freeformScrollMode.Pan) : Doc.UserDoc().freeformScrollMode;
         // allow marquee if right drag/meta drag, or pan mode
-        if (e.button === 2 || e.metaKey || scrollMode === freeformScrollMode.Pan) {
+        if (e.button === 2 || e.metaKey || (this._props.isContentActive() && scrollMode === freeformScrollMode.Pan && Doc.ActiveTool === InkTool.None)) {
             this.setPreviewCursor(e.clientX, e.clientY, true, false, this._props.Document);
             e.preventDefault();
         } else PreviewCursor.Instance.Visible = false;
diff --git a/src/client/views/collections/collectionFreeForm/index.ts b/src/client/views/collections/collectionFreeForm/index.ts
index 702dc8d42..9a54ce63a 100644
--- a/src/client/views/collections/collectionFreeForm/index.ts
+++ b/src/client/views/collections/collectionFreeForm/index.ts
@@ -1,7 +1,5 @@
-export * from "./CollectionFreeFormLayoutEngines";
-export * from "./CollectionFreeFormLinkView";
-export * from "./CollectionFreeFormLinksView";
-export * from "./CollectionFreeFormRemoteCursors";
-export * from "./CollectionFreeFormView";
-export * from "./MarqueeOptionsMenu";
-export * from "./MarqueeView";
\ No newline at end of file
+export * from './CollectionFreeFormLayoutEngines';
+export * from './CollectionFreeFormRemoteCursors';
+export * from './CollectionFreeFormView';
+export * from './MarqueeOptionsMenu';
+export * from './MarqueeView';
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 29d121974..fed4e89cf 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -18,17 +18,21 @@
 
         .schema-add {
             position: relative;
-            height: 30;
+            height: 35;
             display: flex;
             align-items: center;
+            top: -10px;
             width: 100%;
             text-align: right;
             background: lightgray;
             .editableView-container-editing {
                 width: 100%;
+                height: 35px;
+                margin: 20px;
             }
             .editableView-input {
                 width: 100%;
+                margin: 20px;
                 float: right;
                 text-align: right;
                 background: yellow;
@@ -128,7 +132,7 @@
 
     .row-menu {
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
     }
 }
 
@@ -224,7 +228,10 @@
         display: flex;
         flex-direction: row;
         min-width: 50px;
-        justify-content: flex-end;
+        justify-content: center;
+        .iconButton-container {
+            min-width: unset !important;
+        }
     }
 
     .row-cells {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 581425d77..31b4a2dd4 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -25,6 +25,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export enum ColumnType {
     Number,
@@ -69,7 +70,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     public static _minColWidth: number = 25;
     public static _rowMenuWidth: number = 60;
     public static _previewDividerWidth: number = 4;
-    public static _newNodeInputHeight: number = 20;
+    public static _newNodeInputHeight: number = Number(SCHEMA_NEW_NODE_HEIGHT);
     public fieldInfos = new ObservableMap<string, FInfo>();
 
     @observable _menuKeys: string[] = [];
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index f2fe0dde7..39fea2d2e 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -121,7 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
                     }}>
                     <IconButton
-                        tooltip="whether document interations are enabled"
+                        tooltip="whether document interactions are enabled"
                         icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />}
                         size={Size.XSMALL}
                         onPointerDown={e =>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index dbaa6e110..001ad5ab6 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -24,6 +24,11 @@ import { KeyValueBox } from '../../nodes/KeyValueBox';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { ColumnType, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
+import 'react-datepicker/dist/react-datepicker.css';
+import { Popup, Size, Type } from 'browndash-components';
+import { IconLookup, faCaretDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SettingsManager } from '../../../util/SettingsManager';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -162,7 +167,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             case ColumnType.Boolean: return <SchemaBoolCell {...this._props} />;
             case ColumnType.RTF: return <SchemaRTFCell {...this._props} />;
             case ColumnType.Enumeration: return <SchemaEnumerationCell {...this._props} options={this._props.getFinfo(this._props.fieldKey)?.values?.map(val => val.toString())} />;
-            case ColumnType.Date: // return <SchemaDateCell {...this._props} />;
+            case ColumnType.Date: return <SchemaDateCell {...this._props} />;
             default:  return this.defaultCellContent;
         }
     }
@@ -260,19 +265,39 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         return DateCast(this._props.Document[this._props.fieldKey]);
     }
 
-    @action
-    handleChange = (date: any) => {
+    handleChange = undoable((date: Date | null) => {
         // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } });
         // if (script.compiled) {
         //     this.applyToDoc(this._document, this._props.row, this._props.col, script.run);
         // } else {
         // ^ DateCast is always undefined for some reason, but that is what the field should be set to
-        this._props.Document[this._props.fieldKey] = new DateField(date as Date);
+        date && (this._props.Document[this._props.fieldKey] = new DateField(date));
         //}
-    };
+    }, 'date change');
 
     render() {
-        return <DatePicker dateFormat={'Pp'} selected={this.date.date} onChange={(date: any) => this.handleChange(date)} />;
+        const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
+        return (
+            <>
+                <div style={{ pointerEvents: 'none' }}>
+                    <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={e => {}} />
+                </div>
+                {pointerEvents === 'none' ? null : (
+                    <Popup
+                        icon={<FontAwesomeIcon size="sm" icon="caret-down" />}
+                        size={Size.XSMALL}
+                        type={Type.TERT}
+                        color={SettingsManager.userColor}
+                        background={SettingsManager.userBackgroundColor}
+                        popup={
+                            <div style={{ width: 'fit-content', height: '200px' }}>
+                                <DatePicker open={true} dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={this.handleChange} />
+                            </div>
+                        }
+                    />
+                )}
+            </>
+        );
     }
 }
 @observer
@@ -394,7 +419,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                             }),
                         }}
                         menuPortalTarget={this._props.menuTarget}
-                        menuPosition={'absolute'}
+                        menuPosition="absolute"
                         placeholder={StrCast(this._props.Document[this._props.fieldKey], 'select...')}
                         options={options}
                         isMulti={false}