@thangph2146/nextjs-editor 1.0.4 → 1.0.9

package/dist/styles.css

@@ -1,4 +1,37 @@
-/* nextjs-editor: theme + scoped utilities (không cần @source, không bị app ghi đè) */
+/* Dùng @layer nextjs-editor để app có thể đặt SCSS/CSS trong layer khác và tránh ghi đè editor. Xem README. */
+@layer nextjs-editor {
+/* Fallback CSS variables cho #editor-x khi app chưa định nghĩa */
+
+/**
+ * Fallback CSS variables cho #editor-x khi app chưa định nghĩa (vd. playground).
+ * App có :root { --background, ... } sẽ kế thừa; không có thì dùng giá trị dưới đây.
+ */
+#editor-x {
+  --background: var(--background, #ffffff);
+  --foreground: var(--foreground, #0a0a0a);
+  --primary: var(--primary, #171717);
+  --primary-foreground: var(--primary-foreground, #fafafa);
+  --muted: var(--muted, #f5f5f5);
+  --muted-foreground: var(--muted-foreground, #737373);
+  --accent: var(--accent, #f5f5f5);
+  --accent-foreground: var(--accent-foreground, #171717);
+  --border: var(--border, #e5e5e5);
+  --ring: var(--ring, #171717);
+  --destructive: var(--destructive, #ef4444);
+  --destructive-foreground: var(--destructive-foreground, #fafafa);
+  --card: var(--card, #ffffff);
+  --card-foreground: var(--card-foreground, #0a0a0a);
+  --popover: var(--popover, #ffffff);
+  --popover-foreground: var(--popover-foreground, #0a0a0a);
+  --input: var(--input, #e5e5e5);
+  --secondary: var(--secondary, #f5f5f5);
+  --secondary-foreground: var(--secondary-foreground, #171717);
+  --ring-offset: var(--ring-offset, #ffffff);
+  --radius: var(--radius, 0.5rem);
+}
+
+
+/* nextjs-editor: theme + scoped utilities */
 
 .EditorTheme__code {
   background-color: transparent;
@@ -985,6 +1018,9 @@ div.border.border-dashed .editor-image img {
   #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%;
   }
@@ -1042,9 +1078,6 @@ div.border.border-dashed .editor-image img {
   #editor-x .min-h-\[54px\] {
     min-height: 54px;
   }
-  #editor-x .min-h-\[70vh\] {
-    min-height: 70vh;
-  }
   #editor-x .min-h-\[300px\] {
     min-height: 300px;
   }
@@ -1529,6 +1562,10 @@ div.border.border-dashed .editor-image img {
     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);
@@ -1656,10 +1693,10 @@ div.border.border-dashed .editor-image img {
       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 {
@@ -1722,12 +1759,6 @@ div.border.border-dashed .editor-image img {
       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)) {
@@ -1921,12 +1952,12 @@ div.border.border-dashed .editor-image img {
   #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);
   }
@@ -1936,6 +1967,9 @@ div.border.border-dashed .editor-image img {
   #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);
   }
@@ -2205,6 +2239,10 @@ div.border.border-dashed .editor-image img {
     --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);
@@ -3281,6 +3319,11 @@ div.border.border-dashed .editor-image img {
       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;
@@ -4274,3 +4317,5 @@ div.border.border-dashed .editor-image img {
     }
   }
 }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangph2146/nextjs-editor",
-  "version": "1.0.4",
+  "version": "1.0.9",
   "description": "Rich text editor for Next.js built on Lexical",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -20,7 +20,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "tsup && node scripts/build-editor-css.mjs",