Ckeditor5: Full screen (distraction free)

[xiaosunJessica]

ckeditor 5 has give up the function about full screen(maximize)????

---

Add 👍reaction to this post if you want this feature to be implemented.

[Reinmar]

We didn't implement such a function yet. We may do that one day, but that'd be also possible as an integration feature (not part of CKEditor 5). In fact, it would be normally easier to implement that way because there's less assumption one will need to make compared to what we need to predict.

BTW, this could also be called a "distraction free mode".

[Reinmar]

I think that @oleq made some prototypes of a full-screen editing. Were there any problems with that in the past? I think that we'd have to take care of the balloons, am I right?

[oleq]

The topic is related to:

• https://github.com/ckeditor/ckeditor5-design/issues/149 – my initial idea was that in fact "mobile editing ~= distraction-free editing" but soon we found out the fullscreen API is not available in iOS and fixed positioning doesn't go well with iOS native keyboard too,
• https://github.com/ckeditor/ckeditor5-engine/issues/692 – the problems with editor encapsulation in DOM and floating elements like balloons, which cannot be in the <div class="ck-editor"> container, which often gets static dimensions and overflow: hidden.

But for plain distraction mode (ignoring iOS) I suppose we could use the same approach as v4. The only difference would be the mode switcher moving the "body" collection containing balloons to the <div class="ck-editor"> container when the editor is full–screen and reverting this change when it gets back to normal.

Since the editor spans the entire viewport anyway we don't have to worry about overflow and cropped balloons.

I think the balloon positioning system is ready for that except that maybe if a balloon is already open when full–screen is requested, we need to re-position it as soon as the "body" element collection moves. But this should (?) be covered by editor.ui#update event which can be triggered manually using the corresponding EditorUI method.

[oleq]

Just FYI, Apple allowed native fullscreen mode on iPad in iOS 12 (checked, it's working). But not on the iPhone (why?) :(

If we had it on every device, it could be a huge step forward for us (as previously discussed).

[leknoppix]

Hello, I have to little plugin to include to have the fullscreen

https://github.com/leknoppix/ckeditor5-fullscreen