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
80 lines (79 loc) • 4.97 kB
JavaScript
var u = Object.defineProperty;
var m = (n, t, e) => t in n ? u(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var i = (n, t, e) => m(n, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as v } from "../../../core/ui/PopupManager.mjs";
import { HTMLHighlighter as y } from "../services/HTMLHighlighter.mjs";
import b from "../../../icons/copy.svg.mjs";
import T from "../../../icons/save.svg.mjs";
import { createContainer as s, createButton as d, createPre as w, createCode as E, createTextarea as C } from "../../../utils/helpers.mjs";
class M {
constructor(t) {
i(this, "editor");
i(this, "popup");
i(this, "highlighter");
// Ссылки на элементы
i(this, "codeElement", null);
i(this, "editElement", null);
i(this, "copyButton", null);
i(this, "saveButton", null);
i(this, "tabs", null);
i(this, "viewTab", null);
i(this, "editTab", null);
this.editor = t, this.popup = new v(t, {
className: "html-viewer-modal",
closeOnClickOutside: !0,
items: [
{
type: "custom",
id: "html-viewer-content",
content: () => this.createContent()
}
]
}), this.highlighter = new y();
}
createContent() {
const t = s(), e = s("modal-header"), h = s("text-lg font-semibold", this.editor.t("HTML Source"));
h.textContent = this.editor.t("HTML Source"), this.copyButton = d("", () => {
if (this.codeElement) {
navigator.clipboard.writeText(this.codeElement.textContent || "");
const a = this.copyButton.innerHTML;
this.copyButton.innerHTML = this.editor.t("Copied!"), setTimeout(() => {
this.copyButton.innerHTML = a;
}, 2e3);
}
}), this.copyButton.className = "copy-button", this.copyButton.innerHTML = `${b} ` + this.editor.t("Copy"), this.saveButton = d("", () => {
var a;
if (this.editElement) {
const p = this.editElement.value;
this.codeElement.textContent = p, this.highlighter.highlight(this.codeElement), (a = this.editor) == null || a.setHtml(p), this.switchTab("view");
}
}), this.saveButton.className = "save-button", this.saveButton.innerHTML = `${T} ` + this.editor.t("Save"), this.saveButton.style.display = "none", e.appendChild(h), e.appendChild(this.copyButton), e.appendChild(this.saveButton), this.tabs = s("tabs"), this.viewTab = d(this.editor.t("View"), () => {
this.switchTab("view");
}), this.viewTab.className = "tab active", this.editTab = d(this.editor.t("Edit"), () => {
this.switchTab("edit");
}), this.editTab.className = "tab", this.tabs.appendChild(this.viewTab), this.tabs.appendChild(this.editTab);
const o = s("modal-body"), l = s("view-container"), r = w();
this.codeElement = E("html-content"), r.appendChild(this.codeElement), l.appendChild(r);
const c = s("edit-container");
return c.style.display = "none", this.editElement = C(), this.editElement.className = "html-edit w-full border border-gray-300 rounded-lg p-2", this.editElement.rows = 10, c.appendChild(this.editElement), o.appendChild(l), o.appendChild(c), t.appendChild(e), t.appendChild(this.tabs), t.appendChild(o), t;
}
switchTab(t) {
var e, h, o, l;
t === "view" ? ((e = this.viewTab) == null || e.classList.add("active"), (h = this.editTab) == null || h.classList.remove("active"), this.popup.getElement().querySelector(".view-container").style.display = "block", this.popup.getElement().querySelector(".edit-container").style.display = "none", this.copyButton.style.display = "flex", this.saveButton.style.display = "none") : t === "edit" && ((o = this.viewTab) == null || o.classList.remove("active"), (l = this.editTab) == null || l.classList.add("active"), this.popup.getElement().querySelector(".view-container").style.display = "none", this.popup.getElement().querySelector(".edit-container").style.display = "block", this.copyButton.style.display = "none", this.saveButton.style.display = "flex", this.editElement && this.codeElement && (this.editElement.value = this.codeElement.textContent || ""));
}
show(t) {
this.codeElement && (this.codeElement.textContent = t, this.highlighter.highlight(this.codeElement)), this.popup.show();
}
hide() {
this.popup.hide();
}
destroy() {
var t, e;
this.hide(), this.viewTab && this.viewTab.removeEventListener("click", () => this.switchTab("view")), this.editTab && this.editTab.removeEventListener("click", () => this.switchTab("edit")), this.copyButton && this.copyButton.removeEventListener("click", () => {
}), this.saveButton && this.saveButton.removeEventListener("click", () => {
}), this.codeElement = null, this.editElement = null, this.copyButton = null, this.saveButton = null, this.tabs = null, this.viewTab = null, this.editTab = null, (e = (t = this.popup).destroy) == null || e.call(t), this.highlighter = null;
}
}
export {
M as HTMLViewerModal
};