CopyPatch
EN TR
GitHub Başlayın

Düzenleme Modu ve Satır İçi Mekanikler

CopyPatch, yetkili bir ekip üyesi tarafından açıkça tetiklenene kadar düzenleyici katmanını genel ziyaretçilerden tamamen gizli ve ayrık tutar.

1. Düzenleme Modunu Başlatma

  1. Web sitesi adresinin sonuna ?copypatch=1 parametresini ekleyin (örneğin https://siteniz.com/fiyatlar?copypatch=1).
  2. CopyPatchProvider bu parametreyi algılar ve düzenleyici paketini (~12 kB gzip) dinamik olarak tembel yükler (lazy-load). Ziyaretçiler bu kodu asla indirmez.
  3. Aktif bir oturum yoksa, Kimlik Doğrulama Modalı yönetim parolanızı (veya ana uygulama oturumunuzu) ister.
  4. Giriş başarılı olduğunda, ekranın altında yüzen Düzenleme Araç Çubuğu belirir ve tüm <EditableText> alanları tıklanabilir hale gelir.

2. Klavye Kısayolları

Klavye Kısayolları 
Cmd + S / Ctrl + S   -> Bekleyen değişiklikleri taslak olarak kaydet (veya yetkiliyseniz yayınla)
Escape               -> Aktif metin seçimini kaldır / Düzenlemeyi iptal et / Modalı kapat
Enter                -> Tek satır modunda: onayla ve odağı bırak; çok satırlıda: yeni satır ekle
Tab / Shift + Tab    -> Sayfadaki sonraki / önceki düzenlenebilir metin alanına odaklan

3. Araç Çubuğu Kontrolleri Referansı

Kontrol Görsel Gösterge Eylem ve İşlev
Dil Rozeti TR / EN / DE Aktif olarak düzenlenen dil kapsamını görüntüler.
Durum Rozeti Yeşil / Kehribar nabız noktası Değişikliklerin sunucuyla eşitlendiğini (Ready) veya bekleyen değişiklik olduğunu (Unsaved) gösterir.
Geri Al (Discard) Çerçeveli buton Kaydedilmemiş tüm yerel satır içi değişiklikleri yayınlanan son duruma geri döndürür.
Taslak Kaydet Mavi buton (⌘S) Değişiklikleri atomik CAS doğrulamasıyla veritabanındaki taslak (draft) durumuna kaydeder.
Yayınla (Publish) Yeşil aksiyon butonu Taslak değişiklikleri tüm ziyaretçiler için anında canlıya alır (publisher rolü gerektirir).
Çıkış (Esc) Kapatma ikon butonu URL'den ?copypatch=1 parametresini kaldırarak normal ziyaretçi görünümüne döner.

4. Doğal İmleç ve Seçim Kararlılığı

React yeniden render edildiğinde imlecin başa veya sona zıplamasına yol açan ilkel contenteditable sarmalayıcılarının aksine, CopyPatch özel bir imleç koruma mekanizması kullanır:

  • Metin düğümleri doğal contenteditable="plaintext-only" kullanır; yapıştırmalarda harici stiller ve HTML etiketleri otomatik temizlenir.
  • Yazım sırasında tuş vuruşları tüm React bileşen ağacını tetiklemeden doğrudan yerel bellek deposuna yazılır.
  • Odak dışına çıkıldığında veya kaydedildiğinde, React metin seçimini veya imleç konumunu bozmadan durumu eşitler.

5. DOM İzolasyonu ve Portal Mimarisi

Araç çubuğu ve kimlik doğrulama modalı, uygulamanızın işaretlemesi dışındaki özel bir DOM konteynerine render edilir:

HTML 
<!-- Uygulama bileşen ağacının dışına yerleştirilen izole portal kapsayıcısı -->
<div id="copypatch-portal-root" aria-live="polite"></div>

Bu sayede CopyPatch arayüzü ana sitenizin CSS sıfırlamalarından, form stillerinden veya z-index katman kırpmalarından asla etkilenmez.