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.89 kB
JavaScript
"use strict";var u=Object.defineProperty;var h=(c,e,t)=>e in c?u(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var r=(c,e,t)=>h(c,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const b=require("./components/TablePopup.cjs"),p=require("./components/TableContextMenu.cjs"),T=require("../ToolbarPlugin/utils.cjs"),f=require("../../icons/table.svg.cjs"),m=require("./commands/InsertTableCommand.cjs"),g=require("../../utils/Resizer.cjs");class C{constructor(){r(this,"name","table");r(this,"hotkeys",[{keys:"Ctrl+Shift+T",description:"Insert or edit table",command:"table-editor",icon:"📊"}]);r(this,"editor",null);r(this,"popup",null);r(this,"contextMenu",null);r(this,"currentResizer",null);r(this,"handleContextMenu",e=>{var o;const t=e.target.closest("td, th");if(t instanceof HTMLTableCellElement){e.preventDefault();const n=e.clientX+window.scrollX,i=e.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",n,i),(o=this.contextMenu)==null||o.show(t,n,i)}});r(this,"handleClick",e=>{var n,i,s,a;const t=e.target.closest("table");t instanceof HTMLTableElement&&(e.preventDefault(),(i=(n=this.editor)==null?void 0:n.getSelector())==null||i.saveTable(t));const o=e.target.closest("td, th");o&&o instanceof HTMLTableCellElement&&(e.preventDefault(),(a=(s=this.editor)==null?void 0:s.getSelector())==null||a.selectCell(o),this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.currentResizer=new g.Resizer(o,{handleSize:10,handleColor:"blue",onResizeStart:()=>{var l;return(l=this.editor)==null?void 0:l.disableObserver()},onResize:(l,d)=>console.log(`Resized to ${l}x${d}`),onResizeEnd:()=>{var l;return(l=this.editor)==null?void 0:l.enableObserver()}}))});r(this,"handleKeydown",e=>{var t,o,n,i;if(e.key==="Delete"){const s=(o=(t=this.editor)==null?void 0:t.getSelector())==null?void 0:o.restoreTable();s&&(s.remove(),(i=(n=this.editor)==null?void 0:n.getSelector())==null||i.clearTable())}})}initialize(e){this.popup=new b.TablePopup(e),this.editor=e,this.contextMenu=new p.TableContextMenu(e),this.addToolbarButton(),this.setupTableEvents(),this.editor.on("table",()=>{var t,o,n;(o=(t=this.editor)==null?void 0:t.getSelector())==null||o.saveSelection(),(n=this.popup)==null||n.show(i=>this.insertTable(i))})}addToolbarButton(){var t;const e=document.querySelector(".editor-toolbar");if(e){const o=T.createToolbarButton({icon:f.default,title:(t=this.editor)==null?void 0:t.t("Insert Table"),onClick:()=>{var n,i,s;(i=(n=this.editor)==null?void 0:n.getSelector())==null||i.saveSelection(),(s=this.popup)==null||s.show(a=>this.insertTable(a))}});e.appendChild(o)}}setupTableEvents(){if(!this.editor||!this.contextMenu)return;const e=this.editor.getContainer();e.addEventListener("contextmenu",this.handleContextMenu),e.addEventListener("click",this.handleClick),e.addEventListener("keydown",this.handleKeydown)}insertTable(e){var n,i;if(!this.editor)return;this.editor.ensureEditorFocus();let t=(i=(n=this.editor)==null?void 0:n.getSelector())==null?void 0:i.restoreSelection(this.editor.getContainer());t||(t=document.createRange(),t.selectNodeContents(this.editor.getContainer()),t.collapse(!1)),new m.InsertTableCommand(this.editor,e,t).execute()}destroy(){var e,t,o;if(this.editor){const n=this.editor.getContainer();n.removeEventListener("contextmenu",this.handleContextMenu),n.removeEventListener("click",this.handleClick),n.removeEventListener("keydown",this.handleKeydown)}this.popup&&(this.popup.destroy(),this.popup=null),this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),(e=this.editor)==null||e.off("table"),(o=(t=this.editor)==null?void 0:t.getSelector())==null||o.clearTable(),this.editor=null}}exports.TablePlugin=C;