Was having an issue where an atom created with the old CKEditor implementation from DND would cause the atom to not be read properly on save and send back an sid of undefined which would then save the atom as undefined and lose the atom from the markup.

What I did to solve this was to create a fallback by which if the markup conversion for the div attributes does not succeed it stops trying and leaves the markup HTML as is, removing the dnd wrapper from the div. This keeps the old markup in place as the previously rendered HTML and keeps DND from trying to convert it again. I then put in a popup alert for the user to notify them and have them check the layout to ensure it is as they desire.

This was how I fixed for a client who had issues after migrating from the old CKEditor implementation.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Cellar Door’s picture

nagy.balint’s picture

Thanks for the report.

However, can you provider more information on why the data cannot be retrieved?

It seems to me that it should work in all cases, as it just reads the markup , fetches the sas code, and then parses the sas to have the data. So if that does not work, then likely the html is wrong for some reason. Can you copy paste the erroneous html?

nagy.balint’s picture

I just tested on an older site myself and found no such issues.

It would be nice to know what was in the "sas" variable, after var sas = el.children[0].getHtml();
Because i think that the only way this can fail is if inside "dnd-drop-wrapper" you have something else than the shorthand the [] placeholder, or you dont have the placeholder there at all for some reason. Maybe that is because its an already broken atom?

Also i would not use the javascript alert, as if you have many broken atoms in a single page, there would be a lot of alerts.

nagy.balint’s picture

Status: Active » Needs review
FileSize
1.7 KB

I suggest the following change instead.

To check if data is undefined, as when the match fails it will be undefined.

Then if its undefined, we can check if its html can be salvaged. Trying to convert html to sas first, and then sas to array.
For some reason the html2sas function did not take care of extra options parameters, I've put that in for now.

Then if its html cannot be salvaged, then we do what you have suggested and remove the classes.

nagy.balint’s picture

So far it passes my tests.

nagy.balint’s picture

Ok, here is a better version.

I added a new js function.
It only checks for the beginning html comment. And simply returns the sas representation.

So so far how the patched version works is that:
1. It finds the sas without problem -> converts it
2. It finds the sas but it has some values missing -> malformed sas, if the sid is missing then cant use the sas to convert it to markup anyways, and so it wont appear on display even with the old code.
3. It does not find sas code -> checks if the html comment starter is there at least, even if everything else is missing, then if its found, it uses that to convert it into a sas. Then we got the sid and can use it to convert.
4. It does not find sas code -> there is no html comment starter -> unfortunately then we cannot convert cause we have no sid anymore, so we remove the classes to not try to convert this kind of atom anymore, and keep it as a static html snippet.

nagy.balint’s picture

More on point 2 of the above:

The sas2array function's return value will be stored in data.
The sas2array will only return something, if it has at least a match for the shorthand pattern. So it will only return something if there is a shorthand in the elements markup. And in the pattern after scald= there must be at least one number in order to get a match, thats because of the + sign.
So if sas2array returns something, then it has to be a shorthand and it has to have a sid. So checking for sid is not necessary.
If however sas2array returns nothing, then it will be undefined, and that is checked in the new patch as well.

Cellar Door’s picture

I think the issue here was ckeditor allowed the content creator to put markup inside some of the element and/or some of the rendered html from the previous version of DND was misformed. This caused the sid to come back as undefined and trigger off a whole host of issues with the ajax errors mentioned elsewhere. I finally boiled it down to the html formatting so I put in this check to remove it and gracefully fallback to the existing HMTL so that way it doesn't cause the atom to just disappear (which happened on a few pages).

This looks like a good derivation of the patch as you know the code better than I. I included the alert to the user just so they knew something was wrong with an atom and would be able to go back and fix. Doesn't make it fully i18n though so since the js would be in english.

I'll test this on an old copy of the site I have and see if it caused any more issues and if I can dig up the html around the other ones that wasn't processing and share it.

nagy.balint’s picture

Great, thank you!

Cellar Door’s picture

Alright - found another node where it's happening and it looks like a new issue has arisen. First the HTML:
(I've scrubbed actual site information from the atom in [].

<div class="type-image context-sdl_editor_representation">
<div><!-- scald=1470:sdl_editor_representation -->
<div class="image"><a href="[link-removed]"><img alt="buy-now_button.jpg" height="93" src="[site-url-removed]/sites/default/files/thumbnails/image/buy-now_button_0.jpg" title="buy-now_button.jpg" typeof="foaf:Image" width="632" /></a>

<div class="dnd-legend-wrapper">&nbsp;</div>
</div>

<p>&nbsp;</p>
</div>
</div>

Do you think it's the extra p tag that's in the html that's causing it? CKEditor seems to have put this in on it's own.

Also, since making these updates the atom is rending properly in CKEditor but doesn't render in the node. Only [scald=1470:sdl_editor_representation] . I'm going to look into this as I'm not sure it's related but it's happened since updating to the newest library.

nagy.balint’s picture

The normal behaviour is that in the node itself (when viewing through devel module for example) you should see something like "[scald=1470:sdl_editor_representation]" inside the two divs. Then the upcast script will turn that into the proper widget, and then after the first save it will convert it to the proper markup.

In your case if i understand correctly, you have the markup there and not the sas code. In that case since the sas markup match will not apply, the new code (if you applied the patch in this issue at comment #6) will turn that markup into the correct sas code, and then replace it into the correct widget, but then still have to save the node to properly fix it. (It will only check for "<!-- scald=1470:sdl_editor_representation -->")

So unfortunately i cant see anything wrong here, the code should work fine.

Cellar Door’s picture

ok pulling straight from the database (the code above is from the ckeditor after it's already initialized) is:

<div class="dnd-atom-wrapper type-image context-sdl_editor_representation">
<div class="dnd-drop-wrapper"><!-- scald=1470:sdl_editor_representation -->
<div class="image"><a href="[url]"><img alt="buy-now_button.jpg" height="93" src="[url]/sites/default/files/thumbnails/image/buy-now_button_0.jpg" title="buy-now_button.jpg" typeof="foaf:Image" width="632" /></a>

<div class="dnd-legend-wrapper">&nbsp;</div>
</div>

<p>&nbsp;</p>
</div>
</div>

This is throwing an error but with the patch I provided it's being converted to the html and saving properly.

However the [scald=1470:sdl_editor_representation] that is showing is on the node after save for newly added atoms, (it just happens to be the same atom elsewhere). When in CKEditor on the edit page the atom shows properly and is rendered within the wysiwyg, but after saving and navigating to the node [scald=1470:sdl_editor_representation] is showing in it's place.

If it'd help to get access to a development version of the site to play with PM me and I can get you credentials as sometimes it's easier to debug in browser

nagy.balint’s picture

Please use my patch, need to debug with that.

I feel like this is a misconfiguration and not a bug so far.

I will pm you for access.

gifad’s picture

@Cellar Door

This is the content of #12, just indented to show the DOM structure :

<div class="dnd-atom-wrapper type-image context-sdl_editor_representation">
  <div class="dnd-drop-wrapper">
    <!-- scald=1470:sdl_editor_representation -->
    <div class="image">
      <a href="[url]">
        <img alt="...button.jpg" height="93" src="[url]...button.jpg"
          title="...button.jpg" typeof="foaf:Image" width="632" />
      </a>
      <div class="dnd-legend-wrapper">
        &nbsp;
      </div>
    </div>
    <p>
      &nbsp;
    </p>
  </div>
</div>

as you can see :

<!-- END scald=1470 --> is missing in div class="dnd-drop-wrapper"

div class="dnd-legend-wrapper" has been moved inside div class="image"

Obviously, this code have been manually edited, it cannot have been produced by any version of scald software...

nagy.balint’s picture

But the patch in #6 fixes even that situation.

Thats why it should work fine with my patch.

Cellar Door’s picture

Alright -

Patch on #6 worked to reclaim the malformed legacy atom. My guess is in trying to remove the caption manually w/ ckeditor they went in and mixed up the scald atom. It's now converting to div attributes ok.

Now just trying to figure out why none of the new atoms are rendering outside of they wysiwyg and only giving the [scald=1470:sdl_editor_representation] markup.

Thanks for the patch!

nagy.balint’s picture

@Cellar Door

Can you double check if you have done all the steps when converting to widget support? At https://www.drupal.org/node/1775718

Cellar Door’s picture

I have followed those, which is what is confusing me, I had done this install on another site and it worked well, however this one isn't the case.

I am seeing an error of Undefined index: undefined in mee_filter_process() on line 787 of mee.module. This may be where the breakdown occurs. Somehow it's still getting an undefined index being sent to the process function?

nagy.balint’s picture

@Cellar Door
That means that your markup does not contain the proper div for the widget, as the widget div actually contains sid and such.

So it seems like that you dont have proper widgets.

Hard to see whats wrong without more information or an access to the site unfortunately.

nagy.balint’s picture

Will commit patch #6 tomorrow, since it just adds a fallback to the upcast when the data is undefined, so should not impact any previous logic there.

And hopefully this will be the last commit before 1.4 :)

Cellar Door’s picture

Status: Needs review » Reviewed & tested by the community

Marking as RTBC - fixed the issue on my site. Also updated the documentation for the MEE as that was not enabled on the field and old version was working but stopped with the latest versions. All works great now!

  • nagy.balint committed 3d6db0d on 7.x-1.x
    Issue #2490460 by nagy.balint, Cellar Door: CKEditor Fallback for old...
nagy.balint’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.