Issue #2029Opened May 23, 2019by arachnosoft3 reactions

[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)

Numbered invalid attribute

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)

arachnosoftAugust 14, 20192 reactions

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!

ankx06August 7, 20191 reactions

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

ankx06May 27, 20190 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.