fix rendered rich text & markdown being tab-able

This commit is contained in:
Sidney Alcantara
2022-11-11 14:20:53 +11:00
parent fe665fef2a
commit 26ea9abaf4
2 changed files with 6 additions and 2 deletions

View File

@@ -4,7 +4,7 @@ import { useTheme } from "@mui/material";
import MDEditor from "@uiw/react-md-editor";
export default function Markdown({ value }: IDisplayCellProps) {
export default function Markdown({ value, tabIndex }: IDisplayCellProps) {
const theme = useTheme();
if (!value || typeof value !== "string") return null;
@@ -13,6 +13,8 @@ export default function Markdown({ value }: IDisplayCellProps) {
<div
data-color-mode={theme.palette.mode}
style={{ height: "100%", overflow: "hidden", whiteSpace: "normal" }}
// Prevent user tabbing into any rendered links
{...({ inert: tabIndex === -1 ? "inert" : undefined } as any)}
>
<MDEditor.Markdown source={value.slice(0, 240)} />
</div>

View File

@@ -41,7 +41,7 @@ import RenderedHtml from "@src/components/RenderedHtml";
// },
// }));
export default function RichText({ column, value }: IDisplayCellProps) {
export default function RichText({ value, tabIndex }: IDisplayCellProps) {
// const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
const theme = useTheme();
@@ -59,6 +59,8 @@ export default function RichText({ column, value }: IDisplayCellProps) {
fontSize: "0.75rem",
lineHeight: theme.typography.body2.lineHeight,
}}
// Prevent user tabbing into any rendered links
{...({ inert: tabIndex === -1 ? "inert" : undefined } as any)}
/>
);