GFork

Hello! Love this script but it doesn't on Chrome (I'm on Vivaldi).

The script likely isn't working in Vivaldi because the summernote.init event may fire before your Tampermonkey script executes, or Vivaldi's timing differs from Firefox.

You can make it work on Chrome with following check at the end tho:

// ==UserScript==
// @name         Summernote to Markdown for Kanka
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      1.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==

function initMarkdownEditor() {
    // Set up Showdown converter
    var converter = new showdown.Converter({
        simpleLineBreaks: true,
        simplifiedAutoLink: true,
        strikethrough: true,
        tables: true,
        underline: true
    });

    // Add HTML
    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
    $('.html-editor').on('summernote.change.codeview', function(we, contents, $editable) {
        mdInput.value = converter.makeMarkdown(contents);
    });
}

// Try to initialize immediately if Summernote already loaded
if ($('.html-editor').data('summernote')) {
    initMarkdownEditor();
} else {
    // Otherwise wait for init event
    $('.html-editor').on('summernote.init', initMarkdownEditor);
}

Maybe you'll find that helpful, cheers!