fix: prevent inserting into instance with placeholder (#4901)

Closes #4897

Added "placeholder" field to component meta to signal the instance
accepts should not be insertion target. This reverts us to previous
behavior even with empty instances.

Also slightly refactored placeholder rendering to use attr() instead of
extra css variable.

Author: TrySound

apps/builder/app/builder/shared/commands.ts

@@ -36,7 +36,6 @@ import {
 import { $selectedInstancePath, selectInstance } from "~/shared/awareness";
 import { openCommandPanel } from "../features/command-panel";
 import { builderApi } from "~/shared/builder-api";
-
 import {
   findClosestNonTextualContainer,
   isInstanceDetachable,

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

@@ -97,7 +97,6 @@ import {
   insertListItemAt,
   insertTemplateAt,
 } from "~/builder/features/workspace/canvas-tools/outline/block-utils";
-import { editablePlaceholderComponents } from "~/canvas/shared/styles";
 
 const BindInstanceToNodePlugin = ({
   refs,
@@ -1580,6 +1579,7 @@ export const TextEditor = ({
   const handleNext = useEffectEvent(
     (state: EditorState, args: HandleNextParams) => {
       const rootInstanceId = $selectedPage.get()?.rootInstanceId;
+      const metas = $registeredComponentMetas.get();
 
       if (rootInstanceId === undefined) {
         return;
@@ -1589,7 +1589,7 @@ export const TextEditor = ({
       findAllEditableInstanceSelector(
         [rootInstanceId],
         instances,
-        $registeredComponentMetas.get(),
+        metas,
         editableInstanceSelectors
       );
 
@@ -1638,14 +1638,12 @@ export const TextEditor = ({
         if (instance === undefined) {
           continue;
         }
-
-        // Components with pseudo-elements (e.g., ::marker) that prevent content from collapsing
-        const componentsWithPseudoElementChildren =
-          editablePlaceholderComponents;
+        const meta = metas.get(instance.component);
 
         // opinionated: Non-collapsed elements without children can act as spacers (they have size for some reason).
         if (
-          !componentsWithPseudoElementChildren.includes(instance.component) &&
+          // Components with pseudo-elements (e.g., ::marker) that prevent content from collapsing
+          meta?.placeholder === undefined &&
           instance?.children.length === 0
         ) {
           const elt = getElementByInstanceSelector(nextSelector);

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -36,8 +36,6 @@ import {
   getIndexesWithinAncestors,
   type AnyComponent,
   textContentAttribute,
-  editingPlaceholderVariable,
-  editablePlaceholderVariable,
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";
 import {
@@ -68,8 +66,10 @@ import {
 } from "~/canvas/elements";
 import { Block } from "../build-mode/block";
 import { BlockTemplate } from "../build-mode/block-template";
-import { getInstanceLabel } from "~/shared/instance-utils";
-import { editablePlaceholderComponents } from "~/canvas/shared/styles";
+import {
+  editablePlaceholderAttribute,
+  editingPlaceholderVariable,
+} from "~/canvas/shared/styles";
 
 const ContentEditable = ({
   placeholder,
@@ -376,19 +376,14 @@ const getEditableComponentPlaceholder = (
   metas: Map<string, WsComponentMeta>,
   mode: "editing" | "editable"
 ) => {
-  if (!editablePlaceholderComponents.includes(instance.component)) {
+  const meta = metas.get(instance.component);
+  if (meta?.placeholder === undefined) {
     return;
   }
 
   const isContentBlockChild =
     undefined !== findBlockSelector(instanceSelector, instances);
 
-  const meta = metas.get(instance.component);
-
-  const label = meta
-    ? getInstanceLabel(instance, meta)
-    : (instance.label ?? instance.component);
-
   const isParagraph = instance.component === "Paragraph";
 
   if (isParagraph && isContentBlockChild) {
@@ -398,7 +393,7 @@ const getEditableComponentPlaceholder = (
         undefined;
   }
 
-  return label;
+  return meta.placeholder;
 };
 
 export const WebstudioComponentCanvas = forwardRef<
@@ -498,14 +493,6 @@ export const WebstudioComponentCanvas = forwardRef<
     Component = BlockTemplate;
   }
 
-  const placeholder = getEditableComponentPlaceholder(
-    instance,
-    instanceSelector,
-    instances,
-    metas,
-    "editable"
-  );
-
   const mergedProps = mergeProps(restProps, instanceProps, "delete");
 
   const props: {
@@ -514,20 +501,19 @@ export const WebstudioComponentCanvas = forwardRef<
     [selectorIdAttribute]: string;
   } & Record<string, unknown> = {
     ...mergedProps,
-    ...(placeholder !== undefined
-      ? {
-          style: {
-            ...mergedProps.style,
-            [editablePlaceholderVariable]: `'${placeholder.replaceAll("'", "\\'")}'`,
-          },
-        }
-      : null),
     // current props should override bypassed from parent
     // important for data-ws-* props
     tabIndex: 0,
     [selectorIdAttribute]: instanceSelector.join(","),
     [componentAttribute]: instance.component,
     [idAttribute]: instance.id,
+    [editablePlaceholderAttribute]: getEditableComponentPlaceholder(
+      instance,
+      instanceSelector,
+      instances,
+      metas,
+      "editable"
+    ),
   };
 
   // React ignores defaultValue changes after first render.

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

@@ -12,13 +12,7 @@ import {
   createImageValueTransformer,
   addFontRules,
 } from "@webstudio-is/sdk";
-import {
-  collapsedAttribute,
-  idAttribute,
-  editingPlaceholderVariable,
-  editablePlaceholderVariable,
-  componentAttribute,
-} from "@webstudio-is/react-sdk";
+import { collapsedAttribute, idAttribute } from "@webstudio-is/react-sdk";
 import {
   StyleValue,
   type TransformValue,
@@ -68,31 +62,22 @@ export const mountStyles = () => {
   helpersSheet.render();
 };
 
-/**
- * Opinionated list of non collapsible components in the builder
- */
-export const editablePlaceholderComponents = [
-  "Paragraph",
-  "Heading",
-  "ListItem",
-  "Blockquote",
-  "Link",
-];
-
-const editablePlaceholderSelector = editablePlaceholderComponents
-  .map((component) => `[${componentAttribute}= "${component}"]`)
-  .join(", ");
+export const editablePlaceholderAttribute = "data-ws-editable-placeholder";
+// @todo replace with modern typed attr() when supported in all browsers
+// see the second edge case
+// https://developer.mozilla.org/en-US/docs/Web/CSS/attr#backwards_compatibility
+export const editingPlaceholderVariable = "--ws-editing-placeholder";
 
 const helperStylesShared = [
   // Display a placeholder text for elements that are editable but currently empty
-  `:is(${editablePlaceholderSelector}):empty::before {
-    content: var(${editablePlaceholderVariable}, '\\200B');
+  `:is([${editablePlaceholderAttribute}]):empty::before {
+    content: attr(${editablePlaceholderAttribute});
     opacity: 0.3;
   }
   `,
 
   // Display a placeholder text for elements that are editing but empty (Lexical adds p>br children)
-  `:is(${editablePlaceholderSelector})[contenteditable] > p:only-child:has(br:only-child) {
+  `:is([${editablePlaceholderAttribute}])[contenteditable] > p:only-child:has(br:only-child) {
     position: relative;
     display: block;
     &:after {

apps/builder/app/shared/instance-utils.test.tsx

@@ -1388,6 +1388,36 @@ describe("find closest insertable", () => {
     });
   });
 
+  test("finds closest container without textual placeholder", () => {
+    const { instances } = renderData(
+      <$.Body ws:id="bodyId">
+        <$.Paragraph ws:id="paragraphId"></$.Paragraph>
+      </$.Body>
+    );
+    $instances.set(instances);
+    selectInstance(["paragraphId", "bodyId"]);
+    expect(findClosestInsertable(newBoxFragment)).toEqual({
+      parentSelector: ["bodyId"],
+      position: 1,
+    });
+  });
+
+  test("finds closest container even with when parent has placeholder", () => {
+    const { instances } = renderData(
+      <$.Body ws:id="bodyId">
+        <$.Paragraph ws:id="paragraphId">
+          <$.Box ws:id="spanId" tag="span"></$.Box>
+        </$.Paragraph>
+      </$.Body>
+    );
+    $instances.set(instances);
+    selectInstance(["boxId", "paragraphId", "bodyId"]);
+    expect(findClosestInsertable(newBoxFragment)).toEqual({
+      parentSelector: ["paragraphId", "bodyId"],
+      position: 0,
+    });
+  });
+
   test("forbids inserting into :root", () => {
     const { instances } = renderData(<$.Body ws:id="bodyId"></$.Body>);
     $instances.set(instances);

apps/builder/app/shared/matcher.ts

@@ -376,7 +376,10 @@ export const findClosestNonTextualContainer = ({
     if (instance === undefined) {
       continue;
     }
-    let hasText = false;
+    const meta = metas.get(instance.component);
+    // placeholder exists only inside of empty instances
+    let hasText =
+      meta?.placeholder !== undefined && instance.children.length === 0;
     for (const child of instance.children) {
       if (child.type === "text" || child.type === "expression") {
         hasText = true;
@@ -392,7 +395,6 @@ export const findClosestNonTextualContainer = ({
     if (hasText) {
       continue;
     }
-    const meta = metas.get(instance.component);
     if (meta?.type === "container") {
       return index;
     }

packages/react-sdk/src/props.ts

@@ -129,10 +129,6 @@ export const showAttribute = "data-ws-show" as const;
 export const indexAttribute = "data-ws-index" as const;
 export const collapsedAttribute = "data-ws-collapsed" as const;
 export const textContentAttribute = "data-ws-text-content" as const;
-export const editablePlaceholderVariable =
-  "--data-ws-editable-placeholder" as const;
-export const editingPlaceholderVariable =
-  "--data-ws-editing-placeholder" as const;
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

packages/sdk-components-react/src/blockquote.ws.ts

@@ -61,6 +61,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "container",
+  placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle,

packages/sdk-components-react/src/heading.ws.ts

@@ -23,6 +23,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "container",
+  placeholder: "Heading",
   icon: HeadingIcon,
   constraints: {
     relation: "ancestor",

packages/sdk-components-react/src/link.ws.ts

@@ -21,6 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "container",
+  placeholder: "Link",
   icon: LinkIcon,
   constraints: {
     relation: "ancestor",