added tutorial tool, still need to integrate with metadatatool

6 files changed, 122 insertions, 97 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 0bf78f57c..53c0823ea 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -224,6 +224,7 @@
     display: none;
 }
 
+.schema-table-cell-selected,
 .schema-table-cell,
 .row-menu {
     border: 1px solid global.$medium-gray;
@@ -232,6 +233,14 @@
     display: inline-flex;
     padding: 0;
     align-items: center;
+    input[type='text'] {
+        border: unset;
+    }
+}
+.schema-table-cell-selected {
+    input[type='text'] {
+        background: lightgray;
+    }
 }
 
 .schemaRTFCell {
@@ -310,4 +319,7 @@
 .schemaField-editing {
     outline: none;
     height: 100%;
+    cursor: text;
+    outline: none;
+    overflow: auto;
 }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 5a5cc3622..c06391f35 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -12,7 +12,7 @@ import { List } from '../../../../fields/List';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
-import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
+import { Docs, DocumentOptions, FInfo, FInfoFieldType } from '../../../documents/Documents';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
 import { dropActionType } from '../../../util/DropActionTypes';
@@ -49,14 +49,16 @@ import { SchemaRowBox } from './SchemaRowBox';
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
-export const FInfotoColType: { [key: string]: ColumnType } = {
+export const FInfotoColType: { [key in FInfoFieldType]: ColumnType } = {
     string: ColumnType.String,
     number: ColumnType.Number,
     boolean: ColumnType.Boolean,
     date: ColumnType.Date,
-    image: ColumnType.Image,
-    rtf: ColumnType.RTF,
-    enumeration: ColumnType.Enumeration,
+    richtext: ColumnType.RTF,
+    enum: ColumnType.Enumeration,
+    Doc: ColumnType.Any,
+    list: ColumnType.Any,
+    map: ColumnType.Any,
 };
 
 const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', 'text'];
@@ -198,7 +200,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._props.setContentViewBox?.(this);
         document.addEventListener('keydown', this.onKeyDown);
 
-        Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => this.fieldInfos.set(pair[0], pair[1]));
+        Object.entries(this._documentOptions).forEach(pair => this.fieldInfos.set(pair[0], pair[1] as FInfo));
         this._keysDisposer = observe(
             this.dataDoc[this.fieldKey ?? 'data'] as List<Doc>,
             change => {
@@ -250,7 +252,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     onKeyDown = (e: KeyboardEvent) => {
         if (this._selectedDocs.length > 0) {
-            switch (e.key) {
+            switch (e.key + (e.shiftKey ? 'Shift' : '')) {
+                case 'Enter':
                 case 'ArrowDown':
                     {
                         const lastDoc = this._selectedDocs.lastElement();
@@ -270,6 +273,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         e.preventDefault();
                     }
                     break;
+                case 'EnterShift':
                 case 'ArrowUp':
                     {
                         const firstDoc = this._selectedDocs.lastElement();
@@ -289,6 +293,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         e.preventDefault();
                     }
                     break;
+                case 'Tab':
                 case 'ArrowRight':
                     if (this._selectedCells) {
                         this._selectedCol = Math.min(this._colEles.length - 1, this._selectedCol + 1);
@@ -296,6 +301,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         this.selectCell(this._selectedDocs[0], 0, false, false);
                     }
                     break;
+                case 'TabShift':
                 case 'ArrowLeft':
                     if (this._selectedCells) {
                         this._selectedCol = Math.max(0, this._selectedCol - 1);
@@ -1187,7 +1193,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             let notFiltered = d.z || Doc.IsSystem(d) || DocUtils.FilterDocs([d], this.unrecursiveDocFilters(), childFiltersByRanges, this.Document).length > 0;
             if (notFiltered) {
                 notFiltered = (!searchDocs.length || searchDocs.includes(d)) && DocUtils.FilterDocs([d], childDocFilters, childFiltersByRanges, this.Document).length > 0;
-                const fieldKey = Doc.LayoutFieldKey(d);
+                const fieldKey = Doc.LayoutDataKey(d);
                 const isAnnotatableDoc = d[fieldKey] instanceof List && !(d[fieldKey] as List<Doc>)?.some(ele => !(ele instanceof Doc));
                 const docChildDocs = d[isAnnotatableDoc ? fieldKey + '_annotations' : fieldKey];
                 const sidebarDocs = isAnnotatableDoc && d[fieldKey + '_sidebar'];
@@ -1200,7 +1206,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             newarray = [];
                             // eslint-disable-next-line no-loop-func
                             subDocs.forEach(t => {
-                                const docFieldKey = Doc.LayoutFieldKey(t);
+                                const docFieldKey = Doc.LayoutDataKey(t);
                                 const isSubDocAnnotatable = t[docFieldKey] instanceof List && !(t[docFieldKey] as List<Doc>)?.some(ele => !(ele instanceof Doc));
                                 notFiltered = notFiltered || ((!searchDocs.length || searchDocs.includes(t)) && ((!childDocFilters.length && !childFiltersByRanges.length) || DocUtils.FilterDocs([t], childDocFilters, childFiltersByRanges, d).length));
                                 DocListCast(t[isSubDocAnnotatable ? docFieldKey + '_annotations' : docFieldKey]).forEach(newdoc => newarray.push(newdoc));
@@ -1287,7 +1293,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     isContentActive = () => this._props.isSelected() || this._props.isContentActive();
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
-    onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
     displayedDocsFunc = () => this.docsWithDrag.docs;
     render() {
         return (
@@ -1301,15 +1306,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     this.setColDrag(false);
                 }}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
-                <div
-                    className="schema-table"
-                    style={{ width: `calc(100% - ${this.previewWidth}px)` }}
-                    onWheel={e => this._props.isContentActive() && e.stopPropagation()}
-                    ref={ele => {
-                        // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
-                        this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
-                        (this._oldWheel = ele)?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
-                    }}>
+                <div className="schema-table" style={{ width: `calc(100% - ${this.previewWidth}px)` }} onWheel={e => this._props.isContentActive() && e.stopPropagation()} ref={ele => this.fixWheelEvents(ele, this._props.isContentActive)}>
                     <div className="schema-header-row" style={{ height: this.rowHeightFunc() }}>
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}>
                             <IconButton
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 5a64ecc62..9ad94cb31 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -21,11 +21,11 @@ import DOMPurify from 'dompurify';
  */
 
 export interface SchemaCellFieldProps {
-    contents: FieldType;
+    Doc: Doc;
+    contents: FieldType | undefined;
     fieldContents?: FieldViewProps;
     editing?: boolean;
     oneLine?: boolean;
-    Document: Doc;
     fieldKey: string;
     // eslint-disable-next-line no-use-before-define
     refSelectModeInfo: { enabled: boolean; currEditing: SchemaCellField | undefined };
@@ -55,7 +55,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
     }
 
-    get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
+    get docIndex(){return DocumentView.getDocViewIndex(this._props.Doc);} // prettier-ignore
 
     get selfRefPattern() {
         return `d${this.docIndex}.${this._props.fieldKey}`;
@@ -85,16 +85,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             () => this._editing,
             editing => {
                 if (editing) {
+                    this.setContent((this._unrenderedContent = this._props.GetValue() ?? ''));
                     this.setupRefSelect(this.refSelectConditionMet);
-                    setTimeout(() => {
-                        if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
-                            this._overlayDisposer?.();
-                            this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
-                            this._props.highlightCells?.(this._unrenderedContent);
-                            this.setContent(this._unrenderedContent);
-                            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length));
-                        }
-                    });
                 } else {
                     this._overlayDisposer?.();
                     this._overlayDisposer = undefined;
@@ -107,9 +99,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._disposers.fieldUpdate = reaction(
             () => this._props.GetValue(),
             fieldVal => {
-                console.log('Update: ' + this._props.Document.title, this._props.fieldKey, fieldVal);
                 this._unrenderedContent = fieldVal ?? '';
-                this.finalizeEdit(false, false, false);
+                this._editing && this.finalizeEdit(false, false, false);
             }
         );
     }
@@ -127,7 +118,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     _unmounted = false;
     componentWillUnmount(): void {
         this._unmounted = true;
-        console.log('Unmount: ' + this._props.Document.title, this._props.fieldKey);
         this._overlayDisposer?.();
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.finalizeEdit(false, true, false);
@@ -194,6 +184,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     setIsFocused = (value: boolean) => {
         const wasFocused = this._editing;
         this._editing = value;
+        this._editing && setTimeout(() => this._inputref?.focus());
         return wasFocused !== this._editing;
     };
 
@@ -274,8 +265,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
-
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
@@ -286,9 +275,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 break;
             case 'Enter':
                 e.stopPropagation();
-                if (!e.ctrlKey) {
-                    this.finalizeEdit(e.shiftKey, false, true);
-                }
+                !e.ctrlKey && this.finalizeEdit(e.shiftKey, false, true);
                 break;
             case 'Escape':
                 e.stopPropagation();
@@ -299,7 +286,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'ArrowLeft':
             case 'ArrowRight': // prettier-ignore
                 e.stopPropagation();
-                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0);
+                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet));
                 break;
             case ' ':
                 {
@@ -308,18 +295,14 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                     setTimeout(() => {
                         this.setContent(this._unrenderedContent);
                         setTimeout(() => this.setCursorPosition(cursorPos));
-                    }, 0);
+                    });
                 }
                 break;
-            case 'u': // for some reason 'u' otherwise exits the editor
-                e.stopPropagation();
-                break;
             case 'Shift':
             case 'Alt':
             case 'Meta':
             case 'Control':
-            case ':': // prettier-ignore
-                break;
+            case ':':
             default:
                 break;
         }
@@ -363,12 +346,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             <div
                 contentEditable
                 className="schemaField-editing"
-                ref={r => {
-                    this._inputref = r;
-                }}
-                style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20 }}
+                ref={r => (this._inputref = r)}
+                style={{ minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20 }}
                 onBlur={() => (this._props.refSelectModeInfo.enabled ? setTimeout(() => this.setIsFocused(true), 1000) : this.finalizeEdit(false, true, false))}
-                autoFocus
                 onInput={this.onChange}
                 onKeyDown={this.onKeyDown}
                 onPointerDown={e => {
@@ -385,14 +365,37 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         );
     };
 
+    onFocus = () => {
+        if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
+            this._overlayDisposer?.();
+            this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+            this._props.highlightCells?.(this._unrenderedContent);
+            this.setContent(this._unrenderedContent);
+            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length));
+        }
+    };
+
+    onBlur = action(() => {
+        this._editing = false;
+    });
+
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
         if (this._editing && gval !== undefined) {
-            return <div className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}>{this.renderEditor()}</div>;
+            return (
+                <div
+                    className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`} //
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}>
+                    {this.renderEditor()}
+                </div>
+            );
         } else
             return this._props.contents instanceof ObjectField ? null : (
                 <div
                     className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
                     style={{
                         minHeight: '10px',
                         whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 81a2d8e64..16d33eb93 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -107,7 +107,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             focus: emptyFunction,
             addDocTab: SchemaTableCell.addFieldDoc,
             pinToPres: returnZero,
-            Document: DocCast(Document.rootDocument, Document),
+            Document: DocCast(Document.rootDocument, Document)!,
             fieldKey: fieldKey,
             PanelWidth: columnWidth,
             PanelHeight: props.rowHeight,
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index da203abfa..c9853fab0 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -171,7 +171,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                             isolatedSelection={this.isolatedSelection}
                             key={key}
                             rowSelected={this._props.isSelected}
-                            Document={this.Document}
+                            Doc={this.Document}
                             col={index}
                             fieldKey={key}
                             allowCRs={false} // to enter text with new lines, must use \n
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c847bc546..8b34b4139 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -32,6 +32,7 @@ import { FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaCellField } from './SchemaCellField';
+import { DocLayout } from '../../../../fields/DocSymbols';
 
 /**
  * SchemaTableCells make up the majority of the visual representation of the SchemaView.
@@ -40,7 +41,7 @@ import { SchemaCellField } from './SchemaCellField';
  */
 
 export interface SchemaTableCellProps {
-    Document: Doc;
+    Doc: Doc;
     col: number;
     deselectCell: () => void;
     selectCell: (doc: Doc, col: number, shift: boolean, ctrl: boolean) => void;
@@ -71,7 +72,7 @@ export interface SchemaTableCellProps {
 }
 
 function selectedCell(props: SchemaTableCellProps) {
-    return props.isRowActive() && props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Document)?.length;
+    return props.isRowActive() && props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Doc)?.length;
 }
 
 @observer
@@ -84,11 +85,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
-    get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
+    get docIndex(){return DocumentView.getDocViewIndex(this._props.Doc);} // prettier-ignore
 
     get isDefault(){return SchemaColumnHeader.isDefaultField(this._props.fieldKey);} // prettier-ignore
 
-    get lockedInteraction(){return (this.isDefault || this._props.Document._lockedSchemaEditing);} // prettier-ignore
+    get lockedInteraction(){return (this.isDefault || this._props.Doc._lockedSchemaEditing);} // prettier-ignore
 
     get backgroundColor() {
         if (this.lockedInteraction) {
@@ -102,15 +103,16 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return true;
     };
     public static renderProps(props: SchemaTableCellProps) {
-        const { Document, fieldKey, getFinfo, columnWidth, isRowActive } = props;
+        const { Doc: Document, fieldKey, /* getFinfo,*/ columnWidth, isRowActive } = props;
         let protoCount = 0;
+        const layoutDoc = fieldKey.startsWith('_') ? Document[DocLayout] : Document;
         let doc: Doc | undefined = Document;
         while (doc) {
             if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) break;
             protoCount++;
             doc = DocCast(doc.proto);
         }
-        const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
+        const color = layoutDoc !== Document ? 'red' : protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
         const textDecoration = '';
         const fieldProps: FieldViewProps = {
             childFilters: returnEmptyFilter,
@@ -130,13 +132,13 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             focus: emptyFunction,
             addDocTab: SchemaTableCell.addFieldDoc,
             pinToPres: returnZero,
-            Document: DocCast(Document.rootDocument, Document),
+            Document: Document,
             fieldKey: fieldKey,
             PanelWidth: columnWidth,
             PanelHeight: props.rowHeight,
             rootSelected: props.rootSelected,
         };
-        const readOnly = getFinfo(fieldKey)?.readOnly ?? false;
+        const readOnly = false; // getFinfo(fieldKey)?.readOnly ?? false;
         const cursor = !readOnly ? 'text' : 'default';
         const pointerEvents: 'all' | 'none' = !readOnly && isRowActive() ? 'all' : 'none';
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
@@ -166,16 +168,19 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         while ((matches = idPattern.exec(field)) !== null) {
             results.push([matches[0], matches[1].replace(/"/g, '')]);
         }
-        results.forEach(idFuncPair => {
-            modField = modField.replace(idFuncPair[0], 'd' + DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1])).toString());
-        });
+        results
+            .filter(idFuncPair => IdToDoc(idFuncPair[1]))
+            .forEach(idFuncPair => {
+                modField = modField.replace(idFuncPair[0], 'd' + DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1])!).toString());
+            });
 
         if (modField.endsWith(';')) modField = modField.substring(0, modField.length - 1);
 
         const inQuotes = (strField: string) => {
             return (strField.startsWith('`') && strField.endsWith('`')) || (strField.startsWith("'") && strField.endsWith("'")) || (strField.startsWith('"') && strField.endsWith('"'));
         };
-        if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1);
+        const submittedValue = this._submittedValue.startsWith(eqSymbol) ? this._submittedValue.slice(eqSymbol.length) : this._submittedValue;
+        if (!inQuotes(submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1);
 
         return eqSymbol + modField;
     };
@@ -186,7 +191,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return (
             <div
                 className="schemacell-edit-wrapper"
-                // onContextMenu={}
+                tabIndex={1}
                 style={{
                     color,
                     textDecoration,
@@ -196,7 +201,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 <SchemaCellField
                     fieldKey={this._props.fieldKey}
                     refSelectModeInfo={this._props.refSelectModeInfo}
-                    Document={this._props.Document}
+                    Doc={this._props.Doc}
                     highlightCells={(text: string) => this._props.highlightCells(this.adjustSelfReference(text))}
                     getCells={(text: string) => this._props.eqHighlightFunc(this.adjustSelfReference(text))}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
@@ -211,8 +216,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const hasNoLayout = Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
-                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey, value);
                         this._submittedValue = value;
                         this._props.finishEdit?.();
                         return ret;
@@ -224,7 +228,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     get getCellType() {
         const columnTypeStr = this._props.getFinfo(this._props.fieldKey)?.fieldType;
-        const cellValue = this._props.Document[this._props.fieldKey];
+        const cellValue = this._props.Doc[this._props.fieldKey];
 
         if (cellValue instanceof ImageField) return ColumnType.Image;
         if (cellValue instanceof DateField) return ColumnType.Date;
@@ -232,9 +236,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         if (typeof cellValue === 'number') return ColumnType.Any;
         if (typeof cellValue === 'string' && columnTypeStr !== FInfoFieldType.enumeration) return ColumnType.Any;
         if (typeof cellValue === 'boolean') return ColumnType.Boolean;
-        if (columnTypeStr && columnTypeStr in FInfotoColType) return FInfotoColType[columnTypeStr];
 
-        return ColumnType.Any;
+        return columnTypeStr ? FInfotoColType[columnTypeStr] : ColumnType.Any;
     }
 
     get content() {
@@ -253,15 +256,15 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const sides: Array<string | undefined> = [];
         sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left
         sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right
-        sides[2] = !this._props.isolatedSelection(this._props.Document)[0] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
-        sides[3] = !this._props.isolatedSelection(this._props.Document)[1] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
+        sides[2] = !this._props.isolatedSelection(this._props.Doc)[0] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
+        sides[3] = !this._props.isolatedSelection(this._props.Doc)[1] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
         return sides;
     }
 
     render() {
         return (
             <div
-                className="schema-table-cell"
+                className={`schema-table-cell${selectedCell(this._props) ? '-selected' : ''}`}
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
                     if (this.lockedInteraction) {
@@ -273,7 +276,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)) {
                         e.stopPropagation();
                         e.preventDefault();
-                        this._props.selectReference(this._props.Document, this._props.col);
+                        this._props.selectReference(this._props.Doc, this._props.col);
                         return;
                     }
 
@@ -281,9 +284,9 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     const ctrl: boolean = e.ctrlKey;
                     if (this._props.isRowActive?.()) {
                         if (selectedCell(this._props) && ctrl) {
-                            this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                            this._props.selectCell(this._props.Doc, this._props.col, shift, ctrl);
                             e.stopPropagation();
-                        } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                        } else !selectedCell(this._props) && this._props.selectCell(this._props.Doc, this._props.col, shift, ctrl);
                     }
                 })}
                 style={{
@@ -322,12 +325,12 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
     }
 
     get url() {
-        const field = Cast(this._props.Document[this._props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
-        const alts = DocListCast(this._props.Document[this._props.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
+        const field = Cast(this._props.Doc[this._props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
+        const alts = DocListCast(this._props.Doc[this._props.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
         const altpaths = alts
-            .map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url)
+            .map(doc => Cast(doc[Doc.LayoutDataKey(doc)], ImageField, null)?.url)
             .filter(url => url)
-            .map(url => this.choosePath(url)); // access the primary layout data of the alternate documents
+            .map(url => this.choosePath(url!)); // access the primary layout data of the alternate documents
         const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
         // If there is a path, follow it; otherwise, follow a link to a default image icon
         const url = paths.length ? paths : [ClientUtils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')];
@@ -360,7 +363,7 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
     };
 
     render() {
-        const aspect = Doc.NativeAspect(this._props.Document); // aspect ratio
+        const aspect = Doc.NativeAspect(this._props.Doc); // aspect ratio
         // let width = Math.max(75, this._props.columnWidth); // get a with that is no smaller than 75px
         // const height = Math.max(75, width / aspect); // get a height either proportional to that or 75 px
         const height = this._props.rowHeight() ? this._props.rowHeight() - (this._props.padding || 6) * 2 : undefined;
@@ -378,9 +381,9 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
     }
 
     @observable _pickingDate: boolean = false;
-    @computed get date(): DateField {
+    @computed get date(): DateField | undefined {
         // if the cell is a date field, cast then contents to a date. Otherrwwise, make the contents undefined.
-        return DateCast(this._props.Document[this._props.fieldKey]);
+        return DateCast(this._props.Doc[this._props.fieldKey]);
     }
 
     handleChange = undoable((date: Date | null) => {
@@ -389,7 +392,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         //     this.applyToDoc(this._document, this._props.row, this._props.col, script.run);
         // } else {
         // ^ DateCast is always undefined for some reason, but that is what the field should be set to
-        date && (this._props.Document[this._props.fieldKey] = new DateField(date));
+        date && (this._props.Doc[this._props.fieldKey] = new DateField(date));
         // }
     }, 'date change');
 
@@ -397,10 +400,10 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         const { pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
             <>
-                <div style={{ pointerEvents: 'none' }}>
-                    <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} />
+                <div style={{ pointerEvents: 'none' }} tabIndex={1}>
+                    <DatePicker dateFormat="Pp" selected={this.date?.date ?? new Date()} onChange={emptyFunction} />
                 </div>
-                {pointerEvents === 'none' ? null : (
+                {pointerEvents === 'none' || !selectedCell(this._props) ? null : (
                     <Popup
                         icon={<FontAwesomeIcon size="xs" icon="caret-down" />}
                         size={Size.XSMALL}
@@ -409,7 +412,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
                         background={SnappingManager.userBackgroundColor}
                         popup={
                             <div style={{ width: 'fit-content', height: '200px' }}>
-                                <DatePicker open dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={this.handleChange} />
+                                <DatePicker open dateFormat="Pp" selected={this.date?.date ?? new Date()} onChange={this.handleChange} />
                             </div>
                         }
                     />
@@ -449,13 +452,14 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
         return (
             <div className="schemaBoolCell" style={{ display: 'flex', color, textDecoration, cursor, pointerEvents }}>
                 <input
+                    onPointerDown={e => e.stopPropagation()}
                     style={{ marginRight: 4 }}
                     type="checkbox"
-                    checked={BoolCast(this._props.Document[this._props.fieldKey])}
+                    checked={BoolCast(this._props.Doc[this._props.fieldKey])}
                     onChange={undoable((value: React.ChangeEvent<HTMLInputElement> | undefined) => {
                         if ((value?.nativeEvent as MouseEvent | PointerEvent).shiftKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
-                        } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+                        } else Doc.SetField(this._props.Doc, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
                     }, 'set bool cell')}
                 />
 
@@ -463,14 +467,14 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
                     contents=""
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => Field.toKeyValueString(this._props.Document, this._props.fieldKey)}
+                    GetValue={() => Field.toKeyValueString(this._props.Doc, this._props.fieldKey)}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const set = Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Document) ? true : undefined);
+                        const set = Doc.SetField(this._props.Doc, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Doc) ? true : undefined);
                         this._props.finishEdit?.();
                         return set;
                     }, 'set bool cell')}
@@ -494,14 +498,22 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                 <div style={{ width: '100%' }}>
                     <Select
                         styles={{
+                            dropdownIndicator: base => ({
+                                ...base,
+                                display: selectedCell(this._props) ? 'unset' : 'none',
+                            }),
                             container: base => ({
                                 ...base,
                                 height: 20,
+                                border: 'unset !important',
+                                pointerEvents: selectedCell(this._props) ? 'all' : 'none',
                             }),
                             control: base => ({
                                 ...base,
                                 height: 20,
                                 minHeight: 20,
+                                border: 'unset !important',
+                                background: selectedCell(this._props) ? 'lightgray' : undefined,
                             }),
                             placeholder: base => ({
                                 ...base,
@@ -517,6 +529,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                                 ...base,
                                 height: 20,
                                 transform: 'scale(0.75)',
+                                border: 'unset !important',
                             }),
                             menuPortal: base => ({
                                 ...base,
@@ -529,10 +542,10 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                         }}
                         menuPortalTarget={this._props.menuTarget}
                         menuPosition="absolute"
-                        placeholder={StrCast(this._props.Document[this._props.fieldKey], 'select...')}
+                        placeholder={StrCast(this._props.Doc[this._props.fieldKey], 'select...')}
                         options={options}
                         isMulti={false}
-                        onChange={val => Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)}
+                        onChange={val => Doc.SetField(this._props.Doc, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)}
                     />
                 </div>
             </div>