> ## Documentation Index
> Fetch the complete documentation index at: https://make.edicus.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 편집기 커맨드

> 편집기로 보낼 수 있는 커맨드와 payload

호스트 페이지가 편집기로 보내는 메시지입니다. `session.post(action, info)`로 보냅니다. payload 타입은 `@edicus/sdk/types`의 `EditorCommandMap`에 있습니다.

```ts theme={null}
session.post('command', { type: 'save', force_save: true })
```

편집기는 자체 UI로 대부분을 처리하므로, 커맨드는 내 페이지에서 편집기 동작을 직접 일으켜야 할 때 씁니다.

## 자주 쓰는 커맨드

### `command`

undo, redo, 저장 같은 편집 명령입니다.

<ParamField body="type" type="string" required>
  편집기가 실제로 분기해 처리하는 값 전체입니다.

  `'undo'`, `'redo'`, `'save'`, `'save-then-close'`, `'preview'`, `'close-preview'`, `'cancel-imposing'`, `'save-imposing-then-close'`, `'request-doc-report'`, `'test'`, `'alert-back'`
</ParamField>

<ParamField body="force_save" type="boolean">
  변경사항이 없어도 저장을 강제합니다.
</ParamField>

<ParamField body="show_progress" type="boolean">
  진행 표시를 보여줍니다.
</ParamField>

```ts theme={null}
session.post('command', { type: 'undo' })
session.post('command', { type: 'redo' })
session.post('command', { type: 'save', force_save: true })
```

<Note>
  과거 문서에는 `undo`, `redo`, `save` 세 가지만 실려 있었습니다. 위 목록이 편집기가 실제로 처리하는 전체입니다.
</Note>

### `add-image`

이미지를 삽입합니다.

<ParamField body="src_type" type="string" required>
  이미지 소스 종류입니다. `'file-input'`은 파일 불러오기 창으로 로컬 파일을 추가합니다.
</ParamField>

<ParamField body="method" type="string" required>
  추가 방법입니다. `'add'`는 마지막 아이템으로 추가합니다.
</ParamField>

<ParamField body="item_type" type="string" required>
  추가할 아이템 종류입니다. `'cell'`은 사진틀로, `'sticker'`는 스티커로 추가합니다.
</ParamField>

```ts theme={null}
session.post('add-image', {
  src_type: 'file-input',
  method: 'add',
  item_type: 'sticker',
})
```

### `add-text`

텍스트를 삽입합니다.

<ParamField body="variable" type="varInfo">
  외부연동 변수 정보입니다.

  <Expandable title="varInfo">
    <ParamField body="type" type="string">외부연동 action 타입입니다. `input` 또는 `select`입니다.</ParamField>
    <ParamField body="id" type="string">외부연동에 쓸 아이템 id입니다.</ParamField>
    <ParamField body="title" type="string">외부연동 아이템의 title입니다.</ParamField>
    <ParamField body="group_id" type="string">`select` 타입일 때의 group id입니다.</ParamField>
    <ParamField body="extra" type="any">외부연동 부가 데이터입니다. 구조가 정의돼 있지 않습니다.</ParamField>
  </Expandable>
</ParamField>

<ParamField body="data" type="object">
  <Expandable title="data">
    <ParamField body="text" type="string">텍스트 내용입니다.</ParamField>
    <ParamField body="font_size" type="number">폰트 크기입니다. pt 단위입니다.</ParamField>
    <ParamField body="align" type="'left' | 'center' | 'right'">가로 정렬입니다.</ParamField>
  </Expandable>
</ParamField>

```ts theme={null}
session.post('add-text', {
  variable: { type: 'input', id: '_text_001_', title: '이름', group_id: '', extra: undefined },
  data: { text: '내용을 입력하세요', font_size: 10, align: 'left' },
})
```

### `var-changed`

호스트 쪽에서 외부연동 텍스트의 값이 바뀌었음을 편집기에 알립니다.

```ts theme={null}
session.post('var-changed', {
  variable: { type: 'input', id: '_text_001_', title: '이름', group_id: '', extra: undefined },
  data: { text: '새 이름' },
})
```

### `request-feature`

편집기의 부가 UI를 요청합니다. 편집기가 상황에 따라 거부할 수 있습니다. `ready-to-listen`을 받은 직후에 보내시는 것을 권합니다.

<ParamField body="feature" type="string" required>
  요청하는 기능입니다. 현재 `'promo-window'`(프로모션 화면)를 쓸 수 있습니다.
</ParamField>

<ParamField body="option" type="object">
  <Expandable title="option@promo-window">
    <ParamField body="preferredWidth" type="number">원하는 화면 너비입니다. 제한될 수 있습니다.</ParamField>
    <ParamField body="preferredHeight" type="number">원하는 화면 높이입니다. 제한될 수 있습니다.</ParamField>
    <ParamField body="url" type="string">iframe에 띄울 주소입니다.</ParamField>
    <ParamField body="opened" type="boolean">시작할 때 화면을 활성화할지입니다.</ParamField>
  </Expandable>
</ParamField>

```ts theme={null}
session.on('ready-to-listen', () => {
  session.post('request-feature', {
    feature: 'promo-window',
    option: { preferredWidth: 480, preferredHeight: 600, url: 'https://...', opened: true },
  })
})
```

<Note>
  `option`의 필드는 `preferredWidth`처럼 camelCase입니다. 다른 대부분의 위치는 snake\_case를 씁니다.
</Note>

### `send-user-token`

`request-user-token`에 대한 수동 응답입니다.

<ParamField body="token" type="string" required>
  새로 발급받은 토큰입니다.
</ParamField>

```ts theme={null}
session.post('send-user-token', { token })
```

`createEdicusClient({ getToken })`을 설정하셨다면 SDK가 자동으로 보내므로 직접 부를 필요가 없습니다.

## 전체 커맨드 목록

`type`은 전부 `to-edicus`입니다.

| action | payload 타입 | 비고 |
| - | - | - |
| `command` | `CommandInfo` | 위 설명을 보세요 |
| `select-page` | `SelectPageInfo` | |
| `execute-ddp-block` | `{ ddp_block: unknown; history_label?: string }` | |
| `var-changed` | `{ variable?: VarInfo; data?: { text: string } }` | 추가 필드를 허용합니다 |
| `add-image` | `AddImageInfo` | |
| `add-text` | `AddTextInfo` | |
| `set-cell-src-infos` | `SetCellSrcInfos` | |
| `clear-cell-src` | `ClearCellSrc` | |
| `get-scene-info` | `GetSceneInfo` | |
| `save-snapshot` | `SaveSnapshotInfo` | |
| `capture-gallery` | `CaptureGalleryInfo` | |
| `request-feature` | `RequestFeatureInfo` | |
| `apply-reform` | `ApplyRefromInfo` | 타입 이름이 `Reform`이 아니라 `Refrom`입니다. 오타 그대로입니다 |
| `set-mutable-prod-var` | `SetProdVarsInfo` | |
| `return-message` | `{ action: string; info: unknown }` | |
| `auto-fill-photo` | `unknown` | |
| `import-project` | `ImportProjectInfo` | |
| `change-toolbar-prefix-html` | `{ html: string }` | |
| `send-user-token` | `{ token: string }` | `request-user-token`에 대한 응답입니다 |

## 다음 단계

<Columns cols={2}>
  <Card title="편집기 이벤트" icon="arrow-left" href="/docs/sdk/events">
    커맨드의 결과로 오는 이벤트를 봅니다.
  </Card>

  <Card title="닫기와 저장 후처리" icon="door-closed" href="/docs/sdk/exit">
    저장이 끝난 뒤에 안전하게 화면을 떠납니다.
  </Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.