12/17/2023, 2:31:22 PM
目前為
// ==UserScript==
// @name GreasyFork Code: Monaco Editor
// @namespace Violentmonkey Scripts
// @match https://greasyfork.org/*
// @grant none
// @version 0.1.1
// @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 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) {
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);
editor.setValue(textArea.value);
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();
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';
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);
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);
}
});
})();