fixed keyValue box assignments so that '_' assigns to template unless value starts with '=' (then root doc). fixed deleting template keys in keyValuePair. fixed schemaTableCell to show current editable value (not last edited value) when editing layout and data doc values. updated DocumentOptions API.

6 files changed, 36 insertions, 42 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index e2490cec8..d9447b7ec 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -287,8 +287,8 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     staticDisplay = () => {
         let toDisplay;
-        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
         if (this._props.inputString) {
+            const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
             toDisplay = (
                 <input
                     className="editableView-input"
@@ -315,15 +315,17 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     };
 
     render() {
-        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._editing && gval !== undefined) {
-            return this._props.sizeToContent ? (
-                <div style={{ display: 'grid', minWidth: 100 }}>
-                    <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div>
-                </div>
-            ) : (
-                this.renderEditor()
-            );
+        if (this._editing) {
+            const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+            if (gval !== undefined) {
+                return this._props.sizeToContent ? (
+                    <div style={{ display: 'grid', minWidth: 100 }}>
+                        <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div>
+                    </div>
+                ) : (
+                    this.renderEditor()
+                );
+            }
         }
         setTimeout(() => this._props.autosuggestProps?.resetValue());
         return (
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 58582a142..f27398427 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -202,7 +202,6 @@ export class CollectionMulticolumnView extends CollectionSubView() {
             return Transform.Identity(); // we're still waiting on promises to resolve
         }
         let offset = 0;
-        // eslint-disable-next-line no-restricted-syntax
         for (const { layout: candidate } of this.childLayoutPairs) {
             if (candidate === layout) {
                 return this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0);
@@ -316,7 +315,6 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         const collector: JSX.Element[] = [];
         this.childLayouts.forEach((layout, i) => {
             collector.push(
-                // eslint-disable-next-line react/no-array-index-key
                 <Tooltip title={'Doc: ' + StrCast(layout.title)} key={'wrapper' + i}>
                     <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}>
                         {this.getDisplayDoc(layout)}
@@ -328,7 +326,6 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 </Tooltip>,
                 <ResizeBar
                     width={resizerWidth}
-                    // eslint-disable-next-line react/no-array-index-key
                     key={'resizer' + i}
                     styleProvider={this._props.styleProvider}
                     isContentActive={this._props.isContentActive}
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index daffdf1f5..1dff76df2 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -96,10 +96,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             { fireImmediately: true }
         );
         this._disposers.fieldUpdate = reaction(
-            () => this._props.GetValue(),
-            fieldVal => {
+            () => ({ fieldVal: this._props.GetValue(), editing: 0 }), // this._editing }),
+            ({ fieldVal, editing }) => {
                 this._unrenderedContent = fieldVal ?? '';
-                this.finalizeEdit(false, false, false);
+                !this._editing && this.finalizeEdit(false, false, false);
             }
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e6fe46638..aeceedc30 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -211,8 +211,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;
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 8911fac6d..b54004697 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -9,7 +9,7 @@ import { ComputedField, ScriptField } from '../../../fields/ScriptField';
 import { DocCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { DocumentType } from '../../documents/DocumentTypes';
-import { Docs } from '../../documents/Documents';
+import { Docs, DocumentOptions } from '../../documents/Documents';
 import { SetupDrag } from '../../util/DragManager';
 import { CompiledScript } from '../../util/Scripting';
 import { undoable } from '../../util/UndoManager';
@@ -121,10 +121,13 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return false;
     };
 
-    public static SetField = undoable((doc: Doc, key: string, value: string, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) => {
+    public static SetField = undoable((doc: Doc, key: string, value: string, forceOnDelegateIn?: boolean, setResult?: (value: FieldResult) => void) => {
         const script = KeyValueBox.CompileKVPScript(value);
         if (!script) return false;
-        return KeyValueBox.ApplyKVPScript(doc, key, script, forceOnDelegate, setResult);
+        const ldoc = key.startsWith('_') ? Doc.Layout(doc) : doc;
+        const forceOnDelegate = forceOnDelegateIn || (ldoc !== doc && !value.startsWith('='));
+        const setKey = value.startsWith('=') ? key.replace(/^_/, '') : key; // an '=' value redirects a key targeting the render template to the root document
+        return KeyValueBox.ApplyKVPScript(doc, setKey, script, forceOnDelegate, setResult);
     }, 'Set Doc Field');
 
     onPointerDown = (e: React.PointerEvent): void => {
@@ -156,12 +159,16 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
             });
         });
 
-        const layoutProtos = Doc.GetAllPrototypes(this.layoutDoc);
+        const docinfos = new DocumentOptions();
+
+        const layoutProtos = this.layoutDoc !== doc ? Doc.GetAllPrototypes(this.layoutDoc) : [];
         layoutProtos.forEach(proto => {
             Object.keys(proto)
+                .filter(key => !(key in ids) || docinfos['_' + key]) // if '_key' is in docinfos (as opposed to just 'key'), then the template Doc's value should be displayed instead of the root document's value
                 .map(key => '_' + key)
                 .forEach(key => {
-                    if (!(key.replace(/^_/, '') in ids) && doc[key] !== ComputedField.undefined) {
+                    if (doc[key] !== ComputedField.undefined) {
+                        if (key.replace(/^_/, '') in ids) delete ids[key.replace(/^_/, '')];
                         ids[key] = key;
                     }
                 });
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 4c082b2ad..e3c481a75 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -61,31 +61,22 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
 
     render() {
         let doc = this._props.keyName.startsWith('_') ? Doc.Layout(this._props.doc) : this._props.doc;
-        // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
         const layoutField = doc !== this._props.doc;
         const key = layoutField ? this._props.keyName.replace(/^_/, '') : this._props.keyName;
         let protoCount = 0;
-        while (doc) {
-            if (Object.keys(doc).includes(key)) {
-                break;
-            }
+        while (doc && !Object.keys(doc).includes(key)) {
             protoCount++;
             doc = DocCast(doc.proto);
         }
         const parenCount = Math.max(0, protoCount - 1);
         const keyStyle = layoutField ? 'red' : protoCount === 0 ? 'black' : 'blue';
-
         const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 };
-
+        const docOpts = Object.entries(new DocumentOptions());
         return (
             <tr
-                className={this._props.rowStyle}
-                onPointerEnter={action(() => {
-                    this.isPointerOver = true;
-                })}
-                onPointerLeave={action(() => {
-                    this.isPointerOver = false;
-                })}>
+                className={this._props.rowStyle} //
+                onPointerEnter={action(() => (this.isPointerOver = true))}
+                onPointerLeave={action(() => (this.isPointerOver = false))}>
                 <td className="keyValuePair-td-key" style={{ width: `${this._props.keyWidth}%` }}>
                     <div className="keyValuePair-td-key-container">
                         <button
@@ -93,14 +84,12 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
                             style={hover}
                             className="keyValuePair-td-key-delete"
                             onClick={undoable(() => {
-                                if (Object.keys(this._props.doc).indexOf(key) !== -1) {
-                                    delete this._props.doc[key];
-                                } else delete DocCast(this._props.doc.proto)?.[key];
+                                delete (Object.keys(doc).indexOf(key) !== -1 ? doc : DocCast(this._props.doc.proto))[key];
                             }, 'set key value')}>
                             X
                         </button>
                         <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} />
-                        <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === key)?.[1].description ?? ''}>
+                        <Tooltip title={(docOpts.find(([k]) => k.replace(/^_/, '') === key)?.[1] as FInfo)?.description ?? ''}>
                             <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (key.match(/_/g)?.length || 0), color: keyStyle }}>
                                 {'('.repeat(parenCount)}
                                 {(keyStyle === 'black' ? '' : layoutField ? '_' : '$') + key}
@@ -135,7 +124,7 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
                                 pinToPres: returnZero,
                             }}
                             GetValue={() => Field.toKeyValueString(this._props.doc, this._props.keyName)}
-                            SetValue={(value: string) => Doc.SetField(this._props.doc, this._props.keyName, value)}
+                            SetValue={value => Doc.SetField(this._props.doc, this._props.keyName, value)}
                         />
                     </div>
                 </td>