ct-rich-text-editor 1.3.27 → 1.3.29

package/dist/assets/style.css

@@ -624,6 +624,10 @@ video {
   bottom: 0px;
 }
 
+.cteditor-bottom-1{
+  bottom: 0.25rem;
+}
+
 .cteditor-bottom-2{
   bottom: 0.5rem;
 }
@@ -676,6 +680,10 @@ video {
   top: 0px;
 }
 
+.cteditor-top-1{
+  top: 0.25rem;
+}
+
 .cteditor-top-1\/2{
   top: 50%;
 }
@@ -716,10 +724,18 @@ video {
   z-index: 10001;
 }
 
+.cteditor-z-\[1000\]{
+  z-index: 1000;
+}
+
 .cteditor-z-\[100\]{
   z-index: 100;
 }
 
+.cteditor-z-\[5\]{
+  z-index: 5;
+}
+
 .cteditor-z-\[9999\]{
   z-index: 9999;
 }
@@ -742,6 +758,21 @@ video {
   margin-right: -0.25rem;
 }
 
+.cteditor-mx-0\.5{
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
+
+.cteditor-mx-2{
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.cteditor-mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .cteditor-my-1{
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -752,6 +783,11 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.cteditor-my-2\.5{
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
 .cteditor-my-3{
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -826,6 +862,10 @@ video {
   margin-top: 0.25rem;
 }
 
+.cteditor-mt-1\.5{
+  margin-top: 0.375rem;
+}
+
 .cteditor-mt-2{
   margin-top: 0.5rem;
 }
@@ -956,6 +996,11 @@ video {
   height: 1.5rem;
 }
 
+.cteditor-size-8{
+  width: 2rem;
+  height: 2rem;
+}
+
 .cteditor-size-\[18px\]{
   width: 18px;
   height: 18px;
@@ -986,6 +1031,10 @@ video {
   height: 1.75rem !important;
 }
 
+.\!cteditor-h-8{
+  height: 2rem !important;
+}
+
 .\!cteditor-h-auto{
   height: auto !important;
 }
@@ -1126,6 +1175,14 @@ video {
   max-height: 400px;
 }
 
+.cteditor-max-h-\[450px\]{
+  max-height: 450px;
+}
+
+.cteditor-max-h-\[57vh\]{
+  max-height: 57vh;
+}
+
 .cteditor-max-h-\[600px\]{
   max-height: 600px;
 }
@@ -1238,6 +1295,10 @@ video {
   width: 1rem;
 }
 
+.cteditor-w-44{
+  width: 11rem;
+}
+
 .cteditor-w-48{
   width: 12rem;
 }
@@ -1254,6 +1315,10 @@ video {
   width: 1.5rem;
 }
 
+.cteditor-w-64{
+  width: 16rem;
+}
+
 .cteditor-w-7{
   width: 1.75rem;
 }
@@ -1302,6 +1367,10 @@ video {
   width: 100%;
 }
 
+.cteditor-w-px{
+  width: 1px;
+}
+
 .cteditor-min-w-0{
   min-width: 0px;
 }
@@ -1342,6 +1411,14 @@ video {
   max-width: 24rem;
 }
 
+.cteditor-max-w-\[500px\]{
+  max-width: 500px;
+}
+
+.cteditor-max-w-\[90px\]{
+  max-width: 90px;
+}
+
 .cteditor-max-w-\[calc\(100vw-32px\)\]{
   max-width: calc(100vw - 32px);
 }
@@ -1404,6 +1481,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cteditor--translate-x-1\/2{
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cteditor--translate-y-1\/2{
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cteditor-translate-x-\[-50\%\]{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1414,6 +1501,20 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cteditor-translate-y-full{
+  --tw-translate-y: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cteditor-rotate-180{
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cteditor-transform{
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @keyframes cteditor-pulse{
 
   50%{
@@ -1792,11 +1893,40 @@ video {
   border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)) !important;
 }
 
+.cteditor-border-\[\#1a1a1a\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(26 26 26 / var(--tw-border-opacity, 1));
+}
+
+.cteditor-border-\[\#333\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(51 51 51 / var(--tw-border-opacity, 1));
+}
+
+.cteditor-border-\[\#3a5a3a\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(58 90 58 / var(--tw-border-opacity, 1));
+}
+
+.cteditor-border-\[\#444\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(68 68 68 / var(--tw-border-opacity, 1));
+}
+
+.cteditor-border-\[\#5a3a3a\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(90 58 58 / var(--tw-border-opacity, 1));
+}
+
 .cteditor-border-\[\#e0e0e0\]{
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
 }
 
+.cteditor-border-\[hsl\(var\(--cteditorf47ac10b-border\)\)\]{
+  border-color: hsl(var(--cteditorf47ac10b-border));
+}
+
 .cteditor-border-accent{
   border-color: hsl(var(--cteditorf47ac10b-accent));
 }
@@ -1824,10 +1954,22 @@ video {
   border-color: hsl(var(--cteditorf47ac10b-border));
 }
 
+.cteditor-border-border\/40{
+  border-color: hsl(var(--cteditorf47ac10b-border) / 0.4);
+}
+
+.cteditor-border-border\/50{
+  border-color: hsl(var(--cteditorf47ac10b-border) / 0.5);
+}
+
 .cteditor-border-destructive{
   border-color: hsl(var(--cteditorf47ac10b-destructive));
 }
 
+.cteditor-border-destructive\/20{
+  border-color: hsl(var(--cteditorf47ac10b-destructive) / 0.2);
+}
+
 .cteditor-border-foreground{
   border-color: hsl(var(--cteditorf47ac10b-foreground));
 }
@@ -1881,6 +2023,11 @@ video {
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
 }
 
+.cteditor-border-gray-700{
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+
 .cteditor-border-green-200{
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
@@ -1975,12 +2122,46 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-secondary)) !important;
 }
 
-.cteditor-bg-accent{
-  background-color: hsl(var(--cteditorf47ac10b-accent));
+.cteditor-bg-\[\#1a1a1a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
+}
+
+.cteditor-bg-\[\#1a2e1a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 46 26 / var(--tw-bg-opacity, 1));
+}
+
+.cteditor-bg-\[\#2a2a2a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
+}
+
+.cteditor-bg-\[\#2a3a2a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(42 58 42 / var(--tw-bg-opacity, 1));
+}
+
+.cteditor-bg-\[\#2e1a1a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(46 26 26 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-accent\/30{
-  background-color: hsl(var(--cteditorf47ac10b-accent) / 0.3);
+.cteditor-bg-\[\#3a2a2a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(58 42 42 / var(--tw-bg-opacity, 1));
+}
+
+.cteditor-bg-\[hsl\(var\(--cteditorf47ac10b-popover\)\)\]{
+  background-color: hsl(var(--cteditorf47ac10b-popover));
+}
+
+.cteditor-bg-\[hsla\(var\(--foreground\)\/0\.1\)\]{
+  background-color: hsla(var(--foreground)/0.1);
+}
+
+.cteditor-bg-accent{
+  background-color: hsl(var(--cteditorf47ac10b-accent));
 }
 
 .cteditor-bg-accent\/50{
@@ -2013,10 +2194,6 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-background) / 0.95);
 }
 
-.cteditor-bg-black\/30{
-  background-color: rgb(0 0 0 / 0.3);
-}
-
 .cteditor-bg-black\/60{
   background-color: rgb(0 0 0 / 0.6);
 }
@@ -2049,6 +2226,10 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-border));
 }
 
+.cteditor-bg-card{
+  background-color: hsl(var(--cteditorf47ac10b-card));
+}
+
 .cteditor-bg-current{
   background-color: currentColor;
 }
@@ -2143,15 +2324,6 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-primary) / 0.05);
 }
 
-.cteditor-bg-purple-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
-}
-
-.cteditor-bg-purple-500\/10{
-  background-color: rgb(168 85 247 / 0.1);
-}
-
 .cteditor-bg-red-100{
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
@@ -2193,6 +2365,10 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.cteditor-bg-white\/90{
+  background-color: rgb(255 255 255 / 0.9);
+}
+
 .cteditor-bg-yellow-50{
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
@@ -2253,6 +2429,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--cteditorf47ac10b-primary) / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.cteditor-via-primary\/5{
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-primary) / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--cteditorf47ac10b-primary) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .\!cteditor-to-foreground\/0{
   --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-to-position) !important;
 }
@@ -2282,6 +2463,18 @@ video {
   padding: 0px !important;
 }
 
+.\!cteditor-p-2{
+  padding: 0.5rem !important;
+}
+
+.\!cteditor-p-3{
+  padding: 0.75rem !important;
+}
+
+.\!cteditor-p-4{
+  padding: 1rem !important;
+}
+
 .cteditor-p-0{
   padding: 0px;
 }
@@ -2341,11 +2534,21 @@ video {
   padding-bottom: 0.125rem !important;
 }
 
+.\!cteditor-py-1{
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
 .\!cteditor-py-3{
   padding-top: 0.75rem !important;
   padding-bottom: 0.75rem !important;
 }
 
+.cteditor-px-0\.5{
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
 .cteditor-px-1{
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2391,6 +2594,11 @@ video {
   padding-right: 2rem;
 }
 
+.cteditor-py-0{
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .cteditor-py-0\.5{
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -2436,14 +2644,14 @@ video {
   padding-bottom: 7px;
 }
 
-.cteditor-pb-1{
-  padding-bottom: 0.25rem;
-}
-
 .cteditor-pb-1\.5{
   padding-bottom: 0.375rem;
 }
 
+.cteditor-pb-12{
+  padding-bottom: 3rem;
+}
+
 .cteditor-pb-2{
   padding-bottom: 0.5rem;
 }
@@ -2456,6 +2664,10 @@ video {
   padding-left: 0.5rem;
 }
 
+.cteditor-pl-2\.5{
+  padding-left: 0.625rem;
+}
+
 .cteditor-pl-8{
   padding-left: 2rem;
 }
@@ -2468,18 +2680,22 @@ video {
   padding-right: 2.75rem;
 }
 
-.cteditor-pr-12{
-  padding-right: 3rem;
-}
-
 .cteditor-pr-2{
   padding-right: 0.5rem;
 }
 
+.cteditor-pr-6{
+  padding-right: 1.5rem;
+}
+
 .cteditor-pr-8{
   padding-right: 2rem;
 }
 
+.cteditor-pt-0{
+  padding-top: 0px;
+}
+
 .cteditor-pt-1{
   padding-top: 0.25rem;
 }
@@ -2640,6 +2856,41 @@ video {
   color: rgb(180 83 9 / var(--tw-text-opacity, 1)) !important;
 }
 
+.cteditor-text-\[\#1a1a1a\]{
+  --tw-text-opacity: 1;
+  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
+}
+
+.cteditor-text-\[\#4ade80\]{
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
+}
+
+.cteditor-text-\[\#666\]{
+  --tw-text-opacity: 1;
+  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
+}
+
+.cteditor-text-\[\#888\]{
+  --tw-text-opacity: 1;
+  color: rgb(136 136 136 / var(--tw-text-opacity, 1));
+}
+
+.cteditor-text-\[\#999\]{
+  --tw-text-opacity: 1;
+  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
+}
+
+.cteditor-text-\[\#ccc\]{
+  --tw-text-opacity: 1;
+  color: rgb(204 204 204 / var(--tw-text-opacity, 1));
+}
+
+.cteditor-text-\[\#f87171\]{
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+
 .cteditor-text-amber-600{
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
@@ -2694,6 +2945,10 @@ video {
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
 }
 
+.cteditor-text-card-foreground{
+  color: hsl(var(--cteditorf47ac10b-card-foreground));
+}
+
 .cteditor-text-destructive{
   color: hsl(var(--cteditorf47ac10b-destructive));
 }
@@ -2748,6 +3003,11 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));
 }
 
+.cteditor-text-gray-900{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+
 .cteditor-text-green-500{
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -2777,6 +3037,10 @@ video {
   color: hsl(var(--cteditorf47ac10b-muted-foreground));
 }
 
+.cteditor-text-muted-foreground\/60{
+  color: hsl(var(--cteditorf47ac10b-muted-foreground) / 0.6);
+}
+
 .cteditor-text-orange-500{
   --tw-text-opacity: 1;
   color: rgb(249 115 22 / var(--tw-text-opacity, 1));
@@ -2906,6 +3170,10 @@ video {
   opacity: 0.25;
 }
 
+.cteditor-opacity-40{
+  opacity: 0.4;
+}
+
 .cteditor-opacity-50{
   opacity: 0.5;
 }
@@ -2934,6 +3202,18 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.cteditor-shadow-\[0_4px_12px_hsla\(var\(--cteditorf47ac10b-foreground\)_\/_0\.1\)\]{
+  --tw-shadow: 0 4px 12px hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.cteditor-shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.4\)\]{
+  --tw-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .cteditor-shadow-lg{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3083,10 +3363,6 @@ video {
   --tw-enter-translate-y: 1rem;
 }
 
-.cteditor-slide-in-from-right{
-  --tw-enter-translate-x: 100%;
-}
-
 .cteditor-duration-150{
   animation-duration: 150ms;
 }
@@ -3142,8 +3418,8 @@ body {
   }
 
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 4px;
+    height: 4px;
   }
 
 ::-webkit-scrollbar-track {
@@ -3451,6 +3727,11 @@ body .EmojiPickerReact{
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.hover\:cteditor-border-green-200:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
+}
+
 .hover\:cteditor-border-primary:hover{
   border-color: hsl(var(--cteditorf47ac10b-primary));
 }
@@ -3459,11 +3740,20 @@ body .EmojiPickerReact{
   border-color: hsl(var(--cteditorf47ac10b-primary) / 0.5);
 }
 
+.hover\:cteditor-border-red-200:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
+
 .hover\:cteditor-border-white:hover{
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
+.hover\:cteditor-bg-\[rgba\(25\2c 118\2c 210\2c 0\.1\)\]:hover{
+  background-color: rgba(25,118,210,0.1);
+}
+
 .hover\:cteditor-bg-accent:hover{
   background-color: hsl(var(--cteditorf47ac10b-accent));
 }
@@ -3544,6 +3834,11 @@ body .EmojiPickerReact{
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:cteditor-bg-green-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:cteditor-bg-green-600:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
@@ -3561,9 +3856,9 @@ body .EmojiPickerReact{
   background-color: hsl(var(--cteditorf47ac10b-primary) / 0.9);
 }
 
-.hover\:cteditor-bg-purple-600:hover{
+.hover\:cteditor-bg-red-50:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
 
 .hover\:cteditor-bg-red-600:hover{
@@ -3668,10 +3963,18 @@ body .EmojiPickerReact{
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
 
+.focus\:cteditor-border-foreground:focus{
+  border-color: hsl(var(--cteditorf47ac10b-foreground));
+}
+
 .focus\:cteditor-border-primary:focus{
   border-color: hsl(var(--cteditorf47ac10b-primary));
 }
 
+.focus\:cteditor-border-primary\/50:focus{
+  border-color: hsl(var(--cteditorf47ac10b-primary) / 0.5);
+}
+
 .focus\:cteditor-border-primary\/60:focus{
   border-color: hsl(var(--cteditorf47ac10b-primary) / 0.6);
 }
@@ -3720,10 +4023,6 @@ body .EmojiPickerReact{
   --tw-ring-color: hsl(var(--cteditorf47ac10b-primary) / 0.2);
 }
 
-.focus\:cteditor-ring-purple-500\/50:focus{
-  --tw-ring-color: rgb(168 85 247 / 0.5);
-}
-
 .focus\:cteditor-ring-ring:focus{
   --tw-ring-color: hsl(var(--cteditorf47ac10b-ring));
 }
@@ -4012,6 +4311,11 @@ body .EmojiPickerReact{
   border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
 }
 
+.dark\:cteditor-border-gray-300:is(.cteditor-dark *){
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
 .dark\:cteditor-border-gray-700:is(.cteditor-dark *){
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
@@ -4112,6 +4416,10 @@ body .EmojiPickerReact{
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
 }
 
+.dark\:cteditor-text-background:is(.cteditor-dark *){
+  color: hsl(var(--cteditorf47ac10b-background));
+}
+
 .dark\:cteditor-text-blue-100:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity, 1));
@@ -4132,6 +4440,11 @@ body .EmojiPickerReact{
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
 
+.dark\:cteditor-text-gray-100:is(.cteditor-dark *){
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+
 .dark\:cteditor-text-gray-300:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@@ -4264,8 +4577,8 @@ body .EmojiPickerReact{
     border-radius: var(--cteditorf47ac10b-radius);
   }
 
-  .sm\:cteditor-p-5{
-    padding: 1.25rem;
+  .sm\:\!cteditor-p-5{
+    padding: 1.25rem !important;
   }
 
   .sm\:cteditor-text-left{
@@ -4279,10 +4592,22 @@ body .EmojiPickerReact{
     width: 120px !important;
   }
 
+  .md\:cteditor-w-60{
+    width: 15rem;
+  }
+
   .md\:\!cteditor-bg-secondary{
     background-color: hsl(var(--cteditorf47ac10b-secondary)) !important;
   }
 
+  .md\:cteditor-p-2{
+    padding: 0.5rem;
+  }
+
+  .md\:cteditor-pt-3{
+    padding-top: 0.75rem;
+  }
+
   .md\:cteditor-text-sm{
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -4403,10 +4728,18 @@ body .EmojiPickerReact{
   opacity: 0.5;
 }
 
+.\[\&\>div\>div\]\:cteditor-w-full>div>div{
+  width: 100%;
+}
+
 .\[\&\>div\>input\]\:\!cteditor-w-5>div>input{
   width: 1.25rem !important;
 }
 
+.\[\&\>div\]\:cteditor-w-full>div{
+  width: 100%;
+}
+
 .\[\&\>hr\]\:cteditor-h-\[2px\]>hr{
   height: 2px;
 }
@@ -5997,6 +6330,56 @@ body .EmojiPickerReact{
     word-wrap: break-word;
   }
 
+  /* ===== RESPONSIVE STYLES FOR FLOATED IMAGES ===== */
+  /* On smaller screens, remove floats and stack content vertically */
+  @media (max-width: 768px) {
+    /* Remove float from images on mobile - make them full width and centered */
+    .editor-image[style*="float: left"],
+    .editor-image[style*="float:left"],
+    .editor-image[style*="float: right"],
+    .editor-image[style*="float:right"] {
+      float: none !important;
+      display: block !important;
+      margin: 1em auto !important;
+      max-width: 100% !important;
+      width: 100% !important;
+    }
+
+    /* Remove float from paragraphs containing floated images */
+    .PlaygroundEditorTheme__paragraph[style*="text-align: right"]:has(> .editor-image),
+    .PlaygroundEditorTheme__paragraph[style*="text-align:right"]:has(> .editor-image),
+    .PlaygroundEditorTheme__paragraph[style*="text-align: left"]:has(> .editor-image),
+    .PlaygroundEditorTheme__paragraph[style*="text-align:left"]:has(> .editor-image) {
+      float: none !important;
+      max-width: 100% !important;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+      margin-bottom: 1em !important;
+    }
+
+    /* Paragraphs that were using display:contents should become normal blocks */
+    .PlaygroundEditorTheme__paragraph:has(> .editor-image[style*="float"]):not(:has([data-lexical-text])) {
+      display: block !important;
+    }
+  }
+
+  /* Tablet breakpoint - slightly reduce max-width of floats */
+  @media (min-width: 769px) and (max-width: 1024px) {
+    .editor-image[style*="float: left"],
+    .editor-image[style*="float:left"],
+    .editor-image[style*="float: right"],
+    .editor-image[style*="float:right"] {
+      max-width: 40% !important;
+    }
+
+    .PlaygroundEditorTheme__paragraph[style*="text-align: right"]:has(> .editor-image),
+    .PlaygroundEditorTheme__paragraph[style*="text-align:right"]:has(> .editor-image),
+    .PlaygroundEditorTheme__paragraph[style*="text-align: left"]:has(> .editor-image),
+    .PlaygroundEditorTheme__paragraph[style*="text-align:left"]:has(> .editor-image) {
+      max-width: 40% !important;
+    }
+  }
+
   .editor-image img {
     max-width: 100%;
     cursor: default;
@@ -7008,15 +7391,7 @@ body .EmojiPickerReact{
 /* Mentions Plugin Styles */
 
 .typeahead-popover.mentions-menu {
-  background: hsl(var(--cteditorf47ac10b-popover));
-  border: 1px solid hsl(var(--cteditorf47ac10b-border));
-  border-radius: 8px;
-  box-shadow: 0 4px 12px hsla(var(--cteditorf47ac10b-foreground) / 0.1);
-  padding: 8px;
-  max-height: 300px;
-  overflow-y: auto;
-  min-width: 200px;
-  z-index: 1000;
+
 }
 
 .typeahead-popover.mentions-menu ul {
@@ -7030,24 +7405,26 @@ body .EmojiPickerReact{
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-radius: 6px;
+  border-radius: 0;
   cursor: pointer;
   transition: all 0.15s ease;
   color: hsl(var(--cteditorf47ac10b-foreground));
+  border-left: 2px solid transparent;
 }
 
 .typeahead-popover.mentions-menu .item:hover {
   background: hsl(var(--cteditorf47ac10b-accent));
+  border-left-color: hsl(var(--cteditorf47ac10b-primary));
 }
 
 .typeahead-popover.mentions-menu .item.selected {
-  background: hsl(var(--cteditorf47ac10b-primary));
-  color: hsl(var(--cteditorf47ac10b-primary-foreground));
+  background: hsl(var(--cteditorf47ac10b-primary) / 0.1);
+  border-left-color: hsl(var(--cteditorf47ac10b-primary));
 }
 
 .typeahead-popover.mentions-menu .item .icon.user {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   background: hsl(var(--cteditorf47ac10b-muted));
   display: flex;
@@ -7056,11 +7433,7 @@ body .EmojiPickerReact{
   flex-shrink: 0;
 }
 
-.typeahead-popover.mentions-menu .item .icon.user::before {
-  content: '👤';
-  font-size: 12px;
-  font-style: normal;
-}
+
 
 .typeahead-popover.mentions-menu .item.selected .icon.user {
   background: hsl(var(--cteditorf47ac10b-primary-foreground) / 0.2);