Unexpected closing tag </p>, expected corresponding closing tag for <br> (5:332-5:336)

[nojaf]

Hi,

I just updates to 3.0.4 and I'm seeing

Unexpected closing tag </p>, expected corresponding closing tag for <br> (5:332-5:336)

for

{
  id: "fantomas-configuration-file/index.md",
  slug: "fantomas-configuration-file",
  body: "\nHi all,\n\nThe cat's out of the bag:\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">New version of <a href=\"https://twitter.com/IonideProject?ref_src=twsrc%5Etfw\">@IonideProject</a> is out - it updates Fantomas support to the latest version including support for Fantomas configuration file (<a href=\"https://t.co/Pw3TqQ4kYe\">https://t.co/Pw3TqQ4kYe</a>)<br><br>Props to <a href=\"https://twitter.com/verdonckflorian?ref_src=twsrc%5Etfw\">@verdonckflorian</a> and <a href=\"https://twitter.com/ChetHusk?ref_src=twsrc%5Etfw\">@ChetHusk</a> for working on this. <a href=\"https://twitter.com/hashtag/fsharp?src=hash&amp;ref_src=twsrc%5Etfw\">#fsharp</a> <a href=\"https://twitter.com/hashtag/toolingAdventures?src=hash&amp;ref_src=twsrc%5Etfw\">#toolingAdventures</a></p>&mdash; Krzysztof Cieślak (@k_cieslak) <a href=\"https://twitter.com/k_cieslak/status/1215239179472375808?ref_src=twsrc%5Etfw\">January 9, 2020</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nFantomas now has support for configuration files.\nThis means you can override the default settings using a JSON file.\nCheck out [the documentation](https://github.com/fsprojects/fantomas/blob/master/docs/Documentation.md#--config-path-to-file-or-folder) for more information.\n\n![Fantomas configuration via console](./nojaf-fantomas-configuration-console.png)\n\nIn this post I wish to answer a couple of small questions about the Fantomas configuration files.\n\n## JSON schema?\n\nWe've added a JSON schema definition to [http://schemastore.org](http://json.schemastore.org/fantomas).\nSo to get intellisense in most editors, you can add `$schema` to the configuration file.\n\n```json\n{\n  \"$schema\": \"http://json.schemastore.org/fantomas\",\n  \"KeepNewlineAfter\": false,\n  \"IndentOnTryWith\": true\n}\n```\n\n## Ionide integration?\n\nWhen using the latest Ionide version (4.4.3 and higher), your configuration will be picked up due to the integration of Fantomas via [FSAutocomplete](https://github.com/fsharp/FsAutoComplete/).\n\nIf something doesn't work out, you can enable verbose logging in VSCode.\n\n```json\n{\n  \"FSharp.verboseLogging\": true\n}\n```\n\nThen you can see warnings or errors in the output window.\nA fallback to the default configuration will happen when the parsing failed.\n\nFor example:\n\n![Warning in Ionide](./nojaf-fantomas-configuration-ionide-warning.png)\n\n### Room for improvement\n\nAt the time of writing, the configuration file is [not cached in FSAutocomplete](https://github.com/fsharp/FsAutoComplete/blob/52779750677d20b13ebcacc64a212cbc2a87fa7d/src/FsAutoComplete/FsAutoComplete.Lsp.fs#L982).\nIt could be kept in memory and updated when a configuration file changes.\nFeel free to submit a pull request to FSAutocomplete.\n\n## Why a beta version?\n\nThe main reason this is not an official release just yet is due to the fact that we want to be sure this works out for everyone.\nSo **please provide us feedback** if you encounter any problems whatsoever.\n\n## Rider support?\n\nIf the solution we have in mind appears to be working out nicely for Ionide users, I will submit a pull request to [JetBrains/fsharp-support](https://github.com/JetBrains/fsharp-support).\nIt might involved some more thinking to find the best approach, however I'm confident in collaboration with the team we can find a way.\n\nPlease keep in mind that Fantomas updates to Rider are linked to their release cadence.\n\n## Road to adoption?\n\nThis year my personal aspiration to **increase the adoption of Fantomas**.\nBoth in terms of users and people who submit pull requests.\n\nI have some plans and ideas for this. Unfortunately, I'm unable to share anything just yet.\nStay tuned for more!\n\nPlease o please report any issues you encounter using [our online tool](https://jindraivanek.gitlab.io/fantomas-ui/#?fantomas=preview).\nOr post any suggestions on [GitHub](https://github.com/fsprojects/fantomas/issues).\n\n> Fantomas can only improve when feedback is presented\n\nTake care everyone!\n\nCheers,\n\nnojaf\n\nPhoto by <a style=\"background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px\" href=\"https://unsplash.com/@krutainis?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Download free do whatever you want high-resolution photos from Ivars Krutainis\"><span style=\"display:inline-block;padding:2px 3px\"><svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white\" viewBox=\"0 0 32 32\"><title>unsplash-logo</title><path d=\"M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z\"></path></svg></span><span style=\"display:inline-block;padding:2px 3px\">Ivars Krutainis</span></a>\n",
  collection: "blog",
  data: {
    path: "2020/10/01/fantomas-configuration-file/",
    date: 2020-01-10T00:00:00.000Z,
    title: "Fantomas configuration file",
    tags: [ "open-source", "fsharp" ],
    cover: {
      src: "/@fs/home/nojaf/projects/blog/src/content/blog/fantomas-configuration-file/nojaf.com.fantomas-configuration.jpg?origWidth=1920&origHeight=700&origFormat=jpg",
      width: 1920,
      height: 700,
      format: "jpg",
      fsPath: "/home/nojaf/projects/blog/src/content/blog/fantomas-configuration-file/nojaf.com.fantomas-configuration.jpg",
    },
  },
  render: [AsyncFunction: render],
}

rendered by

   <p>
      <PostExcerpt
        post={Astro.props}
        words={50}
        addEllipsis={false}
      />
    </p>

My markdown does contain the following HTML:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">New version of <a href="https://twitter.com/IonideProject?ref_src=twsrc%5Etfw">@IonideProject</a> is out - it updates Fantomas support to the latest version including support for Fantomas configuration file (<a href="https://t.co/Pw3TqQ4kYe">https://t.co/Pw3TqQ4kYe</a>)<br><br>Props to <a href="https://twitter.com/verdonckflorian?ref_src=twsrc%5Etfw">@verdonckflorian</a> and <a href="https://twitter.com/ChetHusk?ref_src=twsrc%5Etfw">@ChetHusk</a> for working on this. <a href="https://twitter.com/hashtag/fsharp?src=hash&amp;ref_src=twsrc%5Etfw">#fsharp</a> <a href="https://twitter.com/hashtag/toolingAdventures?src=hash&amp;ref_src=twsrc%5Etfw">#toolingAdventures</a></p>&mdash; Krzysztof Cieślak (@k_cieslak) <a href="https://twitter.com/k_cieslak/status/1215239179472375808?ref_src=twsrc%5Etfw">January 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

which probably is the culprit. Updating <br><br> to <br/><br/> does not solve the problem. Can I somehow skip this HTML part from the PostExcerpt?

[igorskyflyer]

Hi @nojaf, thank you for opening the issue, upon initial inspection I can notice that this issue is related to the npm packages that this component uses for parsing/stripping Markdown/JSX, i.e.: mdast-util-from-markdown, mdast-util-mdx and micromark-extension-mdxjs.

Currently, it is not supported to skip parsing of HTML because it's necessary for plain text extraction but I will do my best to find a solution to this tomorrow, will keep you updated!

Edit: also, is this, nojaf/blog the repository that I can test against?

[nojaf]

Hi @igorskyflyer , thanks for the swift reply! Yes, you can use nojaf/blog, do note that I haven't pushed the updated package.json anywhere. Thanks a bunch for your time.

[igorskyflyer]

Hi @igorskyflyer , thanks for the swift reply! Yes, you can use nojaf/blog, do note that I haven't pushed the updated package.json anywhere. Thanks a bunch for your time.

Indeed, I'll upgrade from v2.1.0 to the latest version (thanks for mentioning it) then do some tests and get back to you.

[igorskyflyer]

Hey @nojaf, since no proper stack trace is shown when the exception occurs, I had to go the old-fashioned way 😎, I managed to hunt down the exception, it is thrown by the mdast-util-mdx-jsx (as assumed).

Old-fashioned search

But that's only one piece of the puzzle 🧩. I'll try and think of a solution tonight.

[igorskyflyer]

@nojaf, just found a workaround for your issue until this issue is resolved permanently.

While investigating and testing further, I have noticed that mdast-util-mdx-jsx actually works quite well but there are some edge cases, like yours.

In one of your Markdown files the issue is caused by this HTML block - the one you mentioned (formatted for readability):

"/src/content/blog/fantomas-configuration-file/index.md"

<blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">New version of <a href="https://twitter.com/IonideProject?ref_src=twsrc%5Etfw">@IonideProject</a> is out - it updates Fantomas support to the latest version including support for Fantomas configuration file (<a href="https://t.co/Pw3TqQ4kYe">https://t.co/Pw3TqQ4kYe</a>)<br><br>Props to <a href="https://twitter.com/verdonckflorian?ref_src=twsrc%5Etfw">@verdonckflorian</a> and <a href="https://twitter.com/ChetHusk?ref_src=twsrc%5Etfw">@ChetHusk</a> for working on this. <a href="https://twitter.com/hashtag/fsharp?src=hash&amp;ref_src=twsrc%5Etfw">#fsharp</a> <a href="https://twitter.com/hashtag/toolingAdventures?src=hash&amp;ref_src=twsrc%5Etfw">#toolingAdventures</a></p>&mdash; Krzysztof Cieślak (@k_cieslak) <a href="https://twitter.com/k_cieslak/status/1215239179472375808?ref_src=twsrc%5Etfw">January 9, 2020</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

It seems the mentioned library used for parsing and stripping of Markdown and JSX doesn't allow a <br> inside of a paragraph and <br>s that are not closed.

The code works after:

• swapping the <p> tag with the <div> tag,
• closing both <br> elements inside the <div>,

i.e.:

"/src/content/blog/fantomas-configuration-file/index.md"

<blockquote class="twitter-tweet">
    <div lang="en" dir="ltr">New version of <a href="https://twitter.com/IonideProject?ref_src=twsrc%5Etfw">@IonideProject</a> is out - it updates Fantomas support to the latest version including support for Fantomas configuration file (<a href="https://t.co/Pw3TqQ4kYe">https://t.co/Pw3TqQ4kYe</a>)<br /><br />Props to <a href="https://twitter.com/verdonckflorian?ref_src=twsrc%5Etfw">@verdonckflorian</a> and <a href="https://twitter.com/ChetHusk?ref_src=twsrc%5Etfw">@ChetHusk</a> for working on this. <a href="https://twitter.com/hashtag/fsharp?src=hash&amp;ref_src=twsrc%5Etfw">#fsharp</a> <a href="https://twitter.com/hashtag/toolingAdventures?src=hash&amp;ref_src=twsrc%5Etfw">#toolingAdventures</a></div>&mdash; Krzysztof Cieślak (@k_cieslak) <a href="https://twitter.com/k_cieslak/status/1215239179472375808?ref_src=twsrc%5Etfw">January 9, 2020</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

NOTE

Besides this file, all Markdown files work as expected, except "/src/content/blog/vscode-extension-with-fable/index.md", that one causes another parsing issue, around the code block at line 312 and other code blocks beyond it. Notice that you don't have those code block properly formatted for Markdown, they are rendered as plain text. 😞

[nojaf]

Hi @igorskyflyer! Thanks a bunch for this deep dive analysis! I updated the blockquote and made proper code blocks in the other post and it now all works! Feel free to close this issue is nothing actionable is left.

[igorskyflyer]

@nojaf, I am glad we made it work! 🎉🍾

If there are any issue(s) in the future, don't hesitate to open new issues here. 🙏🏻

P.S. thanks for the tip! 🙂