@live-html-editor/browser
Version:
An ideal html-editor for development purposes. It has a NEAT output + capability to save directly from browser into your sources
3 lines (2 loc) • 20 kB
JavaScript
const t="LHE:tools-position";class e{static makeElementDraggable(t,n,i){e.element=t,e.handlerEl=n,e.onMouseUp=i,n.addEventListener("mousedown",e.onMouseDown,!1)}static onMouseDown(t){t.target===e.handlerEl&&(t.preventDefault(),e.x=t.clientX,e.y=t.clientY,document.addEventListener("mousemove",e.onMouseMove),document.addEventListener("mouseup",t=>{document.removeEventListener("mousemove",e.onMouseMove);const n=e.element.offsetLeft+(t.clientX-e.x),i=e.element.offsetTop+(t.clientY-e.y);e.onMouseUp(n,i,t)},{once:!0}))}static onMouseMove(t){t.preventDefault();const n=e.element.offsetLeft+(t.clientX-e.x),i=e.element.offsetTop+(t.clientY-e.y);e.element.style.left=n+"px",e.element.style.top=i+"px",e.x=t.clientX,e.y=t.clientY}}function n(t,e,i){for(const[o,A]of Object.entries(i)){const i=void 0===e?void 0:e[o];"object"!=typeof A||null===A||Array.isArray(A)?t[o]=void 0===i?A:i:(t[o]={},n(t[o],i,A))}}const i="\n\t/* Default styles of source-preview. Can be overridden by consumer: */\n\t.editable-source {\n\t\twhite-space: pre-wrap;\n\t\tword-wrap: break-word;\n\t\ttab-size: 4;\n\t}\n\n\t#htmlEditorToolsContainer {\n\t\tpadding: 32px;\n\t\tposition: fixed;\n\t\tleft: 0;\t\t/* default */\n\t\ttop: 0;\t\t/* default */\n\t\topacity: 0.3;\n\t\ttransition: opacity 0.5s;\n\t}\n\t\n\t#htmlEditorToolsContainer:hover {\n\t\topacity: 1;\n\t}\n\t\n\t#htmlEditorToolsContainer > form {\n\t\tbackground-color: #9FFC;\n\t\tcursor: move;\n\t\tpadding: 16px;\n\t}\n\t#htmlEditorToolsContainer > form > * {\n\t\tcursor: auto;\n\t}\n\n\t.intLink {\n\t\t cursor: pointer;\n\t}\n\t\n\timg.intLink {\n\t\t border: 0;\n\t}\n",o="data-liveEditor-formatDoc1",A="data-liveEditor-formatDoc2",s="data-liveEditor-formatDocLink",l="liveEditor-switchMode",a="liveEditor-submitBotton",r=`\n\t<aside id="htmlEditorToolsContainer">\n\t\t<form>\n\t\t\t <div id="toolbar1">\n\t\t\t\t\t<select ${o}="formatblock">\n\t\t\t\t\t\t <option selected>- formatting -</option>\n\t\t\t\t\t\t <option value="h1">Title 1 <h1></option>\n\t\t\t\t\t\t <option value="h2">Title 2 <h2></option>\n\t\t\t\t\t\t <option value="h3">Title 3 <h3></option>\n\t\t\t\t\t\t <option value="h4">Title 4 <h4></option>\n\t\t\t\t\t\t <option value="h5">Title 5 <h5></option>\n\t\t\t\t\t\t <option value="h6">Subtitle <h6></option>\n\t\t\t\t\t\t <option value="p">Paragraph <p></option>\n\t\t\t\t\t\t <option value="pre">Preformatted <pre></option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<select ${o}="fontname">\n\t\t\t\t\t\t <option class="heading" selected>- font -</option>\n\t\t\t\t\t\t <option>Arial</option>\n\t\t\t\t\t\t <option>Arial Black</option>\n\t\t\t\t\t\t <option>Courier New</option>\n\t\t\t\t\t\t <option>Times New Roman</option>\n\t\t\t\t\t\t <option>IRNazanin</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<select ${o}="fontsize">\n\t\t\t\t\t\t <option class="heading" selected>- size -</option>\n\t\t\t\t\t\t <option value="1">Very small</option>\n\t\t\t\t\t\t <option value="2">A bit small</option>\n\t\t\t\t\t\t <option value="3">Normal</option>\n\t\t\t\t\t\t <option value="4">Medium-large</option>\n\t\t\t\t\t\t <option value="5">Big</option>\n\t\t\t\t\t\t <option value="6">Very big</option>\n\t\t\t\t\t\t <option value="7">Maximum</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<select ${o}="forecolor">\n\t\t\t\t\t\t <option class="heading" selected>- color -</option>\n\t\t\t\t\t\t <option value="red">Red</option>\n\t\t\t\t\t\t <option value="blue">Blue</option>\n\t\t\t\t\t\t <option value="green">Green</option>\n\t\t\t\t\t\t <option value="black">Black</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<select ${o}="backcolor">\n\t\t\t\t\t\t <option class="heading" selected>- background -</option>\n\t\t\t\t\t\t <option value="red">Red</option>\n\t\t\t\t\t\t <option value="green">Green</option>\n\t\t\t\t\t\t <option value="black">Black</option>\n\t\t\t\t\t</select>\n\t\t\t </div>\n\t\t\t <div id="toolbar2">\n\t\t\t\t\t<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oEditable.innerHTML=sDefTxt}"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7"/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Print" onclick="printDoc();"\n\t\t\t\t\t\t src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Undo" ${A}="undo"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Redo" ${A}="redo"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Remove formatting" ${A}="removeFormat"\n\t\t\t\t\t\t src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Bold" ${A}="bold"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Italic" ${A}="italic"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Underline" ${A}="underline"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7"/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Left align" ${A}="justifyleft"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Center align" ${A}="justifycenter"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Right align" ${A}="justifyright"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Numbered list" ${A}="insertorderedlist"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Dotted list" ${A}="insertunorderedlist"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Quote" ${A}="formatblock,blockquote"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7"/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Delete indentation" ${A}="outdent"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Add indentation" ${A}="indent"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Hyperlink" id="${s}"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Cut" ${A}="cut"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Copy" ${A}="copy"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw=="/>\n\t\t\t\t\t\n\t\t\t\t\t<img class="intLink" title="Paste" ${A}="paste"\n\t\t\t\t\t\t src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs="/>\n\t\t\t\t\t\n\t\t\t\t\t<svg class="intLink" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">\n\t\t\t\t\t\t <title>Rtl</title>\n\t\t\t\t\t\t <path d="M14 3v8l-4-4m-7 7V6C1 6 0 5 0 3s1-3 3-3h7v2H9v12H7V2H5v12H3z"/>\n\t\t\t\t\t</svg>\n\t\t\t </div>\n\t\n\t\t\t <input style="cursor: pointer" type="checkbox" id="${l}" />\n\t\t\t <label style="cursor: pointer" for="${l}">Show HTML</label>\n\t\n\t\t\t <input type="button" value="Save" style="cursor:pointer" id="${a}" />\n\t\t</form>\n\t</aside>`,c={continuationIndent:"",tabLength:4,wrapOn:120};class d{constructor(t=c){!function t(e,n,i){for(const[o,A]of Object.entries(i)){const i=void 0===n?void 0:n[o];"object"!=typeof A||null===A||Array.isArray(A)?e[o]=void 0===i?A:i:(e[o]={},t(e[o],i,A))}}(this,t,c),this.tabLength_1=this.tabLength-1,this.continuationIndentVLength=this.getVisualLength(this.continuationIndent)}wrap(t,e){const n=[],i=this.tabLength,o=t.length,A=e+this.continuationIndent,s=this.getVisualLength(A);let l=0,a="";t:for(let e,r=0,c=0,d=0,h=0,u=0,g=!1;r<o;++r){c+="\t"===(e=t[r])?i:1;e:do{if("\n"===e)break e;const i=/^[\S\x0A]$/.test(e);n:do{if(c>this.wrapOn)if(g||(g=!0)&&(u-h>s||this.getVisualLength(t.slice(h,u))>s)){if(i)break n}else{if(i)continue t;g=!1}else if(i)continue t;u=r+1,d=c;continue t}while(0);n.push(u),a+=t.slice(l,u)+"\n"+A,c=s+(c-d),d=s,h=u,l=u,g=!1;continue t}while(0);h=r,d=0,c=0}return{markers:n,wrappedText:a.slice(0,a.length-A.length)+t.slice(l,o)}}getVisualLength(t){return t.length+this.tabLength_1*(t.split("\t").length-1)}}class h{constructor(t=u){n(this,t,u),this.wrapper=new d(t)}beautify(t){return this.beautifyR(t,null)}beautifyR(t,e){let n,i,o,A,s;null===e?n=i=o=A=s="":(i="\n"+(n=e+this.indent),o="\n"+e,A=function(t){const e=t.outerHTML,n=e.length,i="/"===e[n-2]?n:n-t.innerHTML.length-(t.tagName.length+3);return e.slice(0,i)}(t),s=`</${t.tagName.toLowerCase()}>`);const l=("\n"+(this.keepIntentsOnEmptyLines?n:"")).repeat(this.emptyLinesBetweenBlocks)+"\n"+n,a=t.childNodes,r=a.length,c=r-1;let d,u=!1,g="";for(let t=0;t<r;++t){let e;const A=t;for(;e=a[t],!h.BLOCKS.test(e.nodeName)&&++t!==r;);let s,p,m;if(t>A?(--t,d=!1):d=!0,0!==A&&t!==c?(s=p=l,m=l):t!==c?(s=i,p=l,m=i):0!==A?(s=l,p=o,m=o):(s=i,p=o,m=""),d)u&&(g+=m),u=!0,g+=this.beautifyR(e,n),t===c&&(g+=m);else{u=!1;let i="";if(0===this.wrapOn){for(let n=A;n<=t;++n)(e=a[n]).nodeType===Node.ELEMENT_NODE?i+=e.outerHTML:i+=e.nodeValue;if(i===m){g+=i;continue}}else{let o="",s="";for(let n=A;n<=t;++n){if((e=a[n]).nodeType!==Node.ELEMENT_NODE){let t=e.nodeValue;o+=t,s+=t=t.replace(/(\[!\[\S*?)(\s+)(\S*?])/g,"$1●$3");continue}const t=e.outerHTML;o+=t;const i=e.innerHTML,A=t.length,l="/"===t[A-2]?A:A-i.length-(e.nodeName.length+3);let r=t.slice(0,l);s+=(r=r.replace(/\s/g,"●"))+t.slice(l)}if(o===m){g+=o;continue}const l=this.wrapper.wrap(s,n).markers;let r=0;const c=n+this.continuationIndent;for(const t of l)r>0&&(i+=c),i+=o.slice(r,t)+"\n",r=t;r>0&&(i+=c),i+=o.slice(r)}const o=/^\s*/.exec(i)[0];if(o.length===i.length){g+=m;continue}const l=/\s*$/.exec(i)[0];g+=o===s&&l===p?i:s+i.slice(o.length,i.length-l.length)+p}}return A+g+s}}h.BLOCKS=/^(?:P|H[123456]|BLOCKQUOTE|[UO]L|LI|DIV)$/;const u={indent:"\t",continuationIndent:"",keepIntentsOnEmptyLines:!0,emptyLinesBetweenBlocks:1,tabLength:4,wrapOn:120},g="No editable selected!";const p=new class{constructor(){this.activeEditor=null,this.lastActiveElement=null,this.lastActiveEditor=null,this.editors=[],this.idAttr="[data-live-editor]",this.recordLastFocusedElement=(t=>{this.lastActiveElement=t.target})}config(t=m){n(this,t,m),this.beautifier=new h(this.codeStyle);let e=document.querySelectorAll(this.idAttr);0===e.length&&(this.idAttr="[live-editor]",e=document.querySelectorAll(this.idAttr));for(const t of e){const e={editable:t,index:t.getAttribute(this.idAttr),initDoc:t.innerHTML};t.addEventListener("focusout",()=>{this.lastActiveEditor=e,this.activeEditor=null}),t.addEventListener("focus",()=>{this.activeEditor=e}),this.editors.push(e)}this.styles=document.createElement("style"),this.styles.innerHTML=i;const o=document.createElement("template");o.innerHTML=r.trim(),this.toolsContainer=o.content.firstChild,this.tools=this.toolsContainer.firstElementChild,this.setListenersToToolsArea()}setListenersToToolsArea(){{const t=o,e=this.tools.querySelector("#toolbar1").querySelectorAll(`[${t}]`);for(const n of e){const e=n.getAttribute(t);n.addEventListener("change",()=>{this.formatDoc(e,n[n.selectedIndex].value),n.selectedIndex=0})}}{const t=A,e=this.tools.querySelector("#toolbar2"),n=e.querySelectorAll(`[${t}]`);for(const e of n){const n=e.getAttribute(t).split(",");e.addEventListener("click",()=>this.formatDoc(...n))}e.querySelector("#"+s).addEventListener("click",()=>{const t=prompt("URL?","http://")||"";this.formatDoc("createlink",t)})}this.switchMode=this.tools.querySelector("#"+l),this.switchMode.addEventListener("change",()=>this.switchMode.checked?p.setSourceMode():p.setDocMode()),this.tools.querySelector("#"+a).addEventListener("click",this.submit.bind(this))}start(){document.getElementsByTagName("head")[0].appendChild(this.styles),document.body.appendChild(this.toolsContainer),e.makeElementDraggable(this.toolsContainer,this.tools,(e,n)=>(function(t,e,n){document.cookie=`${t}=${e}; expires=${new Date(n(new Date)).toUTCString()}`})(t,`(${e},${n})`,t=>t.setDate(t.getDate()+30)));const n=function(t){const e=document.cookie.match(new RegExp("(^| )"+t+"=([^;]+)"));return e?e[2]:null}(t);if(n){const t=/\((\d+)\s*,\s*(\d+)\)/.exec(n);this.toolsContainer.style.left=t[1]+"px",this.toolsContainer.style.top=t[2]+"px"}for(const t of this.editors)t.editable.contentEditable="true";document.addEventListener("focusout",this.recordLastFocusedElement,!0)}shutdown(){document.removeEventListener("focusout",this.recordLastFocusedElement,!0);for(const t of this.editors)t.editable.contentEditable="false";document.body.removeChild(this.toolsContainer),document.getElementsByTagName("head")[0].removeChild(this.styles)}checkLastActiveEditor(){return null!==this.lastActiveEditor&&this.lastActiveEditor.editable===this.lastActiveElement||(alert(g),!1)}submit(){if(!this.checkLastActiveEditor())return;const t=this.lastActiveEditor,e=t.editable,n=this.beautifier.beautify(e);if(!this.validateMode(e))return;const i={htmlDocument:n,sourceFiles:this.sourceFiles.map(e=>({path:e.path,domPath:e.domPath?e.domPath(t.index):null,regexp:e.regexp?e.regexp(t.index).toString():null}))};fetch(this.serverUrl,{headers:{Accept:"application/json","Content-Type":"application/json; charset=utf-8"},method:"POST",body:JSON.stringify(i)}).then(t=>(console.log(t),t.json()),t=>console.error(t)).then(t=>console.log(t.logs)).catch(t=>console.error(t))}formatDoc(t,e){if(!this.checkLastActiveEditor())return;const n=this.lastActiveEditor.editable;this.validateMode(n)&&(document.execCommand(t,!1,e),n.focus())}validateMode(t){return!this.switchMode.checked||(alert('Uncheck "Show HTML".'),t.focus(),!1)}setSourceMode(){for(const t of this.editors){const e=t.editable;e.contentEditable="false";const n=this.beautifier.beautify(e);e.innerHTML="";const i=document.createElement("pre");i.setAttribute("dir","auto"),i.className="editable-source",i.innerText=n,i.contentEditable="true",e.appendChild(i),i.focus()}}setDocMode(){for(const t of this.editors){const e=t.editable;e.innerHTML=e.firstElementChild.innerText,e.contentEditable="true",e.focus()}}},m={serverUrl:"http://127.0.0.1:3000",codeStyle:u,sourceFiles:[]};export{m as DEF_OPTIONS,p as editorManager};
//# sourceMappingURL=bundle.esm.js.map