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
50 lines (49 loc) • 1.89 kB
JavaScript
var i = Object.defineProperty;
var r = (n, t, e) => t in n ? i(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var o = (n, t, e) => r(n, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { TemplatesMenu as l } from "./components/TemplatesMenu.mjs";
import { TemplateManager as s } from "./services/TemplateManager.mjs";
import { createToolbarButton as a } from "../ToolbarPlugin/utils.mjs";
import m from "../../icons/templates.svg.mjs";
class f {
constructor() {
o(this, "name", "templates");
o(this, "hotkeys", [
{ keys: "Ctrl+Alt+T", description: "Insert template", command: "templates", icon: "📄" }
]);
o(this, "editor", null);
o(this, "menu", null);
o(this, "manager");
o(this, "toolbarButton", null);
this.manager = new s();
}
initialize(t) {
this.menu = new l(this.manager, t), this.editor = t, this.addToolbarButton(), this.editor.on("templates", () => {
this.showTemplatesMenu();
});
}
addToolbarButton() {
var e;
const t = document.querySelector(".editor-toolbar");
t && (this.toolbarButton = a({
icon: m,
title: (e = this.editor) == null ? void 0 : e.t("Templates"),
onClick: () => this.showTemplatesMenu()
}), t.appendChild(this.toolbarButton));
}
showTemplatesMenu() {
var t;
this.editor && ((t = this.menu) == null || t.show((e) => {
this.editor && (this.editor.getContainer().innerHTML = e.content);
}));
}
destroy() {
var t;
this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.menu && (this.menu.destroy(), this.menu = null), (t = this.editor) == null || t.off("templates"), this.editor = null, this.manager = null, this.toolbarButton = null;
}
}
export {
f as TemplatesPlugin
};