From 01e38c5d63b4dfa34dd6b5c65051f6165ac9d16a Mon Sep 17 00:00:00 2001
From: Matthew Conlen <mc@mathisonian.com>
Date: Sun, 28 Feb 2021 15:28:44 -0800
Subject: [PATCH 1/3] yellow highlight when vallue has changed

---
 .../components/component-editor/code-cell.js  | 48 ++++++++-----------
 .../components/component-editor/properties.js |  1 -
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/render/idyll-display/components/component-editor/code-cell.js b/src/render/idyll-display/components/component-editor/code-cell.js
index d43da12..7447164 100644
--- a/src/render/idyll-display/components/component-editor/code-cell.js
+++ b/src/render/idyll-display/components/component-editor/code-cell.js
@@ -9,45 +9,38 @@ export default class EditableCodeCell extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      editing: false
+      editing: true,
+      referenceMarkup: props.markup,
+      currentMarkup: props.markup
+
     };
 
     this._cellCodeRef = React.createRef();
   }
 
-  toggleEdit = e => {
-    e.stopPropagation();
-    if (this.state.editing) {
-      this.setState({
-        editing: false
-      });
-    } else {
-      this.edit();
-    }
-  };
-
-  edit = () => {
-    this.setState(
-      {
-        editing: true
-      },
-      () => {
-        this._cellCodeRef.current.focus();
-      }
-    );
-  };
-
   // Executes code change
   execute = () => {
-    this.props.onExecute(this._cellCodeRef.current.innerText);
+    this.setState({
+      referenceMarkup: this._cellCodeRef.current.innerText,
+      currentMarkup: this._cellCodeRef.current.innerText
+    }, () => {
+      this.props.onExecute(this._cellCodeRef.current.innerText);
+    })
+
   };
 
   // Updates markup on blur
   onBlur = e => {
-    this.toggleEdit(e);
     this.props.onBlur && this.props.onBlur(this._cellCodeRef.current.innerText);
   };
 
+  handleKeyUp = e => {
+    e.stopPropagation();
+    this.setState({
+      currentMarkup: this._cellCodeRef.current.innerText.trim()
+    })
+  }
+
   handleKeyDown = e => {
     e.stopPropagation();
     if (e.shiftKey && e.key === EXECUTE_KEY) {
@@ -57,10 +50,10 @@ export default class EditableCodeCell extends React.Component {
   };
 
   render() {
-    const { editing } = this.state;
+    const { editing, referenceMarkup, currentMarkup } = this.state;
 
     return (
-      <pre onClick={!editing ? this.toggleEdit : undefined}>
+      <pre style={{border: referenceMarkup === currentMarkup ? 'solid 1px #666' : 'solid 1px #cccc00'}}>
         <code>
           <div
             ref={this._cellCodeRef}
@@ -68,6 +61,7 @@ export default class EditableCodeCell extends React.Component {
             suppressContentEditableWarning={true}
             style={{minHeight: '1.33em', ...this.props.style}}
             onKeyDown={this.handleKeyDown}
+            onKeyUp={this.handleKeyUp}
             onBlur={this.onBlur}>
             {this.props.markup}
           </div>
diff --git a/src/render/idyll-display/components/component-editor/properties.js b/src/render/idyll-display/components/component-editor/properties.js
index 1024dee..9749240 100644
--- a/src/render/idyll-display/components/component-editor/properties.js
+++ b/src/render/idyll-display/components/component-editor/properties.js
@@ -49,7 +49,6 @@ export default withContext(
         this.props.context.ast,
         this.props.context.activeComponent.id
         );
-      console.log('updating node with properties', node, this.props.context.ast, this.props.context.activeComponent.id);
 
       this.debouncedSetAst(node, propertyName, propertyValue);
     }

From 8bd62f841ce67e37483f2203e7bebd3c7da9a5b5 Mon Sep 17 00:00:00 2001
From: Matthew Conlen <mc@mathisonian.com>
Date: Sun, 28 Feb 2021 15:31:07 -0800
Subject: [PATCH 2/3] transition

---
 .../idyll-display/components/component-editor/code-cell.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/render/idyll-display/components/component-editor/code-cell.js b/src/render/idyll-display/components/component-editor/code-cell.js
index 7447164..fea84ae 100644
--- a/src/render/idyll-display/components/component-editor/code-cell.js
+++ b/src/render/idyll-display/components/component-editor/code-cell.js
@@ -53,7 +53,7 @@ export default class EditableCodeCell extends React.Component {
     const { editing, referenceMarkup, currentMarkup } = this.state;
 
     return (
-      <pre style={{border: referenceMarkup === currentMarkup ? 'solid 1px #666' : 'solid 1px #cccc00'}}>
+      <pre style={{border: referenceMarkup === currentMarkup ? 'solid 1px #666' : 'solid 1px #cccc00', transition: 'border 0.25s'}}>
         <code>
           <div
             ref={this._cellCodeRef}

From 0dbca58dfae16a5279d4c5c26bab10fa9cc82a43 Mon Sep 17 00:00:00 2001
From: Matthew Conlen <mc@mathisonian.com>
Date: Sun, 28 Feb 2021 15:39:59 -0800
Subject: [PATCH 3/3] update tests

---
 test/components.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components.test.js b/test/components.test.js
index 970da89..d00cb29 100644
--- a/test/components.test.js
+++ b/test/components.test.js
@@ -193,7 +193,7 @@ describe('<EditableCodeCell />', () => {
 
     let div = component.find('div');
 
-    expect(div.props().contentEditable).toBeFalsy();
+    expect(div.props().contentEditable).toBeTruthy();
     const pre = component.find('pre');
     pre.simulate('click');