1.Replace Poe chat box with Monaco Editor; 2.Allow adjusting input box height;3.Change Enter Event to Ctrl+Enter.
// ==UserScript==
// @name Replace Poe Prompt Input with Monaco Editor
// @name:zh-CN 把Poe聊天框变成Monaco Editor
// @namespace your-namespace
// @namespace http://tampermonkey.net/
// @version 0.2.1
// @description 1.Replace Poe chat box with Monaco Editor; 2.Allow adjusting input box height;3.Change Enter Event to Ctrl+Enter.
// @description:zh-CN 1.把Poe聊天框变成Monaco Editor; 2.可调整输入框高度; 3. 回车改为Ctrl + Enter
// @match *://poe.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=poe.com
// @require https://greasyfork.org/scripts/465571-poe-style-enhancement-font-modification-wide-screen-adaptation-and-overall-element-scaling/code/Poe%20Style%20Enhancement:%20Font%20Modification,%20Wide%20Screen%20Adaptation,%20and%20Overall%20Element%20Scaling.user.js
// @grant none
// @license MIT
// @author mercutiojohn
// ==/UserScript==
(function() {
'use strict';
// Load Monaco Editor script
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js';
document.head.appendChild(script);
script.onload = function() {
// Load Monaco Editor modules
window.require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' }});
window.require(['vs/editor/editor.main'], function() {
// Find the textarea element
const textarea = document.querySelector('textarea[class^="ChatMessageInputView_textInput"]');
document.querySelector("[class^=ChatMessageInputView_textInput__]").style.maxHeight = "unset";
const inputEl = document.querySelector("[class^=ChatMessageInputView_textInput__]");
// Create an input element as a draggable slider
const slider = document.createElement('input');
slider.type = 'range';
slider.id = 'heightSlider';
slider.min = 100;
slider.max = 500;
slider.step = 10;
slider.value = 300;
// Add the input element to the page.
const parent = inputEl.parentNode;
parent.insertBefore(slider, inputEl);
// let height = 300;
let height = slider.value;
inputEl.style.height = height + "px";
// create a new div to replace it
const editorContainer = document.createElement('div');
// editorContainer.style.width = textarea.offsetWidth + 'px';
editorContainer.style.width = '100%';
editorContainer.style.height = textarea.offsetHeight + 'px';
editorContainer.style.border = '1.11px solid #000';
editorContainer.style.borderRadius = '10px';
editorContainer.style.overflow = 'hidden';
editorContainer.style.position = 'absolute';
// Replace the textarea element with the editor container
textarea.parentNode.insertBefore(editorContainer, textarea);
// textarea.style.display = 'none';
const button = document.querySelector('.ChatMessageInputView_sendButton__reEpT');
// Create the Monaco Editor instance
const editor = window.monaco.editor.create(editorContainer, {
value: textarea.value,
language: 'markdown',
theme: 'vs',
fontFamily: 'Fira Code, MiSans, Consolas, monaco, monospace',
lineNumbers:'off',
fontSize: 16,
lineHeight: 1.2,
minimap: {
enabled: true
}
});
// Update the textarea value when the editor contents change
editor.onDidChangeModelContent(function(event) {
textarea.value = editor.getValue();
});
// Add keybinding to trigger Enter event when Ctrl+Enter is pressed
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function() {
console.log("[Ctrl+Enter]");
const event = new KeyboardEvent('keydown', { keyCode: 13, bubbles: true });
textarea.dispatchEvent(event);
setTimeout(()=>{
editor.setValue('');
},5);
});
// Update the editor container size when the textarea size changes
const resizeObserver = new ResizeObserver(function(entries) {
for (let entry of entries) {
if (entry.target === textarea) {
editorContainer.style.width = entry.target.offsetWidth + 'px';
editorContainer.style.height = entry.target.offsetHeight + 'px';
editor.layout();
}
}
});
resizeObserver.observe(textarea);
// Update the editor container size when the textarea size changes
slider.addEventListener('input', function(event) {
const height = event.target.value;
inputEl.style.height = height + "px";
// editor.layout();
});
});
};
})();