This is a z-index order bug. The code mirror textarea needs to have a higher value than the toolbar, easy to patch...

This is a z-index order bug.

@dgrammatiko - wouldn't that then hide the toolbar?

wouldn't that then hide the toolbar

Yes, but then again you're in fullscreen mode, isn't that expected?

True. Will you do the patch?

@Scrabble96 you're welcome to do it, the file for the code mirrors css is here: https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media/plg_editors_codemirror/css/codemirror.css

Actually, looking at it in Firefox's inspector, the codemirror.css is being overridden/overwritten by media/vendor/codemirror/lib/addons.css where .CodeMirror-fullscreen has a z-index of just 9. (In codemirror.css it's 1024, but that's not high enough). Experimenting with it in the inspector shows that a z-index of 1200 is sufficient, but I would propose 1500 just to be safe.

If I knew how to find the addons.css file on github I'd do a PR to change it. I've looked in Branch: 4.0-dev > joomla-cms/build/media/vendor but there's no Codemirror sub-folder and I have file searched using 'addons' with no luck. Sorry.

media/vendor/codemirror/lib/addons.css is a vendor file so it should never be edited

Can't even test this as it is here impossible to display codemirror as full screen (Firefox or Safari Macintosh)
Also, no gutter, no line numbers, etc.

My tests here shows on clean branch install that gutter, line numbers and size of textarea are OK the first time codemirror is used when editing an article, but any further attempt gives:

Any idea?

@infograf768 - On checking CodeMirror's own full-screen demo it's possible to see that the class .CodeMirror-fullscreen is not intended to be fullscreen in the true sense but rather 'full browser window'. In truth it should really be named .CodeMirror-full-browser-window

In the admin editor, you have to click into the file first before typing [Ctrl] [Q] or it doesn't work. It doesn't work at all in the articles/custom modules editor as that isn't using CodeMirror.

But, as @brianteeman has said, "media/vendor/codemirror/lib/addons.css is a vendor file so it should never be edited". However, the class is a stand-alone CodeMirror css file called "fullscreen.css" with this code:

.CodeMirror-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  height: auto;
  z-index: 9;
}

If this file could be left out of the addons.css - which doesn't appear to exist in CodeMirror, so I presume has been created in Joomla by concatenating several small CodeMirror css files into one - that should solve the issue.

@infograf768 you're not loading codemirror

@Scrabble96 you can add the class in the code mirror css I pointed above something like:

.CodeMirror-fullscreen {
  z-index: 1200 !important;
}

@dgrammatiko
I am not sure you understood what I posted.
I wrote that ALL codemirror parameters as well as full screeen are broken here in last 4.0-dev branch.
I.e. js as well as CSS

This when choosing codemirror as default editor, therefore when editing an article (see screenshot above).
Indeed it is not loaded as should, but has nothing to do with my settings.

@infograf768 I totally understood what you wrote and I will say again CodeMirror is not loaded...

OK, It is not loaded which means something is broken in 4.0-dev branch

@infograf768 do you expect me to propose a solution from a screenshot?
What's the browser's console error?
Do you have the correct path in the javascript object Joomla?
Is your root on a subfolder?
Do you have a Browser that supports Await/Async (eg latest chrome/safari/ff)?

Way too many things can be the reason this is failing...

@Scrabble96 you can add the class in the code mirror css I pointed above something like:

.CodeMirror-fullscreen {
  z-index: 1200 !important;
}

Yes, @dgrammatiko it does work with the added !important
I'll do a PR for that issue alone later.

I think it's separate from @infograf768's display issue which could be Mac-related.
I have switched the default editor to CodeMirror and on Windows 10 32bit in Firefox, Edge and Chrome (all latest versions) it loads both standard editor and full-window editor as expected (with the above z-index code change), although the default editing window could be deeper:

I've tried testing on my iPad (which I don't use much) and the default editor loads fine.
I can't see what the iPad equivalent of Ctrl-Q would be to get to full screen, though.

I don't use a css minifier, but am I right in thinking that codemirror.min.css should be a compressed version of the entire contents of codemirror.css with nothing left out? If that is the case, then why is some of the codemirror.css code missing from codemirror.min.css? See screenshot of Firefox inspector which shows that some classes are being called from the basic file (which is not large) and some from the minified file:

@Scrabble96 in your Joomla root run npm install. This will create correctly the min file.

@dgrammatiko
Installed clean joomla in root and codemirror works fine.
My tests above were (as always) in a sub/sub/ folder.
There you now have a hint I guess.

FYI, I use codemirror also for com_localise and there it works fine with this code

$basePath = 'media/vendor/codemirror/';
		HTMLHelper::_('script', $basePath . 'lib/codemirror.js', array('version' => 'auto'));
		HTMLHelper::_('stylesheet', $basePath . 'lib/codemirror.css', array('version' => 'auto'));
		HTMLHelper::_('webcomponent', 'system/webcomponents/joomla-editor-codemirror.min.js', array('version' => 'auto', 'relative' => true));
etc.

I guess I will have to create an issue.

@infograf768 just add your comment in #23426

OK

Set to "closed" on behalf of @franz-wohlkoenig by The JTracker Application at issues.joomla.org/joomla-cms/23512

closed as having Pull Request #24427

closed as having Pull Request #24427

Just noticed that this is still open, but the issue has been fixed, so I'm closing it.