@teriusu/rich-editor 0.4.1

package/dist/styles/editor.css

@@ -0,0 +1,698 @@
+/* @hancomac/editor 스타일 */
+
+/* ── 에디터 wrapper — 메뉴가 잘리지 않도록 overflow 보장 ── */
+.hce-editor-wrapper {
+  overflow: visible !important;
+}
+
+/* ── 기본 레이아웃 (공식 TipTap 패턴) ── */
+.tiptap {
+  font-size: 1.0625rem;
+  line-height: 1.8;
+  color: var(--foreground);
+  padding: 1.5rem 1rem 1.5rem 0;
+}
+
+.tiptap > * + * {
+  margin-top: 0.5em;
+}
+
+.tiptap > * {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+/* ── 텍스트 블록 ── */
+.tiptap p {
+  margin: 0.25em 0;
+}
+
+/* 빈 행 높이 보존 */
+.tiptap p:empty,
+.tiptap p:has(> br:only-child) {
+  min-height: 1.8em;
+}
+
+/* 선행 공백 보존 */
+.tiptap p,
+.tiptap li,
+.tiptap h1, .tiptap h2, .tiptap h3 {
+  white-space: pre-wrap;
+}
+
+.tiptap h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 1.5em 0 0.5em;
+  line-height: 1.25;
+}
+
+.tiptap h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.2em 0 0.4em;
+  line-height: 1.3;
+}
+
+.tiptap h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1em 0 0.3em;
+  line-height: 1.35;
+}
+
+/* ── 리스트 ── */
+.tiptap ul {
+  list-style: disc;
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.tiptap ol {
+  list-style: decimal;
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+/* 중첩 리스트 레벨별 불릿 (Notion 스타일) */
+.tiptap ul ul { list-style: circle; }
+.tiptap ul ul ul { list-style: square; }
+.tiptap ol ol { list-style: lower-alpha; }
+.tiptap ol ol ol { list-style: lower-roman; }
+
+.tiptap li {
+  margin: 0.25em 0;
+}
+
+/* ── 체크리스트 (TaskList) ── */
+.tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.tiptap ul[data-type="taskList"] li {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0.1em 0;
+  list-style: none;
+  list-style-type: none;
+}
+
+.tiptap ul[data-type="taskList"] li > label {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: 1.5em;
+}
+
+.tiptap ul[data-type="taskList"] li > label input[type="checkbox"] {
+  accent-color: var(--primary);
+  width: 1.1em;
+  height: 1.1em;
+  cursor: pointer;
+  margin: 0;
+}
+
+.tiptap ul[data-type="taskList"] li > div {
+  flex: 1;
+}
+
+.tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+/* ── 인용문 ── */
+.tiptap blockquote {
+  border-left: 3px solid var(--border);
+  padding: 0.5rem 1rem;
+  margin: 0.75em 0;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+/* ── 구분선 ── */
+.tiptap hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.5em 0;
+}
+
+/* ── 코드 ── */
+.tiptap code {
+  background: var(--muted);
+  border-radius: 4px;
+  padding: 0.15em 0.35em;
+  font-size: 0.9em;
+}
+
+.tiptap pre {
+  background: #282c34;
+  color: #abb2bf;
+  border-radius: 8px;
+  padding: 1em;
+  margin: 0.75em 0;
+  overflow-x: auto;
+  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
+  font-size: 0.9em;
+  line-height: 1.6;
+}
+
+.tiptap pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  color: #abb2bf;
+  font-size: inherit;
+}
+
+/* Atom One Dark 공식 토큰 색상 (highlight.js/styles/atom-one-dark.css 의존 제거) */
+.tiptap pre code .hljs-keyword,
+.tiptap pre code .hljs-operator { color: #c678dd; }
+
+.tiptap pre code .hljs-string,
+.tiptap pre code .hljs-doctag,
+.tiptap pre code .hljs-addition,
+.tiptap pre code .hljs-regexp { color: #98c379; }
+
+.tiptap pre code .hljs-number,
+.tiptap pre code .hljs-attr,
+.tiptap pre code .hljs-type,
+.tiptap pre code .hljs-template-variable,
+.tiptap pre code .hljs-variable,
+.tiptap pre code .hljs-selector-class { color: #d19a66; }
+
+.tiptap pre code .hljs-title,
+.tiptap pre code .hljs-title.class_,
+.tiptap pre code .hljs-function,
+.tiptap pre code .hljs-section { color: #61aeee; }
+
+.tiptap pre code .hljs-params,
+.tiptap pre code .hljs-punctuation { color: #abb2bf; }
+
+.tiptap pre code .hljs-comment,
+.tiptap pre code .hljs-quote { color: #5c6370; font-style: italic; }
+
+.tiptap pre code .hljs-built_in,
+.tiptap pre code .hljs-formula { color: #e6c07b; }
+
+.tiptap pre code .hljs-meta,
+.tiptap pre code .hljs-meta .hljs-keyword { color: #61aeee; }
+
+.tiptap pre code .hljs-meta .hljs-string { color: #98c379; }
+
+.tiptap pre code .hljs-deletion,
+.tiptap pre code .hljs-name,
+.tiptap pre code .hljs-tag,
+.tiptap pre code .hljs-property,
+.tiptap pre code .hljs-selector-tag,
+.tiptap pre code .hljs-subst,
+.tiptap pre code .hljs-attribute { color: #e06c75; }
+
+.tiptap pre code .hljs-literal { color: #56b6c2; }
+
+.tiptap pre code .hljs-selector-id,
+.tiptap pre code .hljs-selector-attr,
+.tiptap pre code .hljs-selector-pseudo { color: #61aeee; }
+
+.tiptap pre code .hljs-link { color: #61aeee; text-decoration: underline; }
+
+.tiptap pre code .hljs-symbol,
+.tiptap pre code .hljs-bullet { color: #61aeee; }
+
+.tiptap pre code .hljs-emphasis { font-style: italic; }
+.tiptap pre code .hljs-strong { font-weight: bold; }
+
+/* ── 이미지 ── */
+.tiptap img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 0.75em 0;
+  cursor: pointer;
+  transition: box-shadow 0.15s;
+}
+
+.tiptap img.ProseMirror-selectednode {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+/* ── YouTube / PDF 선택 힌트 ── */
+.tiptap div[data-youtube-video].ProseMirror-selectednode iframe {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+.tiptap [data-type="pdfBlock"].ProseMirror-selectednode > div {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+  border-radius: 8px;
+}
+
+/* ── 링크 ── */
+.tiptap a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.tiptap a:hover {
+  opacity: 0.8;
+}
+
+/* ── 하이라이트 ── */
+.tiptap mark {
+  background-color: #fef08a;
+  border-radius: 2px;
+  padding: 0.05em 0.1em;
+}
+
+/* ── 접기/펼치기 (Details) ── */
+/* 에디터 내부: TipTap node view (div[data-type="details"]) */
+.tiptap [data-type="details"] {
+  border: none;
+  border-radius: 0;
+  padding: 0.25em 0;
+  margin: 0.5em 0;
+  background: transparent;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25em;
+}
+
+.tiptap [data-type="details"] > button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  width: 1.4em;
+  height: 1.4em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-foreground);
+  border-radius: 4px;
+  transition: transform 0.15s, background 0.15s;
+  flex-shrink: 0;
+  margin-top: 0.25em;
+}
+
+.tiptap [data-type="details"] > button::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid currentColor;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  margin-left: 2px;
+}
+
+.tiptap [data-type="details"] > button:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
+
+.tiptap [data-type="details"].is-open > button {
+  transform: rotate(90deg);
+}
+
+.tiptap [data-type="details"] > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.tiptap [data-type="details"] summary {
+  font-weight: 600;
+  cursor: text;
+  padding: 0.25em 0;
+  display: block;
+}
+
+.tiptap [data-type="detailsContent"] {
+  margin-top: 0.5em;
+  padding-left: 0.5em;
+  border-left: 2px solid var(--border);
+}
+
+.tiptap [data-type="detailsContent"][hidden] {
+  display: none;
+}
+
+/* 게시물 렌더링: 네이티브 <details> */
+.tiptap details {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.5em 1em;
+  margin: 0.75em 0;
+  background: var(--background);
+}
+
+.tiptap details summary {
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.25em 0;
+  user-select: none;
+}
+
+.tiptap details summary::marker {
+  color: var(--muted-foreground);
+}
+
+.tiptap details[open] > *:not(summary) {
+  margin-top: 0.5em;
+}
+
+/* ── YouTube 임베드 ── */
+.tiptap div[data-youtube-video] {
+  margin: 1em 0;
+}
+
+.tiptap div[data-youtube-video] iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 8px;
+  border: none;
+}
+
+
+/* ── 테이블 ── */
+.tiptap table {
+  border-collapse: collapse;
+  margin: 1em 0;
+  table-layout: fixed;
+  border: 2px solid var(--border);
+  max-width: 100%;
+}
+
+.tiptap .tableWrapper {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.tiptap th,
+.tiptap td {
+  border: 1px solid var(--border);
+  padding: 0.6em 0.8em;
+  min-width: 60px;
+  vertical-align: middle;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.tiptap th {
+  background: var(--muted);
+  font-weight: 600;
+  text-align: left;
+}
+
+.tiptap td {
+  background: var(--background);
+}
+
+.tiptap .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--primary);
+  opacity: 0.12;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.tiptap .column-resize-handle {
+  position: absolute;
+  right: -3px;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  background: var(--primary);
+  opacity: 0;
+  cursor: col-resize;
+  z-index: 20;
+  border-radius: 2px;
+  transition: opacity 0.15s;
+}
+
+.tiptap table:hover .column-resize-handle {
+  opacity: 0.4;
+}
+
+.tiptap .column-resize-handle:hover {
+  opacity: 1;
+}
+
+.tiptap.resize-cursor {
+  cursor: col-resize;
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: 1em 0;
+  max-width: 100%;
+  padding-right: 4px; /* resize handle이 잘리지 않도록 */
+}
+
+/* 테이블 셀 내부 prosemirror 기본 컨트롤 숨기기 */
+.tiptap table .grip-column,
+.tiptap table .grip-row,
+.tiptap table .grip-table {
+  display: none !important;
+}
+
+/* ── 플레이스홀더 (Notion-style) ── */
+.tiptap .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  pointer-events: none;
+  height: 0;
+}
+
+.tiptap h1.is-empty::before {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.tiptap h2.is-empty::before {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.tiptap h3.is-empty::before {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+/* ── Gap cursor ── */
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: relative;
+}
+
+.ProseMirror-gapcursor::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid var(--foreground);
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+/* ── Drop cursor ── */
+.ProseMirror-dropcursor {
+  border-top: 2px solid var(--primary);
+  margin: -1px 0;
+}
+
+/* ── 선택 (텍스트) ── */
+.tiptap ::selection {
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
+}
+
+/* ── Node range selection (드래그 시) ── */
+.ProseMirror-noderangeselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-noderangeselection * {
+  caret-color: transparent;
+}
+
+/* ── 선택된 노드 하이라이트 ── */
+.ProseMirror-selectednode,
+.ProseMirror-selectednoderange {
+  position: relative;
+}
+
+.ProseMirror-selectednode:not(img):not([data-youtube-video]):not([data-type="pdfBlock"])::before,
+.ProseMirror-selectednoderange::before {
+  content: "";
+  position: absolute;
+  inset: -0.25rem;
+  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
+  border-radius: 0.5rem;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* ── BubbleToolbar z-index ── */
+.bubble-toolbar-container {
+  z-index: 50;
+}
+
+/* ── Floating + 버튼 ── */
+.hce-floating-plus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--background);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.hce-floating-plus:hover {
+  color: var(--foreground);
+  border-color: var(--foreground);
+  background: var(--muted);
+}
+
+/* ── Drag handle ── */
+.hce-drag-handle {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.hce-drag-handle__plus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.15s, background-color 0.15s;
+}
+
+.hce-drag-handle__plus:hover {
+  opacity: 1;
+  background: var(--muted);
+}
+
+.hce-drag-handle__grip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 4px;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  cursor: grab;
+  transition: opacity 0.15s, background-color 0.15s;
+}
+
+.hce-drag-handle__grip:hover {
+  opacity: 1;
+  background: var(--muted);
+}
+
+.hce-drag-handle__grip:active {
+  cursor: grabbing;
+}
+
+/* ── 컬럼 레이아웃 ── */
+.tiptap div[data-type="columns"] {
+  display: grid;
+  gap: 24px;
+  margin: 1em 0;
+}
+
+.tiptap div[data-type="columns"][data-columns="2"] {
+  grid-template-columns: 1fr 1fr;
+}
+
+.tiptap div[data-type="columns"][data-columns="3"] {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.tiptap div[data-type="column"] {
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+}
+
+.tiptap div[data-type="column"]:focus-within {
+  border-color: var(--primary);
+  border-style: solid;
+}
+
+.tiptap div[data-type="columns"].ProseMirror-selectednode {
+  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
+  border-radius: 8px;
+}
+
+@media (max-width: 640px) {
+  .tiptap div[data-type="columns"] {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* ── 툴바 버튼 CSS tooltip (data-tooltip 속성 기반) ── */
+.hce-editor-wrapper button[data-tooltip] {
+  position: relative;
+}
+
+.hce-editor-wrapper button[data-tooltip]:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 6px;
+  padding: 4px 8px;
+  font-size: 11px;
+  line-height: 1.2;
+  white-space: nowrap;
+  color: #fff;
+  background: #1e293b;
+  border-radius: 6px;
+  pointer-events: none;
+  z-index: 60;
+}
+
+/* ── 테이블 버블 메뉴 tooltip ── */
+.hce-table-btn-wrap { position: relative; display: inline-flex; }
+.hce-table-btn-tooltip {
+  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
+  margin-bottom: 6px; padding: 4px 8px; font-size: 11px; line-height: 1.2;
+  white-space: nowrap; color: #fff; background: #1e293b; border-radius: 6px;
+  pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 60;
+}
+.hce-table-btn-wrap:hover .hce-table-btn-tooltip { opacity: 1; }