@richscripts/richtexteditor 2.4.1 → 2.5.0

package/richtexteditor/rte_theme_default.css

@@ -283,7 +283,13 @@ rte-codebox {
        previously hardcoded #d5d5d5 stayed light-gray on the dark surface. */
     border: 1px solid var(--rte-border, #d5d5d5);
     border-radius: 10px;
-    overflow: hidden;
+    /* Deliberately NOT overflow:hidden. Toolbar dropdown panels
+       (rte-dropdown-panel) are absolutely positioned children of this element,
+       so clipping here cut off any panel anchored near the right edge: Line
+       Height rendered only the "1" of "100%", Paragraphs and Document Outline
+       lost 91px. Corner rounding does not depend on this clip - the toolbar and
+       status bar round their own corners (see the rule below). */
+    overflow: visible;
     background-clip: padding-box;
 }
 
@@ -1429,7 +1435,12 @@ rte-dropdown-panel.rte-panel-insertimage rte-tabui-toolbar, rte-dropdown-panel.r
 }
 
     .rte-panel-general rte-dialog-header {
-        margin: -10px -15px 10px;
+        /* Cancel exactly the panel's own padding, whatever it is. A hard -15px
+           here made the header wider than the panel that contains it. */
+        margin: calc(var(--rte-panel-pad, 8px) * -1) calc(var(--rte-panel-pad, 8px) * -1) 10px;
+        padding: 12px 14px;
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
     }
 
 rte-inserttable-panel {
@@ -1570,14 +1581,14 @@ rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[rte-tooltip]:hover
     border-color: rgba(0,0,0,.08) !important;
 }
 
-rte-dropdown-panel.rte-panel-forecolor rte-dialog-item-color[role="menuitem"]:focus-visible,
-rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[role="menuitem"]:focus-visible {
-    outline: 2px solid #1a73e8 !important;
-    outline-offset: 2px !important;
-    transform: scale(1.15) !important;
-    position: relative !important;
-    z-index: 2 !important;
-}
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-item-color[role="menuitem"]:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[role="menuitem"]:focus-visible {
+    outline: 2px solid #1a73e8 !important;
+    outline-offset: 2px !important;
+    transform: scale(1.15) !important;
+    position: relative !important;
+    z-index: 2 !important;
+}
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto,
 rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto,
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more,
@@ -1599,14 +1610,14 @@ rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:hover {
     border: 0 !important;
 }
 
-rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto:focus-visible,
-rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto:focus-visible,
-rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more:focus-visible,
-rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:focus-visible {
-    outline: 2px solid #1a73e8 !important;
-    outline-offset: 1px !important;
-    background: #f1f5f9 !important;
-}
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto:focus-visible,
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:focus-visible {
+    outline: 2px solid #1a73e8 !important;
+    outline-offset: 1px !important;
+    background: #f1f5f9 !important;
+}
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto rte-dialog-item-label,
 rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto rte-dialog-item-label,
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more rte-dialog-item-label,
@@ -1986,6 +1997,21 @@ rte-menuspliter {
     margin: 3px 0px 3px 28px;
 }
 
+/* The panel is shrink-to-fit, so its width is decided by its widest preview —
+   "Headline 1" at 32px — and measured 187px of text inside 187px of space:
+   ZERO tolerance. Whenever the font used at layout time is a hair narrower than
+   the one finally painted (a fallback still in place during a webfont swap, a
+   different platform's metrics), the label overflows and the last character is
+   cut off. Reported from the wild with "Headline 1" clipped.
+
+   A min-width gives the panel slack that does not depend on font metrics
+   matching to the pixel; the previews are nowrap, so slack is the only thing
+   that can absorb the variance. */
+.rte-dropdown-panel.rte_command_paragraphs,
+rte-dropdown-panel.rte_command_paragraphs {
+    min-width: 292px;
+}
+
 .rte_command_paragraphs rte-toolbar-dropdown-item div {
     font-size: 15px;
     margin: 0px;
@@ -2367,6 +2393,31 @@ rte-content::-webkit-scrollbar-thumb:hover {
 }
 
 .rte-dialog-browser,
+/* Upload failure notice. Deliberately a banner above the grid rather than a
+   replacement for it: a rejected file used to blank the whole browser, leaving
+   the dialog reading "0 items" with an error while the footer still said an
+   image was ready to insert. */
+.rte-gallery-browser-error {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 10px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #9f1239;
+    background: #fff1f2;
+    box-shadow: inset 0 0 0 1px rgba(190, 18, 60, 0.18);
+}
+
+/* Accepted-format hint under the dialog subtitle. */
+.rte-dialog-browser-accept {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #64748b;
+}
+
 .rte-gallery-browser {
     display: flex;
     flex-direction: column;
@@ -2559,25 +2610,25 @@ rte-content::-webkit-scrollbar-thumb:hover {
     flex-wrap: wrap;
 }
 
-/* The toolbar is a flex row whose children are these two groups. Without a
-   display on the groups themselves the buttons stack vertically and the row
-   collapses to the width of its widest label -- which is exactly what shipped
-   when these rules went missing. */
-.rte-gallery-browser-toolbar-group {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-}
-
-.rte-gallery-browser-toolbar-group-right {
-    flex: 0 1 auto;
-    justify-content: flex-end;
-    margin-left: auto;
-}
-
+/* The toolbar is a flex row whose children are these two groups. Without a
+   display on the groups themselves the buttons stack vertically and the row
+   collapses to the width of its widest label -- which is exactly what shipped
+   when these rules went missing. */
+.rte-gallery-browser-toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+}
+
+.rte-gallery-browser-toolbar-group-right {
+    flex: 0 1 auto;
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
 .rte-gallery-browser-button {
     border: 1px solid rgba(116, 135, 162, 0.28);
     border-radius: 999px;
@@ -2712,44 +2763,44 @@ rte-content::-webkit-scrollbar-thumb:hover {
     overflow: hidden;
 }
 
-/* Folders sit in their own container above the image listbox, so the two are
-   separated by a rule rather than running together in one grid. */
-.rte-gallery-browser-grid-folders {
-    margin-bottom: 14px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid rgba(116, 135, 162, 0.16);
-}
-
-/* Folder tiles have no image to show, so the icon is drawn in CSS. The plugin
-   emits an empty div for it -- with no rule here the tile renders blank. */
-.rte-gallery-browser-thumbnail-folder {
-    background: linear-gradient(180deg, #fffaea 0%, #fdeec4 100%);
-    border-color: rgba(197, 158, 61, 0.32);
-}
-
-.rte-gallery-browser-folder-icon {
-    position: relative;
-    width: 60px;
-    height: 42px;
-    border: 1px solid rgba(178, 138, 45, 0.7);
-    border-radius: 7px;
-    background: linear-gradient(180deg, #ffe6a1 0%, #f3c957 100%);
-    box-shadow: 0 8px 16px rgba(140, 100, 20, 0.18);
-}
-
-.rte-gallery-browser-folder-icon:before {
-    content: "";
-    position: absolute;
-    left: 7px;
-    top: -9px;
-    width: 25px;
-    height: 13px;
-    border: 1px solid rgba(178, 138, 45, 0.7);
-    border-bottom: 0;
-    border-radius: 6px 6px 0 0;
-    background: linear-gradient(180deg, #fff1c4 0%, #f8d97c 100%);
-}
-
+/* Folders sit in their own container above the image listbox, so the two are
+   separated by a rule rather than running together in one grid. */
+.rte-gallery-browser-grid-folders {
+    margin-bottom: 14px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid rgba(116, 135, 162, 0.16);
+}
+
+/* Folder tiles have no image to show, so the icon is drawn in CSS. The plugin
+   emits an empty div for it -- with no rule here the tile renders blank. */
+.rte-gallery-browser-thumbnail-folder {
+    background: linear-gradient(180deg, #fffaea 0%, #fdeec4 100%);
+    border-color: rgba(197, 158, 61, 0.32);
+}
+
+.rte-gallery-browser-folder-icon {
+    position: relative;
+    width: 60px;
+    height: 42px;
+    border: 1px solid rgba(178, 138, 45, 0.7);
+    border-radius: 7px;
+    background: linear-gradient(180deg, #ffe6a1 0%, #f3c957 100%);
+    box-shadow: 0 8px 16px rgba(140, 100, 20, 0.18);
+}
+
+.rte-gallery-browser-folder-icon:before {
+    content: "";
+    position: absolute;
+    left: 7px;
+    top: -9px;
+    width: 25px;
+    height: 13px;
+    border: 1px solid rgba(178, 138, 45, 0.7);
+    border-bottom: 0;
+    border-radius: 6px 6px 0 0;
+    background: linear-gradient(180deg, #fff1c4 0%, #f8d97c 100%);
+}
+
 .rte-gallery-browser-thumbnail-image {
     max-width: 100%;
     max-height: 100%;
@@ -3580,10 +3631,16 @@ rte-dialog-outer rte-dialog-header-close {
 
 rte-dropdown-panel {
     gap: 2px;
-    padding: 8px !important;
+    /* Published as a variable so the full-bleed header below can cancel
+       exactly this much padding instead of guessing at it. */
+    --rte-panel-pad: 8px;
+    padding: var(--rte-panel-pad) !important;
     max-width: min(520px, calc(100vw - 20px));
     max-height: min(420px, calc(100vh - 76px));
-    overflow: auto;
+    /* Vertical only: a tall panel should scroll, but nothing in a panel is
+       meant to be reachable sideways - a horizontal bar here is always a bug. */
+    overflow-x: hidden;
+    overflow-y: auto;
     scrollbar-width: thin;
 }
 
@@ -4735,8 +4792,8 @@ rte-dropdown-panel .rte-dialog-button:active {
 .richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton svg {
     display: block !important;
     flex: 0 0 auto;
-    width: 20px !important;
-    height: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
     margin: 0 !important;
     align-self: center !important;
     color: currentColor;
@@ -4754,10 +4811,10 @@ rte-dropdown-panel .rte-dialog-button:active {
     pointer-events: none;
 }
 
-.rte-modern rte-dropdown-panel rte-toolbar-button svg {
-    width: 20px !important;
-    height: 20px !important;
-}
+.rte-modern rte-dropdown-panel rte-toolbar-button svg {
+    width: 20px !important;
+    height: 20px !important;
+}
 
 .richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
 .richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
@@ -4895,3 +4952,14 @@ rte-dialog-float rte-dialog-inner {
     max-height: calc(100vh - max(104px, calc(var(--rte-dialog-effective-top-chrome) + 32px)));
     overflow: auto;
 }
+
+/* WCAG 1.4.10 Reflow: rte-bottom
+   The editor footer is a flex row (word count, tag list, "powered by", resize
+   grip). With flex-wrap:nowrap and non-shrinking children it overflowed the
+   editor AND the viewport at 320px - measured on the live home page as document
+   scrollWidth 349 against a 320 viewport - which is the horizontal scrolling
+   WCAG 1.4.10 (AA) prohibits. Wrapping keeps every control reachable instead of
+   clipping it. Appended rather than merged into the existing rule because tier
+   themes have diverged and a surgical edit risks corrupting them. */
+rte-bottom { flex-wrap: wrap; }
+rte-bottom > * { min-width: 0; }