feat: add new-tab links and removable media previews (1.7.3)

src/Content/StyleCompiler.php

@@ -84,7 +84,7 @@ final class StyleCompiler
                 sprintf('"%s" is outside its range.', $key),
             ),
             'font' => $this->require(1 === preg_match('/^[a-z][a-z0-9-]{0,39}$/D', $text), sprintf('"%s" is not a font key.', $key)),
-            'media' => $this->require(1 === preg_match('/^[a-f0-9]{32}$/D', $text), sprintf('"%s" is not a media ID.', $key)),
+            'media' => $this->require('none' === $text || 1 === preg_match('/^[a-f0-9]{32}$/D', $text), sprintf('"%s" is not a media ID.', $key)),
             default => $this->require(false, 'Unknown style type.'),
         };
     }
@@ -233,7 +233,7 @@ final class StyleCompiler
                 $this->css(['type' => 'color'], (string) $values['gradientTo']),
             );
         }
-        if (isset($values['backgroundImage']) && null !== $this->media) {
+        if (isset($values['backgroundImage']) && 'none' !== $values['backgroundImage'] && null !== $this->media) {
             $item = $this->media->find((string) $values['backgroundImage']);
             if (null !== $item && [] !== $item['variants']) {
                 // A phone should not download the 2400 pixel variant of a background. CSS has no
@@ -244,7 +244,7 @@ final class StyleCompiler
             }
         }
 
-        return [] === $layers ? '' : 'background-image:'.implode(',', $layers);
+        return [] === $layers ? ('none' === ($values['backgroundImage'] ?? null) ? 'background-image:none' : '') : 'background-image:'.implode(',', $layers);
     }
 
     private function shadow(array $values): string
@@ -348,21 +348,19 @@ final class StyleCompiler
      */
     private function scaleBackground(array $style): array
     {
-        $image = $style['desktop']['backgroundImage'] ?? null;
-        if (null === $image) {
-            return $style;
-        }
+        $inherited = $style['desktop'] ?? [];
         foreach (['tablet', 'mobile'] as $device) {
-            if (!isset($style[$device]['backgroundImage'])) {
-                $style[$device]['backgroundImage'] = $image;
+            if (isset($inherited['backgroundImage']) || isset($style[$device]['backgroundImage'])) {
+                $style[$device]['backgroundImage'] ??= $inherited['backgroundImage'];
                 // Verlauf und Überlagerung gehören zur selben Regel: ohne sie stünde auf dem
                 // Telefon plötzlich ein unabgedunkeltes Bild hinter hellem Text.
                 foreach (['gradientFrom', 'gradientTo', 'gradientAngle', 'overlayColor', 'overlayOpacity', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'backgroundAttachment'] as $begleiter) {
-                    if (isset($style['desktop'][$begleiter]) && !isset($style[$device][$begleiter])) {
-                        $style[$device][$begleiter] = $style['desktop'][$begleiter];
+                    if (isset($inherited[$begleiter]) && !isset($style[$device][$begleiter])) {
+                        $style[$device][$begleiter] = $inherited[$begleiter];
                     }
                 }
             }
+            $inherited = array_replace($inherited, $style[$device] ?? []);
         }
 
         return $style;