Lokal ortamda projeyi test etmek için aşağıdaki adımları takip edebilirsiniz:

Ana klasörde aşağıdaki komutu çalıştırarak gerekli bağımlılıkları yükleyin:

yarn setup

Demo sayfasını başlatmak için şu komutu kullanın:

yarn dev

Bu komut, demo sayfasını (packages/koenig-demo) ayağa kaldıracaktır.

koenig-lexical paketinde çalışmak için şu adımları izleyin:

1. İlgili klasöre geçiş yapın:

   cd packages/koenig-lexical

2. Projeyi watch modunda build edin:

   yarn build --watch

   Bu sayede, pakette yapılan değişiklikler otomatik olarak güncellenecektir.

Bileşeni aşağıdaki komutla projeye dahil edebilirsiniz:

npm i '@zeeshanzahoor/koenig-lexical'

Bileşenin gerekli CSS dosyasını, editörün kullanıldığı ve kullanıcıya HTML gösterilen sayfaya dahil etmelisiniz:

import '@zeeshanzahoor/koenig-lexical/koenig-lexical.css';

KoenigComposer bileşeni, editörün bağlamını sağlayan temel bir bileşendir ve global bir seviyede dahil edilmelidir. Aşağıda temel yapılandırma örneği verilmiştir:

const cardConfig = {
  renderLabels: true,
  siteUrl: window.location.origin,
  membersEnabled: true,
  stripeEnabled: true,
  deprecated: { headerV1: true },
  feature: {
    collections: false,
    collectionsCard: false,
    contentVisibility: true,
  },
  fetchEmbed: fetchEmbed,
};

const props = {
  cardConfig,
  darkMode: false,
  fileUploader: { useFileUpload: useFileUpload({ isMultiplayer: false }), fileTypes },
  isSnippetsEnabled: false,
  isTKEnabled: true,
};

return (
  <div>
    <KoenigComposer {...props}>
      {/* Ek bileşenler buraya eklenebilir */}
    </KoenigComposer>
  </div>
);

Editör bileşenini aşağıdaki şekilde projeye dahil edebilirsiniz. Kullanım için bir üst kapsayıcının koenig-lexical sınıfına sahip olması gerektiğini unutmayın.

import { useKoenigEditor } from '@zeeshanzahoor/koenig-lexical';

<div className="koenig-lexical">
  <MemoizedExtendedKoenigEditor />
</div>

Bu adımlar tamamlandığında, editörün sorunsuz bir şekilde çalıştığını gözlemleyebilirsiniz.

useKoenigEditor, editörden veri okuma (getHtml) ve yazma (setHtml) işlemlerini kolaylaştıran bir hook sağlar. Aşağıda örnek kullanım gösterilmiştir:

import { useKoenigEditor } from '@zeeshanzahoor/koenig-lexical';

const EditorWrapper = () => {
  const { getHtml, setHtml } = useKoenigEditor();
  const [output, setOutput] = useState();

  const collectHtml = async () =>{
    const html = await getHtml()
    setOutput(html)
  }

  return (
    <div className="koenig-lexical">
      <button onClick={() => collectHtml()}>Collect HTML</button>
      <MemoizedExtendedKoenigEditor />
    </div>
  );
};

Editör verileri, veritabanında HTML formatında saklanmalıdır. Yukarıdaki örneklerde veri okuma ve yazma işlemleri açıklanmıştır. Verileri kullanıcıya göstermek için şu örnek uygulanabilir:

const UserFacingComponent = ({ html }) => {
  return (
    <div className="koenig-lexical">
      <div className="kg-prose" dangerouslySetInnerHTML={{ __html: htmlOutput }} />
    </div>
  );
};

Not: Yukarıda belirtilen CSS dosyasını ve gerekli sınıf adlarını içeriğe dahil etmeyi unutmayın.

Editörün görsel tasarımını özelleştirmek için buradaki CSS dosyasından yararlanabilirsiniz.

Backend servisiniz şu kriterleri karşılamalıdır:

• Tekil veya çoklu dosya yüklemelerini desteklemelidir.
• Başarıyla yüklenen dosyalar için aşağıdaki formatta veri döndürmelidir:

  { "url": "dosyanın URL'si", "fileName": "dosya adı" }

• Başarısız yüklemeler için şu format kullanılmalıdır:

  { "fileName": "dosya adı", "message": "hata mesajı" }

• Galeri desteği için, hem başarılı hem de başarısız yükleme bilgilerini içeren bir liste dönebilmelidir:

  [
    { "url": "dosyanın URL'si", "fileName": "dosya adı" },
    { "fileName": "dosya adı", "message": "hata mesajı" }
  ]

Ayrıca, useFileUpload.js dosyasındaki upload fonksiyonunu bu servisle uyumlu hale getirmelisiniz.

Embed servisi, farklı platformlardan (örneğin YouTube, Twitter, Vimeo) içeriklerin sayfaya gömülmesini sağlar. fetchEmbed şu anda bu üç platformu desteklemektedir. Ek platformlar eklemek veya servisi devre dışı bırakmak için yapılandırma dosyasını güncelleyebilirsiniz.