smallest-text-editor/index.js

Javascript text editor that has only basic functions (bold, italic, underline and text color). It does not depend on other packages and takes up very little space.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,_toPropertyKey(c.key),c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}function _defineProperty(a,b,c){return b=_toPropertyKey(b),b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"===_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!==_typeof(a)||null===a)return a;var c=a[Symbol.toPrimitive];if(c!==void 0){var d=c.call(a,b||"default");if("object"!==_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}var e=/*#__PURE__*/function(){function e(a){_classCallCheck(this,e),_defineProperty(this,"ready",!1),0===a.indexOf("#")&&a.substring(1),this.divId="#"+a,this.init()}return _createClass(e,[{key:"stylize",value:function stylize(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;document.execCommand(a,b,c)}},{key:"init",value:function init(){var a=this;if(this.ready=!1,"smallest-text-editor"===this.divId)return void console.error("The assigned id must not be 'smallest-text-editor'");var b=5e3,c=setInterval(function(){var d=document.querySelector(a.divId)||null;if(d){var e=d.querySelector("#smallest-text-editor")||null;if(e)return;clearInterval(c),a.buildEditor(),a.ready=!0}b-=100,0>=b&&(clearInterval(c),console.error("No element with the id '"+a.divId+"' was found."))},100)}},{key:"buildEditor",value:function buildEditor(){var a=this,b=document.createElement("div");b.id="smallest-text-editor",b.setAttribute("contenteditable","true"),b.style.padding="5px",b.style.minHeight="50px",b.style.width="100%",b.style.border="1px solid #f3e7e7",b.style.borderRadius="5px",b.style.position="relative",b.style.background="#fff";var c=document.createElement("div");c.id="smallest-text-editor-menu",c.style.display="flex",c.style.background="#fff",c.style.borderRadius="3px";var d=document.createElement("button");d.onclick=function(b){b.preventDefault(),a.stylize("bold")},d.innerHTML="B",d.style.fontSize="bold",d.style.margin="2px 4px",d.style.cursor="pointer";var e=document.createElement("button");e.onclick=function(b){b.preventDefault(),a.stylize("italic")},e.innerHTML="I",e.style.fontStyle="italic",e.style.margin="2px 4px",e.style.cursor="pointer";var f=document.createElement("button");f.onclick=function(b){b.preventDefault(),a.stylize("underline")},f.innerHTML="U",f.style.textDecoration="underline",f.style.margin="2px 4px",f.style.cursor="pointer";var g=document.createElement("button");g.id="smallest-text-editor-text-color-picker",g.innerHTML="A",g.style.color="#eb5e1a",g.style.fontWeight="bold",g.style.margin="2px 4px",g.style.cursor="pointer",g.style.display="flex",g.style.alignItems="center";var h=document.createElement("input");h.type="color",h.id="input-colorpicker",h.style.margin="0",h.style.padding="0",h.style.border="0",h.style.height="110%",h.style.width="20px",h.style.cursor="pointer",h.value="#0000ff",g.appendChild(h),h.oninput=function(b){a.stylize("foreColor",!1,b.srcElement.value)},c.appendChild(d),c.appendChild(e),c.appendChild(f),c.appendChild(g),document.querySelector(this.divId).appendChild(c),document.querySelector(this.divId).appendChild(b)}},{key:"getValue",value:function getValue(){return document.querySelector(this.divId+" #smallest-text-editor").innerHTML}},{key:"setValue",value:function setValue(a){var b=this;null===(document.querySelector(this.divId+" #smallest-text-editor")||null)&&this.init();var c=5e3,d=setInterval(function(){b.ready&&(clearInterval(d),document.querySelector(b.divId+" #smallest-text-editor").innerHTML=a),c-=50,0>=c&&clearInterval(d)},50)}},{key:"clear",value:function clear(){document.querySelector(this.divId+" #smallest-text-editor").innerHTML=""}},{key:"destroy",value:function destroy(){document.querySelector(this.divId+" #smallest-text-editor").remove(),document.querySelector(this.divId+" #smallest-text-editor-menu").remove()}}]),e}();exports.default=e;