Merge pull request #109 from idyll-lang/change-display

visual indication of unsaved code changes
idyll-lang · Mar 1, 2021 · be8ce6c · be8ce6c
2 parents 7b88e69 + 0dbca58
commit be8ce6c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 29 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
@@ -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,17 +50,18 @@ 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', transition: 'border 0.25s'}}>
         <code>
           <div
             ref={this._cellCodeRef}
             contentEditable={editing}
             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
@@ -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);
     }

diff --git 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');