fix: Placeholder error handling for inserting CSS rules

[matthewlipski]

The placeholder extension inserts CSS rules which use pseudo-selectors, specifically :has, :only-child, and :before. These are not supported in older browsers, for example the :has selector only works in versions of Firefox after 120.

This PR mitigates the issue by wrapping insertion of the CSS rules in a try/catch block, so that if the CSS selectors aren't supported, the placeholders won't be visible but the error thrown won't break other things in the editor.

Closes #1286

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Dec 3, 2024 1:35pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	Dec 3, 2024 1:35pm

[YousefED]

Looks good. The editor functions fine I suppose, except that placeholders won't be shown?

[matthewlipski]

Looks good. The editor functions fine I suppose, except that placeholders won't be shown?

Yep that's right, I'll update the description to make that more clear

[Ambercssa]

const getBaseSelector = (additionalSelectors = "") => {
if (supportsHasPseudo()) {
return .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before;
} else {
const blocks = document.querySelectorAll(.bn-block-content${additionalSelectors} .bn-inline-content > .ProseMirror-trailingBreak)
if (blocks && blocks.length === 1) {
return .bn-block-content${additionalSelectors} .bn-inline-content:before;
} else {
return null
}
}
};
const supportsHasPseudo = (): boolean => {
try {
document.querySelector(":has(*)");
return true;
} catch {
return false;
}
};

 I tried to modify it, and it seems to work too

[Ambercssa]

This method will not prevent placeholders from displaying