☰

Kanka Summernote HTML Beautifier

Automatically "beautifies" the HTML in Summernote's code view to make it more legible

  1. // ==UserScript==
  2. // @name         Kanka Summernote HTML Beautifier
  3. // @namespace    http://tampermonkey.net/
  4. // @license      MIT
  5. // @version      5
  6. // @description  Automatically "beautifies" the HTML in Summernote's code view to make it more legible
  7. // @author       Salvatos
  8. // @match        https://app.kanka.io/*
  9. // @match        https://marketplace.kanka.io/*
  10. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  11. // @require      https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.js
  12. // @grant        GM_addStyle
  13. // @run-at       document-end
  14. // ==/UserScript==
  15.  
  16. // Wait for Summernote to initialize
  17. $('.html-editor').on('summernote.init', function() {
  18.     GM_addStyle(`
  19.     .html-editor + div:not(.codeview) .cleanUpButton {
  20.     	display: none;
  21.     }
  22.     `);
  23.  
  24.     // Locate toolbar
  25.     const toolbar = document.getElementsByClassName('note-toolbar')[0];
  26.  
  27.     // Create button
  28.     var cleanUpButton = `
  29.     <div class="note-btn-group btn-group note-extensions cleanUpButton">
  30.         <button type="button" class="note-btn btn btn-default btn-sm note-codeview-keep" tabindex="-1" title="Clean up HTML">
  31.             <i class="fas fa-broom" aria-hidden="true" aria-label="Clean up HTML"></i>
  32.         </button>
  33.     </div>`;
  34.     toolbar.insertAdjacentHTML("beforeend", cleanUpButton);
  35.  
  36.      // Add click event to button
  37.     cleanUpButton = document.getElementsByClassName('cleanUpButton')[0];
  38.     cleanUpButton.addEventListener('click', beautifyCodeView);
  39.  
  40.     // Add event to code view toggle
  41.     document.getElementsByClassName('btn-codeview')[0].addEventListener('click', beautifyCodeView);
  42. });
  43.  
  44. function beautifyCodeView() {
  45.         // Run only when in code view
  46.         if ($('.html-editor + div').hasClass('codeview')) {
  47.             // Beautify
  48.             $('.html-editor + div').find('.note-codable').val(html_beautify($('.html-editor + div').find('.note-codable').val(), {
  49.                 "indent_size": "2",
  50.                 "indent_char": " ",
  51.                 "max_preserve_newlines": "-1",
  52.                 "preserve_newlines": false,
  53.                 "keep_array_indentation": false,
  54.                 "break_chained_methods": false,
  55.                 "indent_scripts": "normal",
  56.                 "brace_style": "collapse",
  57.                 "space_before_conditional": false,
  58.                 "unescape_strings": false,
  59.                 "jslint_happy": false,
  60.                 "end_with_newline": false,
  61.                 "wrap_line_length": "0",
  62.                 "indent_inner_html": false,
  63.                 "comma_first": false,
  64.                 "e4x": false,
  65.                 "indent_empty_lines": false
  66.             }));
  67.         }
  68.     }