He estado trabajando en la creación de un clon de noción y estoy atascado en la función en la que, si hace clic en "/", aparece un menú que ofrece opciones para cambiar el bloque actual al preferido que selecciona el usuario. Puedo para cambiar el bloque a través del menú, pero tengo que usar el mouse para seleccionar una opción

 const allowedTags = [ { label: "h1", value: "heading-one", }, { label: "h2", value: "heading-tw0", }, { label: "quote", value: "block-quote", }, { label: "numbered", value: "numbered-list", }, { label: "bullets", value: "bulleted-list", }, { label: "p", value: "paragraph", }, ]; const renderMenu = () => { return ( <div className="editor__menu" style={coordinates}> {allowedTags.map((item, key) => { return ( <p className="editor__menu--item" key={key} onClick={() => { CustomEditor.toggleBlock(editor, item.value); setMenu(false); }} > {item.label} </p> ); })} </div> ); };

Aquí estoy mapeando las etiquetas permitidas y creando una lista En el editor, si alguien escribe "/", entonces debería aparecer este menú que es manejado por onKeyDown()

 onKeyDown={(event) => { if (event.key === "/") { openMenu(); } }

¡Todo funciona completamente bien! Pero lo único en lo que estoy atascado es que no puedo concentrarme en el menú y controlarlo a través de las teclas del teclado, ¿alguien puede ayudarme con esto?