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
44 lines (43 loc) • 1.9 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 e = Object.defineProperty;
var n = (i, t, o) => t in i ? e(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
var r = (i, t, o) => n(i, typeof t != "symbol" ? t + "" : t, o);
/* empty css */
/* empty css */
import { HTMLViewerModal as s } from "./components/HTMLViewerModal.mjs";
import { createToolbarButton as h } from "../ToolbarPlugin/utils.mjs";
import a from "../../icons/html.svg.mjs";
class p {
constructor() {
r(this, "name", "html-viewer");
r(this, "hotkeys", [{ keys: "Ctrl+Alt+W", description: "View HTML", command: "html-viewer", icon: "🖥️" }]);
r(this, "editor", null);
r(this, "modal", null);
r(this, "toolbarButton", null);
}
initialize(t) {
this.modal = new s(t), this.editor = t, this.addToolbarButton(), this.editor.on("html-viewer", () => {
this.showHTML();
});
}
addToolbarButton() {
var o, l;
const t = (o = this.editor) == null ? void 0 : o.getToolbar();
t && (this.toolbarButton = h({
icon: a,
title: ((l = this.editor) == null ? void 0 : l.t("View HTML")) ?? "",
onClick: () => this.showHTML()
}), t.appendChild(this.toolbarButton));
}
showHTML() {
var t;
this.editor && ((t = this.modal) == null || t.show(this.editor.getHtml()));
}
destroy() {
var t;
this.modal && (this.modal.destroy(), this.modal = null), this.toolbarButton && this.toolbarButton.parentElement && (this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.toolbarButton = null), (t = this.editor) == null || t.off("html-viewer"), this.editor = null;
}
}
export {
p as HTMLViewerPlugin
};