Open
Description
Feature Request: Add Fullscreen Mode Button for the Editor
Description:
To improve the usability and focus of the editor, we propose adding a fullscreen mode button. This will allow users to expand the editor to fullscreen, providing more space for writing and editing queries without distractions.
Proposed Solution:
- Add a fullscreen button (e.g., an icon or toggle) to the editor toolbar.
- Use the Fullscreen API (
document.fullscreenElement) to toggle fullscreen mode for the editor. - Ensure the fullscreen mode works across different browsers and devices.
- Style the button to match the application's design and provide visual feedback when fullscreen mode is active.
Example Implementation:
import { useState } from 'react';
import { FaExpand, FaCompress } from 'react-icons/fa'; // Icons for fullscreen and exit
function Editor() {
const [isFullscreen, setIsFullscreen] = useState(false);
const toggleFullscreen = () => {
const editorElement = document.getElementById('editor');
if (!isFullscreen) {
if (editorElement.requestFullscreen) {
editorElement.requestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
setIsFullscreen(!isFullscreen);
};
return (
<div id="editor" className="editor-container">
<div className="editor-toolbar">
<button onClick={toggleFullscreen}>
{isFullscreen ? <FaCompress /> : <FaExpand />}
</button>
</div>
<textarea className="editor-input" />
</div>
);
}
# Current State
