Editor

라벨, 읽기 전용, 오류 표시 등을 내장한 리치 텍스트 에디터 컴포넌트

개요

Cals Editor는 Foundation Editor(Lexical 기반)를 래핑하여 CALS 제품의 리치 텍스트 편집 UI를 선언적으로 구현하는 컴포넌트입니다. 굵게·기울임·밑줄·목록·들여쓰기·정렬·글자 색·배경 색·서식 초기화 등의 편집 도구 모음을 기본 제공하며, 폼 레이블, 읽기 전용, 오류 표시 등 CALS에서 자주 쓰이는 기능을 prop으로 제공합니다.

주요 특징

• ✅ 리치 텍스트 편집: 굵게, 기울임, 밑줄, 목록, 정렬, 글자/배경 색상, 서식 초기화 등
• ✅ HTML 입출력: defaultValue로 초기 HTML 설정, onHtmlChange로 변경 HTML 수신
• ✅ 읽기 전용: readOnly prop으로 편집 불가 + 도구 모음 비활성화
• ✅ FormItem 내장: label/required/description/error prop으로 폼 레이블 자동 래핑
• ✅ 라벨 도움말: labelTooltip으로 레이블 옆 도움말 아이콘 표시
• ✅ 가시성/포커스 제어: visible prop, ref.focus()/insertText()
• ✅ 이미지 삽입: Base64 형식으로 이미지를 삽입 가능

기본 사용

기본 상태의 리치 텍스트 에디터입니다. 상단 편집 도구 모음이 표시됩니다.

<Editor />

기본값 설정

defaultValue로 초기 HTML 콘텐츠를 설정합니다.

<Editor defaultValue="<p><strong>굵은 텍스트</strong>와 <em>기울임 텍스트</em></p>" />

읽기 전용

readOnly=true이면 편집 불가 + 도구 모음이 비활성화됩니다.

<Editor readOnly defaultValue="<p>읽기 전용 콘텐츠</p>" />

오류 상태

error prop이 있으면 편집 영역에 오류 강조 스타일이 적용됩니다.

<Editor label="내용" error="필수 입력 항목입니다" />

에디터 높이

height prop으로 에디터 높이를 설정합니다. 기본 300px입니다.

<Editor height={200} />
<Editor height={500} />

레이블 / 필수 입력

label로 레이블을 표시하고, required로 필수 표시 기호(*)를 추가합니다.

<Editor label="메모" />
<Editor label="내용" required />

레이블 위치

orientation=“horizontal”이면 레이블이 에디터 왼쪽에 배치됩니다.

<Editor label="내용" orientation="horizontal" labelWidth={80} />

라벨 도움말

labelTooltip 지정 시 레이블 옆 아이콘에 마우스를 올리면 도움말이 표시됩니다.

<Editor label="설명" labelTooltip="리치 텍스트 형식으로 입력하세요" />

API Reference

Props

Events

Ref

접근성

권장 사항

• ✅ label로 에디터의 목적을 명확히 제공하세요.
• ✅ 필수 입력은 required로 설정하여 스크린 리더에 전달하세요.
• ✅ error 상태에서는 시각적 강조와 함께 에러 메시지가 표시됩니다.
• ❌ 읽기 전용 상태에서 포커스를 강제로 이동하지 마세요.

관련 컴포넌트

• Foundation Editor: 기본 Lexical 에디터 컴포넌트
• FormItem: 폼 레이블 래퍼
• Cals Textarea: 단순 여러 줄 텍스트 입력 컴포넌트