Merge branch 'master' into presentation_updates

12 files changed, 491 insertions, 325 deletions

diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 30d5103bf..d0bfd0a41 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -315,6 +315,57 @@
     }
 }
 
+.webBox-urlEditor {
+    position: relative;
+    opacity: 0.9;
+    z-index: 9001;
+    transition: top .5s;
+
+    .urlEditor {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        padding-bottom: 10px;
+        overflow: hidden;
+        margin-top: 5px;
+        height: 35px;
+
+        .editorBase {
+            display: flex;
+
+            .editor-collapse {
+                transition: all .5s, opacity 0.3s;
+                position: absolute;
+                width: 40px;
+                transform-origin: top left;
+            }
+
+            .switchToText {
+                color: $main-accent;
+            }
+
+            .switchToText:hover {
+                color: $dark-color;
+            }
+        }
+
+        button:hover {
+            transform: scale(1);
+        }
+    }
+}
+
+.webpage-urlInput {
+    padding: 12px 10px 11px 10px;
+    border: 0px;
+    color: grey;
+    letter-spacing: 2px;
+    outline-color: black;
+    background: rgb(238, 238, 238);
+    width: 100%;
+    margin-right: 10px;
+    height: 100%;
+}
+
 .collectionFreeFormMenu-cont {
     display: inline-flex;
     position: relative;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index b2e55adc7..388eda2b3 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -11,14 +11,15 @@ import { Id } from "../../../fields/FieldSymbols";
 import { InkTool } from "../../../fields/InkField";
 import { List } from "../../../fields/List";
 import { ObjectField } from "../../../fields/ObjectField";
-import { RichTextField } from "../../../fields/RichTextField";
 import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from "../../../fields/ScriptField";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
+import { WebField } from "../../../fields/URLField";
 import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { DragManager } from "../../util/DragManager";
+import { Scripting } from "../../util/Scripting";
 import { SelectionManager } from "../../util/SelectionManager";
 import { undoBatch } from "../../util/UndoManager";
 import AntimodeMenu, { AntimodeMenuProps } from "../AntimodeMenu";
@@ -161,9 +162,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     };
     _viewCommand = {
         params: ["target"], title: "bookmark view",
-        script: "self.target._panX = self['target-panX']; self.target._panY = self['target-panY']; self.target._viewScale = self['target-viewScale'];",
-        immediate: undoBatch((source: Doc[]) => { this.target._panX = 0; this.target._panY = 0; this.target._viewScale = 1; }),
-        initialize: (button: Doc) => { button['target-panX'] = this.target._panX; button['target-panY'] = this.target._panY; button['target-viewScale'] = this.target._viewScale; },
+        script: "self.target._panX = self['target-panX']; self.target._panY = self['target-panY']; self.target._viewScale = self['target-viewScale']; gotoFrame(self.target, self['target-currentFrame']);",
+        immediate: undoBatch((source: Doc[]) => { this.target._panX = 0; this.target._panY = 0; this.target._viewScale = 1; this.target.currentFrame = 0; }),
+        initialize: (button: Doc) => { button['target-panX'] = this.target._panX; button['target-panY'] = this.target._panY; button['target-viewScale'] = this.target._viewScale; button['target-currentFrame'] = this.target.currentFrame; },
     };
     _clusterCommand = {
         params: ["target"], title: "fit content",
@@ -607,6 +608,158 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
             </div>;
     }
 
+    @action
+    onUrlDrop = (e: React.DragEvent) => {
+        const { dataTransfer } = e;
+        const html = dataTransfer.getData("text/html");
+        const uri = dataTransfer.getData("text/uri-list");
+        const url = uri || html || this._url;
+        this._url = url.startsWith(window.location.origin) ?
+            url.replace(window.location.origin, this._url.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url;
+        this.submitURL();
+        e.stopPropagation();
+    }
+    onUrlDragover = (e: React.DragEvent) => {
+        e.preventDefault();
+    }
+
+    @computed get _url() {
+        return this.selectedDoc ? Cast(this.selectedDoc.data, WebField, null)?.url.toString() : "hello";
+    }
+
+    set _url(value) { this.selectedDoc && (this.selectedDoc.data = value); }
+
+    @action
+    submitURL = () => {
+        if (!this._url.startsWith("http")) this._url = "http://" + this._url;
+        try {
+            const URLy = new URL(this._url);
+            const future = this.selectedDoc ? Cast(this.selectedDoc["data-future"], listSpec("string"), null) : null;
+            const history = this.selectedDoc ? Cast(this.selectedDoc["data-history"], listSpec("string"), null) : [];
+            const annos = this.selectedDoc ? DocListCast(this.selectedDoc["data-annotations"]) : undefined;
+            const url = this.selectedDoc ? Cast(this.selectedDoc.data, WebField, null)?.url.toString() : null;
+            if (url) {
+                if (history === undefined) {
+                    this.selectedDoc && (this.selectedDoc["data-history"] = new List<string>([url]));
+
+                } else {
+                    history.push(url);
+                }
+                future && (future.length = 0);
+                this.selectedDoc && (this.selectedDoc["data-" + this.urlHash(url)] = new List<Doc>(annos));
+            }
+            this.selectedDoc && (this.selectedDoc.data = new WebField(URLy));
+            this.selectedDoc && (this.selectedDoc["data-annotations"] = new List<Doc>([]));
+        } catch (e) {
+            console.log("WebBox URL error:" + this._url);
+        }
+    }
+
+    urlHash(s: string) {
+        return s.split('').reduce((a: any, b: any) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0);
+    }
+
+    toggleAnnotationMode = () => {
+        this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating;
+    }
+
+    @action
+    onURLChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._url = e.target.value;
+    }
+
+    onValueKeyDown = async (e: React.KeyboardEvent) => {
+        if (e.key === "Enter") {
+            this.submitURL();
+        }
+        e.stopPropagation();
+    }
+
+    @action
+    forward = () => {
+        const future = this.selectedDoc && (Cast(this.selectedDoc["data-future"], listSpec("string"), null));
+        const history = this.selectedDoc && Cast(this.selectedDoc["data-history"], listSpec("string"), null);
+        if (future?.length) {
+            history?.push(this._url);
+            this.selectedDoc && (this.selectedDoc["data-annotations-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.selectedDoc["data-annotations"])));
+            this.selectedDoc && (this.selectedDoc.data = new WebField(new URL(this._url = future.pop()!)));
+            this.selectedDoc && (this.selectedDoc["data-annotations"] = new List<Doc>(DocListCast(this.selectedDoc["data-annotations" + "-" + this.urlHash(this._url)])));
+        }
+    }
+
+    @action
+    back = () => {
+        const future = this.selectedDoc && (Cast(this.selectedDoc["data-future"], listSpec("string"), null));
+        const history = this.selectedDoc && Cast(this.selectedDoc["data-history"], listSpec("string"), null);
+        if (history?.length) {
+            if (future === undefined) this.selectedDoc && (this.selectedDoc["data-future"] = new List<string>([this._url]));
+            else future.push(this._url);
+            this.selectedDoc && (this.selectedDoc["data-annotations" + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.selectedDoc["data-annotations"])));
+            this.selectedDoc && (this.selectedDoc.data = new WebField(new URL(this._url = history.pop()!)));
+            this.selectedDoc && (this.selectedDoc["data-annotations"] = new List<Doc>(DocListCast(this.selectedDoc["data-annotations" + "-" + this.urlHash(this._url)])));
+        }
+    }
+
+    private _keyInput = React.createRef<HTMLInputElement>();
+
+    @computed get urlEditor() {
+        return (
+            <div className="webBox-urlEditor"
+                onDrop={this.onUrlDrop}
+                onDragOver={this.onUrlDragover} style={{ top: 0 }}>
+                <div className="urlEditor">
+                    <div className="editorBase">
+                        <div className="webBox-buttons"
+                            onDrop={this.onUrlDrop}
+                            onDragOver={this.onUrlDragover} style={{ display: "flex" }}>
+                            <div className="webBox-freeze" title={"Annotate"}
+                                style={{ background: this.props.docView.layoutDoc.isAnnotating ? "lightBlue" : "gray" }}
+                                onClick={this.toggleAnnotationMode} >
+                                <FontAwesomeIcon icon="pen" size={"2x"} />
+                            </div>
+                            <div className="webBox-freeze" title={"Select"}
+                                style={{ background: !this.props.docView.layoutDoc.isAnnotating ? "lightBlue" : "gray" }}
+                                onClick={this.toggleAnnotationMode} >
+                                <FontAwesomeIcon icon={"mouse-pointer"} size={"2x"} />
+                            </div>
+                            <input className="webpage-urlInput"
+                                placeholder="ENTER URL"
+                                value={this._url}
+                                onDrop={this.onUrlDrop}
+                                onDragOver={this.onUrlDragover}
+                                onChange={this.onURLChange}
+                                onKeyDown={this.onValueKeyDown}
+                                onClick={(e) => {
+                                    this._keyInput.current!.select();
+                                    e.stopPropagation();
+                                }}
+                                ref={this._keyInput}
+                            />
+                            <div style={{
+                                display: "flex",
+                                flexDirection: "row",
+                                justifyContent: "space-between",
+                                maxWidth: "120px",
+                            }}>
+                                <button className="submitUrl" onClick={this.submitURL}
+                                    onDragOver={this.onUrlDragover} onDrop={this.onUrlDrop}>
+                                    GO
+                                </button>
+                                <button className="submitUrl" onClick={this.back}>
+                                    <FontAwesomeIcon icon="caret-left" size="lg"></FontAwesomeIcon>
+                                </button>
+                                <button className="submitUrl" onClick={this.forward}>
+                                    <FontAwesomeIcon icon="caret-right" size="lg"></FontAwesomeIcon>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+
     @observable viewType = this.selectedDoc?._viewType;
 
     render() {
@@ -648,6 +801,9 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                         </button>
                     </Tooltip>
                 }
+                {/* {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText || this.props.isDoc ? (null) :
+                    this.urlEditor
+                } */}
                 {!this.isText ?
                     <>
                         {this.drawButtons}
@@ -1078,4 +1234,15 @@ export class CollectionGridViewChrome extends React.Component<CollectionMenuProp
             </div>
         );
     }
-}
\ No newline at end of file
+}
+Scripting.addGlobal(function gotoFrame(doc: any, newFrame: any) {
+    const dataField = doc[Doc.LayoutFieldKey(doc)];
+    const childDocs = DocListCast(dataField);
+    const currentFrame = Cast(doc.currentFrame, "number", null);
+    if (currentFrame === undefined) {
+        doc.currentFrame = 0;
+        CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
+    }
+    CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
+    doc.currentFrame = Math.max(0, newFrame);
+});
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index f95de5201..ea786800c 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -35,6 +35,7 @@ import { DateField } from "../../../fields/DateField";
 import { RichTextField } from "../../../fields/RichTextField";
 import { DocumentManager } from "../../util/DocumentManager";
 import { SearchUtil } from "../../util/SearchUtil";
+import { DocumentType } from "../../documents/DocumentTypes";
 const path = require('path');
 
 library.add(faExpand);
@@ -146,10 +147,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
     }
 
     protected dropRef = (ele: HTMLElement | null) => {
-        this._dropDisposer && this._dropDisposer();
-        if (ele) {
-            this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this));
-        }
+        this._dropDisposer?.();
+        ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)));
     }
 
     // expandDoc = (e: React.PointerEvent) => {
@@ -326,7 +325,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                 ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
                     <div className="collectionSchemaView-cellContents"
-                        ref={type === undefined || type === "document" ? this.dropRef : null} key={props.Document[Id]}>
+                        ref={type === undefined || type === "document" ? this.dropRef : null}>
                         {!search ?
                             <EditableView
                                 positions={positions.length > 0 ? positions : undefined}
@@ -439,30 +438,22 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         );
     }
 
-    render() {
-        return this.renderCellWithType(undefined);
-    }
+    render() { return this.renderCellWithType(undefined); }
 }
 
 @observer
 export class CollectionSchemaNumberCell extends CollectionSchemaCell {
-    render() {
-        return this.renderCellWithType("number");
-    }
+    render() { return this.renderCellWithType("number"); }
 }
 
 @observer
 export class CollectionSchemaBooleanCell extends CollectionSchemaCell {
-    render() {
-        return this.renderCellWithType("boolean");
-    }
+    render() { return this.renderCellWithType("boolean"); }
 }
 
 @observer
 export class CollectionSchemaStringCell extends CollectionSchemaCell {
-    render() {
-        return this.renderCellWithType("string");
-    }
+    render() { return this.renderCellWithType("string"); }
 }
 
 @observer
@@ -788,29 +779,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
     @observable private _selectedNum = 0;
 
     @action
-    toggleOpened(open: boolean) {
-        this._opened = open;
-    }
-
-    // @action
-    // onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    //     this._text = e.target.value;
-
-    //     // change if its a document
-    //     this._optionsList[this._selectedNum] = this._text;
-    // }
-
-    @action
     onSetValue = (value: string) => {
-
-
-        this._text = value;
-
         // change if its a document
-        this._optionsList[this._selectedNum] = this._text;
+        this._optionsList[this._selectedNum] = this._text = value;
 
         (this.prop.Document[this.prop.fieldKey] as List<any>).splice(this._selectedNum, 1, value);
-
     }
 
     @action
@@ -824,55 +797,34 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
         this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
     }
 
-
     render() {
-
-        const dragRef: React.RefObject<HTMLDivElement> = React.createRef();
-
         let type = "list";
-
         let link = false;
-        let doc = false;
         const reference = React.createRef<HTMLDivElement>();
 
         if (typeof this._field === "object" && this._optionsList[0]) {
-
-            const options = this._optionsList.map((element, index) => {
-
-                if (element instanceof Doc) {
-                    doc = true;
-                    type = "document";
-                    if (this.prop.fieldKey.toLowerCase() === "links") {
-                        link = true;
-                        type = "link";
+            const options = !this._opened ? (null) : <div>
+                {this._optionsList.map((element, index) => {
+                    let title = "";
+                    if (element instanceof Doc) {
+                        type = "document";
+                        if (this.prop.fieldKey.toLowerCase() === "links") {
+                            link = true;
+                            type = "link";
+                        }
+                        title = StrCast(element.title);
                     }
-                    const document = FieldValue(Cast(element, Doc));
-                    const title = element.title;
-                    return <div
-                        className="collectionSchemaView-dropdownOption"
-                        onPointerDown={(e) => { this.onSelected(StrCast(element.title), index); }}
-                        style={{ padding: "6px" }}>
+                    return <div className="collectionSchemaView-dropdownOption" style={{ padding: "6px" }}
+                        onPointerDown={(e) => this.onSelected(StrCast(element), index)} >
+                        {element}
                         {title}
                     </div>;
-
-                } else {
-                    return <div
-                        className="collectionSchemaView-dropdownOption"
-                        onPointerDown={(e) => { this.onSelected(StrCast(element), index); }}
-                        style={{ padding: "6px" }}>{element}</div>;
-                }
-            });
+                })}
+            </div>;
 
             const plainText = <div style={{ padding: "5.9px" }}>{this._text}</div>;
-            // const textarea = <textarea onChange={this.onChange} value={this._text}
-            //     onFocus={doc ? this.onFocus : undefined}
-            //     onBlur={doc ? e => this._overlayDisposer?.() : undefined}
-            //     style={{ resize: "none" }}
-            //     placeholder={"select an item"}></textarea>;
-
-            const textarea = <div className="collectionSchemaView-cellContents"
-                style={{ padding: "5.9px" }}
-                ref={type === undefined || type === "document" ? this.dropRef : null} key={this.prop.Document[Id]}>
+            const textarea = <div className="collectionSchemaView-cellContents" key={this.prop.Document[Id]} style={{ padding: "5.9px" }}
+                ref={type === undefined || type === "document" ? this.dropRef : null} >
                 <EditableView
                     editing={this._isEditing}
                     isEditingCallback={this.isEditingCallback}
@@ -880,11 +832,8 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
                     contents={this._text}
                     height={"auto"}
                     maxHeight={Number(MAX_ROW_HEIGHT)}
-                    GetValue={() => {
-                        return this._text;
-                    }}
+                    GetValue={() => this._text}
                     SetValue={action((value: string) => {
-
                         // add special for params 
                         this.onSetValue(value);
                         return true;
@@ -893,37 +842,26 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
             </div >;
 
             //☰
-
-            const dropdown = <div>
-                {options}
-            </div>;
-
             return (
                 <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
                     <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}>
                         <div className="collectionSchemaView-dropDownWrapper">
-                            <button type="button" className="collectionSchemaView-dropdownButton" onClick={(e) => { this.toggleOpened(!this._opened); }}
-                                style={{ right: "length", position: "relative" }}>
-                                {this._opened ? <FontAwesomeIcon icon="caret-up" size="lg" ></FontAwesomeIcon>
-                                    : <FontAwesomeIcon icon="caret-down" size="lg" ></FontAwesomeIcon>}
+                            <button type="button" className="collectionSchemaView-dropdownButton" style={{ right: "length", position: "relative" }}
+                                onClick={action(e => this._opened = !this._opened)} >
+                                <FontAwesomeIcon icon={this._opened ? "caret-up" : "caret-down"} size="lg" />
                             </button>
                             <div className="collectionSchemaView-dropdownText"> {link ? plainText : textarea} </div>
                         </div>
-
-                        {this._opened ? dropdown : null}
+                        {options}
                     </div >
                 </div>
             );
-        } else {
-            return this.renderCellWithType("list");
         }
+        return this.renderCellWithType("list");
     }
 }
 
 
-
-
-
 @observer
 export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
     @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false;
@@ -932,15 +870,13 @@ export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
     toggleChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
         this._isChecked = e.target.checked;
         const script = CompileScript(e.target.checked.toString(), { requiredType: "boolean", addReturn: true, params: { this: Doc.name } });
-        if (script.compiled) {
-            this.applyToDoc(this._document, this.props.row, this.props.col, script.run);
-        }
+        script.compiled && this.applyToDoc(this._document, this.props.row, this.props.col, script.run);
     }
 
     render() {
         const reference = React.createRef<HTMLDivElement>();
         const onItemDown = (e: React.PointerEvent) => {
-            (!this.props.CollectionView || !this.props.CollectionView.props.isSelected() ? undefined :
+            (!this.props.CollectionView?.props.isSelected() ? undefined :
                 SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
         };
         return (
@@ -956,62 +892,28 @@ export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
 
 @observer
 export class CollectionSchemaButtons extends CollectionSchemaCell {
-
     render() {
+        const doc = this.props.rowProps.original;
+        const searchMatch = (backward: boolean = true) => { doc.searchMatch = undefined; setTimeout(() => doc.searchMatch = backward, 0); };
         // const reference = React.createRef<HTMLDivElement>();
         // const onItemDown = (e: React.PointerEvent) => {
         //     (!this.props.CollectionView || !this.props.CollectionView.props.isSelected() ? undefined :
         //         SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
         // };
-        const doc = this.props.rowProps.original;
-        let buttons: JSX.Element | undefined = undefined;
-        buttons = <div style={{
-            paddingTop: 8,
-            paddingLeft: 3,
-        }}><button onClick={() => {
-            doc.searchMatch = false;
-            setTimeout(() => doc.searchMatch = true, 0);
-        }} style={{ padding: 2, left: 77 }}>
-                <FontAwesomeIcon icon="arrow-up" size="sm" />
-            </button>
-            <button onClick={() => {
-                {
-                    doc.searchMatchAlt = false;
-                    setTimeout(() => doc.searchMatchAlt = true, 0);
-                }
-            }} style={{ padding: 2 }}>
-                <FontAwesomeIcon icon="arrow-down" size="sm" />
-            </button></div>;
-        const type = StrCast(doc.type);
-        if (type === "pdf") {
-            buttons = <div><button
-                style={{
-                    position: "relative",
-                    height: 30,
-                    width: 28,
-                    left: 1,
-                }}
-
-                onClick={() => {
-                    doc.searchMatch = false;
-                    setTimeout(() => doc.searchMatch = true, 0);
-                }}>
-                <FontAwesomeIcon icon="arrow-down" size="sm" />
-            </button></div >;
-        }
-        else if (type !== "rtf") {
-            buttons = undefined;
-        }
-
-        if (BoolCast(this.props.Document._searchDoc) === true) {
-
-        }
-        else {
-            buttons = undefined;
-        }
-        return (
-            <div> {buttons}</div>
-        );
-    }
-}
-
+        return !BoolCast(this.props.Document._searchDoc) ? <></>
+            : StrCast(doc.type) === DocumentType.PDF ?
+                <button style={{ position: "relative", height: 30, width: 28, left: 1, }} onClick={() => searchMatch(false)}>
+                    <FontAwesomeIcon icon="arrow-down" size="sm" />
+                </button>
+                : StrCast(doc.type) === DocumentType.RTF ?
+                    <div style={{ paddingTop: 8, paddingLeft: 3, }} >
+                        <button style={{ padding: 2, left: 77 }} onClick={() => searchMatch(true)}>
+                            <FontAwesomeIcon icon="arrow-up" size="sm" />
+                        </button>
+                        <button style={{ padding: 2 }} onClick={() => searchMatch(false)} >
+                            <FontAwesomeIcon icon="arrow-down" size="sm" />
+                        </button>
+                    </div> :
+                    <></>;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index be25bf9de..34a8bfa24 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -13,57 +13,11 @@ import { SearchBox } from "../search/SearchBox";
 import { ColumnType } from "./CollectionSchemaView";
 import "./CollectionSchemaView.scss";
 import { CollectionView } from "./CollectionView";
-import * as fa from '@fortawesome/free-solid-svg-icons';
 
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-export interface HeaderProps {
-    keyValue: SchemaHeaderField;
-    possibleKeys: string[];
-    existingKeys: string[];
-    keyType: ColumnType;
-    typeConst: boolean;
-    onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
-    setIsEditing: (isEditing: boolean) => void;
-    deleteColumn: (column: string) => void;
-    setColumnType: (column: SchemaHeaderField, type: ColumnType) => void;
-    setColumnSort: (column: SchemaHeaderField, desc: boolean | undefined) => void;
-    setColumnColor: (column: SchemaHeaderField, color: string) => void;
-
-}
-
-export class CollectionSchemaHeader extends React.Component<HeaderProps> {
-    render() {
-        const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" :
-            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "sort-amount-down" :
-                this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : this.props.keyType === ColumnType.Date ? "calendar" :
-                    "align-justify";
-        return (
-            <div className="collectionSchemaView-header" style={{ background: this.props.keyValue.color }}>
-                <CollectionSchemaColumnMenu
-                    columnField={this.props.keyValue}
-                    // keyValue={this.props.keyValue.heading}
-                    possibleKeys={this.props.possibleKeys}
-                    existingKeys={this.props.existingKeys}
-                    // keyType={this.props.keyType}
-                    typeConst={this.props.typeConst}
-                    menuButtonContent={<div><FontAwesomeIcon icon={icon} size="sm" />{this.props.keyValue.heading}</div>}
-                    addNew={false}
-                    onSelect={this.props.onSelect}
-                    setIsEditing={this.props.setIsEditing}
-                    deleteColumn={this.props.deleteColumn}
-                    onlyShowOptions={false}
-                    setColumnType={this.props.setColumnType}
-                    setColumnSort={this.props.setColumnSort}
-                    setColumnColor={this.props.setColumnColor}
-                />
-            </div>
-        );
-    }
-}
-
 
 export interface AddColumnHeaderProps {
     createColumn: () => void;
@@ -79,7 +33,6 @@ export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHe
 }
 
 
-
 export interface ColumnMenuProps {
     columnField: SchemaHeaderField;
     // keyValue: string;
@@ -103,37 +56,29 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
     @observable private _isOpen: boolean = false;
     @observable private _node: HTMLDivElement | null = null;
 
-    componentDidMount() {
-        document.addEventListener("pointerdown", this.detectClick);
-    }
+    componentDidMount() { document.addEventListener("pointerdown", this.detectClick); }
 
-    componentWillUnmount() {
-        document.removeEventListener("pointerdown", this.detectClick);
-    }
+    componentWillUnmount() { document.removeEventListener("pointerdown", this.detectClick); }
 
-    detectClick = (e: PointerEvent): void => {
-        if (this._node && this._node.contains(e.target as Node)) {
-        } else {
-            this._isOpen = false;
-            this.props.setIsEditing(false);
-        }
+    @action
+    detectClick = (e: PointerEvent) => {
+        !this._node?.contains(e.target as Node) && this.props.setIsEditing(this._isOpen = false);
     }
 
     @action
     toggleIsOpen = (): void => {
-        this._isOpen = !this._isOpen;
-        this.props.setIsEditing(this._isOpen);
+        this.props.setIsEditing(this._isOpen = !this._isOpen);
     }
 
-    changeColumnType = (type: ColumnType): void => {
+    changeColumnType = (type: ColumnType) => {
         this.props.setColumnType(this.props.columnField, type);
     }
 
-    changeColumnSort = (desc: boolean | undefined): void => {
+    changeColumnSort = (desc: boolean | undefined) => {
         this.props.setColumnSort(this.props.columnField, desc);
     }
 
-    changeColumnColor = (color: string): void => {
+    changeColumnColor = (color: string) => {
         this.props.setColumnColor(this.props.columnField, color);
     }
 
@@ -145,7 +90,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
     }
 
     renderTypes = () => {
-        if (this.props.typeConst) return <></>;
+        if (this.props.typeConst) return (null);
 
         const type = this.props.columnField.type;
         return (
@@ -291,7 +236,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     @observable private _key: string = this.props.keyValue;
     @observable private _searchTerm: string = this.props.keyValue;
     @observable private _isOpen: boolean = false;
-    @observable private _canClose: boolean = true;
+    @observable private _node: HTMLDivElement | null = null;
     @observable private _inputRef: React.RefObject<HTMLInputElement> = React.createRef();
 
     @action setSearchTerm = (value: string): void => { this._searchTerm = value; };
@@ -306,6 +251,35 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         this.props.setIsEditing(false);
     }
 
+    @action
+    setNode = (node: HTMLDivElement): void => {
+        if (node) {
+            this._node = node;
+        }
+    }
+
+    componentDidMount() {
+        document.addEventListener("pointerdown", this.detectClick);
+    }
+
+    @action
+    detectClick = (e: PointerEvent): void => {
+        if (this._node && this._node.contains(e.target as Node)) {
+        } else {
+            this._isOpen = false;
+            this.props.setIsEditing(false);
+        }
+    }
+
+    componentWillMount() {
+        document.removeEventListener("pointerdown", this.detectClick);
+        const filters = Cast(this.props.Document._docFilters, listSpec("string"));
+        if (filters?.includes(this._key)) {
+            runInAction(() => this.closeResultsVisibility = "contents");
+        }
+    }
+
+    private tempfilter: string = "";
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
         if (e.key === "Enter") {
@@ -313,23 +287,29 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 const colpos = this._searchTerm.indexOf(":");
                 const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length);
                 if (temp === "") {
-                    Doc.setDocFilter(this.props.Document, this._key, temp, undefined);
+                    console.log("here we are first");
+                    Doc.setDocFilter(this.props.Document, this._key, this.tempfilter, undefined);
+                    this.updateFilter();
                 }
                 else {
-                    Doc.setDocFilter(this.props.Document, this._key, temp, "match");
+                    console.log("here we are first");
+                    Doc.setDocFilter(this.props.Document, this._key, this.tempfilter, undefined);
+                    this.tempfilter = temp;
+                    Doc.setDocFilter(this.props.Document, this._key, temp, "check");
                     this.props.col.setColor("green");
+                    this.closeResultsVisibility = "contents";
                 }
             }
             else {
+                Doc.setDocFilter(this.props.Document, this._key, this.tempfilter, undefined);
+                this.updateFilter();
                 let keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
-                const blockedkeys = ["_scrollTop", "customTitle", "limitHeight", "proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"];
+                const blockedkeys = ["system", "ACL-Public", "_scrollTop", "customTitle", "limitHeight", "proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"];
                 keyOptions = keyOptions.filter(n => !blockedkeys.includes(n));
                 if (keyOptions.length) {
                     this.onSelect(keyOptions[0]);
-                    console.log("case1");
                 } else if (this._searchTerm !== "" && this.props.canAddNew) {
                     this.setSearchTerm(this._searchTerm || this._key);
-                    console.log("case2");
                     this.onSelect(this._searchTerm);
                 }
             }
@@ -347,23 +327,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     }
 
     @action
-    onBlur = (e: React.FocusEvent): void => {
-        if (this._canClose) {
-            this._isOpen = false;
-            this.props.setIsEditing(false);
-        }
-    }
-
-    @action
-    onPointerEnter = (e: React.PointerEvent): void => {
-        this._canClose = false;
-    }
-
-    @action
-    onPointerOut = (e: React.PointerEvent): void => {
-        this._canClose = true;
-    }
-    @action
     renderOptions = (): JSX.Element[] | JSX.Element => {
         if (!this._isOpen) {
             this.defaultMenuHeight = 0;
@@ -383,7 +346,13 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 border: "1px solid lightgray",
                 width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white",
             }}
-                onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
+                onPointerDown={e => {
+                    e.stopPropagation();
+                }}
+                onClick={() => {
+                    this.onSelect(key);
+                    this.setSearchTerm("");
+                }}>{key}</div>;
         });
 
         // if search term does not already exist as a group type, give option to create new group type
@@ -422,7 +391,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
             this.defaultMenuHeight = 0;
             return <></>;
         }
-
         const keyOptions: string[] = [];
         const colpos = this._searchTerm.indexOf(":");
         const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length);
@@ -432,22 +400,21 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         const docs = this.docSafe;
         docs.forEach((doc) => {
             const key = StrCast(doc[this._key]);
-            if (keyOptions.includes(key) === false && key.includes(temp)) {
+            if (keyOptions.includes(key) === false && key.includes(temp) && key !== "") {
                 keyOptions.push(key);
             }
         });
 
         const filters = Cast(this.props.Document._docFilters, listSpec("string"));
+        if (filters === undefined || filters.length === 0 || filters.includes(this._key) === false) {
+            this.props.col.setColor("rgb(241, 239, 235)");
+            this.closeResultsVisibility = "none";
+        }
         for (let i = 0; i < (filters?.length ?? 0) - 1; i += 3) {
             if (filters![i] === this.props.col.heading && keyOptions.includes(filters![i + 1]) === false) {
                 keyOptions.push(filters![i + 1]);
             }
         }
-
-        if (filters === undefined || filters.length === 0 || filters.includes(this._key) === false) {
-            this.props.col.setColor("rgb(241, 239, 235)");
-        }
-
         const options = keyOptions.map(key => {
             //Doc.setDocFilter(this.props.Document!, this._key, key, undefined);
             let bool = false;
@@ -461,12 +428,17 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white", backgroundColor: "white",
             }}
             >
-                <input type="checkbox" onChange={(e) => {
-                    e.target.checked === true ? Doc.setDocFilter(this.props.Document, this._key, key, "check") : Doc.setDocFilter(this.props.Document, this._key, key, undefined);
-                    e.target.checked === true ? this.props.col.setColor("green") : "";
-                    e.target.checked === true && SearchBox.Instance.filter === true ? Doc.setDocFilter(docs[0], this._key, key, "check") : Doc.setDocFilter(docs[0], this._key, key, undefined);
-                }}
-                    checked={bool} ></input>
+                <input type="checkbox"
+                    onPointerDown={e => e.stopPropagation()}
+                    onClick={e => e.stopPropagation()}
+                    onChange={(e) => {
+                        e.target.checked === true ? Doc.setDocFilter(this.props.Document, this._key, key, "check") : Doc.setDocFilter(this.props.Document, this._key, key, undefined);
+                        e.target.checked === true ? this.closeResultsVisibility = "contents" : console.log("");
+                        e.target.checked === true ? this.props.col.setColor("green") : this.updateFilter();
+                        e.target.checked === true && SearchBox.Instance.filter === true ? Doc.setDocFilter(docs[0], this._key, key, "check") : Doc.setDocFilter(docs[0], this._key, key, undefined);
+                    }}
+                    checked={bool}
+                />
                 <span style={{ paddingLeft: 4 }}>
                     {key}
                 </span>
@@ -492,6 +464,15 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     @observable defaultMenuHeight = 0;
 
 
+    updateFilter() {
+        const filters = Cast(this.props.Document._docFilters, listSpec("string"));
+        if (filters === undefined || filters.length === 0 || filters.includes(this._key) === false) {
+            console.log("PLEASE");
+            this.props.col.setColor("rgb(241, 239, 235)");
+            this.closeResultsVisibility = "none";
+        }
+    }
+
 
     get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; }
 
@@ -501,29 +482,56 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         return script ? () => script : undefined;
     }
     filterBackground = () => "rgba(105, 105, 105, 0.432)";
-
     @observable filterOpen: boolean | undefined = undefined;
+    closeResultsVisibility: string = "none";
+
+    removeFilters = (e: React.PointerEvent): void => {
+        const keyOptions: string[] = [];
+        if (this.docSafe.length === 0) {
+            this.docSafe = DocListCast(this.props.dataDoc![this.props.fieldKey]);
+        }
+        const docs = this.docSafe;
+        docs.forEach((doc) => {
+            const key = StrCast(doc[this._key]);
+            if (keyOptions.includes(key) === false) {
+                keyOptions.push(key);
+            }
+        });
+
+        keyOptions.forEach(key => {
+            Doc.setDocFilter(this.props.Document, this._key, key, undefined);
+        }
+        );
+        Doc.setDocFilter(this.props.Document, this._key, this.tempfilter, undefined);
+        this.props.col.setColor("rgb(241, 239, 235)");
+        this.closeResultsVisibility = "none";
+    }
     render() {
         return (
-            <div style={{ display: "flex" }}>
+            <div style={{ display: "flex" }} ref={this.setNode}>
                 <FontAwesomeIcon onClick={e => { this.props.openHeader(this.props.col, e.clientX, e.clientY); e.stopPropagation(); }} icon={this.props.icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} />
 
                 {/* <FontAwesomeIcon icon={fa.faSearchMinus} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} onClick={e => {
                     runInAction(() => { this._isOpen === undefined ? this._isOpen = true : this._isOpen = !this._isOpen })
                 }} /> */}
 
-                <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
+                <div className="keys-dropdown" style={{ zIndex: 1, width: this.props.width, maxWidth: this.props.width }}>
                     <input className="keys-search" style={{ width: "100%" }}
                         ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
-                        onChange={e => this.onChange(e.target.value)}
+                        onChange={e => {
+                            this.onChange(e.target.value);
+                        }}
                         onClick={(e) => {
                             //this._inputRef.current!.select();
                             e.stopPropagation();
-                        }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
+                        }} onFocus={this.onFocus} ></input>
+                    <div style={{ display: this.closeResultsVisibility }}>
+                        <FontAwesomeIcon onPointerDown={this.removeFilters} icon={"times-circle"} size="lg"
+                            style={{ cursor: "hand", color: "grey", padding: 2, left: -20, top: -1, height: 15, position: "relative" }} />
+                    </div>
                     {!this._isOpen ? (null) : <div className="keys-options-wrapper" style={{
                         width: this.props.width, maxWidth: this.props.width, height: "auto",
-                    }}
-                        onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
+                    }}>
                         {this._searchTerm.includes(":") ? this.renderFilterOptions() : this.renderOptions()}
                     </div>}
                 </div >
diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index 37e6c115d..4754adc90 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -1,19 +1,19 @@
 import React = require("react");
-import { ReactTableDefaults, TableCellRenderer, RowInfo } from "react-table";
-import "./CollectionSchemaView.scss";
-import { Transform } from "../../util/Transform";
-import { Doc } from "../../../fields/Doc";
-import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager";
-import { Cast, FieldValue, StrCast } from "../../../fields/Types";
-import { ContextMenu } from "../ContextMenu";
-import { action } from "mobx";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faGripVertical, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { DocumentManager } from "../../util/DocumentManager";
+import { action } from "mobx";
+import { ReactTableDefaults, RowInfo, TableCellRenderer } from "react-table";
+import { Doc } from "../../../fields/Doc";
 import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
-import { undoBatch } from "../../util/UndoManager";
+import { Cast, FieldValue, StrCast } from "../../../fields/Types";
+import { DocumentManager } from "../../util/DocumentManager";
+import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
 import { SnappingManager } from "../../util/SnappingManager";
+import { Transform } from "../../util/Transform";
+import { undoBatch } from "../../util/UndoManager";
+import { ContextMenu } from "../ContextMenu";
+import "./CollectionSchemaView.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 library.add(faGripVertical, faTrash);
 
@@ -226,13 +226,15 @@ export class MovableRow extends React.Component<MovableRowProps> {
 
     render() {
         const { children = null, rowInfo } = this.props;
+
         if (!rowInfo) {
             return <ReactTableDefaults.TrComponent>{children}</ReactTableDefaults.TrComponent>;
         }
 
         const { original } = rowInfo;
         const doc = FieldValue(Cast(original, Doc));
-        if (!doc) return <></>;
+
+        if (!doc) return (null);
 
         const reference = React.createRef<HTMLDivElement>();
         const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);
@@ -245,11 +247,11 @@ export class MovableRow extends React.Component<MovableRowProps> {
             <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
                 <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                     <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown} >
-                        {/* <div className="row-dragger">
-                            <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
-                            <div className="row-option" style={{ cursor: "grab" }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
-                            <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, "onRight")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
-                        </div> */}
+                        <div className="row-dragger">
+                            <div className="row-option" style={{ left: 5 }} onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
+                            <div className="row-option" style={{ cursor: "grab", left: 25 }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
+                            <div className="row-option" style={{ left: 40 }} onClick={() => this.props.addDocTab(this.props.rowInfo.original, "onRight")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
+                        </div>
                         {children}
                     </ReactTableDefaults.TrComponent>
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index c1918aed0..fc5dffaec 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -418,10 +418,11 @@ button.add-column {
         display: flex;
         justify-content: space-around;
         flex: 50 0 auto;
-        width: 50px;
+        width: 0;
         max-width: 50px;
         height: 100%;
         min-height: 30px;
+        align-items: center;
         color: lightgray;
         background-color: white;
         transition: color 0.1s ease;
@@ -429,6 +430,7 @@ button.add-column {
         .row-option {
             // padding: 5px;
             cursor: pointer;
+            position: absolute;
             transition: color 0.1s ease;
             display: flex;
             flex-direction: column;
@@ -601,11 +603,17 @@ button.add-column {
     height: 100%;
 }
 
+.rt-td.rt-expandable {
+    overflow:visible;
+    position: relative;
+    height:100%;
+    z-index: 1;
+}
 .reactTable-sub {
-    padding: 10px 30px;
     background-color: rgb(252, 252, 252);
     width: 100%;
 
+
     .rt-thead {
         display: none;
     }
@@ -632,13 +640,16 @@ button.add-column {
 .collectionSchemaView-expander {
     height: 100%;
     min-height: 30px;
-    position: relative;
+    position: absolute;
     color: gray;
+    width: 20;
+    height: auto;
+    left: 55;
 
     svg {
         position: absolute;
         top: 50%;
-        left: 50%;
+        left: 10;
         transform: translate(-50%, -50%);
     }
 }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index a72b349ec..ed8496544 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { Resize } from "react-table";
 import "react-table/react-table.css";
-import { Doc } from "../../../fields/Doc";
+import { Doc, Opt } from "../../../fields/Doc";
 import { List } from "../../../fields/List";
 import { listSpec } from "../../../fields/Schema";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
@@ -20,10 +20,12 @@ import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import '../DocumentDecorations.scss';
 import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { KeysDropdown } from "./CollectionSchemaHeaders";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { SchemaTable } from "./SchemaTable";
+import { SelectionManager } from "../../util/SelectionManager";
+import { ContextMenu } from "../ContextMenu";
+import { ContextMenuProps } from "../ContextMenuItem";
 
 library.add(faCog, faPlus, faSortUp, faSortDown);
 library.add(faTable);
@@ -388,7 +390,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     @action setFocused = (doc: Doc) => this._focusedTable = doc;
 
-    @action setPreviewDoc = (doc: Doc) => this.previewDoc = doc;
+    @action setPreviewDoc = (doc: Opt<Doc>) => {
+        SelectionManager.SelectSchemaDoc(this, doc);
+        this.previewDoc = doc;
+    }
 
     //toggles preview side-panel of schema
     @action
@@ -515,9 +520,24 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             </div>
         </div>;
     }
+    onSpecificMenu = (e: React.MouseEvent) => {
+        if ((e.target as any)?.className?.includes?.("collectionSchemaView-cell") || (e.target instanceof HTMLSpanElement)) {
+            const cm = ContextMenu.Instance;
+            const options = cm.findByDescription("Options...");
+            const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : [];
+            optionItems.push({ description: "remove", event: () => this.previewDoc && this.props.removeDocument(this.previewDoc), icon: "trash" });
+            !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" });
+            cm.displayMenu(e.clientX, e.clientY);
+            (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this.
+            e.stopPropagation();
+        }
+    }
 
     @action
     onTablePointerDown = (e: React.PointerEvent): void => {
+        if (!(e.target as any)?.className?.includes?.("collectionSchemaView-cell") && !(e.target instanceof HTMLSpanElement)) {
+            this.setPreviewDoc(undefined);
+        }
         this.setFocused(this.props.Document);
         if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) {
             e.stopPropagation();
@@ -594,13 +614,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         </div>;
         return <div className={name}
             style={{
-                overflow: this.props.overflow === true ? "scroll" : undefined,
+                overflow: this.props.overflow === true ? "scroll" : undefined, backgroundColor: "white",
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
                 width: name === "collectionSchemaView-searchContainer" ? "auto" : this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%", position: "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
-                style={{ backgroundColor: "white", width: `calc(100% - ${this.previewWidth()}px)` }}
+                style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
                 onKeyPress={this.onKeyPress}
+                onContextMenu={this.onSpecificMenu}
                 onPointerDown={this.onPointerDown}
                 onWheel={e => this.props.active(true) && e.stopPropagation()}
                 onDrop={e => this.onExternalDrop(e, {})}
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index f23fa8eb6..0f6274663 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -469,7 +469,7 @@ class TreeView extends React.Component<TreeViewProps> {
         return <>
             <div className="docContainer" ref={this._tref} title="click to edit title" id={`docContainer-${this.props.parentKey}`}
                 style={{
-                    fontWeight: this.doc.searchMatch ? "bold" : undefined,
+                    fontWeight: this.doc.searchMatch !== undefined ? "bold" : undefined,
                     textDecoration: Doc.GetT(this.doc, "title", "string", true) ? "underline" : undefined,
                     outline: BoolCast(this.doc.workspaceBrush) ? "dashed 1px #06123232" : undefined,
                     pointerEvents: this.props.active() || SnappingManager.GetIsDragging() ? undefined : "none"
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 5a86150fe..6ec9783e2 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -70,7 +70,7 @@ export interface SchemaTableProps {
     isSelected: (outsideReaction?: boolean) => boolean;
     isFocused: (document: Doc, outsideReaction: boolean) => boolean;
     setFocused: (document: Doc) => void;
-    setPreviewDoc: (document: Doc) => void;
+    setPreviewDoc: (document: Opt<Doc>) => void;
     columns: SchemaHeaderField[];
     documentKeys: any[];
     headerIsEditing: boolean;
@@ -161,24 +161,24 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         const focusedCol = this._focusedCell.col;
         const isEditable = !this.props.headerIsEditing;
 
-        if (this.childDocs.reduce((found, doc) => found || doc.type === DocumentType.COL, false)) {
-            columns.push(
-                {
-                    expander: true,
-                    Header: "",
-                    width: 30,
-                    Expander: (rowInfo) => {
-                        if (rowInfo.original.type === "collection") {
-                            return rowInfo.isExpanded ?
-                                <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"caret-down"} size="sm" /></div> :
-                                <div className="collectionSchemaView-expander" onClick={() => this.onExpandCollection(rowInfo.original)}><FontAwesomeIcon icon={"caret-right"} size="sm" /></div>;
-                        } else {
-                            return null;
-                        }
+        //if (this.childDocs.reduce((found, doc) => found || doc.type === DocumentType.COL, false)) {
+        columns.push(
+            {
+                expander: true,
+                Header: "",
+                width: 60,
+                Expander: (rowInfo) => {
+                    if (rowInfo.original.type === "collection") {
+                        return rowInfo.isExpanded ?
+                            <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"caret-down"} size="lg" /></div> :
+                            <div className="collectionSchemaView-expander" onClick={() => this.onExpandCollection(rowInfo.original)}><FontAwesomeIcon icon={"caret-right"} size="lg" /></div>;
+                    } else {
+                        return null;
                     }
                 }
-            );
-        }
+            }
+        );
+        // }
         this.props.active;
 
         const cols = this.props.columns.map(col => {
@@ -385,7 +385,9 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
             const pdoc = FieldValue(this.childDocs[this._focusedCell.row]);
             pdoc && this.props.setPreviewDoc(pdoc);
-        } else if ((this._cellIsEditing || this.props.headerIsEditing) && (e.keyCode === 37 || e.keyCode === 39)) {
+            e.stopPropagation();
+        } else if (e.keyCode === 27) {
+            this.props.setPreviewDoc(undefined);
             e.stopPropagation(); // stopPropagation for left/right arrows 
         }
     }
@@ -410,9 +412,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     @undoBatch
-    createRow = () => {
+    createRow = action(() => {
         this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 }));
-    }
+        this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col };
+    });
 
     @undoBatch
     @action
@@ -600,7 +603,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             onPointerDown={this.props.onPointerDown} onClick={this.props.onClick} onWheel={e => this.props.active(true) && e.stopPropagation()}
             onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
             {this.reactTable}
-            {StrCast(this.props.Document.type) !== "search" ? <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
+            {StrCast(this.props.Document._chromeStatus) !== "disabled" ? <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
                 : undefined}
             {!this._showDoc ? (null) :
                 <div className="collectionSchemaView-documentPreview" //onClick={() => { this.onOpenClick(); }}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9841c408f..01bfb0453 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -179,7 +179,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 }
             }
             if (this.Document.currentFrame !== undefined && !this.props.isAnnotationOverlay) {
-                CollectionFreeFormDocumentView.setupKeyframes(newBoxes, this.Document.currentFrame);
+                CollectionFreeFormDocumentView.setupKeyframes(newBoxes, this.Document.currentFrame, true);
             }
         }
         return retVal;
@@ -214,7 +214,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             const layoutDoc = Doc.Layout(d);
             if (this.Document.currentFrame !== undefined) {
                 const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000));
-                CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.h, vals.w, vals.opacity);
+                CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.h, vals.w, vals.scroll, vals.opacity);
             } else {
                 d.x = x + NumCast(d.x) - dropPos[0];
                 d.y = y + NumCast(d.y) - dropPos[1];
@@ -1315,7 +1315,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     }
 
     @action
-    setupDragLines = () => {
+    setupDragLines = (snapToDraggedDoc: boolean = false) => {
         const activeDocs = this.getActiveDocuments();
         if (activeDocs.length > 50) {
             DragManager.SetSnapLines([], []);
@@ -1337,7 +1337,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
         const horizLines: number[] = [];
         const vertLines: number[] = [];
-        snappableDocs.filter(doc => !DragManager.docsBeingDragged.includes(Cast(doc.rootDocument, Doc, null) || doc)).forEach(doc => {
+        snappableDocs.filter(doc => snapToDraggedDoc || !DragManager.docsBeingDragged.includes(Cast(doc.rootDocument, Doc, null) || doc)).forEach(doc => {
             const { left, top, width, height } = docDims(doc);
             const topLeftInScreen = this.getTransform().inverse().transformPoint(left, top);
             const docSize = this.getTransform().inverse().transformDirection(width, height);
@@ -1349,7 +1349,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     }
     onPointerOver = (e: React.PointerEvent) => {
         if (SnappingManager.GetIsDragging()) {
-            this.setupDragLines();
+            this.setupDragLines(e.ctrlKey || e.shiftKey);
         }
         e.stopPropagation();
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 29982212f..15f277adb 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -12,7 +12,7 @@ import { CognitiveServices } from "../../../cognitive_services/CognitiveServices
 import { Docs, DocumentOptions, DocUtils } from "../../../documents/Documents";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { Transform } from "../../../util/Transform";
-import { undoBatch } from "../../../util/UndoManager";
+import { undoBatch, UndoManager } from "../../../util/UndoManager";
 import { ContextMenu } from "../../ContextMenu";
 import { FormattedTextBox } from "../../nodes/formattedText/FormattedTextBox";
 import { PreviewCursor } from "../../PreviewCursor";
@@ -140,6 +140,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
                     tbox.layoutKey = "layout_" + StrCast(template.title);
                     Doc.GetProto(tbox)[StrCast(tbox.layoutKey)] = template;
                 }
+                FormattedTextBox.LiveTextUndo = UndoManager.StartBatch("live text batch");
                 this.props.addLiveTextDocument(tbox);
                 e.stopPropagation();
             }
@@ -754,14 +755,14 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             </div>;
 
         } else {
-            //subtracted 250 for offset
+            //subtracted for offset
             var str: string = "";
             for (var i = 0; i < this._pointsX.length; i++) {
                 var x = 0;
-                x = this._pointsX[i] - 250;
+                x = this._pointsX[i] - 64;
                 str += x.toString();
                 str += ",";
-                str += this._pointsY[i].toString();
+                str += (this._pointsY[i] - 85).toString();
                 str += (" ");
             }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index ed451beab..fb138ecc0 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -49,6 +49,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get MAX_EMBED_HEIGHT() { return 200; }
 
+    @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; }
     @computed get selectedDocumentView() {
         if (SelectionManager.SelectedDocuments().length) {
             return SelectionManager.SelectedDocuments()[0];
@@ -60,7 +61,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         if (this.selectedDoc?.type === DocumentType.PRES) return true;
         return false;
     }
-    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
     @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
 
     @observable layoutFields: boolean = false;
@@ -345,8 +345,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get expansionIcon() {
         return <Tooltip title={<div className="dash-tooltip">{"Show more permissions"}</div>}>
             <div className="expansion-button" onPointerDown={() => {
-                if (this.selectedDocumentView) {
-                    SharingManager.Instance.open(this.selectedDocumentView);
+                if (this.selectedDocumentView || this.selectedDoc) {
+                    SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDocumentView ? this.selectedDocumentView : undefined, this.selectedDoc);
                 }
             }}>
                 <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />