React Quill - How to prevent default behaviour of enter key?

[frdomovic]

React Quill - How to prevent default behaviour of enter key?

Using ReactQuill v2.0.0-beta.2 or v2.0.0

  onKeyDown(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      return false; // does nothing
    }
  ...
   <ReactQuill onKeyDown={onKeyDown.bind(this)} ... />

Doesn't prevent default behaviour and while using bindings like this:

<ReactQuill
      modules={{
        keyboard: {
          bindings: {
                  enter: {
                      key: 13,
                      handler: () => {/* do nothing */}
                  }
              }
      }
      }}
     ...
    />

Causes TypeError: Cannot read properties of undefined (reading 'delta')

[frdomovic]

see 919

[tchen-l]

try this

<div
  onKeyDownCapture={(e) => {
    if (e.code === 'Enter') {
      e.preventDefault()
    }
  }}
>
  <ReactQuill />
</div>

[Hujinna]

try this

<div
  onKeyDownCapture={(e) => {
    if (e.code === 'Enter') {
      e.preventDefault()
    }
  }}
>
  <ReactQuill />
</div>

It wokers well.

const modules = useMemo(
   () => ({
     toolbar: false,
     keyboard: {
       bindings: {
         linebreak: {
           key: 13,
           shiftKey: true,
           handler: (range: { index: number }) => {
             const editor = ReactQuillRef.current?.getEditor();
             editor?.setSelection(range.index, 'silent');
             editor?.insertText(range.index, '\n', 'user');
             editor?.setSelection(range.index + 1, 'silent');
             editor?.format('linebreak', true, 'user');
           },
        },
   }),
  [ReactQuillRef]
 );

 const handleKeyDown = (e) => {
   if (e.keyCode === 13 && (e.shiftKey || e.metaKey || e.ctrlKey)) {
     console.log('换行');
   } else if (e.code === 'Enter' && !isTyping) {
     e.preventDefault();
     e.stopPropagation();
     handleSend();
   }
 };

<div
     onKeyDown={handleKeyDown}
     onCompositionStart={() => setIsTyping(true)}
     onCompositionEnd={() => setIsTyping(false)}
   >
     <ReactQuill
       ref={ReactQuillRef}
       theme="snow"
       value={text}
       formats={['bold', 'italic', 'underline', 'video', 'image', 'link']}
       modules={modules}
       onChange={setText}
     />
</div>