Shortcut to reset colors for color tunes

Nigel2392 · May 15, 2024 · aab0b46 · aab0b46 · Nigel2392 · May 15, 2024
1 parent 4a278b1
commit aab0b46
Showing 1 changed file with 25 additions and 13 deletions.
diff --git a/wagtail_editorjs/static/wagtail_editorjs/js/tools/wagtail-color-tune.js b/wagtail_editorjs/static/wagtail_editorjs/js/tools/wagtail-color-tune.js
@@ -47,25 +47,18 @@ class BaseWagtailColorTune {
             this.data.stretched = this.config.defaultStretched;
         }
 
+        this.data.color = this.data.color || this.constructor[`defaultColor${this.constructor.name}`] || null;
+
         setTimeout(() => {
-            this.api.listeners.on(this.block.holder, 'keydown', (e) => {
-                if (e.key === 'Enter') {
-                    this.constructor[`defaultColor${this.constructor.name}`] = this.data.color;
-                }
-            });
+            this.api.listeners.on(this.block.holder, 'keydown', this.handleKeyDown.bind(this));
 
-            if (this.constructor[`defaultColor${this.constructor.name}`] && !this.data.color) {
-                this.data.color = this.constructor[`defaultColor${this.constructor.name}`];
-                this.onChange({
-                    color: this.constructor[`defaultColor${this.constructor.name}`],
-                    stretched: this.data.stretched,
-                });
-                this.constructor[`defaultColor${this.constructor.name}`] = null;
-            } else if (this.data.color) {
+            if (this.data.color) {
                 this.onChange({
                     color: this.data.color,
                     stretched: this.data.stretched,
                 });
+
+                this.constructor[`defaultColor${this.constructor.name}`] = null;
             }
         }, 0);
     }
@@ -90,6 +83,25 @@ class BaseWagtailColorTune {
         return this.block.holder.querySelector('.ce-block__content');
     }
 
+    handleKeyDown(event) {
+        if (event.key === 'Enter' && this.data.color && !e.ctrlKey) {
+            this.constructor[`defaultColor${this.constructor.name}`] = this.data.color;
+        }
+
+        // CTRL ALT R - reset color
+        if (event.key === 'r' && event.ctrlKey && event.altKey && this.data.color) {
+            if (this.colorInput) {
+                this.colorInput.value = '#000000';
+            }
+            this.data.color = null;
+            this.block.dispatchChange();
+            this.onChange({
+                color: this.data.color,
+                stretched: this.data.stretched,
+            });
+        }
+    }
+
     render() {
         this.wrapper = document.createElement('div');
         this.wrapper.classList.add('editorjs-color-input-wrapper');