refactor(editor) Rectangle insertion now inserts a div. (#6579)

- `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.
concrete-utopia · Oct 25, 2024 · fc4cfb4 · fc4cfb4
1 parent 741e690
commit fc4cfb4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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),