")},olist:{icon:"#",title:"Ordered List",result:()=>s("insertOrderedList")},ulist:{icon:"•",title:"Unordered List",result:()=>s("insertUnorderedList")},code:{icon:"</>",title:"Code",result:()=>s(r,"")},line:{icon:"―",title:"Horizontal Line",result:()=>s("insertHorizontalRule")},link:{icon:"🔗",title:"Link",result(){let e=window.prompt("Enter the link URL");e&&s("createLink",e)}},image:{icon:"Img",title:"Image",result(){let e=window.prompt("Enter the image URL");e&&s("insertImage",e)}},html:{icon:"HTML",title:"Html",result({content:e}){let t=e.parentNode,n=t.querySelector(".htmlContent"),i=t.querySelector(".tex-content");n&&("none"===n.style.display?(n.style.display="block",i.style.display="none"):(n.style.display="none",i.style.display="block"))}},textColor:{icon:"A",title:"Text Color",result(){}},textBackColor:{icon:'A',title:"Text Color",result(){}},indent:{icon:"›",title:"Indent",result:()=>s("indent")},outdent:{icon:"‹",title:"Outdent",result:()=>s("outdent")},undo:{icon:"↶",title:"Undo",result:()=>s("undo")},redo:{icon:"↷",title:"Redo",result:()=>s("redo")},justifyCenter:{icon:"⇥⇤",title:"Justify Center",result:()=>s("justifyCenter")},justifyFull:{icon:"⇤⇥",title:"Justify Full",result:()=>s("justifyFull")},justifyLeft:{icon:"⇤",title:"Justify Left",result:()=>s("justifyLeft")},justifyRight:{icon:"⇥",title:"Justify Right",result:()=>s("justifyRight")}},d=e=>{var t=document.querySelector(`[tex-id="${e.id}"]`),n=document.getElementById(e.id),i=t.querySelector(".tex-content"),r=t.querySelector(".tex-actionbar");if(t){var l=i.cloneNode(!0);i.parentNode.replaceChild(l,i);var o=r.cloneNode(!0);r.parentNode.replaceChild(o,r),o.remove(),"textarea"===n.tagName.toLowerCase()?(n.style.display="block",t.remove()):(t.innerHTML=l.innerHTML,t.removeAttribute("tex-id"),t.classList.remove("theme-light","theme-dark","tex-container"))}},m=e=>{let t=document.querySelector(`[tex-id="${e.id}"]`),n=t.querySelector(".tex-content");return n.innerHTML},y=e=>{var u=e.theme||"light",d=e[i]||"div",m=a("div");m.className="tex-container",m.classList.add(`theme-${u}`),m.setAttribute("tex-id",e.element.id);var y=a("div");y.className="tex-actionbar",o(m,y);var p=e.element.content=a("div");p.contentEditable=!0,p.className="tex-content tex-editor","textarea"===e.element.tagName.toLowerCase()?p.innerHTML=e.element.value:p.innerHTML=e.element.innerHTML,p.onkeydown=e=>{var t;"Enter"===e.key&&"blockquote"===(t=r,document.queryCommandValue(t))&&setTimeout(()=>s(r,`<${d}>`),0)},o(m,p),e.element.parentNode.insertBefore(m,e.element.nextSibling);let f=[];e.buttons?(e.plugins&&(console.log(e.plugins),e.plugins.forEach(function(e){c[e.name]=e})),f=e.buttons.map(e=>{var t=c[e];if(t)return{icon:t.icon,title:t.title,key:e,result:t.result}}).filter(e=>void 0!==e)):e.actions&&(f=e.actions.map(e=>"string"==typeof e?c[e]:"custom"===e.name?{icon:e.icon,title:e.title,result:e.result}:c[e.name]?{...c[e.name],...e}:e)),f.forEach(e=>{var i=a("button");if(i.className="tex-button",i.innerHTML=""+e.icon+"",i.title=e.title,i.setAttribute("type","button"),i.onclick=()=>e.result({action:e,content:p,button:i})&&p.focus(),e.state){var r=()=>i.classList[e.state()?"add":"remove"]("tex-button-selected");l(p,"keyup",r),l(p,"mouseup",r),l(i,"click",r)}o(y,i),"fontSize"==e.key&&n(i),"textColor"==e.key&&t(i,"textColor"),"textBackColor"==e.key&&t(i,"textBackColor")}),e.cssStyle&&s("styleWithCSS"),s(i,d),"textarea"===e.element.tagName.toLowerCase()?e.element.style.display="none":(document.getElementById(e.element.id).remove(),m.id=e.element.id);var g=a("textarea");return g.setAttribute("class","htmlContent"),o(m,g),g.value=p.innerHTML,g.style.display="none",p.oninput=({target:{firstChild:t}})=>{t&&3===t.nodeType?s(r,`<${d}>`):"
"===p.innerHTML&&(p.innerHTML=""),e.onChange(p.innerHTML),"textarea"===e.element.tagName.toLowerCase()&&(e.element.value=p.innerHTML),g.value=p.innerHTML},g.oninput=({target:{firstChild:t}})=>{p.innerHTML=g.value,e.element.value=p.innerHTML,e.onChange(p.innerHTML)},e.element};e.exec=s,e.init=y,e.destroy=d,e.getContent=m,e.default={exec:s,init:y,destroy:d,getContent:m},Object.defineProperty(e,"__esModule",{value:!0})});
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | TEX is a ultra-lightweight and straightforward JavaScript library for creating rich text editors (WYSIWYG) directly in the browser. It is designed to work with both `
49 | ```
50 |
51 | ## Usage
52 |
53 | ### Initialization
54 |
55 | To initialize TEX, use the `tex.init()` method, passing in an object with the desired settings. Here's how you can do it:
56 |
57 | ```javascript
58 | const tex = window.tex;
59 |
60 | tex.init({
61 | element: document.getElementById("editor"),
62 | buttons: ['bold', 'italic', 'underline', 'textColor', 'heading1', 'heading2', 'paragraph', 'removeFormat', 'olist', 'ulist', 'code', 'line', 'link', 'image', 'html'],
63 | onChange: (content) => {
64 | console.log("Editor :", content);
65 | }
66 | });
67 | ```
68 |
69 | ### API
70 | ```javascript
71 | // ES6
72 | import tex from 'tex'
73 | // or
74 | import { exec, init, destroy, getContent } from 'tex'
75 | ```
76 |
77 | ### Parameters
78 |
79 | - `element`: The HTML element (either `