@thangph2146/nextjs-editor 1.0.4 → 1.0.6

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 và scope trong `#editor-x` nên không bị style dự án 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`, nằm trong layer `nextjs-editor`, và **mọi declaration đều có `!important`** — dự án app (tuyen-sinh, tuyen-sinh-admin, v.v.) **không ghi đè được** style editor.
 
 ### 2. Dùng component Editor (Client Component)
 
@@ -64,6 +64,54 @@ export function MyEditor() {
 - **Ảnh**: Mặc định dialog chèn ảnh có tab **URL** và **File**. Để tab **Thư viện** hiển thị ảnh từ API của project, xem [Cấu hình API thư viện ảnh](#cấu-hình-api-thư-viện-ảnh) bên dưới.
 - **Next.js**: Package dùng `next/image` và `next/dynamic` khi chạy trong Next.js; cần cài `next` trong project.
 
+## Tránh SCSS/CSS của app ghi đè editor
+
+Style editor được build với **`!important`** trên mọi declaration (dùng [postcss-safe-important](https://github.com/Crimx/postcss-safe-important); keyframes và animation được loại trừ theo mặc định). Do đó **các dự án app (tuyen-sinh, tuyen-sinh-admin, v.v.) không ghi đè được** style bên trong `#editor-x`, kể cả khi SCSS/global của app là unlayered hoặc có specificity cao hơn.
+
+Style vẫn được bọc trong **`@layer nextjs-editor`**. Nếu bạn muốn thêm một lớp bảo vệ theo thứ tự layer (ví dụ đảm bảo SCSS app không bao giờ thắng khi specificity ngang nhau), có thể đưa SCSS/global của app vào layer `app` và khai báo thứ tự layer sao cho `nextjs-editor` đứng **sau**.
+
+### Bước 1 (tùy chọn): Khai báo thứ tự layer trong app
+
+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 (tùy chọn): Đưa SCSS/global vào layer `app`
+
+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 { }`.
+
+**Cách khuyến nghị — File wrapper dùng `@import`:**
+
+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 {
+  @import "main";
+}
+```
+
+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`:
+
+```css
+@layer app {
+  @import "../styles/main.scss";
+}
+```
+
+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 (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
 
 Tab **Thư viện** trong dialog chèn ảnh cần dữ liệu từ API/uploads của project. Bạn cấu hình bằng cách **alias** module uploads-hooks của package sang file hooks trong project.

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",
                     {