20 - Note-Taking App with Markdown Support

Description

Create a React application that allows users to take notes with rich text editing and Markdown support, including a live preview of formatted text while typing. The application should also allow users to categorize notes using folders or tags, and include search functionality for finding notes by title or content.

Algorithm

1. Create a state variable to store the notes and their content.

2. Define a function to handle the creation of new notes.

3. Define a function to handle the editing of existing notes.

4. Define a function to handle the rendering of the note preview.

5. Define a function to handle the categorization of notes using folders or tags.

6. Define a function to handle the searching of notes by title or content.

Classes

• Note: A component that represents a single note.

• NoteEditor: A component that allows users to edit notes with rich text editing and Markdown support.

• NotePreview: A component that renders the live preview of the formatted text.

• NoteList: A component that renders the list of notes and allows users to categorize and search notes.

Code

Note.js

import React from 'react';

function Note({ note, onEditNote }) {
  return (
    <div>
      <h2>{note.title}</h2>
      <p>{note.content}</p>
      <button onClick={() => onEditNote(note)}>Edit</button>
    </div>
  );
}

export default Note;

NoteEditor.js

import React, { useState } from 'react';
import MarkdownEditor from 'markdown-editor';

function NoteEditor({ note, onEditNote }) {
  const [content, setContent] = useState(note.content);

  const handleEditNote = () => {
    onEditNote({ ...note, content });
  };

  return (
    <div>
      <MarkdownEditor
        value={content}
        onChange={(value) => setContent(value)}
      />
      <button onClick={handleEditNote}>Save</button>
    </div>
  );
}

export default NoteEditor;

NotePreview.js

import React from 'react';
import Markdown from 'markdown';

function NotePreview({ note }) {
  const content = Markdown.parse(note.content);

  return (
    <div>
      <h2>{note.title}</h2>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

export default NotePreview;

NoteList.js

import React, { useState } from 'react';
import Note from './Note';
import NoteEditor from './NoteEditor';
import NotePreview from './NotePreview';

function NoteList() {
  const [notes, setNotes] = useState([
    { id: 1, title: 'Note 1', content: 'This is note 1' },
    { id: 2, title: 'Note 2', content: 'This is note 2' },
  ]);
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearchNotes = (searchTerm) => {
    const filteredNotes = notes.filter((note) =>
      note.title.includes(searchTerm) || note.content.includes(searchTerm)
    );
    setNotes(filteredNotes);
  };

  return (
    <div>
      <input
        type="search"
        value={searchTerm}
        onChange={(event) => setSearchTerm(event.target.value)}
      />
      <button onClick={() => handleSearchNotes(searchTerm)}>Search</button>
      <ul>
        {notes.map((note) => (
          <li key={note.id}>
            <Note note={note} onEditNote={(note) => handleEditNote(note)} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default NoteList;

Explanation

The Note component represents a single note, and the NoteEditor component allows users to edit notes with rich text editing and Markdown support. The NotePreview component renders the live preview of the formatted text. The NoteList component renders the list of notes and allows users to categorize and search notes.

Possible Future Enhancements

• Add more features to the note-taking app (e.g., due dates, reminders).

• Improve the user interface and user experience.

• Add authentication and authorization.

• Allow users to create and manage their own folders and tags.

• Display the number of notes in each folder or tag.

• Add a feature to export notes to a file or print them.