GCPedia Ace Editor

Use the Ace Editor when editing things on GCPedia
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==UserScript==
// @name         GCPedia Ace Editor
// @namespace    https://greatest.deepsurf.us/users/649
// @version      1.3.1
// @description  Use the Ace Editor when editing things on GCPedia
// @author       Adrien Pyke
// @match        *://www.gcpedia.gc.ca/*
// @grant        unsafeWindow
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @require      https://cdn.jsdelivr.net/gh/kufii/My-UserScripts@22210afba13acf7303fc91590b8265faf3c7eda7/libs/gm_config.js
// @require      https://cdn.jsdelivr.net/gh/fuzetsu/userscripts@ec863aa92cea78a20431f92e80ac0e93262136df/wait-for-elements/wait-for-elements.js
// ==/UserScript==

(() => {
  'use strict';

  const SCRIPT_NAME = 'GCPedia Ace Editor';

  const Util = {
    log(...args) {
      args.unshift(`%c${SCRIPT_NAME}:`, 'font-weight: bold;color: #233c7b;');
      console.log(...args);
    },
    q(query, context = document) {
      return context.querySelector(query);
    },
    qq(query, context = document) {
      return Array.from(context.querySelectorAll(query));
    },
    addScript(src, onload) {
      const s = document.createElement('script');
      s.onload = onload;
      s.src = src;
      document.body.appendChild(s);
    },
    addScriptText(code, onload) {
      const s = document.createElement('script');
      s.onload = onload;
      s.textContent = code;
      document.body.appendChild(s);
    },
    appendAfter(elem, elemToAppend) {
      elem.parentNode.insertBefore(elemToAppend, elem.nextElementSibling);
    }
  };

  const Config = GM_config([
    {
      key: 'theme',
      label: 'Theme',
      default: 'monokai',
      type: 'dropdown',
      values: [
        'ambiance',
        'chaos',
        'chrome',
        'clouds',
        'clouds_midnight',
        'cobalt',
        'crimson_editor',
        'dawn',
        'dreamweaver',
        'eclipse',
        'github',
        'gob',
        'idle_fingers',
        'iplastic',
        'katzenmilch',
        'kr_theme',
        'kuroir',
        'merbivore',
        'merbivore_soft',
        'mono_industrial',
        'monokai',
        'solarized_dark',
        'solarized_light',
        'sqlserver',
        'terminal',
        'textmate',
        'tomorrow',
        'tomorrow_night',
        'tomorrow_night_blue',
        'tomorrow_night_bright',
        'tomorrow_night_eighties',
        'twilight',
        'vibrant_ink',
        'xcode'
      ]
    }
  ]);

  waitForElems({
    sel: '#wpTextbox1',
    stop: true,
    onmatch(textArea) {
      const wrapper = document.createElement('div');
      wrapper.id = 'ace';
      wrapper.textContent = textArea.value;

      Util.appendAfter(textArea, wrapper);

      GM_addStyle(`
				.ace_editor {
					height: 600px;
				}
				.wikiEditor-ui,
				#wpTextbox1 {
					display: none;
				}
			`);

      Util.addScript(
        'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js',
        () => {
          const editor = unsafeWindow.ace.edit('ace');
          editor.setTheme(`ace/theme/${Config.load().theme}`);
          editor.getSession().setMode('ace/mode/html');
          editor.resize();

          unsafeWindow.aceEditor = editor;
          unsafeWindow.originalTextArea = textArea;

          Util.addScriptText(
            'aceEditor.getSession().on("change", () => originalTextArea.value = aceEditor.getValue())'
          );

          GM_registerMenuCommand('GCPedia Ace Editor Settings', () =>
            Config.setup(editor)
          );
          Config.onchange = (key, value) =>
            editor.setTheme(`ace/theme/${value}`);
          Config.oncancel = cfg => editor.setTheme(`ace/theme/${cfg.theme}`);
        }
      );
    }
  });
})();