Allow semantic embed widgets to be configured as inline

[glen-84]

Type of report

Feature request

Provide description of the new feature

At the moment, it doesn't seem possible to insert an inline embed, as the template is initially a hard-coded div, and the inline property is not set (conditionally).

I tried testing inline behaviour by setting inline: true in the widget definition, with a view to making this configurable later, but there's an error when pasting an embedded resource:

ckeditor.js:1209 Uncaught TypeError: Cannot read properties of null (reading 'attributes')
    at ckeditor.js:1209:202
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.element.forEach (ckeditor.js:302:431)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.element.forEach (ckeditor.js:303:14)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.element.forEach (ckeditor.js:303:14)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.element.forEach (ckeditor.js:303:14)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.element.forEach (ckeditor.js:303:14)
    at a.<anonymous> (ckeditor.js:1208:247)
    at a.k (ckeditor.js:10:186)
    at a.<anonymous> (ckeditor.js:12:35)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13:205)

And dragging/dropping the inline embed also seems to fail.

I was thinking you could make this configurable by allowing the developer to specify an option with a callback that receives the embedded URL and possibly the HTML, and returns whether or not the embed should be displayed inline or block. This may require the ability to switch a widget's inline property after instantiation though, and I have no idea if that's possible.

Would it be difficult to add this feature? I had assumed that it would be possible to insert inline embeds, and now I'm rather stuck.

Edit:

Ah, the issue was caused by the div being rendered inside a span, which is probably invalid HTML. I changed the div to a span, and now I can drag it around, and there is no error. So this seems feasible.

[sculpt0r]

Hi @glen-84

If I understand you want some kind of 'switch' in config which tells the editor that all embed widgets should be rendered as inline? Is that right?

Right now - I'm not sure how exactly it could be implemented, but overall - the feature request seems to be valid - thank you :)

[glen-84]

@sculpt0r,

Not all embed widgets. Some will be inline, and some will be block.

Imagine configuration like:

const config = {
    embed_widget_inline: (url) => {
        // If the URL matches a certain format, then make the embed widget inline.
        return url.includes("something-to-identify-an-inline-embed");
    }
};

Is something like this technically possible?

[sculpt0r]

@glen-84 thank you for the clarification. That sounds doable, however, I can't promise any ETA. I marked this report as a valid feature request. Feel free to provide PR with such implementation if you want to speed up the development.