fix: prevent sandbox update when clicking elements in sandbox (#264)

Author: smeijer

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;

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],

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;
         }
 

src/components/QueryEditor.js

@@ -14,7 +14,7 @@ function QueryEditor(props) {
       dispatch({
         type: 'SET_QUERY',
         query,
-        updateEditor: false,
+        origin: 'EDITOR',
         immediate: origin === 'user',
       }),
     [dispatch],

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,11 +66,13 @@ function reducer(state, action, exec) {
     }
 
     case 'SET_QUERY': {
-      if (action.updateEditor !== false) {
+      if (action.origin !== 'EDITOR') {
         exec({ type: 'UPDATE_EDITOR', editor: 'query' });
       }
 
-      exec({ type: 'UPDATE_SANDBOX', immediate });
+      if (action.origin !== 'SANDBOX') {
+        exec({ type: 'UPDATE_SANDBOX', immediate });
+      }
 
       return {
         ...state,

src/sandbox.js

@@ -125,6 +125,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);
 }