Added error handling for inserting placeholder CSS rules as older browsers may not support pseudo-element selectors (TypeCellOS#1300)

matthewlipski · web-flow · commit a2b076a9ebb4 · 2024-12-03T15:50:23.000+01:00
diff --git 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
             );
           }
         }
