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) • 6.38 kB
JavaScript
"use strict";var S=Object.defineProperty;var C=(u,e,t)=>e in u?S(u,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):u[e]=t;var d=(u,e,t)=>C(u,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const y=require("../ToolbarPlugin/utils.cjs"),A=require("../../core/ui/PopupManager.cjs"),c=require("../../utils/helpers.cjs"),I=require("../../icons/style.svg.cjs"),m=require("./constants.cjs");class T{constructor(){d(this,"name","block-style");d(this,"editor",null);d(this,"toolbarButton",null);d(this,"popup",null);d(this,"selectedElement",null)}initialize(e){this.editor=e,this.popup=new A.PopupManager(e,{title:e.t("Block Style Editor"),className:"block-style-editor",closeOnClickOutside:!0,items:this.createPopupItems(),buttons:[{label:e.t("Apply"),variant:"primary",onClick:()=>this.applyStyles()},{label:e.t("Cancel"),variant:"secondary",onClick:()=>{var t;return(t=this.popup)==null?void 0:t.hide()}}]}),this.addToolbarButton(),this.editor.on("selectionchange",()=>this.handleSelectionChange())}addToolbarButton(){var t;const e=document.querySelector(".editor-toolbar");e&&(this.toolbarButton=y.createToolbarButton({icon:I.default,title:(t=this.editor)==null?void 0:t.t("Block Style"),onClick:()=>this.showPopup()}),e.appendChild(this.toolbarButton))}handleSelectionChange(){var a,n,o,l;const e=window.getSelection();if(!e||e.rangeCount===0)return;const s=e.getRangeAt(0).commonAncestorContainer.parentElement;if(this.editor){if(s===((a=this.editor)==null?void 0:a.getContainer())){this.selectedElement=null,(n=this.toolbarButton)==null||n.classList.remove("active");return}s&&this.isBlockElement(s)?(this.selectedElement=s,(o=this.toolbarButton)==null||o.classList.add("active")):(this.selectedElement=null,(l=this.toolbarButton)==null||l.classList.remove("active"))}}isBlockElement(e){return["DIV","P","H1","H2","H3","H4","H5","H6","SECTION","ARTICLE","HEADER","FOOTER","NAV","ASIDE","MAIN","FIGURE","FIGCAPTION","BLOCKQUOTE","UL","OL","LI","DL","DT","DD","PRE","HR","ADDRESS","TABLE","THEAD","TBODY","TFOOT","TR","TH","TD","CAPTION","FORM","FIELDSET","LEGEND","DETAILS","SUMMARY","MENU","DIALOG","IFRAME","CANVAS","VIDEO","AUDIO","PICTURE","SOURCE","TRACK","MAP","OBJECT","PARAM","EMBED","NOSCRIPT","PROGRESS","METER","TIME","MARK","RUBY","RT","RP","BDI","BDO","WBR","INS","DEL","CODE","KBD","SAMP","VAR","CITE","Q","ABBR","DFN","SMALL","STRONG","EM","I","B","U","S","STRIKE","SUB","SUP","SPAN","BR","IMG","A","BUTTON","INPUT","TEXTAREA","SELECT","OPTION","OPTGROUP","LABEL","OUTPUT","DATALIST","KEYGEN","ISINDEX","BASE","LINK","META","STYLE","SCRIPT","TITLE","HEAD","BODY","HTML"].includes(e.tagName)}createPopupItems(){return[{type:"custom",id:"style-editor",content:()=>this.createStyleEditor()},{type:"custom",id:"class-editor",content:()=>this.createClassEditor()}]}createStyleEditor(){var o,l,i;const e=c.createContainer("popup-item"),t=document.createElement("label");t.textContent=((o=this.editor)==null?void 0:o.t("Inline Styles"))||"Inline Styles",e.appendChild(t);const s=c.createContainer("style-list");(((i=(l=this.selectedElement)==null?void 0:l.getAttribute("style"))==null?void 0:i.split(";"))||[]).forEach(r=>{if(r.trim()){const[p,h]=r.split(":").map(E=>E.trim());if(p&&h){const E=this.createStyleItem(p,h);s.appendChild(E)}}});const n=c.createButton("Add Style",()=>this.addStyle(s));return n.className="add-button",e.appendChild(s),e.appendChild(n),e}createStyleItem(e,t){const s=c.createContainer("style-item"),a=document.createElement("select");a.className="style-property-select",Object.keys(m.AVAILABLE_STYLES).forEach(l=>{const i=document.createElement("option");i.value=l,i.textContent=l,i.selected=l===e,a.appendChild(i)});const n=document.createElement("select");n.className="style-value-select",a.addEventListener("change",()=>{this.updateValueSelect(n,a.value)}),this.updateValueSelect(n,a.value,t);const o=c.createButton("×",()=>s.remove());return o.className="remove-button",s.appendChild(a),s.appendChild(n),s.appendChild(o),s}updateValueSelect(e,t,s=""){e.innerHTML="",(m.AVAILABLE_STYLES[t]||[]).forEach(n=>{const o=document.createElement("option");o.value=n,o.textContent=n,o.selected=n===s,e.appendChild(o)})}addStyle(e){const t=this.createStyleItem("","");e.appendChild(t)}createClassEditor(){var o,l,i;const e=c.createContainer("popup-item"),t=document.createElement("label");t.textContent=((o=this.editor)==null?void 0:o.t("CSS Classes"))||"CSS Classes",e.appendChild(t);const s=c.createContainer("class-list");(((i=(l=this.selectedElement)==null?void 0:l.getAttribute("class"))==null?void 0:i.split(" "))||[]).forEach(r=>{if(r.trim()){const p=this.createClassItem(r);s.appendChild(p)}});const n=c.createButton("Add Class",()=>this.addClass(s));return n.className="add-button",e.appendChild(s),e.appendChild(n),e}createClassItem(e){const t=c.createContainer("class-item"),s=c.createInputField("text","Enter class (e.g., my-class)",e);s.className="class-input";const a=c.createButton("×",()=>t.remove());return a.className="remove-button",t.appendChild(s),t.appendChild(a),t}addClass(e){const t=this.createClassItem("");e.appendChild(t)}showPopup(){if(!this.selectedElement||!this.popup)return;const e=document.createElement("div"),t=this.createStyleEditor(),s=this.createClassEditor();e.appendChild(t),e.appendChild(s),this.popup.setContent(e),this.popup.show()}applyStyles(){var s,a,n;if(!this.selectedElement||!this.popup)return;(s=this.editor)==null||s.ensureEditorFocus();const e=(a=this.popup.getElement())==null?void 0:a.querySelector(".style-list"),t=(n=this.popup.getElement())==null?void 0:n.querySelector(".class-list");if(e){const o=Array.from(e.querySelectorAll(".style-item")).map(l=>{const i=l.querySelector(".style-property-select"),r=l.querySelector(".style-value-select"),p=i.value.trim(),h=r.value.trim();return p&&h?`${p}: ${h}`:""}).filter(l=>l).join("; ");this.selectedElement.setAttribute("style",o)}if(t){const o=Array.from(t.querySelectorAll(".class-input")).map(l=>l.value.trim()).filter(l=>l).join(" ");this.selectedElement.setAttribute("class",o)}this.popup.hide()}destroy(){var e,t,s;(e=this.toolbarButton)==null||e.remove(),this.toolbarButton=null,(t=this.editor)==null||t.off("selectionchange"),(s=this.popup)==null||s.destroy(),this.popup=null,this.editor=null}}exports.BlockStylePlugin=T;