Shortcuts missing when rendering custom textarea
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 201
- Avg merge
- 12m
- Merged PRs (30d)
- 1
Description
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>
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the MDEditor components.textarea customization shown in the issue and trace how opts.shortcuts receives keyboard events. Compare the event types used by onChange, onKeyDown, and onKeyUp; done means shortcuts work in the custom textarea without the reported type error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100