on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 2.59 kB
JavaScript
;var i=Object.defineProperty;var a=(l,e,t)=>e in l?i(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t;var n=(l,e,t)=>a(l,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./DomUtils.cjs"),y=require("./StyleManager.cjs");class d{constructor(e){n(this,"domUtils");n(this,"styleManager");this.container=e,this.domUtils=new c.DomUtils(e),this.styleManager=new y.StyleManager}toggleStyle(e){const t=window.getSelection();if(!t)return;const o=this.domUtils.getSelectedRoot(t);o&&o.forEach(s=>{s.nodeType===Node.TEXT_NODE&&(s=this.wrapTextNodeInSpan(s));const r=s;this.styleManager.has(r,e)?this.domUtils.removeStyleFromNode(s,e,this.styleManager.remove.bind(this.styleManager)):this.domUtils.applyStyleToNode(s,e,this.styleManager.set.bind(this.styleManager))})}setColor(e){this.applyStyleToSelectedNodes(t=>{t.style.color=e})}setBackgroundColor(e){this.applyStyleToSelectedNodes(t=>{t.style.backgroundColor=e})}setFont(e,t,o){this.applyStyleToSelectedNodes(s=>{s.style.fontFamily=e,s.style.fontSize=t,s.style.lineHeight=o})}clearFont(){this.applyStyleToSelectedNodes(e=>{e.style.removeProperty("font-family"),e.style.removeProperty("font-size"),e.style.removeProperty("line-height")})}applyBlock(e="span"){this.applyStyleToSelectedNodes(t=>{const o=document.createElement(e);o.textContent=t.textContent,o.classList.add("format-text-block"),t.parentNode&&t.parentNode.replaceChild(o,t)})}clearBlock(){this.applyStyleToSelectedNodes(e=>{const t=document.createElement("span");t.textContent=e.textContent,e.style.removeProperty("font-family"),e.style.removeProperty("font-size"),e.style.removeProperty("line-height"),e.style.removeProperty("format-text-block"),e.parentNode&&e.parentNode.replaceChild(t,e)})}applyStyleToSelectedNodes(e){const t=window.getSelection();if(!t)return;const o=this.domUtils.getSelectedRoot(t,!1);o&&o.forEach(s=>{s.nodeType===Node.ELEMENT_NODE&&s!==this.container&&e(s)})}wrapTextNodeInSpan(e){var o;const t=document.createElement("span");return(o=e.parentNode)==null||o.replaceChild(t,e),t.appendChild(e),t}hasClass(e){const t=window.getSelection();if(!t||t.rangeCount===0)return!1;const o=this.domUtils.getSelectedRoot(t,!0);return o?o.some(s=>{if(s.nodeType===Node.ELEMENT_NODE){const r=s;return this.styleManager.has(r,e)}return!1}):!1}getStyle(e){const t=window.getSelection();if(!t||t.rangeCount===0)return null;const o=this.domUtils.getSelectedRoot(t,!0);if(!o)return null;for(const s of o)return s.nodeType===Node.ELEMENT_NODE?s.style[e]??null:null}}exports.TextFormatter=d;