0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00

🐛 Fixed lack of space in excerpt generated from paragraphs

closes #10531

- Adds space when encountering closing </p> and <br> tags
- The mobiledoc-to-html conversion produces these tags in this exact
syntax, so there is no need to account for more cases like additional spaces or alternative syntax like  <br />
- Added test cases that cover spacing use-casei
- Changed some existing tests to contain more close-to-real-world markup
- The downside of this approach is generating multiple spaces in case there are empty paragraphs in the markup. The same concern is true for current "new line" substitution:
> excerpt.replace(/(\r\n|\n|\r)+/gm, ' ')
but it never has been a concern as in real world when multiple spaces are used inside of the `<p>` tag they are rendered as single space.
This commit is contained in:
Nazar Gargol 2019-08-26 17:01:20 +02:00 committed by Naz Gargol
parent 9ea2f5b445
commit 16c3785b52
3 changed files with 60 additions and 6 deletions

View file

@ -5,6 +5,10 @@ function getExcerpt(html, truncateOptions) {
// Strip inline and bottom footnotes
var excerpt = html.replace(/<a href="#fn.*?rel="footnote">.*?<\/a>/gi, '');
excerpt = excerpt.replace(/<div class="footnotes"><ol>.*?<\/ol><\/div>/, '');
// Make sure to have space between paragraphs and new lines
excerpt = excerpt.replace(/(<\/p>|<br>)/gi, ' ');
// Strip other html
excerpt = excerpt.replace(/<\/?[^>]+>/gi, '');
excerpt = excerpt.replace(/(\r\n|\n|\r)+/gm, ' ');

View file

@ -5,9 +5,9 @@ describe('getExcerpt', function () {
it('should return html excerpt with no html', function () {
var html = '<p>There are <br />10<br> types<br/> of people in <img src="a">the world:' +
'<img src=b alt="c"> those who <img src="@" onclick="javascript:alert(\'hello\');">' +
'understand trinary</p>, those who don\'t <div style="" class=~/\'-,._?!|#>and' +
'understand trinary,</p> those who don\'t <div style="" class=~/\'-,._?!|#>and' +
'< test > those<<< test >>> who mistake it &lt;for&gt; binary.',
expected = 'There are 10 types of people in the world: those who understand trinary, those who ' +
expected = 'There are 10 types of people in the world: those who understand trinary, those who ' +
'don\'t and those>> who mistake it &lt;for&gt; binary.';
getExcerpt(html, {}).should.equal(expected);
@ -61,9 +61,9 @@ describe('getExcerpt', function () {
function () {
var html = '<p>There are <br />10<br> types<br/> of people in <img src="a">the world:' +
'<img src=b alt="c"> those who <img src="@" onclick="javascript:alert(\'hello\');">' +
'understand trinary</p>, those who don\'t <div style="" class=~/\'-,._?!|#>and' +
'understand trinary,</p> those who don\'t <div style="" class=~/\'-,._?!|#>and' +
'< test > those<<< test >>> who mistake it &lt;for&gt; binary.',
expected = 'There are 10 types of people in the world: those who understand trinary, those who ' +
expected = 'There are 10 types of people in the world: those who understand trinary, those who ' +
'don\'t and those>> who mistake it &lt;for&gt; binary.';
getExcerpt(html).should.equal(expected);

View file

@ -29,9 +29,9 @@ describe('{{excerpt}} Helper', function () {
it('does not output HTML', function () {
var html = '<p>There are <br />10<br> types<br/> of people in <img src="a">the world:' +
'<img src=b alt="c"> those who <img src="@" onclick="javascript:alert(\'hello\');">' +
'understand trinary</p>, those who don\'t <div style="" class=~/\'-,._?!|#>and' +
'understand trinary,</p> those who don\'t <div style="" class=~/\'-,._?!|#>and' +
'< test > those<<< test >>> who mistake it &lt;for&gt; binary.',
expected = 'There are 10 types of people in the world: those who understand trinary, those who ' +
expected = 'There are 10 types of people in the world: those who understand trinary, those who ' +
'don\'t and those>> who mistake it &lt;for&gt; binary.',
rendered = helpers.excerpt.call({
html: html,
@ -182,4 +182,54 @@ describe('{{excerpt}} Helper', function () {
should.exist(rendered);
rendered.string.should.equal(expected);
});
it('puts additional space after closing paragraph', function () {
var html = '<p>Testing.</p><p>Space before this text.</p><p>And this as well!</p>',
expected = 'Testing. Space before this text. And this as well!',
rendered = (
helpers.excerpt.call(
{
html: html,
custom_excerpt: ''
}
)
);
should.exist(rendered);
rendered.string.should.equal(expected);
});
it('puts additional space instead of <br> tag', function () {
var html = '<p>Testing.<br>Space before this text.<br>And this as well!</p>',
expected = 'Testing. Space before this text. And this as well!',
rendered = (
helpers.excerpt.call(
{
html: html,
custom_excerpt: ''
}
)
);
should.exist(rendered);
rendered.string.should.equal(expected);
});
it('puts additional space between paragraph in markup generated by Ghost', function () {
var html = '<p>put space in excerpt.</p><p></p><p>before this paragraph.</p>' +
'<!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="/content/images/2019/08/photo.jpg" class="kg-image"></figure><!--kg-card-end: image-->' +
'<p>and skip the image.</p><p></p>',
expected = 'put space in excerpt. before this paragraph. and skip the image.',
rendered = (
helpers.excerpt.call(
{
html: html,
custom_excerpt: ''
}
)
);
should.exist(rendered);
rendered.string.should.equal(expected);
});
});