flatnotes
flatnotes copied to clipboard
dullage
Header Tagging & Table of Contents
Great work!
Suggestion: add a button to insert "Table of content" at the top of the note for the larger notes where you have created many different headers.
Thanks! I like this idea, it's something I would use. I'll keep this open as a suggestion for something to be worked on in the future.
If anyone needs an immediate workaround for this, you can just use HTML for your titles when editing to set a custom id and then you can link to that header using markdown links:
header: <h1 id=section-one>Header for Section One</h1>
link: [link to section one](#section-one)
Note that you can't have spaces on your id unless you also use html for the link:
header: <h1 id="header with space">Header</h1>
link: <a href="#header with space">link to header</a> (markdown doesnt accept spaces in links)
I tried playing around with the source code to see if I could get a workaround for this, and I came up with this javascript snippet:
function replacer(match, p1, p2, p3, offset, string) {
var sanitized_header = p2.toLowerCase().replace(/\s/g, '-').replace(/[^a-z0-9-]*/g, '');
return '<'+p1+' id='+sanitized_header+'>'+p2+'<'+p3+'>';
}
var viewer = document.getElementsByClassName('note-viewer')[0];
viewer.innerHTML = viewer.innerHTML.replace(/<(h[1-6][^<]*)>(.*)<(\/h[1-6])>/g, replacer);
which uses regex to add an id equivalent to the sanitized title to all headers in the note (A He&ading 3 -> a-heading-3).
As it stands this isn't a complete solution because if someone has HTML code showcased for instance in a codeblock on their note then that will also be affected.
I'm not familiar with ToastUI and I don't know if it can support custom parsing from markdown to html, so this is the hacky solution that i came to.
Running the snippet in the console while flatnotes is running will work correctly and give the proper id to headers, however i'm not familiar enough with Vue to integrate this script with the application when the viewer is up. Any direction here would be helpful so I can work on excluding code blocks in the regex
If the article is lengthy, placing it at the top may pose inconvenience. Consider adding a 'title' function in the sidebar for widescreen displays. Additionally, support buttons for 'scroll to top,' 'edit,' and 'save.
like this：
