React İstemci Entegrasyonu

@copypatch/react paketi; React context sağlayıcısını, satır içi düzenlenebilir metin bileşenlerini ve kancaları sunar. Varsayılan olarak uygulamanızın aynı kökenindeki /__copypatch/api/v2 rotasına otomatik bağlanır.

CopyPatchProvider Sağlayıcısı

Bileşen ağacınızı (veya kök sayfa düzeninizi) CopyPatchProvider ile sarın. Sağlayıcı; aktif dili, yayınlanmış metin önbelleğini, taslak revizyonlarını ve düzenleyici arayüzünün tembel yüklenmesini yönetir:

HomePage.tsx

import { CopyPatchProvider, EditableText, useCopyPatch } from '@copypatch/react';

export function HomePage() {
  // Öznitelikler, yer tutucular veya buton etiketleri için düzenlenebilir metin okuma
  const buttonLabel = useCopyPatch('home.cta.button', 'Ücretsiz Başlayın');
  const searchPlaceholder = useCopyPatch('home.search.placeholder', 'Dokümantasyonda arayın...');

  return (
    <CopyPatchProvider locale="tr">
      <header className="hero">
        <EditableText contentKey="home.hero.title" as="h1" className="hero-title">
          Metinleri müşterileriniz düzenlesin. Kodları ve tasarımı değil.
        </EditableText>
        <EditableText contentKey="home.hero.subtitle" as="p" className="hero-desc">
          React uygulamaları için güvenli, aynı kökenden (same-origin) satır içi metin düzenleme.
        </EditableText>
        <div className="hero-actions">
          <input type="text" placeholder={searchPlaceholder} />
          <button type="button">{buttonLabel}</button>
        </div>
      </header>
    </CopyPatchProvider>
  );
}

Sağlayıcı Yapılandırma Özellikleri (Props)

Özellik	Tip	Varsayılan	Açıklama
`locale`	`string`	Zorunlu	Aktif dil tanıtıcısı (örn. `“tr”`, `“en”`, `“de”`).
`initialSnapshot`	`ContentSnapshot`	`undefined`	Sunucudan önceden oluşturulmuş içerik anlık görüntüsü (yükleme sırasında istemci yerleşim kaymalarını önler).
`apiBase`	`string`	`“/__copypatch/api/v2”`	Temel API yolu. Standart same-origin barındırmada boş bırakılmalıdır.

Bileşen ve Kanca Başvuru Kılavuzu

`<EditableText>`

Satır içi düzenlenebilir bir metin öğesi render eder. Normal ziyaretçiler gezinirken sıfır ek yükle standart React öğeleri oluşturur. Yetkili bir editör düzenleme modunu açtığında tıklanarak düzenlenebilir hale gelir:

Özellik	Tip	Varsayılan	Açıklama
`contentKey`	`string`	Zorunlu	Noktayla ayrılmış benzersiz içerik anahtarı (örn. `“pricing.pro.title”`).
`as`	`string \| ComponentType`	`“span”`	Render edilecek HTML etiketi veya React bileşeni (örn. `“h1”`, `“h2”`, `“p”`).
`children`	`string`	`“”`	Veritabanında yayınlanmış metin bulunamadığında render edilecek varsayılan yedek metin.
`className`	`string`	`undefined`	DOM öğesine aktarılacak CSS sınıf isimleri.

`useCopyPatch(contentKey, fallback)`

HTML öğesi olarak doğrudan render edilemeyen öznitelikler (örn. placeholder, aria-label, title, alt veya buton etiketleri) için düzenlenebilir metin değerini okuyan React kancasıdır.

`useEditableText(contentKey, fallback)`

CopyPatch’in seçim ve mutasyon hattıyla entegre çalışan özel etkileşimli bileşenler oluşturmak için kullanılan alt seviye kancadır:

OzelRozet.tsx

import { useEditableText } from '@copypatch/react';

export function OzelRozet({ contentKey, defaultLabel }: { contentKey: string; defaultLabel: string }) {
  const { value, isEditing, editProps } = useEditableText(contentKey, defaultLabel);

  return (
    <span className="badge" {...editProps}>
      {value}
    </span>
  );
}

Sıkı Düz Metin İlkesi (Sıfır XSS)

XSS Korumalı Tasarım: CopyPatch yalnızca düz metin (plaintext) dizgilerini saklar ve işler. Düzenleme alanlarına girilen HTML etiketleri veya <script> kodları hiçbir zaman çalıştırılmaz; tamamen zararsız düz metin olarak işlenerek depolanmış XSS açıklarını kökten engeller.