@thangph2146/nextjs-editor 1.0.8 → 1.0.10

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`, **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.
+**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à **không bọc trong @layer** (unlayered). Để style editor không bị SCSS app ghi đè, nên import `styles.css` sau cùng (sau globals và SCSS của app).
 
 ### 2. Dùng component Editor (Client Component)
 
@@ -66,7 +66,7 @@ export function MyEditor() {
 
 ## Tránh SCSS/CSS của app ghi đè editor
 
-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`.
+Style editor được build **không bọc trong @layer** (unlayered). **Nên import `@thangph2146/nextjs-editor/styles.css` sau cùng** trong `layout.tsx` (sau globals và SCSS của app) để style editor có thứ tự load sau và dễ thắng khi specificity ngang nhau. App có thể ghi đè style editor nếu dùng selector cùng hoặc cao hơn specificity (vd. trùng `#editor-x` hoặc class trong scope).
 
 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 { }`.
 
@@ -98,7 +98,7 @@ Tạo file `src/app/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 (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 đè.
+Sau khi cấu hình (nếu dùng), style editor (đã load khi import `@thangph2146/nextjs-editor/styles.css`) có thứ tự sau SCSS trong `@layer app`; cấu trúc Tailwind và theme của editor trong `#editor-x` có thể bị app ghi đè nếu selector app có specificity cao hơn.
 
 ## Cấu hình API thư viện ảnh
 

package/dist/index.cjs

@@ -33386,7 +33386,8 @@ function Editor({
     {
       ref: editorRef,
       className: cn(
-        "bg-background rounded-lg shadow w-full"
+        "w-full min-w-0",
+        !readOnly && "bg-background rounded-lg shadow"
       ),
       id: "editor-x",
       children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(EditorContainerProvider, { value: { maxWidth: editorMaxWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(