@thangph2146/nextjs-editor 1.0.4 → 1.0.9

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,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 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 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, 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.
@@ -241,6 +289,12 @@ pnpm build
 npm publish --access public
 ```
 
+**Nếu bật 2FA (one-time password):** thêm mã OTP từ app xác thực (đổi mỗi ~30s):
+
+```bash
+npm publish --access public --otp=XXXXXX
+```
+
 Nếu đã publish public trước đó, chỉ cần:
 
 ```bash

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);
   }
@@ -1811,6 +1812,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2887,6 +2892,11 @@
       padding-block: calc(var(--spacing) * 6);
     }
   }
+  .sm\:text-center {
+    @media (width >= 40rem) {
+      text-align: center;
+    }
+  }
   .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;

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);
   }
@@ -1811,6 +1812,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  #editor-x .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   #editor-x .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2887,6 +2892,11 @@
       padding-block: calc(var(--spacing) * 6);
     }
   }
+  #editor-x .sm\:text-center {
+    @media (width >= 40rem) {
+      text-align: center;
+    }
+  }
   #editor-x .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;

package/dist/index.cjs

@@ -2123,12 +2123,17 @@ function ContentEditable({
   placeholder: placeholder2,
   className,
   placeholderClassName,
-  placeholderDefaults = true
+  placeholderDefaults = true,
+  readOnly = false
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_LexicalContentEditable.ContentEditable,
     {
-      className: cn("ContentEditable__root relative block min-h-72 px-8 py-4 focus:outline-none", className),
+      className: cn(
+        "ContentEditable__root relative block px-8 py-4 focus:outline-none",
+        readOnly ? "min-h-0" : "min-h-72",
+        className
+      ),
       "aria-placeholder": placeholder2,
       "aria-label": placeholder2 || "Editor n\u1ED9i dung",
       placeholder: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2617,20 +2622,39 @@ function ImageComponent({
     e.stopPropagation();
     setIsViewOriginalOpen(true);
   }, [isEditable]);
-  const imageWrapper = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { draggable, children: isLoadError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BrokenImage, {}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    LazyImage,
+  const imageWrapper = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
     {
-      className: imageClassName,
-      src,
-      altText,
-      imageRef,
-      width: responsiveDimensions.width,
-      height: responsiveDimensions.height,
-      maxWidth,
-      onError: () => setIsLoadError(true),
-      fetchPriority: isPriority ? "high" : "auto"
+      draggable,
+      ...!isEditable && {
+        role: "button",
+        tabIndex: 0,
+        onClick: handleViewOriginal,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleViewOriginal(e);
+          }
+        },
+        style: { cursor: "pointer", pointerEvents: "auto" },
+        className: "block w-full"
+      },
+      children: isLoadError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BrokenImage, {}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        LazyImage,
+        {
+          className: imageClassName,
+          src,
+          altText,
+          imageRef,
+          width: responsiveDimensions.width,
+          height: responsiveDimensions.height,
+          maxWidth,
+          onError: () => setIsLoadError(true),
+          fetchPriority: isPriority ? "high" : "auto"
+        }
+      )
     }
-  ) });
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_react11.Suspense,
     {
@@ -2647,7 +2671,8 @@ function ImageComponent({
           {
             type: "button",
             onClick: handleViewOriginal,
-            className: "cursor-pointer border-0 bg-transparent p-0 text-left outline-none [&>div]:outline-none",
+            className: "block w-full cursor-pointer border-0 bg-transparent p-0 text-left outline-none [&>div]:outline-none",
+            style: { pointerEvents: "auto" },
             "aria-label": "Xem h\xECnh g\u1ED1c",
             children: imageWrapper
           }
@@ -2698,29 +2723,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 text-center sm:text-center", 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",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  className: "flex-1 min-h-0 w-full max-w-full overflow-x-hidden overflow-y-auto flex items-center justify-center p-4 bg-black/10",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "max-w-full max-h-full min-w-0 min-h-0 flex items-center justify-center", 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: "min-w-0 min-h-0 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",
                     {
@@ -33210,7 +33235,8 @@ function Plugins({
             ContentEditable,
             {
               placeholder: readOnly ? "" : placeholder,
-              className: `ContentEditable__root relative block min-h-72 px-8 py-4 focus:outline-none ${readOnly ? "cursor-default select-text border border-border rounded-md" : ""}`
+              readOnly,
+              className: readOnly ? "cursor-default select-text border-0 bg-transparent shadow-none" : ""
             }
           ) }) }),
           ErrorBoundary: import_LexicalErrorBoundary2.LexicalErrorBoundary,
@@ -33386,9 +33412,11 @@ function Editor({
     {
       ref: editorRef,
       className: cn(
-        "bg-background rounded-lg shadow w-full"
+        "bg-background rounded-lg w-full",
+        readOnly ? "shadow-none" : "shadow"
       ),
       id: "editor-x",
+      "data-readonly": readOnly ? "true" : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(EditorContainerProvider, { value: { maxWidth: editorMaxWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         import_LexicalComposer.LexicalComposer,
         {