diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx index 2a346eb9f4e1..2feb8fba7f20 100644 --- 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 index 627712da2bb4..447d58c00784 100644 --- 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 } diff --git a/editor/src/components/editor/shortcuts.spec.browser2.tsx b/editor/src/components/editor/shortcuts.spec.browser2.tsx index 8173fc38f89e..683ccc50dc1d 100644 --- 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 = ` +
+
+
+
+ ` + 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( + `
+
+
+
+
+
`, + ), + ) + }) + }) }) const project = `import * as React from 'react'