GreasyFork Code: Monaco Editor

12/17/2023, 2:31:22 PM
Version vom 17.12.2023. Aktuellste Version
Stellen Sie eine Frage, veröffentlichen Sie eine Bewertung oder melden Sie das Skript.
Wrap lines
// ==UserScript==
// @name        GreasyFork Code: Monaco Editor
// @namespace   Violentmonkey Scripts
// @match       https://greasyfork.org/*
// @grant       none
// @version     0.1.0
// @author      -
// @description 12/17/2023, 2:31:22 PM
// @run-at document-start
// @unwrap
// @license MIT
// ==/UserScript==

// localStorage.darkMode = 'true'

(() => {

  const cssText01 = `
  .monaco-editor-container{
      height: 20em;
  }
  `;

  let elmSet = {};

  HTMLInputElement.prototype.addEventListener177 = HTMLInputElement.prototype.addEventListener;
  HTMLInputElement.prototype.addEventListener = function () {
    if (arguments.length === 2 && arguments[0] === 'change' && (arguments[1] || 0).name === 'handleChange') {
      // if(this ===  ) return;
      // console.log(this)
      if (this.id === 'enable-source-editor-code') return;
      // return;
    }
    return this.addEventListener177.apply(this, arguments);

  }


  function loadResource(type, url) {
    if (type === 'css') {
      return new Promise(resolve => {
        var link = document.createElement('link');
        var onload = function () {
          link.removeEventListener('load', onload, false);
          resolve();
        }
        link.addEventListener('load', onload, false);
        link.rel = 'stylesheet';
        link.href = url;
        document.head.appendChild(link);
      });
    } else if (type === 'js') {
      return new Promise(resolve => {
        var script = document.createElement('script');
        var onload = function () {
          script.removeEventListener('load', onload, false);
          resolve();
        }
        script.addEventListener('load', onload, false);
        script.src = url;
        document.head.appendChild(script);
      })
    }
  }

  function onChange817(e) {



    // console.log(123213)

    const target = (e || 0).target || null;

    if (!target) return;

    let monacoStatus = target.getAttribute('monaco-status')
    if (monacoStatus) {


      // console.log(monacoStatus)
      if (monacoStatus === '1') {
        elmSet.container.replaceWith(elmSet.textArea);


        target.setAttribute('monaco-status', monacoStatus = '2')
        return;

      } else if (monacoStatus === '2') {

        elmSet.textArea.replaceWith(elmSet.container);

        target.setAttribute('monaco-status', monacoStatus = '1')
        return;
      } else {
        return;
      }

    }

    const codeId = target.getAttribute('data-related-editor') || '';
    if (!codeId) return;

    const textArea = document.getElementById(codeId);

    if (!textArea) return;

    const codeLang = target.getAttribute('data-editor-language'); // 'javascript', 'css'

    if (!codeLang) return;


    target.setAttribute('monaco-status', '1');


    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();


    const vsPath = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs"
    // Setting up Monaco Editor requirements
    var require = {
      paths: {
        vs: vsPath,
      },
    };
    window.require = require;


    const addCssText = (id, text) => {
      if (document.getElementById(id)) return;
      const style = document.createElement('style');
      style.id = id;
      style.textContent = text;
      document.head.appendChild(style);

    }


    (async function () {

      // Dynamically load CSS and JS
      await loadResource('css', `${vsPath}/editor/editor.main.css`);
      await loadResource('js', `${vsPath}/loader.js`);
      await loadResource('js', `${vsPath}/editor/editor.main.nls.js`);
      await loadResource('js', `${vsPath}/editor/editor.main.js`);

      addCssText('rmbnctzOOksi', cssText01);

      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
        allowNonTsExtensions: true,
        checkJs: true,
      });

      const container = document.createElement('div');
      container.className = 'monaco-editor-container';
      textArea.replaceWith(container);

      elmSet.textArea = textArea;
      elmSet.container = container;

      const monacoLangs = {
        'javascript': 'javascript',
        'css': 'css',
      }

      const monacoLang = monacoLangs[codeLang];

      var editor = monaco.editor.create(container, {
        value: textArea.value,
        language: monacoLang,
        automaticLayout: true,
        foldingStrategy: 'indentation',
        lineNumbers: 'on',
        readOnly: false,
        minimap: {
          enabled: false,
        },
        cursorStyle: 'line',
      });

      if (document.documentElement.hasAttribute('dark')) monaco.editor.setTheme("vs-dark");

      editor.onDidChangeModelContent(e => {
        elmSet.textArea.value = editor.getValue()
      });



      // console.log(monaco, monaco.onDidChangeModelContent)

      //   window.editor.getModel().onDidChangeContent((event) => {
      //   render();
      // });

      //   editor.setTheme

      //   onDidChangeContent is attached to a model, and will only apply to that model
      // onDidChangeModelContent



    })();


  }

  function onReady() {
    window.removeEventListener("DOMContentLoaded", onReady, false);

    if (localStorage.darkMode === 'true') document.documentElement.setAttribute('dark', '')


    document.querySelector('input#enable-source-editor-code[name="enable-source-editor-code"]').addEventListener('change', onChange817, { once: false, capture: true, passive: false });

  }


  Promise.resolve().then(() => {

    if (document.readyState !== 'loading') {
      onReady();
    } else {
      window.addEventListener("DOMContentLoaded", onReady, false);
    }

  });

})();