Goal

Allow the integrators to easily include Fullscreen feature in the editor and customize it to their needs, so that their users can take advantage of the full area of the screen.

Description

• Fullscreen allows users to edit the content comfortably, without worrying that the editable within their application doesn’t have too much real estate available.
• Covering the screen with editor also improves focus, removing all the unnecessary distractions.
• More screen space also results in more content visible within the sidebars e.g. comments, suggestions, document outline etc.
• Bringing back a feature that was available in CKEditor 4.

Scope

• Functional requirements:
  • Feature should be supported and available in Decoupled and Classic editor types first. These are the easiest to start with and will allow us to better understand the potential integration problems we weren’t able to predict ourselves.
  • Fullscreen has to support all the frameworks that are supported by CKEditor 5: Vue.js 3+, React, Angular, Next.js.
  • Entering and exiting fullscreen should be available via an icon in toolbar and menu option.
  • Toolbar grouping should, by default, stay the same as with the editor on page.
    • We’ll provide a configuration option to overwrite this.
• Non-functional requirements:
  • It should work with all premium features, including collaboration session, track changes and revision history.
• Non-goals:
  • Support for other editor types.
    • As a customization option, we’ll be providing a custom callback to allow for custom handling of e.g. unsupported editor types.
  • Including “Powered by CKEditor” label.
  • Word and character count integration.

Prototype