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
90 lines (89 loc) • 4.57 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 */
var d = Object.defineProperty;
var a = (s, t, i) => t in s ? d(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
var o = (s, t, i) => a(s, typeof t != "symbol" ? t + "" : t, i);
/* empty css */
/* empty css */
import { HistoryManager as u } from "./services/HistoryManager.mjs";
import { HistoryViewerModal as l } from "./components/HistoryViewerModal.mjs";
import { createToolbarButton as r } from "../ToolbarPlugin/utils.mjs";
import c from "../../icons/history.svg.mjs";
import y from "../../icons/redo.svg.mjs";
import f from "../../icons/undo.svg.mjs";
class S {
// Флаг для игнорирования изменений
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();
}
initialize(t) {
this.historyViewer = new l(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 = r({
icon: f,
title: ((e = this.editor) == null ? void 0 : e.t("Undo")) ?? "",
onClick: () => this.undo()
}), this.redoButton = r({
icon: y,
title: ((n = this.editor) == null ? void 0 : n.t("Redo")) ?? "",
onClick: () => this.redo()
}), this.historyButton = r({
icon: c,
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();
}
}
export {
S as HistoryPlugin
};