Reusable Lexical Editor

Bu proje, Lexical playground'ından türetilmiş yeniden kullanılabilir bir editör komponenti sağlar.

Özellikler

• ✅ Value prop'u ile kontrol edilebilir
• ✅ onChange callback'i ile değişiklikleri yakalayabilir
• ✅ Placeholder desteği
• ✅ Disabled/readonly mod
• ✅ Tüm Lexical playground özelliklerine sahip
• ✅ TypeScript desteği
• ✅ ESM modül formatı

Kurulum

npm install lexical-rich-editor
# veya
yarn add lexical-rich-editor

Kullanım

Temel Kullanım

import React, {useState} from 'react';
import {ReusableLexicalEditor} from 'lexical-rich-editor';

function MyApp() {
  const [content, setContent] = useState('İlk metin içeriği');

  const handleContentChange = (value, editorState, editor) => {
    console.log('Editor içeriği değişti:', value);
    setContent(value);
  };

  return (
    <div>
      <h1>Lexical Editor Örneği</h1>
      <ReusableLexicalEditor
        value={content}
        onChange={handleContentChange}
        placeholder="Metninizi buraya yazın..."
      />

      <div style={{marginTop: 20, padding: 10, background: '#f5f5f5'}}>
        <h3>Güncel İçerik:</h3>
        <pre>{content}</pre>
      </div>
    </div>
  );
}

export default MyApp;

Gelişmiş Kullanım

import React, {useState} from 'react';
import {ReusableLexicalEditor} from 'lexical-rich-editor';
import type {ReusableLexicalEditorProps} from 'lexical-rich-editor';

function AdvancedEditor() {
  const [content, setContent] = useState('');
  const [isReadonly, setIsReadonly] = useState(false);

  const editorProps: ReusableLexicalEditorProps = {
    value: content,
    onChange: (value, editorState, editor) => {
      setContent(value);

      // Editor state ile ileri düzey işlemler yapabilirsiniz
      console.log('Editor State:', editorState);
      console.log('Editor Instance:', editor);
    },
    placeholder: isReadonly
      ? 'Bu editör sadece okunabilir'
      : 'Yazı yazmaya başlayın...',
    disabled: isReadonly,
    className: 'my-custom-editor',
    style: {
      border: '2px solid #ddd',
      borderRadius: '8px',
      minHeight: '200px',
    },
  };

  return (
    <div>
      <div style={{marginBottom: 16}}>
        <label>
          <input
            type="checkbox"
            checked={isReadonly}
            onChange={(e) => setIsReadonly(e.target.checked)}
          />
          Sadece Okunabilir Mod
        </label>
      </div>

      <ReusableLexicalEditor {...editorProps} />

      <div style={{marginTop: 20}}>
        <h3>Karakter Sayısı: {content.length}</h3>
        <details>
          <summary>Raw İçerik</summary>
          <pre style={{background: '#f8f8f8', padding: 10}}>
            {JSON.stringify(content, null, 2)}
          </pre>
        </details>
      </div>
    </div>
  );
}

export default AdvancedEditor;

API Referansı

ReusableLexicalEditor Props

| Prop | Tip | Varsayılan | Açıklama | | ------------- | --------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------- | | value | string \| undefined | undefined | Editörün başlangıç değeri (plain text) | | onChange | (value: string, editorState: EditorState, editor: LexicalEditor) => void \| undefined | undefined | İçerik değiştiğinde çağrılan callback | | placeholder | string \| undefined | 'Enter some text...' | Placeholder metni | | disabled | boolean | false | Editörün düzenlenebilir olup olmadığı | | className | string \| undefined | '' | CSS sınıfı | | style | React.CSSProperties \| undefined | {} | Inline stil |

onChange Callback Parametreleri

• value: string - Editörün güncel text içeriği
• editorState: EditorState - Lexical EditorState objesi (ileri düzey kullanım için)
• editor: LexicalEditor - Lexical Editor instance'ı (ileri düzey kullanım için)

CSS Sınıfları

Component otomatik olarak şu CSS sınıflarını ekler:

• .reusable-lexical-editor - Ana container
• .editor-shell - İç editor container'ı

Kendi stillerinizi eklemek için bu sınıfları kullanabilir veya className prop'u ile özel sınıf ekleyebilirsiniz.

Örnekler

Form Entegrasyonu

import React from 'react';
import {useForm, Controller} from 'react-hook-form';
import {ReusableLexicalEditor} from 'lexical-rich-editor';

function FormWithEditor() {
  const {control, handleSubmit, watch} = useForm({
    defaultValues: {
      title: '',
      content: '',
    },
  });

  const onSubmit = (data) => {
    console.log('Form data:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Başlık:</label>
        <Controller
          name="title"
          control={control}
          render={({field}) => <input {...field} placeholder="Başlık girin" />}
        />
      </div>

      <div>
        <label>İçerik:</label>
        <Controller
          name="content"
          control={control}
          render={({field}) => (
            <ReusableLexicalEditor
              value={field.value}
              onChange={(value) => field.onChange(value)}
              placeholder="İçerik yazın..."
            />
          )}
        />
      </div>

      <button type="submit">Gönder</button>
    </form>
  );
}

İki Editör Arasında Senkronizasyon

import React, {useState} from 'react';
import {ReusableLexicalEditor} from 'lexical-rich-editor';

function SyncedEditors() {
  const [sharedContent, setSharedContent] = useState(
    'Bu içerik iki editörde de görünür',
  );

  return (
    <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20}}>
      <div>
        <h3>Editör 1</h3>
        <ReusableLexicalEditor
          value={sharedContent}
          onChange={(value) => setSharedContent(value)}
          placeholder="İlk editör..."
        />
      </div>

      <div>
        <h3>Editör 2 (Senkronize)</h3>
        <ReusableLexicalEditor
          value={sharedContent}
          onChange={(value) => setSharedContent(value)}
          placeholder="İkinci editör..."
        />
      </div>
    </div>
  );
}

Teknik Detaylar

• Framework: React 19+
• Lexical Version: 0.37.0
• TypeScript: Tam destek
• Bundle Format: ESM
• Peer Dependencies: React, ReactDOM, Lexical paketleri

Lisans

MIT - Orijinal Lexical projesi lisansını takip eder.