u

src/components/article/tabs/ArticleSeoTab.jsx

@@ -18,6 +18,68 @@ function PanelValue({ label, children }) {
   );
 }
 
+function PanelHtmlValue({ label, html }) {
+  if (html == null || html === '') return null;
+  return (
+    <Box sx={{ mb: 1.5 }}>
+      {label ? (
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          display="block"
+          sx={{ mb: 0.5, fontWeight: 500 }}
+        >
+          {label}
+        </Typography>
+      ) : null}
+      <Box
+        sx={(theme) => ({
+          p: 1.5,
+          borderRadius: 1.5,
+          bgcolor:
+            theme.palette.mode === 'dark'
+              ? 'rgba(255, 255, 255, 0.08)'
+              : 'rgba(255, 255, 255, 0.85)',
+          border: '1px solid',
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? 'rgba(255, 255, 255, 0.12)'
+              : 'rgba(255, 255, 255, 0.95)',
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? 'none'
+              : '0 1px 3px rgba(0, 0, 0, 0.04)',
+          fontSize: '0.875rem',
+          lineHeight: 1.55,
+          color: 'text.primary',
+          wordBreak: 'break-word',
+          '& h1, & h2, & h3, & h4, & h5, & h6': {
+            fontSize: '1rem',
+            fontWeight: 600,
+            mt: 1.25,
+            mb: 0.5,
+            '&:first-child': { mt: 0 },
+          },
+          '& p': {
+            my: 0.5,
+            '&:first-child': { mt: 0 },
+            '&:last-child': { mb: 0 },
+          },
+          '& ul, & ol': {
+            pl: 2.5,
+            my: 0.5,
+          },
+          '& a': {
+            color: 'primary.main',
+            textDecoration: 'underline',
+          },
+        })}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </Box>
+  );
+}
+
 export default class ArticleSeoTab extends Component {
   render() {
     const { article: articleData } = this.props;
@@ -27,7 +89,7 @@ export default class ArticleSeoTab extends Component {
       <>
         <PanelValue label="Slug">{articleData.slug}</PanelValue>
         <PanelValue label="SEO">{seo}</PanelValue>
-        <PanelValue label="Beschreibung">{desc}</PanelValue>
+        <PanelHtmlValue label="Beschreibung" html={desc} />
       </>
     );
   }