Added CSS.escape to font-family.ts #4545
Conversation
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Added CSS.escape to renderHTML. Prevents invalid css when using fonts with numbers in their names, like https://fonts.google.com/specimen/Exo+2
|
@SanderLeenders I think this will also escape
|
|
@janthurau you are right! I've added a fix for this. |
|
Hi |
|
I'm not sure that this was the right move, I think I'm going to make a PR to revert this |
This SO answer provides an alternate solution: https://stackoverflow.com/questions/7638775/do-i-need-to-wrap-quotes-around-font-family-names-in-css |
Sorry there are a few recommendations here are you saying that we should wrap with Or maybe we can do what we did before and just wrap in |
Using `CSS.escape` is the wrong tool for the job here: - it is meant for CSS selectors and does not handle CSS variables properly. - you can't use `var(--title)` as a font-family because it was getting escaped to `var\(--title\)` Instead this introduces using a regex to see if we should quote the font-family. Quoting when: - font-family includes at least one number or whitespace character
Using `CSS.escape` is the wrong tool for the job here: - it is meant for CSS selectors and does not handle CSS variables properly. - you can't use `var(--title)` as a font-family because it was getting escaped to `var\(--title\)`
|
Hi @nperez0111 I see that you have reverted my code. Therefor my original problem is back. Currently, Titap can't handle input like this: It gets rendered as: Do you have any suggestions on how to fix or prevent this? |
|
Hi @nperez0111, have you seen my previous comment? I’d appreciate your input on this. I agree that my solution was causing issues (e.g., CSS variables), but I also believe that TipTap's output should be a valid input for TipTap. If you have any suggestions, I’d love to hear them. |
|
Sorry for not getting back to you @SanderLeenders, I think the easiest thing to do here is to just have a basic polyfill for CSS.escape like this: function cssEscape(value: string): string {
const length = value.length;
let result = '';
for (let i = 0; i < length; i++) {
const char = value.charAt(i);
const code = char.charCodeAt(0);
// If the character is a control character, or a non-printable character, or a space
if (code < 0x20 || code === 0x7F || (code >= 0x80 && code <= 0x9F) || char === ' ') {
result += '\\' + code.toString(16) + ' ';
} else {
// If the character is a special character in CSS
switch (char) {
case '\0':
result += '\uFFFD';
break;
case '"':
case '#':
case '$':
case '%':
case '&':
case '\'':
case '(':
case ')':
case '*':
case '+':
case ',':
case '.':
case '/':
case ':':
case ';':
case '<':
case '=':
case '>':
case '?':
case '@':
case '[':
case '\\':
case ']':
case '^':
case '`':
case '{':
case '|':
case '}':
case '~':
result += '\\' + char;
break;
default:
result += char;
}
}
}
return result;
}
// Example usage
const escaped = cssEscape('Hello, world!');
console.log(escaped); // Output: Hello\,\ world\! |
|
Hi @nperez0111 thanks for your response. Adding a polyfill could potentially work as a solution for @ricardasnav but I'm afraid it isn't a real solution. As you mentioned here (b84c62f) using font-family: var(--title-font-family) //valid
font-family: var\(--title-font-family\) //using CSS.escape or cssEscape is invalidI've explored other solutions, but it seems the primary issue lies here: parseHTML: element => element.style.fontFamily?.replace(/['"]+/g, ''),In parseHTML, quotes are removed, which was introduced in 1af7829 However, it's unclear to me why this change was made. Additionally, I found another potential solution in this commit: (b84c62f#diff-c07afc8dd73997be0302de13651fee649282c27b8da412598d9dc59b3e55ceeb) which suggests: style: `font-family: ${attributes.fontFamily.split(',')
.map((fontFamily: string) => (fontFamily.match(/(\d|\s)+/g) ? `"${fontFamily.trim()}"` : fontFamily.trim())).join(', ')}`,However, this approach does not appear to have made it into production. Thanks in advance for any additional insights you can provide! |
|
Haha, I wrote that last commit & forgot about it. The commit message reminded me. I don't know why that didn't make it! |
|
@SanderLeenders some comments on this here: #5164 |
|
@SanderLeenders on further review, I think you are right that we should not be doing this quote removal on parsing the HTML. Can I leave this to you to open a new PR for this? As long as we have our existing tests pass & any new cases that were not being handled I'd be happy to accept a PR here |
Please describe your changes
Added CSS.escape to renderHTML. Prevents invalid css when using fonts with numbers in their names, like https://fonts.google.com/specimen/Exo+2
How did you accomplish your changes
Added CSS.escape() to renderHTML
How have you tested your changes
Tested local
How can we verify your changes
Before
After
Remarks
Checklist
Related issues