update comment shortcut (#4598)

* update shortcut definitions * convert 'convert' to 'swap' * update tests
concrete-utopia · Dec 5, 2023 · d65f156 · d65f156
1 parent f1cee3b
commit d65f156
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 42 deletions.
diff --git a/editor/src/components/canvas/ui/floating-insert-menu-helpers.ts b/editor/src/components/canvas/ui/floating-insert-menu-helpers.ts
@@ -1,4 +1,6 @@
-export type InsertMenuMode = 'closed' | 'insert' | 'convert' | 'wrap'
+import type { FloatingInsertMenuState } from '../../editor/store/editor-state'
+
+export type InsertMenuMode = FloatingInsertMenuState['insertMenuMode']
 
 export const insertMenuModes: {
   all: InsertMenuMode[]
@@ -7,9 +9,9 @@ export const insertMenuModes: {
   onlyConvert: InsertMenuMode[]
   onlyWrap: InsertMenuMode[]
 } = {
-  all: ['closed', 'insert', 'convert', 'wrap'],
+  all: ['closed', 'insert', 'swap', 'wrap'],
   onlyClosed: ['closed'],
   onlyInsert: ['insert'],
-  onlyConvert: ['convert'],
+  onlyConvert: ['swap'],
   onlyWrap: ['wrap'],
 }
diff --git a/editor/src/components/context-menu-items.ts b/editor/src/components/context-menu-items.ts
@@ -29,11 +29,12 @@ import {
   duplicateSelected,
   toggleHidden,
 } from './editor/actions/action-creators'
-import type {
-  AllElementProps,
-  InternalClipboard,
-  NavigatorEntry,
-  PasteHerePostActionMenuData,
+import {
+  floatingInsertMenuStateSwap,
+  type AllElementProps,
+  type InternalClipboard,
+  type NavigatorEntry,
+  type PasteHerePostActionMenuData,
 } from './editor/store/editor-state'
 import type { ElementContextMenuInstance } from './element-context-menu'
 import {
@@ -348,8 +349,8 @@ export const insert: ContextMenuItem<CanvasData> = {
 }
 
 export const convert: ContextMenuItem<CanvasData> = {
-  name: 'Convert Element To…',
-  shortcut: 'C',
+  name: 'Swap Element With…',
+  shortcut: 'S',
   enabled: (data) => {
     return data.selectedViews.every((path) => {
       const element = MetadataUtils.findElementByElementPath(data.jsxMetadata, path)
@@ -359,7 +360,7 @@ export const convert: ContextMenuItem<CanvasData> = {
   action: (data, dispatch) => {
     requireDispatch(dispatch)([
       setFocus('canvas'),
-      EditorActions.openFloatingInsertMenu({ insertMenuMode: 'convert' }),
+      EditorActions.openFloatingInsertMenu(floatingInsertMenuStateSwap()),
     ])
   },
 }

diff --git a/editor/src/components/editor/canvas-toolbar-states.tsx b/editor/src/components/editor/canvas-toolbar-states.tsx
@@ -138,7 +138,7 @@ export function useToolbarMode(): ToolbarMode {
     return { primary: 'edit', secondary: 'nothing-selected' }
   }
 
-  if (floatingInsertMenu === 'convert' || floatingInsertMenu === 'wrap') {
+  if (floatingInsertMenu === 'swap' || floatingInsertMenu === 'wrap') {
     return { primary: 'edit', secondary: 'selected' }
   }
 

diff --git a/editor/src/components/editor/canvas-toolbar.spec.browser2.tsx b/editor/src/components/editor/canvas-toolbar.spec.browser2.tsx
@@ -1396,7 +1396,7 @@ export var Playground = () => {
     it('when converting into fragment', async () => {
       const editor = await setup()
 
-      await pressKey('c')
+      await pressKey('s')
       await searchInFloatingMenu(editor, 'fragm')
 
       expect(getPrintedUiJsCode(editor.getEditorState(), PlaygroundFilePath))
@@ -1863,7 +1863,7 @@ async function wrapViaAddElementPopup(editor: EditorRenderResult, query: string)
 }
 
 async function convertViaAddElementPopup(editor: EditorRenderResult, query: string) {
-  await pressKey('c')
+  await pressKey('s')
   await searchInFloatingMenu(editor, query)
 }
 

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -69,6 +69,7 @@ import {
   useGetInsertableComponents,
 } from '../canvas/ui/floating-insert-menu'
 import { isFeatureEnabled } from '../../utils/feature-switches'
+import { floatingInsertMenuStateSwap } from './store/editor-state'
 
 export const InsertMenuButtonTestId = 'insert-menu-button'
 export const PlayModeButtonTestId = 'canvas-toolbar-play-mode'
@@ -232,11 +233,7 @@ export const CanvasToolbar = React.memo(() => {
   const toInsertCallback = useToInsert()
 
   const openFloatingConvertMenuCallback = React.useCallback(() => {
-    dispatch([
-      openFloatingInsertMenu({
-        insertMenuMode: 'convert',
-      }),
-    ])
+    dispatch([openFloatingInsertMenu(floatingInsertMenuStateSwap())])
   }, [dispatch])
 
   const openFloatingWrapInMenuCallback = React.useCallback(() => {
@@ -569,7 +566,7 @@ export const CanvasToolbar = React.memo(() => {
                   }}
                 >
                   <Icn category='tools' type='convert-action' width={18} height={18} />
-                  Convert
+                  Swap
                 </FlexRow>
                 <FlexRow
                   onClick={toggleAbsolutePositioningCallback}
@@ -620,7 +617,7 @@ export const CanvasToolbar = React.memo(() => {
             ),
           )}
           {when(
-            insertMenuMode === 'convert',
+            insertMenuMode === 'swap',
             wrapInSubmenu(
               <FlexRow style={{ padding: '0 8px' }}>
                 <Tooltip title='Back' placement='bottom'>
@@ -638,7 +635,7 @@ export const CanvasToolbar = React.memo(() => {
                   height={18}
                   style={{ marginRight: 10 }}
                 />
-                <Tooltip title='Convert to Fragment' placement='bottom'>
+                <Tooltip title='Swap to Fragment' placement='bottom'>
                   <InsertModeButton iconType='fragment' onClick={convertToFragment} />
                 </Tooltip>
                 <Tile style={{ height: '100%' }}>

diff --git a/editor/src/components/editor/convert-callbacks.ts b/editor/src/components/editor/convert-callbacks.ts
@@ -92,7 +92,7 @@ export function changeConditionalOrFragment(
         ),
       ]
       break
-    case 'convert': {
+    case 'swap': {
       if (element.type === 'JSX_FRAGMENT') {
         const targetsForUpdates = getElementsToTarget(selectedViews)
         actionsToDispatch = targetsForUpdates.flatMap((path) => {
@@ -201,7 +201,7 @@ export function changeElement(
         ]
       }
       break
-    case 'convert':
+    case 'swap':
       // this is taken from render-as.tsx
       const targetsForUpdates = getElementsToTarget(selectedViews)
       actionsToDispatch = targetsForUpdates.flatMap((path) => {

diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx
@@ -109,7 +109,7 @@ import {
   COMMENT_SHORTCUT,
 } from './shortcut-definitions'
 import type { EditorState, LockedElements, NavigatorEntry } from './store/editor-state'
-import { getOpenFile, RightMenuTab } from './store/editor-state'
+import { floatingInsertMenuStateSwap, getOpenFile, RightMenuTab } from './store/editor-state'
 import { CanvasMousePositionRaw, WindowMousePositionRaw } from '../../utils/global-positions'
 import { pickColorWithEyeDropper } from '../canvas/canvas-utils'
 import {
@@ -736,7 +736,7 @@ export function handleKeyDown(
           )
         })
         if (isSelectMode(editor.mode) && possibleToConvert) {
-          return [EditorActions.openFloatingInsertMenu({ insertMenuMode: 'convert' })]
+          return [EditorActions.openFloatingInsertMenu(floatingInsertMenuStateSwap())]
         } else {
           return []
         }

diff --git a/editor/src/components/editor/shortcut-definitions.ts b/editor/src/components/editor/shortcut-definitions.ts
@@ -104,7 +104,7 @@ const shortcutDetailsWithDefaults: ShortcutDetails = {
     'Select the first child of or edit the currently selected text element.',
     key('enter', []),
   ),
-  [COMMENT_SHORTCUT]: shortcut('Activate comment mode.', key('c', ['shift'])), // TODO: remove shift and change convert to 's'
+  [COMMENT_SHORTCUT]: shortcut('Activate comment mode.', key('c', [])),
   [JUMP_TO_PARENT_SHORTCUT]: shortcut('Jump to parent element.', key('enter', 'shift')),
   [JUMP_TO_PARENT_SHORTCUT_BACKSLASH]: shortcut(
     'Jump to parent element, with backslash.',
@@ -170,10 +170,6 @@ const shortcutDetailsWithDefaults: ShortcutDetails = {
   [INSERT_RECTANGLE_SHORTCUT]: shortcut('Insert a rectangle.', key('r', [])),
   [INSERT_ELLIPSE_SHORTCUT]: shortcut('Insert an ellipse.', key('e', [])),
   [SAVE_CURRENT_FILE_SHORTCUT]: shortcut('Save the current file.', key('s', 'cmd')),
-  [TOGGLE_SHADOW_SHORTCUT]: shortcut(
-    'Toggle the shadow of the currently selected element.',
-    key('s', []),
-  ),
   [INSERT_DIV_SHORTCUT]: shortcut('Insert a div.', [key('d', []), key('f', [])]),
   [CUT_SELECTION_SHORTCUT]: shortcut(
     'Cut the current selection to the clipboard.',
@@ -220,7 +216,7 @@ const shortcutDetailsWithDefaults: ShortcutDetails = {
     'Toggle the inspector and the navigator.',
     key('backslash', 'cmd'),
   ),
-  [CONVERT_ELEMENT_SHORTCUT]: shortcut('Convert selected element to...', key('c', [])),
+  [CONVERT_ELEMENT_SHORTCUT]: shortcut('Convert selected element to...', key('s', [])),
   [ADD_ELEMENT_SHORTCUT]: shortcut('Add element...', key('a', [])),
   [OPEN_EYEDROPPPER]: shortcut('Open the eyedropper', key('c', 'ctrl')),
   [TEXT_EDIT_MODE]: shortcut('Activate text edit mode', key('t', [])),

diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
@@ -682,13 +682,13 @@ export function floatingInsertMenuStateInsert(
   }
 }
 
-export interface FloatingInsertMenuStateConvert {
-  insertMenuMode: 'convert'
+export interface FloatingInsertMenuStateSwap {
+  insertMenuMode: 'swap'
 }
 
-export function floatingInsertMenuStateConvert(): FloatingInsertMenuStateConvert {
+export function floatingInsertMenuStateSwap(): FloatingInsertMenuStateSwap {
   return {
-    insertMenuMode: 'convert',
+    insertMenuMode: 'swap',
   }
 }
 
@@ -705,7 +705,7 @@ export function floatingInsertMenuStateWrap(): FloatingInsertMenuStateWrap {
 export type FloatingInsertMenuState =
   | FloatingInsertMenuStateClosed
   | FloatingInsertMenuStateInsert
-  | FloatingInsertMenuStateConvert
+  | FloatingInsertMenuStateSwap
   | FloatingInsertMenuStateWrap
 
 export interface ResizeOptions {

diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -271,7 +271,7 @@ import type {
   CursorStackItem,
   CursorImportanceLevel,
   FloatingInsertMenuStateClosed,
-  FloatingInsertMenuStateConvert,
+  FloatingInsertMenuStateSwap,
   FloatingInsertMenuStateWrap,
   FloatingInsertMenuStateInsert,
   FloatingInsertMenuState,
@@ -348,7 +348,7 @@ import {
   cursorStackItem,
   canvasCursor,
   floatingInsertMenuStateClosed,
-  floatingInsertMenuStateConvert,
+  floatingInsertMenuStateSwap,
   floatingInsertMenuStateWrap,
   floatingInsertMenuStateInsert,
   editorStateInspector,
@@ -3489,9 +3489,9 @@ export const FloatingInsertMenuStateInsertKeepDeepEquality: KeepDeepEqualityCall
   )
 
 // Here to cause the build to break if `FloatingInsertMenuStateConvert` is changed.
-floatingInsertMenuStateConvert()
+floatingInsertMenuStateSwap()
 export const FloatingInsertMenuStateConvertKeepDeepEquality: KeepDeepEqualityCall<
-  FloatingInsertMenuStateConvert
+  FloatingInsertMenuStateSwap
 > = (oldValue, newValue) => {
   return keepDeepEqualityResult(oldValue, true)
 }
@@ -3518,7 +3518,7 @@ export const FloatingInsertMenuStateKeepDeepEquality: KeepDeepEqualityCall<
         return FloatingInsertMenuStateInsertKeepDeepEquality(oldValue, newValue)
       }
       break
-    case 'convert':
+    case 'swap':
       if (newValue.insertMenuMode === oldValue.insertMenuMode) {
         return FloatingInsertMenuStateConvertKeepDeepEquality(oldValue, newValue)
       }