Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Certain footnote formatting makes letters disappear #881

Closed
tao opened this issue Jun 2, 2022 · 2 comments
Closed

Certain footnote formatting makes letters disappear #881

tao opened this issue Jun 2, 2022 · 2 comments
Assignees
@colinodell
Labels
bug Something isn't working right fixed Fix has been implemented

Comments

@tao
Copy link

tao commented Jun 2, 2022

Version(s) affected

2.3.0

Description

We have a lot of longer footnotes on the website and sometimes depending on the format it makes some letters disappear from the front of paragraphs.

My sentence[^1][^2][^3][^4]

---

[^1]: This footnote uses tabs to indent the following paragraphs, you will notice the first 3 letters are missing:

	Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 

	Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 

[^2]: 
	This footnote uses tabs for all paragraphs.
    
	Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 
    
	Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 

[^3]: This footnote uses 4 spaces and it's working fine:

    Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 

    Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 


[^4]: 
    This footnote uses four spaces for indenting all paragraphs and it's fine.

    Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla. 

    Donec ac dolor blandit, laoreet est sed, ornare est. Nunc varius ligula sit amet leo varius tempus. Donec pharetra nisi at est pellentesque, non ultricies lorem fringilla.

You can see a screenshot of how it renders, you can see the first two footnotes are missing 3 letters in some places.

Screenshot 2022-06-02 at 14 22 47

How to reproduce

Here's a test file from my Laravel app:

<?php

namespace Tests\Unit;

use League\CommonMark\Extension\Footnote\FootnoteExtension;
use Tests\TestCase;
use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\MarkdownConverter;

class MarkdownFootnotesExtensionTest extends TestCase
{
    /** @test */
    public function multiline_footnotes_with_tabs_are_rendered()
    {
        // Configure the Environment with all the CommonMark parsers/renderers
        $environment = new Environment();
        $environment->addExtension(new CommonMarkCoreExtension());

        // Add this extension
        $environment->addExtension(new FootnoteExtension());

        // Instantiate the converter engine and start converting some Markdown!
        $converter = new MarkdownConverter($environment);
        $markdown = <<<MARKDOWN
Sentence[^1]

[^1]: This footnote uses tabs to indent the following paragraphs

	Donec ac dolor blandit, laoreet est sed, ornare est. 

	Donec ac dolor blandit, laoreet est sed, ornare est. 
MARKDOWN;

        $this->assertEquals(<<<HTML
<p>Sentence<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" role="doc-noteref">1</a></sup></p>
<div class="footnotes" role="doc-endnotes"><hr /><ol><li class="footnote" id="fn:1" role="doc-endnote"><p>This footnote uses tabs to indent the following paragraphs</p>
<p>Donec ac dolor blandit, laoreet est sed, ornare est.</p>
<p>Donec ac dolor blandit, laoreet est sed, ornare est.&nbsp;<a class="footnote-backref" rev="footnote" href="#fnref:1" role="doc-backlink">↩</a></p></li></ol></div>

HTML, (string) $converter->convert($markdown));
    }
}

And the output that I receive:

  --- Expected
  +++ Actual

  -<p>Donec ac dolor blandit, laoreet est sed, ornare est.</p>\n
  -<p>Donec ac dolor blandit, laoreet est sed, ornare est.&nbsp;<a class="footnote-backref" rev="footnote" href="#fnref:1" role="doc-backlink">↩</a></p></li></ol></div>\n

  +<p>ec ac dolor blandit, laoreet est sed, ornare est.</p>\n
  +<p>ec ac dolor blandit, laoreet est sed, ornare est.&nbsp;<a class="footnote-backref" rev="footnote" href="#fnref:1" role="doc-backlink">↩</a></p></li></ol></div>\n

Possible solution

Well it's expecting a tab to have 4 spaces, so it should be able to optionally detect the tab character? By the time the code gets to the FootnoteRenderer class it's already been truncated... so it must be in the FootnoteStartParser class when it's trying to parse the block.

Additional context

No response

Did this project help you today? Did it make you happy in any way?

I love it but I wish there were more tutorials on how to make custom extensions! It looks super complicated... 🙈
@colinodell
Copy link
Member

Thanks so much for the detailed report! Let me dig into this and I'll try to put a fix together :)

@colinodell colinodell self-assigned this Jun 3, 2022
@colinodell colinodell added the bug Something isn't working right label Jun 3, 2022
@colinodell colinodell mentioned this issue Jun 3, 2022
Merged
@close-label close-label bot added the fixed Fix has been implemented label Jun 3, 2022
@colinodell
Copy link
Member

Your hunch was correct! We weren't expanding the tab to 4 spaces when handing the indentation. This is now fixed in versions 2.3.2 and 2.2.5. Thanks again for the report!

I love it but I wish there were more tutorials on how to make custom extensions! It looks super complicated... 🙈

It's easier than it looks, but I do agree the docs could use some work... especially some visual diagrams explaining what's happening under-the-hood. I'll try to carve out some time to spruce up those docs. In the mean time, if you want to try writing your own, I highly recommend finding an extension/parser/renderer that closely matches what you're looking for and then experiment with tweaking it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@colinodell colinodell

Labels
bug Something isn't working right fixed Fix has been implemented
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@colinodell @tao