Create a hook before preview html is generated

[MilanRusev]

Hi,

I found QOwnNotes just recently and I'm already loving it. However there are a few things in the preview that bug me like some other people, namely:

Unable to create list without blank line #554
Optionally render carriage return as new line #555

I understand it'll be hard to implement the above features because hoedown doesn't support them and it's not being actively developed anymore.

But we could implement them if we could make adjustments to the note text before passing it to the parser. For that we'll need a new hook:

function beforeNoteToMarkdownHtmlHook(note); //returns the modified NoteApi object/note text

which modifies and returns a modified note/note text prior to passing it to the markdown parser (which will be used only for the markdown parser - the original note remains unchanged). noteToMarkdownHtmlHook(note, html) won't do because the html is already generated and it'll be much harder to parse it than parsing the note and adding trailing spaces and empty lines where needed.

[MilanRusev]

Actually it will be even better if the needed changes for #554 and #555 are implemented in the C++ code:

Prior to sending the note text to the markdown parser:

• For Unable to create list without blank line #554:
  • add an empty line (if not present) before the start of each list (also table, code block)
• For Optionally render carriage return as new line #555:
  • add two spaces (if not present) after each line which is not inside a list item, heading, code block, table

The changes will be only for the markdown parser, the original note remains unchanged. Of course both features should be optionally turned on in the settings.

[pbek]

Thank you for your suggestion, but implementing your 2nd comment would be very difficult, regardless of the language (C++ or JavaScript). Are you willing to implement those two cases?

[MilanRusev]

I created a simple script that changes the markdown renderer to markdown-it. It's easier than parsing the note manually.

I tried to preserve the current QOwnNotes functionality (keep the styles, preserve file:// links etc). By the way it may be useful for other people as well - is there a way to share it/add it to the script repository? Here is the code:

import QtQml 2.0
import QOwnNotesTypes 1.0

import "markdown-it.js" as MarkdownIt

QtObject {
	property variant md;
	
	property string options;

	property variant settingsVariables: [
		{
			"identifier": "options",
			"name": "markdown-it options",
			"description": "For default values see https://github.com/markdown-it/markdown-it/blob/master/lib/presets",
			"type": "text",
			"default":
"{"+"\n"+
"    //html:         false,        // Enable HTML tags in source"+"\n"+
"    //xhtmlOut:     false,        // Use '/' to close single tags (<br />)"+"\n"+
"    //breaks:       false,        // Convert '\\n' in paragraphs into <br>"+"\n"+
"    //langPrefix:   'language-',  // CSS language prefix for fenced blocks"+"\n"+
"    //linkify:      false,        // autoconvert URL-like texts to links"+"\n"+
""+"\n"+
"    // Enable some language-neutral replacements + quotes beautification"+"\n"+
"    //typographer:  false,"+"\n"+
""+"\n"+
"    // Double + single quotes replacement pairs, when typographer enabled,"+"\n"+
"    // and smartquotes on. Could be either a String or an Array."+"\n"+
"    //"+"\n"+
"    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,"+"\n"+
"    // and ['«\\xA0', '\\xA0»', '‹\\xA0', '\\xA0›'] for French (including nbsp)."+"\n"+
"    quotes: '\\u201c\\u201d\\u2018\\u2019', /* “”‘’ */"+"\n"+
""+"\n"+
"    // Highlighter function. Should return escaped HTML,"+"\n"+
"    // or '' if the source string is not changed and should be escaped externaly."+"\n"+
"    // If result starts with <pre... internal wrapper is skipped."+"\n"+
"    //"+"\n"+
"    // function (/*str, lang*/) { return ''; }"+"\n"+
"    //"+"\n"+
"    //highlight: null,"+"\n"+
""+"\n"+
"    //maxNesting:   100            // Internal protection, recursion limit"+"\n"+
"}"
		}
	];
	
    function init() {
		
		var optionsObj = eval("("+options+")");
		md = new MarkdownIt.markdownit(optionsObj);
		
		//Allow file:// url scheme
		var validateLinkOrig = md.validateLink;
		var GOOD_PROTO_RE = /^(file):/;
		md.validateLink = function(url)
		{
			var str = url.trim().toLowerCase();
			return GOOD_PROTO_RE.test(str) ? true : validateLinkOrig(url);
		}
	}
	
    function noteToMarkdownHtmlHook(note, html) {
		
		var mdHtml = md.render(note.noteText);
		
		//Insert root folder in attachments and media relative urls
		var path = script.currentNoteFolderPath();
		if (script.platformIsWindows()) {
			path = "/" + path;
		}
		mdHtml = mdHtml.replace(new RegExp("href=\"file://attachments/", "gi"), "href=\"file://" + path + "/attachments/");
		mdHtml = mdHtml.replace(new RegExp("src=\"file://media/", "gi"), "src=\"file://" + path + "/media/");
		
		//Apply original styles
		var head = html.match(new RegExp("<head>(?:.|\n)*?</head>"));
		mdHtml = "<html>"+head[0]+"<body>"+mdHtml+"</body></html>";
		
		return mdHtml;
    }
}

[pbek]

This looks like a great solution, it indeed would be really great if you make a pull request to https://github.com/qownnotes/scripts! You can also add the markdown-it.js, like it is done in https://github.com/qownnotes/scripts/tree/master/selected-markdown-to-bbcode.

[Weej1]

@MilanRusev I'm trying to get your markdown-it parser/rendered script working but it doesn't seem to be activating at all - I'm trying to render a single carriage return as a new line (as opposed to markdown's double CR = new line). I'm not sure how to PM/DM etc you so I'm using this ticket in the hopes you see this! The issue can be found in #959 .