Source Editor Font Change

[bwatford]

I have changed the font in the editor 'source window' from Times New Roman to Arial for better readability and bumped up the font size by 1 point. Text inside the box now wraps across all themes (was not doing this on dark themes before). Backgrounds have been fixed to white on the light themes and black on the dark themes and the text color is determined by theme font colors.

As usual, feedback is always welcomed.

[PigLickJF]

Are there plans to carry it through to dark themes? For me at least, even in Night theme the source window is white background with grayish text, so still not great visibility.

 

Edit: Just tested with all three dark themes, all are the same - Source editor is a white (or whitish) background with grayish text.

Edited July 29, 2022 by PigLickJF (see edit history)

[bwatford]

@PigLickJF Just changed the dark themes source box backgrounds to black, changed font to Arial, and bumped the size of text up by 1 point (across all themes).

I also noticed that the dark theme source box was not wrapping text, that has been fixed as well.

[PigLickJF]

Yep, looks much better now, thanks as always!

 

Is there any way to fix the other issue that Ryfte mentioned about the actual usable area not resizing when you resize the source editor window?

 

[bwatford]

The editor source area is actually a hard set iframe window at 800px for desktop. That is why it doesn't auto resize when the window is adjusted. I am sure it would be possible but as that is a global setting and not just a visual/theme setting that is more in @Eric territory than mine.

[Eric]

Someone ( @Colin ) can drop it on the Trello.

 

[Colin]

Dropped on Trello.

[Eric]

Interesting. It appears that rather than use responsive style, the Source plug-in for CKEditor uses JS to calculate the source panel width. So code changes in addition to the styling... 😠

[bwatford]

sourcedialog.js

 

Around line 9 or 10

 

var width = Math.min( size.width - 70, 800 );

 

probably can change the 800 to 1000 to open up more space and then change the below line (around line 13) for 1.5 to 1 to make sure it uses 2/3 of the viewport height.

 

     var height = size.height / 1;

 

---

 

In the meantime @PigLickJF @Ryfte

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

 

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

 

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.

[Ryfte]

Yeah, lol. I wonder why they hardcoded that at all. I mean, if you're popping a window like that, right over everything, there's literally no reason not to kick it to a 90% or something...

Edited August 2, 2022 by Ryfte (see edit history)

[Eric]

Laziness is generally the answer. CKEditor plugins are developed and maintained by volunteers, no different than the Weave itself 😄