feat: Content Block publish component generator

.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,7 +12,7 @@ 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";
@@ -80,8 +80,6 @@ export const CanvasTools = () => {
           <SelectedInstanceOutline />
           <HoveredInstanceOutline />
           <CollaborativeInstanceOutline />
-          <TextToolbar />
-
           <BlockChildHoveredInstanceOutline />
         </>
       )}