@thangph2146/nextjs-editor 1.0.9 → 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` 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 đè.
+**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,19 +66,7 @@ export function MyEditor() {
 
 ## 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`
+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 { }`.
 
@@ -110,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, 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 đè.
+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
 
@@ -289,12 +277,6 @@ 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

@@ -1812,10 +1812,6 @@
     --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);
@@ -2892,11 +2888,6 @@
       padding-block: calc(var(--spacing) * 6);
     }
   }
-  .sm\:text-center {
-    @media (width >= 40rem) {
-      text-align: center;
-    }
-  }
   .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;
@@ -3889,4 +3880,4 @@
       --tw-content: "";
     }
   }
-}
+}

package/dist/editor-utilities-scoped.css

@@ -1812,10 +1812,6 @@
     --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);
@@ -2892,11 +2888,6 @@
       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;
@@ -3889,4 +3880,4 @@
       --tw-content: "";
     }
   }
-}
+}

package/dist/index.cjs

@@ -2123,17 +2123,12 @@ function ContentEditable({
   placeholder: placeholder2,
   className,
   placeholderClassName,
-  placeholderDefaults = true,
-  readOnly = false
+  placeholderDefaults = true
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_LexicalContentEditable.ContentEditable,
     {
-      className: cn(
-        "ContentEditable__root relative block px-8 py-4 focus:outline-none",
-        readOnly ? "min-h-0" : "min-h-72",
-        className
-      ),
+      className: cn("ContentEditable__root relative block min-h-72 px-8 py-4 focus:outline-none", className),
       "aria-placeholder": placeholder2,
       "aria-label": placeholder2 || "Editor n\u1ED9i dung",
       placeholder: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2622,39 +2617,20 @@ function ImageComponent({
     e.stopPropagation();
     setIsViewOriginalOpen(true);
   }, [isEditable]);
-  const imageWrapper = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    "div",
+  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,
     {
-      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"
-        }
-      )
+      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,
     {
@@ -2671,8 +2647,7 @@ function ImageComponent({
           {
             type: "button",
             onClick: handleViewOriginal,
-            className: "block w-full cursor-pointer border-0 bg-transparent p-0 text-left outline-none [&>div]:outline-none",
-            style: { pointerEvents: "auto" },
+            className: "cursor-pointer border-0 bg-transparent p-0 text-left outline-none [&>div]:outline-none",
             "aria-label": "Xem h\xECnh g\u1ED1c",
             children: imageWrapper
           }
@@ -2723,20 +2698,20 @@ 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-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)(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-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)(
+                  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: "min-w-0 min-h-0 max-w-full max-h-full w-auto h-auto object-contain rounded-lg select-none"
+                      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-4 py-3 border-t border-border/50 bg-muted/20 rounded-b-xl", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -33235,8 +33210,7 @@ function Plugins({
             ContentEditable,
             {
               placeholder: readOnly ? "" : placeholder,
-              readOnly,
-              className: readOnly ? "cursor-default select-text border-0 bg-transparent shadow-none" : ""
+              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" : ""}`
             }
           ) }) }),
           ErrorBoundary: import_LexicalErrorBoundary2.LexicalErrorBoundary,
@@ -33412,11 +33386,10 @@ function Editor({
     {
       ref: editorRef,
       className: cn(
-        "bg-background rounded-lg w-full",
-        readOnly ? "shadow-none" : "shadow"
+        "w-full min-w-0",
+        !readOnly && "bg-background rounded-lg 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,
         {