Support for Source Map

[atifali]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Problem

An option to toggle the source map for the rendered Markdown would be useful in cases where the source of each rendered HTML element is needed for eg: when implementing scroll syncing

Current solutions

As far as I can tell, this does not currently exist in this library. However, there are libraries that support such a feature for eg: https://www.npmjs.com/package/markdown-it-source-map

Proposed solutions

When converting Markdown to HTML for the preview, include data attributes or classes in the rendered HTML elements that indicate their corresponding source line numbers.

[ChristianMurphy]

Source information is pass in with the node already, is that not enough?
#903 (comment)

An option to toggle the source map for the rendered Markdown would be useful in cases where the source of each rendered HTML element is needed for eg: when implementing scroll syncing

Source map is more for debugging than scroll syncing.
It is intended to be used by a browser's dev tools.
Which is why MDX supports it for server side rendering https://mdxjs.com/packages/mdx/#fields
I'm not sure it makes sense here as a mostly client side renderer, and not for scoll sync either.

When converting Markdown to HTML for the preview, include data attributes or classes in the rendered HTML elements that indicate their corresponding source line numbers.

This already exists #903 (comment)

[github-actions]

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing more info. It’s not clear yet whether this is an issue. Here are a couple tips:

• Spend time framing the issue! The more time you put into it, the more we will
• Often, maintainers respond with why for several back and forths; rubber duck debugging might help avoid that
• Folks posting issues sometimes fall for xy problems: asking for a certain solution instead of raising the root problem

Thanks,
— bb

[atifali]

@ChristianMurphy I am trying to figure out what line number does a rendered HTML correspond to in the associated Markdown, so that I can use that to figure out what line to scroll to in the editor accurately when scrolling on the corresponding preview. Any idea how I can achieve that with the #903 (comment)?

I see that the props have two booleans called sourcePos & rawSourcePos, that I believe will enable what I am looking for. I will give that a try too. If there are any other methods would love to know.

[wooorm]

Those props you mention are available in an older version (8). In the current version, node is passed. Which has a position field. You can console.log it to see what you need!

Source maps are a different thing, not what you are looking for. As Christian mentions, “I'm not sure it makes sense here as a mostly client side renderer, and not for scoll sync either.”

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.