GreasyFork Code: Monaco Editor

12/17/2023, 2:31:22 PM
目前为 2023-12-17 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name        GreasyFork Code: Monaco Editor
// @namespace   Violentmonkey Scripts
// @match       https://greasyfork.org/*
// @grant       none
// @version     0.1.4
// @author      CY Fung
// @description 12/17/2023, 2:31:22 PM
// @run-at document-start
// @unwrap
// @license     MIT
// ==/UserScript==
 
// localStorage.darkMode = 'true'
// localStorage.autoMonacoEditor = 'true'
 
(() => {
 
  const vsPath = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs";
 
  const cssText01 = `
  .monaco-editor-container{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      display: none;
  }
  [monaco-editor-status="1"] .monaco-editor-container{
    display: block;
  }
  [monaco-editor-status="1"] .monaco-controlled-textarea{
    display: none;
  }
  [monaco-editor-status="2"] .monaco-editor-container{
    display: none;
  }
  [monaco-editor-status="2"] .monaco-controlled-textarea{
    display: block;
  }
  `;
 
  const 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) {
 
      e.stopImmediatePropagation();
      e.stopPropagation();
      e.preventDefault();
 
      const textAreaParent = elmSet.textAreaParent;
      const textArea = elmSet.textArea;
      const editor = elmSet.editor;
 
      // console.log(monacoStatus)
      if (monacoStatus === '1') {
        // elmSet.container.replaceWith(elmSet.textArea);
 
 
 
        textAreaParent.setAttribute('monaco-editor-status', '2')
        target.setAttribute('monaco-status', monacoStatus = '2')
        return;
 
      } else if (monacoStatus === '2') {
 
        // elmSet.textArea.replaceWith(elmSet.container);
 
        const currentCode = editor.getValue();
        const currentText = textArea.value;
        if (currentCode !== currentText) {
          editor.setValue(currentText);
        }
 
        textAreaParent.setAttribute('monaco-editor-status', '1')
        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();
 
 
    // Setting up Monaco Editor requirements
    let require = {
      paths: {
        vs: vsPath,
      },
    };
 
    window.require = (window.require || {});
    window.require.paths = (window.require.paths || {});
    Object.assign(window.require.paths, require.paths);
 
 
    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';
      container.style.height = textArea.getBoundingClientRect().height + 'px';
      // textArea.replaceWith(container);
      textArea.classList.add('monaco-controlled-textarea');
      const textAreaParent = elmSet.textAreaParent = textArea.parentNode;
      textAreaParent.setAttribute('monaco-editor-status', '1');
      textAreaParent.insertBefore(container, textArea.nextSibling);
 
      elmSet.textArea = textArea;
      elmSet.container = container;
 
      const monacoLangs = {
        'javascript': 'javascript',
        'css': 'css',
      };
 
      const monacoLang = monacoLangs[codeLang];
 
 
      const editor = monaco.editor.create(container, {
        value: textArea.value,
        language: monacoLang,
        automaticLayout: true,
        foldingStrategy: 'indentation',
        lineNumbers: 'on',
        readOnly: false,
        minimap: {
          enabled: false,
        },
        cursorStyle: 'line',
      });
 
      elmSet.editor = editor;
 
      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);
 
    const jsResources = [
      `${vsPath}/loader.js`,
      `${vsPath}/editor/editor.main.nls.js`,
      `${vsPath}/editor/editor.main.js`,
    ];
 
 
    const template = document.createElement('template');
 
    for (const url of jsResources) {
      const link = document.createElement('link');
      link.setAttribute('rel', 'prefetch');
      link.setAttribute('as', 'script');
      link.setAttribute('href', url);
      template.content.appendChild(link)
      document.head.appendChild(template.content);
    }
 
    if (localStorage.darkMode === 'true') document.documentElement.setAttribute('dark', '')
 
    const checkerbox = document.querySelector('input#enable-source-editor-code[name="enable-source-editor-code"]');
 
    if(checkerbox){
      checkerbox.addEventListener('change', onChange817, { once: false, capture: true, passive: false });
      if(localStorage.autoMonacoEditor === 'true' && requestIdleCallback){
        
        requestIdleCallback(()=>{
          if(checkerbox.checked === false && checkerbox.isConnected) checkerbox.click();
        });
 
      }
    }
 
    
 
  }
 
 
  Promise.resolve().then(() => {
 
    if (document.readyState !== 'loading') {
      onReady();
    } else {
      window.addEventListener("DOMContentLoaded", onReady, false);
    }
 
  });
 
})();