{"id":47061257,"url":"https://github.com/kariudo/monoco-textarea-bookmarklet","last_synced_at":"2026-03-12T04:05:44.090Z","repository":{"id":322880643,"uuid":"1091279063","full_name":"kariudo/monoco-textarea-bookmarklet","owner":"kariudo","description":"A bookmarklet to convert a focused text area to a monoco editor","archived":false,"fork":false,"pushed_at":"2025-11-07T19:56:59.000Z","size":68,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-24T10:18:43.827Z","etag":null,"topics":["bookmarklet","javascript","monoco-editor","vscode"],"latest_commit_sha":null,"homepage":"https://kariudo.dev/monoco-textarea-bookmarklet/demo.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kariudo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-06T19:56:44.000Z","updated_at":"2025-11-07T19:57:02.000Z","dependencies_parsed_at":"2025-11-06T22:08:55.931Z","dependency_job_id":null,"html_url":"https://github.com/kariudo/monoco-textarea-bookmarklet","commit_stats":null,"previous_names":["kariudo/monoco-textarea-bookmarklet"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kariudo/monoco-textarea-bookmarklet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kariudo%2Fmonoco-textarea-bookmarklet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kariudo%2Fmonoco-textarea-bookmarklet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kariudo%2Fmonoco-textarea-bookmarklet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kariudo%2Fmonoco-textarea-bookmarklet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kariudo","download_url":"https://codeload.github.com/kariudo/monoco-textarea-bookmarklet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kariudo%2Fmonoco-textarea-bookmarklet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30415042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"online","status_checked_at":"2026-03-12T02:00:07.260Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bookmarklet","javascript","monoco-editor","vscode"],"created_at":"2026-03-12T04:05:42.888Z","updated_at":"2026-03-12T04:05:44.082Z","avatar_url":"https://github.com/kariudo.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.svg\" alt=\"Monaco Bookmarklet Logo\" width=\"200\"\u003e\n\u003c/p\u003e\n\n# Monaco TextArea Bookmarklet\n\nConvert any textarea into a full-featured Monaco Editor (VS Code's editor engine) with a single click!\n\n## 📌 Installation\n\n### 🖱️ Drag and Drop\n\nYou can open and drag the link from the [demo page](https://kariudo.dev/monoco-textarea-bookmarklet/demo.html) directly to your bookmarks bar.\n\n### 👋🏻 Manually\n\nOr, just add this link to your bookmarks bar:\n\n```javascript\njavascript:(function(){if(window.monacoEditorInstances){var existing=window.monacoEditorInstances.find(function(inst){return inst.textarea===document.activeElement;});if(existing){alert('This textarea already has Monaco editor active');return;}}var t=document.activeElement;if(!t||t.tagName!=='TEXTAREA'){alert('Please focus a textarea first');return;}var originalDisplay=t.style.display;var originalVisibility=t.style.visibility;var originalPosition=t.style.position;var originalWidth=t.style.width;var originalHeight=t.style.height;var computedStyle=window.getComputedStyle(t);var w=t.offsetWidth;var h=Math.max(t.offsetHeight,300);t.style.position='absolute';t.style.visibility='hidden';t.style.pointerEvents='none';var wrapper=document.createElement('div');wrapper.style.position='relative';wrapper.style.width=w+'px';wrapper.style.height=h+'px';t.parentNode.insertBefore(wrapper,t);wrapper.appendChild(t);var c=document.createElement('div');c.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #ccc;box-sizing:border-box;';wrapper.appendChild(c);var fab=document.createElement('button');fab.innerHTML='✕';fab.title='Close Monaco Editor';fab.style.cssText='position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#007acc;color:white;border:none;font-size:18px;cursor:pointer;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.3);transition:background 0.2s;';fab.onmouseover=function(){this.style.background='#005a9e';};fab.onmouseout=function(){this.style.background='#007acc';};wrapper.appendChild(fab);if(!window.monacoEditorInstances){window.monacoEditorInstances=[];}var instance={textarea:t,wrapper:wrapper,container:c,fab:fab,editor:null,originalStyles:{display:originalDisplay,visibility:originalVisibility,position:originalPosition,width:originalWidth,height:originalHeight}};window.monacoEditorInstances.push(instance);var loadMonaco=function(){if(!document.getElementById('monaco-editor-css')){var l=document.createElement('link');l.id='monaco-editor-css';l.rel='stylesheet';l.href='https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.min.css';document.head.appendChild(l);}if(window.monaco){initEditor();return;}if(window.monacoLoading){var checkMonaco=setInterval(function(){if(window.monaco){clearInterval(checkMonaco);initEditor();}},100);return;}window.monacoLoading=true;var sc=document.createElement('script');sc.src='https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js';sc.onload=function(){require.config({paths:{'vs':'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs'}});require(['vs/editor/editor.main'],function(){window.monacoLoading=false;initEditor();});};document.body.appendChild(sc);};var initEditor=function(){var e=monaco.editor.create(c,{value:t.value,language:'javascript',theme:'vs-dark',automaticLayout:true,minimap:{enabled:false},scrollBeyondLastLine:false});instance.editor=e;var syncToTextarea=function(){var newValue=e.getValue();if(t.value!==newValue){t.value=newValue;var evt=new Event('input',{bubbles:true,cancelable:true});t.dispatchEvent(evt);var changeEvt=new Event('change',{bubbles:true,cancelable:true});t.dispatchEvent(changeEvt);if(typeof angular!=='undefined'){var ngEvt=new Event('ng-change',{bubbles:true});t.dispatchEvent(ngEvt);var scope=angular.element(t).scope();if(scope){scope.$apply();}}}};e.onDidChangeModelContent(function(){syncToTextarea();});var removeEditor=function(){if(instance.editor){instance.editor.dispose();}wrapper.parentNode.insertBefore(t,wrapper);wrapper.remove();t.style.display=instance.originalStyles.display||'';t.style.visibility=instance.originalStyles.visibility||'';t.style.position=instance.originalStyles.position||'';t.style.width=instance.originalStyles.width||'';t.style.height=instance.originalStyles.height||'';t.style.pointerEvents='';var idx=window.monacoEditorInstances.indexOf(instance);if(idx\u003e-1){window.monacoEditorInstances.splice(idx,1);}};fab.onclick=removeEditor;};loadMonaco();})();\n```\n\n**To create the bookmarklet:**\n1. Create a new bookmark in your browser\n2. Name it \"Monaco Editor\" (or whatever you prefer)\n3. Paste the entire JavaScript code above as the URL\n4. Save it\n\n## 📖 How to Use\n\n1. **Navigate** to any page with a textarea\n2. **Focus** the textarea by clicking inside it\n3. **Click** the bookmarklet in your bookmarks bar\n4. **Edit** with Monaco Editor overlaying the textarea\n5. **Close** by clicking the ✕ button in the top-right corner to restore the original textarea\n\n## ✨ Features\n\n- ✅ Full-featured Monaco Editor (VS Code's editor engine)\n- ✅ Syntax highlighting for JavaScript (customizable)\n- ✅ Dark theme for comfortable coding\n- ✅ Framework-compatible (Angular, React, Vue, etc.)\n- ✅ Keeps textarea in DOM - only hides it visually\n- ✅ Dispatches proper `input`, `change`, and `ng-change` events\n- ✅ Close button (✕) to toggle back to original textarea\n- ✅ Support for multiple editors on the same page\n- ✅ Auto-resizes with the container\n- ✅ Works with form submissions\n\n## 🔧 How It Works\n\n### Framework Compatibility\n\nThe bookmarklet is designed to work seamlessly with modern JavaScript frameworks:\n\n- The textarea **remains in the DOM** but is made invisible using `visibility: hidden`\n- Monaco Editor is **overlaid on top** in a wrapper element\n- Every change dispatches `input`, `change`, and `ng-change` events\n- For Angular specifically, it also triggers `$scope.$apply()` if available\n- This ensures all framework bindings and validations continue working\n\n### Architecture\n\n```mermaid\ngraph TD\n    subgraph W[\"Wrapper – position: relative\"]\n        T[\"Textarea (hidden)\"]\n        M[\"Monaco Container\u003cbr/\u003e(absolute, overlaid)\"]\n        X[\"✕ Close Button\"]\n    end\n\n    style W fill:#f8f8f8,stroke:#333,stroke-width:2px\n    style T fill:#ffffff,stroke:#999,stroke-dasharray:3 3\n    style M fill:#eef5ff,stroke:#339\n    style X fill:#ffefef,stroke:#933\n\n```\n\n## 🎨 Customization\n\nThe editor is configured for JavaScript with a dark theme by default. To customize, edit the bookmarklet code and look for these settings:\n\n### Language\n\n```javascript\nlanguage: 'javascript'\n```\n\nAvailable options: `'html'`, `'css'`, `'python'`, `'json'`, `'markdown'`, `'typescript'`, `'xml'`, `'sql'`, and many more.\n\n### Theme\n\n```javascript\ntheme: 'vs-dark'\n```\n\nAvailable options:\n- `'vs'` - Light theme\n- `'vs-dark'` - Dark theme (default)\n- `'hc-black'` - High contrast dark theme\n\n### Editor Options\n\nYou can modify the editor configuration in the `monaco.editor.create()` call:\n\n```javascript\nmonaco.editor.create(container, {\n    value: textarea.value,\n    language: 'javascript',\n    theme: 'vs-dark',\n    automaticLayout: true,\n    minimap: { enabled: false },\n    scrollBeyondLastLine: false,\n    // Add more options here\n    fontSize: 14,\n    lineNumbers: 'on',\n    wordWrap: 'on',\n    // See Monaco Editor documentation for all options\n});\n```\n\n## 🚀 Use Cases\n\n- Editing code in GitHub/GitLab issue comments\n- Writing SQL queries in database admin panels\n- Editing JSON in API testing tools\n- Writing scripts in CMS textareas\n- Improving code editors in learning platforms\n- Any web form with a textarea that needs better editing\n\n## ⚠️ Limitations\n\n- Only works with standard textareas (not rich text editors or contenteditable elements)\n- Requires internet connection to load Monaco from CDN (first use only)\n- May not work on pages with strict Content Security Policies\n- May not work with fields inside of iFrames or similar nested sub-documents\n- Monaco Editor is ~2MB and loads from CDN on first use\n\n## 🔒 Privacy \u0026 Security\n\n- No data is sent to external servers\n- Monaco Editor is loaded from Cloudflare's CDN\n- All editing happens locally in your browser\n- The bookmarklet only runs when you explicitly click it\n\n## 📝 License\n\nSee [License](./LICENSE)\n\n## 🤝 Contributing\n\nSuggestions and improvements are welcome! Feel free to open an issue or submit a pull request.\n\n## 🙏 Credits\n\n- [Monaco Editor](https://microsoft.github.io/monaco-editor/) by Microsoft\n- Inspired by the need for better textarea editing across the web and my desire to stop copy pasting code in textarea\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkariudo%2Fmonoco-textarea-bookmarklet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkariudo%2Fmonoco-textarea-bookmarklet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkariudo%2Fmonoco-textarea-bookmarklet/lists"}