2025년, 최적의 React Rich Text Editor는 무엇일까요?

import React, { useMemo, useState } from 'react';
import { Slate, Editable, withReact } from 'slate-react';
import { createEditor } from 'slate';

const initialValue = [
  {
    type: 'paragraph',
    children: [
      { text: 'Slate 에디터의 기본 예제입니다. ' },
      { text: '볼드', bold: true },
      { text: ' 및 ' },
      { text: '이탤릭', italic: true },
      { text: ' 텍스트를 지원합니다.' },
    ],
  },
];

function SlateEditor() {
  const editor = useMemo(() => withReact(createEditor()), []);
  const [value, setValue] = useState(initialValue);

  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
      <Editable
        renderLeaf={({ leaf, attributes, children }) => {
          if (leaf.bold) children = <strong>{children}</strong>;
          if (leaf.italic) children = <em>{children}</em>;
          return <span {...attributes}>{children}</span>;
        }}
        placeholder="텍스트를 입력하세요..."
      />
    </Slate>
  );
}

export default SlateEditor;

import React from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

function TiptapEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>안녕하세요, Tiptap 에디터입니다!</p>',
  });

  return <EditorContent editor={editor} />;
}

export default TiptapEditor;

import React, { useState } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

const theme = {
  paragraph: 'my-paragraph-class',
  // 원하는 스타일 추가 가능
};

function onError(error) {
  console.error(error);
}

function Editor() {
  const [editorStateJSON, setEditorStateJSON] = useState(null);

  function onChange(editorState) {
    editorState.read(() => {
      const json = editorState.toJSON();
      setEditorStateJSON(JSON.stringify(json));
    });
  }

  const initialConfig = {
    namespace: 'MyLexicalEditor',
    theme,
    onError,
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable className="editor-input" />}
        placeholder={<div>텍스트를 입력하세요...</div>}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <OnChangePlugin onChange={onChange} />
      <HistoryPlugin />
      {/* 필요 시 추가 플러그인 삽입 */}
      <div>Editor State JSON: {editorStateJSON}</div>
    </LexicalComposer>
  );
}

export default Editor;