메뉴
suneditor 라이브러리를 최신 버전으로 업데이트하고, 릴리즈 노트를 분석하여 데모 사이트에 변경사항을 반영한다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | update-editor |
| description | suneditor 라이브러리를 최신 버전으로 업데이트하고, 릴리즈 노트를 분석하여 데모 사이트에 변경사항을 반영한다. |
# 현재 설치 버전 확인
node -e "console.log(require('./node_modules/suneditor/package.json').version)"
# npm 최신 버전 확인
npm view suneditor version
# 최신 버전 설치
npm i suneditor@latest
설치 후 현재 버전과 새 버전을 기록한다.
버전 적용 여부 확인:
사용자가 이미 버전 업데이트 후 이 스킬을 호출하는 경우가 있다. 에디터 버전이 데모에 반영됐는지 확인하려면 api-docs.en.json의 version 필드와 node_modules/suneditor/package.json의 version을 비교한다:
# 데모에 반영된 버전 (api-docs 기준)
node -e "console.log(require('./src/data/api/api-docs.en.json').version)"
# 실제 설치된 suneditor 버전
node -e "console.log(require('./node_modules/suneditor/package.json').version)"
GitHub releases API로 현재 버전 이후의 모든 릴리즈 노트를 확인한다:
gh api repos/JiHong88/SunEditor/releases --jq '.[] | "\(.tag_name)\n\(.body)\n---"'
node_modules에 릴리즈 노트 파일이 없으므로 반드시 GitHub API로 확인한다.
릴리즈 노트의 각 항목을 분류:
| 유형 | 키워드 | 데모 사이트 반영 방법 |
|---|---|---|
| Breaking Change | ⚠️ Breaking, rename, removed, replaced | 최우선 처리. .editor-guide/DEMO-UPDATE-GUIDE.md 의 Step 3 참조 |
| New Option | new option, added | playground state/controls/codeGenerator에 추가 |
| New Plugin | new plugin | 버튼 + 옵션 + 기능데모 전부 추가 |
| Default Change | default changed | DEFAULTS 값만 수정 |
| Enhancement/Bugfix | improve, fix | 데모 수정 불필요 (대부분) |
Breaking changes가 있으면 반드시 먼저 처리한다.
플러그인/옵션 이름 변경 시:
grep -r "old_name" src/ server/ __tests__/ 로 모든 참조 찾기src/data/v2-to-v3-options.ts 갱신 (아래 v2 마이그레이션 섹션 참조)옵션 삭제 시 (removed):
grep -r "removed_name" src/ server/ __tests__/ 로 모든 참조 제거src/data/v2-to-v3-options.ts에 v3: null, note: "Removed in v3.x.x" 항목 추가 (v2 사용자가 마이그레이션 페이지에서 무엇이 사라졌는지 알 수 있어야 한다)옵션 구조 변경 시:
node_modules/suneditor/types/v2-to-v3-options.ts의 해당 항목 v3 경로/transform 노트 갱신v2 → v3 마이그레이션 매핑 갱신 (src/data/v2-to-v3-options.ts):
이 파일은 /migration 페이지(src/app/[locale]/migration/page.tsx)가 import하여 v2 사용자에게 옵션 변환표를 보여준다. v3에서 옵션/버튼/이벤트가 rename·remove·이동되면 반드시 함께 수정해야 마이그레이션 페이지가 stale 해지지 않는다. 세 개의 export가 있다:
OPTION_MAP: MigrationEntry[] — flat 옵션 + nested 플러그인 옵션 (dot notation, 예: "image.uploadUrl")BUTTON_MAP: Record<string, string> — 툴바 버튼 이름 변경EVENT_MAP: Record<string, string | null> — 이벤트 핸들러 이름 변경 (null = 제거됨)체크리스트:
v3 값을 새 이름으로 수정하고 note: "Renamed" 추가v3: null, note: "Removed in v3.x.x" (또는 OPTION_MAP의 경우 MigrationEntry 그대로 두고 v3만 null로)v3: "plugin.subKey", note: "Moved to plugin option" (예: mathFontSize → math.fontSizeList)transform: "..." 힌트 추가마이그레이션 페이지는 v2 → v3 일방향 안내용이다. v3 내부 패치(3.1 → 3.2 등)에서 옵션이 또 한 번 rename되면 OPTION_MAP의
v3값을 최신 v3 이름으로 덮어쓰는다 (체이닝하지 않는다 — v2 사용자는 항상 최신 v3로 점프한다).
.editor-guide/DEMO-UPDATE-GUIDE.md의 시나리오별 체크리스트를 따른다:
npm test # integrity 테스트로 누락 감지
변경사항이 가이드 문서에 영향을 주면 함께 수정:
.editor-guide/GUIDE.md — 플러그인 목록, 디렉토리 구조 등.editor-guide/DEMO-UPDATE-GUIDE.md — 예시, 파일 목록 등⚠️ 링크된 하위 md 파일도 반드시 함께 점검한다.
GUIDE.md 및 DEMO-UPDATE-GUIDE.md는 다른 md 파일들을 링크로 참조한다 (예: ./ARCHITECTURE.md, ./guide/custom-plugin.md, ./guide/external-libraries.md, ./guide/typedef-guide.md 등). 이 파일들은 시간이 지나면서 새로 생기거나, 이름이 바뀌거나, 삭제될 수 있다. 단순히 GUIDE.md만 수정하면 링크된 파일 내용이 stale 해지는 일이 잦으니 다음을 반드시 수행:
링크 추출 및 존재 여부 검증 — GUIDE.md / DEMO-UPDATE-GUIDE.md 내 모든 상대경로 md 링크를 추출해 실제 파일 존재 여부를 확인한다:
# GUIDE.md/DEMO-UPDATE-GUIDE.md가 참조하는 md 파일 목록 추출
grep -oE '\([^)]+\.md\)' .editor-guide/GUIDE.md .editor-guide/DEMO-UPDATE-GUIDE.md \
| sed -E 's/[():]//g' | sort -u
# 실제 존재하는 .editor-guide 내 md 파일 목록
find .editor-guide -name "*.md" -type f
불일치 처리:
링크된 문서 본문 점검 — 새 옵션/플러그인이 추가됐거나 Breaking Change가 있었다면, 링크된 하위 md 파일(특히 custom-plugin.md, typedef-guide.md, external-libraries.md 등) 내부도 갱신 대상이다. 단순히 GUIDE.md만 보지 말고 링크 타고 들어가서 내용까지 검토한다.
⚠️ 데모 사이트 렌더링 레지스트리 동기화 (500 에러 방지) — 데모의 Deep Dive 가이드 페이지(/deep-dive/guide/*)는 GitHub raw에서 md를 받아 렌더링한다. GUIDE.md에서 링크로 참조되는 md 파일은 반드시 아래 두 곳에 등록되어야 하며, 누락되면 링크 클릭 시 500/notFound가 발생한다:
src/lib/git/githubMarkdown.ts → GUIDE_FILES 맵에 slug → GitHub 파일 경로 추가 (예: "coding-rules": "prompts/coding-rules.md"). slug은 URL 세그먼트(/deep-dive/guide/coding-rules)가 된다.src/app/[locale]/deep-dive/guide/[...slug]/page.tsx → TITLES 맵에 동일 slug의 표시용 제목 추가.링크 렌더링(src/components/common/MarkdownRenderer.tsx의 resolveHref)은 파일명(basename) 기준으로 매칭하므로 ./x.md, ../x.md, ../guide/x.md, prompts/x.md 등 상대경로 형태는 자동 대응된다. 단 매칭 대상이 GUIDE_FILES에 등록돼 있어야 한다.
검증 체크리스트:
GUIDE_FILES에 있는가? (grep -oE '\([^)]+\.md' .editor-guide/GUIDE.md 결과와 GUIDE_FILES 값 비교)TITLES에도 있는가?curl -s -o /dev/null -w "%{http_code}" https://raw.githubusercontent.com/JiHong88/SunEditor/master/<경로> → 200)GUIDE_FILES/TITLES에서도 함께 갱신/제거했는가?npx tsc --noEmit 통과하는가?모든 코드 변경이 끝난 후 마지막에 실행한다.
docs:generate는 버전 업데이트 시 내용에 상관없이 반드시 실행한다.
# 1) API 문서 재생성 (suneditor 타입에서 추출) — 항상 실행
npm run docs:generate
실행 후 git diff로 변경사항을 확인한다. 변경사항이 있으면 번역을 실행:
# 2) docs:generate에서 변경사항이 있는 경우에만 실행
npm run docs:translate
# 3) messages/*.json 변경이 있는 경우에만 실행 (i18n 키 추가/변경/삭제 시)
npm run messages:translate
messages:translate 실행 조건:
messages/en.json에 새 키를 추가한 경우