Editor

Markdown 변환

specToMarkdown와 markdownToSpec으로 EditorSpec ↔ Markdown 양방향 변환. AI 컨텍스트 전달과 마크다운 가져오기에 사용합니다.

reopt design업데이트 2026년 6월 26일

1. 개요

두 함수 모두 zero-dependency이며 15개 블록 타입을 지원합니다. 인라인 마크(**bold**, *italic* 등)는 텍스트에 그대로 보존됩니다.

EditorSpec  ─── specToMarkdown() ──→  Markdown string
                                                 ↓
             AI 에이전트 컨텍스트 / 파일 내보내기
                                                 ↓
Markdown    ─── markdownToSpec() ──→  EditorSpec

2. specToMarkdown

EditorSpec을 Markdown 문자열로 변환합니다. AI 에이전트에게 현재 문서 상태를 전달할 때 사용합니다.

tsx

import { specToMarkdown } from "@reopt-ai/opt-editor";

const markdown = specToMarkdown(store.getSpec());
// → "# Title\n\nSome **bold** text\n\n| Name | Age |\n| --- | --- |\n| Alice | 30 |"

// AI 에이전트에게 컨텍스트 전달
const messages = [
  { role: "system", content: catalog.prompt() },
  { role: "user", content: `현재 문서:\n${markdown}\n\n이 문서에 결론을 추가해줘.` },
];

3. markdownToSpec

Markdown 문자열을 EditorSpec으로 변환합니다. 기존 마크다운 콘텐츠를 에디터로 가져올 때 사용합니다.

tsx

import { markdownToSpec, createEditorStore } from "@reopt-ai/opt-editor";

const markdown = `# Getting Started

Welcome to the **editor**.

- Feature one
- Feature two

> [!WARNING]
> This is important!
`;

const spec = markdownToSpec(markdown);
const store = createEditorStore(spec);
// → 에디터에 heading + paragraph + list + callout 렌더링

4. 지원 블록 매핑

Markdown	Block type	비고
# ~ ######	heading	level 1-6
plain text	paragraph
```lang ... ```	code	language 자동 감지
---	divider
> text	quote
> [!TYPE]	callout	GitHub admonition 형식
- / 1.	list + list-item	ordered/unordered
\| ... \| ... \|	table family	GFM 테이블
![alt](src)	image	다음 줄 caption 감지

video, file, embed는 마크다운 표준 문법이 없으므로 specToMarkdown에서 링크 형태로 출력되지만, markdownToSpec에서는 일반 링크와 구분이 불가하여 paragraph로 파싱됩니다.

5. 왕복 변환

대부분의 블록은 왕복 변환이 정확합니다. 아래는 테스트로 검증된 왕복 지원 블록입니다:

paragraph, heading, code, divider, quote
unordered list, ordered list
table (GFM separator 포함)
image (caption 포함)
callout (멀티라인 지원)
인라인 마크 (bold, italic, code, strikethrough, link)

1. 개요

두 함수 모두 zero-dependency이며 15개 블록 타입을 지원합니다. 인라인 마크(**bold**, *italic* 등)는 텍스트에 그대로 보존됩니다.

EditorSpec  ─── specToMarkdown() ──→  Markdown string
                                                 ↓
             AI 에이전트 컨텍스트 / 파일 내보내기
                                                 ↓
Markdown    ─── markdownToSpec() ──→  EditorSpec

2. specToMarkdown

EditorSpec을 Markdown 문자열로 변환합니다. AI 에이전트에게 현재 문서 상태를 전달할 때 사용합니다.

tsx

import { specToMarkdown } from "@reopt-ai/opt-editor";

const markdown = specToMarkdown(store.getSpec());
// → "# Title\n\nSome **bold** text\n\n| Name | Age |\n| --- | --- |\n| Alice | 30 |"

// AI 에이전트에게 컨텍스트 전달
const messages = [
  { role: "system", content: catalog.prompt() },
  { role: "user", content: `현재 문서:\n${markdown}\n\n이 문서에 결론을 추가해줘.` },
];

3. markdownToSpec

Markdown 문자열을 EditorSpec으로 변환합니다. 기존 마크다운 콘텐츠를 에디터로 가져올 때 사용합니다.

tsx

import { markdownToSpec, createEditorStore } from "@reopt-ai/opt-editor";

const markdown = `# Getting Started

Welcome to the **editor**.

- Feature one
- Feature two

> [!WARNING]
> This is important!
`;

const spec = markdownToSpec(markdown);
const store = createEditorStore(spec);
// → 에디터에 heading + paragraph + list + callout 렌더링

4. 지원 블록 매핑

Markdown	Block type	비고
# ~ ######	heading	level 1-6
plain text	paragraph
```lang ... ```	code	language 자동 감지
---	divider
> text	quote
> [!TYPE]	callout	GitHub admonition 형식
- / 1.	list + list-item	ordered/unordered
\| ... \| ... \|	table family	GFM 테이블
![alt](src)	image	다음 줄 caption 감지

5. 왕복 변환

대부분의 블록은 왕복 변환이 정확합니다. 아래는 테스트로 검증된 왕복 지원 블록입니다:

paragraph, heading, code, divider, quote

unordered list, ordered list

table (GFM separator 포함)

image (caption 포함)

callout (멀티라인 지원)

인라인 마크 (bold, italic, code, strikethrough, link)