Ckeditor + image (properties of undefined)

[funny102]

Hello,
A serious error has been bothering me for a few days.

I don’t know when it started or after the update to 15.4 or earlier. Well, when editing articles where an image is inserted, the editor “freezes”.

I see the following error in the console:

ckeditor.js:289 Uncaught TypeError: Cannot set properties of undefined (setting ‘previous’)
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.element.replaceWith (ckeditor.js:289:316)
at c.downcast (ckeditor.js:1505:340)
at f. (ckeditor.js:1122:16)
at f.l (ckeditor.js:10:246)
at f. (ckeditor.js:12:91)
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13:285)
at CKEDITOR.htmlDataProcessor.toDataFormat (ckeditor.js:325:116)
at e.getData (ckeditor.js:370:195)
at e. (ckeditor.js:376:194)
at f.l (ckeditor.js:10:246)

I am also attaching an attachment for better visualization.

• Reboot didn’t help
• updating ckeditor did not help.
• reverting the version from the history back (without the image) helped as follows the editor works.
  As soon as I add (insert) an image, the editor freezes.

Could you help me?
What could be wrong?

I haven’t installed any extensions for a long time, the only changes I made were upgrades (apt update, apt ugprade)

thank you very much for any advice

[mleduc]

Hello @funny102,

What do you mean by article? Do you mean a wiki page or something more specific.

Also, did you try to cleanup your browser cache?

If you can, can you share the content of the page?

[funny102]

Hi,

I uploaded two pictures

1. without an image, editing works and everything is OK
   

2. with a pasted image (nothing more) and after saving, editing is no longer possible.
   The only way to fix it is to revert to an older version via history.
   

xwiki-with-image-no-working.txt (2.9 KB)
xwiki-without-image-working.txt (2.8 KB)

I can’t get the exact source of the error page, but I have the source before saving the page. (hope it’s the same)

according to the xwiki source, insert only this

(% style="text-align: center;" %)
[[image:__fileCreatedFromDataURI__.png]]

After inserting this code, the editor no longer works.

Of course, we tried different browsers (safari, edge, chrome) and the same PC (maxOS, windows)

The problem is the same

Don’t know why?
Is it possible to solve it somehow?

BTW: he does it on several articles, but this article is the easiest (shorter)

[mflorea]

@mleduc I can reproduce simply with:

(% style="text-align:center" %)
[[image:missing.png]]

The trigger is the paragraph with center alignment which is considered as part of the image widget, most probably because the standard CKEditor image plugin uses the paragraph to center the image (so it thinks the paragraph was generated by centering the image with the image dialog). The problem is in the downcast function, here xwiki-platform/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-image/plugin.js at master · xwiki/xwiki-platform · GitHub . The el is the paragraph, which contains only the image, so you’re trying to replace the image node with undefined.

The exception itself was probably introduced with XWIKI-20879: New links around images in the WYSIWYG editor are lost o… · xwiki/xwiki-platform@86ea629 · GitHub but I’m not sure how well it was working before either: you were removing the wrapping paragraph and since the image is an inline element I’m wondering if this doesn’t “move” it to the previous or next block (in some edge cases).

Hope this helps,
Marius

[mleduc]

Thanks, I’ve reached the same conclusion on my side.
I have a fix locally, I’ll create an Jira issue soon and commit my fix soon.

[funny102]

thank you very much for the information and fixing the problem.

would I be able to edit it locally?
is it difficult to manage?
or is it on github?

or wait for a new version xwiki?

[mleduc]

You have several options:

• wait for 15.5 to be released (beginning of next week)
• if you feel comfortable with it, you can manually remove the (% style='text-align:center;'%) from the images, using the wiki editor, and re-center the image from CKEditor afterwards

Thanks for raising this issue, and sorry for the inconvenience.