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),