1. MD Editor Elementine Genel Bakış

MD Editor elementi, kullanıcıların Markdown formatında zengin metin içerikleri oluşturmasını sağlayan bir metin düzenleme elementidir. Başlıklar, listeler, kalın/italik metinler, bağlantılar ve kod blokları gibi Markdown sözdizimini destekleyerek yapılandırılmış içerik üretimini kolaylaştırır.

MD Editor elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Açıklama ve detay alanları
• Blog, duyuru veya içerik yönetimi ekranları
• Dokümantasyon ve yardım metinleri
• Kullanıcı tarafından oluşturulan zengin metin içerikleri
• Markdown tabanlı içerik düzenleme senaryoları

2. Temel Özellikler

• Markdown sözdizimi desteği: Başlıklar, listeler, bağlantılar, alıntılar ve kod blokları gibi Markdown öğeleri kullanılabilir.
• Zengin metin düzenleme araçları: Kalın, italik, başlık ve listeleme gibi temel biçimlendirme işlemleri kullanıcı dostu bir arayüzle sunulur.
• Gerçek zamanlı içerik oluşturma: Kullanıcı yazdıkça içerik anlık olarak düzenlenir ve kaydedilmeye hazır hale gelir.
• MD Viewer ile uyumlu çalışma: Oluşturulan içerikler MD Viewer elementi üzerinden biçimlendirilmiş şekilde görüntülenebilir.
• Dinamik veri bağlama desteği: İçerik statik olarak girilebilir veya state, değişken ve aksiyon çıktılarıyla dinamik olarak yönetilebilir.

2.1. MD Editor Elementi Özellikleri

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Value: MD Editor'da düzenlenip kaydedilen içeriği temsil eder. Kullanıcılar Markdown biçiminde metin girdiğinde, bu içerik Value alanına kaydedilir.
• Hide Tool Bar: MD Editor'ün üst kısmındaki biçimlendirme araç çubuğunun görünür olup olmadığını kontrol eder.
• Theme: MD Editor'ün görünüm temasını ayarlar. Kullanıcı arayüzünün renk şeması bu ayar tarafından kontrol edilir.
• Simplified: Editörü basitleştirilmiş bir görünüme geçirir. Daha az kontrol ve daha temiz bir yazma alanı sunar.

2.2. Elemente Eklenebilen Aksiyonlar

MD Editor elementi, kullanıcı metin içeriğinde değişiklik yaptığında onChange tetikleyicisini destekler.

onChange: Kullanıcı MD Editor içerisindeki içeriği her güncellediğinde tetiklenir.

Kullanım senaryoları:

• Girilen Markdown içeriğini state veya değişkenlere kaydetmek
• Canlı önizleme (MD Viewer) alanını güncellemek
• İçerik uzunluğunu veya formatını kontrol etmek

onChange tetikleyicisi, MD Editor elementinin dinamik içerik yönetimi senaryolarında etkin şekilde kullanılmasını sağlar.

3. MD Editor Elementi Nasıl Kullanılır? 

Bu bölümde MD Editor elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Zengin İçerik ve Dokümantasyon Oluşturma

Bir uygulamada kullanıcılar; açıklama, dokümantasyon veya bilgilendirici içerikleri yalnızca metin olarak değil, kod blokları, görseller ve bağlantılar ile birlikte düzenli bir şekilde oluşturmak ister. MD Editor, bu senaryoda Markdown destekli araçları sayesinde zengin ve okunabilir içeriklerin hazırlanmasını sağlar.

Senaryoda:

• Kullanıcı, MD Editor alanına metin içeriğini girer.
• Başlık, kalın, italik ve altı çizili metin biçimlendirmelerini araç çubuğu üzerinden kolayca uygular.
• Listeleme ve sıralı liste seçenekleriyle içerik maddeler hâlinde düzenlenir.
• Bağlantı (link) ekleme özelliği ile dış kaynaklara yönlendirme yapılır.
• Görsel ekleme seçeneği kullanılarak içerik görsel destekli hâle getirilir.
• Kod bloğu ve inline code özellikleriyle teknik içerikler okunabilir biçimde paylaşılır.
• Alıntı (quote) alanları ile önemli notlar vurgulanır.
• Yazılan içerik, editörün sağ bölümünde canlı önizleme olarak anlık görüntülenir.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “ContentBlocks” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

CommentText kolonunda Size alanını Max olarak ayarlayın.

• Önemli Alan adları:
  
  • CommentText: MD Editor üzerinden girilen metin içeriğini tutar. Açıklama, not veya yorum gibi serbest içerikler bu alanda saklanır.
  • CreatedAt: İçeriğin oluşturulduğu tarih ve saat bilgisini belirtir. Kayıtların zaman bazlı takibi için kullanılır.
  • CreatedBy: İçeriği oluşturan kullanıcıya veya kaynağa ait bilgiyi tutar. Kullanıcı bazlı içerik ayrımı ve yetkilendirme senaryolarında kullanılır.

Adım 2 - Elementlerin Eklenmesi ve Ayarlanması

• Sayfaya Elements > Text Input > MDEditor elementini sürükleyip bırakın.
• MD Editor içeriğinin başlangıçta boş gelmesi için MDEditor > Properties > Value > Default > Empty olarak güncelleyin.
  

• Senaryoda gelişmiş kullanım olacağı için MDEditor > Properties > Simplified ve HideToolbar seçeneklerini kapalı olarak ayarlayın.
• Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
• Button yazısını Button > Properties > Label > “Kaydet” olarak düzenleyin.
• Button elementine kayıt aksiyonunu Button > Add Action > onClick > ManagedDb > Save Record ekleyin.
  

•  Save Record aksiyonunda ContentBlocks tablosunu seçin. Açılan sütun adları alanında tüm sütun adlarını seçin. 

• CommentText alanını Components > MDEditor > value olarak tanımlayın.
  

• CreatedAt alanını Default > Now olarak tanımlayın.
  

• Id alanını Default > New Guid olarak tanımlayın.
  

•  Tanımlamalar sonucunda Save Record aksiyonun tüm alanları aşağıdaki gibi olmalıdır.
  
  

•  Sayfa son durumda aşağıdaki gibi olmalıdır.
  

Preview:

Uygulama test edildiğinde, MD Editor alanına girilen içerik sol tarafta düzenlenirken, sağ tarafta canlı önizleme olarak anlık şekilde görüntülenir. Canlı önizleme alanı, sağ üst köşedeki kontrol üzerinden açılıp kapatılabilir. Metin biçimlendirme, listeleme, bağlantı, görsel, alıntı ve kod ekleme gibi tüm Markdown özellikleri editör üzerinde kolayca uygulanabilir ve sonuçları eş zamanlı olarak takip edilebilir.

Kullanıcı, editörün sağ alt köşesinde yer alan üç nokta (⋯) menüsü üzerinden editör boyutunu ihtiyaca göre arttırıp azaltabilir. Bu sayede uzun içeriklerde daha geniş bir çalışma alanı elde edilirken, kısa metinlerde daha kompakt bir görünümle çalışmak mümkün olur.

İçerik hazırlandıktan sonra Kaydet butonuna tıklanarak içerik kaydedilir.

4. Ortak Özellikler (Properties)

MD Editor elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Uzun ve zengin metin içerikleri için kullanın. Açıklama, dokümantasyon ve içerik üretimi senaryoları için kullanılabilir. 
• MD Viewer ile birlikte kullanın. Kullanıcının yazdığı içeriğin nasıl görüneceğini anında göstermek deneyimi iyileştirir.
• onChange tetikleyicisini kullanın. Otomatik kaydetme gibi işlemlerde gereksiz çağrılardan kaçının.
• Markdown yapısını kullanıcıya açıklayın. Kısa ipuçları veya örnekler, içeriğin doğru biçimde oluşturulmasını sağlar.
• İçerik doğrulamasını ek katmanlarla yapın.  Uzunluk, boş içerik veya format kontrolleri için ek validation önerilir.

6. Kısıtlamalar

• Markdown dışında zengin metin (HTML vb.) düzenleme desteği yoktur.
• Çok büyük metinlerde performans test edilmelidir.