DOMException: Failed to execute 'querySelectorAll' because of invalid css selector

[tpetry]

Expected behavior.

Pasting normal text content into froala text editor should work without any problems

Actual behavior.

Sometimes (not reproducible in a test case) the following js error appears:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '*:empty:not(td):not(th):not(tr):not(iframe):not(svg):not(area):not(base):not(br):not(col):not(embed):not(hr):not(img):not(input):not(keygen):not(link):not(menuitem):not(meta):not(param):not(source):not(track):not(wbr):not()' is not a valid selector.
    at https://....js:1:264956
    at p (https://....js:1:265409)
    at f (https://....js:1:258455)

The following code line is producing the error

querySelectorAll("*:empty:not(td):not(th):not(tr):not(iframe):not(svg):not(".concat(e.VOID_ELEMENTS.join("):not("),"):not(").concat(t.opts.htmlAllowedEmptyTags.join("):not("),")")

Editor version.

Froala 4.6.3

OS.

Happens on any OS

Browser.

Happens on any Browser

[tavosansal]

I am also encountering this issue and seems to be related to tables. In my case this gets added to the html body:

<style type="text/css" fr-original-style="">
        <!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
        -->
    </style>

Which causes this to fail. Any idea on how to fix this?

[bergermanuel]

@tavosansal We're encountering the same issue (on Mac only, Windows is working fine) with following part inside the html

<STYLE type=text/css>
<!--
body, td {
  font-family: Tahoma;
  font-size: 10.0pt;
}
p, li {
  margin-top: 6pt;
  margin-bottom: 6pt;
  padding: 0px;
}
-->
</STYLE>

Did you find a solution or workaround for the problem?

[weerdm]

There seems to be an issue when <!-- is used.

[st-abarker]

We also encounter this issue (on Mac only, all browsers are affected, though) when there is either a style block like the one shared by @bergermanuel , or when there is a @media selector in the pasted HTML, like the following:

<style type="text/css">
body { background-color: gray; }
@media screen and (max-width: 480px) {
   body { background-color: red; }
}
</style>

EDIT: Further testing also shows that /* */ style comments also cause this error:

<style>
/* Some comment here */
body { background-color: gray; }
</style>

[st-abarker]

We've encountered a new trigger: style selectors that include @-ms-viewport. At this time, we have identified four items that, when present in the style block, can cause this issue:

• <!-- --> style comments
• /* */ style comments
• @media selectors
• @-ms-viewport selectors

EDIT: It appears that anything starting with @ in a style section causes this to break. The latest example we saw is @font-face

[lajuffermans]

This is still an issue (on mac, any browser).... any ideas on how to solve this? 🤔

[lajuffermans]

I was able to break/reproduce it on a mac (chrome & safari so far) by copy pasting a mailchimp template in the source code view of Froala (something our users regularly do). See attached file.

MailChimp.zip

[st-abarker]

I just tested with version 3.2.2, and it looks like the problem is partly fixed. Comments in a style block no longer cause the breaking behavior, but it looks as if many selectors that start with @ - like @media, @font-face, and @-ms-viewport - are still a problem.

[dejanmartinovic]

@st-abarker By default, the script and style tags are removed from the editor. Does define the htmlRemoveTagsoption solve the problem? htmlRemoveTags: ["script"]

[lajuffermans]

That's not a solution and @media @font-face applies for style tags, not script tags.

It breaks here:

...why are style tags handled differently on mac? If I overrule this part it all works fine.

[dejanmartinovic]

@lajuffermans I tried to reproduce this problem in jsfiddle by pasting your template but after defining the htmlRemoveTags options as I described, I did not have any errors in the console. Can you explain what I'm missing? Thanks

[lajuffermans]

@dejanmartinovic I get it now, it actually explodes when it tries to remove style because the default htmlRemoveTags is ['script', 'style']..... When just using ['script'] it works fine. Still it shouldn't crash when it tries to remove style right?

[dejanmartinovic]

@lajuffermans Great! I'm not entirely sure if the template will work correctly in case of the removed style tag. Can you please confirm? If you describe the expected behavior with more details, I could submit the issue to the dev team. Thanks

[lajuffermans]

The template will probably not work as expected but that's probably work on my side (is shouldn't remove the style element/change the htmlRemoveTags default).

At least the editor shouldn't crash when it tries to remove style elements when such a template is used. Thanks for the input!

[st-abarker]

@dejanmartinovic Modifying the htmlRemoveTags setting does prevent the issue from occurring. However, we currently rely on the default behavior of htmlRemoveTags.

Currently, we are pre-processing the HTML that is being inserted into the editor to remove items in the style elements which we know to be problematic, specifically @media, @-ms-viewport, and @font-face. This may miss other problematic values, but it has prevented the issue from occurring for our customers so far. While this workaround is currently working, we do not view it as a long-term fix.

[MagicDuck]

Same issue here...

[IslamElKassas]

Still facing this issue (Froala 3.2.2) (only in mac, all browsers), any update ? :)

[EugeCos]

I had the same issue when I passed the id to scrollableContainer in the number format (like #123). Apparently, if you happen to be using HTML4, id has to start with a letter (https://www.w3.org/TR/html4/types.html#type-id).

Chances are HTML4 is used somewhere within the code. After adding a letter to my id (#z123) the error went away.

[akhildave]

I had the same issue with version 3.1.0. Resolved it by using froala_editor v3.2.6-1 jsfiddle from froala website jsfiddle froala src

[wyncg]

Ran into this issue as well.

In my case, I have the option htmlAllowedEmptyTags set to [] (I am here trying to remove any empty tags). Then if I go to code view, type <p><span>Select all, Copy this, and Paste to see error in the console</span></p> exit code view, select all, copy, then paste. I see the error in my browser console.

After remove the option from the initialization code, issue no longer exists.

jsfiddle can be found here.

[ilyaskarim]

Issue fixed in V3.2.5: https://froala.com/wysiwyg-editor/changelog/#3.2.5