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.6 kB
JavaScript
"use strict";var n=Object.defineProperty;var h=(r,t,i)=>t in r?n(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i;var o=(r,t,i)=>h(r,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const u=require("./services/HistoryManager.cjs"),d=require("./components/HistoryViewerModal.cjs"),s=require("../ToolbarPlugin/utils.cjs"),a=require("../../icons/history.svg.cjs"),l=require("../../icons/redo.svg.cjs"),c=require("../../icons/undo.svg.cjs");class y{constructor(){o(this,"name","history");o(this,"hotkeys",[{keys:"Ctrl+Z",description:"Undo",command:"undo",icon:"↩️"},{keys:"Ctrl+Y",keysMac:"Ctrl+Shift+Z",description:"Redo",command:"redo",icon:"↪️"},{keys:"Ctrl+Alt+H",description:"View history",command:"history",icon:"🕒"}]);o(this,"editor",null);o(this,"historyManager");o(this,"historyViewer",null);o(this,"observer",null);o(this,"undoButton",null);o(this,"redoButton",null);o(this,"historyButton",null);o(this,"unsubscribe",null);o(this,"isRestoringState",!1);this.historyManager=new u.HistoryManager}initialize(t){this.historyViewer=new d.HistoryViewerModal(t),this.editor=t,this.addToolbarButtons(),this.unsubscribe=this.editor.subscribeToContentChange(this.contentEvent.bind(this)),this.editor.on("history",()=>{this.showHistory()}),this.editor.on("undo",()=>{this.undo()}),this.editor.on("redo",()=>{this.redo()})}contentEvent(t){this.isRestoringState||this.historyManager.addState(t)}addToolbarButtons(){const t=document.querySelector(".editor-toolbar");!t||!this.editor||(this.undoButton=s.createToolbarButton({icon:c.default,title:this.editor.t("Undo")??"",onClick:()=>this.undo()}),this.redoButton=s.createToolbarButton({icon:l.default,title:this.editor.t("Redo")??"",onClick:()=>this.redo()}),this.historyButton=s.createToolbarButton({icon:a.default,title:this.editor.t("View History")??"",onClick:()=>this.showHistory()}),t.appendChild(this.undoButton),t.appendChild(this.redoButton),t.appendChild(this.historyButton))}async undo(){if(!this.editor)return;const t=this.editor.getContainer(),i=this.editor.saveCursorPosition(),e=this.historyManager.undo();e!==null&&(this.isRestoringState=!0,t.innerHTML=e,i&&this.editor.restoreCursorPosition(i),await Promise.resolve(),this.isRestoringState=!1)}async redo(){if(!this.editor)return;const t=this.editor.getContainer(),i=this.editor.saveCursorPosition(),e=this.historyManager.redo();e&&(this.isRestoringState=!0,t.innerHTML=e,i&&this.editor.restoreCursorPosition(i),await Promise.resolve(),this.isRestoringState=!1)}showHistory(){var t;this.editor&&((t=this.historyViewer)==null||t.show(this.historyManager.getStates(),this.historyManager.getCurrentIndex(),async i=>{this.editor&&(this.isRestoringState=!0,this.editor.getContainer().innerHTML=i,await Promise.resolve(),this.isRestoringState=!1)}))}destroy(){var t,i,e;this.observer&&(this.observer.disconnect(),this.observer=null),this.undoButton&&this.undoButton.parentElement&&this.undoButton.parentElement.removeChild(this.undoButton),this.redoButton&&this.redoButton.parentElement&&this.redoButton.parentElement.removeChild(this.redoButton),this.historyButton&&this.historyButton.parentElement&&this.historyButton.parentElement.removeChild(this.historyButton),this.historyViewer&&(this.historyViewer.destroy(),this.historyViewer=null),this.unsubscribe&&this.unsubscribe(),(t=this.editor)==null||t.off("history"),(i=this.editor)==null||i.off("undo"),(e=this.editor)==null||e.off("redo"),this.editor=null,this.historyManager.clear()}}exports.HistoryPlugin=y;