@loword/loword-design-system 0.7.2 → 0.7.4

package/src/styles/components/editor.css

@@ -11,14 +11,70 @@
     line-height: calc(28 / 18) !important;
   }
 
+  /* 정적 렌더 옵트인(.ld-editor-render, 렌더 루트나 그 조상에 붙인다). 클래스가 없으면 기존 렌더 그대로다.
+     getHTML()은 빈 문단을 <p></p>로 내보낸다. 편집 화면은 <p><br class="ProseMirror-trailingBreak"></p>라
+     한 줄 높이인데, 내용 없는 <p>는 높이 0이라 margin이 겹쳐 사라진다. 제로폭 문자로 한 줄 높이를 만든다.
+     :empty는 자식 노드가 없을 때만 맞으므로 <br>이 있는 편집 화면에는 영향이 없다. */
+  .ld-editor-render .ProseMirror p:empty::before,
+  .ProseMirror.ld-editor-render p:empty::before {
+    content: '\200B';
+  }
+
+  /* 링크 색(.ld-editor-render 옵트인, 편집 영역에도 붙는다): 링크 글자색은 주변 글자 색(색 mark 포함)을 따르고
+     밑줄도 그 글자색으로 그린다. 예전에 저장된 글의 링크에 박힌 파란색 클래스(text-blue-500)도 덮으려고 !important.
+     글자 색 mark가 링크 요소 바깥에 있어야 밑줄이 그 색을 따른다(extensions.ts의 TextStyle priority). */
+  .ld-editor-render .ProseMirror a,
+  .ProseMirror.ld-editor-render a {
+    color: inherit !important;
+    text-decoration-color: currentcolor !important;
+  }
+
+  /* 밑줄(링크·밑줄 서식)이 글자에 붙어 보이지 않게 2px 띄운다. 편집 영역·LDViewer·정적 렌더가 같은 값을 받는다. */
+  .ld-editor-render .ProseMirror :is(a, u),
+  .ProseMirror.ld-editor-render :is(a, u) {
+    text-underline-offset: 2px;
+  }
+
+  /* 글 기본 색(.ld-editor-render 옵트인, 편집 영역에도 붙는다): 툴바 글자 색 목록의 '검정'(neutral900)이다.
+     색 mark가 없는 글이 이 색으로 보이므로, 목록에서 '검정'을 고르면 mark를 걷어 낸다. */
+  .ld-editor-render.prose,
+  .ld-editor-render .prose {
+    --tw-prose-body: var(--color-neutral900);
+    /* 자간: LDS 타이포(display10~30) 토큰과 같은 -1px. 편집 영역·LDViewer·정적 렌더가 같은 값을 받아
+       줄바꿈 위치가 같다. 글자 크기와 상관없이 고정 px(시안 letterSpacing -1). */
+    letter-spacing: var(--tracking-display16);
+  }
+
+  /* 제목 위아래 여백은 제목 자기 글자 크기만큼(1em) 둔다. 제목이 클수록 앞뒤 본문과 더 벌어진다.
+     앞 문단의 아래 여백(0.8em)과는 겹쳐(margin collapse) 둘 중 큰 값만 남는다. */
   .prose h1,
   .prose h2,
   .prose h3 {
-    margin-top: 0 !important;
-    margin-bottom: 0.5rem !important;
+    margin-top: 1em !important;
+    margin-bottom: 1em !important;
     padding: 0 !important;
   }
 
+  /* 글 첫머리 제목은 위 여백 없이 시작한다(아래 .ProseMirror :first-child는 !important가 아니라 위 규칙에 진다). */
+  .prose :is(h1, h2, h3):first-child {
+    margin-top: 0 !important;
+  }
+
+  /* 제목 줄 높이는 같은 글자 크기의 display 토큰(typography.css)을 따른다. 제목 크기는 본문 기준 em이라
+     (본문 18px일 때 48·30·24px) px 대신 토큰의 비율로 둬 defaultFontSize가 바뀌어도 같은 비율이다.
+     제목 1(48px)은 같은 크기 토큰이 없어 display40·display64처럼 글자 크기 + 8px로 둔다. */
+  .prose h1 {
+    line-height: calc(56 / 48) !important;
+  }
+
+  .prose h2 {
+    line-height: calc(36 / 30) !important; /* display30 */
+  }
+
+  .prose h3 {
+    line-height: calc(28 / 24) !important; /* display24 */
+  }
+
   .prose ul,
   .prose ol {
     margin-top: 0 !important;
@@ -52,6 +108,27 @@
   }
 }
 
+/* 정적 렌더 옵트인(.ld-editor-render): 편집 화면과 같이 연속 공백·줄 구분 문자(U+2028 등)를 보존한다.
+   tiptap은 편집 가능한 에디터에만 같은 규칙을 주입한다. 클래스가 없는 정적 렌더는 기존 그대로다.
+   앞 줄은 break-spaces 미지원 브라우저용 폴백. */
+@layer components {
+  .ld-editor-render .ProseMirror,
+  .ProseMirror.ld-editor-render {
+    white-space: pre-wrap;
+    white-space: break-spaces;
+  }
+
+  /* 편집 영역은 고정 높이 + 내부 스크롤이라 스크롤바(classic 환경 15px)가 내용 폭을 줄인다.
+     편집 요소는 scrollbar-gutter: stable로 자리를 항상 확보하므로(LDEditor), 정적 렌더·LDViewer도
+     같은 거터를 확보해 줄바꿈이 같게 한다. 높이는 auto라 실제 스크롤은 생기지 않는다.
+     편집 요소(contenteditable="true")에도 ld-editor-render가 붙어 있어 제외한다. */
+  .ld-editor-render .ProseMirror:not([contenteditable='true']),
+  .ProseMirror.ld-editor-render:not([contenteditable='true']) {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+}
+
 /* 이미지 정렬 스타일 */
 /* height만 !important로 잠근다. 리사이즈 노드뷰가 width/height를 함께 인라인 px로
    쓰는데, 높이가 고정되면 컨테이너가 좁아질 때 max-width로 폭만 줄어 이미지가
@@ -180,6 +257,21 @@
    (래퍼는 부모가 block이면 기본값이 100%라 가만두면 벌어진다.) */
 .ProseMirror [data-resize-wrapper] {
   width: fit-content;
+  max-width: 100%;
+}
+
+/* 편집 화면의 리사이즈 노드뷰는 flex 컨테이너라 이미지가 왼쪽에 붙는다. 정적 렌더(위 img 규칙)와
+   같게 기본은 가운데, text-align이 지정된 이미지는 그쪽으로 둔다. */
+.ProseMirror [data-resize-container] {
+  justify-content: center;
+}
+
+.ProseMirror [data-resize-container]:has(img[style*='text-align: left']) {
+  justify-content: flex-start;
+}
+
+.ProseMirror [data-resize-container]:has(img[style*='text-align: right']) {
+  justify-content: flex-end;
 }
 
 /* 표