@thangph2146/nextjs-editor 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -14
- package/dist/styles.css +2 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ Trong `app/layout.tsx` hoặc `_app.tsx`:
|
|
|
26
26
|
import "@thangph2146/nextjs-editor/styles.css"
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
**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`,
|
|
29
|
+
**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.
|
|
30
30
|
|
|
31
31
|
### 2. Dùng component Editor (Client Component)
|
|
32
32
|
|
|
@@ -66,19 +66,7 @@ export function MyEditor() {
|
|
|
66
66
|
|
|
67
67
|
## Tránh SCSS/CSS của app ghi đè editor
|
|
68
68
|
|
|
69
|
-
Style editor được build
|
|
70
|
-
|
|
71
|
-
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**.
|
|
72
|
-
|
|
73
|
-
### Bước 1 (tùy chọn): Khai báo thứ tự layer trong app
|
|
74
|
-
|
|
75
|
-
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):
|
|
76
|
-
|
|
77
|
-
```css
|
|
78
|
-
@layer legacy, base, components, utilities, app, nextjs-editor;
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
### Bước 2 (tùy chọn): Đưa SCSS/global vào layer `app`
|
|
69
|
+
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`.
|
|
82
70
|
|
|
83
71
|
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 { }`.
|
|
84
72
|
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* Style editor
|
|
2
|
-
|
|
1
|
+
/* Style editor (unlayered + !important) để luôn áp dụng trong app. Xem README. */
|
|
2
|
+
|
|
3
3
|
/* nextjs-editor: theme + scoped utilities */
|
|
4
4
|
|
|
5
5
|
.EditorTheme__code {
|
|
@@ -4277,5 +4277,3 @@ div.border.border-dashed .editor-image img {
|
|
|
4277
4277
|
}
|
|
4278
4278
|
}
|
|
4279
4279
|
}
|
|
4280
|
-
|
|
4281
|
-
}
|