Gereksinimler ve Ön Hazırlık

Projemize başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. 2026 standartlarında bir React projesi için Node.js'in en güncel LTS sürümünün yüklü olması gerekmektedir. Projemizde Markdown'ı HTML'e dönüştürmek için react-markdown kütüphanesini, düzenleme alanı için ise standart textarea bileşenini kullanacağız.

Kurulum için terminalinizi açın ve aşağıdaki komutları sırasıyla çalıştırarak projenizi oluşturun:

npx create-react-app markdown-editor
cd markdown-editor
npm install react-markdown

Bu komutlar, React projenizin iskeletini oluşturacak ve gerekli bağımlılıkları projenize dahil edecektir. react-markdown, Markdown metinlerini güvenli bir şekilde React bileşenlerine dönüştüren endüstri standardı bir kütüphanedir.

Markdown Editörünün Temel Bileşenini Oluşturma

Uygulamamızın ana mantığı, kullanıcının girdiği metni bir "state" (durum) içerisinde tutmak ve bu durumu react-markdown bileşenine aktarmaktır. React'in useState hook'u (kanca), metin içeriğini anlık olarak takip etmemizi sağlar.

Aşağıdaki kod örneği, temel editör yapısını ve metin giriş alanını göstermektedir:

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

function App() {
  const [markdown, setMarkdown] = useState('# Başlık\nBuraya yazmaya başlayın...');

  return (
    

       setMarkdown(e.target.value)} 
      />
      

        {markdown}
      
    
  );
}

Bu yapıda, textarea bileşenindeki her değişiklik setMarkdown fonksiyonunu tetikler. Böylece markdown değişkeni güncellenir ve ReactMarkdown bileşeni otomatik olarak yeniden render (çizim) edilerek önizlemeyi günceller.

Stil ve Düzenleme: CSS ile Arayüzü Güzelleştirme

İyi bir editör, sadece işlevsel değil, aynı zamanda kullanıcı dostu olmalıdır. Ekranı ikiye bölerek (split-pane) kullanıcıya yazarken görme imkanı sunmak, editörün kullanılabilirliğini artırır. CSS Grid veya Flexbox kullanarak bu düzeni sağlayabiliriz.

Aşağıdaki CSS kodları, editör ve önizleme alanını yan yana getirmek için kullanılabilir:

.editor-container {
  display: flex;
  height: 100vh;
}

textarea, .preview {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

textarea {
  border-right: 1px solid #ccc;
  resize: none;
}

Bu stil tanımlamaları, editörün tam ekran çalışmasını ve her iki panelin de bağımsız olarak kaydırılabilmesini sağlar. Kullanıcı deneyimi açısından, iki panelin genişliklerinin eşit olması düzenli bir görünüm oluşturur.

Gelişmiş Özellikler: Markdown Araç Çubuğu Ekleme

Kullanıcıların Markdown sözdizimini (syntax) ezberlemesine gerek kalmadan hızlıca biçimlendirme yapabilmeleri için bir araç çubuğu eklemek oldukça profesyonel bir yaklaşımdır. Kalın, italik veya liste gibi Markdown öğelerini metne ekleyen fonksiyonlar yazabiliriz.

Aşağıdaki örnekte, metne kalın (bold) formatı ekleyen bir buton mantığını görebilirsiniz:

const addBold = () => {
  setMarkdown(prev => prev + " **Kalın Metin** ");
};

// JSX içerisinde:
Kalın Yap

Bu fonksiyon, mevcut metnin sonuna Markdown kalın yazım işaretlerini ekler. Daha gelişmiş bir editörde, kullanıcının seçtiği metni saran bir mantık kurmak için selectionStart ve selectionEnd özelliklerini kullanabilirsiniz.

Güvenlik ve Performans Optimizasyonu

Markdown editörlerinde en büyük güvenlik riski, kullanıcının zararlı HTML veya JavaScript kodları (XSS - Cross Site Scripting) enjekte etmesidir. react-markdown kütüphanesi varsayılan olarak HTML etiketlerini devre dışı bırakır, ancak yine de dikkatli olunmalıdır.

Kritik Uyarı: Kullanıcıdan gelen girdileri asla doğrudan dangerouslySetInnerHTML ile render etmeyin. Her zaman güvenilir kütüphaneler kullanın ve girdi temizleme (sanitization) işlemlerini ihmal etmeyin.

Performans tarafında ise, her tuş vuruşunda render işleminin ağırlaşmaması için debounce (gecikmeli işlem) tekniği kullanılabilir. Bu, kullanıcının yazmayı bırakmasından kısa bir süre sonra önizlemenin güncellenmesini sağlar.

Markdown Editör Yöntemlerinin Karşılaştırılması

Sıkça Sorulan Sorular

Markdown editörü neden tercih edilmeli?

Markdown, HTML'e göre çok daha hızlı yazılır ve okunabilirliği yüksektir. İçerik üreticileri için karmaşık editörlerden ziyade, temiz bir Markdown alanı odaklanmayı artırır.

Mobil cihazlarda nasıl çalışır?

CSS medya sorguları (media queries) kullanarak ekran genişliği azaldığında editör ve önizleme alanını alt alta gelecek şekilde düzenleyebilirsiniz.

Özelleştirilmiş Markdown bileşenleri ekleyebilir miyim?

Evet, react-markdown içerisindeki components prop'u ile standart Markdown etiketlerini kendi React bileşenlerinizle (örneğin özel bir kod bloğu veya görsel bileşeni) değiştirebilirsiniz.

SEO açısından bir fark yaratır mı?

Markdown'ın HTML'e düzgün dönüştürülmesi, arama motorlarının içeriğinizi daha iyi indekslemesini sağlar. Semantik HTML etiketlerinin doğru kullanıldığından emin olun.

Veritabanına nasıl kaydedilir?

Markdown metnini ham haliyle (string) veritabanına kaydedin. HTML'e dönüştürme işlemini sadece ön yüzde (frontend) görüntüleme anında yapmanız, veritabanı boyutunu korumanızı sağlar.

Markdown Editörünü Yayına Alma (Deployment) ve Optimizasyon

Geliştirdiğiniz Markdown editörünü canlı bir web sitesinde yayınlamak, sadece kodunuzu bir sunucuya yüklemekten ibaret değildir. React uygulamanızın üretim ortamında (production) en yüksek performansla çalışması için bazı stratejik adımlar atmanız gerekir.

Vercel veya Netlify ile Hızlı Deployment

React projeleri için Vercel veya Netlify, statik site oluşturma ve sunucu tarafı işleme (SSR) yetenekleri sayesinde en popüler tercihlerdir. Projenizi GitHub üzerinden bağlayarak her "push" işleminde otomatik bir derleme (build) süreci başlatabilirsiniz.

Projenizi yayına almadan önce package.json dosyanızdaki build komutunun optimize edildiğinden emin olun:

// package.json
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Build işlemi sırasında npm run build komutunu çalıştırdığınızda, React tüm bileşenlerinizi küçültür (minification) ve gereksiz kodları temizleyerek build/ klasöründe tarayıcı dostu dosyalar oluşturur.

Markdown Editöründe Hata Ayıklama (Debugging) Stratejileri

Editörünüz karmaşıklaştıkça, özellikle canlı önizleme (live preview) sırasında oluşan senkronizasyon hataları veya XSS filtreleme sorunları ile karşılaşabilirsiniz. Hata ayıklama sürecini hızlandırmak için şu yöntemleri izleyin:

React DevTools ile Durum Takibi

Markdown metni her değiştiğinde state güncellenir. React DevTools kullanarak markdownText durumunun (state) doğru güncellenip güncellenmediğini "Components" sekmesi altından anlık olarak izleyebilirsiniz. Eğer metin güncelleniyor ancak önizleme değişmiyorsa, useEffect kancanızdaki bağımlılık dizisini (dependency array) kontrol edin.

Hata Yakalama Sınırları (Error Boundaries)

Markdown ayrıştırıcınız (parser) hatalı bir sözdizimi ile karşılaştığında tüm uygulamanın çökmesini engellemek için "Error Boundary" bileşenleri kullanın. Bu, kullanıcının yazdığı içeriğin bir kısmının bozuk olması durumunda bile editörün geri kalanının çalışmaya devam etmesini sağlar.

import React from 'react';

class MarkdownErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return 
Editör yüklenirken bir hata oluştu.
;
    }
    return this.props.children;
  }
}

İleri Seviye İpuçları: Kullanıcı Deneyimini Artırma

Profesyonel bir editör deneyimi sunmak için şu küçük ama etkili geliştirmeleri projenize dahil edebilirsiniz:

• Otomatik Kaydetme (Auto-save): useEffect kullanarak her 5 saniyede bir localStorage üzerine veriyi yedekleyin.
• Klavye Kısayolları: Ctrl+B veya Ctrl+I gibi kısayollarla seçili metni kalın veya italik yapacak fonksiyonlar ekleyin.
• Dosya Yükleme: Kullanıcının sürükle-bırak yöntemiyle resim dosyalarını Markdown içine eklemesini sağlayacak bir "image upload" arayüzü tasarlayın.
• Kelime Sayacı: Yazılan metnin uzunluğunu anlık olarak hesaplayıp alt bilgi (footer) kısmında gösterin.

Bu geliştirmeler, basit bir metin kutusunu tam teşekküllü bir içerik yönetim aracına dönüştürecektir. Kullanıcılarınızın yazdığı metinleri veritabanına göndermeden önce mutlaka DOMPurify gibi kütüphanelerle temizlediğinizden emin olun.

Sonuç

React ile bir Markdown editörü oluşturmak, bileşen tabanlı mimarinin gücünü anlamak için mükemmel bir projedir. Bu rehberde, temel bir editörden başlayarak özelleştirilebilir bir yapıya nasıl geçeceğinizi, güvenlik önlemlerini ve performans iyileştirmelerini ele aldık. Bir sonraki adım olarak, projenize yerel depolama (localStorage) ekleyerek kullanıcının yazdıklarını tarayıcı kapansa bile kaybetmemesini sağlayabilirsiniz.

Yasal Uyarı: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce güvenlik açıklarını (XSS vb.) kontrol etmeli ve güncel güvenlik yamalarını takip etmelisiniz. Yazılım geliştirme süreçlerinde oluşabilecek veri kayıplarından veya güvenlik ihlallerinden geliştirici sorumludur.