Fix editing text inside button

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

@@ -49,13 +49,24 @@ const ContentEditable = ({
 
   const ref = useCallback(
     (rootElement: null | HTMLElement) => {
+      // button with contentEditable does not let to press space
+      // so add span inside and use it as editor element in lexical
+      if (rootElement?.tagName === "BUTTON") {
+        const span = document.createElement("span");
+        span.contentEditable = "true";
+        rootElement.appendChild(span);
+        rootElement = span;
+      }
+      if (rootElement) {
+        rootElement.contentEditable = "true";
+      }
       editor.setRootElement(rootElement);
       elementRef.current = rootElement ?? null;
     },
     [editor, elementRef]
   );
 
-  return <Component ref={ref} {...props} contentEditable={true} />;
+  return <Component ref={ref} {...props} />;
 };
 
 type UserProps = Record<Prop["name"], Prop["value"]>;

apps/builder/app/shared/instance-utils.ts

@@ -334,7 +334,12 @@ export const deleteInstance = (instanceSelector: InstanceSelector) => {
 };
 
 export const deleteSelectedInstance = () => {
+  const textEditingInstanceSelector = textEditingInstanceSelectorStore.get();
   const selectedInstanceSelector = selectedInstanceSelectorStore.get();
+  // cannot delete instance while editing
+  if (textEditingInstanceSelector) {
+    return;
+  }
   // @todo tell user they can't delete root
   if (
     selectedInstanceSelector === undefined ||

packages/prisma-client/prisma/migrations/20230610111903_button_children/migration.ts

@@ -0,0 +1,131 @@
+import { PrismaClient } from "./client";
+
+type Text = {
+  type: "text";
+  value: string;
+};
+
+type Id = {
+  type: "id";
+  value: string;
+};
+
+export type Instance = {
+  type: "instance";
+  id: string;
+  component: string;
+  label?: string;
+  children: Array<Id | Text>;
+};
+
+type InstancesList = Instance[];
+
+type BaseProp = {
+  id: string;
+  instanceId: string;
+  name: string;
+  required?: boolean;
+};
+
+type Prop = BaseProp &
+  (
+    | { type: "number"; value: number }
+    | { type: "string"; value: string }
+    | { type: "boolean"; value: boolean }
+    | { type: "asset"; value: string }
+    | {
+        type: "page";
+        value: string | { pageId: string; instanceId: string };
+      }
+    | { type: "string[]"; value: string[] }
+  );
+
+type PropsList = Prop[];
+
+export default async () => {
+  const client = new PrismaClient({
+    // Uncomment to see the queries in console as the migration runs
+    // log: ["query", "info", "warn", "error"],
+  });
+
+  await client.$transaction(
+    async (prisma) => {
+      const chunkSize = 1000;
+      let cursor: undefined | string = undefined;
+      let hasNext = true;
+      while (hasNext) {
+        const builds = await prisma.build.findMany({
+          take: chunkSize,
+          orderBy: {
+            id: "asc",
+          },
+          ...(cursor
+            ? {
+                skip: 1, // Skip the cursor
+                cursor: { id: cursor },
+              }
+            : null),
+        });
+        cursor = builds.at(-1)?.id;
+        hasNext = builds.length === chunkSize;
+
+        for (const build of builds) {
+          const buildId = build.id;
+          try {
+            const instancesList: InstancesList = JSON.parse(build.instances);
+            const propsList: PropsList = JSON.parse(build.props);
+            const newPropsList: PropsList = [];
+            const buttonInstanceIds = new Set<string>();
+            const buttonInnerTexts = new Map<string, string>();
+
+            for (const instance of instancesList) {
+              if (
+                instance.component === "Button" ||
+                instance.component === "VimeoPlayButton"
+              ) {
+                buttonInstanceIds.add(instance.id);
+              }
+            }
+
+            for (const prop of propsList) {
+              if (
+                buttonInstanceIds.has(prop.instanceId) &&
+                prop.name === "innerText"
+              ) {
+                if (prop.type === "string") {
+                  buttonInnerTexts.set(prop.instanceId, prop.value);
+                }
+                continue;
+              }
+              newPropsList.push(prop);
+            }
+
+            for (const instance of instancesList) {
+              if (
+                instance.component === "Button" ||
+                instance.component === "VimeoPlayButton"
+              ) {
+                const innerText = buttonInnerTexts.get(instance.id);
+                if (instance.children.length !== 0 || innerText === undefined) {
+                  continue;
+                }
+                instance.children.push({ type: "text", value: innerText });
+              }
+            }
+
+            build.instances = JSON.stringify(instancesList);
+            build.props = JSON.stringify(newPropsList);
+          } catch {
+            console.info(`build ${buildId} cannot be converted`);
+          }
+        }
+        await Promise.all(
+          builds.map(({ id, instances, props }) =>
+            prisma.build.update({ where: { id }, data: { instances, props } })
+          )
+        );
+      }
+    },
+    { timeout: 1000 * 60 * 8 }
+  );
+};