☰

把Poe聊天框变成Monaco Editor

1.把Poe聊天框变成Monaco Editor; 2.可调整输入框高度; 3. 回车改为Ctrl + Enter

  1. // ==UserScript==
  2. // @name         Replace Poe Prompt Input with Monaco Editor
  3. // @name:zh-CN   把Poe聊天框变成Monaco Editor
  4. // @namespace    your-namespace
  5. // @namespace    http://tampermonkey.net/
  6. // @version      0.2.1
  7. // @description  1.Replace Poe chat box with Monaco Editor; 2.Allow adjusting input box height;3.Change Enter Event to Ctrl+Enter.
  8. // @description:zh-CN  1.把Poe聊天框变成Monaco Editor; 2.可调整输入框高度; 3. 回车改为Ctrl + Enter
  9. // @match        *://poe.com/*
  10. // @icon         https://www.google.com/s2/favicons?sz=64&domain=poe.com
  11. // @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
  12. // @grant        none
  13. // @license      MIT
  14. // @author       mercutiojohn
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     // Load Monaco Editor script
  21.     const script = document.createElement('script');
  22.     script.src = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs/loader.js';
  23.     document.head.appendChild(script);
  24.  
  25.     script.onload = function() {
  26.         // Load Monaco Editor modules
  27.         window.require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs' }});
  28.         window.require(['vs/editor/editor.main'], function() {
  29.  
  30.  
  31.             // Find the textarea element
  32.             const textarea = document.querySelector('textarea[class^="ChatMessageInputView_textInput"]');
  33.             document.querySelector("[class^=ChatMessageInputView_textInput__]").style.maxHeight = "unset";
  34.             const inputEl = document.querySelector("[class^=ChatMessageInputView_textInput__]");
  35.  
  36.             // Create an input element as a draggable slider
  37.             const slider = document.createElement('input');
  38.             slider.type = 'range';
  39.             slider.id = 'heightSlider';
  40.             slider.min = 100;
  41.             slider.max = 500;
  42.             slider.step = 10;
  43.             slider.value = 300;
  44.  
  45.             // Add the input element to the page.
  46.             const parent = inputEl.parentNode;
  47.             parent.insertBefore(slider, inputEl);
  48.             // let height = 300;
  49.             let height = slider.value;
  50.             inputEl.style.height = height + "px";
  51.  
  52.             // create a new div to replace it
  53.             const editorContainer = document.createElement('div');
  54.             // editorContainer.style.width = textarea.offsetWidth + 'px';
  55.             editorContainer.style.width = '100%';
  56.             editorContainer.style.height = textarea.offsetHeight + 'px';
  57.             editorContainer.style.border = '1.11px solid #000';
  58.             editorContainer.style.borderRadius = '10px';
  59.             editorContainer.style.overflow = 'hidden';
  60.             editorContainer.style.position = 'absolute';
  61.  
  62.             // Replace the textarea element with the editor container
  63.             textarea.parentNode.insertBefore(editorContainer, textarea);
  64.             // textarea.style.display = 'none';
  65.  
  66.             const button = document.querySelector('.ChatMessageInputView_sendButton__reEpT');
  67.  
  68.             // Create the Monaco Editor instance
  69.             const editor = window.monaco.editor.create(editorContainer, {
  70.                 value: textarea.value,
  71.                 language: 'markdown',
  72.                 theme: 'vs',
  73.                 fontFamily: 'Fira Code, MiSans, Consolas, monaco, monospace',
  74.                 lineNumbers:'off',
  75.                 fontSize: 16,
  76.                 lineHeight: 1.2,
  77.                 minimap: {
  78.                     enabled: true
  79.                 }
  80.             });
  81.  
  82.             // Update the textarea value when the editor contents change
  83.             editor.onDidChangeModelContent(function(event) {
  84.                 textarea.value = editor.getValue();
  85.             });
  86.  
  87.             // Add keybinding to trigger Enter event when Ctrl+Enter is pressed
  88.             editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function() {
  89.                 console.log("[Ctrl+Enter]");
  90.                 const event = new KeyboardEvent('keydown', { keyCode: 13, bubbles: true });
  91.                 textarea.dispatchEvent(event);
  92.                 setTimeout(()=>{
  93.                     editor.setValue('');
  94.                 },5);
  95.             });
  96.  
  97.             // Update the editor container size when the textarea size changes
  98.             const resizeObserver = new ResizeObserver(function(entries) {
  99.                 for (let entry of entries) {
  100.                     if (entry.target === textarea) {
  101.                         editorContainer.style.width = entry.target.offsetWidth + 'px';
  102.                         editorContainer.style.height = entry.target.offsetHeight + 'px';
  103.                         editor.layout();
  104.                     }
  105.                 }
  106.             });
  107.             resizeObserver.observe(textarea);
  108.  
  109.             // Update the editor container size when the textarea size changes
  110.             slider.addEventListener('input', function(event) {
  111.                 const height = event.target.value;
  112.                 inputEl.style.height = height + "px";
  113.                 // editor.layout();
  114.             });
  115.         });
  116.     };
  117.  
  118. })();