I have a chat input created with React-Quill and I would like to change the behavior of 'Enter' key press - from adding a new line to dispatching an action. However for some reason I am unable to do so - see this playground
Code is here:
function Editor() {
const [code, setCode] = useState("initial text");
const [fakeStore, fakeDispatch] = useState("nothing");
const send = (text) => {
fakeDispatch(text);
};
const modulesSend = {
keyboard: {
bindings: {
custom: {
key: "Enter",
handler: send,
},
},
},
};
const memoModulesSend = useMemo(
() => ({
keyboard: {
bindings: {
custom: {
key: "Enter",
handler: send,
},
},
},
}),
[],
);
const handleProcedureContentChange = (content, delta, source, editor) => {
setCode(content);
};
return (
<>
<p>{fakeStore}</p>
1
<ReactQuill
theme="snow"
modules={modulesSend}
onChange={handleProcedureContentChange}
/>
2
<ReactQuill
theme="snow"
defaultValue={code}
modules={memoModulesSend}
onChange={handleProcedureContentChange}
/>
</>
);
}
I know that modules sometimes need memoization, but it didn't help here. Why does the browser crash when the handler calls a normal function in body of the component?