☰

Summernote to Markdown for Kanka

Adds bidirectional Markdown conversion to Kanka editors

  1. // ==UserScript==
  2. // @name         Summernote to Markdown for Kanka
  3. // @namespace    http://tampermonkey.net/
  4. // @license      MIT
  5. // @version      1
  6. // @description  Adds bidirectional Markdown conversion to Kanka editors
  7. // @author       Salvatos
  8. // @match        https://app.kanka.io/*
  9. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js
  11. // @grant        none
  12. // @run-at       document-end
  13. // ==/UserScript==
  14.  
  15. // Wait for Summernote to initialize
  16. $('.html-editor').on('summernote.init', function() {
  17.  
  18.     // Set up Showdown converter
  19.     // To customize your preferences, see https://github.com/showdownjs/showdown/wiki/Showdown-options
  20.     var converter = new showdown.Converter({
  21.         simpleLineBreaks: true,
  22.         simplifiedAutoLink: true,
  23.         strikethrough: true,
  24.         tables: true,
  25.         underline: true
  26.     });
  27.  
  28.     // Add HTML (add the "open" attribute to the <details> tag to have it expanded by default, i.e. <details open>)
  29.     var mdInput = `<details>
  30.     <summary class="text-center text-lg cursor-pointer">Markdown Editor <sup style="font-variant: all-small-caps;font-weight: 600">Experimental!</sup></summary>
  31.     <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>
  32.     <textarea id="markdown-input" name="markdown" rows="5" class="w-full html-editor"></textarea>
  33.     </details>`;
  34.     document.querySelector(".note-editor").insertAdjacentHTML("afterend", mdInput);
  35.     mdInput = document.getElementById("markdown-input");
  36.     document.querySelector(".note-editor").style.marginBottom = "0";
  37.  
  38.     // Populate MD on load
  39.     mdInput.value = converter.makeMarkdown(document.getElementById("entry").value);
  40.  
  41.     // Add change event to textarea
  42.     mdInput.addEventListener('input', function( e ) {
  43.         document.querySelector(".html-editor").value = document.querySelector(".note-editable").innerHTML = document.querySelector(".note-codable").value = converter.makeHtml(mdInput.value);
  44.     });
  45.  
  46.     // Add change event to Summernote (only need to watch the HTML version to keep it simple)
  47.     $('.html-editor').on('summernote.change.codeview', function(we, contents, $editable) {
  48.         mdInput.value = converter.makeMarkdown(contents);
  49.     });
  50. });