Selector string when updating a select input is incorrect

[clemmy]

The problem is that when using the font-family format

var FontFamilyStyle = new Parchment.Attributor.Style('font', 'font-family', { scope: Parchment.Scope.INLINE });
quill.register(FontFamilyStyle, true);

Then if an option on a select on the toolbar has a value of, say, 'Arial Black, Arial, Helvetica Neue, Helvetica, sans-serif', we would run into an error in the update function.

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': 'option[value=""Arial Black", Arial, "Helvetica Neue", Helvetica, sans-serif"]' is not a valid selector.

Notice how there are two double quotes in a row.

Platforms: [Chrome 48, Firefox 46 on Mac 10.11]

Version: [1.0.6.Beta]

[jhchen]

Can you post a stack trace?

[ghost]

I'm hitting this issue as well. Basically, if you have a font-family with a space in it (ex. "Arial Black"), Chrome will encapsulate it with quotes when you ask for the font-family of the HTML element.

let fontFamily = "Arial Black";
node.style['fontFamily']  = fontFamily;
fontFamily = node.style[fontFamily]; // fontFamily is now "Arial Black" (including the quotes)

fontFamily = "'Arial Black'"; // Surrounded with single quotes
node.style['fontFamily']  = fontFamily;
fontFamily = node.style[fontFamily]; // fontFamily is still "Arial Black" (with double quotes instead of single ones)

The error is thrown in update of the Toolbar module:

option = input.querySelector(`option[value="${formats[format]}"]`); // Source
option = input.querySelector('option[value="' + formats[format] + '"]') // Built file/from CDN

When the selector is built, the quotes for the value aren't escaped, so you end up with a bad selector (like the original post). Replacing the double quotes with single ones (which @clemmy did in zenreach#1) should fix it. Just have to make sure that the names with spaces are single-quoted wherever you specify them as well.

Please let me know if you want a PR with the changes.

[jhchen]

It seems brittle to just switch to single quotes. Do all browsers add double quotes as opposed to single quotes or leaving them unquoted? If multiple fonts are specified like "Arial Black", Arial, "Helvetica Neue", Helvetica, sans-serif, is the spacing between fonts and commas respected or potentially normalized?

[scottckr]

Was there ever a proper fix done for this? Running into this same issue.