2 files changed, 100 insertions, 4 deletions

diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index ac8c949a9..8025f00d6 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -2,17 +2,68 @@
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { FieldWaiting } from '../../../fields/Field';
+import { Opt, FieldWaiting, Field } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./KeyValueBox.scss";
 import { KeyValuePair } from "./KeyValuePair";
 import React = require("react")
+import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
+import { useState } from 'react'
+import { Key } from '../../../fields/Key';
+import { TextField } from '../../../fields/TextField';
+import { EditorView } from "prosemirror-view";
+import { IReactionDisposer } from "mobx";
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _editorView: Opt<EditorView>;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+    private _newKey = '';
+    private _newValue = '';
+
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+        this.state = {
+            key: '',
+            value: ''
+        }
+    }
+
+
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    onEnterKey = (e: React.KeyboardEvent): void => {
+        if (e.key == 'Enter') {
+            if (this._newKey != '' && this._newValue != '') {
+                let doc = this.props.doc.GetT(KeyStore.Data, Document);
+                if (!doc || doc == FieldWaiting) {
+                    return
+                }
+                let realDoc = doc;
+                realDoc.Set(new Key(this._newKey), new TextField(this._newValue));
+                if (this.refs.newKVPKey instanceof HTMLInputElement) {
+                    this.refs.newKVPKey.value = ''
+                }
+                if (this.refs.newKVPValue instanceof HTMLInputElement) {
+                    this.refs.newKVPValue.value = ''
+                }
+                this._newKey = ''
+                this._newValue = ''
+            }
+        }
+    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
@@ -33,7 +84,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         let ids: { [key: string]: string } = {};
         let protos = doc.GetAllPrototypes();
         for (const proto of protos) {
-            proto._proxies.forEach((val, key) => {
+            proto._proxies.forEach((val: any, key: string) => {
                 if (!(key in ids)) {
                     ids[key] = key;
                 }
@@ -48,9 +99,24 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return rows;
     }
 
+    keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._newKey = e.currentTarget.value;
+    }
+
+    valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._newValue = e.currentTarget.value;
+    }
 
-    render() {
+    newKeyValue = () => {
+        return (
+            <tr>
+                <td><input type="text" ref="newKVPKey" id="key" placeholder="Key" onChange={this.keyChanged} /></td>
+                <td><input type="text" ref="newKVPValue" id="value" placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+            </tr>
+        )
+    }
 
+    render() {
         return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
             <table className="keyValueBox-table">
                 <tbody>
@@ -59,6 +125,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         <th>Fields</th>
                     </tr>
                     {this.createTable()}
+                    {this.newKeyValue()}
                 </tbody>
             </table>
         </div>)
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a97e98313..111f85a05 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -8,6 +8,8 @@ import { observable, action } from 'mobx';
 import { Document } from '../../../fields/Document';
 import { Key } from '../../../fields/Key';
 import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
 
 // Represents one row in a key value plane
 
@@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             bindings: {},
             selectOnLoad: false,
         }
+        let contents = (
+            <FieldView {...props} />
+        );
         return (
             <tr className={this.props.rowStyle}>
                 <td>{this.key.Name}</td>
-                <td><FieldView {...props} /></td>
+                <td><EditableView contents={contents} height={36} GetValue={() => {
+                    let field = props.doc.Get(props.fieldKey);
+                    if (field && field instanceof Field) {
+                        return field.ToScriptString();
+                    }
+                    return field || "";
+                }}
+                    SetValue={(value: string) => {
+                        let script = CompileScript(value, undefined, true);
+                        if (!script.compiled) {
+                            return false;
+                        }
+                        let field = script();
+                        if (field instanceof Field) {
+                            props.doc.Set(props.fieldKey, field);
+                            return true;
+                        } else {
+                            let dataField = ToField(field);
+                            if (dataField) {
+                                props.doc.Set(props.fieldKey, dataField);
+                                return true;
+                            }
+                        }
+                        return false;
+                    }}></EditableView></td>
             </tr>
         )
     }