toolbar 'code-block', 'blockquote' is not working

[imki123]

I want to use them. How can i use them?

[gtgalone]

You should follow with custom options https://github.com/gtgalone/react-quilljs#custom-all-options :)

const theme = 'snow';

const modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike', 'code-block', 'blockquote'],
    ],
  };

const placeholder = 'Compose an epic...';

const formats = ['bold', 'italic', 'underline', 'strike', 'code-block', 'blockquote'];

const { quillRef } = useQuill({ theme, modules, formats, placeholder });

[imki123]

Wow. It's working after adding formats! Thank you. What does formats work?

[gtgalone]

Yes, That is important. You should let editor know how to use module with format. It required by quill.

[ahmed2m]

@gtgalone How do I create a handler for a custom format I added? In the codesandbox below I added 'redo' and 'undo' to the toolbar with custom icons and added them to formats, then configured the handlers in the useEffect but with no luck, I tried the quilljs way of defining the handlers in the toolbar object but no luck either. it doesn't call the handlers functions and logs the warning quill:toolbar ignoring attaching to nonexistent format undo

https://codesandbox.io/s/react-quilljsredo-undo-qqvtx

[gtgalone]

@Ahmeed2m

Thank you for using and issuing.

https://codesandbox.io/s/react-quilljsredo-undo-forked-r1co3?file=/src/App.js

you need to add default undo redo function in toolbar, when it initialize.

handlers: {
  undo: () => {},
  redo: () => {}
}

also change editor to quill

const undo = useCallback(() => {
  return quill.history.undo();
}, [quill]);

const redo = useCallback(() => {
  return quill.history.redo();
}, [quill]);