@parathantl/react-email-editor 0.1.6 → 0.1.7

package/dist/index.css

@@ -253,23 +253,43 @@
 .exportDropdownItem:hover {
   background: var(--ee-bg-hover);
 }
+@keyframes toolbarSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .richTextToolbar {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 4px;
   padding: var(--ee-space-xs) var(--ee-space-sm);
   background: var(--ee-bg-panel);
   border: 1px solid var(--ee-border-color);
   border-radius: var(--ee-border-radius);
   box-shadow: var(--ee-shadow-sm);
   flex-wrap: wrap;
+  animation: toolbarSlideIn 150ms ease;
+}
+.richTextGroup {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  background: var(--ee-bg-app);
+  border-radius: var(--ee-border-radius-sm);
+  padding: 2px;
+  box-shadow: inset 0 0 0 1px var(--ee-border-color);
 }
 .richTextBtn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   font-size: var(--ee-font-size-sm);
   background: transparent;
   border: none;
@@ -277,36 +297,54 @@
   cursor: pointer;
   color: var(--ee-text-secondary);
   transition: all var(--ee-transition-fast);
+  padding: 0;
+  line-height: 1;
 }
 .richTextBtn:hover {
   background: var(--ee-bg-hover);
   color: var(--ee-text-primary);
 }
+.richTextBtn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.richTextBtn:disabled:hover {
+  background: transparent;
+  color: var(--ee-text-secondary);
+}
+.richTextBtn:focus-visible {
+  outline: 2px solid var(--ee-border-focus);
+  outline-offset: -1px;
+}
 .richTextBtnActive {
   background: var(--ee-bg-selected);
   color: var(--ee-color-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-.richTextSeparator {
-  width: 1px;
-  height: 20px;
-  background: var(--ee-border-color);
-  margin: 0 2px;
+.richTextBtnWithIndicator {
+  composes: richTextBtn;
+  flex-direction: column;
+  gap: 1px;
+  height: 28px;
 }
 .richTextSelect {
-  height: 28px;
+  height: 26px;
   padding: 0 4px;
   font-size: var(--ee-font-size-xs);
   font-family: var(--ee-font-family);
-  border: 1px solid var(--ee-border-color);
+  border: none;
   border-radius: var(--ee-border-radius-sm);
-  background: var(--ee-bg-input);
+  background: transparent;
   color: var(--ee-text-primary);
   outline: none;
   cursor: pointer;
   max-width: 110px;
 }
+.richTextSelect:hover {
+  background: var(--ee-bg-hover);
+}
 .richTextSelect:focus {
-  border-color: var(--ee-border-focus);
+  background: var(--ee-bg-hover);
 }
 .richTextSelectSmall {
   composes: richTextSelect;
@@ -315,10 +353,6 @@
 .richTextColorWrapper {
   position: relative;
 }
-.richTextColorLabel {
-  font-weight: var(--ee-font-weight-semibold);
-  font-size: var(--ee-font-size-sm);
-}
 .richTextColorIndicator {
   display: block;
   width: 16px;
@@ -337,7 +371,15 @@
   border-radius: var(--ee-border-radius);
   box-shadow: var(--ee-shadow-md);
   z-index: var(--ee-z-dropdown);
-  min-width: 176px;
+  min-width: 192px;
+}
+.richTextColorSectionLabel {
+  font-size: 10px;
+  font-weight: var(--ee-font-weight-semibold);
+  color: var(--ee-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
 }
 .richTextColorGrid {
   display: grid;
@@ -346,6 +388,7 @@
   margin-bottom: var(--ee-space-sm);
 }
 .richTextColorSwatch {
+  position: relative;
   width: 24px;
   height: 24px;
   border-radius: 3px;
@@ -355,24 +398,87 @@
   transition: all var(--ee-transition-fast);
 }
 .richTextColorSwatch:hover {
-  transform: scale(1.2);
+  transform: scale(1.15);
   border-color: var(--ee-border-color-strong);
 }
-.richTextColorActions {
+.richTextColorSwatchActive {
+  border-color: var(--ee-color-primary);
+  box-shadow: 0 0 0 1px var(--ee-color-primary);
+}
+.richTextColorSwatchRemove {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ee-bg-panel);
+  border: 1px solid var(--ee-border-color);
+  color: var(--ee-text-secondary);
+  font-size: 9px;
+  line-height: 1;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  box-shadow: var(--ee-shadow-sm);
+}
+.richTextColorSwatch:hover .richTextColorSwatchRemove {
+  display: flex;
+}
+.richTextColorSwatchRemove:hover {
+  background: var(--ee-color-danger, #ef4444);
+  border-color: var(--ee-color-danger, #ef4444);
+  color: #fff;
+}
+.richTextColorCustomRow {
   display: flex;
   align-items: center;
-  gap: var(--ee-space-sm);
+  gap: 6px;
   border-top: 1px solid var(--ee-border-color);
   padding-top: var(--ee-space-sm);
 }
-.richTextColorInput {
-  width: 28px;
+.richTextColorHexInput {
+  flex: 1;
+  min-width: 0;
   height: 28px;
-  padding: 0;
+  padding: 0 6px;
+  font-size: 12px;
+  font-family: var(--ee-font-family);
   border: 1px solid var(--ee-border-color);
-  border-radius: 3px;
+  border-radius: var(--ee-border-radius-sm);
+  background: var(--ee-bg-input);
+  color: var(--ee-text-primary);
+  outline: none;
+  box-sizing: border-box;
+}
+.richTextColorHexInput:focus {
+  border-color: var(--ee-border-focus);
+}
+.richTextColorApplyBtn {
+  height: 28px;
+  padding: 0 10px;
+  font-size: var(--ee-font-size-xs);
+  font-family: var(--ee-font-family);
+  font-weight: var(--ee-font-weight-medium);
+  color: var(--ee-text-inverse);
+  background: var(--ee-color-primary);
+  border: none;
+  border-radius: var(--ee-border-radius-sm);
   cursor: pointer;
-  background: none;
+  transition: background var(--ee-transition-fast);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.richTextColorApplyBtn:hover {
+  background: var(--ee-color-primary-hover);
+}
+.richTextColorBottomActions {
+  display: flex;
+  align-items: center;
+  gap: var(--ee-space-sm);
+  margin-top: 6px;
 }
 .richTextColorClearBtn {
   font-size: var(--ee-font-size-xs);
@@ -389,6 +495,14 @@
   background: var(--ee-bg-hover);
   color: var(--ee-text-primary);
 }
+.richTextColorClearBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.richTextColorClearBtn:disabled:hover {
+  background: transparent;
+  color: var(--ee-text-secondary);
+}
 .richTextLinkDropdown {
   position: absolute;
   top: 100%;
@@ -465,6 +579,55 @@
   background: var(--ee-color-danger, #ef4444);
   color: var(--ee-text-inverse);
 }
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 2px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+.richTextTooltipWrapper {
+  position: relative;
+  display: inline-flex;
+}
+.richTextTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  background: #1f2937;
+  color: #fff;
+  font-size: 11px;
+  font-family: var(--ee-font-family);
+  line-height: 1.3;
+  white-space: nowrap;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+  z-index: var(--ee-z-dropdown, 100);
+  animation: tooltipFadeIn 120ms ease;
+}
+.richTextTooltipShortcut {
+  font-size: 10px;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    monospace;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.8);
+}
 
 /* src/styles/editor.module.css */
 .editorWrapper {
@@ -865,6 +1028,62 @@
   white-space: nowrap;
 }
 
+/* src/styles/colorArea.module.css */
+.hslPicker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.hslArea {
+  position: relative;
+  width: 140px;
+  height: 140px;
+  border-radius: 4px;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+.hslAreaThumb {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+.hslHueBar {
+  position: relative;
+  width: 140px;
+  height: 14px;
+  border-radius: 7px;
+  background:
+    linear-gradient(
+      to right,
+      hsl(0, 100%, 50%),
+      hsl(60, 100%, 50%),
+      hsl(120, 100%, 50%),
+      hsl(180, 100%, 50%),
+      hsl(240, 100%, 50%),
+      hsl(300, 100%, 50%),
+      hsl(360, 100%, 50%));
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+.hslHueThumb {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+
 /* src/styles/blocks.module.css */
 .textBlock {
   min-height: 24px;
@@ -1833,13 +2052,6 @@
   grid-column: 1 / -1;
   width: 100%;
 }
-.colorNativeInput {
-  width: 100%;
-  grid-column: 1 / -1;
-  height: 28px;
-  cursor: pointer;
-  border: none;
-}
 .colorPresetSectionLabel {
   font-size: var(--ee-font-size-xs);
   color: var(--ee-text-muted);