Another attempt using a component property within the config

app/web/src/components/EditorMenu/AllShortcutsModal.tsx

@@ -21,7 +21,7 @@ const AllShortcutsModal = () => {
         <Dialog open={open} onClose={() => setOpen(false)} className={classes.root}>
         <div className="bg-ch-gray-700 font-fira-sans max-w-7xl rounded shadow-lg text-ch-gray-300 p-4">
             <h2 className="text-2xl mb-4">All Shortcuts</h2>
-        { editorMenuConfig.map(menu => menu.items.length ? (
+        { editorMenuConfig.filter(menu => menu.items.length).map(menu =>
             <section key={"allshortcuts-"+menu.name}
             className="my-6">
                 <h3 className="text-xl border-b-2 pb-2 mb-2">{ menu.label }</h3>
@@ -32,7 +32,7 @@ const AllShortcutsModal = () => {
                 </div>
             ))}
             </section>
-        ) : <></>)}
+        )}
         </div>
         </Dialog>
     )

app/web/src/components/EditorMenu/Dropdowns.tsx

@@ -0,0 +1,49 @@
+import { Menu } from '@headlessui/react'
+import { useHotkeys } from 'react-hotkeys-hook';
+
+export function DropdownItem({ config, state, thunkDispatch }) {
+    console.log({ name: config.label, shortcut: config.shortcut, callback: handleClick})
+    useHotkeys(config.shortcut, handleClick)
+
+    function handleClick(e) {
+        console.log(e, config)
+        e.preventDefault()
+        config.callback(e, {state, thunkDispatch})
+    }
+    return (
+      <Menu.Item>
+        {({ active }) => (
+        <button
+          className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
+          onClick={handleClick}
+        >
+          {config.label}
+          {config.shortcutLabel && <span className="text-gray-400 pl-4">{ config.shortcutLabel }</span> }
+        </button>
+      )}
+      </Menu.Item>
+    )
+  }
+  
+export function Dropdown({
+    label,
+    disabled,
+    children,
+  }: {
+    label: string,
+    disabled: boolean,
+    children: React.ReactNode,
+  }) {
+    return (
+      <div className="relative">
+        <Menu>
+          <Menu.Button className={"text-gray-100" + (disabled ? " text-gray-400 cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
+          { children &&
+          <Menu.Items className="absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700">
+            {children}
+          </Menu.Items>
+          }
+        </Menu>
+      </div>
+    )
+  }

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -1,31 +1,12 @@
-import { Menu } from '@headlessui/react'
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import Svg from 'src/components/Svg/Svg'
-import { useRender } from 'src/components/IdeWrapper/useRender'
-import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
-import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import CadPackage from 'src/components/CadPackage/CadPackage'
-import { EditorMenuConfig, EditorMenuItemConfig, editorMenuConfig } from './menuConfig'
+import { editorMenuConfig } from './menuConfig'
 import AllShortcutsModal from './AllShortcutsModal'
+import { Dropdown } from './Dropdowns';
 
 const EditorMenu = () => {
-  const handleRender = useRender()
-  const saveCode = useSaveCode()
   const { state, thunkDispatch } = useIdeContext()
-  const handleStlDownload = makeStlDownloadHandler({
-    type: state.objectData?.type,
-    ideType: state.ideType,
-    geometry: state.objectData?.data,
-    quality: state.objectData?.quality,
-    fileName: PullTitleFromFirstLine(state.code || ''),
-    thunkDispatch,
-  })
-
-  editorMenuConfig.forEach(menu => 
-    menu.items.forEach(({shortcut, callback}) => 
-      useHotkeys(shortcut, callback), [state])
-  )
   
   return (<>
     <div className="flex justify-between bg-ch-gray-760 text-gray-100">
@@ -36,8 +17,12 @@ const EditorMenu = () => {
         <div className="grid grid-flow-col-dense gap-6 px-5">
           { editorMenuConfig.map(menu => (
             <Dropdown label={menu.label} disabled={menu.disabled} key={menu.label +"-dropdown"}>
-              { menu.items.map(itemConfig => (
-                <DropdownItem config={itemConfig} key={ menu.label +"-"+ itemConfig.label} />)
+              { menu.items.map(itemConfig => 
+                <itemConfig.component
+                  state={state}
+                  thunkDispatch={thunkDispatch}
+                  config={itemConfig}
+                  key={menu.label +"-"+ itemConfig.label } />
               ) }
             </Dropdown>
           )) }
@@ -56,43 +41,4 @@ const EditorMenu = () => {
   </>)
 }
 
-export default EditorMenu
-
-function DropdownItem({ config }) {
-  return (
-    <Menu.Item>
-      {({ active }) => (
-      <button
-        className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
-        onClick={config.callback}
-      >
-        {config.label}
-        {config.shortcutLabel && <span className="text-gray-400 pl-4">{ config.shortcutLabel }</span> }
-      </button>
-    )}
-    </Menu.Item>
-  )
-}
-
-function Dropdown({
-  label,
-  disabled,
-  children,
-}: {
-  label: string,
-  disabled: boolean,
-  children: React.ReactNode,
-}) {
-  return (
-    <div className="relative">
-      <Menu>
-        <Menu.Button className={"text-gray-100" + (disabled ? " text-gray-400 cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
-        { children &&
-        <Menu.Items className="absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700">
-          {children}
-        </Menu.Items>
-        }
-      </Menu>
-    </div>
-  )
-}
+export default EditorMenu

app/web/src/components/EditorMenu/menuConfig.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
-import Svg from 'src/components/Svg/Svg'
+import { DropdownItem } from './Dropdowns'
 
+export function cmdOrCtrl() {
+    return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
+}
 
 const fileMenuConfig = {
     name: 'file',
@@ -14,30 +16,51 @@ const fileMenuConfig = {
         {
             label: 'Save & Render',
             shortcut: 'ctrl+s, command+s',
-            shortcutLabel: <><CmdOrCtrl/> S</>,
-            // This is my main issue. How do I pass in a callback that relies on the hooks and state within the component?
-            // Put another way, how do I make the state and hooks used within a component configurable from outside the component itself?
-            callback: (e, /* { options } */) => {
-                // These do not work
-                // const handleRender = useRender()
-                // const saveCode = useSaveCode()
-                // handleRender()
-                // saveCode({ code: state.code })
-                e.preventDefault()
-                alert('Saving & Rendering!')
+            shortcutLabel: cmdOrCtrl() + ' S',
+            component: (props) => {
+                const { state, config } = props
+                const handleRender = useRender()
+                const saveCode = useSaveCode()
+                function onRender(e) {
+                    e.preventDefault()
+                    handleRender()
+                    saveCode({ code: state.code })
+                }
+
+                config.callback = onRender
+                
+                return <DropdownItem {...props} />
             },
         },
         {
             label: 'Download STL',
             shortcut: 'ctrl+shift+d, command+shift+d',
-            shortcutLabel: <><CmdOrCtrl/> Shift D</>,
-            callback: () => alert('Downloading STL!'),
+            shortcutLabel: cmdOrCtrl() + ' Shift D',
+            component: (props) => {
+                const { state, thunkDispatch, config } = props
+                const handleStlDownload = makeStlDownloadHandler({
+                    type: state.objectData?.type,
+                    ideType: state.ideType,
+                    geometry: state.objectData?.data,
+                    quality: state.objectData?.quality,
+                    fileName: PullTitleFromFirstLine(state.code || ''),
+                    thunkDispatch,
+                })
+
+                config.callback = handleStlDownload
+
+                return <DropdownItem {...props} />
+            }
         },
         {
             label: 'Cook Donut',
-            shortcut: 'ctrl+d, command+d',
-            shortcutLabel: <><CmdOrCtrl/> D</>,
-            callback: () => alert('Donut is cooked!'),
+            shortcut: 'ctrl+os+d',
+            shortcutLabel: cmdOrCtrl() + ' D',
+            component: (props) => {
+                const { config } = props
+                config.callback = () => alert('Donut is cooked!')
+                return <DropdownItem {...props} />
+            }
         }
     ]
 }
@@ -57,8 +80,12 @@ const viewMenuConfig = {
         {
             label: 'Reset layout',
             shortcut: 'ctrl+alt+r, command+alt+r',
-            shortcutLabel: <><CmdOrCtrl/> Alt R</>,
-            callback: () => alert('Resetting the layout!'),
+            shortcutLabel: cmdOrCtrl() + ' Alt R',
+            component: (props) => {
+                const { config, thunkDispatch } = props
+                config.callback = () => thunkDispatch({ type: 'resetLayout' })
+                return <DropdownItem {...props } />
+            }
         },
     ],
 }
@@ -82,8 +109,4 @@ export interface EditorMenuConfig {
     label: string,
     disabled: boolean,
     items: Array<EditorMenuItemConfig>,
-}
-
-function CmdOrCtrl() {
-    return <span> { /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl' }</span>
 }