[Question/Bug] grapesjs throws a DOMException if you import HTML contents with invalid (numbered) attributes

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

[arachnosoft]

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!

[ankx06]

@jmchaves this is not called from any event. This is the function to update component’s inner components/html.