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.5 kB
JavaScript
"use strict";var d=Object.defineProperty;var C=(a,r,t)=>r in a?d(a,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[r]=t;var s=(a,r,t)=>C(a,typeof r!="symbol"?r+"":r,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const m=require("./components/ChartMenu.cjs"),g=require("./components/ChartContextMenu.cjs"),p=require("../ToolbarPlugin/utils.cjs"),b=require("./constants/chartTypes.cjs"),f=require("../../utils/Resizer.cjs"),h=require("../../utils/helpers.cjs");class R{constructor(){s(this,"name","charts");s(this,"hotkeys",[{keys:"Ctrl+Alt+G",description:"Insert chart",command:"charts",icon:"📊"}]);s(this,"editor",null);s(this,"menu",null);s(this,"contextMenu",null);s(this,"currentResizer",null);s(this,"toolbarButton",null)}initialize(r){this.editor=r,this.menu=new m.ChartMenu(r),this.contextMenu=new g.ChartContextMenu(r,this.menu),this.addToolbarButton(),this.setupChartEvents(),this.editor.on("charts",()=>{this.insertChart()})}addToolbarButton(){var t;const r=document.querySelector(".editor-toolbar");r&&(this.toolbarButton=p.createToolbarButton({icon:b.CHART_TYPE_CONFIGS.bar.icon,title:(t=this.editor)==null?void 0:t.t("Insert Chart"),onClick:()=>this.insertChart()}),r.appendChild(this.toolbarButton))}setupChartEvents(){if(!this.editor)return;const r=this.editor.getContainer();r.addEventListener("click",t=>{const e=t.target.closest(".chart-container");e instanceof HTMLElement&&(this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.currentResizer=new f.Resizer(e,{handleSize:10,handleColor:"blue",onResizeStart:()=>{var n;return(n=this.editor)==null?void 0:n.disableObserver()},onResize:(n,o)=>{var l;console.log(`Resized to ${n}x${o}`);const i=e.getAttribute("data-chart-type"),c=e.getAttribute("data-chart-data")??"",u=JSON.parse(c);(l=this.menu)==null||l.redrawChart(e,i,u,{width:n,height:o})},onResizeEnd:()=>{var n;return(n=this.editor)==null?void 0:n.enableObserver()}}))}),r.addEventListener("contextmenu",t=>{var n;const e=t.target.closest(".chart-container");if(e instanceof HTMLElement){t.preventDefault();const o=t.clientX+window.scrollX,i=t.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",o,i),(n=this.contextMenu)==null||n.show(e,o,i)}}),r.addEventListener("chartresize",t=>{var o;const e=t.detail,n=t.target.closest(".chart-container");n instanceof HTMLElement&&((o=this.menu)==null||o.redrawChart(n,e.type,e.data,{width:e.width,height:e.height}))})}insertChart(){var n;if(!this.editor)return;const r=this.editor.getContainer(),t=window.getSelection();let e;t&&t.rangeCount>0?e=t.getRangeAt(0):(e=document.createRange(),e.selectNodeContents(r),e.collapse(!1),t==null||t.removeAllRanges(),t==null||t.addRange(e)),(n=this.menu)==null||n.show(o=>{if(!this.editor)return;const i=h.createContainer("chart-wrapper my-4");i.appendChild(o),i.appendChild(h.createLineBreak()),e.deleteContents(),e.insertNode(i),e.setStartAfter(i),e.setEndAfter(i),t==null||t.removeAllRanges(),t==null||t.addRange(e)})}destroy(){var r;this.menu&&(this.menu.destroy(),this.menu=null),this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.toolbarButton&&this.toolbarButton.parentElement&&(this.toolbarButton.parentElement.removeChild(this.toolbarButton),this.toolbarButton=null),(r=this.editor)==null||r.off("charts"),this.editor=null}}exports.ChartsPlugin=R;