☰

Summernote to Markdown for Kanka

Adds bidirectional Markdown conversion to Kanka editors

// ==UserScript==
// @name         Summernote to Markdown for Kanka
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      1
// @description  Adds bidirectional Markdown conversion to Kanka editors
// @author       Salvatos
// @match        https://app.kanka.io/*
// @icon         https://www.google.com/s2/favicons?domain=kanka.io
// @require      https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js
// @grant        none
// @run-at       document-end
// ==/UserScript==

// Wait for Summernote to initialize
$('.html-editor').on('summernote.init', function() {

    // Set up Showdown converter
    // To customize your preferences, see https://github.com/showdownjs/showdown/wiki/Showdown-options
    var converter = new showdown.Converter({
        simpleLineBreaks: true,
        simplifiedAutoLink: true,
        strikethrough: true,
        tables: true,
        underline: true
    });

    // Add HTML (add the "open" attribute to the <details> tag to have it expanded by default, i.e. <details open>)
    var mdInput = `<details>
    <summary class="text-center text-lg cursor-pointer">Markdown Editor <sup style="font-variant: all-small-caps;font-weight: 600">Experimental!</sup></summary>
    <p>The following field converts the Summernote entry above to Markdown in real time. Changes made to it are also reflected back to the editor.</p>
    <textarea id="markdown-input" name="markdown" rows="5" class="w-full html-editor"></textarea>
    </details>`;
    document.querySelector(".note-editor").insertAdjacentHTML("afterend", mdInput);
    mdInput = document.getElementById("markdown-input");
    document.querySelector(".note-editor").style.marginBottom = "0";

    // Populate MD on load
    mdInput.value = converter.makeMarkdown(document.getElementById("entry").value);

    // Add change event to textarea
    mdInput.addEventListener('input', function( e ) {
        document.querySelector(".html-editor").value = document.querySelector(".note-editable").innerHTML = document.querySelector(".note-codable").value = converter.makeHtml(mdInput.value);
    });

    // Add change event to Summernote (only need to watch the HTML version to keep it simple)
    $('.html-editor').on('summernote.change.codeview', function(we, contents, $editable) {
        mdInput.value = converter.makeMarkdown(contents);
    });
});