Is it possible to dispatch action through keyboard handler in React-Quill?

17 views Asked by At

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?

0

There are 0 answers