Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-22073

Image specific syntax with data-widget causes CKEditor to freeze

    XMLWordPrintable

Details

    • Unknown
    • N/A
    • N/A

    Description

      Steps to reproduce

      Copy/paste the below content into any tesp page , save it and try to edit it again via CKEditor

      [[image:data:image/gif;base64,,R0lGODlhDgAOAIAAAAAAAP///yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=||data-widget="uploadimage"]]

      Actual result

      You'll get the infinite spinner without an option to edit the page.

      Expected result

      You can edit the page without issues.

      Note

      The workaround is either to remove the above content via Wiki-mode editor, or either wrapped it into comment tags, or remove the last element

      data-widget="uploadimage"

      Details

      The data:image/... is irrelevant, the main point is to have a data-widget="uploadimage" attribute on the image.

      On 16.3 the following stacktrace is shown in the browser console:

      Uncaught TypeError: this.wrapper.findOne(...) is null
    init ckeditor.js:41219
    h ckeditor.js:31111
    initOn ckeditor.js:32648
    initOnAll ckeditor.js:32654
    C ckeditor.js:31831
    l ckeditor.js:179
    fire ckeditor.js:239
    fire ckeditor.js:291
    setData ckeditor.js:10894
    setup ckeditor.js:11084
    l ckeditor.js:179
    fire ckeditor.js:239
    fire ckeditor.js:291
    setData ckeditor.js:8068
    convertHTML ckeditor.js:45536
    jQuery 8
    convertHTML ckeditor.js:45445
    convertHTML ckeditor.js:45530
    maybeConvertHTML ckeditor.js:45521
    onMode ckeditor.js:45513
    l ckeditor.js:179
    fire ckeditor.js:239
    fire ckeditor.js:291
    setMode ckeditor.js:10440
    setTimeout handler*CKEDITOR.editor.prototype.setMode/< ckeditor.js:10437
    overwriteWysiwygMode ckeditor.js:46231
    setMode ckeditor.js:10429
    exec ckeditor.js:45287
    exec ckeditor.js:5853
    execCommand ckeditor.js:8005
    click ckeditor.js:20128
    execute ckeditor.js:20171
    p ckeditor.js:20197
    addFunction ckeditor.js:784
    callFunction ckeditor.js:793
    onclick (index):1
ckeditor.js:formatted:41219:37
    init ckeditor.js:41219
    h ckeditor.js:31111
    initOn ckeditor.js:32648
    initOnAll ckeditor.js:32654
    C ckeditor.js:31831
    l ckeditor.js:179
    fire ckeditor.js:239
    fire ckeditor.js:291
    setData ckeditor.js:10894
    setup ckeditor.js:11084
    l ckeditor.js:179
    fire ckeditor.js:239
    fire ckeditor.js:291
    setData ckeditor.js:8068
    convertHTML ckeditor.js:45536
    jQuery 8
    convertHTML ckeditor.js:45445
    convertHTML ckeditor.js:45530
    maybeConvertHTML ckeditor.js:45521
    onMode ckeditor.js:45513
    l ckeditor.js:179
    fire ckeditor.js:239
    fire ckeditor.js:291
    setMode ckeditor.js:10440
    (Async: setTimeout handler)
    setMode ckeditor.js:10437
    overwriteWysiwygMode ckeditor.js:46231
    setMode ckeditor.js:10429
    exec ckeditor.js:45287
    exec ckeditor.js:5853
    execCommand ckeditor.js:8005
    click ckeditor.js:20128
    execute ckeditor.js:20171
    p ckeditor.js:20197
    addFunction ckeditor.js:784
    callFunction ckeditor.js:793
    onclick (index):1

      The issue exists since XWiki Enterprise 8.2 where CKEditor was introduced as the default wysiwyg editor (XE-1562) with CKEditor 4.5.9.
      Whenever the data-widget matched a know widget id (e.g., xwiki-macro, or uploadimage), the image seems to be initialized as the corresponding widget. Making the edit fail in unexpected ways.

      Attachments

        1. result on xwiki 8.0.mp4
          1.63 MB
          Nikita Petrenko
        2. result on xwiki 8.2.mp4
          1.19 MB
          Nikita Petrenko

        Issue Links

          is caused by

          Task - A task that needs to be done. XE-1562 Use CKEditor as the default WYSIWYG editor

          • Major - Major loss of function.
          • Closed
          relates to

          Bug - A problem which impairs or prevents the functions of the product. XWIKI-22146 Black square when drag-and-dropping an image in WYSIWYG

          • Blocker - Blocks development and/or testing work, production could not run.
          • Closed

          Activity

            People

              mleduc Manuel Leduc
              npetrenko Nikita Petrenko
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: