Support full-screen editing in CKEditor

Woah, we totally missed how this would be important to some users. But the fact that you're the first to complain about this in the ~1.5 year I've worked on CKEditor 5 does indicate this is fairly rarely used … 😅

This was last discussed in #3211049 — see #3211049-5: [META] Add all plugins which are available in Drupal core's build of CKEditor 4 and subsequent comments.

This is a usability and accessibility issue, so changing status and priority accordingly.

However, we likely won't be able to implement it in core until it's implemented upstream, so postponing on the upstream discussion.

Thanks for reporting this!

Thanks, @xjm, and agreed! 😊

Damn, getting lots of requests for this feature :-).

FWIW, I miss this feature also.

Vote upstream, please! 🙏😊

This is definitely something that would help with ATAG, but not sure it fits one of their criteria. Not sure if it fits under Cognitive https://www.w3.org/WAI/cognitive/

I can see it part of SC 3.3.6: Error Prevention though.

Has anyone created a temporary solution to this in the meantime? We have a project with requirement of cke5 fullscreen.

If someone's feeling brave they can take this for a spin: https://github.com/leknoppix/ckeditor5-fullscreen (From the upstream comments)

@cmcnamee did you remove the tag wcag336 on purpose? Looks like it was accidental so am adding it back.

That's strange, I didn't even expand the metadata box when commenting, so I'm not sure how the tag got removed. Thanks for adding it back in.

Sometimes it is just bad timing..

Sorely missed. I guess I won't be using CK5 until I have to.

Thanks for considering this. It's essential to many content editors that I'm working with.

In case anyone is interested, I've taken the plunge and adapted the plugin mentioned by @joelpittet in #10 and created it as a standalone project for now.

Thank you @Occupant - that module is perfect for our needs.

A

https://www.drupal.org/project/ckeditor5_fullscreen

I learned yesterday that https://www.drupal.org/project/ckeditor5_premium_features contains a free to use feature that addresses this:

Full screen mode
The full screen mode is a free-to-use plugin that maximizes the editing area. It is especially useful when using features like Document outline or Comments which take up extra space around the editor.

(It was actually announced by @witeksocha 2 weeks ago at https://github.com/ckeditor/ckeditor5/issues/1235#issuecomment-1783119311.)

See https://git.drupalcode.org/project/ckeditor5_premium_features/-/blob/1.2...

What do people think?

Tested the module and seems to be working

> What do people think?

How hard would it be to extract the fullscreen feature into core, so as not to confuse end user admins who are not interested in premium features. Would a Drupal maintainer then need to maintain the plugin JS ourselves as a fork?

Also, I'm curious if the fullscreen plugin from https://www.drupal.org/project/ckeditor5_fullscreen conflicts with https://www.drupal.org/project/ckeditor5_premium_features

@smustgrave What does "RTBC" mean here to you? That we don't need to fix it in core?

Un-RTBC'ing because there's no patch nor MR to commit.

+1 to #24. If the plugin is free to use, it should be separated from the rest of the "pay to use" plugins, as it is confusing to be required to pay for all except one of the included plugins under a nomenclature of "premium".

I've tried out the fullscreen feature on a local site and it's pretty much exactly what our users want, so it would be nice if it was standalone.

What’s there to fix in core?

And agree with the last few comments. I don’t want the paid module for one feature. And is there agreement that wouldn’t become paid later?

I almost missed comment #20. We have https://www.drupal.org/project/ckeditor5_fullscreen contrib module that works without the “premium” module getting in the way. Of course the premium module is supported by the core CKE team, however, seems like it may be more resilient to go with a standalone module which depends on a cke5 contrib plugin that has been around since 2020. Then, at a future date when CKE core has implemented this feature, and Drupal core updates to that version, contrib module could be marked deprecated and have a max Drupal version constraint added to it, with migration instructions on the project page or something, so site builders know how to migrate away from it safely (yay for knocking down tech debt!) The same process could not be said for the premium module which might silently remove the fullscreen once added upstream, and site builders are left with a useless module on their site that no one remembers why it was added.

If anything, the issue status here seems like it could be either "active" or "postponed" (given we have a contrib solution and no ETA on upstream inclusion), and then would automatically go to "closed (outdated)" or "fixed" once we update to said CKE version in core.

Agree this could be closed out once upstream is updated and we update core.

My understanding is that they will not be adding this to "CKEditor 5 core", because there are reasons for why they cannot make this feature work universally. I didn't dig in deep, but my high-level understanding is that every "integrator" of CKEditor 5 would have to build their own full screen mode, it just happens to be that they wrote one for us and are shipping it in that "Premium Features" module.

So, I don't think Postponed makes sense in that case. Unless/until we can convince them to eventually add it to "CKEditor 5 core".

We will not be adding it now but it's still in our plans to provide this feature in the core.

Creating a module for Drupal was just faster and easier for us, as we didn't need to think about all corner cases and editor types.

FWIW, full screen mode is already provided in the official CKEditor 5 Plugin Pack as a “premium plugins available for free”: https://www.drupal.org/project/ckeditor5_plugin_pack

I would vote for having the full screen feature inside CKEditor 5 core. Any idea, tentatively when this feature will be incorporated in CKEditor 5 core?

CKEditor 45.0.0 has been released with support for full screen mode: https://github.com/ckeditor/ckeditor5/releases/tag/v45.0.0
I opened #3517711: Update CKEditor 5 to 45.0.0 to update CKEditor in core.

Fixing attribution.

IS seems incomplete

But question why do we need this when https://www.drupal.org/project/ckeditor5_plugin_pack offers fullscreen?

Hi @smustgrave,

In the latest Drupal releases (10.5.2 and 11.2.2) using CKEditor5 v45.2.0, the Fullscreen feature is intended to be part of core. While the button is referenced and the related functionality appears to be present in the codebase, the actual CKEditor 5 plugin code required to enable Fullscreen is missing.

The following merge request addresses this issue by properly including the plugin implementation in core:
🔗 merge request !12406

Once this is merged, the Fullscreen button will become available in the CKEditor 5 Toolbar configuration interface as expected.

Hope it will be included in the next release.

Tagging for approval but this MR isn’t ready to be merged yet. Missing test coverage

Anxiously awaiting this one to make it into core. It will make our authoring team very happy

It's already available in https://www.drupal.org/project/ckeditor5_plugin_pack

CK5 maintainer here. If this feature is now offered as part of CKEditor5 release in core, then it seems reasonable for core to include the plugin config that would make it available.

Versions do need to be updated with latest core version. Also would be good to complete the issue summary, especially UI change section.

Version numbers updated to match Drupal 11.x, per #3555560: Update CKEditor 5 to 47.1.0. I've also updated the issue summary.

Latest is actually on 47.3.0 after #3561212: Update CKEditor 5 to 47.3.0. Looks like the MR has the correct version though.

Let’s see if this lands before the next update

Pulled this down locally and took it for a spin.

• Installed standard profile
• Edited the Full HTML text format, see the new Fullscreen icon in "Available buttons"
• Added Fullscreen to Active toolbar and saved format
• Went to create new Basic page, and set body format to Full HTML
• Clicked Fullscreen icon

Nice!

May be worth putting a ticket into the ckeditor_plugin_pack since this module already exists there

Tagging for release highlights and yes we should open an issue against plugin pack once this is in (although they'll likely want to keep their own version of the plugin until 11.4 is the lowest supported version).

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Back to RTBC.

There might be two potential problems in the context of the MR. First, the hotkey ckeditor provides for invoking the full screen functionality (cmd shift f or ctrl shift f) isn't available/directly visible to the user in context. at the moment the user has to consult the ckeditor docs https://ckeditor.com/docs/ckeditor5/latest/features/fullscreen.html?docI...). one solution might be to simply add the hotkey to the tooltip like for the link, bold, or italic button. the only downside those hotkeys in the tooltip are unavailable in the aural interface. so the information would be only available for sighted users.
and second, on widescreen monitors there is a visual gap between the menu and toolbar block and the actual textarea. the former is aligned to the left while the textarea is centered.

for people using zoom solutions, who are only seeing a small fraction of the screen at once, this is quite the challenging barrier. you are able to to simulate the effect with the straw test. scott vinkle outlines the problem space in the following article: https://scottvinkle.com/blogs/work/proximity-and-zoom

a potential solution to the problem might be to either left align the textarea or center the menu and toolbar block aligned to the left border of the centered textarea.

*discussed the problem with @drupa11y on slack

@rkoller aren't all those problems things that should be addressed upstream by CKEditor? We don't do anything different here compared to the other plugins, so it feels like this isn't for Drupal to solve.

uhhhh you are right. should have checked https://ckeditor.com/ckeditor-5/demo/feature-rich/ before. will open issues over in the ckeditor queue upstream on github.

@rkoller thanks for the fast confirmation - was hoping you would agree so we don't hold this up any longer!

Committed and pushed da9a867bd85 to main and b08e26578b3 to 11.x. Thanks!

Can someone open the followup against the plugin pack module?

For reference, the upstream issues can be found at :

https://github.com/ckeditor/ckeditor5/issues/19782
https://github.com/ckeditor/ckeditor5/issues/19783
https://github.com/ckeditor/ckeditor5/issues/19784

Just a note for anyone using this, using entity embed buttons in fullscreen mode the embed modals appear behind the fullscreen. You need to close fullscreen to interact with them. Haven't tested media library.