plugin.min.js

const languages=[{text:"HTML/XML",value:"html"},{text:"CSS",value:"css"},{text:"JavaScript",value:"javascript"},{text:"TypeScript",value:"typescript"},{text:"JSON",value:"json"},{text:"PHP",value:"php"},{text:"Python",value:"python"},{text:"Ruby",value:"ruby"},{text:"Rust",value:"rust"},{text:"Markdown",value:"markdown"},{text:"C#",value:"csharp"},{text:"C++",value:"cpp"},{text:"C",value:"c"},{text:"Java",value:"java"},{text:"Go",value:"go"},{text:"Swift",value:"swift"},{text:"SQL",value:"sql"},{text:"Bash",value:"shell"},{text:"YAML",value:"yaml"},{text:"PowerShell",value:"powershell"},];tinymce.PluginManager.add("advcodesample",e=>{let t=()=>{let t=`<dialog id="advcodesample" class="modal" style=" width: 90%; height: 90%; background-color: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 10px; color:#2b2b2b; "> <div style=" display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0; height: fit-content; "> <p style=" font-size: 1.2rem; font-family: inherit; font-weight: bold; margin: 0; line-height: 1; opacity: 0.8; "> Insert Code Sample </p><button id="closeDialog" style=" padding: 0.25rem; cursor: pointer; font-size: 1.5rem; z-index: 50; background-color: transparent; outline: none; border: none; color: currentColor; " title="Close" onmouseenter="this.style.color='#ef4444';" onmouseleave="this.style.color='currentColor';"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 6 6 18" /> <path d="m6 6 12 12" /> </svg> </button> </div><div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; max-width: 100%; padding: 10px; box-shadow: 0 4px 2px -2px rgba(34,47,62,.1),0 8px 8px -4px rgba(34,47,62,.07);" id="editor-header"><div id="editorBtns" style="display:flex; gap:10px; align-items:center;"> <button id="undoBtn" style="background-color:transparent;border:none;" disabled= true><svg viewBox="0 0 21 21" fill="currentColor" height="24" width="24"><g fill="currentColor"><path d="M9 10h6c1.654 0 3 1.346 3 3s-1.346 3-3 3h-3v2h3c2.757 0 5-2.243 5-5s-2.243-5-5-5H9V5L4 9l5 4v-3z" /></g> </svg></button><button id="redoBtn" style="background-color:transparent;border:none;" disabled= true><svg viewBox="0 0 21 21" fill="currentColor" height="24" width="24"><g fill="currentColor"> <path d="M9 18h3v-2H9c-1.654 0-3-1.346-3-3s1.346-3 3-3h6v3l5-4-5-4v3H9c-2.757 0-5 2.243-5 5s2.243 5 5 5z" /></g></svg></button> </div> <div id="select-input"><label for="language" style="font-weight: 400; ">Language:</label> <select id="language" style=" max-width: 50%; min-width:fit-content; font: 14px; padding:0 4px; border:none; outline:none; border-bottom:1px solid #ccc; background-color:transparent; color:currentColor;" onfocus="this.style.borderBottom='1px solid #006ce7';" onblur="this.style.borderBottom='1px solid #ccc';"> ${languages.map(e=>`<option value="${e.value}">${e.text}</option>`).join("")} </select></div> </div> <div id="editorContainer" style="height: 65%; margin: 5px 0; padding: 5px 0;"></div> <div style=" display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 100%; padding: 10px; justify-content: space-between; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.2); border-radius:8px; "> <div id="font-size-btns" style=" display: flex; gap: 10px; align-items: center; flex-wrap: wrap; "> <button id="themeBtn" class="dialog-btn" style=" border-radius: 5px; padding: 8px 10px; border: none; cursor: pointer; background-color: #2e2e2e; color: white; "> Dark Theme </button> <button id="fontPlusBtn" class="dialog-btn" title="Increase font size" style=" border-radius: 5px; padding: 8px 10px; border: none; cursor: pointer; background-color: #e5e7eb; color: #222; "> T+ </button> <button id="fontMinusBtn" class="dialog-btn" title="Decrease font size" style=" border-radius: 5px; padding: 8px 10px; border: none; cursor: pointer; background-color: #e5e7eb; color: #222; "> T- </button> </div> <div id="format-btns" style=" display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"> <button id="cancelBtn" class="dialog-btn" style=" border-radius: 5px; padding: 8px 10px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; background-color: #e5e7eb; " onmouseover="this.style.backgroundColor='#006ce7'; this.style.color='white';" onmouseout="this.style.backgroundColor='#e5e7eb'; this.style.color='#222';"> Cancel </button> <button id="saveBtn" class="dialog-btn" style=" border-radius: 5px; padding: 8px 10px; border: none; cursor: pointer; background-color: #006ce7; color: white; "> Save </button> </div> </div> </dialog>`;document.body.insertAdjacentHTML("beforeend",t);let o="vs-light",n=monaco.editor.create(document.getElementById("editorContainer"),{value:null,language:"html",theme:o,automaticLayout:!0,lineNumbers:"on",readOnly:!1,minimap:{enabled:!0,side:"right",size:"proportional"},showFoldingControls:"always",foldGutter:!1,wrappingIndent:"same",wordWrap:"on",folding:!0,foldingStrategy:"auto",formatOnType:!0,formatOnPaste:!0,scrollBeyondLastLine:!1}),l=()=>{let e=document.getElementById("editorContainer"),t=document.getElementById("advcodesample");"vs-dark"===o?(monaco.editor.setTheme("vs-light"),c.textContent="Dark Theme",c.style.backgroundColor="#2E2E2E",c.style.color="#fff",e.querySelector(".margin").style.backgroundColor="#f5f5f5",e.querySelector(".line-numbers").style.color="#000",t.style.backgroundColor="#fff",t.style.color="#2b2b2b",t.style.borderColor="#ccc",o="vs-dark",o="vs-light"):(monaco.editor.setTheme("vs-dark"),c.textContent="Light Theme",c.style.backgroundColor="#e5e7eb",c.style.color="#000",e.querySelector(".margin").style.backgroundColor="inherit",e.querySelector(".line-numbers").style.color="#fff",t.style.backgroundColor="#2b2b2b",t.style.color="#fff",t.style.borderColor="#1e1e1e",o="vs-dark")},r=document.getElementById("closeDialog"),a=document.getElementById("cancelBtn"),i=document.getElementById("fontPlusBtn"),d=document.getElementById("fontMinusBtn"),s=document.getElementById("language"),c=document.getElementById("themeBtn"),u=document.getElementById("saveBtn");document.getElementById("undoBtn"),document.getElementById("redoBtn"),c.addEventListener("click",l),s.addEventListener("change",e=>{let t=e.target.value;monaco.editor.setModelLanguage(n.getModel(),t),n.setValue("")});let p=14;function g(){u.addEventListener("click",()=>{let t=n.getValue().trim();if(!t){b();return}let o=s.value;e.insertContent(`<pre class="language-${o}"><code>${escapeHTML(t)}</code></pre>`),n.setValue(""),b()})}function b(){let e=document.getElementById("advcodesample");e.close(),e.remove()}i.addEventListener("click",()=>{p+=1,n.updateOptions({fontSize:p})}),d.addEventListener("click",()=>{p>10&&(p-=1,n.updateOptions({fontSize:p}))}),u.addEventListener("click",()=>{g()}),r.addEventListener("click",()=>{b()}),a.addEventListener("click",()=>{b()})},o=()=>{t(),document.getElementById("advcodesample").showModal()};e.ui.registry.addIcon("advcode-sample",`<svg viewBox="0 0 1024 1024" fill="currentColor" height="24" width="24"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM513.1 518.1l-192 161c-5.2 4.4-13.1.7-13.1-6.1v-62.7c0-2.3 1.1-4.6 2.9-6.1L420.7 512l-109.8-92.2a7.63 7.63 0 01-2.9-6.1V351c0-6.8 7.9-10.5 13.1-6.1l192 160.9c3.9 3.2 3.9 9.1 0 12.3zM716 673c0 4.4-3.4 8-7.5 8h-185c-4.1 0-7.5-3.6-7.5-8v-48c0-4.4 3.4-8 7.5-8h185c4.1 0 7.5 3.6 7.5 8v48z" />
</svg>`),e.ui.registry.addButton("advcodesample",{icon:"advcode-sample",tooltip:"Insert/Edit Code Sample",shortcut:"meta+Alt+C",onAction:o}),e.ui.registry.addMenuItem("advcodesample",{text:"Insert/Edit Code Sample",icon:"code-sample",onAction:o})});