BUGFIX: Prevent unfocus events during inline editing

Keep the Neos UI and CKEditor from unfocusing our currently edited node
or editable area when we click parts of the toolbar.

Author: Sebobo

packages/neos-ui-ckeditor5-bindings/src/ckEditorApi.js

@@ -132,12 +132,30 @@ export const createEditor = store => async options => {
         .then(editor => {
             const debouncedOnChange = debounce(() => onChange(cleanupContentBeforeCommit(editor.getData())), 1500, {maxWait: 5000});
             editor.model.document.on('change:data', debouncedOnChange);
-            editor.ui.focusTracker.on('change:isFocused', event => {
-                if (!event.source.isFocused) {
-                    // when another editor is focused commit all possible pending changes
-                    debouncedOnChange.flush();
-                    editor.ui.view.toolbar.element.classList.remove('neos-ck-anchored-toolbar--visible');
-                    return
+            editor.ui.focusTracker.on('change:isFocused', (event, data, isFocused) => {
+                if (!isFocused) {
+                    // Use setTimeout to check activeElement after the browser has updated focus
+                    // This prevents premature blur detection when clicking from toolbar to editable area
+                    setTimeout(() => {
+                        // Double-check that the editor is still not focused
+                        if (editor.ui.focusTracker.isFocused) {
+                            return;
+                        }
+
+                        // Check if focus moved to a CKEditor UI element (like the toolbar)
+                        // If so, we should not treat this as leaving the editor
+                        // TODO: Verify whether this is precise enough, or we should instead check all editor components instead
+                        const activeElement = getGuestFrameDocument().activeElement;
+                        const isWithinEditor = activeElement === editor.sourceElement;
+                        if (isWithinEditor) {
+                            return;
+                        }
+
+                        // when another editor is focused commit all possible pending changes
+                        debouncedOnChange.flush();
+                        editor.ui.view.toolbar.element.classList.remove('neos-ck-anchored-toolbar--visible');
+                    }, 0);
+                    return;
                 }
 
                 currentEditor = editor;
@@ -159,7 +177,6 @@ export const createEditor = store => async options => {
             backendContainer.appendChild(editor.ui.view.toolbar.element);
 
             // Anchor the toolbar to the dom-node representing the edited property
-            // TODO: Move to CSS class and set the class on the element instead of setting styles directly
             editor.ui.view.toolbar.element.style.positionAnchor = propertyDomNode.dataset.neosInlineEditorAnchorName;
             editor.ui.view.toolbar.element.classList.add('neos-ck-anchored-toolbar');
 

packages/neos-ui-ckeditor5-bindings/src/cke-overwrites.vanilla-css

@@ -25,13 +25,11 @@
     max-width: 400px;
     display: none;
     position-try-fallbacks: --neos-ck-toolbar-align-right;
+    z-index: calc(2147480000 + 1); /* one above the NodeToolBar z-index */
 }
 .ck.ck-toolbar.neos-ck-anchored-toolbar--visible {
     display: flex;
 }
-.ck.ck-toolbar.neos-ck-anchored-toolbar--visible:hover {
-    z-index: 2147483646;
-}
 
 /**
  * Reduce size of ck toolbar to match Neos UI design which has not spacing around buttons
@@ -95,7 +93,7 @@
     --ck-color-shadow-inner: rgba(0, 0, 0, .1);
 
     --ck-color-widget-blurred-border: #dedede;
-    --ck-color-widget-hover-border: #ffc83d;
+    --ck-color-widget-hover-border: var(--ck-color-base-active);
     --ck-color-widget-editable-focus-background: transparent;
     --ck-color-widget-drag-handle-icon-color: var(--ck-color-base-background);
 

packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/ContextToolbar/index.tsx

@@ -48,6 +48,10 @@ type ContextToolbarProps = {
     fusionPath: string;
 }
 
+/**
+ * The ContextToolbar contains buttons for context specific operations on nodes,
+ * like copying, hiding, moving deleting the focused node.
+ */
 const ContextToolbar: React.FC<ContextToolbarProps> = ({
     buttonProps,
     nodeTypesRegistry,

packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/ContextToolbar/style.module.css

@@ -29,6 +29,15 @@
     bottom: calc(anchor(top) + 10px);
     /*position-try-fallbacks: --toolbar-sticky;*/
 }
+/**
+ * Increase z-index when hovering over the context toolbar or any of its siblings,
+ * so it appears above the ckeditor toolbar when both are visible.
+ */
+.contextToolBar:has(~ :hover),
+.contextToolBar:hover,
+.contextToolBar:hover ~ * {
+    z-index: calc(var(--zIndex-NodeToolBar) + 2);
+}
 
 .contextToolBar--isSticky {
     position: fixed;
@@ -41,7 +50,7 @@
     display: flex;
     align-items: center;
     gap: 1ch;
-    padding-left: 10px;
+    padding: 0 5px;
     font-size: var(--fontSize-Small);
 }
 

packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/StructuralToolbar/index.tsx

@@ -17,6 +17,10 @@ type StructuralToolbarProps = {
     buttonProps?: {[key: string]: any};
 }
 
+/**
+ * The StructuralToolbar contains buttons for structural operations on nodes,
+ * like adding or inserting nodes from clipboard.
+ */
 const StructuralToolbar: React.FC<StructuralToolbarProps> = ({insertPosition, buttonProps, guestFrameRegistry}) => {
     const buttons = guestFrameRegistry.getChildren('NodeToolbar/Buttons');
 

packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/StructuralToolbar/style.module.css

@@ -9,11 +9,24 @@
     background: transparent;
 }
 
+/**
+ * Fallback if the structural toolbar is on top of the node and
+ * does not fit on the left side of the context toolbar
+ */
+@position-try --structural-toolbar-align-right {
+    left: anchor(left);
+    bottom: anchor(top);
+    position-area: none;
+}
 .structuralToolBar__popover {
     z-index: var(--zIndex-NodeToolBar);
     position: absolute;
     position-anchor: --inline-ui-context-toolbar-anchor;
     position-area: center left;
+    position-try-fallbacks: --structural-toolbar-align-right;
+}
+.structuralToolBar__popover:hover {
+    z-index: calc(var(--zIndex-NodeToolBar) + 2);
 }
 
 .structuralToolBar__popover--isBelow {
@@ -23,11 +36,13 @@
     border-left: 2px solid white;
     border-bottom: 2px solid white;
     border-right: 2px solid white;
+    position-try-fallbacks: none;
 }
 
 .structuralToolBar__popover--isInside {
     position-anchor: --inline-ui-node-toolbar-anchor;
     position-area: center center;
     top: 10px;
     border: 2px solid white;
+    position-try-fallbacks: none;
 }

packages/neos-ui-guest-frame/src/initializeGuestFrame.js

@@ -119,6 +119,11 @@ export default ({globalRegistry, store}) => function * initializeGuestFrame() {
             domNode.getAttribute &&
             domNode.getAttribute('data-__neos__inline-ui')
         );
+        const isInsideCKToolbar = clickPath.some(domNode =>
+            domNode &&
+            domNode.classList &&
+            domNode.classList.contains('ck-toolbar')
+        );
         const isInsideEditableProperty = clickPath.some(domNode =>
             domNode &&
             domNode.getAttribute &&
@@ -130,7 +135,7 @@ export default ({globalRegistry, store}) => function * initializeGuestFrame() {
             domNode.getAttribute('data-__neos-node-contextpath')
         );
 
-        if (isInsideInlineUi) {
+        if (isInsideInlineUi || isInsideCKToolbar) {
             // Do nothing, everything OK!
         } else if (selectedDomNode) {
             const contextPath = selectedDomNode.getAttribute('data-__neos-node-contextpath');