Fixed emoji panel not being visible

[przemyslaw-zan]

Suggested merge commit message (convention)

Other (emoji): Fixed emoji panel not being visible while using it in comments archive. Closes #17964.

---

Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

[psmyrek]

Comments archive uses --ck-z-panel for the z-index. Could you check if after replacing the variable it still works fine?

[przemyslaw-zan]

It does not work. See:

ckeditor5/packages/ckeditor5-ui/theme/globals/_zindex.css

Lines 6 to 10 in 26bf48f

	:root {
	--ck-z-default: 1;
	--ck-z-panel: calc( var(--ck-z-default) + 999 );
	--ck-z-dialog: 9999;
	}

[psmyrek]

I think we should apply the z-index via toggling the class in a template.

Something like:

attributes: {
    class: [
        bind.if( 'isEmojiPanelOpen', 'ck-emoji__panel_open' )
    ]
}

and then define the z-index in .ck-emoji__panel_open class in CSS file:

.ck-emoji__panel_open {
    z-index: calc( var( --ck-z-dialog ) + 1 );
}

[pomek]

I am wondering if we could use the binding engine to update the field automatically.

https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/observables.html

If it goes well, we could bind the CSS class without defining an additional class property.