Shortcuts missing when rendering custom textarea

[saleemameen]

When I render a custom textarea, I'm not quite sure how you can make the shortcuts apply. I've tried triggering the method from the onChange handler on the new textarea, but I get Argument of type 'ChangeEvent' is not assignable to parameter of type 'React.KeyboardEvent | KeyboardEvent'.

Obviously this is because the onChange event is not the correct place to execute the function, but even when I try using onKeyDown or onKeyUp method, it still does not apply the shortcuts. Any thoughts on how I can apply the shortcuts to a custom textarea? (Note: I'll eventually be creating a custom component here, but I'm trying to make it work on the most basic example first)

<div className="markdown-container" data-color-mode="light">
	<MDEditor
		textareaProps={{
			placeholder: "Write in markdown",
		}}
		value={markdown}
		onChange={handleChange}
		onPaste={async (event) => {
			await onImagePasted(event.clipboardData, setMarkdown);
		}}
		previewOptions={{
			remarkPlugins: [],
			rehypePlugins: [[rehypeSanitize]],
			rehypeRewrite(node, index, parent) {
				if (node.type === 'element' && node.tagName === 'a') {
					node.properties = { ...node.properties, target: '_blank' };
				}
			},
		}}
		components={{
			textarea: (props, opts) => {
				const { dispatch, onChange, shortcuts } = opts;
				return (
					// @ts-ignore
					<textarea 
                                              {...props} 
                                              onChange={(e) => {
                                                  if (dispatch) dispatch({ markdown: e.target.value });
                                                  if (onChange) onChange(e);
                                                  //~~~~~~THIS LINE BELOW DOES NOT WORK~~~~~
                                                  if (shortcuts) shortcuts(e, commandsList);
                                              }}
                                          />
				);
			},
		}}
		commands={commandsList}
	/>
</div>

[saleemameen]

All good, I figured it out :) If anyone else is interested, you just need to grab the existing commands / commandsOrchestrator from the context exposed and then you can pass it to the shortcuts inside onKeyDown handler:

<MDEditor
    value={markdown}
    onChange={handleChange}
    commands={commandsList}
    components={{
	    textarea: (props, opts) => {
		    const { dispatch, onChange, useContext, shortcuts } = opts;
		    return (
			    // @ts-ignore
			    <textarea
				    {...props}
				    onKeyDown={(e) => {
					    if (shortcuts && useContext) {
						    const { commands, commandOrchestrator } = useContext;
						    if (commands) {
							    shortcuts(e, commands, commandOrchestrator);
						    }
					    }
				    }}
				    onChange={(e) => {
					    if (onChange) onChange(e);
				    }}
			    />
		        );
	        },
        }}
/>