From 0688b5302c1e1fcdfe6bb83f32c45ad633af7a9f Mon Sep 17 00:00:00 2001
From: Stephan Meijer <stephan.meijer@gmail.com>
Date: Mon, 3 Aug 2020 17:09:29 +0200
Subject: [PATCH 1/2] fix: prevent sandbox reset on element selection

---
 src/components/Preview.js  | 6 +++++-
 src/hooks/usePlayground.js | 4 +++-
 src/sandbox.js             | 6 ++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Preview.js b/src/components/Preview.js
index 2e7bc70a..43f5ce75 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -66,7 +66,11 @@ function Preview({ markup, variant, forwardedRef, dispatch }) {
         }
 
         case 'SELECT_NODE': {
-          dispatch({ type: 'SET_QUERY', query: suggestion.snippet });
+          dispatch({
+            type: 'SET_QUERY',
+            query: suggestion.snippet,
+            origin: 'SANDBOX',
+          });
           break;
         }
 
diff --git a/src/hooks/usePlayground.js b/src/hooks/usePlayground.js
index 36018a2b..87f66105 100644
--- a/src/hooks/usePlayground.js
+++ b/src/hooks/usePlayground.js
@@ -70,7 +70,9 @@ function reducer(state, action, exec) {
         exec({ type: 'UPDATE_EDITOR', editor: 'query' });
       }
 
-      exec({ type: 'UPDATE_SANDBOX', immediate });
+      if (action.origin !== 'SANDBOX') {
+        exec({ type: 'UPDATE_SANDBOX', immediate });
+      }
 
       return {
         ...state,
diff --git a/src/sandbox.js b/src/sandbox.js
index d7e6b6d2..1cf69440 100644
--- a/src/sandbox.js
+++ b/src/sandbox.js
@@ -117,6 +117,12 @@ function onSelectNode(node, { origin }) {
     cssPath: cssPath(node, true).toString(),
   };
 
+  if (action.type === 'SELECT_NODE') {
+    // optimistically update the highlighted node
+    state.queriedNodes = [node];
+    state.highlighter.highlight({ nodes: state.queriedNodes });
+  }
+
   postMessage(action);
 }
 

From 8dc6000423fb3e57061c22d65e0874b5e7a8223f Mon Sep 17 00:00:00 2001
From: Stephan Meijer <stephan.meijer@gmail.com>
Date: Mon, 3 Aug 2020 17:11:12 +0200
Subject: [PATCH 2/2] chore: rename updateEditor prop

---
 devtools/src/devtools/panel.js | 2 +-
 src/components/MarkupEditor.js | 2 +-
 src/components/QueryEditor.js  | 2 +-
 src/hooks/usePlayground.js     | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/devtools/src/devtools/panel.js b/devtools/src/devtools/panel.js
index c61e79d7..a6c8044a 100644
--- a/devtools/src/devtools/panel.js
+++ b/devtools/src/devtools/panel.js
@@ -32,7 +32,7 @@ function Panel() {
             setResult(result);
           });
 
-          if (action.updateEditor !== false) {
+          if (action.origin !== 'EDITOR') {
             editor.current.setValue(action.query);
           }
           break;
diff --git a/src/components/MarkupEditor.js b/src/components/MarkupEditor.js
index 7b076bd8..81b6e274 100644
--- a/src/components/MarkupEditor.js
+++ b/src/components/MarkupEditor.js
@@ -14,7 +14,7 @@ function MarkupEditor({ markup, dispatch }) {
       dispatch({
         type: 'SET_MARKUP',
         markup,
-        updateEditor: false,
+        origin: 'EDITOR',
         immediate: origin === 'user',
       }),
     [dispatch],
diff --git a/src/components/QueryEditor.js b/src/components/QueryEditor.js
index 650c6290..544160d6 100644
--- a/src/components/QueryEditor.js
+++ b/src/components/QueryEditor.js
@@ -14,7 +14,7 @@ function QueryEditor(props) {
       dispatch({
         type: 'SET_QUERY',
         query,
-        updateEditor: false,
+        origin: 'EDITOR',
         immediate: origin === 'user',
       }),
     [dispatch],
diff --git a/src/hooks/usePlayground.js b/src/hooks/usePlayground.js
index 87f66105..7e18750f 100644
--- a/src/hooks/usePlayground.js
+++ b/src/hooks/usePlayground.js
@@ -52,7 +52,7 @@ function reducer(state, action, exec) {
     }
 
     case 'SET_MARKUP': {
-      if (action.updateEditor !== false) {
+      if (action.origin !== 'EDITOR') {
         exec({ type: 'UPDATE_EDITOR', editor: 'markup' });
       }
 
@@ -66,7 +66,7 @@ function reducer(state, action, exec) {
     }
 
     case 'SET_QUERY': {
-      if (action.updateEditor !== false) {
+      if (action.origin !== 'EDITOR') {
         exec({ type: 'UPDATE_EDITOR', editor: 'query' });
       }