Enable Stage CodeMirror line wrapping

stage-codemirror-linewrap.user.js

// ==UserScript==
// @name         Stage / CodeMirror Line wrapping
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  Enables line wrapping for CodeMirror, with some responsive tweaks.
// @author       Moses Holmström
// @match        https://*.stage.crasman.fi/admin/*
// @match        https://*.stage.crasman.cloud/admin/*
// @grant        none
// @updateURL    https://gist.github.com/thykka/53b1e602131a0c86a28bc62a116b9f18/raw/stage-codemirror-linewrap.user.js
// @downloadURL  https://gist.github.com/thykka/53b1e602131a0c86a28bc62a116b9f18/raw/stage-codemirror-linewrap.user.js
// @icon         https://crasman.stage.crasman.fi/favicon.ico
// ==/UserScript==

(function() {
    'use strict';

    // Constrain editor to screen width
    document.body.style.minWidth = '0';
    document.getElementById('workarea').style.minWidth = '0';

    document.querySelectorAll("#dialog-context,#workarea").forEach(el => {
        el.addEventListener("DOMSubtreeModified", ev => {
            const cmInstance = ev.target.closest('.CodeMirror');
            if(!cmInstance) return; // wrong element

            if(cmInstance.dataset?.lineWrapInitialized) return;


            if(!cmInstance.CodeMirror) return; // not initialized
            if(!cmInstance.CodeMirror.state) return; // ghost editor

            const uiComponent = cmInstance.closest('.ui-component-codemirror');
            if(!uiComponent) return;

            uiComponent.style.maxWidth = '100vw';
            cmInstance.CodeMirror.setOption('lineWrapping', true);
            cmInstance.dataset.lineWrapInitialized = true;
        });
    });

    document.querySelectorAll('.CodeMirror').forEach(cm => {
        cm.CodeMirror.setOption('lineWrapping', true);
    });
})();