I am using QuillJS 1.3. Since QuillJS natively doesn't provide / support full-screen mode / feature in toolbar, I created one and handled the full-screen logic from outside. Following is the code (I am using ReactJS):
useEffect(() => {
const fullScreenChangeEventHandler = () => {
if (document.fullscreenElement) {
setIsFullScreen(true);
} else {
setIsFullScreen(false);
}
};
const { current } = textEditorContainerRef;
if (current) {
current.addEventListener('fullscreenchange', fullScreenChangeEventHandler);
}
return () => {
current.removeEventListener('fullscreenchange', fullScreenChangeEventHandler);
};
}, []);
const handleFullScreen = () => {
if (!document.fullscreenElement) {
textEditorContainerRef.current.requestFullscreen().catch((err) => {
console.error('Failed to init the full screen for text editor ', err);
});
} else if (document.exitFullscreen) {
document.exitFullscreen().catch((err) => {
console.error('Failed to exit full screen text editor ', err);
});
}
};
Regardless of with or without ReactJS, I found this problem with official quilljs website as well. (Go to quilljs.com and open the devtool for experiment).
The problem with full-screen mode (only in chromium browser such as Chrome and Edge), is that the toggle behaviour of some of inline blots e.g. Bold, Italic, Underline and Strike do not work. That is, Once selection turns into Bold, clicking again on Bold button in toolbar doesn't reset it back. The toggle behaviour however works fine in normal mode i.e. non full-screen mode. I have also reported an issue on quilljs repository, where you can find more or less detailed information with screen recording: https://github.com/quilljs/quill/issues/3713
On a closer look, the issue is apparently looks like associated with inner SVG icon in toolbar buttons. I am not pretty much sure why though, but when you try to click slightly away from icon (but on the button), then toggle works just fine. Any idea what could go wrong here ?
