diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx index 72a3e7b527cf..bd91e06ef3d4 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx @@ -772,6 +772,14 @@ export var storyboard = ( const div = editor.renderedDOM.getByTestId(DivTestId) expect(div.className).toEqual('top-10 left-10 absolute flex flex-row gap-16') }) + + it('can remove tailwind gap by dragging past threshold', async () => { + const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report') + await selectComponentsForTest(editor, [EP.fromString('sb/scene/div')]) + await doGapResize(editor, canvasPoint({ x: -100, y: 0 })) + const div = editor.renderedDOM.getByTestId(DivTestId) + expect(div.className).toEqual('top-10 left-10 absolute flex flex-row') + }) }) }) diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts index 11bc7dfa873b..77b3f320e91b 100644 --- a/editor/src/components/canvas/plugins/inline-style-plugin.ts +++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts @@ -4,9 +4,13 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils' import { defaultEither, isLeft, mapEither, right } from '../../../core/shared/either' import type { JSXElement } from '../../../core/shared/element-template' import { isJSXElement } from '../../../core/shared/element-template' +import { typedObjectKeys } from '../../../core/shared/object-utils' +import * as PP from '../../../core/shared/property-path' import { styleStringInArray } from '../../../utils/common-constants' import type { ParsedCSSProperties } from '../../inspector/common/css-utils' import { withPropertyTag, type WithPropertyTag } from '../canvas-types' +import { foldAndApplyCommandsSimple } from '../commands/commands' +import { deleteProperties } from '../commands/delete-properties-command' import type { StylePlugin } from './style-plugins' function getPropertyFromInstance
( @@ -37,5 +41,16 @@ export const InlineStylePlugin: StylePlugin = { flexDirection: flexDirection, } }, - normalizeFromInlineStyle: (editor) => editor, + normalizeFromInlineStyle: (editor, elementsToNormalize) => { + return foldAndApplyCommandsSimple( + editor, + elementsToNormalize.map((element) => + deleteProperties( + 'on-complete', + element, + typedObjectKeys(editor.canvas.propertiesToUnset).map((p) => PP.create('style', p)), + ), + ), + ) + }, }