크라우니 오피스 아웃라인 punch #1 — flat[] hoist + 주제 텍스트 편집
개요
ModuleOutline(노션식 5열 계층 개요 뷰어)의 트리 데이터
flat[](10항목)이
renderVals 내부
로컬 const 라 편집 대상 모델이 없었다(마인드맵과 동형). 이를
state.nodes(parentId 포인터 트리)로
승격(hoist)하고, 표의 주제(제목) 셀을 contentEditable 로 만들어 편집이 모델에 영속되도록 배선했다.
앱 번들 무수정 — crownyBridge.js 신규
§23 installOutlineBridge(마인드맵 §21 대칭).
무엇을 했는지
- flat[] hoist: 로컬 const flat →
state.nodes{id, parentId, topic, status, owner, due, note,
urgent, foldCount}. id 접두계층(s111) 폐기 → parentId 포인터로 트리 구성(section=parentId==''·
depth=조상체인·kids=childrenOf 파생). collapse 는 원본 state.open(id 키맵) 그대로 유지 →
expandAll/collapseAll/toggle·초기 s12 접힘 무회귀.
- renderVals 재구현(buildVals): 원본 style 문자열·grid·상태배지·hoist·맵뷰 규칙 1:1 보존,
데이터 소스만 로컬 const → 모델 교체.
window.__dcRegistry.ModuleOutline.Logic.prototype.renderVals
폴링 몽키패치(
__crownyOutlinePatched 가드).
- 주제 텍스트 편집: fiber walk 로 라이브 인스턴스 획득(state 마커 colVis/filter/mapView/hoist),
DOM-fixup 폴링(150ms)이 표 주제 셀을 contentEditable 로 승격 + input(라이브 writeback)/blur
(setState 동기화) 배선.
- ★핵심 함정(CDP 실측): DCLogic 은
{{ r.topic }} 보간을 바른 텍스트노드가 아니라 자체
ELEMENT 로 렌더한다(포커스 §22 제목 span 과 동형, 마인드맵 §21 텍스트노드와 상반). 편집 대상 =
topicStyle div 의
children[1](chev[0]·주제[1]·foldBadge[2]). 프레임워크가 그 요소를 재사용하므로
편집중 아닌 셀은 매 fixup 모델값으로 setText 강제 정합(맵뷰 전환/재렌더 유실 방지).
- ★2차 함정: 브라우저가 inline style 을 rgb()/공백 정규화(#F6F2EB→rgb(246,242,235),
flex-direction: column) → 색·간격 리터럴 매칭 폐기. 헤더는 textContent('주제 TOPIC')로만 식별·제외.
게이트 결과
- 아웃라인모델.한선 hanseonc_high 자체시험 28/28 PASS(주제편집·트리순회·항목별독립·접기보존·
hoist·빈트리).
- 문서 회귀 하니스 27/27 PASS(시트/슬라이드/맵/포커스/문서 무영향, 아웃라인은 신규 §23).
- 아웃라인 CDP 라이브 검증 15/15 PASS: 모델구동(10노드·parentId)·주제편집 writeback·표셀 배선·
맵뷰 전환 후 유지(모델+setText)·재렌더 유지·항목별 독립·카운트/접기/필터/상태배지/들여쓰기 무회귀.
(./CrownyAI 는 GUI 셸 점유로 CDP 라이브검증 대체 — 바이너리·앱번들 무수정.)
관련 파일
- /Users/ef/crownybrowser/bundle/office/bridge/crownyBridge.js (§23 installOutlineBridge, 10747→11037줄)
- /Users/ef/crownybrowser/bundle/office/bridge/아웃라인모델.한선 (신규 정본, 28/28)
- 판정표: /Users/ef/crownybrowser/spec/아웃라인기능-판정표.md
- 검증 하니스(임시): scratchpad/outline-verify.js
잔여 이슈 (후속 punch)
- #2 항목 추가/삭제 + sel 정합, #3 Tab/Shift+Tab 들여쓰기 + 키보드(componentDidMount 신설),
#4 체크박스, #5 이동, #6 자동번호, #7 colVis 실소비, #8 폴드배지 실계수, #9 맵/문서 연동.