@thangph2146/nextjs-editor 1.0.4 → 1.0.5

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` 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 đè.
 
 ### 2. Dùng component Editor (Client Component)
 
@@ -64,6 +64,53 @@ 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 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`.
+
+**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.
+
+### Bước 1: 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: Đư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`:
+
+```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 ... */
+}
+```
+
+**Cách B — Import SCSS từ một file CSS có layer:**
+
+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"`.
+
+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 đè.
+
 ## 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/styles.css

@@ -1,4 +1,6 @@
-/* nextjs-editor: theme + scoped utilities (không cần @source, không bị app ghi đè) */
+/* Dùng @layer nextjs-editor để app có thể đặt SCSS/CSS trong layer khác và tránh ghi đè editor. Xem README. */
+@layer nextjs-editor {
+/* nextjs-editor: theme + scoped utilities */
 
 .EditorTheme__code {
   background-color: transparent;
@@ -4274,3 +4276,5 @@ div.border.border-dashed .editor-image img {
     }
   }
 }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangph2146/nextjs-editor",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Rich text editor for Next.js built on Lexical",
   "type": "module",
   "main": "./dist/index.cjs",