ct-rich-text-editor 1.3.0 → 1.3.2

package/dist/assets/style.css

@@ -751,10 +751,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.cteditor-ml-1{
-  margin-left: 0.25rem;
-}
-
 .cteditor-ml-2{
   margin-left: 0.5rem;
 }
@@ -775,10 +771,6 @@ video {
   margin-right: 0.5rem;
 }
 
-.cteditor-mr-4{
-  margin-right: 1rem;
-}
-
 .cteditor-mt-0\.5{
   margin-top: 0.125rem;
 }
@@ -815,6 +807,10 @@ video {
   display: inline-block;
 }
 
+.cteditor-inline{
+  display: inline;
+}
+
 .cteditor-flex{
   display: flex;
 }
@@ -875,6 +871,11 @@ video {
   height: 1.5rem;
 }
 
+.cteditor-size-8{
+  width: 2rem;
+  height: 2rem;
+}
+
 .cteditor-size-9{
   width: 2.25rem;
   height: 2.25rem;
@@ -957,6 +958,10 @@ video {
   height: var(--radix-select-trigger-height);
 }
 
+.cteditor-h-auto{
+  height: auto;
+}
+
 .cteditor-h-full{
   height: 100%;
 }
@@ -965,6 +970,14 @@ video {
   height: 1px;
 }
 
+.cteditor-max-h-44{
+  max-height: 11rem;
+}
+
+.cteditor-max-h-56{
+  max-height: 14rem;
+}
+
 .cteditor-max-h-60{
   max-height: 15rem;
 }
@@ -1021,10 +1034,6 @@ video {
   width: 2.25rem !important;
 }
 
-.\!cteditor-w-\[120px\]{
-  width: 120px !important;
-}
-
 .\!cteditor-w-full{
   width: 100% !important;
 }
@@ -1093,10 +1102,6 @@ video {
   width: 2rem;
 }
 
-.cteditor-w-80{
-  width: 20rem;
-}
-
 .cteditor-w-9{
   width: 2.25rem;
 }
@@ -1109,6 +1114,10 @@ video {
   width: 1px;
 }
 
+.cteditor-w-\[20rem\]{
+  width: 20rem;
+}
+
 .cteditor-w-\[400px\]{
   width: 400px;
 }
@@ -1161,6 +1170,10 @@ video {
   max-width: 32rem;
 }
 
+.cteditor-max-w-xs{
+  max-width: 20rem;
+}
+
 .cteditor-flex-1{
   flex: 1 1 0%;
 }
@@ -1219,6 +1232,12 @@ 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-scale-\[5\]{
+  --tw-scale-x: 5;
+  --tw-scale-y: 5;
+  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%{
@@ -1284,6 +1303,10 @@ video {
   flex-wrap: wrap;
 }
 
+.cteditor-flex-nowrap{
+  flex-wrap: nowrap;
+}
+
 .cteditor-items-start{
   align-items: flex-start;
 }
@@ -1292,6 +1315,10 @@ video {
   align-items: center;
 }
 
+.\!cteditor-justify-start{
+  justify-content: flex-start !important;
+}
+
 .cteditor-justify-start{
   justify-content: flex-start;
 }
@@ -1388,10 +1415,6 @@ video {
   margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }
 
-.cteditor-overflow-auto{
-  overflow: auto;
-}
-
 .cteditor-overflow-hidden{
   overflow: hidden;
 }
@@ -1408,6 +1431,10 @@ video {
   overflow-x: hidden;
 }
 
+.cteditor-overflow-y-hidden{
+  overflow-y: hidden;
+}
+
 .cteditor-truncate{
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1471,10 +1498,18 @@ video {
   border-width: 2px;
 }
 
+.cteditor-border-\[1px\]{
+  border-width: 1px;
+}
+
 .cteditor-border-b{
   border-bottom-width: 1px;
 }
 
+.cteditor-border-b-2{
+  border-bottom-width: 2px;
+}
+
 .cteditor-border-l{
   border-left-width: 1px;
 }
@@ -1495,6 +1530,10 @@ video {
   border-style: dashed;
 }
 
+.\!cteditor-border-none{
+  border-style: none !important;
+}
+
 .cteditor-border-none{
   border-style: none;
 }
@@ -1513,6 +1552,10 @@ video {
   border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
 }
 
+.cteditor-border-background\/20{
+  border-color: hsl(var(--cteditorf47ac10b-background) / 0.2);
+}
+
 .cteditor-border-blue-200{
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
@@ -1531,8 +1574,8 @@ video {
   border-color: hsl(var(--cteditorf47ac10b-border) / 0.3);
 }
 
-.cteditor-border-border\/50{
-  border-color: hsl(var(--cteditorf47ac10b-border) / 0.5);
+.cteditor-border-foreground{
+  border-color: hsl(var(--cteditorf47ac10b-foreground));
 }
 
 .cteditor-border-foreground\/15{
@@ -1646,10 +1689,18 @@ video {
   border-left-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
 }
 
+.\!cteditor-bg-accent{
+  background-color: hsl(var(--cteditorf47ac10b-accent)) !important;
+}
+
 .\!cteditor-bg-foreground\/10{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.1) !important;
 }
 
+.\!cteditor-bg-foreground\/5{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05) !important;
+}
+
 .\!cteditor-bg-secondary{
   background-color: hsl(var(--cteditorf47ac10b-secondary)) !important;
 }
@@ -1756,6 +1807,10 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-muted));
 }
 
+.cteditor-bg-muted\/30{
+  background-color: hsl(var(--cteditorf47ac10b-muted) / 0.3);
+}
+
 .cteditor-bg-muted\/50{
   background-color: hsl(var(--cteditorf47ac10b-muted) / 0.5);
 }
@@ -1904,6 +1959,11 @@ video {
   padding-bottom: 0.125rem !important;
 }
 
+.\!cteditor-py-3{
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+}
+
 .cteditor-px-1{
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2159,6 +2219,10 @@ video {
   color: rgb(120 53 15 / var(--tw-text-opacity, 1));
 }
 
+.cteditor-text-background{
+  color: hsl(var(--cteditorf47ac10b-background));
+}
+
 .cteditor-text-black{
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
@@ -2174,11 +2238,6 @@ video {
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 
-.cteditor-text-blue-700{
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
-}
-
 .cteditor-text-blue-800{
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
@@ -2390,6 +2449,10 @@ video {
   outline-width: 0px;
 }
 
+.cteditor-outline-background\/30{
+  outline-color: hsl(var(--cteditorf47ac10b-background) / 0.3);
+}
+
 .cteditor-ring-offset-background{
   --tw-ring-offset-color: hsl(var(--cteditorf47ac10b-background));
 }
@@ -2599,6 +2662,35 @@ body.dark ::-webkit-scrollbar-thumb {
     background-color: transparent !important;
   }
 
+.PlaygroundEditorTheme__tableCellHeader,
+  .PlaygroundEditorTheme__table th,
+  .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    max-height: 40px !important;
+    line-height: 1.2 !important;
+  }
+
+/* Prevent wrapping in all nested elements inside table headers */
+
+.PlaygroundEditorTheme__tableCellHeader *,
+  .PlaygroundEditorTheme__table th *,
+  .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader * {
+    white-space: nowrap !important;
+    display: inline !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    line-height: 1.2 !important;
+  }
+
+/* Force br tags to not create new lines in headers */
+
+.PlaygroundEditorTheme__tableCellHeader br,
+  .PlaygroundEditorTheme__table th br,
+  .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader br {
+    display: none !important;
+  }
+
 .editor .PlaygroundEditorTheme__tableAddRows,
   .editor .PlaygroundEditorTheme__tableAddColumns {
     background-color: hsla(var(--cteditorf47ac10b-foreground));
@@ -2680,6 +2772,46 @@ body .ai-chat-popup .ai-chat-input {
     }
   }
 
+/* Editor responsive styles - ensure proper box-sizing and scrolling */
+
+#ct-editor-f47ac10b * {
+    box-sizing: border-box;
+  }
+
+/* Better scrollbar styling for toolbar and overflow areas */
+
+#ct-editor-f47ac10b .cteditor-overflow-x-auto::-webkit-scrollbar {
+    height: 6px;
+  }
+
+#ct-editor-f47ac10b .cteditor-overflow-x-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+#ct-editor-f47ac10b .cteditor-overflow-x-auto::-webkit-scrollbar-thumb {
+    background: hsl(var(--cteditorf47ac10b-border));
+    border-radius: 3px;
+  }
+
+#ct-editor-f47ac10b .cteditor-overflow-x-auto::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--cteditorf47ac10b-foreground) / 0.3);
+  }
+
+/* Ensure toolbar items don't shrink on small screens */
+
+#ct-editor-f47ac10b [data-toolbar-item] {
+    flex-shrink: 0;
+  }
+
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
 .file\:cteditor-border-0::file-selector-button{
   border-width: 0px;
 }
@@ -2701,6 +2833,14 @@ body .ai-chat-popup .ai-chat-input {
   color: hsl(var(--cteditorf47ac10b-foreground));
 }
 
+.placeholder\:cteditor-text-background::-moz-placeholder{
+  color: hsl(var(--cteditorf47ac10b-background));
+}
+
+.placeholder\:cteditor-text-background::placeholder{
+  color: hsl(var(--cteditorf47ac10b-background));
+}
+
 .placeholder\:cteditor-text-muted-foreground::-moz-placeholder{
   color: hsl(var(--cteditorf47ac10b-muted-foreground));
 }
@@ -2823,8 +2963,13 @@ body .ai-chat-popup .ai-chat-input {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:cteditor-bg-muted\/80:hover{
-  background-color: hsl(var(--cteditorf47ac10b-muted) / 0.8);
+.hover\:cteditor-bg-green-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:cteditor-bg-muted\/50:hover{
+  background-color: hsl(var(--cteditorf47ac10b-muted) / 0.5);
 }
 
 .hover\:cteditor-bg-primary:hover{
@@ -2905,12 +3050,6 @@ body .ai-chat-popup .ai-chat-input {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:cteditor-shadow-lg:hover{
-  --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);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:cteditor-shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -2922,18 +3061,10 @@ body .ai-chat-popup .ai-chat-input {
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
 
-.focus\:cteditor-border-primary:focus{
-  border-color: hsl(var(--cteditorf47ac10b-primary));
-}
-
 .focus\:cteditor-border-primary\/60:focus{
   border-color: hsl(var(--cteditorf47ac10b-primary) / 0.6);
 }
 
-.focus\:cteditor-bg-background:focus{
-  background-color: hsl(var(--cteditorf47ac10b-background));
-}
-
 .focus\:cteditor-bg-foreground\/5:focus{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
@@ -2963,10 +3094,6 @@ body .ai-chat-popup .ai-chat-input {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:cteditor-ring-primary\/50:focus{
-  --tw-ring-color: hsl(var(--cteditorf47ac10b-primary) / 0.5);
-}
-
 .focus\:cteditor-ring-ring:focus{
   --tw-ring-color: hsl(var(--cteditorf47ac10b-ring));
 }
@@ -3269,11 +3396,6 @@ body .ai-chat-popup .ai-chat-input {
   border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
 }
 
-.dark\:cteditor-bg-\[\#0b0b0b\]:is(.cteditor-dark *){
-  --tw-bg-opacity: 1;
-  background-color: rgb(11 11 11 / var(--tw-bg-opacity, 1));
-}
-
 .dark\:cteditor-bg-amber-950\/50:is(.cteditor-dark *){
   background-color: rgb(69 26 3 / 0.5);
 }
@@ -3328,11 +3450,6 @@ body .ai-chat-popup .ai-chat-input {
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-text-blue-500:is(.cteditor-dark *){
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
-}
-
 .dark\:cteditor-text-gray-400:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@@ -3378,12 +3495,23 @@ body .ai-chat-popup .ai-chat-input {
   color: rgb(250 204 21 / var(--tw-text-opacity, 1));
 }
 
+@media not all and (min-width: 768px){
+
+  .max-md\:cteditor-w-full{
+    width: 100%;
+  }
+}
+
 @media (min-width: 640px){
 
   .sm\:cteditor-inline{
     display: inline;
   }
 
+  .sm\:cteditor-w-\[28rem\]{
+    width: 28rem;
+  }
+
   .sm\:cteditor-w-\[400px\]{
     width: 400px;
   }
@@ -3427,6 +3555,17 @@ body .ai-chat-popup .ai-chat-input {
   }
 }
 
+@media (min-width: 768px){
+
+  .md\:\!cteditor-w-\[120px\]{
+    width: 120px !important;
+  }
+
+  .md\:\!cteditor-bg-secondary{
+    background-color: hsl(var(--cteditorf47ac10b-secondary)) !important;
+  }
+}
+
 .\[\&\>button\:hover\>span\]\:cteditor-bottom-full>button:hover>span{
   bottom: 100%;
 }
@@ -3512,11 +3651,15 @@ body .ai-chat-popup .ai-chat-input {
   transition-duration: 150ms;
 }
 
-.\[\&\>button\]\:focus\:cteditor-bg-foreground\/5:focus>button{
+.hover\:\[\&\>button\]\:cteditor-bg-foreground\/5>button:hover{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
+}
+
+.focus\:\[\&\>button\]\:cteditor-bg-foreground\/5>button:focus{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
 
-.\[\&\>button\]\:focus\:cteditor-text-accent-foreground:focus>button{
+.focus\:\[\&\>button\]\:cteditor-text-accent-foreground>button:focus{
   color: hsl(var(--cteditorf47ac10b-accent-foreground));
 }
 
@@ -3610,8 +3753,65 @@ body .ai-chat-popup .ai-chat-input {
 
 .\[\&_svg\]\:cteditor-shrink-0 svg{
   flex-shrink: 0;
-}
-#ct-editor-f47ac10b {
+}#ct-editor-f47ac10b {
+  /* Responsive container styles for constrained spaces */
+  .editor-container {
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+  }
+
+  /* Ensure images scale properly */
+  .editor-image,
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Ensure tables are responsive */
+  .PlaygroundEditorTheme__table,
+  .table {
+    max-width: 100%;
+    overflow-x: auto;
+    display: block;
+  }
+
+  /* Prevent table header text wrapping */
+  .PlaygroundEditorTheme__tableCellHeader,
+  .PlaygroundEditorTheme__table th,
+  .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    max-height: 40px !important;
+    line-height: 1.2 !important;
+  }
+
+  /* Prevent wrapping in all nested elements inside table headers */
+  .PlaygroundEditorTheme__tableCellHeader *,
+  .PlaygroundEditorTheme__table th *,
+  .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader * {
+    white-space: nowrap !important;
+    display: inline !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    line-height: 1.2 !important;
+  }
+
+  /* Force br tags to not create new lines in headers */
+  .PlaygroundEditorTheme__tableCellHeader br,
+  .PlaygroundEditorTheme__table th br,
+  .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader br {
+    display: none !important;
+  }
+
+  /* Content editable area responsive styles */
+  [contenteditable="true"] {
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+
   .ltr {
     text-align: left;
   }
@@ -3744,8 +3944,8 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .code {
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.05);
-    color: hsla(var(--cteditorf47ac10b-foreground));
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.15);
+    color: hsla(var(--cteditorf47ac10b-foreground) / 0.95);
     font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
     padding: 8px 8px 8px 52px;
@@ -3760,15 +3960,22 @@ body .ai-chat-popup .ai-chat-input {
     overflow-x: auto;
     position: relative;
     border-radius: 6px;
-    border: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+    border: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.2);
     transition: all 0.2s ease;
     cursor: pointer;
   }
 
+  /* Hide extra br tags that create double spacing */
+  .code br {
+    line-height: 0;
+    height: 0;
+    display: block;
+  }
+
   .code:hover {
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.08);
-    border-color: hsla(var(--cteditorf47ac10b-foreground) / 0.2);
-    box-shadow: 0 2px 8px hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.18);
+    border-color: hsla(var(--cteditorf47ac10b-foreground) / 0.25);
+    box-shadow: 0 2px 8px hsla(var(--cteditorf47ac10b-foreground) / 0.15);
   }
 
   .code:focus-within {
@@ -3785,17 +3992,18 @@ body .ai-chat-popup .ai-chat-input {
   .code::before {
     content: attr(data-gutter);
     position: absolute;
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.08);
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.12);
     left: 0;
     top: 0;
-    border-right: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.15);
+    border-right: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.2);
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
     padding: 8px;
-    color: hsla(var(--cteditorf47ac10b-foreground) / 0.6);
-    white-space: pre-wrap;
+    color: hsla(var(--cteditorf47ac10b-foreground) / 0.75);
+    white-space: pre;
     text-align: right;
     min-width: 25px;
+    line-height: 1.53;
   }
 
   .characterLimit {
@@ -3929,11 +4137,11 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .tokenComment {
-    color: slategray;
+    color: #7c8896;
   }
 
   .tokenPunctuation {
-    color: #999;
+    color: #606060;
   }
 
   .comment-node {
@@ -4000,27 +4208,27 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .tokenProperty {
-    color: #905;
+    color: #b854a6;
   }
 
   .tokenSelector {
-    color: #690;
+    color: #5f8c3d;
   }
 
   .tokenOperator {
-    color: #9a6e3a;
+    color: #c48944;
   }
 
   .tokenAttr {
-    color: #07a;
+    color: #3a8fb7;
   }
 
   .tokenVariable {
-    color: #e90;
+    color: #ff9900;
   }
 
   .tokenFunction {
-    color: #dd4a68;
+    color: #e55876;
   }
 
   .mark {
@@ -4303,8 +4511,8 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .PlaygroundEditorTheme__code {
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.05);
-    color: hsla(var(--cteditorf47ac10b-foreground));
+    background-color: hsla(var(--cteditorf47ac10b-background) / 0.05);
+    color: hsla(var(--cteditorf47ac10b-background));
     font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
     padding: 8px 8px 8px 52px;
@@ -4319,15 +4527,15 @@ body .ai-chat-popup .ai-chat-input {
       -o-tab-size: 2;
          tab-size: 2;
     border-radius: 6px;
-    border: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+    border: 1px solid hsla(var(--cteditorf47ac10b-background) / 0.1);
     transition: all 0.2s ease;
     cursor: pointer;
   }
 
   .PlaygroundEditorTheme__code:hover {
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.08);
-    border-color: hsla(var(--cteditorf47ac10b-foreground) / 0.2);
-    box-shadow: 0 2px 8px hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+    background-color: hsla(var(--cteditorf47ac10b-background) / 0.08);
+    border-color: hsla(var(--cteditorf47ac10b-background) / 0.2);
+    box-shadow: 0 2px 8px hsla(var(--cteditorf47ac10b-background) / 0.1);
   }
 
   .PlaygroundEditorTheme__code:focus-within {
@@ -4336,7 +4544,7 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .PlaygroundEditorTheme__code.selected {
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+    background-color: hsla(var(--cteditorf47ac10b-background) / 0.1);
     border-color: hsla(var(--cteditorf47ac10b-primary));
     box-shadow: 0 0 0 2px hsla(var(--cteditorf47ac10b-primary) / 0.2);
   }
@@ -4344,14 +4552,14 @@ body .ai-chat-popup .ai-chat-input {
   .PlaygroundEditorTheme__code:before {
     content: attr(data-gutter);
     position: absolute;
-    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.08);
+    background-color: hsla(var(--cteditorf47ac10b-background) / 0.08);
     left: 0;
     top: 0;
-    border-right: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.15);
+    border-right: 1px solid hsla(var(--cteditorf47ac10b-background) / 0.15);
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
     padding: 8px;
-    color: hsla(var(--cteditorf47ac10b-foreground) / 0.6);
+    color: hsla(var(--cteditorf47ac10b-background) / 0.6);
     white-space: pre-wrap;
     text-align: right;
     min-width: 25px;
@@ -4440,6 +4648,14 @@ body .ai-chat-popup .ai-chat-input {
 
   .PlaygroundEditorTheme__tableCellHeader {
     text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .PlaygroundEditorTheme__tableCellHeader * {
+    white-space: nowrap;
+    display: inline;
+    margin: 0;
   }
 
   .PlaygroundEditorTheme__tableCellSelected {
@@ -4655,19 +4871,19 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .PlaygroundEditorTheme__listItemChecked:after {
-    content: "";
+       content: "";
     cursor: pointer;
     border-color: #fff;
     border-style: solid;
     position: absolute;
     display: block;
-    top: 6px;
-    width: 3px;
-    left: 7px;
+    top: 5px;
+    width: 4px;
+    left: 6px;
     right: 7px;
-    height: 6px;
+    height: 8px;
     transform: rotate(45deg);
-    border-width: 0 2px 2px 0;
+    border-width: 0 1px 1px 0;
   }
 
   .PlaygroundEditorTheme__nestedListItem {
@@ -4788,6 +5004,7 @@ body .ai-chat-popup .ai-chat-input {
     display: inline-block;
     -moz-user-select: none;
          user-select: none;
+    margin:6px;
   }
 
   .editor-image img {
@@ -4818,6 +5035,7 @@ body .ai-chat-popup .ai-chat-input {
     border: 1px solid #fff !important;
     border-radius: 50% !important;
     z-index: 10 !important;
+    transition: all 0.2s linear;
   }
 
   .editor-image .image-resizer.image-resizer-n {
@@ -4845,7 +5063,7 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .editor-image .image-resizer.image-resizer-s {
-    bottom: -2px !important;
+    bottom: -4px !important;
     left: 48% !important;
     cursor: s-resize !important;
   }
@@ -5319,7 +5537,116 @@ body .ai-chat-popup .ai-chat-input {
         border-radius: 2px !important;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
     }
-}#ct-editor-f47ac10b {
+}/* Grammar Check Plugin Tooltip Styles */
+
+.grammar-tooltip {
+  animation: fadeIn 0.2s ease-in-out;
+  pointer-events: auto;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Error highlighting styles - can be applied to text nodes */
+.spelling-error {
+  text-decoration: underline wavy red;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.grammar-error {
+  text-decoration: underline wavy blue;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+/* Tooltip card enhancements */
+.grammar-tooltip .cteditor-shadow-xl {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+/* Suggestion button hover effects */
+.grammar-tooltip button:active {
+  transform: scale(0.98);
+}
+
+/* Error Panel - Compact notification bar */
+.grammar-error-panel {
+  position: relative;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  margin-bottom: 8px;
+  z-index: 100;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 300px;
+  }
+}
+
+/* Error toggle button - when panel is hidden (inline version) */
+.grammar-error-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  margin-bottom: 8px;
+  background: #ef4444;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+  font-size: 13px;
+}
+
+.grammar-error-toggle:hover {
+  background: #dc2626;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+.grammar-error-toggle span {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+/* Compact panel styling */
+.grammar-error-panel .cteditor-max-h-48 {
+  max-height: 200px;
+}
+
+/* Responsive tooltip positioning */
+@media (max-width: 768px) {
+  .grammar-tooltip {
+    max-width: 90vw;
+  }
+}
+#ct-editor-f47ac10b {
   .floating-embed-menu {
     display: flex !important;
     /* flex-direction: column; */
@@ -5789,177 +6116,76 @@ body .ai-chat-popup .ai-chat-input {
 .TableCellResizer__resizer {
   position: absolute;
 }
-/* Grammar Check Plugin Tooltip Styles */
-
-.grammar-tooltip {
-  animation: fadeIn 0.2s ease-in-out;
-  pointer-events: auto;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Error highlighting styles - can be applied to text nodes */
-.spelling-error {
-  text-decoration: underline wavy red;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.grammar-error {
-  text-decoration: underline wavy blue;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-/* Tooltip card enhancements */
-.grammar-tooltip .cteditor-shadow-xl {
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-
-/* Suggestion button hover effects */
-.grammar-tooltip button:active {
-  transform: scale(0.98);
-}
-
-/* Error Panel - Compact notification bar */
-.grammar-error-panel {
-  position: relative;
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-  margin-bottom: 8px;
-  z-index: 100;
-  animation: slideDown 0.3s ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-    max-height: 300px;
-  }
-}
-
-/* Error toggle button - when panel is hidden (inline version) */
-.grammar-error-toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  margin-bottom: 8px;
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
-  font-size: 13px;
-}
-
-.grammar-error-toggle:hover {
-  background: #dc2626;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-}
-
-.grammar-error-toggle span {
-  font-weight: 600;
-  font-size: 13px;
-}
-
-/* Compact panel styling */
-.grammar-error-panel .cteditor-max-h-48 {
-  max-height: 200px;
-}
+#ct-editor-f47ac10b {
 
-/* Responsive tooltip positioning */
-@media (max-width: 768px) {
-  .grammar-tooltip {
-    max-width: 90vw;
+  /* Caption container styling - uses normal flow to prevent overlap */
+  .image-caption-container {
+    width: 100%;
+    margin-top: 8px;
+    margin-bottom: 12px;
   }
-}
-#ct-editor-f47ac10b {
 
   /* Improved caption button styling - positioned relative to the image container */
   .image-caption-button {
     position: absolute;
-    bottom: -42px;
+    bottom:4px;
     left: 50%;
     transform: translateX(-50%);
-    background: hsla(var(--cteditorf47ac10b-secondary));
+    background:hsl(var(--cteditorf47ac10b-background));
+    color:hsl(var(--cteditorf47ac10b-foreground));
     border-radius: 8px;
-    padding: 2px 16px;
+    padding: 4px 16px;
     font-size: 13px;
     cursor: pointer;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     font-weight: 400;
     white-space: nowrap;
-    z-index: 9999 !important;
+    z-index: 10;
+    border: 1px solid hsla(var(--cteditorf47ac10b-border) / 0.2);
   }
 
   .image-caption-button:hover {
-    background: hsla(var(--cteditorf47ac10b-secondary) / 0.8);
+    background: hsla(var(--cteditorf47ac10b-background) / 0.8);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+   
   }
 
-  .image-caption-button:active {
-    background: hsla(var(--cteditorf47ac10b-secondary) / 0.6);
-    transform: translateX(-50%) translateY(1px);
-  }
-
-  /* Caption input styling */
+  /* Caption input styling - now in normal flow */
   .ImageNode__contentEditable {
-    position: absolute;
-    bottom: -36px;
-    left: 50%;
-    transform: translateX(-50%);
+    position: relative;
     width: 100%;
-    max-width: calc(100vw - 40px);
-    background: hsla(var(--cteditorf47ac10b-secondary));
-    border-radius: 8px;
-    padding: 2px 8px;
-    line-height: normal;
-    height: 28px;
+    background: hsla(var(--cteditorf47ac10b-secondary) / 0.5);
+    border: 1px solid hsla(var(--cteditorf47ac10b-border) / 0.2);
+    color: 1px solid hsla(var(--cteditorf47ac10b-foreground));
+    border-radius: 6px;
+    padding:4px 8px;
+    line-height: 1.5;
+    min-height: 32px;
     font-size: 14px;
     outline: none;
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-    z-index: 9999 !important;
-    opacity: 1 !important;
-    transition: opacity 0.3s;
-    will-change: transform;
-    min-width: 200px;
-    pointer-events: auto !important;
-    visibility: visible !important;
+    transition: all 0.2s ease;
+    color: hsla(var(--cteditorf47ac10b-text));
+  }
+
+  .ImageNode__contentEditable:focus {
+    background: hsla(var(--cteditorf47ac10b-secondary));
+    border-color: hsla(var(--cteditorf47ac10b-border) / 0.4);
+    box-shadow: 0 0 0 3px hsla(var(--cteditorf47ac10b-primary) / 0.1);
   }
 
   .ImageNode__contentEditable::-moz-placeholder {
-    color: #8a8d91;
-    font-style: normal;
+    color: hsla(var(--cteditorf47ac10b-text) / 0.4);
+    font-style: italic;
   }
 
-  .ImageNode__contentEditable::placeholder {
-    color: #8a8d91;
-    font-style: normal;
+  .ImageNode__contentEditable::placeholder,
+  .ImageNode__contentEditable [data-lexical-text="true"]::before {
+    color: hsla(var(--cteditorf47ac10b-text) / 0.4);
+    font-style: italic;
+  }
+
+  .ImageNode__contentEditable p {
+    margin: 0;
   }
 }