Suggested strategies for "skipping" incomplete/malformed markdown links?

[chrisrzhou]

Hey remark community,

I have a question on what strategies I could consider to skip incomplete/malformed markdown links.

Given the following strings, markdown would render (using Github markdown preview to confirm):

1. Hello [world](https://www.world.com) -> Hello world
2. Hello [world -> Hello [world
3. Hello [world](https:// -> Hello [world](https://

I want to understand the general direction on strategies one can apply to essentially skip rendering the link if it is malformed e.g. scenarios 2 and 3 will only print Hello

I'm assuming one has to author some validator/transform e.g.

const validateMarkdown = (text: string) => string;

validateMarkdown('Hello [world](https://www.world.com)'); // ''Hello [world](https://www.world.com)"
validateMarkdown('Hello [world]'); // ''Hello "
validateMarkdown('Hello [world](https://`'); // ''Hello "

// in a similar way, `validateMarkdown` to be extended to handle HTML comments
validateMarkdown('Hello <!-- this is a comment -->'); // 'Hello <!-- this is a comment -->'
validateMarkdown('Hello <!-- this is a broken comment '); // 'Hello "

This question is mostly to understand the recommended approach from the community, and any help from relevant resources within remark/micromark ecosystem to solve this problem will be greatly appreciated.

The motivation of this question is building text-streaming applications that stream markdown back to the client. I don't believe there's native APIs in remark ecosystem that handles this use case, so I would like to know how I can solve this class of problems.

[wooorm]

Hey!

malformed

The thing is, there is no malformed markdown.
Or HTML.
It doesn’t exist.
What you want is impossible.
Every character is always valid.

[ChristianMurphy]

Adding on, a better approach would be: rather than waiting until after a link is invalid trying to validate/fix it.
Instead make sure the link is valid in the first place.
A few ways to do that:

1. train authors on what valid markdown is
2. use a markdown-aware editor experience that automatically matches opening and closing brackets

[chrisrzhou]

Hey folks, sorry for the confusion, and to clarify:

• Agree that there is no such thing as "malformed" markdown (described my problem inaccurately), it's just simple text, and every character is valid.
• My problem is a domain requirement problem, and is best described by:

  A (LLM service) is streaming back text response with Markdown.

  (stream:progress) Hello [world]
  (stream:progress) Hello [world](https://
  (stream:end) Hello [world](https://www.world.com)

  Without any treatment, Markdown would be rendered, as expected as below
  (stream:progress) Hello [world]
  (stream:progress) Hello [world](https://
  (stream:end) Hello world

  The domain requirement would prefer if the rendering is the following instead (i.e. do not render "broken" links)
  (stream:progress) Hello
  (stream:progress) Hello
  (stream:end) Hello world

Specific to the "streaming" nature of this domain problem, my best attempt at a solution involves the following ideas:

• The nature of streaming text means potentially misaligned expectation can only happen at the tail of the text.
• Implement a replaceMarkdown = (text: string) => string that naively replaces the last invalid scenario using negative lookups regexp (since the domain problem exists only in the tail of the text). Call this utiliy only in stream:progress events

  const replaceMarkdown = (text: string) => {
    const regexp = /(.*)(?<!\))\[[^\]]*\]\([^\)]*$/`; // make regexp more robust
    return replace(regex, '$1')
  }
  
  replaceMarkdown("This is [a valid link](valid link) but this is [an invalid](link "); // 'This is [a valid link](valid link) but this is '
  <ReactMarkdown>{replaceMarkdown(text)}</ReactMarkdown>

• When the stream:end event is reached, we can just pass text without replaceMarkdown to render the final text, giving guarantees that the eventual data is rendered.

I am aware any form of replaceMarkdown is likely going to run into a lot of edge cases as a lot has to go into handling the Commonmark spec (i.e. micromark). The above was my best attempt if I still needed to consider "a solution vs no solution". It's worth mentioning that tools like ChatGPT approach it with "no solution" (e.g. ask ChatGPT to write paragraphs of markdown with links, and we'll observe "broken links" rendering behaviors as the LLM streams the response back).

This discussion/question is purely one based on this domain problem. Just wanted advice and direction from the community, and appreciate the time and help here!

[ChristianMurphy]

There is no "streaming" markdown, it is always a full document.

Make the LLM produce valid markdown.
You can shape the output with libraries like: https://github.com/guidance-ai/guidance and https://github.com/outlines-dev/outlines to ensure the LLM will produce valid markdown.