diff --git a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts index 01a8a758c4..30ac29c8db 100644 --- a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts +++ b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts @@ -48,22 +48,30 @@ export class PlaceholderPlugin { for (const [blockType, placeholder] of Object.entries(placeholders)) { const mustBeFocused = blockType === "default"; - styleSheet.insertRule( - `${getSelector( - blockType, - mustBeFocused - )}{ content: ${JSON.stringify(placeholder)}; }` - ); - - // For some reason, the placeholders which show when the block is focused - // take priority over ones which show depending on block type, so we need - // to make sure the block specific ones are also used when the block is - // focused. - if (!mustBeFocused) { + try { styleSheet.insertRule( - `${getSelector(blockType, true)}{ content: ${JSON.stringify( - placeholder - )}; }` + `${getSelector( + blockType, + mustBeFocused + )} { content: ${JSON.stringify(placeholder)}; }` + ); + + // For some reason, the placeholders which show when the block is focused + // take priority over ones which show depending on block type, so we need + // to make sure the block specific ones are also used when the block is + // focused. + if (!mustBeFocused) { + styleSheet.insertRule( + `${getSelector(blockType, true)} { content: ${JSON.stringify( + placeholder + )}; }` + ); + } + } catch (e) { + // eslint-disable-next-line no-console + console.warn( + `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`, + e ); } }