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
391 lines (390 loc) • 13.3 kB
JavaScript
var j = Object.defineProperty;
var J = (c, t, n) => t in c ? j(c, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : c[t] = n;
var a = (c, t, n) => J(c, typeof t != "symbol" ? t + "" : t, n);
/* empty css */
/* empty css */
import { PopupManager as K } from "../../core/ui/PopupManager.mjs";
import { ContextMenu as Q } from "../../core/ui/ContextMenu.mjs";
import Z from "../../icons/delete.svg.mjs";
import $ from "../../icons/edit.svg.mjs";
import f from "../../icons/form.svg.mjs";
import { FormManager as g } from "./services/FormManager.mjs";
import { createToolbarButton as ee } from "../ToolbarPlugin/utils.mjs";
import { createContainer as p, createLabel as E, createSelectField as V, createInputField as I, createCheckbox as te, createButton as C, createLineBreak as oe } from "../../utils/helpers.mjs";
class me {
constructor() {
a(this, "name", "form-builder");
a(this, "hotkeys", [{ keys: "Ctrl+Alt+F", description: "Insert form", command: "form", icon: "📝" }]);
a(this, "editor", null);
a(this, "popup", null);
a(this, "contextMenu", null);
a(this, "container", null);
a(this, "editFormElement", null);
a(this, "formManager");
a(this, "type", "GET");
a(this, "url", "");
a(this, "formButton", null);
this.formManager = new g();
}
initialize(t) {
this.editor = t, this.setupPopup(), this.addToolbarButton(), this.setupContextMenu(), this.editor.on("form", () => {
var n;
this.formManager.clearFields(), this.addFormField("text", "New Field", !1, "", []), (n = this.popup) == null || n.show();
});
}
setupContextMenu() {
this.editor && (this.contextMenu = new Q(this.editor, [
{
title: "Edit Form",
icon: $,
onClick: (t) => this.editForm(t)
},
{
title: "Delete Form",
icon: Z,
onClick: (t) => this.deleteForm(t)
}
]), this.editor.getInnerContainer().addEventListener("contextmenu", (t) => {
var r;
const n = t.target.closest("form");
if (n) {
t.preventDefault();
const l = t.clientX + window.scrollX, i = t.clientY + window.scrollY;
console.log("Mouse coordinates with scroll:", l, i), (r = this.contextMenu) == null || r.show(n, l, i);
}
}));
}
addToolbarButton() {
const t = document.querySelector(".editor-toolbar");
t && (this.formButton = ee({
icon: f,
title: "Insert Form",
onClick: () => {
var n;
this.formManager.clearFields(), this.addFormField("text", "New Field", !1, "", []), (n = this.popup) == null || n.show();
}
}), t.appendChild(this.formButton));
}
setupPopup() {
this.editor && (this.popup = new K(this.editor, {
title: "Form Builder",
className: "form-builder",
closeOnClickOutside: !0,
buttons: [
{
label: "Add Field",
variant: "info",
onClick: () => this.addFormField()
},
{
label: "Insert",
variant: "primary",
onClick: () => this.handleFormInsert(this.url, this.type)
},
{
label: "Cancel",
variant: "secondary",
onClick: () => {
var t;
return (t = this.popup) == null ? void 0 : t.hide();
}
}
],
items: [
{
type: "custom",
id: "form-builder-content",
content: () => this.createFormBuilderContent()
}
]
}));
}
createFormBuilderContent() {
return this.container = p("form-builder-container p-4"), this.formManager.clearOptions(), this.container;
}
addFormField(t = "text", n = "", r = !1, l = "", i = [], d = "") {
const s = {
type: t,
label: n,
options: {
placeholder: "",
className: "form-input",
target: d,
options: []
},
validation: {
required: r,
pattern: l
}
};
t === "select" && s.options && (s.options.options = i), this.formManager.addField(s), this.renderFormBuilderContent();
}
renderFormBuilderContent() {
if (!this.container) return;
this.container.innerHTML = "";
const t = p("form-type-container mb-4"), n = E("Form Method:"), r = V(
[
{ value: "GET", label: "GET" },
{ value: "POST", label: "POST" }
],
this.type,
(e) => {
this.type = e;
}
);
t.appendChild(n), t.appendChild(r);
const l = p("form-url-container mb-4"), i = E("Form URL:"), d = I(
"text",
"Enter form submission URL",
this.url,
(e) => {
this.url = e;
}
);
l.appendChild(i), l.appendChild(d), this.container.appendChild(t), this.container.appendChild(l);
const s = this.formManager.getFields();
let y = 1;
s.forEach((e, m) => {
var v, h, x, L, q, O, R, N, P, S, A, D;
const u = p("field-container mb-4 p-3 border rounded");
[
{
type: "select",
label: "Field Type",
value: e.type,
options: [
{ value: "text", label: "Text Input" },
{ value: "textarea", label: "Text Area" },
{ value: "select", label: "Dropdown" },
{ value: "checkbox", label: "Checkbox" },
{ value: "radio", label: "Radio Button" },
{ value: "button", label: "Button" },
{ value: "file", label: "File Upload" },
{ value: "date", label: "Date" },
{ value: "time", label: "Time" },
{ value: "range", label: "Range" },
{ value: "email", label: "Email" },
{ value: "password", label: "Password" },
{ value: "number", label: "Number" },
{ value: "tel", label: "Phone" },
{ value: "url", label: "URL" },
{ value: "color", label: "Color" },
{ value: "datetime-local", label: "Date & Time" },
{ value: "month", label: "Month" },
{ value: "week", label: "Week" },
{ value: "hidden", label: "Hidden" },
{ value: "image", label: "Image Button" }
],
onChange: (o) => {
e.type = o, this.renderFormBuilderContent();
}
},
{
type: "input",
label: "Field Label",
value: e.label,
onChange: (o) => {
e.label = o;
}
},
{
type: "input",
label: "Regex Validation",
value: ((v = e.validation) == null ? void 0 : v.pattern) || "",
onChange: (o) => {
e.validation || (e.validation = {}), e.validation.pattern = o;
}
},
{
type: "input",
label: "Placeholder",
value: ((h = e.options) == null ? void 0 : h.placeholder) || "",
onChange: (o) => {
e.options || (e.options = {}), e.options.placeholder = o;
}
},
{
type: "select",
label: "Autocomplete",
value: ((x = e.options) == null ? void 0 : x.autocomplete) || "on",
options: [
{ value: "on", label: "On" },
{ value: "off", label: "Off" }
],
onChange: (o) => {
e.options || (e.options = {}), e.options.autocomplete = o;
}
},
{
type: "checkbox",
label: null,
title: "Required",
value: ((L = e.validation) == null ? void 0 : L.required) || !1,
onChange: (o) => {
e.validation || (e.validation = {}), e.validation.required = o;
}
},
{
type: "checkbox",
label: null,
title: "ReadOnly",
value: ((q = e.options) == null ? void 0 : q.readonly) || !1,
onChange: (o) => {
e.options || (e.options = {}), e.options.readonly = o;
}
},
{
type: "checkbox",
label: null,
title: "Disabled",
value: ((O = e.options) == null ? void 0 : O.disabled) || !1,
onChange: (o) => {
e.options || (e.options = {}), e.options.disabled = o;
}
},
{
type: "checkbox",
label: null,
title: "Multiple",
value: ((R = e.options) == null ? void 0 : R.multiple) || !1,
onChange: (o) => {
e.options || (e.options = {}), e.options.multiple = o;
}
},
{
type: "input",
label: "Name",
value: ((N = e.options) == null ? void 0 : N.name) || "",
onChange: (o) => {
e.options || (e.options = {}), e.options.name = o;
}
},
{
type: "input",
label: "Value",
value: ((P = e.options) == null ? void 0 : P.value) || "",
onChange: (o) => {
e.options || (e.options = {}), e.options.value = o;
}
},
{
type: "input",
label: "Class Name",
value: ((S = e.options) == null ? void 0 : S.className) || "",
onChange: (o) => {
e.options || (e.options = {}), e.options.className = o;
}
},
{
type: "input",
label: "ID",
value: ((A = e.options) == null ? void 0 : A.id) || "input-" + y++,
onChange: (o) => {
e.options || (e.options = {}), e.options.id = o;
}
}
].forEach((o) => {
var U;
let B = null;
o.label && (B = E(o.label));
let F;
switch (o.type) {
case "input":
F = I(
"text",
"",
o.value,
o.onChange
);
break;
case "select":
F = V(
o.options || [],
o.value,
o.onChange
);
break;
case "checkbox":
F = te(
o.label ?? o.title,
o.value,
o.onChange
);
break;
default:
F = p();
break;
}
const k = p("field-wrapper mb-2");
if (B && k.appendChild(B), k.appendChild(F), u.appendChild(k), o.label === "Field Type") {
const w = p("options-container mt-2");
if (e.type === "select" && ((U = e.options) != null && U.options)) {
e.options.options.forEach((Y, G) => {
const W = I("text", "Option Value", Y, (H) => {
e.options.options[G] = H;
}), z = C(
"Remove",
() => {
e.options.options = e.options.options.filter(
(H, _) => _ !== G
), this.renderFormBuilderContent();
},
"danger"
), T = p("option-container flex items-center mb-2");
T.appendChild(W), T.appendChild(z), w.appendChild(T);
});
const X = C(
"Add Option",
() => {
e.options || (e.options = {}), e.options.options || (e.options.options = []), e.options.options.push(""), this.renderFormBuilderContent();
},
"primary"
);
w.appendChild(X);
}
u.appendChild(w);
}
});
const b = C(
"Remove",
() => {
this.formManager.removeField(m), this.renderFormBuilderContent();
},
"danger"
);
u.appendChild(b), (D = this.container) == null || D.appendChild(u);
});
}
handleFormInsert(t, n = "GET") {
if (!this.editor || !this.popup) return;
this.editFormElement && (this.editFormElement.remove(), this.editFormElement = null);
const r = this.formManager.createForm(t, n);
this.editor.insertContent(r.outerHTML), this.editor.insertContent(oe()), this.popup.hide();
}
editForm(t) {
var l, i, d;
if (!t) return;
this.editFormElement = t, (l = this.popup) == null || l.show(), this.formManager.clearFields();
const n = (d = (i = this.popup) == null ? void 0 : i.getElement()) == null ? void 0 : d.querySelector(".form-builder-container");
n && (n.innerHTML = ""), t.querySelectorAll(".form-field").forEach((s) => {
var v;
const y = ((v = s.querySelector("label")) == null ? void 0 : v.textContent) || "", e = s.querySelector("input, select, textarea, button"), m = (e == null ? void 0 : e.tagName.toLowerCase()) || "text", u = (e == null ? void 0 : e.hasAttribute("required")) || !1, M = (e == null ? void 0 : e.getAttribute("pattern")) || "", b = [];
if (m === "select") {
const h = e == null ? void 0 : e.querySelectorAll("option");
h == null || h.forEach((x) => {
b.push(x.value);
});
}
console.log(2222, m, y, u, M, b), this.addFormField(m, y, u, M, b);
});
}
deleteForm(t) {
t && t.remove();
}
destroy() {
this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.popup && (this.popup.destroy(), this.popup = null), this.formButton && this.formButton.remove(), this.editor = null;
}
}
export {
me as FormBuilderPlugin
};