fix(email): image styles will be converted to attributes if possible

This will help with email clients that do not allow or ignore styles.

engine/classes/Elgg/Views/HtmlFormatter.php

@@ -8,6 +8,7 @@
 use Elgg\Traits\Loggable;
 use Elgg\ViewsService;
 use Pelago\Emogrifier\CssInliner;
+use Pelago\Emogrifier\HtmlProcessor\CssToAttributeConverter;
 
 /**
  * Various helper method for formatting and sanitizing output
@@ -424,9 +425,10 @@ public function inlineCss(string $html, string $css, bool $body_only = false): s
 			return $html;
 		}
 
-		$inliner = CssInliner::fromHtml($html)->disableStyleBlocksParsing()->inlineCss($css);
+		$html_with_inlined_css = CssInliner::fromHtml($html)->disableStyleBlocksParsing()->inlineCss($css)->render();
+		$inlined_attribute_converter = CssToAttributeConverter::fromHtml($html_with_inlined_css)->convertCssToVisualAttributes();
 
-		return $body_only ? $inliner->renderBodyContent() : $inliner->render();
+		return $body_only ? $inlined_attribute_converter->renderBodyContent() : $inlined_attribute_converter->render();
 	}
 
 	/**

mod/ckeditor/elgg-plugin.php

@@ -17,6 +17,9 @@
 		'elgg.css' => [
 			'ckeditor/content.css' => [],
 		],
+		'email/email.css' => [
+			'ckeditor/email_fix.css' => [],
+		],
 		'input/longtext' => [
 			'ckeditor/init' => [],
 		],

mod/ckeditor/views/default/ckeditor/email_fix.css

@@ -0,0 +1,8 @@
+/*
+ * this fix will make sure resized images from editor content have a set width
+ * the core htmlformatter will transform this style to an attribute which will help showing it correctly in some email clients like outlook
+ */
+
+figure.image_resized img {
+	width: 100%;
+}