Przejdź do głównej zawartości

22. Edytor Markdown

Edytor Markdown z podglądem na żywo — użytkownik pisze w lewym panelu, wynik renderuje się w prawym. Zapis w localStorage.

// Użycie biblioteki 'marked' do renderowania Markdown
// npm install marked
import { marked } from 'marked';
import DOMPurify from 'dompurify'; // opcjonalne, ale zalecane
function MarkdownPreview({ content }) {
const html = useMemo(() => {
const rawHtml = marked(content);
return DOMPurify.sanitize(rawHtml); // usuwamy niebezpieczny HTML
}, [content]);
return (
<div
className="preview"
dangerouslySetInnerHTML={{ __html: html }}
/>
);
}
  • Split view: edytor (lewa) + podgląd (prawa)
  • Renderowanie Markdown z biblioteką marked
  • Autosave w localStorage (debounce 1s)
  • Licznik słów i znaków
Ocena: 3.0

Powodzenia!

Edytor Markdown to projekt bardzo przydatny w codziennej pracy deweloperskiej. dangerouslySetInnerHTML jest jednym z niewielu uzasadnionych przypadków użycia tej właściwości — ale koniecznie sanityzuj HTML przez DOMPurify! Pasek narzędzi (Bold, Italic) to wstawienie tekstu w odpowiednie miejsce cursora — sprawdź selectionStart i selectionEnd na elemencie textarea.