☰

把Poe聊天框变成Monaco Editor

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

当前为 2023-05-05 提交的版本，查看 最新版本。

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