Wrap in div shortcut (#4269)

* shortcut * test
concrete-utopia · Oct 2, 2023 · 7b4cd65 · 7b4cd65
1 parent 5624cf8
commit 7b4cd65
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx
@@ -101,6 +101,7 @@ import {
   JUMP_TO_PARENT_SHORTCUT_BACKSLASH,
   OPEN_INSERT_MENU,
   PASTE_TO_REPLACE,
+  WRAP_IN_DIV,
 } from './shortcut-definitions'
 import type { EditorState, LockedElements, NavigatorEntry } from './store/editor-state'
 import { DerivedState, getOpenFile, RightMenuTab } from './store/editor-state'
@@ -164,6 +165,8 @@ import {
 import { isRight } from '../../core/shared/either'
 import type { ElementPathTrees } from '../../core/shared/element-path-tree'
 import { createPasteToReplacePostActionActions } from '../canvas/canvas-strategies/post-action-options/post-action-options'
+import { generateConsistentUID } from '../../core/shared/uid-utils'
+import { getAllUniqueUids } from '../../core/model/get-unique-ids'
 
 function updateKeysPressed(
   keysPressed: KeysPressed,
@@ -960,6 +963,21 @@ export function handleKeyDown(
           EditorActions.setRightMenuTab(RightMenuTab.Insert),
         ]
       },
+      [WRAP_IN_DIV]: () => {
+        if (!isSelectMode(editor.mode)) {
+          return []
+        }
+        let uid = generateConsistentUID(
+          'wrapper',
+          new Set(getAllUniqueUids(editor.projectContents).uniqueIDs),
+        )
+        return [
+          EditorActions.wrapInElement(editor.selectedViews, {
+            element: defaultDivElement(uid),
+            importsToAdd: {},
+          }),
+        ]
+      },
     })
   }
 

diff --git a/editor/src/components/editor/shortcut-definitions.ts b/editor/src/components/editor/shortcut-definitions.ts
@@ -87,6 +87,7 @@ export const CONVERT_TO_FLEX_CONTAINER = 'convert-to-flex-container'
 export const REMOVE_ABSOLUTE_POSITIONING = 'remove-absolute-positioning'
 export const RESIZE_TO_FIT = 'resize-to-fit'
 export const OPEN_INSERT_MENU = 'open-insert-menu'
+export const WRAP_IN_DIV = 'wrap-in-div'
 
 export type ShortcutDetails = { [key: string]: Shortcut }
 
@@ -250,6 +251,7 @@ const shortcutDetailsWithDefaults: ShortcutDetails = {
   [PASTE_TO_REPLACE]: shortcut('Paste to replace', key('v', ['shift', 'cmd'])),
   [RESIZE_TO_FIT]: shortcut('Resize selected elements to fit', key('r', ['alt', 'cmd', 'shift'])),
   [OPEN_INSERT_MENU]: shortcut('Open insert menu', key('k', ['cmd'])),
+  [WRAP_IN_DIV]: shortcut('Wrap the selected elements into a div', key('enter', ['cmd'])),
 }
 
 export type ShortcutConfiguration = { [key: string]: Array<Key> }

diff --git a/editor/src/components/editor/shortcuts.spec.browser2.tsx b/editor/src/components/editor/shortcuts.spec.browser2.tsx
@@ -429,6 +429,41 @@ describe('shortcuts', () => {
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(initialUiCode)
     })
   })
+
+  describe('cmd + enter to wrap', () => {
+    it(`Wraps 2 elements`, async () => {
+      const testCode = `
+      <div data-uid='aaa' style={{contain: 'layout', width: 300, height: 300}}>
+        <div data-uid='ccc' style={{position: 'absolute', left: 20, top: 50, bottom: 150, width: 100}} />
+        <div data-uid='ddd' style={{width: 60, height: 60}} />
+      </div>
+    `
+      const renderResult = await renderTestEditorWithCode(
+        makeTestProjectCodeWithSnippet(testCode),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [
+        EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/ccc`),
+        EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/ddd`),
+      ])
+
+      await expectSingleUndo2Saves(renderResult, () =>
+        pressKey('Enter', { modifiers: cmdModifier }),
+      )
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+        makeTestProjectCodeWithSnippet(
+          `<div data-uid='aaa' style={{contain: 'layout', width: 300, height: 300}}>
+          <div style={{backgroundColor: '#aaaaaa33', position: 'absolute'}} data-uid='wra'>
+            <div data-uid='ccc' style={{position: 'absolute', left: 20, top: 50, bottom: 150, width: 100}} />
+            <div data-uid='ddd' style={{width: 60, height: 60}} />
+          </div>
+        </div>`,
+        ),
+      )
+    })
+  })
 })
 
 const project = `import * as React from 'react'