Preview positions are miscalculated for code components

✨ Loading and auto-saving an edited code component Active is hopefully about to land, so we'll be able to fully create code components. If work on this issue starts before that, here is an example code component that can be created by pasting it on /admin/config/development/configuration/single/import after selecting Code component as configuration type: experience_builder.js_component.card_.yml → .

Wow, net fewer LoC?!? 😄

#7: I'm assuming that's while you have a prop that determines the height? :D Otherwise: mysterious yet intriguing! 😄

Haha, it wasn't meant to be mysterious. I made a little test component

  const [height, setHeight] = useState(400);

  useEffect(() => {
    const changeHeight = () => {
      const newHeight = Math.floor(Math.random() * (500 - 100 + 1)) + 100;
      setHeight(newHeight);
    };

    const intervalId = setInterval(changeHeight, 2000);

    // Cleanup interval on component unmount
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div style={{ height: `${height}px`, transition: 'height 0.5s ease', background: '#f00' }}>
      <h2>A Heading Element</h2>
    </div>
  );

We discovered a problem while testing the changes.

This is getting really close! Here is one issue I found:

Seems like the preview position is still miscalculated for SDCs and blocks when a code component changes its height.

Note that the preview position for SDCs/blocks are recalculated after the height-changing animation of another component ends. This is not the case for code components, because their parent elements are being observed. We may want to switch to that in the future for other types of components as well, but we decided that it is enough of an edge case that we can move ahead with the current fix.