Source maps?

[edemaine]

Would it be possible to add source maps which specify which character ranges or nodes of generated HTML correspond to which character ranges of Markdown input?

I see there's extensive past discussion about developing a CST, which is useful for transforming Markdown. My need is a bit different: I want to support synchronizing views between a Markdown text editor and rendered Markdown, e.g. double-clicking on rendered Markdown to go to the corresponding place in the source text editor.

At some level I think source maps form an easier goal than a CST, as plausibly the mapping could be completely separate from the AST. Many compilers (e.g. Babel and CoffeeScript) output ASTs and source maps as separate objects (where the source map is only generated if an option says to do so). On the other hand, the way they typically do so is to add line/column numbers (Points in remark speak) to the AST, so this would require adding some optional fields to mdast and some tweaks to mdast-util-from-markdown to copy that information from tokens (where it already exists) to the AST if requested.

Is this something that would be of interest for PRs?

An alternative approach would be to add some special nodes to the AST that periodically record location, via a syntax plugin (if I understand micromark correctly). This is how this markdown-it plugin approaches the problem. I can't say this approach offers great granularity, but it'd be better than nothing, and perhaps could be done via a plugin without changing the core. Thoughts on the best approach?

[wooorm]

Do you really care about source maps, aka, objects like this? In that case, when we generate output (markdown, html, etc), we need to track, when outputting say <h2>, where that <h2> is, and where the ## were.

This is a) a bit complex, as mdast-util-to-markdown and hast-util-to-html generate deep first, the strings are then modified, and finally places somewhere, and it is b) not supported as far as I am aware: no browsers supports <!-- sourceMappingURL=... --> (as in, no browser supports reading the source map).

If you care about attaching data on HTML elements, like the markdown-it plugin you reference, then that is quite possible to accomplish with a few lines:

/**
 * @typedef {import('hast').Root}
 */

import { visit } from "unist-util-visit";
import { stringifyPosition } from "unist-util-stringify-position";

/** @type {import('unified').Plugin<[], Root>} */
export default function myRehypePluginAttachingPositionalInfoToElements() {
  return function (tree) {
    visit(tree, (node) => {
      if (node.type === "element" && node.properties && node.position) {
        node.properties.dataPosition = stringifyPosition(node.position);
      }
    });
  };
}

Every element now has a data-position="5:11-5:12" or so attribute.