@thangph2146/nextjs-editor 1.0.5 → 1.0.7

package/README.md

@@ -26,7 +26,7 @@ Trong `app/layout.tsx` hoặc `_app.tsx`:
 import "@thangph2146/nextjs-editor/styles.css"
 ```
 
-**Lưu ý:** Chỉ cần import file trên. Bạn **không** cần thêm `@source` hay cấu hình nào trong `globals.css`. Style editor được đóng gói sẵn, scope trong `#editor-x` và nằm trong layer `nextjs-editor` — nếu app dùng CSS layer cho SCSS/global (xem bên dưới), style editor sẽ không bị ghi đè.
+**Lưu ý:** Chỉ cần import file trên. Bạn **không** cần thêm `@source` hay cấu hình nào trong `globals.css`. Style editor được đóng gói sẵn, scope trong `#editor-x`, **không bọc trong @layer** (unlayered) và **mọi declaration đều có `!important`** — để luôn thắng CSS app khi import sau (vd. sau `main.scss`). Dự án app **không ghi đè được** style editor.
 
 ### 2. Dùng component Editor (Client Component)
 
@@ -66,38 +66,27 @@ export function MyEditor() {
 
 ## Tránh SCSS/CSS của app ghi đè editor
 
-Style editor được bọc trong **`@layer nextjs-editor`**. Trong CSS, rule **không nằm trong layer** (unlayered) có độ ưu tiên cao hơn rule trong layer, nên nếu SCSS/global của app là unlayered thì có thể ghi đè list, spacing, typography… bên trong `#editor-x`.
+Style editor được build **không bọc trong @layer** (unlayered) và có **`!important`** trên mọi declaration (dùng [postcss-safe-important](https://github.com/Crimx/postcss-safe-important); keyframes/animation được loại trừ). **Nên import `@thangph2146/nextjs-editor/styles.css` sau cùng** trong `layout.tsx` (sau globals và SCSS của app) để style editor thắng khi specificity ngang nhau. Cùng với `!important`, app không ghi đè được style bên trong `#editor-x`.
 
-**Cách làm:** Đưa toàn bộ SCSS/global của app vào một layer (ví dụ `app`) và khai báo thứ tự layer sao cho `nextjs-editor` đứng **sau** — khi đó style editor sẽ thắng khi specificity tương đương.
+Mọi style global/SCSS không nằm trong Tailwind cần nằm trong `@layer app`. **Lưu ý:** Trong Sass, `@use` không được phép bên trong `@layer`, nên không bọc trực tiếp nội dung có `@use` trong một block `@layer app { }`.
 
-### Bước 1: Khai báo thứ tự layer trong app
+**Cách khuyến nghị — File wrapper dùng `@import`:**
 
-Trong `globals.css` (hoặc file CSS chính), **dòng đầu tiên** khai báo thứ tự layer, thêm `app` và `nextjs-editor` (layer xuất hiện sau có ưu tiên cao hơn):
-
-```css
-@layer legacy, base, components, utilities, app, nextjs-editor;
-```
-
-### Bước 2: Đưa SCSS/global vào layer `app`
-
-Mọi style global/SCSS không nằm trong Tailwind (base, typography, components từ SCSS…) cần nằm trong `@layer app`.
-
-**Cách A — Bọc toàn bộ file SCSS chính:**
-
-Trong file SCSS chính (ví dụ `src/styles/main.scss`), bọc toàn bộ nội dung trong `@layer app`:
+Tạo file SCSS mới (ví dụ `src/styles/app-layer.scss`) chỉ dùng `@import` (Sass cho phép `@import` trong `@layer`):
 
 ```scss
 @layer app {
-  @use "abstracts/variables" as *;
-  @use "abstracts/mixins" as *;
-  @use "base/base";
-  @use "base/typography";
-  @use "components/header";
-  /* ... các @use khác ... */
+  @import "main";
 }
 ```
 
-**Cách B — Import SCSS từ một file CSS có layer:**
+Trong `layout.tsx` (hoặc nơi đang import file SCSS chính), đổi sang import file wrapper:
+
+```tsx
+import "../styles/app-layer.scss";
+```
+
+**Cách khác — File CSS import SCSS (nếu bundler hỗ trợ):**
 
 Tạo file `src/app/globals-app.css`:
 
@@ -107,9 +96,9 @@ Tạo file `src/app/globals-app.css`:
 }
 ```
 
-Rồi trong `layout.tsx` import sau `globals.css`: `import "./globals-app.css"`.
+Rồi trong `layout.tsx` import sau `globals.css`: `import "./globals-app.css"`. (Một số bundler có thể không compile `.scss` khi import từ `.css`.)
 
-Sau khi cấu hình, style trong layer `nextjs-editor` (đã load khi import `@thangph2146/nextjs-editor/styles.css`) sẽ có ưu tiên cao hơn layer `app`, nên cấu trúc Tailwind và theme của editor trong `#editor-x` không còn bị SCSS của app ghi đè.
+Sau khi cấu hình (nếu dùng), style trong layer `nextjs-editor` (đã load khi import `@thangph2146/nextjs-editor/styles.css`) và có `!important` sẽ luôn thắng so với SCSS của app; cấu trúc Tailwind và theme của editor trong `#editor-x` không bị ghi đè.
 
 ## Cấu hình API thư viện ảnh
 

package/dist/editor-utilities-raw.css

@@ -591,6 +591,9 @@
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -648,9 +651,6 @@
   .min-h-\[54px\] {
     min-height: 54px;
   }
-  .min-h-\[70vh\] {
-    min-height: 70vh;
-  }
   .min-h-\[300px\] {
     min-height: 300px;
   }
@@ -1135,6 +1135,10 @@
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
+  .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
   .rounded-b-xl {
     border-bottom-right-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
@@ -1262,10 +1266,10 @@
       background-color: color-mix(in oklab, var(--background) 95%, transparent);
     }
   }
-  .bg-black\/20 {
-    background-color: color-mix(in srgb, #000 20%, transparent);
+  .bg-black\/10 {
+    background-color: color-mix(in srgb, #000 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
   .bg-black\/60 {
@@ -1328,12 +1332,6 @@
       background-color: color-mix(in oklab, var(--muted) 20%, transparent);
     }
   }
-  .bg-muted\/30 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
-    }
-  }
   .bg-muted\/40 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1527,12 +1525,12 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-  .pt-5 {
-    padding-top: calc(var(--spacing) * 5);
-  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1542,6 +1540,9 @@
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -3879,4 +3880,4 @@
       --tw-content: "";
     }
   }
-}
+}

package/dist/editor-utilities-scoped.css

@@ -591,6 +591,9 @@
   #editor-x .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
+  #editor-x .h-auto {
+    height: auto;
+  }
   #editor-x .h-full {
     height: 100%;
   }
@@ -648,9 +651,6 @@
   #editor-x .min-h-\[54px\] {
     min-height: 54px;
   }
-  #editor-x .min-h-\[70vh\] {
-    min-height: 70vh;
-  }
   #editor-x .min-h-\[300px\] {
     min-height: 300px;
   }
@@ -1135,6 +1135,10 @@
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
+  #editor-x .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
   #editor-x .rounded-b-xl {
     border-bottom-right-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
@@ -1262,10 +1266,10 @@
       background-color: color-mix(in oklab, var(--background) 95%, transparent);
     }
   }
-  #editor-x .bg-black\/20 {
-    background-color: color-mix(in srgb, #000 20%, transparent);
+  #editor-x .bg-black\/10 {
+    background-color: color-mix(in srgb, #000 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
   #editor-x .bg-black\/60 {
@@ -1328,12 +1332,6 @@
       background-color: color-mix(in oklab, var(--muted) 20%, transparent);
     }
   }
-  #editor-x .bg-muted\/30 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
-    }
-  }
   #editor-x .bg-muted\/40 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1527,12 +1525,12 @@
   #editor-x .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  #editor-x .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   #editor-x .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-  #editor-x .pt-5 {
-    padding-top: calc(var(--spacing) * 5);
-  }
   #editor-x .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1542,6 +1540,9 @@
   #editor-x .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
+  #editor-x .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
   #editor-x .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -3879,4 +3880,4 @@
       --tw-content: "";
     }
   }
-}
+}

package/dist/index.cjs

@@ -2698,29 +2698,29 @@ function ImageComponent({
             className: "max-w-[96vw] max-h-[96vh] w-[96vw] h-[96vh] overflow-hidden flex flex-col p-0 gap-0 rounded-xl border shadow-2xl",
             "aria-describedby": "view-original-image-desc",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogHeader, { className: "shrink-0 px-6 pt-5 pb-2 border-b bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-base font-semibold", children: "Xem h\xECnh g\u1ED1c" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogHeader, { className: "shrink-0 px-4 pt-3 pb-3 pr-12 border-b border-border/50 bg-muted/20 rounded-t-xl", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-sm font-semibold", children: "Xem h\xECnh g\u1ED1c" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "div",
                 {
                   id: "view-original-image-desc",
-                  className: "flex-1 min-h-[70vh] overflow-auto flex items-center justify-center p-4 bg-black/20",
+                  className: "flex-1 min-h-0 overflow-auto flex items-center justify-center p-4 bg-black/10",
                   children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "img",
                     {
                       src,
                       alt: altText || "H\xECnh g\u1ED1c",
-                      className: "flex-1 min-w-0 min-h-0 w-full h-full max-w-full max-h-full object-contain rounded-lg"
+                      className: "max-w-full max-h-full w-auto h-auto object-contain rounded-lg select-none"
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogFooter, { className: "shrink-0 flex-row justify-center gap-2 px-6 py-4 border-t bg-muted/20 rounded-b-xl", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogFooter, { className: "shrink-0 flex-row justify-center gap-2 px-4 py-3 border-t border-border/50 bg-muted/20 rounded-b-xl", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 Button,
                 {
                   variant: "outline",
-                  size: "default",
+                  size: "sm",
                   asChild: true,
-                  className: "gap-2 text-base",
+                  className: "gap-2",
                   children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                     "a",
                     {