CKEditor's "Source" (modal) window: resizing issue?

[Christophe]

I had already noticed this, had postponed to write about it, and had forgotten about it.

And have noticed it again recently...

Be it with ProcessWire 2.6.1 or 2.7.0, be it in Firefox, Chromium, Opera, or Vivaldi, at least on Linux Mint, when opening CKEditor's "Source" (modal) window, and wanting to resize it by drag-and-drop with the resize "button", because it's sometimes more convenient for a good read/the modification of the source code, the blue-bordered container doesn't resize, only the window... so it's of no use.

As far as I can remember (but was it with the old default wysiwyg editor?), it worked well with older versions of ProcessWire.

Do you experience the same on the Linux, Mac, Windows (and perhaps FreeBSD, and other) platforms?

[pwired]

A simple "Inspect Element" shows that this is an inline styled fixed width of 800px

{
    cursor: auto;
    width: 800px;
    height: 318.667px;
    text-align: left;
}

Lol      you can increase the 800px width directly there in "Inspect Element" to whatever value,

then close "Inspect Element" and edit your source in a wider window of your choice.

===============================================================

But ok if you want to trace it back in your ckeditor you will find it in sourcedialog.js

path = wire\modules\Inputfield\InputfieldCKEditor\plugins\sourcedialog\dialogs\sourcedialog.js
Open up sourcedialog.js in your editor and find this part: (with me it is on line 9 and 10)

// Make it maximum 800px wide, but still fully visible in the viewport.
    var width = Math.min( size.width - 70, 800 );

Now, we already found the fixed value of 800px with "Inspect Element" didn't we ?

We'll there you have it.

Let's say you want to have the Source editor window a bit wider like you mentioned,

simply change the 800 value to let's say: 950 then it will look like this:

// Make it maximum 800px wide, but still fully visible in the viewport.
    var width = Math.min( size.width - 70, 950 );

Save your sourcedialog.js and open up a body field in ckeditor and click on Source,

y voila - you will now see a wider Source editor window with 950px

Note:

You can easily change the value of 800 into 1000

and changing the value 1.5 into 1 (line 13) will also increase the height of the Source editor window:

9       // Make it maximum 800px wide, but still fully visible in the viewport.
10     var width = Math.min( size.width - 70, 1000 );
11
12     // Make it use 2/3 of the viewport height.
13     var height = size.height / 1;

Now that will give you a comfortable Source editor window.