michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix(component): align starting position in Markdown slot (#2631)

Browse source 
* Fix: align markdown starting position in each line

* Chore: add testcase for aligning starting position in each line

* Chore: update the test case on astro-markdown custom language

* Update: remove trimmed only startWith trimmed space
This commit is contained in:
Shinobu Hayashi 2022-02-24 08:08:17 +09:00 committed by GitHub
parent 1fba0c4c72
commit fe31eca414
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/astro/components/Markdown.astro
View file

@ -3,11 +3,17 @@ export interface Props {
content?: string;
}
const dedent = (str: string) =>
str
const dedent = (str: string) => {
const _str = str.split('\n').filter(s => s.trimStart().length > 0);
if (_str.length === 0) {
return str.trimStart();
}
const trimmedSpace = _str[0].replace(_str[0].trimStart(), '');
return str
.split('\n')
.map((ln) => ln.trimStart())
.map((ln) => ln.startsWith(trimmedSpace) ? ln.replace(trimmedSpace, '') : ln)
.join('\n');
}
// Internal props that should not be part of the external interface.
interface InternalProps extends Props {

6
packages/astro/test/astro-markdown-shiki.test.js
View file

@ -118,9 +118,9 @@ describe('Astro Markdown Shiki', () => {
const $ = cheerio.load(html);
const segments = $('.line').get(6).children;
expect(segments).to.have.lengthOf(2);
expect(segments[0].attribs.style).to.be.equal('color: #79C0FF');
expect(segments[1].attribs.style).to.be.equal('color: #C9D1D9');
expect(segments).to.have.lengthOf(3);
expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9');
expect(segments[1].attribs.style).to.be.equal('color: #79C0FF');
});
});

17
packages/astro/test/astro-markdown.test.js
View file

@ -146,4 +146,21 @@ describe('Astro Markdown', () => {
// render html without error
expect(html).to.be.ok;
});
it('can render nested list correctly', async () => {
const html = await fixture.readFile('/nested-list/index.html');
const $ = cheerio.load(html);
/**
* - list
* - list
*/
expect($('#target > ul > li').children()).to.have.lengthOf(1);
expect($('#target > ul > li > ul > li').text()).to.equal('nested list');
/**
* 1. Hello
* 1. nested hello
*/
expect($('#target > ol > li').children()).to.have.lengthOf(1);
expect($('#target > ol > li > ol > li').text()).to.equal('nested hello');
});
});

32
packages/astro/test/fixtures/astro-markdown/src/pages/nested-list.astro vendored Normal file
View file

@ -0,0 +1,32 @@
---
// Component imports and setup JavaScript go here!
import { Markdown } from 'astro/components';
const content = `
- list 1
- list 2
- list
- - list
1. Hello
1. Hello`
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Welcome to Astro</title>
</head>
<body>
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
<div id="target">
<Markdown>
- list
- nested list
1. Hello
1. nested hello
</Markdown>
</div>
</body>
</html>