natemoo-re / astro-remote

Render remote HTML or Markdown content in Astro with full control over the output
MIT License
177 stars 9 forks source link

Adding spaces at specific places removes first characters. #7

Closed minht11 closed 7 months ago

minht11 commented 1 year ago

Having spaces and newlines or spaces at the end of the paragraph makes it so first characters are not rendered correctly. Given code like this:

---
import { Markdown } from "astro-remote";

// Working as expected
const c0 = `Most .`;

// 1 space
const c1 = `Most 
.`;

// 2 spaces
const c2 = `Most  
.`;

// Space at the end
const c3 = `Most . `;

const content = [c0, c1, c2, c3];
---
<div>
    {content.map((c) => <Markdown san>{c}</Markdown>)}
</div>

Result is

image

Reproduction

This is not issue with marked since it handles those use cases correctly

Adammatthiesen commented 7 months ago

Having spaces and newlines or spaces at the end of the paragraph makes it so first characters are not rendered correctly. Given code like this:

---
import { Markdown } from "astro-remote";

// Working as expected
const c0 = `Most .`;

// 1 space
const c1 = `Most 
.`;

// 2 spaces
const c2 = `Most  
.`;

// Space at the end
const c3 = `Most . `;

const content = [c0, c1, c2, c3];
---
<div>
  {content.map((c) => <Markdown san>{c}</Markdown>)}
</div>

Result is image

Reproduction

This is not issue with marked since it handles those use cases correctly

So the new PR about to be opened from the branch testing-issue-#7 will include resolutions to some of the issues your facing.

BUT this issue is not entirely related to astro-remote... aside from the small fix included above,

To preserve the formatting of your strings when they're rendered as Markdown through astro-remote, you might need to escape the trailing spaces and newlines. Here's how you could do that using the example from your Reproduction:

---
import { Markdown } from "astro-remote";

// Working as expected
const c0 = `Most .`;

// 1 space
const c1 = `Most \\
.`;

// 2 spaces
const c2 = `Most  \\
.`;

// Space at the end
const c3 = `Most . `;

const content = [c0, c1, c2, c3];
---
<div>
    {content.map((c) => <Markdown>{c}</Markdown>)}
</div>

testissue7

The Above resolved the issues after I updated a internal function

minht11 commented 7 months ago

Upgrading from 0.2.4 to 0.3.2 we got major performance issue in production, the only change was updating this dependency. It slowed the whole astro node instance, I don't see it in dev/preview mode/