u

src/components/article/tabs/ArticleHistoryTab.jsx

@@ -4,7 +4,6 @@ import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
 import Link from '@mui/material/Link';
-import ListItemButton from '@mui/material/ListItemButton';
 import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
@@ -125,13 +124,23 @@ class ArticleHistoryRow extends PureComponent {
   renderLink(label, onClick) {
     return (
       <Link
-        component="button"
-        type="button"
+        component="span"
+        role="button"
+        tabIndex={0}
         variant="body2"
         onClick={(e) => {
           e.stopPropagation();
+          const selection = window.getSelection()?.toString();
+          if (selection && selection.length > 0) return;
           onClick?.(e);
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick?.(e);
+          }
+        }}
         sx={{
           fontWeight: 600,
           verticalAlign: 'baseline',
@@ -141,6 +150,7 @@ class ArticleHistoryRow extends PureComponent {
           textDecoration: 'underline',
           fontFamily: 'inherit',
           fontSize: 'inherit',
+          userSelect: 'text',
           p: 0,
           m: 0,
           border: 'none',
@@ -321,6 +331,7 @@ class ArticleHistoryRow extends PureComponent {
           width: 14,
           height: 14,
           lineHeight: 0,
+          cursor: 'default',
           m: 0,
           my: 0,
           p: 0,
@@ -347,9 +358,7 @@ class ArticleHistoryRow extends PureComponent {
     if (!item) {
       if (disabled) {
         return (
-          <ListItemButton
-            disabled
-            divider
+          <Box
             sx={{
               ...rowGridSx,
               height: 32,
@@ -357,19 +366,28 @@ class ArticleHistoryRow extends PureComponent {
               maxHeight: 32,
               px: 1.5,
               py: 0,
+              borderBottom: '1px solid',
+              borderColor: 'divider',
               opacity: 0,
               pointerEvents: 'none',
             }}
           >
             <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>&nbsp;</Typography>
-          </ListItemButton>
+          </Box>
         );
       }
       return (
-        <ListItemButton
-          disabled
-          divider
-          sx={{ ...rowGridSx, height: 32, minHeight: 32, maxHeight: 32, px: 1.5, py: 0 }}
+        <Box
+          sx={{
+            ...rowGridSx,
+            height: 32,
+            minHeight: 32,
+            maxHeight: 32,
+            px: 1.5,
+            py: 0,
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+          }}
         >
           {renderInvisibleDummyRow(dummy)}
           <Box sx={{ gridColumn: 1, gridRow: 2 }}>
@@ -378,25 +396,37 @@ class ArticleHistoryRow extends PureComponent {
           <Box sx={{ gridColumn: 2, gridRow: 2 }}>
             <Skeleton variant="text" width="95%" height={16} />
           </Box>
-        </ListItemButton>
+        </Box>
       );
     }
 
     const meta = decodeMeta(item.meta);
 
     return (
-      <ListItemButton
-        divider
-        disabled={disabled}
-        sx={{ ...rowGridSx, height: 32, minHeight: 32, maxHeight: 32, px: 1.5, py: 0 }}
+      <Box
+        sx={{
+          ...rowGridSx,
+          height: 32,
+          minHeight: 32,
+          maxHeight: 32,
+          px: 1.5,
+          py: 0,
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+          userSelect: 'text',
+          cursor: 'text',
+          '&:hover': {
+            bgcolor: 'action.hover',
+          },
+        }}
       >
         {renderInvisibleDummyRow(dummy)}
 
-        <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0 }}>
+        <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, userSelect: 'text', cursor: 'text' }}>
           <Typography
             variant="body2"
             color="text.secondary"
-            sx={{ fontVariantNumeric: 'tabular-nums', fontSize: '0.8125rem', ...ellipsisSx }}
+            sx={{ fontVariantNumeric: 'tabular-nums', fontSize: '0.8125rem', userSelect: 'text', cursor: 'text', ...ellipsisSx }}
           >
             {formatDateTime(item.date || item.createdAt)}
           </Typography>
@@ -410,18 +440,20 @@ class ArticleHistoryRow extends PureComponent {
             display: 'flex',
             alignItems: 'center',
             overflow: 'hidden',
+            userSelect: 'text',
+            cursor: 'text',
           }}
         >
           {this.renderSkelehashThumb(meta)}
           <Typography
             variant="body2"
             component="div"
-            sx={{ ...ellipsisSx, display: 'inline', width: '100%', fontSize: '0.8125rem' }}
+            sx={{ ...ellipsisSx, display: 'inline', width: '100%', fontSize: '0.8125rem', userSelect: 'text', cursor: 'text' }}
           >
             {this.renderEntrySpans(item.text, meta)}
           </Typography>
         </Box>
-      </ListItemButton>
+      </Box>
     );
   }
 }