"Enter caption here" text missing due to auto-created <br>

In Backdrop we did the following. The starting code should be the same in D8, the Firefox-specific code was added to fix this problem.

          // By default, the template of captioned widget has no
          // data-placeholder attribute. Note that it also must be done when
          // upcasting existing elements (see widgetDefinition.upcast).
          if (dialogReturnValues.attributes['data-has-caption']) {
            actualWidget.editables.caption.setAttribute('data-placeholder', placeholderText);

            // Firefox will add a <br> tag to a newly created DOM element with
            // no content. Remove this <br> if it is the only thing in the
            // caption. Our placeholder support requires the element be entirely
            // empty. See ckeditor-caption.css.
            var captionElement = actualWidget.editables.caption.$;
            if (captionElement.childNodes.length === 1 && captionElement.childNodes.item(0).nodeName === 'BR') {
              captionElement.removeChild(captionElement.childNodes.item(0));
            }
          }

See https://github.com/backdrop/backdrop/blob/1.x/core/modules/ckeditor/js/p...

Swapped images in the summary to reflect the problem...
I'll try and fix this one!

I followed these steps in Firefox 40.0 and Chromium 45.0:

• create an article;
• click on the "Image" Ckeditor button;
• select an image, give it an alternative text, and check the "caption" checkbox;
• click "Save" to insert the image.

Before applying the patch, the caption zone is empty. After applying it, it contains "Enter caption here".

I do not provide screenshots, as they would be identical to the ones provided in the description of this issue.

Oh wow, totally not comfortable reviewing that one. Need CK folks to have a look.

Verified the issue on Chrome and Firefox with the patch "placeholder-for-empty-caption-2563505-4.patch".
'Enter caption here' label is now visible for the image

Steps performed:
1.Create a CT Article
2.Click on Image ckeditor button
3.Select the checkbox 'caption'
4.Click Save to insert the image
5.Verify the label 'Enter caption here' is displayed

Attached snapshots for reference

I'm working on this

Fixed issue with the code style

I asked @reinmar to come review that issue so I hope he is going to have a moment to do that soon.

Hi guys!

I can't quickly check the patch, so I'm going to improvise and guess :). But first, a brief explanation what that <br> does there. We call it "br filler" or "bogus br" and it's the way how browsers originally made sure that empty block have non-zero height. If I remember correctly, even today there's no standardised line-height's value that would tell the browser that block should have height of a text. Some browsers (like Chrome iirc) have some non-standard property for that and some other will (FF guys are considering this), so depending on which browser you test it may seem that bogus brs are not needed any more. Nevertheless, those bogus brs are still required and are created either by browsers or by CKEditor.

If I can see correctly, the patch that was proposed removes automatically created bogus br upon creation of a caption. Things to consider:

• Whether it affects the undo manager. I think it shouldn't, because this br seems to be removed while other operations are performed, so all of them should create one group.
• What if bogus br will be created later. E.g. user may type something, press the enter key, delete everything and I think that at least on FF the editable will contain a bogus br. But perhaps it's fine for you that the caption is only appearing at the beginning.
• Is bogus automatically created if you move selection out of the caption and back there?

These are the possible annoyances that came to my mind. There may be more cases like this. If that's fine for you, then the patch seems to be ok.

However, I proposed to Wim a more complicated, but complete solution. The idea was to polyfill the :empty selector on a nested editable (and perhaps the main one too). It could work like this:

• Listen on editor#change.
• Check whether current editable contains any content.
• If "emptiness" changed remove/add a proper class to the editable.

You could then use such class to add the placeholder.

The tricky part here, as usual, is in the integration with the undo manager. Hard to say in advance how hard it will be. Despite that, I would like to see such plugin for CKEditor one day, so there's a chance that we'll work on it.

I haven't seen it live, but if you're satisfied with your tests, then yes – I would recommend proceeding.

Cool! Cool! Cool!
Thank you :)

Commited by @webchick on 8.0.x
Thank you all ;)