search

Irev-Dev / cadhub

We're out to raise awareness and put CodeCAD on the map. The success of CadHub can be measured by the amount it promotes the use of CodeCAD within the mechanical/manufacturing industry and the strength the CadHub community.
https://cadhub.xyz
GNU General Public License v3.0
319 stars 60 forks source link

Initial keyboard shortcuts configuration implementation #496

Closed franknoirot closed 3 years ago

franknoirot commented 3 years ago

Creates a system for adding new IDE Editor menus and menu items, as well as keyboard shortcuts for those items.

Add a menu item to an existing menu

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

  2. Identify the config for the menu you want to add to: at time of writing there are fileMenuConfig, editMenuConfig, and viewMenuConfig

  3. Add an object to the items array of the config, matching the EditorMenuItemConfig type. The order of this array determines the order of the menu's items within the Editor. The component property must return a React component, and has access to state, thunkDispatch, and the rest of the config of the item. Within the React component, config.callback must be set to a function. Typically the DropdownItem component is used for menu items, but any React component that integrates useHotkeys() could work.

  4. Be sure to check that any keyboard shortcuts defined on these items are not already taken by another item (TODO write tests for this?)

Add a menu to the Editor

  1. Create a config object (naming convention is [nameOfMenu]MenuConfig that meets the criteria for the EditorMenuConfig type.
  2. Add any needed menu items within the config's items array
  3. Add the menu to the editorMenuConfig array. The order of this array determines the order of the menus within the Editor.
franknoirot commented 3 years ago

Hey @Irev-Dev I messaged on Discord about this but I'm sorry I'm really not sure how to merge your branch with tweaks into this. I know you had a corrected implementation of my EditorMenuItemConfig type and a few other things. Is there a more elegant way to pick out those parts with a merge of some sort?

franknoirot commented 3 years ago

Yup so I just implemented this concept 896baf0#r56024396 except I just copied the menu entirely, tested it with the menu reset, I can use that hotkey straight away on page load. Though I did have a problem with the monaco edit swallowing the hotkeys if I were focused on it.

It's definitely somewhat hacky bit I don't see a problem with is having a menu thats not visible permanently in the dom, for what these components are they shouldn't cause any performance issues.

Diff here: d0b2f49

Display: none (hidden tailwind class) should also hide this fake menu from screen readers 👍

This was a great workaround! I found a way to make the original MenuItems always render and only visually/audio show/hide here, which works very similarly: https://headlessui.dev/react/menu#showing-hiding-the-menu

Irev-Dev commented 3 years ago

I found a way to make the original MenuItems always render . . .

Nice, that's a much better approach.

Irev-Dev commented 3 years ago

Live now.