imp: Add coherent outline on the TinyMCE editor focus

Probesys · Jun 3, 2024 · a2d14b2 · a2d14b2
1 parent 50adef8
commit a2d14b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/assets/javascripts/controllers/tinymce_controller.js b/assets/javascripts/controllers/tinymce_controller.js
@@ -46,6 +46,17 @@ export default class extends Controller {
             images_upload_handler: this.imagesUploader.bind(this),
             relative_urls: false,
             remove_script_host: false,
+            highlight_on_focus: false,
+
+            setup: (editor) => {
+                editor.on('focus', () => {
+                    this.element.dataset.hasFocus = true;
+                });
+
+                editor.on('blur', () => {
+                    this.element.dataset.hasFocus = false;
+                });
+            },
         };
 
         window.tinymce.init(configuration);

diff --git a/assets/stylesheets/components/forms.css b/assets/stylesheets/components/forms.css
@@ -316,6 +316,11 @@ legend {
     border-radius: var(--form-border-radius) var(--form-border-radius) 0 0;
 }
 
+.editor:has([data-has-focus="true"]) {
+    outline: var(--outline-width) solid var(--outline-color);
+    outline-offset: var(--outline-offset);
+}
+
 .form__caption {
     color: var(--color-grey11);
     font-size: var(--font-size-small);