garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

preserve style attribute from images (#1587)

Browse Source
This commit is contained in:
Athou
2024-10-21 21:15:57 +02:00
parent b35513ea84
commit 8230fde5d2
4 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
commafeed-client/package-lock.json generated
View File

@@ -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",

1
commafeed-client/package.json
View File

@@ -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",

4
commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx
View File

@@ -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") }}
/>
</>
)

3
commafeed-client/src/components/content/Content.tsx
View File

@@ -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}
/>