Hatena::Let - CodeMirror

let-codemirror.user.js

// ==UserScript==
// @name         Hatena::Let - CodeMirror
// @namespace    https://github.com/unarist/
// @version      0.2.1
// @description  Replace plain textarea with CodeMirror!
// @author       unarist
// @downloadURL https://gist.github.com/unarist/1fb6ce33daa34ecdbd5f2060d32c65a3/raw/let-codemirror.user.js
// @match        https://let.hatelabo.jp/l
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const tag = (n, p) => Object.assign(document.createElement(n), p);
    const inject = url => new Promise((r) => document.head.appendChild(url.endsWith('css') ? tag('link', { rel: 'stylesheet', href: url, onload: r }) : tag('script', { src: url, onload: r })));

    const load = url => inject(url.startsWith('http') ? url : 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.27.2' + url);
    const loadAll = urls => Promise.all(urls.map(load));

    const customStyles = `
.CodeMirror { border: 1px solid silver; }
.cm-s-default-mod .CodeMirror-gutters {border-right: 1px solid #ddd; background-color: #f7f7f7; }
.cm-s-default-mod .CodeMirror-activeline-gutter .CodeMirror-gutter-elt { background: #ddd; color: black; }
.cm-s-default-mod .CodeMirror-activeline-background { background: #eff5ff; }
div.cm-s-default-mod span.CodeMirror-matchingbracket { color: hsla(117, 100%, 30%, 1); outline: 1px solid #bbb; }
.cm-s-default-mod .cm-def {color: hsla(240, 100%, 40%, 1); }
.cm-s-default-mod .cm-string-2 { color: #a11; /* = cm-string */ }

/* some styles from codemirror-github-light */
.cm-s-default-mod .CodeMirror-lines {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  line-height: 1.5; }
.cm-s-default-mod .CodeMirror-linenumber { color: #959da5; padding: 0 16px 0 16px; }
.cm-s-default-mod .cm-comment { color: #6a737d; }
`;

    
    load('/codemirror.min.js')
    .then(() => loadAll([
        '/codemirror.css',
            '/mode/javascript/javascript.js',
            '/addon/lint/lint.css',
            '/addon/lint/lint.js',
            '/addon/lint/javascript-lint.js',
            '/addon/edit/matchbrackets.js',
            '/addon/comment/continuecomment.js',
            '/addon/selection/active-line.js',
            'https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js',
    ]))
    .then(() => {
        document.head.appendChild(tag('style', { textContent: customStyles }));

        window.editor = CodeMirror.fromTextArea(document.getElementById('source-input'), {
            mode: 'javascript',
            gutters: ['CodeMirror-lint-markers'],
            lint: {
                esversion: 6
            },
            theme: 'default default-mod',
            tabSize: 2,
            lineNumbers: true,
            continueComments: true,
            styleActiveLine: true,
            matchBrackets: true,
        });

        editor.setSize(null, 'calc(100vh - 20em)');
        editor.setOption('extraKeys', {
            Tab: cm => cm.doc.somethingSelected() ? cm.indentSelection('add') : cm.execCommand('insertSoftTab'),
            'Shift-Tab': cm => cm.indentSelection('subtract'),
            // Shift+Minus && multilineSelected => AutoIndent
            'Shift--': cm => {
                if (cm.getCursor('anchor').line !== cm.getCursor().line) {
                    cm.execCommand('indentAuto');
                    cm.setSelection(cm.getCursor('anchor'));
                } else {
                    return CodeMirror.Pass;
                }
            }
        });
    });
})();