Closed franknoirot closed 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?
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
I found a way to make the original MenuItems always render . . .
Nice, that's a much better approach.
Live now.
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
Open
app/web/src/components/EditorMenu/menuConfig.tsx
Identify the config for the menu you want to add to: at time of writing there are
fileMenuConfig
,editMenuConfig
, andviewMenuConfig
Add an object to the
items
array of the config, matching theEditorMenuItemConfig
type. The order of this array determines the order of the menu's items within the Editor. Thecomponent
property must return a React component, and has access tostate
,thunkDispatch
, and the rest of theconfig
of the item. Within the React component,config.callback
must be set to a function. Typically theDropdownItem
component is used for menu items, but any React component that integratesuseHotkeys()
could work.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
[nameOfMenu]MenuConfig
that meets the criteria for theEditorMenuConfig
type.items
arrayeditorMenuConfig
array. The order of this array determines the order of the menus within the Editor.