[Question/Bug] grapesjs throws a DOMException if you import HTML contents with invalid (numbered) attributes
Question
Hi @artf ,
We got a report that when you import some HTML code with incorrect attributes, such as
<td class="cell" 01234="0" >Hello world! </td>
grapes.js throws the following Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '01234' is not a valid attribute name. at HTMLTableCellElement.<anonymous> (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:3229) at x (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:1245) at m.each (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:4121) at m.attr (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:3195) at m.attr (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:3276) at i.updateAttributes (https://grapesjs.com/js/grapes.min.js?v0.14.61:2:60111) at i.renderAttributes (https://grapesjs.com/js/grapes.min.js?v0.14.61:2:60919) at i.render (https://grapesjs.com/js/grapes.min.js?v0.14.61:2:61020)

Unless that's an explicit choice from you, do you think you could do something to catch this exception on the parser, or at least give us a way to handle it on our own? Like some option to explicitely ignore such attributes?
Sure, the user should not import such content, but we can't always ensure that they won't do anything like this ;)
Thanks for your help.
-Maxime
Answers (3)
Just to keep you informed, I applied the try/catch fix suggested by @ankx06 and @artf to our code, but in a generic way.
I wanted to ensure that the exception would be catched in all cases when setComponents() is being called. Either from our code, or, more importantly (and not covered by @ankx06 's example, as far as I know) from the Import Code window.
So, I used a JavaScript closure technique to wrap the original setComponents() function within a new one, in which I put the try/catch: https://stackoverflow.com/a/10427757
var myGrapesJsObject = grapesjs.init(...);
myGrapesJsObject.setComponents = (function (originalFct) {
return function (components) {
try {
originalFct(components);
}
catch (ex) {
window.alert('Parse error: ' + ex);
}
}
})(myGrapesJsObject.setComponents);
And it works perfectly. No more blocking DOMExceptions.
Thank you all for your suggestions!
@jmchaves this is not called from any event. This is the function to update component's inner components/html.
I have also faced this issue while setting an invalid attribute/style for image height/width.
Currently, I have handled using a try-catch block
static updateInnerHTMLofComponent(component, newContent) {
// Set inner content empty // this is optional
component.set("content", "");
// Add new content in component. This will remove existing child components and create new child components
try {
component.components(newContent);
} catch (error) {
// Handling component render failed when user set invalid attributes to one of the component
this.hendleComponentRenderFailed(component, error.message);
}
}
If the newContent has multiple components and only one component have the error, due to exception none of the components renders, at least the components which are not in error should render correctly and the component in error can render after ignoring invalid such attribute?
Thanks, Ankit
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1126
[Question] How to Add Custom attribute in a Block through Block Manager?
Hello, I have a custom block in which there is custom attribute @call-method="searchProduct". But when I directly use this in Grapes JS as...
Issue #1865
[Bug]: Grapes change page position
Hello, I found the following problem using grapes inside an html page: when you click on some elements of the editor, such as the arrow to...
Issue #1978
[Bug]: Styles allways applied to classes
Hello, I have a Problem with styling individual Items. The following html Code: Loads fine. But when I Click the Component with "#icbp" the...
Issue #399
[Question] Can i push toolbar in current modal and current modal child?
Hello again @artf , i confuse about push toolbar in the element with specific class (ex: modal-trigger) the element code is : and in the /s...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.