Inline Widget - Downcast/Upcast errors

[Gavin Roberts]

Steps to reproduce

1. Go to ​https://jsfiddle.net/zkv6pme3/3/
2. Place cursor within text.
3. Click empty button on the left (note the red bordered box that appears)
4. Click the Source button

Expected result

1. All <span class="test"></span> blocks to be upcasted and converted into widgets.
2. When clicking Source after adding a widget to the editor, it should show the source code.

Actual result

1. Existing <span class="test"></span> blocks are removed.
2. Throws Uncaught TypeError: Cannot read property 'attributes' of null

Stacktrace:

Uncaught TypeError: Cannot read property 'attributes' of null
    (anonymous function) @ plugin.js?t=FB99:2699
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.fragment.forEach @ ckeditor.js:260
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.fragment.forEach @ ckeditor.js:260
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.fragment.forEach @ ckeditor.js:260
    (anonymous function) @ plugin.js?t=FB99:2680
    h @ ckeditor.js:10
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:11
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js:13
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlDataProcessor.toDataFormat @ ckeditor.js:281
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.tools.createClass.proto.getData @ ckeditor.js:992
    (anonymous function) @ ckeditor.js:327
    h @ ckeditor.js:10
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:11
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js:13
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.tools.extend.getData @ ckeditor.js:237
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editable.CKEDITOR.tools.createClass._.detach @ ckeditor.js:339
    (anonymous function) @ ckeditor.js:28
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editable.CKEDITOR.tools.createClass.proto.detach @ ckeditor.js:321
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.tools.createClass.proto.detach @ ckeditor.js:992
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.editable @ ckeditor.js:340
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.setMode @ ckeditor.js:307
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.plugins.sourcearea.commands.source.exec @ ckeditor.js:900
    exec @ ckeditor.js:174
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.tools.extend.execCommand @ ckeditor.js:236
    CKEDITOR.tools.extend.click @ ckeditor.js:742
    n.execute @ ckeditor.js:743
    (anonymous function) @ ckeditor.js:744
    (anonymous function) @ ckeditor.js:29
    window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.tools.callFunction @ ckeditor.js:29
    onclick @ (index):1

Other details (browser, OS, CKEditor version, installed plugins)

Chrome, OS X, 4.5.6 and custom plugin - All code contained within ​https://jsfiddle.net/zkv6pme3/3/

[Jakub Ś]

Please see: ​https://jsfiddle.net/zkv6pme3/4/ and ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/placeholder/plugin.js#L39

Empty inline elements are considered garbage in CKEditor and are removed. This is core behaviour and is beyond widgets control (it is also not configurable). In order to avoid it please add simple   to your widget template. You can later add (if your template has no content)/remove it in upcast/downcast methods.