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
136 lines (135 loc) • 4.74 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 l = Object.defineProperty;
var d = (r, t, o) => t in r ? l(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o;
var e = (r, t, o) => d(r, typeof t != "symbol" ? t + "" : t, o);
/* empty css */
/* empty css */
import { ContextMenu as u } from "../../core/ui/ContextMenu.mjs";
import h from "../../icons/delete.svg.mjs";
import f from "../../icons/edit.svg.mjs";
import s from "../../icons/form.svg.mjs";
import { FormManager as c } from "./services/FormManager.mjs";
import { TemplateManager as p } from "./services/TemplateManager.mjs";
import { FormPopup as M } from "./components/FormPopup.mjs";
import { TemplatesModal as F } from "./components/TemplatesModal.mjs";
import { FormBuilderModal as m } from "./components/FormBuilderModal.mjs";
import { createToolbarButton as C } from "../ToolbarPlugin/utils.mjs";
import { createLineBreak as B } from "../../utils/helpers.mjs";
import { DeleteFormCommand as b } from "./commands/DeleteFormCommand.mjs";
import { DuplicateFormCommand as g } from "./commands/DuplicateFormCommand.mjs";
class X {
constructor() {
e(this, "name", "form-builder");
e(this, "hotkeys", [{ keys: "Ctrl+Alt+F", description: "Insert form", command: "form", icon: "📝" }]);
e(this, "editor");
e(this, "formPopup", null);
e(this, "templatesModal", null);
e(this, "contextMenu", null);
e(this, "formManager");
e(this, "templateManager");
e(this, "toolbarButton", null);
/**
* Handle form context menu
*/
e(this, "handleFormContextMenu", (t) => {
var i;
const o = t.target.closest("form");
if (o instanceof HTMLElement) {
t.preventDefault();
const n = t.clientX, a = t.clientY;
(i = this.contextMenu) == null || i.show(o, n, a);
}
});
}
/**
* Initialize plugin
*/
initialize(t) {
this.editor = t, this.formPopup = new M(this.editor), this.templatesModal = new F(this.editor), this.addToolbarButton(), this.setupContextMenu(), this.setupFormEvents(), this.formManager = new c(this.editor), this.templateManager = new p(this.editor), this.templateManager.initialize(), this.editor.on("form", () => {
this.openFormBuilder();
});
}
/**
* Open form builder modal
*/
openFormBuilder() {
const t = this.editor.saveCursorPosition();
new m(this.editor).show(
(i) => {
t && this.editor.restoreCursorPosition(t);
const n = this.formManager.createForm(i);
this.editor.insertContent(n), this.editor.insertContent(B());
},
!1,
null
);
}
/**
* Setup context menu
*/
setupContextMenu() {
const t = [
{
label: this.editor.t("Edit Form"),
icon: f,
onClick: (o) => {
o && o.tagName === "FORM" && new m(this.editor).show(
(n) => {
},
!0,
o
);
}
},
{
label: this.editor.t("Duplicate Form"),
icon: s,
onClick: (o) => {
o && o.tagName === "FORM" && new g(this.editor, o).execute();
}
},
{
label: this.editor.t("Delete Form"),
icon: h,
onClick: (o) => {
o && o.tagName === "FORM" && new b(this.editor, o).execute();
}
}
];
this.contextMenu = new u(this.editor, t);
}
/**
* Setup form events
*/
setupFormEvents() {
if (!this.editor) return;
const t = this.editor.getContainer();
t && t.addEventListener("contextmenu", this.handleFormContextMenu);
}
/**
* Add toolbar button
*/
addToolbarButton() {
const t = this.editor.getToolbar();
t && (this.toolbarButton = C({
icon: s,
title: this.editor.t("Insert Form"),
onClick: () => this.openFormBuilder()
}), t.appendChild(this.toolbarButton));
}
/**
* Destroy plugin
*/
destroy() {
var t;
if (this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.formPopup && (this.formPopup.destroy(), this.formPopup = null), this.templatesModal && (this.templatesModal.destroy(), this.templatesModal = null), this.toolbarButton && (this.toolbarButton.remove(), this.toolbarButton = null), this.editor) {
const o = this.editor.getContainer();
o && o.removeEventListener("contextmenu", this.handleFormContextMenu);
}
(t = this.editor) == null || t.off("form-builder"), this.editor = null;
}
}
export {
X as FormBuilderPlugin,
X as default
};