pulled from master

13 files changed, 738 insertions, 81 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index acd8dcef7..bb1345044 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -106,14 +106,16 @@ export class DocumentManager {
 
     @computed
     public get LinkedDocumentViews() {
-        let pairs = DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false)).reduce((pairs, dv) => {
+        let pairs = DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush)).reduce((pairs, dv) => {
             let linksList = LinkManager.Instance.getAllRelatedLinks(dv.props.Document);
             pairs.push(...linksList.reduce((pairs, link) => {
                 if (link) {
                     let linkToDoc = LinkManager.Instance.getOppositeAnchor(link, dv.props.Document);
-                    DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => {
-                        pairs.push({ a: dv, b: docView1, l: link });
-                    });
+                    if (linkToDoc) {
+                        DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => {
+                            pairs.push({ a: dv, b: docView1, l: link });
+                        });
+                    }
                 }
                 return pairs;
             }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]));
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index ce1f9d890..0678eaf5a 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -41,9 +41,14 @@ export function SetupDrag(
     let onItemDown = async (e: React.PointerEvent) => {
         if (e.button === 0) {
             e.stopPropagation();
-            e.preventDefault();
             if (e.shiftKey && CollectionDockingView.Instance) {
-                CollectionDockingView.Instance.StartOtherDrag(e, [await docFunc()]);
+                e.persist();
+                CollectionDockingView.Instance.StartOtherDrag({
+                    pageX: e.pageX,
+                    pageY: e.pageY,
+                    preventDefault: emptyFunction,
+                    button: 0
+                }, [await docFunc()]);
             } else {
                 document.addEventListener("pointermove", onRowMove);
                 document.addEventListener("pointerup", onRowUp);
@@ -56,16 +61,18 @@ export function SetupDrag(
 export async function DragLinkAsDocument(dragEle: HTMLElement, x: number, y: number, linkDoc: Doc, sourceDoc: Doc) {
     let draggeddoc = LinkManager.Instance.getOppositeAnchor(linkDoc, sourceDoc);
 
-    let moddrag = await Cast(draggeddoc.annotationOn, Doc);
-    let dragdocs = moddrag ? [moddrag] : [draggeddoc];
-    let dragData = new DragManager.DocumentDragData(dragdocs, dragdocs);
-    dragData.dropAction = "alias" as dropActionType;
-    DragManager.StartLinkedDocumentDrag([dragEle], sourceDoc, dragData, x, y, {
-        handlers: {
-            dragComplete: action(emptyFunction),
-        },
-        hideSource: false
-    });
+    if (draggeddoc) {
+        let moddrag = await Cast(draggeddoc.annotationOn, Doc);
+        let dragdocs = moddrag ? [moddrag] : [draggeddoc];
+        let dragData = new DragManager.DocumentDragData(dragdocs, dragdocs);
+        dragData.dropAction = "alias" as dropActionType;
+        DragManager.StartLinkedDocumentDrag([dragEle], sourceDoc, dragData, x, y, {
+            handlers: {
+                dragComplete: action(emptyFunction),
+            },
+            hideSource: false
+        });
+    }
 }
 
 export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: number, sourceDoc: Doc) {
@@ -75,9 +82,16 @@ export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: n
     if (srcTarg) {
         let linkDocs = LinkManager.Instance.getAllRelatedLinks(srcTarg);
         if (linkDocs) {
-            draggedDocs = linkDocs.map(link => {
-                return LinkManager.Instance.getOppositeAnchor(link, sourceDoc);
-            });
+            linkDocs.forEach((doc) => {
+                let opp = LinkManager.Instance.getOppositeAnchor(doc, sourceDoc);
+                if (opp) {
+                    draggedDocs.push(opp);
+                }
+            }
+            );
+            // draggedDocs = linkDocs.map(link => {
+            //     return LinkManager.Instance.getOppositeAnchor(link, sourceDoc);
+            // });
         }
     }
     if (draggedDocs.length) {
@@ -321,6 +335,7 @@ export namespace DragManager {
             dragElement.style.top = "0";
             dragElement.style.bottom = "";
             dragElement.style.left = "0";
+            dragElement.style.transition = "none";
             dragElement.style.color = "black";
             dragElement.style.transformOrigin = "0 0";
             dragElement.style.zIndex = globalCssVariables.contextMenuZindex;// "1000";
diff --git a/src/client/util/History.ts b/src/client/util/History.ts
index 545ea8629..cbf5b3fc8 100644
--- a/src/client/util/History.ts
+++ b/src/client/util/History.ts
@@ -2,6 +2,8 @@ import { Doc, Opt, Field } from "../../new_fields/Doc";
 import { DocServer } from "../DocServer";
 import { RouteStore } from "../../server/RouteStore";
 import { MainView } from "../views/MainView";
+import * as qs from 'query-string';
+import { Utils, OmitKeys } from "../../Utils";
 
 export namespace HistoryUtil {
     export interface DocInitializerList {
@@ -11,9 +13,11 @@ export namespace HistoryUtil {
     export interface DocUrl {
         type: "doc";
         docId: string;
-        initializers: {
+        initializers?: {
             [docId: string]: DocInitializerList;
         };
+        readonly?: boolean;
+        nro?: boolean;
     }
 
     export type ParsedUrl = DocUrl;
@@ -21,7 +25,7 @@ export namespace HistoryUtil {
     // const handlers: ((state: ParsedUrl | null) => void)[] = [];
     function onHistory(e: PopStateEvent) {
         if (window.location.pathname !== RouteStore.home) {
-            const url = e.state as ParsedUrl || parseUrl(window.location.pathname);
+            const url = e.state as ParsedUrl || parseUrl(window.location);
             if (url) {
                 switch (url.type) {
                     case "doc":
@@ -62,42 +66,111 @@ export namespace HistoryUtil {
     //     }
     // }
 
-    export function parseUrl(pathname: string): ParsedUrl | undefined {
-        let pathnameSplit = pathname.split("/");
-        if (pathnameSplit.length !== 2) {
-            return undefined;
+    const parsers: { [type: string]: (pathname: string[], opts: qs.ParsedQuery) => ParsedUrl | undefined } = {};
+    const stringifiers: { [type: string]: (state: ParsedUrl) => string } = {};
+
+    type ParserValue = true | "none" | "json" | ((value: string) => any);
+
+    type Parser = {
+        [key: string]: ParserValue
+    };
+
+    function addParser(type: string, requiredFields: Parser, optionalFields: Parser, customParser?: (pathname: string[], opts: qs.ParsedQuery, current: ParsedUrl) => ParsedUrl | null | undefined) {
+        function parse(parser: ParserValue, value: string | string[] | null | undefined) {
+            if (value === undefined || value === null) {
+                return value;
+            }
+            if (Array.isArray(value)) {
+            } else if (parser === true || parser === "json") {
+                value = JSON.parse(value);
+            } else if (parser === "none") {
+            } else {
+                value = parser(value);
+            }
+            return value;
         }
-        const type = pathnameSplit[0];
-        const data = pathnameSplit[1];
+        parsers[type] = (pathname, opts) => {
+            const current: any = { type };
+            for (const required in requiredFields) {
+                if (!(required in opts)) {
+                    return undefined;
+                }
+                const parser = requiredFields[required];
+                let value = opts[required];
+                value = parse(parser, value);
+                if (value !== null && value !== undefined) {
+                    current[required] = value;
+                }
+            }
+            for (const opt in optionalFields) {
+                if (!(opt in opts)) {
+                    continue;
+                }
+                const parser = optionalFields[opt];
+                let value = opts[opt];
+                value = parse(parser, value);
+                if (value !== undefined) {
+                    current[opt] = value;
+                }
+            }
+            if (customParser) {
+                const val = customParser(pathname, opts, current);
+                if (val === null) {
+                    return undefined;
+                } else if (val === undefined) {
+                    return current;
+                } else {
+                    return val;
+                }
+            }
+            return current;
+        };
+    }
 
-        if (type === "doc") {
-            const s = data.split("?");
-            if (s.length < 1 || s.length > 2) {
-                return undefined;
+    function addStringifier(type: string, keys: string[], customStringifier?: (state: ParsedUrl, current: string) => string) {
+        stringifiers[type] = state => {
+            let path = DocServer.prepend(`/${type}`);
+            if (customStringifier) {
+                path = customStringifier(state, path);
             }
-            const docId = s[0];
-            const initializers = s.length === 2 ? JSON.parse(decodeURIComponent(s[1])) : {};
-            return {
-                type: "doc",
-                docId,
-                initializers
-            };
+            const queryObj = OmitKeys(state, keys).extract;
+            const query: any = {};
+            Object.keys(queryObj).forEach(key => query[key] = queryObj[key] === null ? null : JSON.stringify(queryObj[key]));
+            const queryString = qs.stringify(query);
+            return path + (queryString ? `?${queryString}` : "");
+        };
+    }
+
+    addParser("doc", {}, { readonly: true, initializers: true, nro: true }, (pathname, opts, current) => {
+        if (pathname.length !== 2) return undefined;
+
+        current.initializers = current.initializers || {};
+        const docId = pathname[1];
+        current.docId = docId;
+    });
+    addStringifier("doc", ["initializers", "readonly", "nro"], (state, current) => {
+        return `${current}/${state.docId}`;
+    });
+
+
+    export function parseUrl(location: Location | URL): ParsedUrl | undefined {
+        const pathname = location.pathname.substring(1);
+        const search = location.search;
+        const opts = qs.parse(search, { sort: false });
+        let pathnameSplit = pathname.split("/");
+
+        const type = pathnameSplit[0];
+
+        if (type in parsers) {
+            return parsers[type](pathnameSplit, opts);
         }
 
         return undefined;
     }
 
     export function createUrl(params: ParsedUrl): string {
-        let baseUrl = DocServer.prepend(`/${params.type}`);
-        switch (params.type) {
-            case "doc":
-                const initializers = encodeURIComponent(JSON.stringify(params.initializers));
-                const id = params.docId;
-                let url = baseUrl + `/${id}`;
-                if (Object.keys(params.initializers).length) {
-                    url += `?${initializers}`;
-                }
-                return url;
+        if (params.type in stringifiers) {
+            return stringifiers[params.type](params);
         }
         return "";
     }
@@ -112,7 +185,10 @@ export namespace HistoryUtil {
 
     async function onDocUrl(url: DocUrl) {
         const field = await DocServer.GetRefField(url.docId);
-        await Promise.all(Object.keys(url.initializers).map(id => initDoc(id, url.initializers[id])));
+        const init = url.initializers;
+        if (init) {
+            await Promise.all(Object.keys(init).map(id => initDoc(id, init[id])));
+        }
         if (field instanceof Doc) {
             MainView.Instance.openWorkspace(field, true);
         }
diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx
new file mode 100644
index 000000000..a810db0fa
--- /dev/null
+++ b/src/client/util/Import & Export/DirectoryImportBox.tsx
@@ -0,0 +1,376 @@
+import "fs";
+import React = require("react");
+import { Doc, Opt, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { DocServer } from "../../DocServer";
+import { RouteStore } from "../../../server/RouteStore";
+import { action, observable, autorun, runInAction, computed } from "mobx";
+import { FieldViewProps, FieldView } from "../../views/nodes/FieldView";
+import Measure, { ContentRect } from "react-measure";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUp, faTag, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Docs, DocumentOptions } from "../../documents/Documents";
+import { observer } from "mobx-react";
+import ImportMetadataEntry, { keyPlaceholder, valuePlaceholder } from "./ImportMetadataEntry";
+import { Utils } from "../../../Utils";
+import { DocumentManager } from "../DocumentManager";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { List } from "../../../new_fields/List";
+import { Cast, BoolCast, NumCast } from "../../../new_fields/Types";
+import { listSpec } from "../../../new_fields/Schema";
+
+const unsupported = ["text/html", "text/plain"];
+
+@observer
+export default class DirectoryImportBox extends React.Component<FieldViewProps> {
+    private selector = React.createRef<HTMLInputElement>();
+    @observable private top = 0;
+    @observable private left = 0;
+    private dimensions = 50;
+
+    @observable private entries: ImportMetadataEntry[] = [];
+
+    @observable private quota = 1;
+    @observable private remaining = 1;
+
+    @observable private uploading = false;
+    @observable private removeHover = false;
+
+    public static LayoutString() { return FieldView.LayoutString(DirectoryImportBox); }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        library.add(faArrowUp, faTag, faPlus);
+        let doc = this.props.Document;
+        this.editingMetadata = this.editingMetadata || false;
+        this.persistent = this.persistent || false;
+        !Cast(doc.data, listSpec(Doc)) && (doc.data = new List<Doc>());
+    }
+
+    @computed
+    private get editingMetadata() {
+        return BoolCast(this.props.Document.editingMetadata);
+    }
+
+    private set editingMetadata(value: boolean) {
+        this.props.Document.editingMetadata = value;
+    }
+
+    @computed
+    private get persistent() {
+        return BoolCast(this.props.Document.persistent);
+    }
+
+    private set persistent(value: boolean) {
+        this.props.Document.persistent = value;
+    }
+
+    handleSelection = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        runInAction(() => this.uploading = true);
+
+        let promises: Promise<void>[] = [];
+        let docs: Doc[] = [];
+
+        let files = e.target.files;
+        if (!files || files.length === 0) return;
+
+        let directory = (files.item(0) as any).webkitRelativePath.split("/", 1);
+
+        let validated: File[] = [];
+        for (let i = 0; i < files.length; i++) {
+            let file = files.item(i);
+            file && !unsupported.includes(file.type) && validated.push(file);
+        }
+
+        runInAction(() => this.quota = validated.length);
+
+        let sizes = [];
+        let modifiedDates = [];
+
+        for (let uploaded_file of validated) {
+            let formData = new FormData();
+            formData.append('file', uploaded_file);
+            let dropFileName = uploaded_file ? uploaded_file.name : "-empty-";
+            let type = uploaded_file.type;
+
+            sizes.push(uploaded_file.size);
+            modifiedDates.push(uploaded_file.lastModified);
+
+            runInAction(() => this.remaining++);
+
+            let prom = fetch(DocServer.prepend(RouteStore.upload), {
+                method: 'POST',
+                body: formData
+            }).then(async (res: Response) => {
+                (await res.json()).map(action((file: any) => {
+                    let docPromise = Docs.Get.DocumentFromType(type, DocServer.prepend(file), { nativeWidth: 300, width: 300, title: dropFileName });
+                    docPromise.then(doc => {
+                        doc && docs.push(doc) && runInAction(() => this.remaining--);
+                    });
+                }));
+            });
+            promises.push(prom);
+        }
+
+        await Promise.all(promises);
+
+        for (let i = 0; i < docs.length; i++) {
+            let doc = docs[i];
+            doc.size = sizes[i];
+            doc.modified = modifiedDates[i];
+            this.entries.forEach(entry => {
+                let target = entry.onDataDoc ? Doc.GetProto(doc) : doc;
+                target[entry.key] = entry.value;
+            });
+        }
+
+        let doc = this.props.Document;
+        let height: number = NumCast(doc.height) || 0;
+        let offset: number = this.persistent ? (height === 0 ? 0 : height + 30) : 0;
+        let options: DocumentOptions = {
+            title: `Import of ${directory}`,
+            width: 1105,
+            height: 500,
+            x: NumCast(doc.x),
+            y: NumCast(doc.y) + offset
+        };
+        let parent = this.props.ContainingCollectionView;
+        if (parent) {
+            let importContainer = Docs.Create.StackingDocument(docs, options);
+            importContainer.singleColumn = false;
+            Doc.AddDocToList(Doc.GetProto(parent.props.Document), "data", importContainer);
+            !this.persistent && this.props.removeDocument && this.props.removeDocument(doc);
+            DocumentManager.Instance.jumpToDocument(importContainer, true);
+
+        }
+
+        runInAction(() => {
+            this.uploading = false;
+            this.quota = 1;
+            this.remaining = 1;
+        });
+    }
+
+    componentDidMount() {
+        this.selector.current!.setAttribute("directory", "");
+        this.selector.current!.setAttribute("webkitdirectory", "");
+    }
+
+    @action
+    preserveCentering = (rect: ContentRect) => {
+        let bounds = rect.offset!;
+        if (bounds.width === 0 || bounds.height === 0) {
+            return;
+        }
+        let offset = this.dimensions / 2;
+        this.left = bounds.width / 2 - offset;
+        this.top = bounds.height / 2 - offset;
+    }
+
+    @action
+    addMetadataEntry = async () => {
+        let entryDoc = new Doc();
+        entryDoc.checked = false;
+        entryDoc.key = keyPlaceholder;
+        entryDoc.value = valuePlaceholder;
+        Doc.AddDocToList(this.props.Document, "data", entryDoc);
+    }
+
+    @action
+    remove = async (entry: ImportMetadataEntry) => {
+        let metadata = await DocListCastAsync(this.props.Document.data);
+        if (metadata) {
+            let index = this.entries.indexOf(entry);
+            if (index !== -1) {
+                runInAction(() => this.entries.splice(index, 1));
+                index = metadata.indexOf(entry.props.Document);
+                if (index !== -1) {
+                    metadata.splice(index, 1);
+                }
+            }
+
+        }
+    }
+
+    render() {
+        let dimensions = 50;
+        let entries = DocListCast(this.props.Document.data);
+        let isEditing = this.editingMetadata;
+        let remaining = this.remaining;
+        let quota = this.quota;
+        let uploading = this.uploading;
+        let showRemoveLabel = this.removeHover;
+        let persistent = this.persistent;
+        let percent = `${100 - (remaining / quota * 100)}`;
+        percent = percent.split(".")[0];
+        percent = percent.startsWith("100") ? "99" : percent;
+        let marginOffset = (percent.length === 1 ? 5 : 0) - 1.6;
+        return (
+            <Measure offset onResize={this.preserveCentering}>
+                {({ measureRef }) =>
+                    <div ref={measureRef} style={{ width: "100%", height: "100%", pointerEvents: "all" }} >
+                        <input
+                            id={"selector"}
+                            ref={this.selector}
+                            onChange={this.handleSelection}
+                            type="file"
+                            style={{
+                                position: "absolute",
+                                display: "none"
+                            }} />
+                        <label
+                            htmlFor={"selector"}
+                            style={{
+                                opacity: isEditing ? 0 : 1,
+                                pointerEvents: isEditing ? "none" : "all",
+                                transition: "0.4s ease opacity"
+                            }}
+                        >
+                            <div style={{
+                                width: dimensions,
+                                height: dimensions,
+                                borderRadius: "50%",
+                                background: "black",
+                                position: "absolute",
+                                left: this.left,
+                                top: this.top
+                            }} />
+                            <div style={{
+                                position: "absolute",
+                                left: this.left + 12.6,
+                                top: this.top + 11,
+                                opacity: uploading ? 0 : 1,
+                                transition: "0.4s opacity ease"
+                            }}>
+                                <FontAwesomeIcon icon={faArrowUp} color="#FFFFFF" size={"2x"} />
+                            </div>
+                            <img
+                                style={{
+                                    width: 80,
+                                    height: 80,
+                                    transition: "0.4s opacity ease",
+                                    opacity: uploading ? 0.7 : 0,
+                                    position: "absolute",
+                                    top: this.top - 15,
+                                    left: this.left - 15
+                                }}
+                                src={"/assets/loading.gif"}></img>
+                        </label>
+                        <input
+                            type={"checkbox"}
+                            onChange={e => runInAction(() => this.persistent = e.target.checked)}
+                            style={{
+                                margin: 0,
+                                position: "absolute",
+                                left: 10,
+                                bottom: 10,
+                                opacity: isEditing || uploading ? 0 : 1,
+                                transition: "0.4s opacity ease",
+                                pointerEvents: isEditing || uploading ? "none" : "all"
+                            }}
+                            checked={this.persistent}
+                            onPointerEnter={action(() => this.removeHover = true)}
+                            onPointerLeave={action(() => this.removeHover = false)}
+                        />
+                        <p
+                            style={{
+                                position: "absolute",
+                                left: 27,
+                                bottom: 8.4,
+                                fontSize: 12,
+                                opacity: showRemoveLabel ? 1 : 0,
+                                transition: "0.4s opacity ease"
+                            }}>Template will be <span style={{ textDecoration: "underline", textDecorationColor: persistent ? "green" : "red", color: persistent ? "green" : "red" }}>{persistent ? "kept" : "removed"}</span> after upload</p>
+                        <div
+                            style={{
+                                transition: "0.4s opacity ease",
+                                opacity: uploading ? 1 : 0,
+                                pointerEvents: "none",
+                                position: "absolute",
+                                left: 10,
+                                top: this.top + 12.3,
+                                fontSize: 18,
+                                color: "white",
+                                marginLeft: this.left + marginOffset
+                            }}>{percent}%</div>
+                        <div
+                            style={{
+                                position: "absolute",
+                                top: 10,
+                                right: 10,
+                                borderRadius: "50%",
+                                width: 25,
+                                height: 25,
+                                background: "black",
+                                pointerEvents: uploading ? "none" : "all",
+                                opacity: uploading ? 0 : 1,
+                                transition: "0.4s opacity ease"
+                            }}
+                            title={isEditing ? "Back to Upload" : "Add Metadata"}
+                            onClick={action(() => this.editingMetadata = !this.editingMetadata)}
+                        />
+                        <FontAwesomeIcon
+                            style={{
+                                pointerEvents: "none",
+                                position: "absolute",
+                                right: isEditing ? 16.3 : 14.5,
+                                top: isEditing ? 15.4 : 16,
+                                opacity: uploading ? 0 : 1,
+                                transition: "0.4s opacity ease"
+                            }}
+                            icon={isEditing ? faArrowUp : faTag}
+                            color="#FFFFFF"
+                            size={"1x"}
+                        />
+                        <div
+                            style={{
+                                transition: "0.4s ease opacity",
+                                width: "100%",
+                                height: "100%",
+                                pointerEvents: isEditing ? "all" : "none",
+                                opacity: isEditing ? 1 : 0,
+                                overflowY: "scroll"
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderRadius: "50%",
+                                    width: 25,
+                                    height: 25,
+                                    marginLeft: 10,
+                                    position: "absolute",
+                                    right: 41,
+                                    top: 10
+                                }}
+                                title={"Add Metadata Entry"}
+                                onClick={this.addMetadataEntry}
+                            >
+                                <FontAwesomeIcon
+                                    style={{
+                                        pointerEvents: "none",
+                                        marginLeft: 6.4,
+                                        marginTop: 5.2
+                                    }}
+                                    icon={faPlus}
+                                    size={"1x"}
+                                />
+                            </div>
+                            <p style={{ paddingLeft: 10, paddingTop: 8, paddingBottom: 7 }} >Add metadata to your import...</p>
+                            <hr style={{ margin: "6px 10px 12px 10px" }} />
+                            {entries.map(doc =>
+                                <ImportMetadataEntry
+                                    Document={doc}
+                                    key={doc[Id]}
+                                    remove={this.remove}
+                                    ref={(el) => { if (el) this.entries.push(el); }}
+                                    next={this.addMetadataEntry}
+                                />
+                            )}
+                        </div>
+                    </div>
+                }
+            </Measure>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/util/Import & Export/ImportMetadataEntry.tsx b/src/client/util/Import & Export/ImportMetadataEntry.tsx
new file mode 100644
index 000000000..f5198c39b
--- /dev/null
+++ b/src/client/util/Import & Export/ImportMetadataEntry.tsx
@@ -0,0 +1,149 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import { EditableView } from "../../views/EditableView";
+import { observable, action, computed } from "mobx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { Opt, Doc } from "../../../new_fields/Doc";
+import { StrCast, BoolCast } from "../../../new_fields/Types";
+
+interface KeyValueProps {
+    Document: Doc;
+    remove: (self: ImportMetadataEntry) => void;
+    next: () => void;
+}
+
+export const keyPlaceholder = "Key";
+export const valuePlaceholder = "Value";
+
+@observer
+export default class ImportMetadataEntry extends React.Component<KeyValueProps> {
+
+    private keyRef = React.createRef<EditableView>();
+    private valueRef = React.createRef<EditableView>();
+    private checkRef = React.createRef<HTMLInputElement>();
+
+    constructor(props: KeyValueProps) {
+        super(props);
+        library.add(faPlus);
+    }
+
+    @computed
+    public get valid() {
+        return (this.key.length > 0 && this.key !== keyPlaceholder) && (this.value.length > 0 && this.value !== valuePlaceholder);
+    }
+
+    @computed
+    private get backing() {
+        return this.props.Document;
+    }
+
+    @computed
+    public get onDataDoc() {
+        return BoolCast(this.backing.checked);
+    }
+
+    public set onDataDoc(value: boolean) {
+        this.backing.checked = value;
+    }
+
+    @computed
+    public get key() {
+        return StrCast(this.backing.key);
+    }
+
+    public set key(value: string) {
+        this.backing.key = value;
+    }
+
+    @computed
+    public get value() {
+        return StrCast(this.backing.value);
+    }
+
+    public set value(value: string) {
+        this.backing.value = value;
+    }
+
+    @action
+    updateKey = (newKey: string) => {
+        this.key = newKey;
+        this.keyRef.current && this.keyRef.current.setIsFocused(false);
+        this.valueRef.current && this.valueRef.current.setIsFocused(true);
+        this.key.length === 0 && (this.key = keyPlaceholder);
+        return true;
+    }
+
+    @action
+    updateValue = (newValue: string, shiftDown: boolean) => {
+        this.value = newValue;
+        this.valueRef.current && this.valueRef.current.setIsFocused(false);
+        this.value.length > 0 && shiftDown && this.props.next();
+        this.value.length === 0 && (this.value = valuePlaceholder);
+        return true;
+    }
+
+    render() {
+        let keyValueStyle: React.CSSProperties = {
+            paddingLeft: 10,
+            width: "50%",
+            opacity: this.valid ? 1 : 0.5,
+        };
+        return (
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    paddingBottom: 5,
+                    paddingRight: 5,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    alignContent: "center"
+                }}
+            >
+                <input
+                    onChange={e => this.onDataDoc = e.target.checked}
+                    ref={this.checkRef}
+                    style={{ margin: "0 10px 0 15px" }}
+                    type="checkbox"
+                    title={"Add to Data Document?"}
+                    checked={this.onDataDoc}
+                />
+                <div className={"key_container"} style={keyValueStyle}>
+                    <EditableView
+                        ref={this.keyRef}
+                        contents={this.key}
+                        SetValue={this.updateKey}
+                        GetValue={() => ""}
+                        oneLine={true}
+                    />
+                </div>
+                <div
+                    className={"value_container"}
+                    style={keyValueStyle}>
+                    <EditableView
+                        ref={this.valueRef}
+                        contents={this.value}
+                        SetValue={this.updateValue}
+                        GetValue={() => ""}
+                        oneLine={true}
+                    />
+                </div>
+                <div onClick={() => this.props.remove(this)} title={"Delete Entry"}>
+                    <FontAwesomeIcon
+                        icon={faPlus}
+                        color={"red"}
+                        size={"1x"}
+                        style={{
+                            marginLeft: 15,
+                            marginRight: 15,
+                            transform: "rotate(45deg)"
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index f2f3e51dd..a647f22c1 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -5,6 +5,7 @@ import { listSpec } from "../../new_fields/Schema";
 import { List } from "../../new_fields/List";
 import { Id } from "../../new_fields/FieldSymbols";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
+import { Docs } from "../documents/Documents";
 
 
 /* 
@@ -35,7 +36,9 @@ export class LinkManager {
     // the linkmanagerdoc stores a list of docs representing all linkdocs in 'allLinks' and a list of strings representing all group types in 'allGroupTypes'
     // lists of strings representing the metadata keys for each group type is stored under a key that is the same as the group type 
     public get LinkManagerDoc(): Doc | undefined {
-        return FieldValue(Cast(CurrentUserUtils.UserDocument.linkManagerDoc, Doc));
+        // return FieldValue(Cast(CurrentUserUtils.UserDocument.linkManagerDoc, Doc));
+
+        return Docs.Prototypes.MainLinkDocument();
     }
 
     public getAllLinks(): Doc[] {
@@ -68,8 +71,8 @@ export class LinkManager {
     // finds all links that contain the given anchor
     public getAllRelatedLinks(anchor: Doc): Doc[] {//List<Doc> {
         let related = LinkManager.Instance.getAllLinks().filter(link => {
-            let protomatch1 = Doc.AreProtosEqual(anchor, Cast(link.anchor1, Doc, new Doc));
-            let protomatch2 = Doc.AreProtosEqual(anchor, Cast(link.anchor2, Doc, new Doc));
+            let protomatch1 = Doc.AreProtosEqual(anchor, Cast(link.anchor1, Doc, null));
+            let protomatch2 = Doc.AreProtosEqual(anchor, Cast(link.anchor2, Doc, null));
             return protomatch1 || protomatch2;
         });
         return related;
@@ -100,9 +103,11 @@ export class LinkManager {
                 if (index > -1) groupTypes.splice(index, 1);
                 LinkManager.Instance.LinkManagerDoc.allGroupTypes = new List<string>(groupTypes);
                 LinkManager.Instance.LinkManagerDoc[groupType] = undefined;
-                LinkManager.Instance.getAllLinks().forEach(linkDoc => {
-                    LinkManager.Instance.removeGroupFromAnchor(linkDoc, Cast(linkDoc.anchor1, Doc, new Doc), groupType);
-                    LinkManager.Instance.removeGroupFromAnchor(linkDoc, Cast(linkDoc.anchor2, Doc, new Doc), groupType);
+                LinkManager.Instance.getAllLinks().forEach(async linkDoc => {
+                    const anchor1 = await Cast(linkDoc.anchor1, Doc);
+                    const anchor2 = await Cast(linkDoc.anchor2, Doc);
+                    anchor1 && LinkManager.Instance.removeGroupFromAnchor(linkDoc, anchor1, groupType);
+                    anchor2 && LinkManager.Instance.removeGroupFromAnchor(linkDoc, anchor2, groupType);
                 });
             }
             return true;
@@ -122,8 +127,8 @@ export class LinkManager {
     }
 
     // gets the groups associates with an anchor in a link
-    public getAnchorGroups(linkDoc: Doc, anchor: Doc): Array<Doc> {
-        if (Doc.AreProtosEqual(anchor, Cast(linkDoc.anchor1, Doc, new Doc))) {
+    public getAnchorGroups(linkDoc: Doc, anchor?: Doc): Array<Doc> {
+        if (Doc.AreProtosEqual(anchor, Cast(linkDoc.anchor1, Doc, null))) {
             return DocListCast(linkDoc.anchor1Groups);
         } else {
             return DocListCast(linkDoc.anchor2Groups);
@@ -132,7 +137,7 @@ export class LinkManager {
 
     // sets the groups of the given anchor in the given link
     public setAnchorGroups(linkDoc: Doc, anchor: Doc, groups: Doc[]) {
-        if (Doc.AreProtosEqual(anchor, Cast(linkDoc.anchor1, Doc, new Doc))) {
+        if (Doc.AreProtosEqual(anchor, Cast(linkDoc.anchor1, Doc, null))) {
             linkDoc.anchor1Groups = new List<Doc>(groups);
         } else {
             linkDoc.anchor2Groups = new List<Doc>(groups);
@@ -209,10 +214,10 @@ export class LinkManager {
         let md: Doc[] = [];
         let allLinks = LinkManager.Instance.getAllLinks();
         allLinks.forEach(linkDoc => {
-            let anchor1Groups = LinkManager.Instance.getAnchorGroups(linkDoc, Cast(linkDoc.anchor1, Doc, new Doc));
-            let anchor2Groups = LinkManager.Instance.getAnchorGroups(linkDoc, Cast(linkDoc.anchor2, Doc, new Doc));
-            anchor1Groups.forEach(groupDoc => { if (StrCast(groupDoc.type).toUpperCase() === groupType.toUpperCase()) md.push(Cast(groupDoc.metadata, Doc, new Doc)); });
-            anchor2Groups.forEach(groupDoc => { if (StrCast(groupDoc.type).toUpperCase() === groupType.toUpperCase()) md.push(Cast(groupDoc.metadata, Doc, new Doc)); });
+            let anchor1Groups = LinkManager.Instance.getAnchorGroups(linkDoc, Cast(linkDoc.anchor1, Doc, null));
+            let anchor2Groups = LinkManager.Instance.getAnchorGroups(linkDoc, Cast(linkDoc.anchor2, Doc, null));
+            anchor1Groups.forEach(groupDoc => { if (StrCast(groupDoc.type).toUpperCase() === groupType.toUpperCase()) { const meta = Cast(groupDoc.metadata, Doc, null); meta && md.push(meta); } });
+            anchor2Groups.forEach(groupDoc => { if (StrCast(groupDoc.type).toUpperCase() === groupType.toUpperCase()) { const meta = Cast(groupDoc.metadata, Doc, null); meta && md.push(meta); } });
         });
         return md;
     }
@@ -221,18 +226,20 @@ export class LinkManager {
     public doesLinkExist(anchor1: Doc, anchor2: Doc): boolean {
         let allLinks = LinkManager.Instance.getAllLinks();
         let index = allLinks.findIndex(linkDoc => {
-            return (Doc.AreProtosEqual(Cast(linkDoc.anchor1, Doc, new Doc), anchor1) && Doc.AreProtosEqual(Cast(linkDoc.anchor2, Doc, new Doc), anchor2)) ||
-                (Doc.AreProtosEqual(Cast(linkDoc.anchor1, Doc, new Doc), anchor2) && Doc.AreProtosEqual(Cast(linkDoc.anchor2, Doc, new Doc), anchor1));
+            return (Doc.AreProtosEqual(Cast(linkDoc.anchor1, Doc, null), anchor1) && Doc.AreProtosEqual(Cast(linkDoc.anchor2, Doc, null), anchor2)) ||
+                (Doc.AreProtosEqual(Cast(linkDoc.anchor1, Doc, null), anchor2) && Doc.AreProtosEqual(Cast(linkDoc.anchor2, Doc, null), anchor1));
         });
         return index !== -1;
     }
 
     // finds the opposite anchor of a given anchor in a link
-    public getOppositeAnchor(linkDoc: Doc, anchor: Doc): Doc {
-        if (Doc.AreProtosEqual(anchor, Cast(linkDoc.anchor1, Doc, new Doc))) {
-            return Cast(linkDoc.anchor2, Doc, new Doc);
+    //TODO This should probably return undefined if there isn't an opposite anchor
+    //TODO This should also await the return value of the anchor so we don't filter out promises
+    public getOppositeAnchor(linkDoc: Doc, anchor: Doc): Doc | undefined {
+        if (Doc.AreProtosEqual(anchor, Cast(linkDoc.anchor1, Doc, null))) {
+            return Cast(linkDoc.anchor2, Doc, null);
         } else {
-            return Cast(linkDoc.anchor1, Doc, new Doc);
+            return Cast(linkDoc.anchor1, Doc, null);
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index 2a57180d3..e0ff3074b 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -400,6 +400,20 @@ export const marks: { [index: string]: MarkSpec } = {
         }]
     },
 
+    p18: {
+        parseDOM: [{ style: 'font-size: 18px;' }],
+        toDOM: () => ['span', {
+            style: 'font-size: 18px;'
+        }]
+    },
+
+    p20: {
+        parseDOM: [{ style: 'font-size: 20px;' }],
+        toDOM: () => ['span', {
+            style: 'font-size: 20px;'
+        }]
+    },
+
     p24: {
         parseDOM: [{ style: 'font-size: 24px;' }],
         toDOM: () => ['span', {
@@ -504,28 +518,39 @@ export class SummarizedView {
     _view: any;
     constructor(node: any, view: any, getPos: any) {
         this._collapsed = document.createElement("span");
-        this._collapsed.textContent = "㊉";
+        this._collapsed.textContent = node.attrs.visibility ? "㊀" : "㊉";
         this._collapsed.style.opacity = "0.5";
         this._collapsed.style.position = "relative";
         this._collapsed.style.width = "40px";
         this._collapsed.style.height = "20px";
         let self = this;
         this._view = view;
+        const js = node.toJSON;
+        node.toJSON = function () {
+
+            return js.apply(this, arguments);
+        };
         this._collapsed.onpointerdown = function (e: any) {
             if (node.attrs.visibility) {
-                node.attrs.visibility = !node.attrs.visibility;
+                // node.attrs.visibility = !node.attrs.visibility;
                 let y = getPos();
+                const attrs = { ...node.attrs };
+                attrs.visibility = !attrs.visibility;
                 let { from, to } = self.updateSummarizedText(y + 1, view.state.schema.marks.highlight);
                 let length = to - from;
                 let newSelection = TextSelection.create(view.state.doc, y + 1, y + 1 + length);
                 // update attrs of node
-                node.attrs.text = newSelection.content();
-                node.attrs.textslice = newSelection.content().toJSON();
+                attrs.text = newSelection.content();
+                attrs.textslice = newSelection.content().toJSON();
+                view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs));
                 view.dispatch(view.state.tr.setSelection(newSelection).deleteSelection(view.state, () => { }));
                 self._collapsed.textContent = "㊉";
             } else {
-                node.attrs.visibility = !node.attrs.visibility;
+                // node.attrs.visibility = !node.attrs.visibility;
                 let y = getPos();
+                const attrs = { ...node.attrs };
+                attrs.visibility = !attrs.visibility;
+                view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs));
                 let mark = view.state.schema.mark(view.state.schema.marks.highlight);
                 view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1)));
                 const from = view.state.selection.from;
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 3156c4f43..62c2cfe85 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -33,6 +33,8 @@ export interface CompileError {
     errors: any[];
 }
 
+export type CompileResult = CompiledScript | CompileError;
+
 export namespace Scripting {
     export function addGlobal(global: { name: string }): void;
     export function addGlobal(name: string, global: any): void;
@@ -61,7 +63,6 @@ export function scriptingGlobal(constructor: { new(...args: any[]): any }) {
 
 const scriptingGlobals: { [name: string]: any } = {};
 
-export type CompileResult = CompiledScript | CompileError;
 function Run(script: string | undefined, customParams: string[], diagnostics: any[], originalScript: string, options: ScriptOptions): CompileResult {
     const errors = diagnostics.some(diag => diag.category === ts.DiagnosticCategory.Error);
     if ((options.typecheck !== false && errors) || !script) {
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 3c396362e..9efef888d 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -53,7 +53,7 @@ export namespace SelectionManager {
             stored.length > 0 && (targetColor = stored);
         }
         InkingControl.Instance.updateSelectedColor(targetColor);
-    });
+    }, { fireImmediately: true });
 
     export function DeselectDoc(docView: DocumentView): void {
         manager.DeselectDoc(docView);
diff --git a/src/client/util/SerializationHelper.ts b/src/client/util/SerializationHelper.ts
index a7246d7c4..17ae407c4 100644
--- a/src/client/util/SerializationHelper.ts
+++ b/src/client/util/SerializationHelper.ts
@@ -9,7 +9,7 @@ export namespace SerializationHelper {
 
     export function Serialize(obj: Field): any {
         if (obj === undefined || obj === null) {
-            return undefined;
+            return null;
         }
 
         if (typeof obj !== 'object') {
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index cb7ed976a..0d3adef2e 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -107,6 +107,8 @@ export class TooltipTextMenu {
         this.fontSizeToNum.set(schema.marks.p12, 12);
         this.fontSizeToNum.set(schema.marks.p14, 14);
         this.fontSizeToNum.set(schema.marks.p16, 16);
+        this.fontSizeToNum.set(schema.marks.p18, 18);
+        this.fontSizeToNum.set(schema.marks.p20, 20);
         this.fontSizeToNum.set(schema.marks.p24, 24);
         this.fontSizeToNum.set(schema.marks.p32, 32);
         this.fontSizeToNum.set(schema.marks.p48, 48);
@@ -121,7 +123,7 @@ export class TooltipTextMenu {
         this.listTypeToIcon.set(schema.nodes.ordered_list, "1)");
         this.listTypes = Array.from(this.listTypeToIcon.keys());
 
-        this.tooltip.appendChild(this.createLink().render(this.view).dom);
+        // this.tooltip.appendChild(this.createLink().render(this.view).dom);
 
         this.tooltip.appendChild(this.createStar().render(this.view).dom);
 
@@ -264,7 +266,7 @@ export class TooltipTextMenu {
                 e.preventDefault();
             }
         };
-        this.tooltip.appendChild(this.linkEditor);
+        // this.tooltip.appendChild(this.linkEditor);
     }
 
     makeLink = (target: string) => {
@@ -448,7 +450,7 @@ export class TooltipTextMenu {
                     let node = state.doc.nodeAt(from);
                     node && node.marks.map(m => {
                         m.type === markType && (curLink = m.attrs.href);
-                    })
+                    });
                     //toggleMark(markType)(state, dispatch);
                     //return true;
                 }
diff --git a/src/client/util/request-image-size.js b/src/client/util/request-image-size.js
index 0f9328872..27605d167 100644
--- a/src/client/util/request-image-size.js
+++ b/src/client/util/request-image-size.js
@@ -21,7 +21,9 @@ module.exports = function requestImageSize(options) {
     if (options && typeof options === 'object') {
         opts = Object.assign(options, opts);
     } else if (options && typeof options === 'string') {
-        opts = Object.assign({ uri: options }, opts);
+        opts = Object.assign({
+            uri: options
+        }, opts);
     } else {
         return Promise.reject(new Error('You should provide an URI string or a "request" options object.'));
     }
@@ -70,4 +72,4 @@ module.exports = function requestImageSize(options) {
 
         req.on('error', err => reject(err));
     });
-};
+};
\ No newline at end of file
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
index 2cbe1dd40..1f95af00c 100644
--- a/src/client/util/type_decls.d
+++ b/src/client/util/type_decls.d
@@ -204,3 +204,5 @@ declare const Docs: {
     TreeDocument(documents: Doc[], options?: DocumentOptions): Doc;
     StackingDocument(documents: Doc[], options?: DocumentOptions): Doc;
 };
+
+declare function d(...args:any[]):any;