The image caption plugin works fine with images uploaded through the plugin, but breaks for images given as url (local or remote).
(It also breaks for older, existing images, but that's another issue :P)

When creating content the plugin can handle remote images too, but when editing the content the widget is not recognized.

How to reproduce:

- Turn on the image caption plugin for a ckeditor enabled input format while having the image upload function disabled.
- Create some content, insert an image using an url and enable caption.
- Save, then edit the content.

Expected behaviour:

The image is recognized as the widget image with caption and behaves like one (caption editable, image button opens dialog with the image data in it)

Actual behaviour:

The image is not recognized by ckeditor as an image with caption and can not be interacted with as such.

Proposed solution:

This seems to be the line (drupalimagecaption/plugin.js@112) causing the issue and removing those attribute checks seems to solve it.

var originalUpcast = widgetDefinition.upcast;
        widgetDefinition.upcast = function (element, data) {
//          if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
          if (element.name !== 'img') {
            return;
          }

Any particular reason why those checks were there?

Comments

Karol Haltenberger created an issue. See original summary.

Wim Leers’s picture

Status: Needs review » Postponed (maintainer needs more info)

The image caption plugin works fine with images uploaded through the plugin, but breaks for images given as url (local or remote).

I don't know what this means.

Can you post concrete steps to reproduce? Please also post the HTML that you're editing.

Karol Haltenberger’s picture

Status: Postponed (maintainer needs more info) » Needs review

I have included the steps to reproduce in the issue description.

There is no special configuration, or special html involved, this happens on a plain Drupal install.

I've created a test site here: https://d1o6p.ply.st/ (admin / admin) with two nodes as examples.
One node was created with an editor profile allowing image uploads, the other with a profile with uploads disabled.
Both have captions turned on.

You can see, that editing the one without upload, the image widget is not recognized.

The html for the latter is:

<img alt="alt" data-caption="CAPTION" data-entity-type="" data-entity-uuid="" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" />

The data-entity-type and data-entity-uuid attributes are empty, but the js code (as quoted in the description) requires them.

Wim Leers’s picture

Title: Imagecaption plugin does not recognize widget when editing content unless the image was uploaded » DrupalImageCaption plugin does not recognize <img src>, with a manually specified src
Version: 8.3.x-dev » 8.2.x-dev
Status: Needs review » Needs work
Issue tags: +Needs tests, +JavaScript

Thanks!

I was able to reproduce this bug with

<img alt="alt" data-caption="CAPTION" data-entity-type="" data-entity-uuid="" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" />

in a fresh D8 install, on any node using basic_html. That's what I suspected/thought I understood, but I wanted to be certain.

You should not even need those data- attributes. It should indeed work, but does not. This will need a JavaScriptTestBase test.


This seems to be the line (drupalimagecaption/plugin.js@112) causing the issue and removing those attribute checks seems to solve it.

<code>
var originalUpcast = widgetDefinition.upcast;
        widgetDefinition.upcast = function (element, data) {
//          if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
          if (element.name !== 'img') {
            return;
          }

Any particular reason why those checks were there?

That is indeed wrong AFAICT. Great catch :) Could you post a patch?

nickkwest’s picture

Correct me if I'm wrong here, but aren't UUID and type attributes on IMG so the new file management system can track file usage in body copy? It's my understanding that without those attributes, those files will show no usage.

Karol Haltenberger’s picture

Karol Haltenberger’s picture

@nickkwest
This fix should have no effect on images that do have those attributes specified (e.g. uploaded through the plugin).
It simply allows using the "captioned image" widget for images that don't have them (e.g. src specified manually, migrated content etc.)

I'm looking into the JS test, but I have no idea how to do it, so if anyone feels like doing it...go ahead.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

dylanf’s picture

How would you go about creating a JS test for this? This is fixing an issue with editing image captions on a clients site that is using IMCE to pick an image.

droplet’s picture