CKEditor 5 Fullscreen is not getting full height with Source

Created on 29 September 2023, about 1 year ago
Updated 22 May 2024, 6 months ago

Problem/Motivation

Fullscreen button in CKEditor5 with Drupal10 is not able to expand the screen to full height when you click on fullscreen button and also click on .

Proposed resolution

In #fullscreeneditor .ck-editor__main > :is(.ck-editor__editable,.ck-source-editing-area) we have to add min-height: 100vh

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

🇪🇸Spain sararellano

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @sararellano
  • 🇪🇸Spain sararellano

    I have updated CSS file in ckeditor5_fullscreen_full_height_source_d10_4.patch because selector :is() seems to not work.

  • Status changed to Needs review about 1 year ago
  • 🇪🇸Spain sararellano

    I have updated again code because .CodeMirror class in some pages have style height: auto and other min-height: 300px . I don't understand why the same module in different pages has different styles and also, where are they comming from. So I have updated the patch fixing it.

  • 🇨🇦Canada occupant Canada

    @sararellano, can you try the latest dev version to see if this remedies your issues?

  • 🇮🇳India Sandeep_k New Delhi

    I've tested this patch- ckeditor5_fullscreen_full_height_source_d10_5.patch on Drupal version- 10.0.12-dev, I was able to reproduce this issue (added before result) but while applying the patch, the patch wasn't applied successfully. Sharing the error here I am getting while applying the patch.

  • 🇨🇦Canada occupant Canada

    Can you try the latest dev version and see if this is resolved? I've tested with the source plugin and also the Codemirror plugin, both in Gin and Claro. Hopefully this will take care of it.

  • Assigned to occupant
  • 🇺🇸United States trevjs

    This is what seems to be currently working for me.

  • 🇺🇸United States trevjs

    Not sure the last patch was the correct solution, at least for the problem I'm seeing. Seems to me this isn't a CSS issue but a problem with codemirror not updating what's displayed when we transition to fullscreen.

    What I observe:
    1.) I click source button to view codemirror display.
    2.) I then click the fullscreen button, page is maximized but the codemirror output is the same as it was before I hit fullscreen, not displaying all of the code.
    3.) If I click on the editing area codemirror will do its update and the full source will be displayed.

    If I look at the HTML source in the inspector at the div with the class CodeMirror-code before #3 the re will just be divs for the lines displayed, after the missing lines will be added to that div.

Production build 0.71.5 2024