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.89 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 u=Object.defineProperty;var d=(r,t,i)=>t in r?u(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i;var o=(r,t,i)=>d(r,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const a=require("./services/HistoryManager.cjs"),l=require("./components/HistoryViewerModal.cjs"),s=require("../ToolbarPlugin/utils.cjs"),c=require("../../icons/history.svg.cjs"),y=require("../../icons/redo.svg.cjs"),f=require("../../icons/undo.svg.cjs");class g{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 a.HistoryManager}initialize(t){this.historyViewer=new l.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(){var i,e,n,h;const t=(i=this.editor)==null?void 0:i.getToolbar();t&&(this.undoButton=s.createToolbarButton({icon:f.default,title:((e=this.editor)==null?void 0:e.t("Undo"))??"",onClick:()=>this.undo()}),this.redoButton=s.createToolbarButton({icon:y.default,title:((n=this.editor)==null?void 0:n.t("Redo"))??"",onClick:()=>this.redo()}),this.historyButton=s.createToolbarButton({icon:c.default,title:((h=this.editor)==null?void 0:h.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=g;