Skip to main content

Toolbar Component

The Toolbar component provides the main user controls for the Markdown editor. It includes functionality for file operations, editor settings, and application information.

Props​

  • minimapEnabled: boolean: The current state of the minimap.
  • setMinimapEnabled: (enabled: boolean) => void: Callback to toggle the minimap.
  • wordWrapEnabled: boolean: The current state of word wrap.
  • setWordWrapEnabled: (enabled: boolean) => void: Callback to toggle word wrap.
  • markdown: string: The current Markdown content.
  • setMarkdown: (value: string) => void: Callback to update the Markdown content.

Features​

File Operations​

  • New Document: Clears the current editor content after a confirmation prompt.
  • Load Document: Opens a file dialog to load a .md, .markdown, or .txt file into the editor.
  • Save Document: Downloads the current editor content as a document.md file.
  • Copy Markdown: Copies the current Markdown content to the clipboard.

Editor Settings​

  • Toggle Minimap: A toggle button to show or hide the editor's minimap.
  • Toggle Word Wrap: A toggle button to enable or disable word wrapping in the editor.
  • Theme Toggle: A button to switch between light and dark themes.

Application Information​

  • About Sheet: A button that opens a side sheet with information about the application and its features.

Code Breakdown​

// ... imports

const Toolbar: React.FC<ToolbarProps> = ({ ...props }) => {
  const [copied, setCopied] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleSave = () => { /* ... */ };
  const handleLoadFile = () => { /* ... */ };
  const handleFileChange = (event) => { /* ... */ };
  const handleCopyMarkdown = () => { /* ... */ };
  const handleNewDocument = () => { /* ... */ };

  return (
    <div className="flex items-center justify-between ...">
      {/* File Operations */}
      <div className="flex items-center space-x-2">
        {/* New, Load, Save, Copy Buttons */}
      </div>

      {/* Editor Settings */}
      <div className="flex items-center space-x-2">
        {/* Minimap and Word Wrap Toggles */}
        <ThemeToggle />
        {/* About Sheet Trigger */}
      </div>
    </div>
  );
};
  • fileInputRef: A useRef hook to access the hidden file input element for loading files.
  • handleSave: Creates a Blob from the Markdown content and generates a downloadable link.
  • handleLoadFile: Programmatically clicks the hidden file input to open the file dialog.
  • handleFileChange: Reads the selected file using FileReader and updates the editor content.
  • handleCopyMarkdown: Uses the navigator.clipboard API to copy the Markdown to the clipboard.
  • handleNewDocument: Reloads the page to start with a fresh document, after a confirmation.
  • UI Components: The toolbar is built using components from lucide-react for icons and custom UI components like Button, Toggle, and Sheet for its structure and functionality.