u

src/components/article/tabs/ArticleDescTab.jsx

@@ -0,0 +1,68 @@
+import { Component } from 'react';
+import Box from '@mui/material/Box';
+import PageMinimap from '../../PageMinimap';
+
+function PanelHtmlValue({ html }) {
+  if (html == null || html === '') return null;
+  return (
+    <Box sx={{ mb: 1.5 }}>
+      <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 ArticleDescTab extends Component {
+  render() {
+    const { article: articleData } = this.props;
+    const desc = articleData.desc ?? articleData.description;
+    return (
+      <>
+        <PanelHtmlValue html={desc} />
+        <PageMinimap />
+      </>
+    );
+  }
+}

src/components/article/tabs/ArticleSeoTab.jsx

@@ -1,68 +1,2 @@
-import { Component } from 'react';
-import Box from '@mui/material/Box';
-import PageMinimap from '../../PageMinimap';
+export { default } from './ArticleDescTab';
 
-function PanelHtmlValue({ html }) {
-  if (html == null || html === '') return null;
-  return (
-    <Box sx={{ mb: 1.5 }}>
-      <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;
-    const desc = articleData.desc ?? articleData.description;
-    return (
-      <>
-        <PanelHtmlValue html={desc} />
-        <PageMinimap />
-      </>
-    );
-  }
-}