Transform only specific type to an element

[mickaelzhang]

Hi, I've been working on a component recently where we want to support only a subset of the element, basically only paragraph, strong and link for now.

For example:

This is some **markdown** text. Here a some link, 
just [here](https://www.google.com). And some random text.

- Bullet point 1
- Bullet point 2

Would render the appropriate bold, link and paragraph tag but for the bullet point, I want it to be rendered raw.

Is there a way to do that with the library? I've tried to only use my rules and not spread the default one but I have an error when I do that

const rules = {
  paragraph: {
    ...SimpleMarkdown.defaultRules.paragraph,
    react: (node, output, state) => (
      <Text key={state.key} size="text-100">
        {output(node.content, state)}
      </Text>
    ),
  },
  ...
}

[ariabuckles]

You should be able to do that with only your rules and not spreading the default, with one addition: you'll need the text rule to specify what happens to text that isn't matched by another rule (likely where your error was coming from).

const rules = {
  paragraph: {
    ...SimpleMarkdown.defaultRules.paragraph,
    react: (node, output, state) => (
      <Text key={state.key} size="text-100">
        {output(node.content, state)}
      </Text>
    ),
  },

  // ... the other rules you want here

  text: SimpleMarkdown.defaultRules.text,
};

---

One thing you might run into with the bullet points is that by default markdown treats multiple lines like that as part of a paragraph and ignores the line break.

You could probably change this behaviour by parsing the list and then changing the rendering to output the raw dashes rather than a <li>, or by preprocessing the text to replace all \ns with \n (two spaces followed by a newline) and including the br rule, which turns \n into a <br> element to separate the lines.

(Alternatively, if those don't work, you could change the br rule to match \n: match: anyScopeRegex(/^\n/), and change the text rule to break on newlines: match: anyScopeRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]|\n|\w+:\S|$)/)