Fix synchronisation

webstudio-is · Dec 20, 2024 · 3ce0904 · 3ce0904
1 parent ee09d46
commit 3ce0904
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 57 deletions.
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/block-editor-context-menu.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/block-editor-context-menu.tsx
@@ -18,7 +18,6 @@ import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import type { Instance } from "@webstudio-is/sdk";
 import { shallowEqual } from "shallow-equal";
-import { emitCommand } from "~/builder/shared/commands";
 
 const TriggerButton = styled("button", {
   position: "absolute",
@@ -84,7 +83,6 @@ const Menu = ({
     (templateSelector: InstanceSelector) => {
       const insertBefore = modifierKeys.altKey;
       insertTemplateAt(templateSelector, anchor, insertBefore);
-      emitCommand("newInstanceText");
     },
     [anchor, modifierKeys.altKey]
   );

diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/block-utils.ts b/apps/builder/app/builder/features/workspace/canvas-tools/outline/block-utils.ts
@@ -4,6 +4,7 @@ import { shallowEqual } from "shallow-equal";
 import { selectInstance } from "~/shared/awareness";
 import {
   extractWebstudioFragment,
+  findAllEditableInstanceSelector,
   findAvailableDataSources,
   getWebstudioData,
   insertInstanceChildrenMutable,
@@ -12,6 +13,8 @@ import {
 } from "~/shared/instance-utils";
 import {
   $instances,
+  $registeredComponentMetas,
+  $textEditingInstanceSelector,
   findBlockChildSelector,
   findBlockSelector,
 } from "~/shared/nano-states";
@@ -111,8 +114,32 @@ export const insertTemplateAt = (
     const children: Instance["children"] = [
       { type: "id", value: newRootInstanceId },
     ];
+
     insertInstanceChildrenMutable(data, children, target);
 
+    const selectedInstanceSelector = [
+      newRootInstanceId,
+      ...target.parentSelector,
+    ];
+
+    const selectors: InstanceSelector[] = [];
+
+    findAllEditableInstanceSelector(
+      selectedInstanceSelector,
+      data.instances,
+      $registeredComponentMetas.get(),
+      selectors
+    );
+
+    const editableInstanceSelector = selectors[0];
+
+    if (editableInstanceSelector) {
+      $textEditingInstanceSelector.set({
+        selector: editableInstanceSelector,
+        reason: "new",
+      });
+    }
+
     selectInstance([newRootInstanceId, ...target.parentSelector]);
   });
 };
diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts
@@ -230,7 +230,6 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
   source: "builder",
   externalCommands: [
     "editInstanceText",
-    "newInstanceText",
     "formatBold",
     "formatItalic",
     "formatSuperscript",

diff --git a/apps/builder/app/canvas/features/text-editor/text-editor.tsx b/apps/builder/app/canvas/features/text-editor/text-editor.tsx
@@ -93,7 +93,6 @@ import {
 } from "~/shared/awareness";
 import { shallowEqual } from "shallow-equal";
 import { insertTemplateAt } from "~/builder/features/workspace/canvas-tools/outline/block-utils";
-import { emitCommand } from "~/canvas/shared/commands";
 
 const BindInstanceToNodePlugin = ({
   refs,
@@ -1127,7 +1126,6 @@ const ContextMenuPluginInternal = ({
               */
 
               insertTemplateAt(templateSelector, rootInstanceSelector, false);
-              emitCommand("newInstanceText");
 
               event.preventDefault();
               return true;

diff --git a/apps/builder/app/canvas/shared/commands.ts b/apps/builder/app/canvas/shared/commands.ts
@@ -26,58 +26,6 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
   source: "canvas",
   externalCommands: ["clickCanvas"],
   commands: [
-    {
-      name: "newInstanceText",
-      hidden: true,
-      disableHotkeyOutsideApp: true,
-      handler: () => {
-        const selectedInstanceSelector = $selectedInstanceSelector.get();
-        if (selectedInstanceSelector === undefined) {
-          return;
-        }
-
-        if (
-          isDescendantOrSelf(
-            $textEditingInstanceSelector.get()?.selector ?? [],
-            selectedInstanceSelector
-          )
-        ) {
-          // already in text editing mode
-          return;
-        }
-
-        const selectors: InstanceSelector[] = [];
-
-        findAllEditableInstanceSelector(
-          selectedInstanceSelector,
-          $instances.get(),
-          $registeredComponentMetas.get(),
-          selectors
-        );
-
-        if (selectors.length === 0) {
-          $textEditingInstanceSelector.set(undefined);
-          return;
-        }
-
-        const editableInstanceSelector = selectors[0];
-
-        const element = getElementByInstanceSelector(editableInstanceSelector);
-        if (element === undefined) {
-          return;
-        }
-        // When an event is triggered from the Builder,
-        // the canvas element may be unfocused, so it's important to focus the element on the canvas.
-        element.focus();
-        selectInstance(editableInstanceSelector);
-
-        $textEditingInstanceSelector.set({
-          selector: editableInstanceSelector,
-          reason: "new",
-        });
-      },
-    },
-
     {
       name: "editInstanceText",
       hidden: true,