Applying Styles can sometimes break existing content (especially widgets)

[Chris]

Note: This is more prevalent when using BR as the enter mode and not using automatic paragraphs, which is our preferred configuration.

Steps to reproduce

1. In the config, set enter mode to BR and automatic paragraph off
2. In any container's editable portion (I am using a widget that emulates a bootstrap panel.) add some text, maybe even 2 lines
3. using the styles dropdown, select 'Heading 2' to convert the text to an H2

Expected result

Selected text would be wrapped with an H2

Actual result

The container div gets converted to an H2 and any attributes are applied. This is what is breaking the widget editable portion.

Other details (browser, OS, CKEditor version, installed plugins)

using widget and some custom plugins that are simple bootstrap grid system and panels.

See attached picture.

[Chris]

screenshot of style issues

[Jakub Ś]

Hi,

Your sample widget doesn't work at all. It contains only a template so I can't reproduce this problem in anyway based on your attachment.

I have extended allowedContent of the default simplebox plugin - selector: '.simplebox-content', allowedContent: 'p br ul ol li strong em h2' but all worked as expected. I was able to enter H2 inside content area and no problem occured, even after setting enterMode : CKEDITOR.ENTER_BR, autoParagraph : false.

---

I can see that you have inline widget as well. Please note that in case of inline widget its wrapper will most likely be the inline span. You should not insert H2 (block-content) into such widget (represented by inline element).

---

I'm closing this issue as invalid for now. Please provide reduced, working sample. We will validate it and consider reopening this ticket.

[Chris]

custom bootstrap panel plugin with config

[Chris]

I've attached my custom plugin which makes a simple bootstrap panel. You should be able to follow my STR to reproduce. There shouldn't be anything special about my widget. Applying a Heading 2 to selected text in the body breaks the container. Also, once broken, if you go to source and back, that content is gone.

[Jakub Ś]

Thank you for the code. Yes, you are right, the content editable for the widget is not protected and one block element like H2 can replace another block element like div. This is in fact how CKEditor works by default, one block element replaces another, but the main problem is that this div is content editable so the behaviour is not desired in such case.

From what I have checked there are two culprits: config.enterMode = CKEDITOR.ENTER_BR; and config.autoParagraph = false;

Without these config options everything works as expected.

---

@pitchingchris please note that you are disabling autoParagraph which is now ​deprecated and as mentioned in docs it should not used.
I'm not sure if this case with autoparagraph is valid and if we will be fixing it.

@m.lewandowski could you perhaps comment on this ticket?

[Jakub Ś]

#14508 was marked as duplicate.

[Marek Lewandowski]

Yes, I can confirm that this should not happen. Wrapper should not be touched by this UC. Potential problem could be in the iterator, but it's just a blind guess.