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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook';
+import { makeStyles } from '@material-ui/core/styles'
+import Dialog from '@material-ui/core/Dialog'
+import { editorMenuConfig } from './menuConfig';
+
+const SHORTCUT = 'ctrl+/, command+/'
+
+const useStyles = makeStyles({
+  root: {
+    transform: `translate3d(0,0,50px)`,
+  },
+})
+
+const AllShortcutsModal = () => {
+    const classes = useStyles()
+    const [open, setOpen] = useState(false)
+    useHotkeys(SHORTCUT, () => setOpen(!open), [open])
+
+    return (
+        <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 ? (
+            <section key={"allshortcuts-"+menu.name}
+            className="my-6">
+                <h3 className="text-xl border-b-2 pb-2 mb-2">{ menu.label }</h3>
+            { menu.items.map(item => (
+                <div className="flex gap-8 justify-between" key={"allshortcuts-"+menu.name+"-"+item.label}>
+                    <p>{ item.label }</p>
+                    <span className="text-right font-fira-code text-ch-gray-400">{ item.shortcutLabel }</span>
+                </div>
+            ))}
+            </section>
+        ) : <></>)}
+        </div>
+        </Dialog>
+    )
+    }
+
+
+    export default AllShortcutsModal

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

@@ -7,15 +7,12 @@ 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 AllShortcutsModal from './AllShortcutsModal'
 
 const EditorMenu = () => {
   const handleRender = useRender()
   const saveCode = useSaveCode()
   const { state, thunkDispatch } = useIdeContext()
-  const onRender = () => {
-    handleRender()
-    saveCode({ code: state.code })
-  }
   const handleStlDownload = makeStlDownloadHandler({
     type: state.objectData?.type,
     ideType: state.ideType,
@@ -30,7 +27,7 @@ const EditorMenu = () => {
       useHotkeys(shortcut, callback), [state])
   )
   
-  return (
+  return (<>
     <div className="flex justify-between bg-ch-gray-760 text-gray-100">
       <div className="flex items-center h-9 w-full cursor-grab">
         <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
@@ -38,8 +35,10 @@ const EditorMenu = () => {
         </div>
         <div className="grid grid-flow-col-dense gap-6 px-5">
           { editorMenuConfig.map(menu => (
-            <Dropdown label={menu.label} disabled={menu.disabled}>
-              { menu.items.map(itemConfig => <DropdownItem config={itemConfig} key={ menu.label +"-"+ itemConfig.label} />) }
+            <Dropdown label={menu.label} disabled={menu.disabled} key={menu.label +"-dropdown"}>
+              { menu.items.map(itemConfig => (
+                <DropdownItem config={itemConfig} key={ menu.label +"-"+ itemConfig.label} />)
+              ) }
             </Dropdown>
           )) }
         </div>
@@ -53,69 +52,13 @@ const EditorMenu = () => {
       </div>
       <CadPackage cadPackage={state.ideType} className="px-3" />
     </div>
-  )
+    <AllShortcutsModal/>
+  </>)
 }
 
 export default EditorMenu
 
-function FileDropdown({ handleRender, handleStlDownload }) {
-  return (
-    <Dropdown name="File">
-      <Menu.Item>
-        {({ active }) => (
-          <button
-            className={`${active && 'bg-gray-600'} px-2 py-1`}
-            onClick={handleRender}
-          >
-            Save &amp; Render{' '}
-            <span className="text-gray-400 pl-4">
-              {/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? (
-                <>
-                  <Svg
-                    name="mac-cmd-key"
-                    className="h-3 w-3 inline-block text-left"
-                  />
-                  S
-                </>
-              ) : (
-                'Ctrl S'
-              )}
-            </span>
-          </button>
-        )}
-      </Menu.Item>
-      <Menu.Item>
-        {({ active }) => (
-          <button
-            className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
-            onClick={handleStlDownload}
-          >
-            Download STL
-          </button>
-        )}
-      </Menu.Item>
-    </Dropdown>
-  )
-}
-
-function ViewDropdown({ handleLayoutReset }) {
-  return (
-    <Dropdown name="View">
-      <Menu.Item>
-        {({ active }) => (
-          <button
-            className={`${active && 'bg-gray-600'} px-2 py-1`}
-            onClick={handleLayoutReset}
-          >
-            Reset layout
-          </button>
-        )}
-      </Menu.Item>
-    </Dropdown>
-  )
-}
-
-function DropdownItem(config) {
+function DropdownItem({ config }) {
   return (
     <Menu.Item>
       {({ active }) => (
@@ -143,7 +86,7 @@ function Dropdown({
   return (
     <div className="relative">
       <Menu>
-        <Menu.Button className={"text-gray-100" + (disabled ? "cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
+        <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}

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

@@ -1,47 +1,75 @@
 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'
 
 
-export const fileMenuConfig = [
-    {
-        label: 'Cook Donut',
-        shortcut: 'ctrl+d, command+d',
-        shortcutLabel: <><CmdOrCtrl/> D</>,
-        callback: () => alert('Donut is cooked!'),
-    }
-]
+const fileMenuConfig = {
+    name: 'file',
+    label: 'File',
+    disabled: false,
+    items: [
+        {
+            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!')
+            },
+        },
+        {
+            label: 'Download STL',
+            shortcut: 'ctrl+shift+d, command+shift+d',
+            shortcutLabel: <><CmdOrCtrl/> Shift D</>,
+            callback: () => alert('Downloading STL!'),
+        },
+        {
+            label: 'Cook Donut',
+            shortcut: 'ctrl+d, command+d',
+            shortcutLabel: <><CmdOrCtrl/> D</>,
+            callback: () => alert('Donut is cooked!'),
+        }
+    ]
+}
 
-export const viewMenuConfig = [
-    {
-        label: 'Reset layout',
-        shortcut: 'ctrl+alt+r, command+alt+r',
-        shortcutLabel: <><CmdOrCtrl/> Alt R</>,
-        callback: () => alert('Resetting the layout!'),
-    }
-]
+const editMenuConfig = {
+    name: 'edit',
+    label: 'Edit',
+    disabled: true,
+    items: [],
+}
+
+const viewMenuConfig = {
+    name: 'view',
+    label: 'View',
+    disabled: false,
+    items: [
+        {
+            label: 'Reset layout',
+            shortcut: 'ctrl+alt+r, command+alt+r',
+            shortcutLabel: <><CmdOrCtrl/> Alt R</>,
+            callback: () => alert('Resetting the layout!'),
+        },
+    ],
+}
 
 export const editorMenuConfig = [
-    {
-        name: 'file',
-        label: 'File',
-        disabled: false,
-        items: fileMenuConfig,
-    },
-    {
-        name: 'edit',
-        label: 'Edit',
-        disabled: true,
-        items: [],
-    },
-    {
-        name: 'view',
-        label: 'View',
-        disabled: false,
-        items: viewMenuConfig,
-    },
-
+    fileMenuConfig,
+    editMenuConfig,
+    viewMenuConfig,
 ]
 
+// TODO: set up these types properly. The callback is especially giving me trouble.
 export interface EditorMenuItemConfig {
     label: string,
     shortcut: string,
@@ -57,12 +85,5 @@ export interface EditorMenuConfig {
 }
 
 function CmdOrCtrl() {
-    return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? (
-        <Svg
-        name="mac-cmd-key"
-        className="h-3 w-3 inline-block text-left"
-        />
-      ) : (
-        <span>'Ctrl'</span>
-      )
+    return <span> { /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl' }</span>
 }