fix: Blockquote editing placeholder (#4677)

## Description

Fixes this
<img width="639" alt="image"
src="https://github.com/user-attachments/assets/92f9da6e-c949-445f-bdce-cb95e0ca9ecd"
/>

with 

<img width="431" alt="image"
src="https://github.com/user-attachments/assets/740e19a1-98a3-4b22-951e-2c8e368571ad"
/>


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -96,6 +96,7 @@ import {
   insertListItemAt,
   insertTemplateAt,
 } from "~/builder/features/workspace/canvas-tools/outline/block-utils";
+import { editablePlaceholderComponents } from "~/canvas/shared/styles";
 
 const BindInstanceToNodePlugin = ({
   refs,
@@ -1605,11 +1606,8 @@ export const TextEditor = ({
         }
 
         // Components with pseudo-elements (e.g., ::marker) that prevent content from collapsing
-        const componentsWithPseudoElementChildren = [
-          "ListItem",
-          "Paragraph",
-          "Heading",
-        ];
+        const componentsWithPseudoElementChildren =
+          editablePlaceholderComponents;
 
         // opinionated: Non-collapsed elements without children can act as spacers (they have size for some reason).
         if (

apps/builder/app/canvas/shared/styles.ts

@@ -88,9 +88,10 @@ const helperStylesShared = [
   `,
 
   // Display a placeholder text for elements that are editing but empty (Lexical adds p>br children)
-  `:is(${editablePlaceholderSelector})[contenteditable]:has(p:only-child > br:only-child) {
+  `:is(${editablePlaceholderSelector})[contenteditable] > p:only-child:has(br:only-child) {
     position: relative;
-    & > p:after {
+    display: block;
+    &:after {
       content: var(${editingPlaceholderVariable});
       position: absolute;
       left: 0;