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
3 lines (2 loc) • 3.85 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
"use strict";var d=Object.defineProperty;var C=(h,e,t)=>e in h?d(h,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):h[e]=t;var a=(h,e,t)=>C(h,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const g=require("./components/ChartMenu.cjs"),m=require("./components/ChartContextMenu.cjs"),p=require("../ToolbarPlugin/utils.cjs"),b=require("./constants/chartTypes.cjs"),f=require("../../utils/Resizer.cjs"),u=require("../../utils/helpers.cjs");class R{constructor(){a(this,"name","charts");a(this,"hotkeys",[{keys:"Ctrl+Alt+G",description:"Insert chart",command:"charts",icon:"📊"}]);a(this,"editor",null);a(this,"menu",null);a(this,"contextMenu",null);a(this,"currentResizer",null);a(this,"toolbarButton",null)}initialize(e){this.editor=e,this.menu=new g.ChartMenu(e),this.contextMenu=new m.ChartContextMenu(e,this.menu),this.addToolbarButton(),this.setupChartEvents(),this.editor.on("charts",()=>{this.insertChart()})}addToolbarButton(){var t,n;const e=(t=this.editor)==null?void 0:t.getToolbar();e&&(this.toolbarButton=p.createToolbarButton({icon:b.CHART_TYPE_CONFIGS.bar.icon,title:(n=this.editor)==null?void 0:n.t("Insert Chart"),onClick:()=>this.insertChart()}),e.appendChild(this.toolbarButton))}setupChartEvents(){if(!this.editor)return;const e=this.editor.getContainer();e.addEventListener("click",t=>{const n=t.target.closest(".chart-container");n instanceof HTMLElement&&(this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.currentResizer=new f.Resizer(n,{handleSize:10,handleColor:"blue",onResizeStart:()=>{var r;return(r=this.editor)==null?void 0:r.disableObserver()},onResize:(r,s)=>{var l;console.log(`Resized to ${r}x${s}`);const c=n.getAttribute("data-chart-type"),i=n.getAttribute("data-chart-data")??"",o=JSON.parse(i);(l=this.menu)==null||l.redrawChart(n,c,o,{width:r,height:s})},onResizeEnd:()=>{var r;return(r=this.editor)==null?void 0:r.enableObserver()}}))}),e.addEventListener("contextmenu",t=>{var r;const n=t.target.closest(".chart-container");if(n instanceof HTMLElement){t.preventDefault();const s=t.clientX,c=t.clientY;console.log("Mouse coordinates:",s,c),(r=this.contextMenu)==null||r.show(n,s,c)}}),e.addEventListener("chartresize",t=>{var s;const n=t.detail,r=t.target.closest(".chart-container");r instanceof HTMLElement&&((s=this.menu)==null||s.redrawChart(r,n.type,n.data,{width:n.width,height:n.height}))})}insertChart(){var s,c;if(!this.editor)return;const e=this.editor.getContainer(),t=(s=this.editor.getTextFormatter())==null?void 0:s.getSelection();let n;const r=()=>{const i=document.createRange();return i.selectNodeContents(e),i.collapse(!1),t==null||t.removeAllRanges(),t==null||t.addRange(i),i};if(t&&t.rangeCount>0){const i=t.getRangeAt(0);n=e.contains(i.startContainer)&&e.contains(i.endContainer)?i:r()}else n=r();(c=this.menu)==null||c.show(i=>{if(!this.editor)return;const o=u.createContainer("chart-wrapper my-4");o.appendChild(i),o.appendChild(u.createLineBreak()),n.deleteContents(),n.insertNode(o),n.setStartAfter(o),n.setEndAfter(o),t==null||t.removeAllRanges(),t==null||t.addRange(n)})}destroy(){var e;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),(e=this.editor)==null||e.off("charts"),this.editor=null}}exports.ChartsPlugin=R;