App Component

The App component is the root component of the application. It sets up the main layout and state management for the editor.

Structure

The component is divided into three main sections:

1. Toolbar: A Toolbar component that provides controls for the editor, such as toggling the minimap and word wrap, and saving the documentation.
2. Editor: An Editor component where the user can write Markdown.
3. Preview: A Preview component that displays the rendered HTML of the Markdown from the editor.

State Management

The App component manages the following state:

• markdown: The current Markdown content of the editor.
• minimapEnabled: A boolean to control the visibility of the minimap in the editor.
• wordWrapEnabled: A boolean to control word wrapping in the editor.

These state variables are passed down as props to the Toolbar, Editor, and Preview components.

Code Breakdown

import { useState } from 'react';
import Editor from './components/Editor';
import Preview from './components/Preview';
import Toolbar from './components/Toolbar';
import { Toaster } from 'sonner';

// Initial markdown content for demonstration
const initialMarkdown = `# Welcome to the Markdown Editor
...`;

function App() {
  const [markdown, setMarkdown] = useState(initialMarkdown);
  const [minimapEnabled, setMinimapEnabled] = useState(true);
  const [wordWrapEnabled, setWordWrapEnabled] = useState(true);

  return (
    <div className="flex h-screen flex-col bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-50">
      <Toolbar
        minimapEnabled={minimapEnabled}
        setMinimapEnabled={setMinimapEnabled}
        wordWrapEnabled={wordWrapEnabled}
        setWordWrapEnabled={setWordWrapEnabled}
        markdown={markdown}
        setMarkdown={setMarkdown}
      />
      <div className="flex flex-1 overflow-hidden">
        <div className="w-1/2 border-r border-zinc-200 dark:border-zinc-800">
          <Editor
            value={markdown}
            onChange={setMarkdown}
            minimapEnabled={minimapEnabled}
            wordWrapEnabled={wordWrapEnabled}
          />
        </div>
        <div className="w-1/2 overflow-auto bg-white dark:bg-zinc-950">
          <Preview markdown={markdown} />
        </div>
      </div>
      <Toaster position="bottom-right" />
    </div>
  );
}

export default App;

initialMarkdown

A string constant that provides the initial Markdown content when the application loads. This is useful for demonstrating the editor's features to new users.

useState

The useState hook from React is used to manage the state of the application.

• markdown: Stores the Markdown text. It is initialized with initialMarkdown.
• minimapEnabled: A boolean state to show or hide the editor's minimap. Default is true.
• wordWrapEnabled: A boolean state to enable or disable word wrapping in the editor. Default is true.

Layout

The main layout is a flex container that fills the entire screen (h-screen). The Toolbar is at the top, and the editor and preview panes are arranged horizontally below it. The Toaster component from the sonner library is used to display notifications.