import { Canvas, Meta, Controls, Source } from '@storybook/addon-docs';
import * as EditorStories from './Editor.stories';

# Editor

<Meta of={EditorStories} />

<br />

## Overview

텍스트를 작성하고 스타일을 지정하며 다양한 포멧팅 옵션을 적용할 수 있습니다.

<Canvas of={EditorStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Editor</strong> 컴포넌트 사용방법 입니다.

<Source  
code={`
import { Editor } from '@lotte-innovate/lui';

export default () => <Editor />;
`}
/>

`editor` toolbar에서 사용할 수 있는 기본 기능은 다음과 같습니다.

<details>
  <summary>toolbar 기능</summary>

<table>
  <thead>
    <tr>
      <th>기능</th>
      <th>설명</th>
      <th>기능</th>
      <th>설명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>undo</td>
      <td>마지막 작업을 취소합니다.</td>
      <td>redo</td>
      <td>마지막 취소 작업을 다시 실행합니다.</td>
    </tr>
    <tr>
      <td>accordion</td>
      <td>아코디언(접이식) 콘텐츠를 삽입합니다.</td>
      <td>accordionremove</td>
      <td>아코디언 콘텐츠를 제거합니다.</td>
    </tr>
    <tr>
      <td>blocks</td>
      <td>텍스트 블록 스타일을 변경합니다 (예: 제목, 본문 등).</td>
      <td>fontfamily</td>
      <td>글꼴 종류를 선택합니다.</td>
    </tr>
    <tr>
      <td>fontsize</td>
      <td>글꼴 크기를 선택합니다.</td>
      <td>bold</td>
      <td>텍스트를 굵게 만듭니다.</td>
    </tr>
    <tr>
      <td>italic</td>
      <td>텍스트를 기울임꼴로 만듭니다.</td>
      <td>underline</td>
      <td>텍스트에 밑줄을 긋습니다.</td>
    </tr>
    <tr>
      <td>strikethrough</td>
      <td>텍스트에 취소선을 긋습니다.</td>
      <td>align</td>
      <td>텍스트 정렬을 설정합니다 (왼쪽, 가운데, 오른쪽, 양쪽 정렬).</td>
    </tr>
    <tr>
      <td>numlist</td>
      <td>번호 매기기 목록을 만듭니다.</td>
      <td>bullist</td>
      <td>글머리 기호 목록을 만듭니다.</td>
    </tr>
    <tr>
      <td>link</td>
      <td>하이퍼링크를 삽입하거나 편집합니다.</td>
      <td>image</td>
      <td>이미지를 삽입합니다.</td>
    </tr>
    <tr>
      <td>table</td>
      <td>표를 삽입하거나 편집합니다.</td>
      <td>media</td>
      <td>비디오나 오디오 파일을 삽입합니다.</td>
    </tr>
    <tr>
      <td>lineheight</td>
      <td>줄 간격을 설정합니다.</td>
      <td>outdent</td>
      <td>들여쓰기를 줄입니다.</td>
    </tr>
    <tr>
      <td>indent</td>
      <td>들여쓰기를 늘립니다.</td>
      <td>forecolor</td>
      <td>텍스트 색상을 변경합니다.</td>
    </tr>
    <tr>
      <td>backcolor</td>
      <td>텍스트 배경 색상을 변경합니다.</td>
      <td>removeformat</td>
      <td>텍스트의 서식을 제거합니다.</td>
    </tr>
    <tr>
      <td>charmap</td>
      <td>특수 문자를 삽입합니다.</td>
      <td>code</td>
      <td>HTML 코드를 편집합니다.</td>
    </tr>
    <tr>
      <td>fullscreen</td>
      <td>편집기를 전체 화면 모드로 전환합니다.</td>
      <td>preview</td>
      <td>편집된 내용을 미리 봅니다.</td>
    </tr>
    <tr>
      <td>save</td>
      <td>문서를 저장합니다.</td>
      <td>print</td>
      <td>문서를 인쇄합니다.</td>
    </tr>
    <tr>
      <td>pagebreak</td>
      <td>페이지 나누기를 삽입합니다.</td>
      <td>anchor</td>
      <td>앵커(북마크)를 삽입합니다.</td>
    </tr>
    <tr>
      <td>codesample</td>
      <td>코드 샘플을 삽입합니다.</td>
      <td>ltr</td>
      <td>텍스트 방향을 왼쪽에서 오른쪽으로 설정합니다.</td>
    </tr>
    <tr>
      <td>rtl</td>
      <td>텍스트 방향을 오른쪽에서 왼쪽으로 설정합니다.</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</details>

<Source  
code={`
import { Editor } from '@lotte-innovate/lui';

export default () => (
  <Editor
    init={{
      toolbar:
        'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline
         strikethrough | align numlist bullist | link image | table media | lineheight outdent indent|
          forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak
           anchor codesample | ltr rtl',
    }}
  />
);
`}
/>

<br />

`editor` init에서 사용할 수 있는 옵션은 다음과 같습니다.

<details>
  <summary>init 옵션</summary>

<table>
  <thead>
    <tr>
      <th>옵션</th>
      <th>설명</th>
      <th>예시</th>
      <th>예시설명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>language</td>
      <td>편집기의 언어를 설정합니다.</td>
      <td><code>language: 'ko_KR'</code></td>
      <td>한국어로 설정</td>
    </tr>
    <tr>
      <td>width</td>
      <td>편집기의 너비를 설정합니다.</td>
      <td><code>width: 800</code></td>
      <td>800픽셀 너비로 설정</td>
    </tr>
    <tr>
      <td>height</td>
      <td>편집기의 높이를 설정합니다.</td>
      <td><code>height: 600</code></td>
      <td>600픽셀 높이로 설정</td>
    </tr>
    <tr>
      <td>promotion</td>
      <td>TinyMCE의 프로모션 배너를 표시할지 여부를 설정합니다.</td>
      <td><code>promotion: false</code></td>
      <td>프로모션 배너를 숨김</td>
    </tr>
    <tr>
      <td>plugins</td>
      <td>사용할 플러그인 목록을 설정합니다.</td>
      <td><code>plugins: 'link image code'</code></td>
      <td>링크, 이미지, 코드 플러그인 사용</td>
    </tr>
    <tr>
      <td>menubar</td>
      <td>메뉴바를 표시할지 여부를 설정합니다.</td>
      <td><code>menubar: true</code></td>
      <td>메뉴바를 표시</td>
    </tr>
    <tr>
      <td>toolbar</td>
      <td>툴바에 표시할 도구들을 설정합니다.</td>
      <td><code>toolbar: 'undo redo | formatselect | bold italic'</code></td>
      <td>툴바에 취소, 다시 실행, 서식 선택, 굵게, 기울임꼴 도구 표시</td>
    </tr>
    <tr>
      <td>autosave_ask_before_unload</td>
      <td>페이지를 떠나기 전에 자동 저장된 내용을 복원할지 묻는 메시지를 표시할지 여부를 설정합니다.</td>
      <td><code>autosave_ask_before_unload: true</code></td>
      <td>페이지를 떠나기 전에 묻기</td>
    </tr>
    <tr>
      <td>autosave_interval</td>
      <td>자동 저장 간격을 설정합니다.</td>
      <td><code>autosave_interval: '30s'</code></td>
      <td>30초마다 자동 저장</td>
    </tr>
    <tr>
      <td>autosave_restore_when_empty</td>
      <td>편집기가 비어 있을 때 자동 저장된 내용을 복원할지 여부를 설정합니다.</td>
      <td><code>autosave_restore_when_empty: true</code></td>
      <td>비어 있을 때 자동 저장된 내용 복원</td>
    </tr>
    <tr>
      <td>autosave_retention</td>
      <td>자동 저장된 내용의 보존 기간을 설정합니다.</td>
      <td><code>autosave_retention: '2m'</code></td>
      <td>2분 동안 자동 저장된 내용 보존</td>
    </tr>
    <tr>
      <td>image_advtab</td>
      <td>이미지 대화 상자에 고급 탭을 표시할지 여부를 설정합니다.</td>
      <td><code>image_advtab: true</code></td>
      <td>고급 탭 표시</td>
    </tr>
    <tr>
      <td>image_caption</td>
      <td>이미지 캡션을 사용할지 여부를 설정합니다.</td>
      <td><code>image_caption: true</code></td>
      <td>이미지 캡션 사용</td>
    </tr>
    <tr>
      <td>quickbars_selection_toolbar</td>
      <td>텍스트 선택 시 표시되는 퀵바 툴바를 설정합니다.</td>
      <td><code>quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'</code></td>
      <td>굵게, 기울임꼴, 빠른 링크, 제목2, 제목3, 인용구 도구 표시</td>
    </tr>
    <tr>
      <td>toolbar_mode</td>
      <td>툴바 모드를 설정합니다.</td>
      <td><code>toolbar_mode: 'sliding'</code></td>
      <td>슬라이딩 모드로 설정</td>
    </tr>
    <tr>
      <td>content_style</td>
      <td>편집기 콘텐츠의 스타일을 설정합니다.</td>
      <td><code>content_style: `body { font-family: Arial; font-size: 14px; }`</code></td>
      <td>본문에 Arial 글꼴과 14픽셀 글꼴 크기 적용</td>
    </tr>
  </tbody>
</table>
</details>

<Source  
code={`
import { Editor } from '@lotte-innovate/lui';

export default () => (
  <Editor
    init={{
      language: 'ko_KR',
      width: '100%',
      height: '100%',
      promotion: false,
      plugins:
        'preview importcss searchreplace autolink autosave save directionality code 
        visualblocks visualchars fullscreen image link media codesample table charmap 
        pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion',
      menubar: 'file edit view insert format tools table',
      toolbar:
        'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic 
        underline strikethrough | align numlist bullist | link image | table media | lineheight 
        outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | 
        save print | pagebreak anchor codesample | ltr rtl',
      autosave_ask_before_unload: true,
      autosave_interval: '30s',
      autosave_restore_when_empty: false,
      autosave_retention: '2m',
      image_advtab: true,
      image_caption: true,
      quickbars_selection_toolbar: '',
      toolbar_mode: 'sliding',
    }}
  />
);
`}
/>

<br />

## Variant

### Language

`language` props는 에디터의 언어를 변경합니다.

`한국어`, `영어`, `중국어`, `일본어`, `베트남어`, `이탈리아어`를 지원하며 기본 값은 `영어` 입니다.

<Source
  code={`
<Editor language="ko_KR" /> // 한국어
<Editor language="en" /> // 영어
<Editor language="zh_CN" /> // 중국어
<Editor language="ja" /> // 일본어
<Editor language="vi" /> // 베트남어
<Editor language="it" /> // 이탈리아어
`}
/>

### Customize

필요한 기능만 선택적으로 로드할 수 있습니다.

<Canvas of={EditorStories.Customize} />