@standhigher/react-email-editor 0.2.0 → 0.3.0

package/dist/styles.css

@@ -248,6 +248,46 @@
   cursor: default;
 }
 
+.ree-switch-control {
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  font-size: 13px;
+  color: var(--ree-muted, #6d7175);
+}
+
+.ree-switch-control input {
+  display: flex;
+  align-items: center;
+  width: 32px;
+  height: 20px;
+  padding: 2px;
+  border: 0;
+  border-radius: 999px;
+  background: #b5b5b5;
+}
+
+.ree-switch-control input::before,
+.ree-switch-control input:checked::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #ffffff;
+  transform: none;
+}
+
+.ree-switch-control input:checked::before {
+  transform: translateX(12px);
+}
+
+.ree-switch-control input:focus-visible {
+  border: 2px solid #202223;
+  padding: 0;
+}
+
 .ree-range {
   -webkit-appearance: none;
   appearance: none;
@@ -375,6 +415,75 @@
   padding: calc(var(--ree-button-padding-y) - 1px) calc(var(--ree-button-padding-x) - 1px);
 }
 
+.ree-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  --ree-button-padding-y: 0px;
+  --ree-button-padding-x: 0px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ree-muted);
+}
+
+.ree-btn-icon:hover {
+  border-color: transparent;
+  color: var(--ree-text);
+}
+
+.ree-btn-icon:focus-visible {
+  padding: 0;
+}
+
+.ree-btn-has-tooltip {
+  position: relative;
+}
+
+.ree-block-tooltip,
+.ree-btn-tooltip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 10;
+  display: none;
+  padding: 6px 9px;
+  border-radius: var(--ree-radius-sm);
+  background: var(--ree-text);
+  color: var(--ree-panel);
+  box-shadow: var(--ree-shadow-md);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.ree-block-tooltip::before,
+.ree-btn-tooltip::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 0;
+  width: 100%;
+  height: 8px;
+}
+
+.ree-btn-tooltip {
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.ree-block-btn:hover .ree-block-tooltip,
+.ree-block-btn:focus-visible .ree-block-tooltip,
+.ree-btn-has-tooltip:hover .ree-btn-tooltip,
+.ree-btn-has-tooltip:focus-visible .ree-btn-tooltip {
+  display: block;
+}
+
 .ree-reset {
   appearance: none;
   display: inline-flex;
@@ -534,17 +643,28 @@
   color: var(--ree-text);
 }
 
-.ree-subject-input {
+.ree-subject-field {
+  position: relative;
   flex: 1 1 360px;
-  min-width: 240px;
-  width: auto;
+  min-width: min(240px, 100%);
+}
+
+.ree-subject-input {
+  --ree-control-padding-end: 76px;
 }
 
 .ree-subject-count {
-  flex-shrink: 0;
+  position: absolute;
+  top: 0;
+  right: 12px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
   color: var(--ree-muted);
   font-size: 13px;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
 }
 
 .ree-personalization {
@@ -741,6 +861,47 @@
   flex-shrink: 0;
 }
 
+.ree-library-head {
+  justify-content: space-between;
+}
+
+.ree-col-left.is-collapsed {
+  width: 52px;
+}
+
+.ree-col-left.is-collapsed .ree-library-head {
+  justify-content: center;
+  padding-left: 7px;
+  padding-right: 7px;
+}
+
+.ree-col-left:not(.is-collapsed) .ree-library-expand,
+.ree-col-left.is-collapsed .ree-library-collapse,
+.ree-col-left.is-collapsed .ree-library-label {
+  display: none;
+}
+
+@media (width < 1375px) {
+  .ree-col-left:not(.is-expanded) {
+    width: 52px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-library-head {
+    justify-content: center;
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-library-label,
+  .ree-col-left:not(.is-expanded) .ree-library-collapse {
+    display: none;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-library-expand {
+    display: inline-flex;
+  }
+}
+
 .ree-col-center {
   flex: 1;
   min-width: 0;
@@ -812,6 +973,42 @@
   font-weight: 500;
 }
 
+.ree-col-left.is-collapsed .ree-lib {
+  grid-template-columns: 1fr;
+  gap: 8px;
+  padding: 12px 7px;
+}
+
+.ree-col-left.is-collapsed .ree-lib-item {
+  justify-content: center;
+  min-height: 38px;
+  gap: 0;
+  padding: 8px;
+}
+
+.ree-col-left.is-collapsed .ree-lib-title {
+  display: none;
+}
+
+@media (width < 1375px) {
+  .ree-col-left:not(.is-expanded) .ree-lib {
+    grid-template-columns: 1fr;
+    gap: 8px;
+    padding: 12px 7px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-lib-item {
+    justify-content: center;
+    min-height: 38px;
+    gap: 0;
+    padding: 8px;
+  }
+
+  .ree-col-left:not(.is-expanded) .ree-lib-title {
+    display: none;
+  }
+}
+
 
 /* ---------- 画布 ---------- */
 
@@ -1093,38 +1290,6 @@
   color: var(--ree-danger);
 }
 
-.ree-block-tooltip {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 10;
-  display: none;
-  padding: 6px 9px;
-  border-radius: var(--ree-radius-sm);
-  background: var(--ree-text);
-  color: var(--ree-panel);
-  box-shadow: var(--ree-shadow-md);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.4;
-  white-space: nowrap;
-  cursor: default;
-}
-
-.ree-block-tooltip::before {
-  content: "";
-  position: absolute;
-  top: -8px;
-  left: 0;
-  width: 100%;
-  height: 8px;
-}
-
-.ree-block-btn:hover .ree-block-tooltip,
-.ree-block-btn:focus-visible .ree-block-tooltip {
-  display: block;
-}
-
 .ree-block-content {
   width: 100%;
   overflow: hidden;
@@ -1650,13 +1815,13 @@
   padding-bottom: var(--ree-inspector-section-space);
 }
 
-/* Global 没有标题区，容器顶部留白会叠到第一个类目上。 */
-.ree-inspector-global {
+/* Body 没有标题区，容器顶部留白会叠到第一个类目上。 */
+.ree-inspector-body {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.ree-inspector-global > .ree-inspector-section:first-child {
+.ree-inspector-body > .ree-inspector-section:first-child {
   border-top: 0;
 }
 
@@ -1904,3 +2069,15 @@
   cursor: grabbing;
   font-weight: 500;
 }
+
+.ree-plugin-field { min-width: 0; }
+.ree-plugin-error { margin: 8px 0; padding: 8px; color: #b42318; font-size: 13px; overflow-wrap: anywhere; }
+.ree-plugin-empty { margin: 6px 0; color: #737373; font-size: 12px; }
+.ree-plugin-list { min-width: 0; margin: 0; padding: 10px; border: 1px solid #e3e3e5; border-radius: 6px; }
+.ree-plugin-list-item { display: grid; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e3e3e5; }
+.ree-plugin-list-actions { display: flex; align-items: center; gap: 4px; }
+.ree-plugin-list-actions > span { margin-right: auto; }
+.ree-plugin-image { display: block; max-width: 100%; max-height: 120px; object-fit: contain; }
+.ree-plugin-richtext { min-height: 64px; padding: 8px; border: 1px solid #e3e3e5; border-radius: 4px; }
+.ree-plugin-richtext:focus-within { border-color: #000000; }
+.ree-plugin-richtext .ProseMirror { min-height: 48px; outline: none; }