remarkjs / remark-gfm

remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)

Home Page:https://remark.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Footnotes and Checklists not working with string from server

hahnbeelee opened this issue · comments

Initial checklist

Affected packages and versions

^3.0.1

Link to runnable example

Code sandbox

Steps to reproduce

I recently migrated my next.js app from reading directly from mdx files to using hashicorp's next-mdx-remote. Since then my content has been coming from my backend. And since then footnotes and checklists have been broken. I suspect this has to do with how javascript formats a string when sending it.

For example: This string works as desired when i use it directly

`- [x] You can also help us with documentation and tutorials. Here is how you can
      contribute by writing

- [x] Share with your friends and spread the word.`

However when I send it through a server it becomes like this:

"*   \\[x] You can also help us with documentation and tutorials. Here is how you can\n    contribute by writing\n    [documentation](https://docs.mindsdb.com/contribute/docs/) and\n    [tutorials](https://docs.mindsdb.com/sql/tutorials/home-rentals/). Don't\n    forget to follow the [style guide](https://docs.mindsdb.com/docs-rules/).\n\n*   \\[x] Share with your friends and spread the word about MindsDB.

I've tried a hack approach of content.replace(/\* \\\\\[x]/g, "* [x]") but this isn't working for me.

Expected behavior

A checkbox:
image

Actual behavior

Checkbox does not get rendered:
image

Runtime

Node v17

Package manager

npm 8

OS

macOS

Build and bundle tools

Next.js

commented

Since then my content has been coming from my backend

Which backend?

And since then footnotes and checklists have been broken.

Well, then you are not using this plugin in some place. Or the place where you use it, doesn’t understand this plugin.

You codesandbox passes in markdown that works and markdown that doesn’t work. That’s supposed to be that way. The problem is your backend.

Ah gotcha, I assumed it was a fault of the plugin with detecting syntax because only footnotes and checklists weren't working, but that makes a lot of sense. There's definitely something happening in my backend that is misconstruing the strings.

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

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks,
— bb

@wooorm I figured it out. I parse my content once through remark on the server and once in next.js (this is because I want a separation between UI changes vs. content changes (e.g. Change image urls to hosted image urls on s3)) Turns out if you feed content with gfm in it without adding the remark plugin it escapes [. Not sure if this is intentional, but this was kind of unexpected behavior for me. Here's an example.

commented

Not sure if this is intentional

Yes. It is intentional. You need to specify what custom flavor of markdown you are using. In all places that deal with markdown. Otherwise it is assumed you are using CommonMark (standard markdown).