Metin İşlemci Mimarisi: Temel İlkeler ve Katmanlar

Modern bir metin işlemcinin temel mimarisi, veri modeli (belge) ile görsel temsili arasında sıkı bir ayrım üzerine kuruludur. Hızlı ve genişletilebilir bir editör oluşturmanın anahtarı; içeriği depolamak için ağaç yapılı veya doğrusal bir veri yapısı kullanmak, değişikliklerin kademeli olarak render edilmesi ve bağımsız bir düzenleme mantığı katmanı (komutlar, eylem geçmişi) bulundurmaktır. Bu yaklaşım, sistemin çekirdeğini yeniden yazmadan ortak düzenleme, karmaşık biçimlendirme ve çeşitli formatlara dışa aktarma gibi özelliklerin uygulanmasını mümkün kılar.

Temel Mimari Katmanları

Editörün bakımı kolay kalması için kodu bağımsız modüllere ayırmak gerekir. Her katman kendi görevini çözer ve komşularıyla net arayüzler aracılığıyla etkileşime girer.

1. Sunum Katmanı (View/UI): Metnin çizilmesinden, fare ve klavye olaylarının işlenmesinden, imleç yönetimi ve seçimden sorumludur. Web ortamında bu contenteditable, Canvas veya sanal DOM olabilir.
2. Belge Modeli (Model): "Tek gerçek kaynak". Metin yapısını, stilleri ve meta verileri saklar. Metnin ekranda nasıl görüntülendiğinden bağımsızdır.
3. Düzenleme Kontrolcüsü (Controller/Engine): Kullanıcı komutlarını (karakter girişi, kalın yazı, yapıştırma) alır ve modele uygular. İşlem mantığı burada bulunur.
4. Servisler ve Eklentiler: Dosya kaydetme, dışa aktarma (PDF, HTML), yazım denetimi veya sözdizimi vurgulama için modüller.

Belge Modeli: Metin Nasıl Saklanır?

Veri yapısının seçimi editörün yeteneklerini belirler. İki temel yaklaşım vardır:

Düz Yapı (String + Ofsetler)

Metin tek bir uzun dize veya karakter dizisi olarak saklanır. Öğelerin konumları indekslerle belirlenir.

• Artıları: Uygulama basitliği, düşük bellek tüketimi.
• Eksileri: Blok biçimlendirmeyi (başlıklar, listeler) uygulamak zordur, büyük dosyaların başına ekleme işlemleri yavaştır.
• Nerede Kullanılır: Basit tek satırlı giriş alanları, zengin biçimlendirme içermeyen kod editörleri.

Ağaç Yapısı (Document Object Model)

Belge bir düğüm ağacı olarak temsil edilir. Kök, blokları (paragraflar, başlıklar) içerir; bunlar da satır içi öğeleri (metin, bağlantılar, kalın yazı) içerir.

• Artıları: Karmaşık biçimlendirmeye doğal destek, HTML/Markdown'a seri hale getirme kolaylığı.
• Eksileri: İmleç yönetimi ve konum hesaplamaları daha zordur.
• Nerede Kullanılır: WYSIWYG editörler, belge işlemciler (Word veya Notion gibi).

Düğüm Yapısı Örneği

{
  "type": "paragraph",
  "children": [
    { "type": "text", "value": "Merhaba, ", "bold": false },
    { "type": "text", "value": "dünya", "bold": true }
  ]
}

Durum Yönetimi ve Geri Al/Yinele

Değişiklik geçmişinin uygulanması kritik bir aşamadır. Her tuşa basışta belgenin tam bir kopyasını saklamak bellek açısından verimsizdir.

Geçmiş Uygulama Stratejileri

Performans ve Render

Metin işlemcilerin ana sorunu, büyük belgelerde metin girerken yaşanan gecikmelerdir. Her tuşa basışta tüm belgeyi yeniden çizerseniz, arayüz donar.

Optimizasyon Teknikleri

1. Kademeli Render: Sadece değişen DOM bölümlerini güncelleyin. Uzun belgeler için sanallaştırma kullanın: sadece görünür ekran alanını (viewport) render edin, geri kalan içeriği bellekte tutun.
2. Ağır İşlerin Debounce Edilmesi: Yazım denetimi, eşleşme araması veya karmaşık sözdizimi vurgulama, giriş akışını engellememek için asenkron olarak ve gecikmeli yapılmalıdır.
3. Web Workers: İşaretleme ayrıştırma ve ağır hesaplamaları ayrı iş parçacıklarına taşıyarak ana UI iş parçacığının yanıt verebilir kalmasını sağlayın.

Güvenlik ve Veri Doğrulama

Kullanıcı içeriğiyle çalışırken, özellikle HTML'ye dışa aktarma öngörülüyorsa, XSS saldırılarına karşı korunmak önemlidir.

• Giriş Temizleme: HTML içe aktarırken veya panodan yapıştırırken verileri tehlikeli etiketlerden (<script>, onerror vb.) arındırın.
• Yapı Doğrulama: Belge modeli bütünlüğü garanti etmelidir. Örneğin, bir list_item elemanı list dışında var olamaz. Herhangi bir yapı ihlali otomatik olarak düzeltilmeli veya reddedilmelidir.

Geliştirme Sırasında Sık Yapılan Hatalar

• Mantiğin DOM'a Bağlanması: Biçimlendirme durumunu doğrudan HTML öğelerinden okumaya çalışmak öngörülemez hatalara yol açar. Her zaman soyut modelle çalışın.
• Unicode ve Emoji'nin Göz Ardı Edilmesi: Karakterler farklı sayıda bayt ve ekran konumu (grafem kümeleri) kaplayabilir. Basit dize indekslerinin (string[i]) kullanılması imleç gezinmesini bozar. Grafemlerle çalışmak için kütüphaneler kullanın.
• Çakışma İşlemenin Eksikliği: Ortak düzenleme planlıyorsanız, çakışma çözümleme algoritmaları için (örneğin OT veya CRDT) önceden destek ekleyin.

SSS

Editör çekirdeği için hangi programlama dili seçilmeli? Web için ekosistem nedeniyle TypeScript/JavaScript fiili standarttır. Masaüstü yüksek performanslı çözümler için genellikle Rust veya C++ kullanılır ve WebAssembly'e derlenir veya yerel bağlamalar yapılır.

Ortak düzenleme nasıl uygulanır? Operational Transformation (OT) veya Conflict-free Replicated Data Types (CRDT) algoritmalarını kullanın. CRDT'ler çakışmaları çözmek için merkezi bir sunucu gerektirmediğinden yeni projeler için uygulaması daha kolaydır.

Hazır motorlar kullanmak mantıklı mı? Standart bir editöre ihtiyacınız varsa, hazır bir çözüm almak daha iyidir (ProseMirror, Slate.js, TipTap). Kendi motorunuzu sadece performansa yönelik benzersiz gereksinimleriniz, özel bir veri modeliniz varsa veya eğitici bir proje oluşturuyorsanız yazın.