Improve reset state (#1043)

* add reset settings shortcut

* reset location too

* add integration test

components/EditorContainer.js

@@ -1,5 +1,6 @@
 // Theirs
 import React from 'react'
+import Router from 'next/router'
 import { useAsyncCallback } from 'actionsack'
 
 import Editor from './Editor'
@@ -13,6 +14,7 @@ import { getThemes, saveThemes, clearSettings, saveSettings } from '../lib/util'
 
 function onReset() {
   clearSettings()
+  updateRouteState(Router, {})
 
   if (window.navigator && navigator.serviceWorker) {
     navigator.serviceWorker.getRegistrations().then(registrations => {

components/Settings.js

@@ -293,6 +293,13 @@ class Settings extends React.PureComponent {
     this.setState({ previousSettings: null })
   }
 
+  handleOpenAndFocus = () => {
+    this.props.toggleVisibility()
+    if (!this.props.isVisible) {
+      this.menuRef.current.focus()
+    }
+  }
+
   handleReset = () => {
     this.props.resetDefaultSettings()
     this.setState({ previousSettings: null })
@@ -413,15 +420,8 @@ class Settings extends React.PureComponent {
 
     return (
       <div className="settings-container" ref={this.settingsRef}>
-        <KeyboardShortcut
+        <KeyboardShortcut trigger="⌘-/" handle={this.handleOpenAndFocus} />
-          trigger="⌘-/"
+        <KeyboardShortcut trigger="⇧-⌘-\" handle={this.handleReset} />
-          handle={() => {
-            toggleVisibility()
-            if (!isVisible) {
-              this.menuRef.current.focus()
-            }
-          }}
-        />
         <Button
           title="Settings Menu"
           border

cypress/integration/basic.spec.js

@@ -20,6 +20,15 @@ describe('Basic', () => {
     cy.contains('.container', '%')
   })
 
+  it('Should clear editor state with Shift+Cmd+\\', () => {
+    cy.visit('/?bg=red')
+
+    cy.get('body').trigger('keydown', { key: '\\', metaKey: true, shiftKey: true })
+
+    cy.location().its('pathname').should('eq', '/')
+    cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(171, 184, 195)')
+  })
+
   it("Should contain id's for CLI integrations to use", () => {
     cy.get('#export-container').should('have.length', 1)
     cy.get('.export-container').should('have.length', 1)