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
74 lines (73 loc) • 3.28 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 l = (n, t, e) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var r = (n, t, e) => l(n, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { createToolbarButton as h } from "../ToolbarPlugin/utils.mjs";
import g from "../../icons/track-changes.svg.mjs";
class x {
constructor() {
r(this, "name", "track-changes");
r(this, "editor", null);
r(this, "enabled", !1);
r(this, "toolbarButton", null);
r(this, "handleInput", (t) => {
var o, a, c;
if (!this.enabled || !t.target) return;
const i = (a = (o = this.editor) == null ? void 0 : o.getTextFormatter()) == null ? void 0 : a.getSelection();
if (i && i.rangeCount > 0) {
const s = i.getRangeAt(0).startContainer.parentElement;
s && ((c = this.editor) != null && c.getContainer().contains(s)) && (s.classList.add("tracked-insert"), setTimeout(() => s.classList.remove("tracked-insert"), 1e3));
}
});
}
initialize(t) {
this.editor = t, this.addToolbarButton(), t.getContainer().addEventListener("input", this.handleInput);
}
addToolbarButton() {
var e, i;
const t = (e = this.editor) == null ? void 0 : e.getToolbar();
t && (t.querySelector("[data-track-changes-button]") || (this.toolbarButton = h({
icon: g,
title: (i = this.editor) == null ? void 0 : i.t("Track Changes"),
onClick: () => this.toggle()
}), this.toolbarButton.setAttribute("data-track-changes-button", "true"), t.appendChild(this.toolbarButton)));
}
toggle() {
if (this.enabled = !this.enabled, this.editor) {
const t = this.enabled ? this.editor.t("Track changes enabled") : this.editor.t("Track changes disabled");
this.showInlineNotification(t);
}
}
showInlineNotification(t) {
if (!this.editor) return;
const e = this.editor.getDOMContext();
if (!e) return;
e.querySelectorAll(".track-changes-notification").forEach((a) => {
a.parentNode && a.parentNode.removeChild(a);
});
const o = document.createElement("div");
o.className = "track-changes-notification", o.id = `track-changes-notification-${Date.now()}`, o.textContent = t, o.style.cssText = `
position: absolute;
top: 10px;
right: 10px;
background: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
`, e.appendChild(o), setTimeout(() => {
o.parentNode && o.parentNode.removeChild(o);
}, 3e3);
}
destroy() {
if (!this.editor) return;
this.editor.getContainer().removeEventListener("input", this.handleInput), this.toolbarButton && (this.toolbarButton.remove(), this.toolbarButton = null), this.editor.off("track-changes"), this.editor.off("track-changes-enabled"), this.editor.off("track-changes-disabled"), this.editor = null, this.enabled = !1;
}
}
export {
x as TrackChangesPlugin
};