☰

AtCoder Comfortable Editor

AtCoderのコードテスト・提出欄・提出コードを快適にします

2023-04-16 기준 버전입니다. 최신 버전을 확인하세요.

  1. // ==UserScript==
  2. // @name    AtCoder Comfortable Editor
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1
  5. // @description    AtCoderのコードテスト・提出欄・提出コードを快適にします
  6. // @author    Chippppp
  7. // @license    MIT
  8. // @match    https://atcoder.jp/contests/*/custom_test*
  9. // @match    https://atcoder.jp/contests/*/submit*
  10. // @match    https://atcoder.jp/contests/*/tasks/*
  11. // @match    https://atcoder.jp/contests/*/submissions/*
  12. // @match    https://atcoder.jp/contests/*/editorial*
  13. // @require    https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js
  14. // @grant    GM_getValue
  15. // @grant    GM_setValue
  16. // ==/UserScript==
  17.  
  18. (() => {
  19.  
  20. let callCnt = 0;
  21.  
  22. window.addEventListener("load", () => {
  23.     if (location.pathname.endsWith("editorial") || location.pathname.endsWith("editorial/")) {
  24.         for (let i of document.getElementsByClassName("label label-default")) {
  25.             let observer = new MutationObserver(() => main(i.parentElement));
  26.             const config = {
  27.                 childList: true,
  28.                 characterData: true,
  29.             };
  30.             observer.observe(i.parentElement, config);
  31.         }
  32.     } else main(document);
  33. });
  34.  
  35. let main = subject => {
  36.     ++callCnt;
  37.     "use strict";
  38.  
  39.     // Ace Editor in cdnjs
  40.     // Copyright (c) 2010, Ajax.org B.V.
  41.     let aceEditor = document.createElement("script");
  42.     aceEditor.src = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.5.1/ace.js";
  43.  
  44.     let isCustomTest = location.pathname.indexOf("custom_test") != -1;
  45.     let isEditorial = location.pathname.indexOf("editorial") != -1;
  46.     let isReadOnly = isEditorial || location.pathname.indexOf("submissions") != -1;
  47.     let originalDiv;
  48.     let originalDivs;
  49.     if (isReadOnly) {
  50.         originalDivs = [];
  51.         for (let i of subject.getElementsByClassName("prettyprint linenums prettyprinted")) {
  52.             originalDivs.push(i);
  53.         }
  54.         if (originalDivs.length == 0) return;
  55.     } else {
  56.         originalDiv = document.getElementsByClassName("div-editor")[0];
  57.         if (originalDiv == undefined) return;
  58.     }
  59.  
  60.     // 見た目変更
  61.     if (isReadOnly) {
  62.         for (let i of subject.getElementsByClassName("btn-copy btn-pre")) {
  63.             i.style.zIndex = "7";
  64.             i.style.borderRadius = "0";
  65.         }
  66.     } else {
  67.         document.getElementsByClassName("form-control plain-textarea")[0].style.display = "none";
  68.         document.getElementsByClassName("btn btn-default btn-sm btn-toggle-editor")[0].style.display = "none";
  69.         document.getElementsByClassName("btn btn-default btn-sm btn-toggle-editor")[0].classList.remove("active");
  70.     }
  71.  
  72.     // エディタ
  73.     let newDiv;
  74.     let newDivs;
  75.     let originalTexts;
  76.     let originalEditor;
  77.     let newEditor;
  78.     let newEditors;
  79.     let syncEditor;
  80.     if (isEditorial) {
  81.         newDivs = [];
  82.         originalTexts = [];
  83.         originalDivs.forEach((elm, i) => {
  84.             originalTexts.push(elm.innerText);
  85.             elm.style.display = "none";
  86.             let newDiv = document.createElement("div");
  87.             newDiv.id = "new-div-" + String(callCnt) + "-" + String(i);
  88.             newDiv.style.marginTop = "10px";
  89.             elm.after(newDiv);
  90.             newDivs.push(newDiv);
  91.         });
  92.     } else {
  93.         newDiv = document.createElement("div");
  94.         newDiv.id = "new-div";
  95.         newDiv.style.marginTop = "10px";
  96.         newDiv.style.marginBottom = "10px";
  97.         if (isReadOnly) {
  98.             originalDivs[0].after(newDiv);
  99.             originalDivs[0].style.display = "none";
  100.         } else {
  101.             originalEditor = $(".editor").data("editor").doc;
  102.             originalDiv.after(newDiv);
  103.             originalDiv.style.display = "none";
  104.             syncEditor = () => {
  105.                 code = newEditor.getValue();
  106.                 originalEditor.setValue(newEditor.getValue());
  107.             };
  108.         }
  109.     }
  110.  
  111.     // ボタン
  112.     let languageButton;
  113.     let languageButtons;
  114.     let settingsButton;
  115.     languageButton = document.querySelector("[id^=select2-dataLanguageId]");
  116.     if (isEditorial) {
  117.         languageButtons = [];
  118.         newDivs.forEach((elm, i) => {
  119.             let label = document.createElement("label");
  120.             elm.after(label);
  121.             label.innerText = "Python";
  122.             label.for = "checkbox-" + String(callCnt) + "-" + String(i);
  123.             let checkbox = document.createElement("input");
  124.             label.prepend(checkbox);
  125.             checkbox.type = "checkbox";
  126.             checkbox.name = "checkbox-" + String(callCnt) + "-" + String(i);
  127.             checkbox.id = "checkbox-" + String(callCnt) + "-" + String(i);
  128.             languageButtons.push(checkbox);
  129.         });
  130.     } else {
  131.         settingsButton = document.createElement("button");
  132.         newDiv.after(settingsButton);
  133.         settingsButton.className = "btn btn-secondary btn-sm";
  134.         settingsButton.type = "button";
  135.         settingsButton.innerText = "Editor Settings";
  136.     }
  137.     if (!isReadOnly && !isCustomTest) {
  138.         let copyP = document.createElement("p");
  139.         document.getElementsByClassName("btn btn-default btn-sm btn-auto-height")[0].parentElement.after(copyP);
  140.         let copyButton = document.createElement("button");
  141.         copyP.appendChild(copyButton);
  142.         copyButton.className = "btn btn-info btn-sm";
  143.         copyButton.type = "button";
  144.         copyButton.innerText = "Copy From Code Test";
  145.         copyButton.addEventListener("click", () => {
  146.             let href = location.href;
  147.             if (href.indexOf("tasks") != -1) href = href.slice(0, href.indexOf("tasks"));
  148.             else href = href.slice(0, href.indexOf("submit"));
  149.             href += "custom_test";
  150.             fetch(href).then(response => response.text()).then(data => {
  151.                 const parser = new DOMParser();
  152.                 const doc = parser.parseFromString(data, "text/html");
  153.                 newEditor.setValue(doc.getElementsByClassName("editor")[0].value, 1);
  154.             });
  155.         });
  156.     }
  157.  
  158.     //　保存されたコード
  159.     let code;
  160.     if (!isReadOnly) {
  161.         code = originalEditor.getValue();
  162.         // ページを去るときに警告
  163.         window.addEventListener("beforeunload", e => {
  164.             if (newEditor.getValue() != code) e.returnValue = "The code is not saved, are you sure you want to leave the page?";
  165.         });
  166.     }
  167.  
  168.     // ボタンでエディターを同期
  169.     if (!isReadOnly) {
  170.         let buttons = Array.from(Array.from(document.getElementsByClassName("col-sm-5")).slice(-1)[0].children);
  171.         for (let originalButton of buttons) {
  172.             if (originalButton.tagName.toLowerCase() != "button" && !originalButton.classList.contains("btn")) continue;
  173.             let newButton = originalButton.cloneNode(true);
  174.             originalButton.after(newButton);
  175.             originalButton.id = "";
  176.             originalButton.style.display = "none";
  177.             newButton.addEventListener("click", e => {
  178.                 e.preventDefault();
  179.                 syncEditor();
  180.                 originalButton.click();
  181.             });
  182.         }
  183.         if (isCustomTest) {
  184.             let submit = vueCustomTest.submit;
  185.             vueCustomTest.submit = () => {
  186.                 syncEditor();
  187.                 submit();
  188.             };
  189.         }
  190.     }
  191.  
  192.     // 互換性のため
  193.     if (!isReadOnly) getSourceCode = () => newEditor.getValue();
  194.  
  195.     // ファイルを開く場合
  196.     if (!isReadOnly) {
  197.         document.getElementById("input-open-file").addEventListener("change", e => {
  198.             let fileData = e.target.files[0];
  199.             let reader = new FileReader();
  200.             reader.addEventListener("load", () => {
  201.                 newEditor.setValue(reader.result);
  202.             });
  203.             reader.readAsText(fileData);
  204.         });
  205.     }
  206.  
  207.     // 設定
  208.     let data;
  209.     try {
  210.         data = JSON.parse(GM_getValue("settings"));
  211.     } catch (_) {
  212.         data = {};
  213.     }
  214.     let settingKeys = [
  215.         "theme",
  216.         "cursorStyle",
  217.         "tabSize",
  218.         "useSoftTabs",
  219.         "useWrapMode",
  220.         "highlightActiveLine",
  221.         "displayIndentGuides",
  222.         "fontSize",
  223.         "minLines",
  224.         "maxLines",
  225.     ];
  226.     let defaultSettings = {
  227.         theme: "tomorrow",
  228.         cursorStyle: "ace",
  229.         tabSize: 2,
  230.         useSoftTabs: true,
  231.         useWrapMode: false,
  232.         highlightActiveLine: false,
  233.         displayIndentGuides: true,
  234.         fontSize: 12,
  235.         minLines: 24,
  236.         maxLines: 24,
  237.     };
  238.     let settingTypes = {
  239.         theme: {"bright": ["chrome", "clouds", "crimson_editor", "dawn", "dreamweaver", "eclipse", "github", "iplastic", "solarized_light", "textmate", "tomorrow", "xcode", "kuroir", "katzenmilch", "sqlserver"], "dark": ["ambiance", "chaos", "clouds_midnight", "dracula", "cobalt", "gruvbox", "gob", "idle_fingers", "kr_theme", "merbivore", "merbivore_soft", "mono_industrial", "monokai", "nord_dark", "one_dark", "pastel_on_dark", "solarized_dark", "terminal", "tomorrow_night", "tomorrow_night_blue", "tomorrow_night_bright", "tomorrow_night_eighties", "twilight", "vibrant_ink"]},
  240.         cursorStyle: ["ace", "slim", "smooth", "wide"],
  241.         tabSize: "number",
  242.         useSoftTabs: "checkbox",
  243.         useWrapMode: "checkbox",
  244.         highlightActiveLine: "checkbox",
  245.         displayIndentGuides: "checkbox",
  246.         fontSize: "number",
  247.         minLines: "number",
  248.         maxLines: "number",
  249.     };
  250.     for (let i of settingKeys) if (data[i] == undefined)  data[i] = defaultSettings[i];
  251.     if (!isEditorial) {
  252.         settingsButton.addEventListener("click", () => {
  253.             const win = window.open("about:blank");
  254.             const doc = win.document;
  255.             doc.open();
  256.             doc.write(`<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">`);
  257.             doc.close();
  258.             let settingDiv = doc.createElement("div");
  259.             settingDiv.className = "panel panel-default";
  260.             settingDiv.innerHTML = `
  261.         <div class="panel-heading">Settings</div>
  262.         <div class="panel-body">
  263.             <form class="form-horizontal"></form>
  264.         </div>
  265.         `
  266.             doc.body.prepend(settingDiv);
  267.             let form = doc.getElementsByClassName("form-horizontal")[0];
  268.             let reflectWhenChange = element => {
  269.                 element.addEventListener("change", () => {
  270.                     for (let i of settingKeys) {
  271.                         if (settingTypes[i] == "number") data[i] = parseInt(doc.getElementById(i).value);
  272.                         if (settingTypes[i] == "checkbox") data[i] = doc.getElementById(i).checked;
  273.                         else data[i] = doc.getElementById(i).value;
  274.                     }
  275.                     GM_setValue("settings", JSON.stringify(data));
  276.                     colorize(newEditor);
  277.                 });
  278.             };
  279.             for (let i of settingKeys) {
  280.                 let div = doc.createElement("div");
  281.                 form.appendChild(div);
  282.                 div.className = "form-group";
  283.                 let label = doc.createElement("label");
  284.                 div.appendChild(label);
  285.                 label.className = "col-sm-3";
  286.                 label.for = i;
  287.                 label.innerText = i;
  288.                 if (Array.isArray(settingTypes[i])) {
  289.                     let select = doc.createElement("select");
  290.                     div.appendChild(select);
  291.                     select.id = i;
  292.                     for (let value of settingTypes[i]) {
  293.                         let option = doc.createElement("option");
  294.                         select.appendChild(option);
  295.                         option.value = value.toLocaleLowerCase().replace(" ", "_");
  296.                         option.innerText = value;
  297.                         if (option.value == data[i]) option.selected = "true";
  298.                     }
  299.                     reflectWhenChange(select);
  300.                     continue;
  301.                 }
  302.                 if (typeof settingTypes[i] == "object") {
  303.                     let select = doc.createElement("select");
  304.                     div.appendChild(select);
  305.                     select.id = i;
  306.                     for (let key of Object.keys(settingTypes[i])) {
  307.                         let optGroup = doc.createElement("optgroup");
  308.                         select.appendChild(optGroup);
  309.                         optGroup.label = key;
  310.                         for (let value of settingTypes[i][key]) {
  311.                             let option = doc.createElement("option");
  312.                             optGroup.appendChild(option);
  313.                             option.value = value;
  314.                             option.innerText = value;
  315.                             if (value == data[i]) option.selected = "true";
  316.                         }
  317.                     }
  318.                     reflectWhenChange(select);
  319.                     continue;
  320.                 }
  321.                 let input = doc.createElement("input");
  322.                 div.appendChild(input);
  323.                 input.id = i;
  324.                 if (settingTypes[i] == "number") {
  325.                     input.type = "number";
  326.                     input.value = data[i].toString();
  327.                 } else if (settingTypes[i] == "checkbox") {
  328.                     input.type = "checkbox";
  329.                     input.checked = data[i];
  330.                 } else {
  331.                     console.error("Settings Option Error");
  332.                 }
  333.                 reflectWhenChange(input);
  334.             }
  335.             let resetButton = doc.createElement("button");
  336.             doc.getElementsByClassName("panel-body")[0].appendChild(resetButton);
  337.             resetButton.className = "btn btn-danger";
  338.             resetButton.innerText = "Reset";
  339.             resetButton.addEventListener("click", () => {
  340.                 if (!win.confirm("Are you sure you want to reset settings?")) return;
  341.                 for (let i of settingKeys) {
  342.                     data[i] = defaultSettings[i];
  343.                     let input = doc.getElementById(i);
  344.                     if (settingTypes[i] == "number") input.value = data[i].toString();
  345.                     else if (settingTypes[i] == "checkbox") input.checked = data[i];
  346.                     else input.value = data[i];
  347.                 }
  348.             });
  349.         });
  350.     }
  351.  
  352.     // エディタの色付け
  353.     let colorize = (editor, button = null) => {
  354.         let lang;
  355.         if (isEditorial) {
  356.             if (button.checked) lang = "python";
  357.             else lang = "c_cpp";
  358.         } else {
  359.             lang = isReadOnly ? document.getElementsByClassName("text-center")[3].innerText : languageButton.innerText;
  360.             lang = lang.slice(0, lang.indexOf(" ")).toLowerCase().replace("#", "sharp").replace(/[0-9]/g, "");
  361.             if (lang.startsWith("pypy") || lang == "cython") lang = "python";
  362.             else if (lang == "c++" || lang == "c") lang = "c_cpp";
  363.             else if (lang.startsWith("cobol")) lang = "cobol";
  364.         }
  365.         editor.session.setMode("ace/mode/" + lang);
  366.         editor.session.setUseWrapMode(data.useWrapMode);
  367.         editor.setTheme("ace/theme/" + data.theme);
  368.         for (let key of settingKeys) {
  369.             if (key == "theme" || key == "useWrapMode") continue;
  370.             if (isReadOnly && key == "minLines") continue;
  371.             editor.setOption(key, data[key]);
  372.         }
  373.         editor.setOption("fontSize", data.fontSize.toString() + "px");
  374.         if (isReadOnly) {
  375.             editor.setOption("readOnly", true);
  376.             if (isEditorial) {
  377.                 editor.setOptions({
  378.                     maxLines: Infinity,
  379.                 });
  380.             } else {
  381.                 let expandButton = document.getElementsByClassName("btn-text toggle-btn-text source-code-expand-btn")[0];
  382.                 if (expandButton.innerText == expandButton.dataset.onText) {
  383.                     editor.setOptions({
  384.                         maxLines: data.maxLines,
  385.                     });
  386.                 } else {
  387.                     editor.setOptions({
  388.                         maxLines: Infinity,
  389.                     });
  390.                 }
  391.             }
  392.         } else {
  393.             if (document.getElementsByClassName("btn btn-default btn-sm btn-auto-height")[0].classList.contains("active")) {
  394.                 editor.setOptions({
  395.                     minLines: data.minLines,
  396.                     maxLines: Infinity,
  397.                 });
  398.             } else {
  399.                 editor.setOptions({
  400.                     minLines: data.minLines,
  401.                     maxLines: data.maxLines,
  402.                 });
  403.             }
  404.         }
  405.     };
  406.  
  407.     // ソースコードバイト数表示
  408.     let sourceCodeLabel;
  409.     let sourceCodeText;
  410.     if (!isReadOnly) {
  411.         for (let element of document.getElementsByClassName("control-label col-sm-2")) {
  412.             if (element.htmlFor == "sourceCode") {
  413.                 sourceCodeLabel = element;
  414.                 sourceCodeText = sourceCodeLabel.innerText;
  415.                 sourceCodeLabel.innerHTML += `<br>${(new Blob([originalEditor.getValue()])).size} Byte`;
  416.                 break;
  417.             }
  418.         }
  419.     }
  420.  
  421.     // ロードされたらエディタ作成
  422.     let prepare = () => {
  423.         require.config({ paths: { "1.5.1": "https://cdnjs.cloudflare.com/ajax/libs/ace/1.5.1" } });
  424.  
  425.         require(["1.5.1/ace"], () => {
  426.             if (isEditorial) {
  427.                 newEditors = [];
  428.                 newDivs.forEach((elm, i) => {
  429.                     let newEditor = ace.edit(elm.id);
  430.                     newEditor.setValue(originalTexts[i], 1);
  431.                     colorize(newEditor, languageButtons[i]);
  432.                     newEditors.push(newEditor);
  433.                 });
  434.             } else {
  435.                 newEditor = ace.edit("new-div");
  436.                 newEditor.setValue(isReadOnly ? document.getElementById("for_copy0").innerText : originalEditor.getValue(), 1);
  437.                 colorize(newEditor);
  438.             }
  439.  
  440.             // languageButtonを監視
  441.             if (!isReadOnly) {
  442.                 let observer = new MutationObserver(() => {
  443.                     colorize(newEditor);
  444.                 });
  445.                 const config = {
  446.                     attributes: true,
  447.                     childList: true,
  448.                     characterData: true,
  449.                 };
  450.                 observer.observe(languageButton, config);
  451.                 let observer2 = new MutationObserver(() => {
  452.                     colorize(newEditor);
  453.                     console.log("Yey");
  454.                 });
  455.                 const config2 = {
  456.                     attributes: true,
  457.                     childList: true,
  458.                     characterData: true,
  459.                 };
  460.                 observer2.observe(document.getElementsByClassName("btn btn-default btn-sm btn-auto-height")[0], config2);
  461.             } else if (isEditorial) {
  462.                 newEditors.forEach((editor, i) => {
  463.                     languageButtons[i].addEventListener("click", () => colorize(editor, languageButtons[i]));
  464.                 });
  465.             } else {
  466.                 let observer = new MutationObserver(() => {
  467.                     colorize(newEditor);
  468.                 });
  469.                 const config = {
  470.                     childList: true,
  471.                     characterData: true,
  472.                 };
  473.                 observer.observe(document.getElementsByClassName("btn-text toggle-btn-text source-code-expand-btn")[0], config);
  474.             }
  475.  
  476.             // ソースコードバイト数の変更
  477.             if (!isReadOnly) {
  478.                 newEditor.session.addEventListener("change", () => {
  479.                     sourceCodeLabel.innerHTML = sourceCodeText + `<br>${(new Blob([newEditor.getValue()])).size} Byte`;
  480.                 });
  481.             }
  482.         });
  483.     };
  484.     aceEditor.addEventListener("load", prepare);
  485.     document.head.prepend(aceEditor);
  486. };
  487.  
  488. })();