React-markdown, gfm tables not working and other problems

Question

I have been trying to render markdown in react using the react-markdown library, I have had 2 problems and 1 question which I have not been able to answer:

1. When using the remark-gfm plug-in the tables do not render correctly.
2. The spacing between lines does not behave the way I want it to, I can have 5 new lines between paragraphs and the render output will only show 1 new line.
3. In a checkbox selection is there a way to change the selected box in the rendered output?

My app has 4 components:

1.App.jsx

import "./styles/App.css";
import styled from "styled-components"
import MarkedInput from './components/MarkedInput'
import Result from "./components/Result";
import { useState } from "react";
import EditorContext from "./EditorContext";

const AppContainer = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
`;

const Title = styled.div`
    font-size: 25px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    margin-bottom: 1em;
`;

const EditorContainer = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
`;

function App() {
    const [markdownText, setMarkdownText] = useState("");
    const contextValue = {
        markdownText,
        setMarkdownText
    };

    return (
        <EditorContext.Provider value={contextValue}>
            <AppContainer>
                <Title>Markdown Editor</Title>
                <EditorContainer>
                    <MarkedInput />
                    <Result />
                </EditorContainer>
            </AppContainer>
        </EditorContext.Provider>
    );
}

export default App;

2. MarkedInput.jsx

import React from "react";
import { useContext } from "react";
import styled from "styled-components";
import EditorContext from "../EditorContext";

const Container = styled.div`
    width: 50%;
    height: 100%;
    padding: 14px;
    border-right: 1.5px solid rgba(15, 15, 15, 0.4);
    font-family: "Lato", sans-serif;
`;

const Title = styled.div`
    font-size 22px;
    font-weight: 600;
    margin-bottom: 1em;
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.3);
`;

const TextArea = styled.textarea`
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    font-size: 17px;
`;

function MarkedInput(props) {
    const { setMarkdownText } = useContext(EditorContext);

    const onInputChange = (event) => {
        const newValue = event.currentTarget.value;
        setMarkdownText(newValue);
    };

    return (
        <Container>
            <Title>Markdown Text</Title>
            <TextArea onChange={onInputChange} />
        </Container>
    );
}

export default MarkedInput;

3. My context component (EditorContext.jsx)

import React from 'react'

const defaulContext = {
    markdownText: "",
    setMarkdownText: () =>{}
}

export default React.createContext(defaulContext)

4. My Results Component (Result.jsx)

import React from "react";
import { useContext } from "react";
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
import styled from "styled-components";
import EditorContext from "../EditorContext";
//import remarkGfm from 'https://esm.sh/remark-gfm@3'
import remarkGfm from "remark-gfm";

const Container = styled.div`
    width: 50%;
    height: 100%;
    padding: 13px;
    font-family: "Lato", sans-serif;
`;

const Title = styled.div`
    font-size 22px;
    font-weight: 600;
    margin-bottom: 1em;
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.3);
`;

const ResultArea = styled.div`
    width: 100%;
    heigth: 100%;
    border: none;
    font-size: 17px;
`;

function Result(props) {
    const { markdownText } = useContext(EditorContext);
    return (
        <Container>
            <Title>Converted Text</Title>
            <ResultArea>
                <ReactMarkdown
                    children={markdownText}
                    remarkPlugins={[remarkGfm]}
                ></ReactMarkdown>
            </ResultArea>
        </Container>
    );
}

export default Result;

This are the dependencies Im using for the project:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.5",
    "remark-gfm": "^3.0.1",
    "styled-components": "^5.3.10"
   }

And here is an image showing the results of my markdown app

I have tried changing the way i call the import for the plugin and that did nothing. Im using:

• Firefox v112.0.2
• Windows 10 pro 22H2

Answer 1

TLDR; Override the browsers user agent stylesheet.

I was in this same situation all morning and couldn't figure it out. I finally inspected my code and looked at the HTML my react code was rendering, in devTools. Turns out the <table></table> was there but some default styling was hiding the borders and indentation and such.

I recommend you open up your rendered code and do the same. You'll likely see the user agent stylesheet generated css rules for a table. Create or add to your CSS file to override those styles. (use !important)

for example my changes,

table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    border-color: inherit !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: auto !important;
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit !important;
    border-style: solid !important;
    border-width: 2px !important;
}