mustaphaturhan / chakra-ui-markdown-renderer Goto Github PK

I can easily render headings with standalone. But if a new line character <br/> is exist before or after heading part, MarkdownRenderer not working correctly. Please consider example below.

## Heading

works fine. But if I put some new line:

Some text <br/>
## Heading

not working as expected. It just displays "#" characters and not rendering.

Hey there,

I tried this package to render the markdown sent by the server, but apparently, it breaks the functionality of the native toast component in Chakra-UI.
Here's the error code.
can't perform a react state update on an unmounted component. this is a no-op, but it indicates a memory leak in your application. to fix, cancel all subscriptions and asynchronous tasks in the componentwillunmount method. ToastManager

You can check the above behavior here. Here .

Hi there! I think this package could be very useful for my project, but there is a peer dependency for Framer Motion of v2.9.5, which conflicts with v4 of Framer Motion that I'm using for the rest of my project. Would it be possible to update the package to use the latest version of Framer?

Edit: actually, this also conflicts with the latest Chakra UI version, which requires v4 of Framer

Context

• React version: 17.0.2
• Chakra Version: 1.5.2
• React Markdown Version: 6.0.0
• Chakra Markdown Render Version: 3.0.1

Error

When I use tables in Markdown (Via Remark GFM), React spits out this error:

index.js:1 Warning: React does not recognize the isHeader prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isheader instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Cause

The error appears because React Markdown passes the isHeader prop but Chakra doesn't expect it.

Solution

I've fixed this here:

//Table row
tr: props => <Tr>{props.children}</Tr>,

//Table data cell
td: props => <Td>{props.children}</Td>,

//Table header cell
th: props => <Th>{props.children}</Th>

First, thank you for sharing this repo. It made my day for my side project when I found it.

So, isn't the spacing of List in see excerpt below or click (https://github.com/mustaphaturhan/chakra-ui-markdown-renderer/blob/master/src/index.js#L68) a bit too large? It is set to 24 which caused my application to get humongous large spacing between each element

  list: props => {
    const { start, ordered, children, depth } = props;
    const attrs = getCoreProps(props);
    if (start !== null && start !== 1 && start !== undefined) {
      attrs.start = start.toString();
    }
    let styleType = 'disc';
    if (ordered) styleType = 'decimal';
    if (depth === 1) styleType = 'circle';
    return (
      <List
        spacing={24}
        as={ordered ? 'ol' : 'ul'}
        styleType={styleType}
        pl={4}
        {...attrs}
      >
        {children}
      </List>
    );
  },

I solved the issue on my hand by copying your default code and replacing 24 with 2 actually. So not a big issue for me. Altough I had to copy the getCoreProps as well to get it working.

Lastly, would be nice if it was easier to configure. But also see that it might be hard to do properly.

Since the ChakraUIRenderer's first arg is typed as theme?: Defaults, it accepts heading. However heading is never used.

I think there are two ways to fix it:

• Change the type of theme from Defaults to Components.
• Assign theme.heading to theme.h1, ..., theme.h6 before deepmerge(elements, theme).

This example in the README is incompatible with react-markdown v6

import ChakraUIRenderer from 'chakra-ui-markdown-renderer';

<ReactMarkdown
  renderers={ChakraUIRenderer()}
  source={markdown}
  escapeHtml={false}
/>;

In v6, renderers and source are replaced with other properties

See react-markdown changelog for more info

could not find a declaration file for module 'chakra-ui-markdown-renderer'. '/Users/subadrun/projects/supryantowp/devcodes/node_modules/chakra-ui-markdown-renderer/dist/index.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev @types/chakra-ui-markdown-renderer if it exists or add a new declaration (.d.ts) file containing declare module 'chakra-ui-markdown-renderer';ts(7016)

I try to
npm I --save-dev @types/chakra-ui-markdown-renderer

I got error

npm ERR! 404 '@types/chakra-ui-markdown-renderer@latest' is not in the npm re│➜ npm run dev gistry.

Hello! I wanted to start off by saying thanks for this very useful package. I noticed this bug when trying to render block quotes.

Thanks!

I have the following example markdown:

• Test A

My code:

import ReactMarkdown from 'react-markdown'
import ChakraUIRenderer from 'chakra-ui-markdown-renderer'
import { List } from "@chakra-ui/react"
...

<ReactMarkdown
  components={ChakraUIRenderer({
     ...,
     ul: ({ children }) => {
        return <List as="ul">
          {children}
        </List>
      }
  })} 
>
   {markdown}
</ReactMarkdown>

results in this rendering error:

ContextError: useListStyles returned is 'undefined'. Seems you forgot to wrap the components in "<List />" 

The package ReactMarkdown transforms code blocks into the following html:

<pre>
  <code>
    some code
  </code>
</pre>

That html is then transformed by this package to the following jsx:

<Code>
  <Code>
    some code
  </Code>
</Code>

I'm not sure if that behaviour is expected.

Using the following custom component transformation solved my problem:

export const chakraMarkdownComponents = {
  code: ({ children }) => <Code>{children}</Code>,
  pre: ({ children }) => (
    <chakra.pre display="block" borderRadius="md" mb={4} p={3} bg="gray.100">
      {children}
    </chakra.pre>
  ),
};

(EDIT: I updated the code snippet above because the previous one was breaking inline code blocks)

Reproduction Procedure

I got this error when I simply create app with crate-next-app and install packages using npm, and set ChakraProvider to app.js.
pages/index.js is as follows.

import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
import ReactMarkdown from 'react-markdown';

export default function Home() {
  const markdown = `## Heading
  paragraph`;

  return (
    <ReactMarkdown
      components={ChakraUIRenderer()}
      children={markdown}
    />
  )
}

Then I got this error.

Failed to compile
./node_modules/chakra-ui-markdown-renderer/dist/index.esm.js:1:258
Module not found: Can't resolve 'deepmerge'
null

The package version is 3.0.0 (latest).

"chakra-ui-markdown-renderer": "^3.0.0",

I have made a repo for this issue.

Gitpod:
https://peach-stoat-lwzsdygc.ws-us04.gitpod.io/
GitHub Repository:
https://github.com/kyonenya/deepmerge-chakra-ui-markdown-renderer

Cause

Package deepmerge is used but not explitly installed in package.json.
So, when I install manually deepmerge 4.2.2, then it works correctly.

In addition, "@types/deepmerge": "^2.2.0" is in devDependencies,
but this packages seems to be deprecated.

deepmerge provides its own type definitions, so you don't need @types/deepmerge installed!
https://www.npmjs.com/package/@types/deepmerge

Hi, thanks for this project.

I tried to use it with ChakraUI 2.2.1 but i have the following error

Attempted import error: 'createStylesContext' is not exported from '@chakra-ui/system' (imported as 'createStylesContext').
Any idea ?

Thanks :)

Is this in the works? If not I can try to take a stab at it

I have followign code:
<Box marginTop="1rem"> <ReactMarkdown components={ChakraUIRenderer(mdTheme("white"))} // eslint-disable-next-line react/no-children-prop children={workshop.description} escapeHtml={false} /> ; </Box>
And at build time I get following error:
Type error: Type '{ p: (props: any) => Element; li: (props: any) => Element; h3: (props: any) => Element; }' has no properties in common with type 'Defaults'.

I defined new theme in a separate file mdTheme.js:

import { Text, Heading, ListItem } from "@chakra-ui/layout";

const mdTheme = (color) => {
  return {
    p: (props) => {
      const { children } = props;
      return (
        <Text mb={2} fontSize="md" color={color}>
          {children}
        </Text>
      );
    },
    li: (props) => {
      const { children } = props;
      return (
        <ListItem mb={2} fontSize="md" color={color}>
          {children}
        </ListItem>
      );
    },
    h3: (props) => {
      const { children } = props;
      return (
        <Heading as="h3" mb={2} fontSize="lg" color={color}>
          {children}
        </Heading>
      );
    },
  };
};

export default mdTheme;

Do you have an idea hwo to solve this error? Thx