feat: Content Block publish component generator (#4495)

## Description

1 commit = fixtures
2nd commit = code changes
3rd = size changes

ref #3994

Publish result:
https://webstudio-fixture-project-a-0su3o.wstd.work/content-block

See fixtures for generated code.

## 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

.github/workflows/main.yml

@@ -85,7 +85,7 @@ jobs:
             const results = [
               await assertSize('./fixtures/ssg/dist/client', 288),
               await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 376),
-              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 904),
+              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 908),
             ]
             for (const result of results) {
               if (result.passed) {

apps/builder/app/builder/builder.tsx

@@ -64,11 +64,13 @@ import { migrateWebstudioDataMutable } from "~/shared/webstudio-data-migrator";
 import { Loading, LoadingBackground } from "./shared/loading";
 import { mergeRefs } from "@react-aria/utils";
 import { CommandPanel } from "./features/command-panel";
+
 import {
   initCopyPaste,
   initCopyPasteForContentEditMode,
 } from "~/shared/copy-paste/init-copy-paste";
 import { useInertHandlers } from "./shared/inert-handlers";
+import { TextToolbar } from "./features/workspace/canvas-tools/text-toolbar";
 
 registerContainers();
 
@@ -122,6 +124,7 @@ const Main = ({ children, css }: { children: ReactNode; css?: CSS }) => (
     css={{
       gridArea: "main",
       position: "relative",
+      isolation: "isolate",
       ...css,
     }}
   >
@@ -416,6 +419,9 @@ export const Builder = ({
               />
             }
           />
+          <Main css={{ pointerEvents: "none" }}>
+            <TextToolbar />
+          </Main>
           {isPreviewMode === false && <Footer />}
           <CloneProjectDialog
             isOpen={isCloneDialogOpen}

apps/builder/app/builder/features/footer/footer.tsx

@@ -7,6 +7,7 @@ export const Footer = () => {
       as="footer"
       align="center"
       css={{
+        isolation: "isolate",
         gridArea: "footer",
         height: theme.spacing[11],
         background: theme.colors.backgroundTopbar,

apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx

@@ -12,12 +12,10 @@ import {
   HoveredInstanceOutline,
   SelectedInstanceOutline,
 } from "./outline";
-import { TextToolbar } from "./text-toolbar";
+
 import { Label } from "./outline/label";
 import { Outline } from "./outline/outline";
 import { useSubscribeDragAndDropState } from "./use-subscribe-drag-drop-state";
-import { ResizeHandles } from "./resize-handles";
-import { MediaBadge } from "./media-badge";
 import { applyScale } from "./outline";
 import { $scale } from "~/builder/shared/nano-states";
 import { BlockChildHoveredInstanceOutline } from "./outline/block-instance-outline";
@@ -73,15 +71,11 @@ export const CanvasTools = () => {
 
   return (
     <>
-      <MediaBadge />
-      <ResizeHandles />
       {isPreviewMode === false && (
         <>
           <SelectedInstanceOutline />
           <HoveredInstanceOutline />
           <CollaborativeInstanceOutline />
-          <TextToolbar />
-
           <BlockChildHoveredInstanceOutline />
         </>
       )}

apps/builder/app/builder/features/workspace/workspace.tsx

@@ -10,6 +10,8 @@ import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { CanvasTools } from "./canvas-tools";
 import { useSetCanvasWidth } from "../breakpoints";
 import { selectInstance } from "~/shared/awareness";
+import { ResizeHandles } from "./canvas-tools/resize-handles";
+import { MediaBadge } from "./canvas-tools/media-badge";
 
 const workspaceStyle = css({
   flexGrow: 1,
@@ -101,6 +103,7 @@ export const Workspace = ({ children, onTransitionEnd }: WorkspaceProps) => {
     selectInstance(undefined);
     $textEditingInstanceSelector.set(undefined);
   };
+  const outlineStyle = useOutlineStyle();
 
   return (
     <>
@@ -116,14 +119,21 @@ export const Workspace = ({ children, onTransitionEnd }: WorkspaceProps) => {
         >
           {children}
         </div>
+        <div
+          data-name="canvas-tools-wrapper"
+          className={canvasContainerStyle({ css: { pointerEvents: "none" } })}
+          style={outlineStyle}
+        >
+          <MediaBadge />
+          <ResizeHandles />
+        </div>
       </div>
     </>
   );
 };
 
 export const CanvasToolsContainer = () => {
   const outlineStyle = useOutlineStyle();
-  useSetCanvasWidth();
 
   return (
     <>