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
88 lines (87 loc) • 4.24 kB
JavaScript
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);
/* empty css */
/* empty css */
import { HistoryManager as d } from "./services/HistoryManager.mjs";
import { HistoryViewerModal as u } from "./components/HistoryViewerModal.mjs";
import { createToolbarButton as s } from "../ToolbarPlugin/utils.mjs";
import a from "../../icons/history.svg.mjs";
import l from "../../icons/redo.svg.mjs";
import c from "../../icons/undo.svg.mjs";
class v {
// Флаг для игнорирования изменений
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 d();
}
initialize(t) {
this.historyViewer = new u(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({
icon: c,
title: this.editor.t("Undo") ?? "",
onClick: () => this.undo()
}), this.redoButton = s({
icon: l,
title: this.editor.t("Redo") ?? "",
onClick: () => this.redo()
}), this.historyButton = s({
icon: a,
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();
}
}
export {
v as HistoryPlugin
};