pages_core 3.12.2 → 3.12.4

data/app/assets/builds/pages_core/admin.css

@@ -83,10 +83,11 @@ a {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */ /* 2 */
+  border-bottom: none; /* 1 */
+  -webkit-text-decoration: underline; /* 2 */
   text-decoration: underline;
-  -webkit-text-decoration: underline dotted currentColor;
-          text-decoration: underline dotted currentColor; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -349,197 +350,99 @@ template {
   display: none;
 }
 
-.ReactCrop {
-  position: relative;
-  display: inline-block;
-  cursor: crosshair;
-  overflow: hidden;
-  max-width: 100%;
-  background-color: #000; }
+.ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}
 
-.ReactCrop:focus {
-    outline: none; }
+.ReactCrop *,.ReactCrop *::before,.ReactCrop *::after{box-sizing:border-box}
 
-.ReactCrop--disabled {
-    cursor: inherit; }
+.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}
 
-.ReactCrop__image {
-    /* autoprefixer: off */
-    display: block;
-    max-width: 100%;
-    max-height: -webkit-fill-available;
-    max-height: -moz-available;
-    max-height: stretch; }
+.ReactCrop__child-wrapper{max-height:inherit}
 
-.ReactCrop--crop-invisible .ReactCrop__image {
-    opacity: 0.5; }
+.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}
 
-.ReactCrop__crop-selection {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate3d(0, 0, 0);
-    box-sizing: border-box;
-    cursor: move;
-    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
-    border: 1px solid;
-    border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
-    border-image-slice: 1;
-    border-image-repeat: repeat; }
-
-.ReactCrop--disabled .ReactCrop__crop-selection {
-      cursor: inherit; }
-
-.ReactCrop__drag-handle {
-    position: absolute;
-    width: 9px;
-    height: 9px;
-    background-color: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.7);
-    box-sizing: border-box;
-    outline: 1px solid transparent; }
-
-.ReactCrop .ord-nw {
-    top: 0;
-    left: 0;
-    margin-top: -5px;
-    margin-left: -5px;
-    cursor: nw-resize; }
-
-.ReactCrop .ord-n {
-    top: 0;
-    left: 50%;
-    margin-top: -5px;
-    margin-left: -5px;
-    cursor: n-resize; }
-
-.ReactCrop .ord-ne {
-    top: 0;
-    right: 0;
-    margin-top: -5px;
-    margin-right: -5px;
-    cursor: ne-resize; }
-
-.ReactCrop .ord-e {
-    top: 50%;
-    right: 0;
-    margin-top: -5px;
-    margin-right: -5px;
-    cursor: e-resize; }
-
-.ReactCrop .ord-se {
-    bottom: 0;
-    right: 0;
-    margin-bottom: -5px;
-    margin-right: -5px;
-    cursor: se-resize; }
-
-.ReactCrop .ord-s {
-    bottom: 0;
-    left: 50%;
-    margin-bottom: -5px;
-    margin-left: -5px;
-    cursor: s-resize; }
-
-.ReactCrop .ord-sw {
-    bottom: 0;
-    left: 0;
-    margin-bottom: -5px;
-    margin-left: -5px;
-    cursor: sw-resize; }
-
-.ReactCrop .ord-w {
-    top: 50%;
-    left: 0;
-    margin-top: -5px;
-    margin-left: -5px;
-    cursor: w-resize; }
-
-.ReactCrop__disabled .ReactCrop__drag-handle {
-    cursor: inherit; }
-
-.ReactCrop__drag-bar {
-    position: absolute; }
-
-.ReactCrop__drag-bar.ord-n {
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 6px;
-      margin-top: -3px; }
-
-.ReactCrop__drag-bar.ord-e {
-      right: 0;
-      top: 0;
-      width: 6px;
-      height: 100%;
-      margin-right: -3px; }
-
-.ReactCrop__drag-bar.ord-s {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 6px;
-      margin-bottom: -3px; }
+.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}
 
-.ReactCrop__drag-bar.ord-w {
-      top: 0;
-      left: 0;
-      width: 6px;
-      height: 100%;
-      margin-left: -3px; }
-
-.ReactCrop--new-crop .ReactCrop__drag-bar,
-  .ReactCrop--new-crop .ReactCrop__drag-handle,
-  .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
-    display: none; }
-
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
-  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
-  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
-  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
-    display: none; }
-
-@media (max-width: 768px), (pointer: coarse) {
-    .ReactCrop__drag-handle {
-      width: 17px;
-      height: 17px; }
-    .ReactCrop .ord-nw {
-      margin-top: -9px;
-      margin-left: -9px; }
-    .ReactCrop .ord-n {
-      margin-top: -9px;
-      margin-left: -9px; }
-    .ReactCrop .ord-ne {
-      margin-top: -9px;
-      margin-right: -9px; }
-    .ReactCrop .ord-e {
-      margin-top: -9px;
-      margin-right: -9px; }
-    .ReactCrop .ord-se {
-      margin-bottom: -9px;
-      margin-right: -9px; }
-    .ReactCrop .ord-s {
-      margin-bottom: -9px;
-      margin-left: -9px; }
-    .ReactCrop .ord-sw {
-      margin-bottom: -9px;
-      margin-left: -9px; }
-    .ReactCrop .ord-w {
-      margin-top: -9px;
-      margin-left: -9px; }
-    .ReactCrop__drag-bar.ord-n {
-      height: 14px;
-      margin-top: -7px; }
-    .ReactCrop__drag-bar.ord-e {
-      width: 14px;
-      margin-right: -7px; }
-    .ReactCrop__drag-bar.ord-s {
-      height: 14px;
-      margin-bottom: -7px; }
-    .ReactCrop__drag-bar.ord-w {
-      width: 14px;
-      margin-left: -7px; } }
+.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}
+
+.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translate3d(0, 0, 0);cursor:move;box-shadow:0 0 0 9999em rgba(0,0,0,.5);border:1px dashed #fff}
+
+.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}
+
+.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%;box-shadow:0px 0px 1px 1px #fff,0 0 0 9999em rgba(0,0,0,.5)}
+
+.ReactCrop__crop-selection:focus{outline:none;border-color:blue;border-style:solid}
+
+.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}
+
+.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after,.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{content:"";display:block;position:absolute;background-color:rgba(255,255,255,.4)}
+
+.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after{width:1px;height:100%}
+
+.ReactCrop__rule-of-thirds-vt::before{left:33.3333%;left:33.3333333333%}
+
+.ReactCrop__rule-of-thirds-vt::after{left:66.6666%;left:66.6666666667%}
+
+.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{width:100%;height:1px}
+
+.ReactCrop__rule-of-thirds-hz::before{top:33.3333%;top:33.3333333333%}
+
+.ReactCrop__rule-of-thirds-hz::after{top:66.6666%;top:66.6666666667%}
+
+.ReactCrop__drag-handle{position:absolute}
+
+.ReactCrop__drag-handle::after{position:absolute;content:"";display:block;width:10px;height:10px;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(0,0,0,0)}
+
+.ReactCrop__drag-handle:focus::after{border-color:blue;background:#2dbfff}
+
+.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}
+
+.ReactCrop .ord-nw::after{top:0;left:0}
+
+.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}
+
+.ReactCrop .ord-n::after{top:0}
+
+.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}
+
+.ReactCrop .ord-ne::after{top:0;right:0}
+
+.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}
+
+.ReactCrop .ord-e::after{right:0}
+
+.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}
+
+.ReactCrop .ord-se::after{bottom:0;right:0}
+
+.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}
+
+.ReactCrop .ord-s::after{bottom:0}
+
+.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}
+
+.ReactCrop .ord-sw::after{bottom:0;left:0}
+
+.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}
+
+.ReactCrop .ord-w::after{left:0}
+
+.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}
+
+.ReactCrop__drag-bar{position:absolute}
+
+.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}
+
+.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}
+
+.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}
+
+.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}
+
+.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar{display:none}
+
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}
+
+@media(pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}
 
 /*!
  * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
@@ -7454,6 +7357,7 @@ header .site-name h1 {
 
 header .site-name h1 a {
         font-weight: bold;
+        -webkit-text-decoration: none;
         text-decoration: none;
         padding-right: 6px;
       }
@@ -7517,6 +7421,7 @@ header .tabs a,
       line-height: 32px;
       height: 32px;
       margin: 0 2px 0 0;
+      -webkit-text-decoration: none;
       text-decoration: none;
     }
 
@@ -7553,6 +7458,7 @@ header .tabs a:hover,
 
 .content-tabs li.current a,
     .content-tabs li.current a:visited {
+      -webkit-text-decoration: none;
       text-decoration: none;
       color: #444;
     }
@@ -7590,6 +7496,7 @@ header .tabs a:hover,
 
 .page-description .links a.current {
         font-weight: bold;
+        -webkit-text-decoration: none;
         text-decoration: none;
         color: #111;
         color: var(--text-color);
@@ -7778,18 +7685,6 @@ main .page-description h3 {
     overflow: hidden;
   }
 
-.image-editor .focal-editor .focal-point:after {
-        content: "";
-        display: block;
-        width: 32px;
-        height: 32px;
-        border-radius: 16px;
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        margin-left: -4px;
-        margin-top: -4px;
-        transition: all 200ms ease-out;
-      }
-
 .image-editor .focal-editor .focal-point {
       position: absolute;
       width: 30px;
@@ -7808,11 +7703,17 @@ main .page-description h3 {
       transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms, border-color 200ms ease-out;
     }
 
-.image-editor .focal-editor .focal-point:hover:after {
-          width: 42px;
-          height: 42px;
-          border-radius: 21px;
-        }
+.image-editor .focal-editor .focal-point:after {
+        content: "";
+        display: block;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        margin-left: -4px;
+        margin-top: -4px;
+        transition: all 200ms ease-out;
+      }
 
 .image-editor .focal-editor .focal-point:hover {
         border-color: rgba(222, 255, 255, 0.9);
@@ -7823,6 +7724,12 @@ main .page-description h3 {
         margin-top: -20px;
       }
 
+.image-editor .focal-editor .focal-point:hover:after {
+          width: 42px;
+          height: 42px;
+          border-radius: 21px;
+        }
+
 .image-grid {
   --image-padding: 7px;
   margin-bottom: 40px;
@@ -8197,6 +8104,7 @@ a,
 a:visited {
   color: #1d7195;
   color: var(--link-color);
+  -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
@@ -8241,6 +8149,7 @@ button a {
 
 button a {
   padding: 5px 0;
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -8543,11 +8452,13 @@ body.modal > .wrapper {
     .page-tree .page a:visited {
       color: #111;
       color: var(--text-color);
+      -webkit-text-decoration: none;
       text-decoration: none;
     }
 
 .page-tree .page a:hover,
     .page-tree .page a:focus {
+      -webkit-text-decoration: underline;
       text-decoration: underline;
     }
 
@@ -8652,6 +8563,7 @@ body.modal > .wrapper {
     display: inline-block;
     font-style: normal;
     margin: 0px 1px;
+    -webkit-text-decoration: none;
     text-decoration: none;
     padding: 2px;
     border-radius: 12px;
@@ -8661,6 +8573,7 @@ body.modal > .wrapper {
 
 .pagination a:hover,
   .pagination a:focus {
+    -webkit-text-decoration: underline;
     text-decoration: underline;
   }
 
@@ -9097,11 +9010,13 @@ td.drag-handle {
 
 .page-list .page a.page-name,
     .page-list .page a.page-name:visited {
+      -webkit-text-decoration: none;
       text-decoration: none;
       color: #222;
     }
 
 .page-list .page a.page-name:hover {
+      -webkit-text-decoration: underline;
       text-decoration: underline;
     }
 

data/app/assets/stylesheets/pages_core/admin/components/attachments.css

@@ -105,7 +105,7 @@
   width: 60vw;
   min-height: 450px;
 
-  @media --mobile {
+  @media (--mobile) {
     width: 100%;
     height: 100%;
   }

data/app/assets/stylesheets/pages_core/admin/components/image_editor.css

@@ -33,7 +33,7 @@
   height: 80vh;
   display: flex;
 
-  @media --mobile {
+  @media (--mobile) {
     width: 100%;
     height: 100%;
     flex-direction: column;
@@ -145,7 +145,7 @@
       }
     }
 
-    @media --mobile {
+    @media (--mobile) {
       width: 100%;
       margin-left: 0px;
       padding-bottom: 20px;

data/app/assets/stylesheets/pages_core/admin/components/image_grid.css

@@ -3,7 +3,7 @@
   margin-bottom: 40px;
   display: flex;
 
-  @media --mobile {
+  @media (--mobile) {
     flex-direction: column;
   }
 
@@ -87,7 +87,7 @@
       flex-direction: row;
       visibility: hidden;
 
-      @media --mobile {
+      @media (--mobile) {
         visibility: visible;
       }
 
@@ -106,7 +106,7 @@
   & .primary-image {
     width: 33.33%;
 
-    @media --mobile {
+    @media (--mobile) {
       width: 100%;
     }
 
@@ -147,11 +147,11 @@
         justify-content: flex-end;
         width: 16.66%;
 
-        @media --narrow {
+        @media (--narrow) {
           width: 50%;
         }
 
-        @media --mobile {
+        @media (--mobile) {
           width: 50%;
         }
       }
@@ -185,7 +185,7 @@
     & .grid {
       width: 66.67%;
 
-      @media --mobile {
+      @media (--mobile) {
         width: 100%;
       }
     }
@@ -193,11 +193,11 @@
     & .images .grid-image {
       width: 25%;
 
-      @media --narrow {
+      @media (--narrow) {
         width: 50%;
       }
 
-      @media --mobile {
+      @media (--mobile) {
         width: 50%;
       }
     }

data/app/assets/stylesheets/pages_core/admin/components/image_uploader.css

@@ -9,7 +9,7 @@
   box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
   padding: 1px;
 
-  @media --mobile {
+  @media (--mobile) {
     flex-direction: column;
   }
 
@@ -29,7 +29,7 @@
       max-height: 400px;
     }
 
-    @media --mobile {
+    @media (--mobile) {
       max-width: 100%;
     }
   }

data/app/assets/stylesheets/pages_core/admin/components/layout.css

@@ -28,7 +28,7 @@ body {
   display: flex;
   flex-flow: row nowrap;
 
-  @media --mobile {
+  @media (--mobile) {
     flex-flow: column nowrap;
   }
 
@@ -42,7 +42,7 @@ body {
     width: 20%;
     padding: 0px 16px;
 
-    @media --mobile {
+    @media (--mobile) {
       width: 100%;
     }
   }

data/app/assets/stylesheets/pages_core/admin/components/modal.css

@@ -3,7 +3,7 @@ body.modal {
     transition: filter 1000ms linear;
     filter: blur(10px);
 
-    @media --mobile {
+    @media (--mobile) {
       filter: none;
     }
   }
@@ -41,7 +41,7 @@ body.modal {
     animation-fill-mode: forwards;
     z-index: 2;
 
-    @media --mobile {
+    @media (--mobile) {
       max-width: 100%;
       width: 100vw;
       height: 100vh;

data/app/helpers/pages_core/images_helper.rb

@@ -20,13 +20,22 @@ module PagesCore
       tag.figcaption(caption)
     end
 
-    def image_figure(image, size: nil, class_name: nil, link: nil, caption: nil)
-      class_name = ["image", image_class_name(image), class_name].compact
-      size ||= default_image_size
-      image_tag = dynamic_image_tag(image,
-                                    size: size, crop: false, upscale: false)
-      tag.figure((link ? image_link_to(image_tag, link) : image_tag) +
-                 image_caption(image, caption: caption),
+    # Renders an image figure tag with caption.
+    #
+    # ==== Options
+    # * <tt>:caption</tt>: Override caption with a string, or set to false to
+    #   disable captions.
+    # * <tt>:class_name</tt>: Class name to add to figure tag.
+    # * <tt>:link</tt>: Link target for image.
+    # * <tt>:ratio</tt>: Ratio to constrain image by.
+    # * <tt>:size</tt>: Max size for image.
+    def image_figure(image, opts = {})
+      class_name = ["image", image_class_name(image), opts[:class_name]].compact
+      image_tag = image_figure_image_tag(image,
+                                         size: opts[:size], ratio:
+                                         opts[:ratio])
+      content = opts[:link] ? image_link_to(image_tag, opts[:link]) : image_tag
+      tag.figure(content + image_caption(image, caption: opts[:caption]),
                  class: class_name)
     end
 
@@ -57,6 +66,11 @@ module PagesCore
       { alt: record.alternative }
     end
 
+    def fit_ratio(size, ratio)
+      v = Vector2d(size)
+      Vector2d.new(v.y * ratio, v.y).fit(v)
+    end
+
     def image_class_name(image)
       if image.size.x == image.size.y
         "square"
@@ -67,6 +81,13 @@ module PagesCore
       end
     end
 
+    def image_figure_image_tag(image, size: nil, ratio: nil)
+      size ||= default_image_size
+      size = fit_ratio(size, ratio) if ratio
+
+      dynamic_image_tag(image, size: size, crop: ratio && true, upscale: false)
+    end
+
     def image_link_to(content, href)
       tag.a(content, href: href)
     end

data/app/javascript/components/drag/draggedOrder.ts

@@ -8,7 +8,7 @@ function hovering(
   let rect: DOMRect;
   if ("rect" in target) {
     rect = target.rect;
-  } else if ("current" in target) {
+  } else if ("current" in target && target.current) {
     rect = target.current.getBoundingClientRect();
   } else {
     return false;

data/app/javascript/features/{RichText.jsx → RichText.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import RichTextArea from "../components/RichTextArea";
 import readyHandler from "../lib/readyHandler";
 
@@ -11,10 +11,10 @@ class RichText {
     });
   }
 
-  enhance (elem) {
+  enhance (elem: HTMLTextAreaElement) {
     const container = document.createElement("div");
     elem.parentNode.appendChild(container);
-    ReactDOM.render(
+    createRoot(container).render(
       <RichTextArea value={elem.value}
                     name={elem.name}
                     rows={elem.rows}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.css

@@ -58,7 +58,7 @@ html {
   @media screen and (max-width: 1440px) {
     @mixin font-scale 14, 16, $breakpoint-mobile-small, 1440;
   }
-  @media --mobile-small {
+  @media (--mobile-small) {
     @mixin font-scale 12, 16, 1, $breakpoint-mobile-small;
   }
 }