nikolovlazar / chakra-ui-prose Goto Github PK

After adding the withProse to the extendTheme my Next.js bundle size shot up a lot, about 118 kB.

before:
chunks/pages/_app-57c7e4e7ff00db3f.js  52.3 kB
after:
chunks/pages/_app-af31a7e4f630c391.js  170 kB

Considering that the source in this repo is ~ 4 kB I don't know what is happening here. Is this expected or is something wrong?

If this is expected, is it possible to only include the withProse in specific routes (nested ChakraProvider)?

Add support for style props like w, px etc... (discussion link)

Add support for multiple styling sets (discussion link).

Suggestion:

• Utilize variants

Hello,
This package doesn't work with Chakra v2 or React 18... Is there a temparary fix that I can use while we wait for an update?

Hi, I'd like to use chakra-ui-prose to render contents coming from Strapi CMS to Next.js app as string with HTML. Unfortunately dangerouslySetInnerHTML doesn't work and I can't render it. I tried sorting this out myself, but I get various misuse of React Hooks errors when I'm trying to build the library locally (React versions are the same).

Here's what I tried

Update the guide on how to use dangerouslySetInnerHTML and add an example on content sanitation.

Example without sanitation:

<Prose>
   <div dangerouslySetInnerHTML={{ _html: content }} />
</Prose>

On Netlify I got this error:

4:54:08 PM: file:///opt/build/repo/dist/server/entries/renderer_default-page-server.mjs:6
4:54:08 PM: import { withProse } from "@nikolovlazar/chakra-ui-prose";
4:54:08 PM:          ^^^^^^^^^
4:54:08 PM: SyntaxError: Named export 'withProse' not found. The requested module '@nikolovlazar/chakra-ui-prose' is a CommonJS module, which may not support all module.exports as named exports.
4:54:08 PM: CommonJS modules can always be imported via the default export, for example using:
4:54:08 PM: import pkg from '@nikolovlazar/chakra-ui-prose';
4:54:08 PM: const { withProse } = pkg;
4:54:08 PM:     at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)

I'm using pnpm, and this is the version of chakra-ui-prose:

'@nikolovlazar/chakra-ui-prose':
    specifier: ^1.2.1
    version: 1.2.1(@chakra-ui/[email protected])(@chakra-ui/[email protected])([email protected])

My excuse if this is not the right place to ask this question but I literally could not find anywhere or other feasible solutions to render markdown html or html in that matter as chakra-ui.

So I tried prose and its great but now I have to manually set styles beside my chakra-ui theme to format the html. I find it unbelievable there seems to be no solid solution to convert html to chakra-ui and since prose is really nice it still is not really a 'clean' solution because on have to define all the styles.

For example I render a blog post from markdown with some bullet list and general html elements but for example the padding between the bullets is to high.

Is there perhaps a feasable solution to convert html to chakra-ui markup?
Again I know this is not perhaps the right place to ask but could not find any pointers to get in the right direction.

Using Prose If i fiddle with the styles enough I could get a acceptable solution but this feels very unclean to me, one would want to set styling 1 time in the chakra-ui theme and use that everywhere.

I would like to be able to skip certain parts of the HTML. E.g. something wrapped in a
<div class='skip-prose-styling'></div>
would not be styled with prose styles, but rather with chakra theme (that excludes prose stylings)
Is it possible. If yes how can I work this out?