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) • 3.21 kB
JavaScript
"use strict";var u=Object.defineProperty;var p=(a,t,i)=>t in a?u(a,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):a[t]=i;var r=(a,t,i)=>p(a,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("../../../icons/delete.svg.cjs"),v=require("../../../icons/duplicate.svg.cjs"),d=require("../../../icons/move.svg.cjs"),B=require("../../../icons/split-horizontal.svg.cjs"),C=require("../../../icons/split-vertical.svg.cjs"),b=require("../../../core/ui/ContextMenu.cjs"),s=require("../../../utils/helpers.cjs");class f{constructor(t){r(this,"editor");r(this,"contextMenu");r(this,"activeBlock",null);this.editor=t,this.contextMenu=new b.ContextMenu(t,[{title:t.t("Split Horizontally"),icon:B.default,action:"split-horizontal",onClick:()=>this.handleAction("split-horizontal")},{title:t.t("Split Vertically"),icon:C.default,action:"split-vertical",onClick:()=>this.handleAction("split-vertical")},{type:"divider"},{title:t.t("Move Up"),icon:d.default,action:"move-up",onClick:()=>this.handleAction("move-up")},{title:t.t("Move Down"),icon:d.default,action:"move-down",onClick:()=>this.handleAction("move-down")},{type:"divider"},{title:t.t("Duplicate"),icon:v.default,action:"duplicate",onClick:()=>this.handleAction("duplicate")},{title:t.t("Remove"),icon:k.default,action:"remove",className:"text-red-600",onClick:()=>this.handleAction("remove")}],{orientation:"vertical"})}handleAction(t){var i,c,e;if(this.activeBlock)switch(t){case"split-horizontal":this.splitBlock("horizontal");break;case"split-vertical":this.splitBlock("vertical");break;case"move-up":const n=this.activeBlock.previousElementSibling;n&&((i=n.parentNode)==null||i.insertBefore(this.activeBlock,n));break;case"move-down":const o=this.activeBlock.nextElementSibling;o&&((c=o.parentNode)==null||c.insertBefore(o,this.activeBlock));break;case"duplicate":const l=this.activeBlock.cloneNode(!0);(e=this.activeBlock.parentNode)==null||e.insertBefore(l,this.activeBlock.nextSibling);break;case"remove":this.activeBlock.remove();break}}splitBlock(t){var c;if(!this.activeBlock)return;if(this.activeBlock.classList.contains("split-container")){const e=this.activeBlock;for(;e.firstChild;)e.firstChild.remove();const n=s.createContainer("editor-block");n.setAttribute("contenteditable","true");const o=s.createContainer("editor-block");o.setAttribute("contenteditable","true");const l=s.createContainer("block-content"),h=s.createContainer("block-content");l.textContent=this.editor.t("Block 1"),h.textContent=this.editor.t("Block 2"),n.appendChild(l),o.appendChild(h),e.appendChild(n),e.appendChild(o)}else{const e=s.createContainer(`split-container ${t}`),n=this.activeBlock.cloneNode(!0),o=this.activeBlock.cloneNode(!0),l=o.querySelector(".block-content");l&&(l.textContent=""),e.appendChild(n),e.appendChild(o),(c=this.activeBlock.parentNode)==null||c.replaceChild(e,this.activeBlock)}}show(t,i,c){this.activeBlock=t,this.contextMenu.show(t,i,c)}hide(){this.contextMenu.hide(),this.activeBlock=null}destroy(){this.contextMenu&&typeof this.contextMenu.destroy=="function"&&this.contextMenu.destroy(),this.editor=null,this.contextMenu=null,this.activeBlock=null}}exports.BlockContextMenu=f;