Editor

Lexical 기반 리치 텍스트 에디터 컴포넌트

개요

Foundation Editor는 Lexical 엔진을 기반으로 한 리치 텍스트 에디터입니다. 서식, 이미지, 표, 레이아웃 등 풍부한 콘텐츠 편집 기능을 제공하며, 플러그인 아키텍처를 통해 기능을 선택적으로 구성할 수 있습니다.

주요 특징

• ✅ Toolbar: 서식, 정렬, 링크, 삽입 등 편집 도구
• ✅ 서식 선택 메뉴: Paragraph, Heading, List, Code Block, Quote
• ✅ Insert 메뉴: 이미지, 표, 컬럼 레이아웃, 임베드
• ✅ 서식 적용: 글꼴, 크기, 굵기, 기울임, 밑줄, 색상 등
• ✅ 텍스트 정렬: 좌/중/우/양쪽 정렬
• ✅ 읽기 전용: readOnly 모드 지원
• ✅ 플러그인 아키텍처: 서식/콘텐츠 제한 가능
• ✅ 접근성: 키보드 네비게이션 지원

사용 예시

기본 에디터

const [state, setState] = useState(undefined)
 
<Editor
  editorSerializedState={state}
  onSerializedChange={setState}
/>

읽기 전용

readOnly 설정 시 Toolbar와 Actions가 비활성화되고 콘텐츠 수정이 제한됩니다.

<Editor readOnly editorSerializedState={state} />

오류 상태

error 설정 시 테두리가 destructive 색상으로 변경됩니다.

<Editor error />

Serialized State 관리

onSerializedChange로 EditorState를 JSON 구조로 관리합니다.

import { Editor } from "@vortex/ui-foundation"
import { useState } from "react"
 
function MyEditor() {
  const [state, setState] = useState(undefined)
 
  return (
    <Editor
      editorSerializedState={state}
      onSerializedChange={setState}
    />
  )
}

API Reference

Props

Events

기본 사용법

import { Editor } from "@vortex/ui-foundation"
 
// 기본
<Editor />
 
// 읽기 전용
<Editor readOnly />
 
// 에러 상태
<Editor error />

접근성

키보드 네비게이션

• Tab: Toolbar → 에디터 영역 이동
• Tab / Shift+Tab: 에디터 내 들여쓰기/내어쓰기
• / (슬래시): 컴포넌트 피커 메뉴 호출
• Arrow Keys: 캘린더, 드롭다운 내 탐색

권장 사항

• ✅ 폼 필드에서 사용 시 iCignal Editor 권장 (label, error, required 지원)
• ✅ focus-within 링으로 포커스 상태 시각적 구분
• ❌ label 없이 단독 사용 지양

관련 컴포넌트

• Editor (iCignal): FormItem 통합 Editor
• Textarea: 단순 텍스트 입력