can delete keys. obv get errors if you delete layout keys

2 files changed, 25 insertions, 1 deletions

diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
new file mode 100644
index 000000000..64e871e1c
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -0,0 +1,12 @@
+@import "../global_variables";
+
+.container{
+    display: flex;                 
+    flex-direction: row;           
+    flex-wrap: nowrap;              
+    justify-content: space-between; 
+}
+
+.delete{
+    color: red;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 111f85a05..7ed5ee272 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,5 +1,6 @@
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import "./KeyValueBox.scss";
+import "./KeyValuePair.scss";
 import React = require("react")
 import { FieldViewProps, FieldView } from './FieldView';
 import { Opt, Field } from '../../../fields/Field';
@@ -55,7 +56,18 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
         );
         return (
             <tr className={this.props.rowStyle}>
-                <td>{this.key.Name}</td>
+                {/* <button>X</button> */}
+                <td>
+                    <div className="container">
+                        <div>{this.key.Name}</div>
+                        <button className="delete" onClick={() => {
+                            let field = props.doc.Get(props.fieldKey);
+                            if (field && field instanceof Field) {
+                                props.doc.Set(props.fieldKey, undefined);
+                            }
+                        }}>X</button>
+                    </div>
+                </td>
                 <td><EditableView contents={contents} height={36} GetValue={() => {
                     let field = props.doc.Get(props.fieldKey);
                     if (field && field instanceof Field) {