@thangph2146/nextjs-editor 1.0.4 → 1.0.9

package/dist/index.js

@@ -2113,12 +2113,17 @@ function ContentEditable({
   placeholder: placeholder2,
   className,
   placeholderClassName,
-  placeholderDefaults = true
+  placeholderDefaults = true,
+  readOnly = false
 }) {
   return /* @__PURE__ */ jsx17(
     LexicalContentEditable,
     {
-      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__ */ jsx17(
@@ -2628,20 +2633,39 @@ function ImageComponent({
     e.stopPropagation();
     setIsViewOriginalOpen(true);
   }, [isEditable]);
-  const imageWrapper = /* @__PURE__ */ jsx19("div", { draggable, children: isLoadError ? /* @__PURE__ */ jsx19(BrokenImage, {}) : /* @__PURE__ */ jsx19(
-    LazyImage,
+  const imageWrapper = /* @__PURE__ */ jsx19(
+    "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__ */ jsx19(BrokenImage, {}) : /* @__PURE__ */ jsx19(
+        LazyImage,
+        {
+          className: imageClassName,
+          src,
+          altText,
+          imageRef,
+          width: responsiveDimensions.width,
+          height: responsiveDimensions.height,
+          maxWidth,
+          onError: () => setIsLoadError(true),
+          fetchPriority: isPriority ? "high" : "auto"
+        }
+      )
     }
-  ) });
+  );
   return /* @__PURE__ */ jsx19(
     Suspense,
     {
@@ -2658,7 +2682,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
           }
@@ -2709,29 +2734,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__ */ jsx19(DialogHeader, { className: "shrink-0 px-6 pt-5 pb-2 border-b bg-muted/30", children: /* @__PURE__ */ jsx19(DialogTitle, { className: "text-base font-semibold", children: "Xem h\xECnh g\u1ED1c" }) }),
+              /* @__PURE__ */ jsx19(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__ */ jsx19(DialogTitle, { className: "text-sm font-semibold", children: "Xem h\xECnh g\u1ED1c" }) }),
               /* @__PURE__ */ jsx19(
                 "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__ */ jsx19(
+                  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__ */ jsx19("div", { className: "max-w-full max-h-full min-w-0 min-h-0 flex items-center justify-center", children: /* @__PURE__ */ jsx19(
                     "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__ */ jsx19(DialogFooter, { className: "shrink-0 flex-row justify-center gap-2 px-6 py-4 border-t bg-muted/20 rounded-b-xl", children: /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx19(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__ */ jsx19(
                 Button,
                 {
                   variant: "outline",
-                  size: "default",
+                  size: "sm",
                   asChild: true,
-                  className: "gap-2 text-base",
+                  className: "gap-2",
                   children: /* @__PURE__ */ jsxs9(
                     "a",
                     {
@@ -33515,7 +33540,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: LexicalErrorBoundary2,
@@ -33691,9 +33717,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__ */ jsx96(EditorContainerProvider, { value: { maxWidth: editorMaxWidth }, children: /* @__PURE__ */ jsx96(
         LexicalComposer,
         {