:host(nx-editor) {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
overflow: hidden; /* 에디터가 삐져나가지 않게 */
#editor-container {
flex: 1;
min-height: 0; /* 중요: 이 설정이 있어야 내부에서 스크롤이 터짐 */
display: flex;
flex-direction: column;
}
.menu-bar {
background: #f8f9fa;
padding: 5px;
border-bottom: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.menu-bar button, .menu-bar input[type="color"] {
width: 32px;
height: 32px;
cursor: pointer;
border: 1px solid #dee2e6;
background: white;
border-radius: 4px;
font-size: 12px;
}
.menu-bar select {
background: white;
border: 1px solid #dee2e6;
border-radius: 2px;
color: #333;
padding: 0 4px;
outline: none;
}
.menu-bar input[type="color"] {
padding: 4px;
color: #333;
}
.menu-bar button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.2s;
color: #333;
}
/* 모든 아이콘 공통 스타일 */
.menu-bar button i {
display: inline-block;
width: 18px; /* 아이콘 크기 살짝 키움 */
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* mask-image 방식을 쓰면 is-active 시 색상 제어가 편합니다 */
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.menu-bar button:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.menu-bar button:active {
background-color: green;
}
.menu-bar button.is-active {
background-color: green; /* 연한 파란색 배경 */
color: white; /* 파란색 아이콘 */
--border-color: darkgreen;
}
/* 버튼 활성화 시 아이콘 색상 자동 변경 */
.menu-bar button.is-active i {
background-color: white; /* 버튼 배경이 파란색이면 아이콘은 흰색으로 */
}
/* 하이라이트 아이콘 정의 */
.icon-highlight { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-left { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-center { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-right { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-ul { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-ol { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-image { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-undo { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.icon-redo { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.tiptap {
flex: 1; /* 부모인 container의 남은 높이를 다 씀 */
padding: 15px;
overflow-y: auto;
outline: none;
background: white;
min-height: 250px;
font-family: Arial, sans-serif !important;
}
.tiptap p {
margin: 0; /* 혹은 아주 적은 여백 */
}
.tiptap img { max-width: 100%; height: auto; border-radius: 4px; }
.tiptap [style*="text-align: left"] { text-align: left; }
.tiptap [style*="text-align: center"] { text-align: center; }
.tiptap [style*="text-align: right"] { text-align: right; }
.tiptap {
font-synthesis: style weight !important; /* 브라우저가 임의로 기울임꼴과 굵기를 생성하도록 허용 */
-webkit-font-smoothing: antialiased;
}
.tiptap em {
font-style: italic !important;
font-display: swap;
}
/* 혹시 모르니 i 태그도 함께 지정 */
.tiptap i {
--font-style: italic !important;
font-style: oblique;
}
.tiptap span[style*="font-size"] {
display: inline-block; /* 크기 적용이 더 확실해짐 */
}
/* ProseMirror 필수 에디터 스타일 */
#editor-container .ProseMirror {
white-space: pre-wrap; /* 줄바꿈과 공백을 보존 */
word-wrap: break-word; /* 긴 단어 자동 줄바꿈 */
outline: none; /* 포커스 시 테두리 제거 (선택) */
padding: 10px; /* 에디터 안쪽 여백 */
min-height: 200px; /* 에디터 최소 높이 */
}
/* 에디터 내의 단락(p) 간격 조절 */
#editor-container .ProseMirror p {
margin: 0;
}
}
/* readonly일 때 에디터 외관 조절 (선택사항) */
:host([readonly]) #editor-container {
border-color: transparent;
background-color: #f9f9f9;
cursor: default;
}