Qownnotes: Ad highlight text feature

[sardinas9]

Dear Patrizio,

QOwnNotes is my main note-taking app, and I use it for pretty much everything. Thank you for keep developing such a wonderful app. I was wondering if is possible to add a highlight text feature as existing in other markdown apps as Typora that uses the following syntax in the editor to render text as highlighted in the preview:

==highlighted text==

Best,

Edzar

[pbek]

Than can already be done with the scripting engine.
See: http://docs.qownnotes.org/en/develop/scripting/README.html#notetomarkdownhtmlhook

There you could replace that kind of text (e.g. with a regular expression) ==(.+)== to <span class="highlighted">$1</span> (example: https://codeburst.io/an-introduction-to-regular-expressions-regex-in-javascript-1d3559e7ac9a) and inject a style to highlight the css class highlighted.

[pbek]

This script does some similar things: https://github.com/qownnotes/scripts/blob/master/export-checkboxes/export-checkboxes.qml

[sardinas9]

Dear Patrizio,

Thanks for pointing me to the resources. I have no experience with coding or scripting etc. but I will give it a try.

Best

[pbek]

It will feel great if you build your own script! Let me know if you run into any troubles!

[mleo2003]

I decided to give this a shot myself:

import QtQml 2.0
import QOwnNotesTypes 1.0

QtObject {
    function noteToMarkdownHtmlHook(note, html) {
        html = html.replace(/==(.+?)==/g, "<span style='background-color: #FFFF00;'>$1</span>");
        return html;
    }

    function init() {
        script.registerCustomAction("addHighlights", "Add Highlight Marks", "Add Highlights", "text-wrap");
    }

    function customActionInvoked(identifier) {
        switch (identifier) {
            case "addHighlights":
                // getting selected text from the note text edit
                var text = "==" + script.noteTextEditSelectedText() + "==";
                // put the result to the current cursor position in the note text edit
                script.noteTextEditWrite(text);
            break;
        }
    }
}

Only difficulty I had, was I had to use the markdown-it script as well to actually get this to render properly for previews. I was fine with this, but others might want to play around and see why that is (possibly doesn't like my inline HTML style, might need to be a class to be injected later).

[pbek]

Looking good. You could even make the highlighting color configurable. ;)
And you don't need to import QtQml and QOwnNotesTypes twice. (the same goes for the QtObject)

[pbek]

And you could create the script for https://github.com/qownnotes/scripts ;)

[mleo2003]

Heh, I accidentally copied the first part of the script 2 times. It has been fixed.

Making it configurable was next on my list, picking up QML with some of this. I was hoping to get it working with a standard install of QOwnNotes as well, to make everything work cleanly.

Submitting it to the scripts repo did seem like a cool thing to do as well...

[pbek]

I was hoping to get it working with a standard install of QOwnNotes as well

I think you may need to reorder your scripts in the script settings so that the markdown-it script is executed first (because it overwrites the whole preview html).

[mleo2003]

Well, I was able to find some time and get this all worked out: https://github.com/qownnotes/scripts/pull/36

I still can't get it to work on its own, without any other scripts installed/enabled. I have to have markdown-it installed for this to actually show, otherwise the == marks are just stripped from the resulting preview.

[pbek]

Strange, for me it works in an external browser if I export the preview of the note. But in the preview it doesn't show up. Is a background-color supported?

[mleo2003]

According to https://doc.qt.io/qt-5/richtext-html-subset.html it is supported in the rich text engine itself. Not sure if that applies to the preview or the edit panels (or both). I'd love to have a method to show the text as highlighted in the edit window as well (some custom markdown syntax hook or something), but the preview thing is also nice for just reviewing my notes when reading up on something I saw before.

[pbek]

It should apply for the preview widget (QTextBrowser).

[mleo2003]

Well, now that I think about it, it has to support it, as the markdown-it script doesn't change that aspect of rendering the styles at all, it just parses the raw text into markdown via different rules. The fact that it works with markdown-it at all proves the widgets are fine with it.

[pbek]

For me it doesn't seems to work with or without markdown-it. Really strange.

[mleo2003]

I did have some issues as well. Usually, after enabling/changing the settings for it, I had to close/reopen QON, and it would then show properly.

[ryliejamesthomas]

Here's the script I wrote (uses the HTML element <mark> instead of a class)

import QtQml 2.0
import QOwnNotesTypes 1.0

QtObject {
    property string highlightColour;

    property variant settingsVariables: [
        {
            "identifier": "highlightColour",
            "name": "Highlight Colour",
            "description": "Colour to highlight text with (name or #hex):",
            "type": "string",
            "default": "#FFFF00",
        }
    ];

    function noteToMarkdownHtmlHook(note, html) {
        var stylesheet = "mark {background-color:" + highlightColour + ";}";
        html = html.replace(/==(.+?)==/g, "<mark>$1</mark>");
        html = html.replace("</style>", stylesheet + "</style>");
        return html;
    }
}

[pbek]

@ryliejamesthomas, great! that's much better than a css class. it works great for me. Do you care to integrate that into https://github.com/qownnotes/scripts/blob/master/text-highlights/text-highlights.qml? (You might also want to increase the version number and add yourself as author in https://github.com/qownnotes/scripts/blob/master/text-highlights/info.json)

[ryliejamesthomas]

@pbek Sure!, I'll submit a pull request sometime this week :)

[pbek]

Super! :)

[ryliejamesthomas]

https://github.com/qownnotes/scripts/pull/43
Hope that's okay. I do pull requests so infrequently I forgot how things work.

[pbek]

Thank you, I already commented on it. ;)

[pbek]

Thank you!