From 7db675e0d19a0bfd2e4ecfdf49ca99036e6b7d97 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 19 May 2020 12:21:12 +0100
Subject: [PATCH 1/4] Added ESC note to JSON editor.

---
 src/components/layers/JSONEditor.jsx | 30 +++++++++++++++++-------
 src/styles/_codemirror.scss          | 34 ++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 2b8f6a8..0b8625c 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -54,6 +54,7 @@ class JSONEditor extends React.Component {
     super(props)
     this.state = {
       isEditing: false,
+      showMessage: false,
       prevValue: this.props.getValue(this.props.layer),
     };
   }
@@ -82,17 +83,24 @@ class JSONEditor extends React.Component {
     this._doc.on('blur', this.onBlur);
   }
 
-  onFocus = () => {
+  onPointerDown = (cm, e) => {
+    this._keyEvent = "pointer";
+  }
+
+  onFocus = (cm, e) => {
     this.props.onFocus();
     this.setState({
-      isEditing: true
+      isEditing: true,
+      showMessage: (this._keyEvent === "keyboard"),
     });
   }
 
   onBlur = () => {
+    this._keyEvent = "keyboard";
     this.props.onBlur();
     this.setState({
-      isEditing: false
+      isEditing: false,
+      showMessage: false,
     });
   }
 
@@ -145,16 +153,22 @@ class JSONEditor extends React.Component {
   }
 
   render() {
+    const {showMessage} = this.state;
     const style = {};
     if (this.props.maxHeight) {
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div
-      className={classnames("codemirror-container", this.props.className)}
-      ref={(el) => this._el = el}
-      style={style}
-    />
+    return <div className="JSONEditor" onPointerDown={this.onPointerDown}>
+      <div class={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
+        Press <kbd>ESC</kbd> to lose focus
+      </div>
+      <div
+        className={classnames("codemirror-container", this.props.className)}
+        ref={(el) => this._el = el}
+        style={style}
+      />
+    </div>
   }
 }
 
diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss
index 4270311..7e2e20e 100644
--- a/src/styles/_codemirror.scss
+++ b/src/styles/_codemirror.scss
@@ -62,3 +62,37 @@
   background-color: #bb0000;
   color: white !important;
 }
+
+@keyframes JSONEditor__animation-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  } 
+}
+
+.JSONEditor__message {
+  position: absolute;
+  right: 0;
+  font-size: 0.85em;
+  z-index: 99999;
+  padding: 0.3em 0.5em;
+  background: hsla(0, 0%, 0%, 0.3);
+  color: $color-lowgray;
+  border-bottom-left-radius: 2px;
+  transition: opacity 320ms ease;
+  opacity: 0;
+  pointer-events: none;
+
+  &--on {
+    opacity: 1;
+    animation: 320ms ease 0s JSONEditor__animation-fade;
+    animation-delay: 2000ms;
+    animation-fill-mode: forwards;
+  }
+
+  kbd {
+    font-family: monospace;
+  }
+}

From 9e1c0e4c82a45e31db75f551949e4f88120a6dff Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 21 May 2020 09:20:47 +0100
Subject: [PATCH 2/4] Added aria-hidden to JSON editor message.

---
 src/components/layers/JSONEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 0b8625c..5935043 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -159,7 +159,7 @@ class JSONEditor extends React.Component {
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div className="JSONEditor" onPointerDown={this.onPointerDown}>
+    return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
       <div class={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
         Press <kbd>ESC</kbd> to lose focus
       </div>

From 315a9b82c0641e28ab6841b55a6faf9a89bc14bb Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 21 May 2020 09:22:42 +0100
Subject: [PATCH 3/4] Fixed for initial focus of JSON editor message.

---
 src/components/layers/JSONEditor.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 5935043..e721ab3 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -51,7 +51,8 @@ class JSONEditor extends React.Component {
   }
 
   constructor(props) {
-    super(props)
+    super(props);
+    this._keyEvent = "keyboard";
     this.state = {
       isEditing: false,
       showMessage: false,

From 0661899d5469cb7cf75e500b156034c3b928885d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 24 May 2020 11:46:47 +0100
Subject: [PATCH 4/4] Fixes for code review comments.

---
 src/components/layers/JSONEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index e721ab3..f1a5fae 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -161,7 +161,7 @@ class JSONEditor extends React.Component {
     }
 
     return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
-      <div class={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
+      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
         Press <kbd>ESC</kbd> to lose focus
       </div>
       <div