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

| Prop | Type | Default | Description | | ----------------- | ---------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | | defaultValue | string | - | 초기 HTML 콘텐츠 | | readOnly | boolean | - | 읽기 전용. 주지 않으면 감싸는 Form·ToolbarForm의 readOnly를 따른다. 편집 불가 + 도구 모음 비활성 | | visible | boolean | true | 표시 여부 (false → 렌더링 안 함) | | height | number \| string | 300 | 에디터 높이 (px) | | error | string \ | boolean | - | 오류 문구. 주면 오류 상태(aria-invalid)도 켠다 | | aria-invalid | boolean | - | 오류 상태. true면 문구 없이 상태만 켜고, false면 error가 있어도 상태와 문구를 끈다 | | required | boolean | - | 필수 입력. FormItem *를 켜고 plaintext는 aria-required도 켠다 (richtext는 안쪽 부품이 aria 속성을 받지 않음, HTML required는 없음) | | labelTooltip | string | - | 라벨 도움말 (아이콘 hover 시 표시). label에 글자가 있을 때만 나온다 | | label | ReactNode | - | 라벨. ""이면 정렬용 빈 자리만 두고 잇지 않는다 (이름은 aria-label, labelTooltip 무시). richtext는 안쪽 부품이 aria 속성을 받지 않아 잇지 못한다 | | orientation | "horizontal" \| "vertical" | - | FormItem 라벨 방향 | | description | string | - | FormItem 설명 | | className | string | - | FormItem 루트 className | | editorClassName | string | - | 에디터 영역(도구 모음·본문·사용량·대체 변수 표) className | | style | React.CSSProperties | - | 인라인 스타일 |

Events

Ref

접근성

권장 사항

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

관련 컴포넌트

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