WYSIWYG editor breaks code formatting

Interesting enough, Gábor Hojtsy was complaining to me in chat about the very same thing while working on the Drupal 8.2 release notes.

Chat log:

Gábor Hojtsy [10:42]  
haha

[10:44]  
JEEEEZ!$!$@$##

Gábor Hojtsy [10:45]  
struggles with ckeditor stripping all inline CSS even though in full HTML

Gábor Hojtsy [10:45]  
even going to the 8.1.0 page, if someone is to save it it would strip all the inline styling

Wim Leers [10:57]  
@gaborhojtsy I wonder if the d.o people misconfigured its Advanced Content Filter

[10:57]  
@gaborhojtsy Do this in the console: `CKEDITOR.instances`

[10:57]  
@gaborhojtsy you'll now see instances listed

[10:58]  
@gaborhojtsy there probably is only one instance listed. It probably contains "body" in its ID.

[10:58]  
(well I'm not sure about that, the D7 integration is quite confusing)

[10:58]  
but there should be only one instance listed in any case

[10:58]  
copy that ID

[10:58]  
and then do this

[10:58]  
@gaborhojtsy `CKEDITOR.instances['edit-body-0-value'].config.allowedContent`

[10:58]  
(Where `'edit-body-0-value'` is an instance ID.)

[10:58]  
What does that show you?

[10:59]  
`allowedContent` for "Full HTML" should equal `true`

[10:59]  
i.e. "anything allowed"

[11:00]  
If I try in D8's Full HTML+CKEditor, this works fine:
```
<p style="color:red">test</p>
```

Yeah I turned off JS for drupal.org entirely to be able to edit/prepare the 8.2.0 release announcenent.

There was also a problem with this page which is not Full HTML: https://www.drupal.org/node/2116263/discuss

Yes, I had this on https://www.drupal.org/docs/8/phpunit/running-phpunit-tests which really got messed up, for example two separate comand-line commands getting concatenated into one (non-sensical) command. I think I have fixed the page, but each time I did a preview my changes were reset, so it was tricky. I did not see this post until after, so did not try turning off javascript.

even going to the 8.1.0 page, if someone is to save it it would strip all the inline styling

Inline styles are an anti-pattern I don’t mind discouraging. I updated https://www.drupal.org/blog/drupal-8-2-0 with the WYSIWYG and almost all the styles remain. The differences are:

• The download button is left aligned instead of centered. We currently don’t have a generic centering class, and very rarely center content. (We could add one.)
• The image under “Site building, content authoring, and administrative improvements” is 50% of the width instead of 60% and is now responsive. We have (sadly undocumented) right & aside-half classes for this.

I gave the same treatment to https://www.drupal.org/blog/drupal-8-1-0. Something confusing there is that preview and the first view after edit don’t show the video, presumably due to browser JS restrictions on POST, or something. The video does show on a normal page load.

The remaining problems are #6 and the issue summary, clarifying the issue title.

For #6: the code filter treats <code> tags as sometimes block-level, sometimes inline. The usual check is for a newline within the tag. CKEditor merges inline tags so you don't junk like <strong>a</strong><strong>b</strong>. So this should hit that edge case:

<code>a
<code>a

For the issue summary, yes editing code is broken. An extra newline is added above the code, and newlines within code are stripped. If I remove $text = str_replace('
', "\n", $text); from codefilter_prism_process_code(), the problem seems to go away. I’ll do a bit more checking to see if there are any side effects. See also #2704949: When using prism, the pre wrappers get infinitely wrapped on ckeditor.

I deployed a new version of #2704949: When using prism, the pre wrappers get infinitely wrapped on ckeditor on Drupal.org and have edited https://www.drupal.org/docs/develop/coding-standards/api-documentation-a... with both the WYSIWYG and plain text, without disabling JS.

The page as it was did still confuse the thing pretty well, so I did end up reformatting it myself. I think reverting to a really clean version before documentation migration would have avoided this, but I didn't want to figure out the substantive changes. Hopefully the formatting is all good now.

I moved #7 into #2741227: Enable CKEditor for more content types since it is a bit of an edge case. Let’s consolidate future work in that issue.

We currently don’t have a generic centering class, and very rarely center content. (We could add one.)

We should add one indeed, the new release announcement template is an example where we need it, I am sure there are/will be more cases. I'll add a note to #2741227 (don't want to start a whole new issue for this small thing).