feat(project): 업무 설명란을 간단한 워드프로세서 에디터로 — 서식 도구 추가
굵게/기울임/밑줄/글머리목록/번호목록/인용구/링크/서식지우기 버튼을 설명란 위에 추가. execCommand 기반(같은 파일의 이미지 삽입에서 이미 insertHTML 로 쓰던 것과 같은 패턴)이고, 생성되는 태그(b/i/u/ul/ol/li/ blockquote/a)는 전부 기존 sanitize_description_html 허용 목록 안이라 서버 쪽 변경 없음. 버튼 mousedown 에서 preventDefault 해 클릭 시 에디터 선택범위가 풀리는 것 방지, 커서 위치에 따라 버튼 활성 상태 표시. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -597,6 +597,16 @@
|
||||
/* ── 업무 설명 — contenteditable(이미지 붙여넣기/업로드 삽입) ── */
|
||||
.pj-desc-toolbar { display: flex; align-items: center; gap: 8px; margin: -6px 0 6px; }
|
||||
.pj-desc-toolbar .pj-muted-sm { font-size: 11px; color: #9aa1a9; }
|
||||
/* 간단 워드프로세서 서식 도구 모음 */
|
||||
.pj-desc-fmtbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; }
|
||||
.pj-desc-fmtbtn {
|
||||
min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px;
|
||||
background: transparent; color: #444; font-size: 13px; font-family: inherit; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pj-desc-fmtbtn:hover { background: #f1f2f4; }
|
||||
.pj-desc-fmtbtn.is-active { background: var(--pj-accent-tint); border-color: var(--pj-accent); color: var(--pj-accent-dark); }
|
||||
.pj-desc-fmtsep { width: 1px; height: 16px; background: #e2e4ea; margin: 0 4px; }
|
||||
.pj-desc-editor {
|
||||
min-height: 64px; max-height: 260px; overflow-y: auto; padding: 8px 10px;
|
||||
border: 1px solid #d8dce2; border-radius: 8px; font-size: 13.5px; font-family: inherit;
|
||||
@@ -605,6 +615,9 @@
|
||||
.pj-desc-editor:empty::before { content: attr(data-placeholder); color: #b7bdc5; }
|
||||
.pj-desc-editor img { max-width: 100%; border-radius: 6px; margin: 4px 0; display: block; cursor: pointer; }
|
||||
.pj-desc-editor img.pj-img-selected { outline: 2px solid var(--pj-accent); outline-offset: 1px; }
|
||||
.pj-desc-editor blockquote { margin: 6px 0; padding: 2px 12px; border-left: 3px solid var(--pj-border); color: #565c66; }
|
||||
.pj-desc-editor ul, .pj-desc-editor ol { margin: 4px 0; padding-left: 22px; }
|
||||
.pj-desc-editor a { color: var(--pj-accent-dark); }
|
||||
.pj-desc-editor[contenteditable="false"] { background: #f6f7f8; color: #9aa1a9; }
|
||||
|
||||
/* 설명란 이미지 선택 시 오버레이(삭제 × / 우하단 크기조절 핸들) — wrap 은
|
||||
|
||||
Reference in New Issue
Block a user