From b9fdbbd235b3ac3a3ce8408ded89176a350dc70e Mon Sep 17 00:00:00 2001
From: Sean Parsons <git@futurenotfound.com>
Date: Tue, 22 Oct 2024 16:21:11 +0100
Subject: [PATCH] refactor(editor) Rectangle insertion now inserts a div. -
 `defaultRectangleElement` now creates a `div`. - `INSERT_RECTANGLE_SHORTCUT`
 now doesn't include an import for `utopia-api`. - `UtopiaApiComponents`
 descriptor for a `Rectangle` now creates a `div` instead.

---
 editor/src/components/editor/defaults.ts      |  3 +-
 .../components/editor/global-shortcuts.tsx    |  4 +-
 .../core/third-party/utopia-api-components.ts | 39 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/editor/defaults.ts b/editor/src/components/editor/defaults.ts
index 1652011c6c3e..d3584072378b 100644
--- a/editor/src/components/editor/defaults.ts
+++ b/editor/src/components/editor/defaults.ts
@@ -98,11 +98,12 @@ export function defaultRectangleElementStyle(): JSExpression {
 
 export function defaultRectangleElement(uid: string): JSXElement {
   return jsxElement(
-    jsxElementName('Rectangle', []),
+    jsxElementName('div', []),
     uid,
     jsxAttributesFromMap({
       style: defaultRectangleElementStyle(),
       'data-uid': jsExpressionValue(uid, emptyComments),
+      'data-label': jsExpressionValue('Rectangle', emptyComments),
     }),
     [],
   )
diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx
index ef19ed9c7287..d752adab41a5 100644
--- a/editor/src/components/editor/global-shortcuts.tsx
+++ b/editor/src/components/editor/global-shortcuts.tsx
@@ -653,9 +653,7 @@ export function handleKeyDown(
             EditorActions.enableInsertModeForJSXElement(
               defaultRectangleElement(newUID),
               newUID,
-              {
-                'utopia-api': importDetails(null, [importAlias('Rectangle')], null),
-              },
+              {},
               null,
             ),
             modifiers,
diff --git a/editor/src/core/third-party/utopia-api-components.ts b/editor/src/core/third-party/utopia-api-components.ts
index fb6cb8893f6e..43ea91c7d030 100644
--- a/editor/src/core/third-party/utopia-api-components.ts
+++ b/editor/src/core/third-party/utopia-api-components.ts
@@ -18,6 +18,43 @@ import {
   jsxElementWithoutUID,
 } from '../shared/element-template'
 
+const IntrinsicComponentDescriptor = (
+  name: string,
+  insertMenuLabel: string,
+  supportsChildren: boolean,
+  styleProp: () => JSExpression,
+): ComponentDescriptor => {
+  return {
+    properties: {
+      style: {
+        control: 'style-controls',
+      },
+    },
+    supportsChildren: supportsChildren,
+    preferredChildComponents: [],
+    variants: [
+      {
+        insertMenuLabel: insertMenuLabel,
+        importsToAdd: {},
+        elementToInsert: () =>
+          jsxElementWithoutUID(
+            name,
+            [
+              jsxAttributesEntry('style', styleProp(), emptyComments),
+              jsxAttributesEntry(
+                'data-label',
+                jsExpressionValue('Rectangle', emptyComments),
+                emptyComments,
+              ),
+            ],
+            [],
+          ),
+      },
+    ],
+    source: defaultComponentDescriptor(),
+    ...ComponentDescriptorDefaults,
+  }
+}
 const BasicUtopiaComponentDescriptor = (
   name: string,
   supportsChildren: boolean,
@@ -106,7 +143,7 @@ const BasicUtopiaSceneDescriptor = (
 
 export const UtopiaApiComponents: ComponentDescriptorsForFile = {
   Ellipse: BasicUtopiaComponentDescriptor('Ellipse', false, defaultElementStyle),
-  Rectangle: BasicUtopiaComponentDescriptor('Rectangle', false, defaultRectangleElementStyle),
+  Rectangle: IntrinsicComponentDescriptor('div', 'Rectangle', false, defaultRectangleElementStyle),
   View: BasicUtopiaComponentDescriptor('View', true, defaultElementStyle),
   FlexRow: BasicUtopiaComponentDescriptor('FlexRow', true, defaultFlexRowOrColStyle),
   FlexCol: BasicUtopiaComponentDescriptor('FlexCol', true, defaultFlexRowOrColStyle),