In the case of custom toolbars, modules->toolbar->handlers set the function will be error

`import React from ‘react’; import ReactQuill, { Quill } from ‘react-quill’; import ‘./quill.snow.css’;

const Size = Quill.import(‘formats/size’); Size.whitelist = [‘14px’, ‘16px’, ‘18px’, ‘20px’, ‘24px’, ‘32px’, ‘40px’, ‘72px’]; Quill.register(Size, true);

const Editor = (props: { note: { context: string; }; setContent: any; }) => { return ( <div id={‘editor-container’}> <div id="toolbar-container"> <span className={‘ql-formats’}> <button className={‘ql-header’} value={1}/> <button className={‘ql-header’} value={2}/> </span> <span className={‘ql-formats’}> <select defaultValue={‘14px’} className=“ql-size”> <option value="14px">14px</option> <option value="16px">16px</option> <option value="18px">18px</option> <option value="20px">20px</option> <option value="24px">24px</option> <option value="32px">32px</option> <option value="40px">40px</option> <option value="72px">72px</option> </select> </span> <span className={‘ql-formats’}> <button className={‘ql-bold’}/> <button className={‘ql-italic’}/> <button className={‘ql-underline’}/> <button className={‘ql-align’} value={‘center’} /> <button className={‘ql-strike’}/> <button className={‘ql-blockquote’}/> <button className={‘ql-code-block’}/> </span> <span className={‘ql-formats’}> <select className="ql-color"> {/<option value={‘#ffffff’}></option>/} </select> <select className="ql-background"> {/<option value={‘#ffffff’}></option>/} </select> </span> <span className={‘ql-formats’}> <button className={‘ql-indent’} value={‘-1’} /> <button className={‘ql-indent’} value={‘+1’} /> </span> <span className={‘ql-formats’}> <button className={‘ql-link’} /> <button className={‘ql-image’}/> <button className={‘ql-video’} /> </span> <span className={‘ql-formats’}> <button className={‘ql-clean’} /> </span> </div> <ReactQuill style={{height: “calc(100vh - 230px)”}} value={props.note.context} onChange={props.setContent} modules={{ toolbar: { container: ‘#toolbar-container’, handlers: { ‘image’: () => { console.log(1) }, } }, }} placeholder={“记录你的生活…”} /> </div> ) };

export default Editor;`

After each entry, The cursor is lost and an error is declared ‘quill.js:3195 addRange(): The given range isn’t in document.’

[leesama]

must use useCallback if you use module

[josevsalina]

My error was by the image handler, when I remove the handler work fine.

But in my case I need the color event handler and get the error