preserve style attribute from images (#1587)

commafeed-client/package-lock.json

@@ -41,6 +41,7 @@
                 "react-router-dom": "^6.27.0",
                 "react-swipeable": "^7.0.1",
                 "redoc": "^2.2.0",
+                "style-to-object": "^1.0.8",
                 "throttle-debounce": "^5.0.2",
                 "tinycon": "^0.6.8",
                 "tss-react": "^4.9.13",
@@ -4623,6 +4624,11 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/inline-style-parser": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+            "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
+        },
         "node_modules/inquirer": {
             "version": "7.3.3",
             "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
@@ -7748,6 +7754,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/style-to-object": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+            "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+            "dependencies": {
+                "inline-style-parser": "0.2.4"
+            }
+        },
         "node_modules/styled-components": {
             "version": "6.1.13",
             "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",

commafeed-client/package.json

@@ -48,6 +48,7 @@
         "react-router-dom": "^6.27.0",
         "react-swipeable": "^7.0.1",
         "redoc": "^2.2.0",
+        "style-to-object": "^1.0.8",
         "throttle-debounce": "^5.0.2",
         "tinycon": "^0.6.8",
         "tss-react": "^4.9.13",

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -9,6 +9,7 @@ interface ImageWithPlaceholderWhileLoadingProps {
     title?: string
     width?: number
     height?: number | "auto"
+    style?: React.CSSProperties
     placeholderWidth?: number
     placeholderHeight?: number
     placeholderBackgroundColor?: string
@@ -42,6 +43,7 @@ export function ImageWithPlaceholderWhileLoading({
     src,
     title,
     width,
+    style,
 }: ImageWithPlaceholderWhileLoadingProps) {
     const { classes } = useStyles({
         placeholderWidth,
@@ -68,7 +70,7 @@ export function ImageWithPlaceholderWhileLoading({
                 width={width}
                 height={height}
                 onLoad={() => setLoading(false)}
-                style={{ display: loading ? "none" : "block" }}
+                style={{ ...style, display: loading ? "none" : (style?.display ?? "initial") }}
             />
         </>
     )

commafeed-client/src/components/content/Content.tsx

@@ -6,6 +6,7 @@ import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
 import escapeStringRegexp from "escape-string-regexp"
 import { type ChildrenNode, Interweave, type MatchResponse, Matcher, type Node, type TransformCallback } from "interweave"
 import React from "react"
+import styleToObject from "style-to-object"
 import { tss } from "tss"
 
 export interface ContentProps {
@@ -42,6 +43,7 @@ const transform: TransformCallback = node => {
         const nodeHeight = node.getAttribute("height")
         const width = nodeWidth ? Number.parseInt(nodeWidth, 10) : undefined
         const height = nodeHeight ? Number.parseInt(nodeHeight, 10) : undefined
+        const style = styleToObject(node.getAttribute("style") ?? "") ?? undefined
         const placeholderSize = calculatePlaceholderSize({
             width,
             height,
@@ -55,6 +57,7 @@ const transform: TransformCallback = node => {
                 title={title}
                 width={width}
                 height="auto"
+                style={style}
                 placeholderWidth={placeholderSize.width}
                 placeholderHeight={placeholderSize.height}
             />