Attach location to Rehype's HTML elements from Remark

[thien-do]

Hi, I hope this is the right place to ask questions. I'll explain my situation briefly first before the specific question:

I'm working on a markdown editor, so I use remark, remark-rehype and rehype to generate a HTML preview from markdown content in the editor. Now I'd like to sync the scroll between the editor (markdown) and the preview (HTML). To do this, I believe I need to know which markdown line generates which HTML element.

My question is: is it possible with some plugins in the unified ecosystem yet? I strongly believe it's possible, but I just don't know if there are plugins for that yet. So far I found none but the plugins are spread across projects so I'm not sure if I missed any.

To give an example, my goal is, given a markdown like this:

first

second

I should have the following HTML:

<p data-line="1">first</p>
<p data-line="2">second</p>

[ChristianMurphy]

Welcome!
Assuming https://github.com/remarkjs/remark-rehype (wrapper around https://github.com/syntax-tree/mdast-util-to-hast) is being used.
The position information of the node should be carried through from MDAST to HAST.
Which could be used to set the position in the HAST/HTML based of the cursor position in the Markdown/MDAST.

An example with positional information:

const report = require('vfile-reporter')
const unified = require('unified')
const markdown = require('remark-parse')
const remark2rehype = require('remark-rehype')

unified()
  .use(markdown)
  .use(remark2rehype)
  // stringify HAST directly
  .use(function () {this.Compiler = (tree) => JSON.stringify(tree, null, 4)})
  .process(`
# test

1. one
2. two
`, function (err, file) {
    console.error(report(err || file))
    console.log(String(file))
  })

note the positions align with where content appeared in the markdown, allowing mapping.

[wooorm]

What do you mean, “put it into HTML”?

[wooorm]

Oh I see, the data-line="1" and such? You can create a plugin to do that. See this guide on Creating a plugin, and this one on traversing the tree.

In the end, the start line can be access on a node as node.position.start.line, and elements have a properties object which you can assign it to, e.g., element.properties.dataLine = node.position.start.line

[thien-do]

Thank you @wooorm I'm more than happy to write such plugin :D

[leafac]

@thien-do: What did you end up building? I found myself in similar situation and came up with the following:

.use(() => (tree) => {
  unistUtilVisit(tree, (node) => {
    if (node.properties !== undefined && node.position !== undefined)
      (node.properties as any).dataPosition = JSON.stringify(
        node.position
      );
  });
})

This produces HTML like the following:

<p data-position="{&quot;start&quot;:{&quot;line&quot;:3,&quot;column&quot;:1,&quot;offset&quot;:244},&quot;end&quot;:{&quot;line&quot;:3,&quot;column&quot;:241,&quot;offset&quot;:484}}">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, nisi, voluptatem quas perferendis at ex dolor laboriosam aperiam recusandae reiciendis molestiae delectus numquam sapiente similique porro autem optio expedita consequuntur.</p>

Then on the client-side I simply JSON.parse(element.dataset.position).

[thien-do]

@leafac ah yeah, I ended up with something similar, but I only need the "start-line" so I attached it directly, not the whole object, but you got the idea right

In our situation, it's actually much more complicated, specifically to handle the "code" elements (since all lines in a code block would report the same start line)

[thien-do]

1 year later.. I should have make this a npm instead of code it directly into my project :(( now I need it on another project and the old code is hardly usable...

[joshnuss]

Here's a working example:

https://svelte.dev/repl/78d2e0ef1f8c4e678f796c0e3f5a0c73?version=4.2.8