IBX-10402: Missing hover state on richtext field (#263)

Author: OstafinL

src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js

@@ -253,6 +253,7 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
             CKEditor.create(container, config).then((editor) => {
                 this.editor = editor;
 
+                const editableUIView = editor.ui.view.editable;
                 const editableElement = this.editor.editing.view.getDomRoot();
                 const editorToolbarPanelInstance = this.editor.ui.view.panel;
                 const initialData = this.getData();
@@ -328,6 +329,14 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
                     }
                 });
 
+                editableUIView.on('change:isFocused', (event) => {
+                    const containerDataSource =
+                        container.closest('.ibexa-field-edit--ezrichtext .ibexa-data-source') ??
+                        container.closest('.ibexa-data-source--richtext');
+
+                    containerDataSource.classList.toggle('ibexa-data-source--focused', event.source.isFocused);
+                });
+
                 editorToolbarPanelInstance.on('change:isVisible', ({ source: eventBalloonPanelViewInstance }) => {
                     const fieldEditNode = editableElement.closest('.ibexa-field-edit');
 

src/bundle/Resources/public/scss/_general.scss

@@ -2,6 +2,7 @@
 .ibexa-data-source--richtext {
     border: calculateRem(1px) solid $ibexa-color-dark-200;
     border-radius: $ibexa-border-radius;
+    transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
     .ck.ck-content {
         min-height: calculateRem(100px);
@@ -265,6 +266,28 @@
     }
 }
 
+.ibexa-data-source--richtext.ibexa-data-source,
+.ibexa-field-edit--ezrichtext .ibexa-data-source {
+    &:hover {
+        border-color: var(--ibexa-input-hover-border-color, #{$ibexa-color-primary});
+    }
+
+    &--focused {
+        border-color: var(--ibexa-input-focus-border-color, #{$ibexa-color-primary});
+        box-shadow: 0 0 0 calculateRem(4px) var(--ibexa-input-focus-shadow-color, #{rgba($ibexa-color-primary, 0.25)});
+
+        &.is-invalid {
+            box-shadow: none;
+            border-color: var(--ibexa-input-invalid-border-color, #{$ibexa-color-danger});
+        }
+
+        .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
+            border: none;
+            box-shadow: none;
+        }
+    }
+}
+
 .ibexa-field-edit--ezrichtext.ibexa-field-edit--nontranslatable .ibexa-data-source {
     .ibexa-data-source__richtext {
         color: $ibexa-color-dark-300;

src/bundle/Resources/public/scss/variables/vars.scss

@@ -4,6 +4,9 @@ $ibexa-border-radius-small: calculateRem(5px);
 $ibexa-text-font-size: calculateRem(16px);
 $ibexa-text-font-size-small: calculateRem(12px);
 
+$ibexa-admin-transition: cubic-bezier(0.25, 0.8, 0.25, 1);
+$ibexa-admin-transition-duration: 0.4s;
+
 $ibexa-font-family:
     'Noto Sans',
     -apple-system,