cells editable

2 files changed, 45 insertions, 4 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 4b709f670..05197d05f 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -93,7 +93,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 onPointerEnter={this.onPointerEnter}
                 onPointerLeave={this.onPointerLeave}
                 ref={(row: HTMLDivElement | null) => {
-                    row && this.schemaView?.addRowRef(this.rootDoc, row);
+                    row && this.schemaView?.addRowRef?.(this.rootDoc, row);
                     this._ref = row;
                 }}>
                 <div
@@ -120,7 +120,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </div>
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
-                        <SchemaTableCell key={key} Document={this.rootDoc} fieldKey={key} columnWidth={this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth} />
+                        <SchemaTableCell key={key} Document={this.rootDoc} fieldKey={key} columnWidth={this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth} isRowActive={this.props.isContentActive} />
                     ))}
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 4cfc5850c..0f832e7c4 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -9,20 +9,61 @@ import { FieldValue } from '../../../../fields/Types';
 import { CompileScript } from '../../../util/Scripting';
 import { EditableView } from '../../EditableView';
 import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss';
+import { FieldView, FieldViewProps } from '../../nodes/FieldView';
+import { KeyValueBox } from '../../nodes/KeyValueBox';
+import { returnEmptyFilter, returnEmptyDoclist, returnFalse, emptyFunction, returnZero } from '../../../../Utils';
+import { DefaultStyleProvider } from '../../StyleProvider';
+import { Transform } from '../../../util/Transform';
+import { CollectionSchemaView } from './CollectionSchemaView';
 
 export interface SchemaTableCellProps {
     Document: Doc;
     fieldKey: string;
     columnWidth: number;
+    isRowActive: () => boolean | undefined;
 }
 
 @observer
 export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
     render() {
+        const props: FieldViewProps = {
+            Document: this.props.Document,
+            // DataDoc: this.props.doc,
+            docFilters: returnEmptyFilter,
+            docRangeFilters: returnEmptyFilter,
+            searchFilterDocs: returnEmptyDoclist,
+            styleProvider: DefaultStyleProvider,
+            docViewPath: returnEmptyDoclist,
+            ContainingCollectionView: undefined,
+            ContainingCollectionDoc: undefined,
+            fieldKey: this.props.fieldKey,
+            rootSelected: returnFalse,
+            isSelected: returnFalse,
+            setHeight: returnFalse,
+            select: emptyFunction,
+            dropAction: 'alias',
+            bringToFront: emptyFunction,
+            renderDepth: 1,
+            isContentActive: returnFalse,
+            whenChildContentsActiveChanged: emptyFunction,
+            ScreenToLocalTransform: Transform.Identity,
+            focus: emptyFunction,
+            PanelWidth: () => this.props.columnWidth,
+            PanelHeight: () => CollectionSchemaView._rowHeight,
+            addDocTab: returnFalse,
+            pinToPres: returnZero,
+        };
+
         return (
-            <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
-                {Field.toString(this.props.Document[this.props.fieldKey] as Field)}
+            <div className="schema-table-cell" style={{ width: this.props.columnWidth, pointerEvents: this.props.isRowActive() ? 'all' : 'none' }}>
+                {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */}
                 {/* <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */}
+                <EditableView
+                    contents={<FieldView {...props} />}
+                    height={'auto'}
+                    GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)}
+                    SetValue={(value: string) => KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value)}
+                />
             </div>
         );
     }