Parsing HTML to Component

[Wayne-Mather]

Hi,

We used to be able to do the following:

let head = root.components().findWhere({ tagName: 'mj-head' });
let component = editor.Parser.parseHtml('<mj-style></mj-style>').html
// do stuff here to modify component styles
head.append(component);

However, that now returns a ComponentDefinition (or array). What's the best way of converting/casting this to a Component and achieve the same functionality as we did in 20.4. Any suggestions or help much appreciated.

[Wayne-Mather]

I have created the following code - but if someone has a better way?

export const CreateComponent = function( editor: Editor, html: string): Component {
    let componentDefinition = editor.Parser.parseHtml(html);
    return componentDefinition as Component;
};

[artf]

The only issue I see right now from TS is html might be undefined (which is not true, I'll fix that), so the right fix for now would be to skip undefined.

- let component = editor.Parser.parseHtml('<mj-style></mj-style>').html
+ let component = editor.Parser.parseHtml('<mj-style></mj-style>').html!

but you still need to consider that html might be an array, so doing return parserHtmlResult as Component; might lead to bugs.