☰

Golang Playground ACE editor

Make golang play editor usable. With format and theme support.

  1. // ==UserScript==
  2. // @name         Golang Playground ACE editor
  3. // @namespace    http://masoudd.ir/
  4. // @version      0.5.1
  5. // @description  Make golang play editor usable. With format and theme support.
  6. // @author       masoud_dot_naservand on google's email
  7. // @match        https://play.golang.org/
  8. // @match        https://play.golang.org/p/*
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @license      GPL-3.0
  13. // @supportURL   https://codeberg.org/masoudd/Golang_Playground_ACE_editor
  14. // @copyright    2020, masoudd (https://greatest.deepsurf.us/en/users/506611-masoudd)
  15. // @copyright    2018, Teeed (https://openuserjs.org/users/Teeed)
  16. // ==/UserScript==
  17.  
  18. /*
  19.     0.5.1:
  20.         - Fix the things play.golang.org broke
  21.         
  22.     0.5:
  23.         - Devided themes to Bright and Dark groups
  24.         - Changed default theme to solarized_light so it looks like the default go playground theme
  25.  
  26.     0.4:
  27.         - Updated the ace.js from 1.3.3 to 1.4.9
  28.         - Format button now functions
  29.         - Added theme support
  30.  
  31.     0.3:
  32.         Also applies to code posted on playground.
  33.  
  34.     0.2:
  35.         Ctrl + Enter executes script.
  36. */
  37.  
  38. (function() {
  39.     'use strict';
  40.     var themes = {"Bright": ["chrome", "clouds", "crimson_editor", "dawn", "dreamweaver",
  41.                              "eclipse", "github", "iplastic", "solarized_light", "textmate",
  42.                              "tomorrow", "xcode", "kuroir", "katzenmilch", "sqlserver"],
  43.  
  44.                   "Dark"  : ["ambiance", "chaos", "clouds_midnight", "cobalt","dracula",
  45.                              "gob", "gruvbox", "idle_fingers", "kr_theme", "merbivore",
  46.                              "merbivore_soft", "mono_industrial", "monokai", "nord_dark",
  47.                              "pastel_on_dark", "solarized_dark", "terminal", "tomorrow_night",
  48.                              "tomorrow_night_blue", "tomorrow_night_bright",
  49.                              "tomorrow_night_eighties","twilight", "vibrant_ink"],
  50.                  };
  51.     var scrpt = document.createElement('script');
  52.     scrpt.src = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.min.js'
  53.     scrpt.type = 'text/javascript';
  54.     scrpt.async = true;
  55.     scrpt.onload = function() {
  56.         // need to set basePath because ace.js can't find it in it's own if we are
  57.         // loading it as ace.min.js
  58.         ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9");
  59.         var wrap = document.getElementById("wrap")
  60.  
  61.         var linedTextarea = document.querySelector(".linedtextarea");
  62.         linedTextarea.style.display = 'none'
  63.  
  64.         var codeArea = document.getElementById("code");
  65.         var currentCode = codeArea.value;
  66.  
  67.         var editorDiv = document.createElement('div')
  68.         editorDiv.id = "newNiceEditorDiv"
  69.         editorDiv.style.width = '100%'
  70.         editorDiv.style.height = '100%'
  71.         wrap.appendChild(editorDiv);
  72.  
  73.         var editor = ace.edit("newNiceEditorDiv");
  74.         editor.session.setValue(currentCode);
  75.         editor.session.on('change', function(){
  76.             codeArea.value = editor.session.getValue();
  77.         });
  78.  
  79.         // need to intercept the call to .val on the textArea
  80.         // in ajax callback for format button to update the contents
  81.         // of editor by the formatted code returned
  82.         const originalVal = $.fn.val;
  83.         $.fn.val = function(x) {
  84.             if (this[0].id === 'code' && x) {
  85.                 editor.session.setValue(x);
  86.             }
  87.             return originalVal.apply(this, arguments);
  88.         };
  89.  
  90.         var savedTheme = GM_getValue('theme', false);
  91.         if (!savedTheme) {
  92.             savedTheme = 'solarized_light';
  93.             GM_setValue('theme', savedTheme);
  94.         }
  95.         var themeLabel = document.createElement('label');
  96.         themeLabel.setAttribute('title', 'Theme');
  97.         var select = document.createElement('select');
  98.         select.setAttribute('id', 'themeSelect');
  99.         for (var group in themes) {
  100.             var optGroup = document.createElement('optgroup');
  101.             optGroup.setAttribute('label', group);
  102.             themes[group].forEach(function(theme) {
  103.                 var opt = document.createElement('option');
  104.                 opt.setAttribute('value', theme);
  105.                 if (theme === savedTheme) {
  106.                     opt.setAttribute('selected', 'true');
  107.                 }
  108.                 opt.text = theme.replace(/_/g, ' ');
  109.                 optGroup.appendChild(opt);
  110.             });
  111.             select.appendChild(optGroup);
  112.         }
  113.  
  114.         themeLabel.appendChild(select);
  115.         document.getElementById('aboutButton').before(themeLabel);
  116.         select.addEventListener('change', function(e) {
  117.             editor.setTheme(`ace/theme/${this.value}`);
  118.             GM_setValue('theme', this.value);
  119.         });
  120.         // observe the editorDiv element for class attribute change, to catch
  121.         // when the new themes apply and set the color and background-color
  122.         // for #output
  123.         const observeConf = {
  124.             attributes: true,
  125.             attributeFilter: ['class'],
  126.         };
  127.         // the closure
  128.         const observer = new MutationObserver(function(mlist, obs) {
  129.             var color = '';
  130.             var backgroundColor = '';
  131.             const output = document.getElementById('output');
  132.             return function(mlist, obs) {
  133.                 var cs = getComputedStyle(editorDiv);
  134.                 if (color !== cs.color || backgroundColor !== cs.backgroundColor) {
  135.                     color = cs.color;
  136.                     backgroundColor = cs.backgroundColor;
  137.                     output.setAttribute('style', `color: ${color}; background-color: ${backgroundColor}`);
  138.                 }
  139.             }
  140.         }());
  141.         observer.observe(editorDiv, observeConf);
  142.  
  143.  
  144.  
  145.         editor.setTheme(`ace/theme/${savedTheme}`);
  146.         editor.session.setMode("ace/mode/golang");
  147.  
  148.         editorDiv.style.fontSize='16px';
  149.  
  150.         function doSubmit() {
  151.             document.getElementById('run').click()
  152.         }
  153.  
  154.         window.addEventListener("keypress", function(e) {
  155.             if(e.ctrlKey && e.key == 'Enter') {
  156.                 doSubmit()
  157.             }
  158.         }, false);
  159.  
  160.     }
  161.     document.head.appendChild(scrpt);
  162.  
  163.  
  164.  
  165.     GM_addStyle ( `
  166. #wrap {
  167. padding: 0;
  168. background: none;
  169. }
  170. select {
  171.     height: 30px;
  172.     border: 1px solid #375EAB;
  173.     font-size: 16px;
  174.     font-family: sans-serif;
  175.     background: #375EAB;
  176.     color: white;
  177.     position: static;
  178.     top: 1px;
  179.     border-radius: 5px;
  180.     padding-left: 1em;
  181. }
  182. `);
  183. })();