크라우니 오피스 문서 편집기 — 삽입 3종(표·이미지·링크) punch #5

개요

spec/오피스-개발계획.md Phase1-A 착수순서 4번 "삽입 3종(표/이미지/링크)". 판정표(spec/문서기능-판정표.md) 기준 세 버튼(▦ 표·🖼 이미지·🔗 링크) 모두 onClick 자체가 없는 정적 div(판정=없음) → crownyBridge.js에 신규 로직을 이어붙여 실제 삽입 기능으로 배선. 브릿지 1~4차(서식·상태바·실행취소·찾기) 패턴 그대로 계승: 앱 번들(bundle/office/app/index.html) 무수정, JS는 콘텐츠 마커(정확한 textContent)로 죽은 버튼을 식별해 리스너를 얹는다.

무엇을 했는지

1. 표 삽입 — ▦ 표 버튼 클릭 → 앵커 근처 팝오버(8×8 호버 그리드) → 선택한 R×C로

<table>(문서 톤 #E2D9C8 테두리) 삽입. 팝오버는 투명 전체화면 캐처로 바깥클릭/Esc 닫힘.

1. 이미지 삽입 — 🖼 버튼 → 숨김 file input(accept=image/*) 클릭 유도, FileReader로

data URI 변환 후 <img> 삽입. 편집영역 드래그드롭(dragover/drop)도 지원, 드롭 좌표는 caretRangeFromPoint로 캐럿 위치 산출.

1. 링크 삽입 — 🔗 버튼 → 선택 텍스트 있으면 그 텍스트+URL 입력만, 없으면 표시텍스트+URL

둘 다 입력하는 다이얼로그. sanitizeUrl()이 javascript:/data:/vbscript:/file: 위험 스킴을 차단(빈 문자열 반환 시 삽입 거부+오류 문구), http/https/mailto/tel/crowny://+상대경로는 통과, 스킴 없는 평문은 https:// 자동 접두, 미상 스킴은 fail-closed 차단.

1. 세 삽입 모두 flushHistory()→execCommand('insertHTML')→commitSnapshot() 패턴으로

실행취소 스택(punch #3)에 연동. HTML 이스케이프(escapeHtml/escapeAttr)로 사용자 입력 텍스트의 마크업 주입 방지.

1. 다이얼로그/팝오버는 문서 톤(크림 #FDFBF7 배경·골드 #C9A961 액센트·라운드) 통일, Esc로 닫힘.
2. 한선씨 정본 미러 bundle/office/bridge/삽입개체.한선 신규 — 표HTML생성/행열경계클램프/

URL정규화/이미지참조검증/HTML이스케이프/링크HTML생성. hanseonc_high 컴파일 + crownyc run 자체시험 25/25 PASS.

실측 검증(Chrome CDP :9333, cdp평가.js, 실 DOM 조작)

• 표: 3×3 그리드 클릭 → <table> tr=3·td=9 삽입 확인, ⌘Z undo로 1(기존 가격표)로 복귀.
• 이미지: 합성 DragEvent('drop') + File(png)로 data:image/png 삽입 확인, ⌘Z undo로 0으로 복귀.
• 링크: 텍스트 선택 후 javascript:alert(1) 입력 → 삽입 거부(오류 문구 표시, <a> 0개,

다이얼로그 유지) 확인. 이어서 https://crowny.org/docs 입력 → `<a href rel="noopener noreferrer">` 생성 확인, ⌘Z undo로 제거 확인.

• 회귀: 서식(B, HTML 변화 확인)·상태바(단어수 실시간)·⌘F 찾기바(타이밍 보정 후 open/close

정상, 최초 테스트의 "false"는 rAF 대기 누락한 테스트 스크립트 결함이었음)·undo 버튼 색상 전부 정상. 최종 문서 상태를 원본 baseline(innerHTML 3804자, table 1, img 0, a 0)으로 완전 복원 확인.

• CrownyAI 네이티브 바이너리(native/CrownyAI) 무변경 3초 생존 확인(native 코드 수정 없음).

관련 파일

• /Users/ef/crownybrowser/bundle/office/bridge/crownyBridge.js — 섹션 9(삽입 3종) 추가
• /Users/ef/crownybrowser/bundle/office/bridge/삽입개체.한선 — 신규, 자체시험 25/25
• /Users/ef/crownybrowser/spec/문서기능-판정표.md — punch #5 정의 근거
• /Users/ef/crownybrowser/spec/오피스-개발계획.md — Phase1-A 착수순서

발견/수정한 함정

• 처음 작성 시 sanitizeUrl의 제어문자 제거 정규식(/[\x00-\x1F\x7F]/g)이 Edit 도구 파이프라인을

거치며 리터럴 텍스트가 아니라 실제 raw 제어바이트로 소스에 박히는 문제 발생(cat -v로 확인, Read 도구는 이를 렌더링상 [ -]처럼 보여줘 오탐 유발). 정규식 리터럴 대신 코드값 루프 (stripControlChars, 한선씨 정본 제어문자제거()와 1:1 대응)로 재작성해 회피 — 향후 이 VM/도구 파이프라인에서 \x 계열 이스케이프를 JS 문자열에 직접 넣을 때 주의 필요.

잔여 이슈

• 이미지 삽입 크기 상한 없음(대용량 파일 선택 시 문서가 비대해질 수 있음) — Phase2 저장/출력

안정화에서 검토 후보.

• 표 팝오버 그리드 상한 8×8 고정(더 큰 표는 삽입 후 표고급.한선 행삽입/열삽입 UI 연결 필요 —

아직 UI 미연결, 정책 함수만 존재).

• 판정표 punch list 잔여: 개요 실동기화, 댓글 CRUD, 히스토리 실스냅샷, 키보드 단축키 배선,

툴바 드롭다운 3종(스타일/폰트/크기).