x

editor/src/components/canvas/commands/delete-properties-command.ts

@@ -3,7 +3,7 @@ import type { ElementPath, PropertyPath } from '../../../core/shared/project-fil
 import type { BaseCommand, WhenToRun } from './commands'
 import * as EP from '../../../core/shared/element-path'
 import * as PP from '../../../core/shared/property-path'
-import { deleteValuesAtPath, maybeCssPropertyFromInlineStyle } from './utils/property-utils'
+import { deleteValuesAtPath, getSortedProperties } from './utils/property-utils'
 import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
 import { runStyleUpdateForStrategy } from '../plugins/style-plugins'
 
@@ -31,35 +31,15 @@ export const runDeleteProperties = (
   command: DeleteProperties,
   interactionLifecycle: InteractionLifecycle,
 ) => {
-  const propsToDelete = command.properties.reduce(
-    (acc: { styleProps: string[]; rest: PropertyPath[] }, p) => {
-      const prop = maybeCssPropertyFromInlineStyle(p)
-      if (prop == null) {
-        acc.rest.push(p)
-      } else {
-        acc.styleProps.push(prop)
-      }
-      return acc
-    },
-    { styleProps: [], rest: [] },
-  )
-
   // Apply the update to the properties.
-  const { editorStateWithChanges, editorStatePatch: propertyUpdatePatch } = deleteValuesAtPath(
+  const { editorStatePatch: propertyUpdatePatch } = deleteValuesAtPath(
     editorState,
     command.element,
     command.properties,
   )
 
-  const withStylePropsDeleted = runStyleUpdateForStrategy(
-    interactionLifecycle,
-    editorStateWithChanges,
-    command.element,
-    propsToDelete.styleProps.map((p) => ({ type: 'delete', property: p })),
-  )
-
   return {
-    editorStatePatches: [propertyUpdatePatch, ...withStylePropsDeleted],
+    editorStatePatches: [propertyUpdatePatch],
     commandDescription: `Delete Properties ${command.properties
       .map(PP.toString)
       .join(',')} on ${EP.toUid(command.element)}`,

editor/src/components/canvas/commands/set-property-command.ts

@@ -106,27 +106,20 @@ export const runSetProperty = (
   command: SetProperty,
   interactionLifecycle: InteractionLifecycle,
 ) => {
-  const prop = maybeCssPropertyFromInlineStyle(command.property)
-  if (prop == null) {
-    const { editorStatePatch } = applyValuesAtPath(editorState, command.element, [
-      { path: command.property, value: jsExpressionValue(command.value, emptyComments) },
-    ])
-    return {
-      editorStatePatches: [editorStatePatch],
-      commandDescription: getCommandDescription(command),
-    }
-  }
-
-  const editorStatePatches = runStyleUpdateForStrategy(
-    interactionLifecycle,
+  // Apply the update to the properties.
+  const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
     editorState,
     command.element,
-    [{ type: 'set', property: prop, value: command.value }],
+    [{ path: command.property, value: jsExpressionValue(command.value, emptyComments) }],
   )
 
   return {
-    editorStatePatches: editorStatePatches,
-    commandDescription: getCommandDescription(command),
+    editorStatePatches: [propertyUpdatePatch],
+    commandDescription: `Set Property ${PP.toString(command.property)}=${JSON.stringify(
+      command.property,
+      null,
+      2,
+    )} on ${EP.toUid(command.element)}`,
   }
 }
 

editor/src/components/canvas/commands/utils/property-utils.ts

@@ -94,3 +94,23 @@ export function maybeCssPropertyFromInlineStyle(property: PropertyPath): string
   }
   return prop
 }
+
+export interface SortedProperties {
+  styleProps: string[]
+  rest: PropertyPath[]
+}
+
+export function getSortedProperties(properties: PropertyPath[]): SortedProperties {
+  return properties.reduce(
+    (acc: { styleProps: string[]; rest: PropertyPath[] }, p) => {
+      const prop = maybeCssPropertyFromInlineStyle(p)
+      if (prop == null) {
+        acc.rest.push(p)
+      } else {
+        acc.styleProps.push(prop)
+      }
+      return acc
+    },
+    { styleProps: [], rest: [] },
+  )
+}