quantizor / markdown-to-jsx

🏭 The most lightweight, customizable React markdown component.
https://markdown-to-jsx.quantizor.dev/
MIT License
1.98k stars 171 forks source link

v8 discussion thread #485

Open quantizor opened 1 year ago

quantizor commented 1 year ago

For the next major version of the library, I want to focus on is drastically improving perf throughput and eliminating sources of catastrophic backtracking in the many regexes that make up core.

Ideas and RFCs are welcome. Note that the point of the library is still to stay very small (under 5kB if possible.)

Whyseverythingtaken commented 1 year ago

For the next iteration, I suggest disableParsingRawHTML option should be set to true by default. Reason being that this option closes the door for malicious attacks in case of developer forgetfulness or naivety. It would make more sense if this was an "opt-in" instead of an "opt-out" feature

quantizor commented 1 year ago

For the next iteration, I suggest disableParsingRawHTML option should be set to true by default. Reason being that this option closes the door for malicious attacks in case of developer forgetfulness or naivety. It would make more sense if this was an "opt-in" instead of an "opt-out" feature

Great idea

lamroger commented 1 year ago

Is there a suggested way to parse newlines?

edit: is it this? https://github.com/probablyup/markdown-to-jsx#optionswrapper

edit2: Had to replace singular \n with \n\n

deepaktammali commented 1 year ago

Hello,

Thanks for the great library. Would it be possible that we can add the ability to extend the rules when using the library?

Marviel commented 9 months ago

Thanks for the library :)

I would very much love #480 latex parsing

quantizor commented 9 months ago

Thanks for the library :)

I would very much love #480 latex parsing

Thinking about how to support this! Will try to land it in the current version

quantizor commented 8 months ago

LaTeX support has been enabled in v7.4 with any compatible library, thanks! https://github.com/quantizor/markdown-to-jsx/releases/tag/v7.4.0

import TeX from '@matejmazur/react-katex'
import { Markdown, RuleType } from 'markdown-to-jsx'

const exampleContent =
  'Some important formula:\n\n```latex\nmathbb{N} = { a in mathbb{Z} : a > 0 }\n```\n'

function App() {
  return (
    <Markdown
      children={exampleContent}
      options={{
        renderRule(next, node, renderChildren, state) {
          if (node.type === RuleType.codeBlock && node.lang === 'latex') {
            return (
              <TeX as="div" key={state.key}>{String.raw`${node.text}`}</TeX>
            )
          }

          return next()
        },
      }}
    />
  )
}
samuel-1184 commented 8 months ago

LaTeX support has been enabled in v7.4 with any compatible library, thanks! https://github.com/quantizor/markdown-to-jsx/releases/tag/v7.4.0

import TeX from '@matejmazur/react-katex'
import { Markdown, RuleType } from 'markdown-to-jsx'

const exampleContent =
  'Some important formula:\n\n```latex\nmathbb{N} = { a in mathbb{Z} : a > 0 }\n```\n'

function App() {
  return (
    <Markdown
      children={exampleContent}
      options={{
        renderRule(next, node, renderChildren, state) {
          if (node.type === RuleType.codeBlock && node.lang === 'latex') {
            return (
              <TeX as="div" key={state.key}>{String.raw`${node.text}`}</TeX>
            )
          }

          return next()
        },
      }}
    />
  )
}

Great to see this happening!

One more thing: inline Latex is the last blocking issue for us to move to markdown-to-jsx. In our scenario, we use inline latex heavily for math formula. For example:

This is display math mode

$$ y = ax^2 + bx + c, $$

while this $a > 0$ is inline math mode.

The source code is shown below:

This is display math mode

$$
y = ax^2 + bx + c,
$$

while this $a > 0$ is inline math mode.

Please shed light on this, thanks in advance.

quantizor commented 8 months ago

You could use the overrides feature and look for relevant syntax in the code element.

will-stone commented 6 months ago

@quantizor Thanks for this library! I was wondering if you'd consider exposing it in a modular fashion, so that it's very tree-shakeable and allows people to pick which parts of the markdown spec they wish to support.

For example, there's still full support if required, but instead of opt-out:

import Markdown from "markdown-to-jsx"

<Markdown
  options={{
    overrides: {
      del: ({ children }) => children,
    },
  }}
>
  {text}
</Markdown>

It's opt-in:

import { bold, italic, link, compose } from "markdown-to-jsx"

const Markdown = compose(bold, italic, link)

<Markdown>{content}</Markdown>

Our use case for this is for support within a component library, where we want to support a very limited amount of markdown syntax.

quantizor commented 6 months ago

@will-stone it's definitely on my radar