Footnotes order inside table is reversed

Question

Footnotes order inside table is reversed

magicpalmtree opened this issue 2 years ago · comments

MagicPalmTree commented 2 years ago

Initial checklist

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

Affected packages and versions

"remark-gfm": "^3.0.1"

Link to runnable example

No response

Steps to reproduce

// Node v18.13.0

/* Input */
Before tableeeeeeeeeee [^t0]

| h1 [^h1] | h2 [^h2] | h3 [^h3] |
| --- | --- | --- |
| 1 [^c1] | 2 [^c2] | 3 [^c3] | 
| 4 [^c4] | 5 [^c5] | 6 [^c6] |
| 7 [^c7] | 8 [^c8] | 9 [^c9] |

After table[^t1]

[^t0]: t0
[^h1]: h1
[^h2]: h2
[^h3]: h3
[^c8]: c8
[^c9]: c9
[^t1]: t1
[^c1]: c1
[^c2]: c2
[^c3]: c3
[^c4]: c4
[^c5]: c5
[^c6]: c6
[^c7]: c7

/* mdsvex.config.js */
const config = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],

	remarkPlugins: [
		remarkParse,
		remarkGfm,
	],
	rehypePlugins: [
		rehypeStringify,
	 ],
	... More Code ...
});

/* svelte.config.js */
... More Code ...
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';

const config = {
	extensions: ['.svelte', ...mdsvexConfig.extensions],

	preprocess: [
		mdsvex(mdsvexConfig)
	],
	... More Code ...
}

Expected behavior

Before tableeeeeeeeeee ¹

h1 2	h2 3	h3 4
1 5	2 6	3 7
4 8	5 9	6 10
7 11	8 12	9 13

After table¹⁴

Footnotes

t0 ↩
h1 ↩
h2 ↩
h3 ↩
c1 ↩
c2 ↩
c3 ↩
c4 ↩
c5 ↩
c6 ↩
c7 ↩
c8 ↩
c9 ↩
t1 ↩

Actual behavior

Before tableeeeeeeeeee ^t0

h1 h1	h2 h2	h3 h3
1 c1	2 c2	3 c3
4 c4	5 c5	6 c6
7 c7	8 c8	9 c9

After table^t1

t0↩
c9↩
c8↩
c7↩
c6↩
c5↩
c4↩
c3↩
c2↩
c1↩
h3↩
h2↩
h1↩
t1↩

The point is that the footnote order inside table is reversed :/

Runtime

Other (please specify in steps to reproduce)

Package manager

npm 8

OS

macOS

Build and bundle tools

Vite

Titus commented 2 years ago

What?

Titus · Answer 1 · Wed Feb 08 2023 16:36:22 GMT+0800 (China Standard Time)

This was solved a year ago: https://github.com/syntax-tree/mdast-util-to-hast/releases/tag/12.1.1

github-actions · Answer 2 · Wed Feb 08 2023 16:36:38 GMT+0800 (China Standard Time)

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

MagicPalmTree · Answer 3 · Wed Feb 08 2023 18:13:13 GMT+0800 (China Standard Time)

This was solved a year ago: https://github.com/syntax-tree/mdast-util-to-hast/releases/tag/12.1.1

did you checked with svelte+vite+mdsvex? @wooorm

Titus · Answer 4 · Wed Feb 08 2023 18:17:05 GMT+0800 (China Standard Time)

Why should I check those tools? I don’t work on them. If it’s an issue there, raise it there

MagicPalmTree · Answer 5 · Wed Feb 08 2023 18:20:26 GMT+0800 (China Standard Time)

Why should I check those tools? I don’t work on them. If it’s an issue there, raise it there

the issue is just on remark-gfm itself. actually other remark- packages are all working fine.
I checked on the playground below and that is what I wanted.
https://mdxjs.com/playground/
but can't implement on my project.

Titus · Answer 6 · Wed Feb 08 2023 18:25:07 GMT+0800 (China Standard Time)

No it’s not, remark-gfm doesn’t handle how tables are turned into HTML. That’s what remark-rehype/mdast-util-to-hast do. It’s fixed there. A year ago.
All remark packages are working fine. The problem is in your other tools.

MagicPalmTree · Answer 7 · Wed Feb 08 2023 18:28:53 GMT+0800 (China Standard Time)

MagicPalmTree commented 2 years ago

MagicPalmTree · Answer 8 · Wed Feb 08 2023 18:38:14 GMT+0800 (China Standard Time)

actually there is no problem with table.
markdown is converted perfectly with just remark-parse and remark-gfm.
but the issue is just on footnotes inside table.

if I remove remark-gfm and just use remark-rehype & remark-footnotes, then the footnotes order is fine but the table is not converted. the only way I can see table is using remark-gfm, but if I use that, footnotes order breaks.

please check this code & result on codesandbox
https://codesandbox.io/s/currying-framework-o5ul2n?file=/src/index.js
https://o5ul2n.csb.app/

Titus · Answer 9 · Wed Feb 08 2023 18:51:35 GMT+0800 (China Standard Time)

Codesandbox has some caching issues. Try on your computer:

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import remarkRehype from './index.js'
import remarkStringify from 'rehype-stringify'

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(remarkStringify)
  .process(
    `Before tableeeeeeeeeee [^t0]

| h1 [^h1] | h2 [^h2] |
| --- | --- |
| 1 [^c1] | 2 [^c2] |

After table[^t1]

[^t0]: t0
[^h1]: h1
[^h2]: h2
[^t1]: t1
[^c1]: c1
[^c2]: c2
`
  )

console.log(String(file))

<p>Before tableeeeeeeeeee <sup><a href="#user-content-fn-t0" id="user-content-fnref-t0" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
<table>
<thead>
<tr>
<th>h1 <sup><a href="#user-content-fn-h1" id="user-content-fnref-h1" data-footnote-ref aria-describedby="footnote-label">2</a></sup></th>
<th>h2 <sup><a href="#user-content-fn-h2" id="user-content-fnref-h2" data-footnote-ref aria-describedby="footnote-label">3</a></sup></th>
</tr>
</thead>
<tbody>
<tr>
<td>1 <sup><a href="#user-content-fn-c1" id="user-content-fnref-c1" data-footnote-ref aria-describedby="footnote-label">4</a></sup></td>
<td>2 <sup><a href="#user-content-fn-c2" id="user-content-fnref-c2" data-footnote-ref aria-describedby="footnote-label">5</a></sup></td>
</tr>
</tbody>
</table>
<p>After table<sup><a href="#user-content-fn-t1" id="user-content-fnref-t1" data-footnote-ref aria-describedby="footnote-label">6</a></sup></p>
<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-t0">
<p>t0 <a href="#user-content-fnref-t0" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-h1">
<p>h1 <a href="#user-content-fnref-h1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-h2">
<p>h2 <a href="#user-content-fnref-h2" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-c1">
<p>c1 <a href="#user-content-fnref-c1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-c2">
<p>c2 <a href="#user-content-fnref-c2" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-t1">
<p>t1 <a href="#user-content-fnref-t1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
</ol>
</section>

I gave you the solution three times: it’s not here, it’s in your other tools.

MagicPalmTree · Answer 10 · Wed Feb 08 2023 19:48:50 GMT+0800 (China Standard Time)

Yeah, it's working on local.
seems the issue is on other part.
Thanks. 👍