ct-rich-text-editor 1.3.0 → 1.3.1

package/dist/assets/style.css

@@ -181,7 +181,8 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
 abbr:where([title]) {
-  text-decoration: underline dotted;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /*
@@ -815,6 +816,10 @@ video {
   display: inline-block;
 }
 
+.cteditor-inline{
+  display: inline;
+}
+
 .cteditor-flex{
   display: flex;
 }
@@ -965,6 +970,10 @@ video {
   height: 1px;
 }
 
+.cteditor-max-h-56{
+  max-height: 14rem;
+}
+
 .cteditor-max-h-60{
   max-height: 15rem;
 }
@@ -1246,8 +1255,9 @@ video {
 }
 
 .cteditor-select-none{
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .cteditor-resize-none{
@@ -1284,6 +1294,10 @@ video {
   flex-wrap: wrap;
 }
 
+.cteditor-flex-nowrap{
+  flex-wrap: nowrap;
+}
+
 .cteditor-items-start{
   align-items: flex-start;
 }
@@ -1388,10 +1402,6 @@ video {
   margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }
 
-.cteditor-overflow-auto{
-  overflow: auto;
-}
-
 .cteditor-overflow-hidden{
   overflow: hidden;
 }
@@ -1475,6 +1485,10 @@ video {
   border-bottom-width: 1px;
 }
 
+.cteditor-border-b-2{
+  border-bottom-width: 2px;
+}
+
 .cteditor-border-l{
   border-left-width: 1px;
 }
@@ -1756,6 +1770,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);
 }
@@ -2599,6 +2617,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 +2727,37 @@ 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;
+  }
+
 .file\:cteditor-border-0::file-selector-button{
   border-width: 0px;
 }
@@ -2823,6 +2901,15 @@ body .ai-chat-popup .ai-chat-input {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
+.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-muted\/80:hover{
   background-color: hsl(var(--cteditorf47ac10b-muted) / 0.8);
 }
@@ -3471,8 +3558,9 @@ body .ai-chat-popup .ai-chat-input {
 }
 
 .\[\&\>button\]\:cteditor-select-none>button{
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .\[\&\>button\]\:cteditor-items-center>button{
@@ -3610,8 +3698,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 +3889,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 +3905,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 +3937,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,17 +4082,18 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .tokenComment {
-    color: slategray;
+    color: #7c8896;
   }
 
   .tokenPunctuation {
-    color: #999;
+    color: #606060;
   }
 
   .comment-node {
     display: inline;
-    -moz-user-select: none;
-         user-select: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
 
   .comment-highlight {
@@ -4000,27 +4154,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 {
@@ -4045,8 +4199,9 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .embedBlock {
-    -moz-user-select: none;
-         user-select: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
 
   .embedBlockFocus {
@@ -4440,6 +4595,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 {
@@ -4733,8 +4896,9 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .PlaygroundEditorTheme__embedBlock {
-    -moz-user-select: none;
-         user-select: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
 
   .PlaygroundEditorTheme__embedBlockFocus {
@@ -4774,8 +4938,9 @@ body .ai-chat-popup .ai-chat-input {
 
   .PlaygroundEditorTheme__hr.selected {
     outline: 2px solid rgb(60, 132, 244);
-    -moz-user-select: none;
-         user-select: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
 
   .PlaygroundEditorTheme__specialText {
@@ -4786,8 +4951,9 @@ body .ai-chat-popup .ai-chat-input {
   .editor-image {
     position: relative;
     display: inline-block;
-    -moz-user-select: none;
-         user-select: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
 
   .editor-image img {
@@ -4797,8 +4963,9 @@ body .ai-chat-popup .ai-chat-input {
 
   .editor-image img.focused {
     outline: 2px solid rgb(60, 132, 244);
-    -moz-user-select: none;
-         user-select: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
 
   .editor-image img.focused.draggable {
@@ -5196,8 +5363,9 @@ body .ai-chat-popup .ai-chat-input {
   display: flex;
   align-items: center;
   flex-direction: row;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   background-color: hsla(var(--background) / 0.95);
   backdrop-filter: blur(8px);
   border: 1px solid hsla(var(--foreground) / 0.1);
@@ -5319,7 +5487,118 @@ 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 {
+  -webkit-text-decoration: underline wavy red;
+          text-decoration: underline wavy red;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.grammar-error {
+  -webkit-text-decoration: underline wavy blue;
+          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; */
@@ -5575,8 +5854,9 @@ body .ai-chat-popup .ai-chat-input {
   display: flex;
   width: 20px;
   height: 20px;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   margin-right: 8px;
   line-height: 16px;
   background-size: contain;
@@ -5587,8 +5867,9 @@ body .ai-chat-popup .ai-chat-input {
   width: 16px;
   height: 16px;
   display: flex;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .floating-text-format-popup i.chevron-down.inside {
@@ -5695,8 +5976,9 @@ body .ai-chat-popup .ai-chat-input {
   height: 150px;
   background-image: linear-gradient(transparent, black),
     linear-gradient(to right, white, transparent);
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .color-picker-saturation_cursor {
   position: absolute;
@@ -5723,8 +6005,9 @@ body .ai-chat-popup .ai-chat-input {
     rgb(255, 0, 255),
     rgb(255, 0, 0)
   );
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   border-radius: 12px;
 }
 
@@ -5789,116 +6072,14 @@ 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 {
@@ -5908,58 +6089,62 @@ body .ai-chat-popup .ai-chat-input {
     transform: translateX(-50%);
     background: hsla(var(--cteditorf47ac10b-secondary));
     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);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transform: translateX(-50%) translateY(-1px);
   }
 
   .image-caption-button:active {
     background: hsla(var(--cteditorf47ac10b-secondary) / 0.6);
-    transform: translateX(-50%) translateY(1px);
+    transform: translateX(-50%) translateY(0px);
   }
 
-  /* 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);
+    border-radius: 6px;
+    padding: 8px 12px;
+    line-height: 1.5;
+    min-height: 36px;
     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;
   }
 }