@loword/loword-design-system 0.7.4 → 0.7.5

package/dist/components/LDEditor/LDEditor.d.ts

@@ -27,7 +27,7 @@ export interface LDEditorProps {
      * 글자 크기 mark가 없는 글의 툴바 표시도 이 값을 보여 준다.
      * 정적 렌더(`div.prose.prose-lg > div.ProseMirror`)는 **prose 루트(바깥 div)에 이 클래스(`ld-editor-render`)와 같은 `font-size`를 준다**.
      * 정적 렌더 내용 폭 = 에디터 바깥 폭 − 34px(테두리 1 + 여백 16, 양쪽). 렌더 루트 바깥 폭을 그만큼 좁히면(또는 같은 inline 좌우 여백을 주면) 줄바꿈이 같다.
-     * 편집 영역은 스크롤바 자리를 항상 확보(`scrollbar-gutter: stable`)하고, `ld-editor-render`도 같은 거터를 확보한다(높이는 auto라 스크롤은 생기지 않음).
+     * 편집 영역은 스크롤바 자리를 항상 확보(`scrollbar-gutter: stable`)한다. 정적 렌더는 거터를 두지 않으므로 스크롤바가 폭을 차지하는 환경(Windows 등)에서는 그만큼 넓다.
      * `ld-editor-render`는 빈 문단(`<p></p>`)을 한 줄 높이로, 연속 공백·U+2028을 보존하고, 링크 글자·밑줄 색이 주변 글자 색을 따르게 해 편집 화면과 같게 그린다(붙이지 않으면 기존 렌더 그대로).
      * `LDViewer`는 같은 이름의 prop을 받는다.
      */

package/dist/index.css

@@ -1824,9 +1824,6 @@
   .w-\[60px\] {
     width: 60px;
   }
-  .w-\[calc\(100\%-34px\)\] {
-    width: calc(100% - 34px);
-  }
   .w-auto {
     width: auto;
   }
@@ -2211,6 +2208,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -4936,6 +4936,11 @@
       height: calc(var(--spacing) * 6);
     }
   }
+  .\[\&_\.ProseMirror\]\:overflow-visible {
+    & .ProseMirror {
+      overflow: visible;
+    }
+  }
   .\[\&_svg\]\:icon-2xs {
     & svg {
       width: var(--control-icon-2xs);
@@ -5634,14 +5639,10 @@
   }
 }
 @layer components {
-  .ld-editor-render .ProseMirror, .ProseMirror.ld-editor-render {
+  .ld-editor-render .ProseMirror :is(p, h1, h2, h3, h4, h5, h6), .ProseMirror.ld-editor-render :is(p, h1, h2, h3, h4, h5, h6) {
     white-space: pre-wrap;
     white-space: break-spaces;
   }
-  .ld-editor-render .ProseMirror:not([contenteditable='true']), .ProseMirror.ld-editor-render:not([contenteditable='true']) {
-    overflow-y: auto;
-    scrollbar-gutter: stable;
-  }
 }
 .ProseMirror img {
   max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",

package/src/styles/components/editor.css

@@ -110,23 +110,14 @@
 
 /* 정적 렌더 옵트인(.ld-editor-render): 편집 화면과 같이 연속 공백·줄 구분 문자(U+2028 등)를 보존한다.
    tiptap은 편집 가능한 에디터에만 같은 규칙을 주입한다. 클래스가 없는 정적 렌더는 기존 그대로다.
+   글이 들어가는 블록(문단·제목)에만 준다. 루트에 주면 블록 태그 사이 개행(서버가 정리해 저장한 HTML)이 빈 줄로 그려진다.
    앞 줄은 break-spaces 미지원 브라우저용 폴백. */
 @layer components {
-  .ld-editor-render .ProseMirror,
-  .ProseMirror.ld-editor-render {
+  .ld-editor-render .ProseMirror :is(p, h1, h2, h3, h4, h5, h6),
+  .ProseMirror.ld-editor-render :is(p, h1, h2, h3, h4, h5, h6) {
     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;
-  }
 }
 
 /* 이미지 정렬 스타일 */