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.

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

Footnotes in preview window #937

Closed
bcmadsen opened this issue Apr 6, 2022 · 3 comments
Closed

Footnotes in preview window #937

bcmadsen opened this issue Apr 6, 2022 · 3 comments
Assignees
Labels

Comments

@bcmadsen
Copy link

bcmadsen commented Apr 6, 2022

Footnotes are working fine when I generate my document as a PDF, but when I'm editing, they misbehave.

image

Now click on the preview pane's little superscript-1, and you get this:

image

… and yes, I've tried clearing my cookies. That doesn't affect this result.

Thoughts?

@RickStrahl RickStrahl self-assigned this Apr 6, 2022
@RickStrahl RickStrahl added the bug label Apr 6, 2022
@RickStrahl
Copy link
Owner

Hmm... this looks like it could be a regression for handling of any # hash links in a page. Looks like the browser is navigating natively (which doesn't work because it's a local file not a URL) instead of passing the link to MM to process. MM intercepts all links and hash links in MM are handled by attempting to jump to the appropriate ID.

I'll take a look.

@RickStrahl
Copy link
Owner

So I took a look at this and it seems this is happening due to the way the footnote links are formatted in combination with a local base path in the page.

MM creates pages with a <base href={$docPath}" /> header to allow for related resources to work out of an application base folder - ie. you have a root site that's not in the current folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="file:///C:/temp/"/>

This allows projects - or even individual pages - to explicitly define a site root path from which site and page relative links work. MM by default uses the currently rendered document's folder which is in the same folder as the underlying document so all resources can be found.

So far so good. Here's where it gets weird: The following 'normal' links work just fine navigating in the document for things like #header1 and #header2:

<ul>
<li><a href="[#header2](#header2)">Header 2</a></li>
<li><a href="[#header3](#header3)">Header 3</a></li>
</ul>
<h2 id="header2">Header2</h2>
<p>Header 2 text goes here</p>
<h2 id="header3">Header3</h2>
<p>Header 3 text goes here</p>

Footnote links use the same link and Id syntax, but the naming of those links is #fn:1, #fn:2 and those links fail.

<a id="fnref:1" href="#fn:1" class="footnote-ref"><sup>1</sup></a>. 
More text here. This is <a id="fnref:2" href="#fn:2" class="footnote-ref"><sup>2</sup></a>

...

<hr />
<ol>
<li id="fn:1">
<p>This is a footnote<a href="#fnref:1" class="footnote-back-ref">&#8617;</a></p>
</li>
<li id="fn:2">
<p>This is #2<a href="#fnref:2" class="footnote-back-ref">&#8617;</a></p>
</li>
</ol>

Exact same logic, but the browser apparently treats the second set of links differently.

All of these URLs resolve to the base URL plus the hash:

file:///c:/temp/#header1
file:///c:/temp/#fn:1

The former works, the latter does not.

This only fails in the previewer because we're using local files. A rendered page on a server will work because it won't be a file link and likely you also won't have the <base> tag there to adjust the path. IOW, while it's not working correctly in the previewer, it does work correctly when exported to PDF or HTML or used on a Web site.

I'm not sure how we can fix this - currently MM passes through hash links and just lets them process in the browser. But I can try to navigate the browser. The bigger issue is that with headers it's possible to navigate the editor fairly easily, which is really what we want. Navigate the editor and then have the previewer re-render at the new browser position. This doesn't work for footnotes because they are not explicit Markdown elements the parser tracks (it's an addin).

So even the solutions I can possible work, they're not solving the entire problem either way...

@RickStrahl
Copy link
Owner

So looks like the issue here is that the id name needs to be escaped in the query code. MM explicitly navigates hashes in the page (because of base path fixups discusses above) and the following code using CSS.escape() fixes the issue.

image

With this in place the Footnote links in the Previewer can now navigate the footnote links.

The next - and more difficult problem is that we can't jump to the exact link in the editor. There's no line number that can match the HTML to the editor at this point so the synced scroll (if enabled) will jump to the end of the doc or the last element that has a line number.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants