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
89 lines (88 loc) • 3.62 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 a = Object.defineProperty;
var d = (n, t, e) => t in n ? a(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var o = (n, t, e) => d(n, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { FileUploader as h } from "./services/FileUploader.mjs";
import { FileUploadMenu as u } from "./components/FileUploadMenu.mjs";
import { createToolbarButton as c } from "../ToolbarPlugin/utils.mjs";
import p from "../../icons/file.svg.mjs";
import f from "../../icons/upload.svg.mjs";
import { createLink as m } from "../../utils/helpers.mjs";
class U {
constructor(t = {}) {
o(this, "name", "file-upload");
o(this, "hotkeys", [
{ keys: "Ctrl+Alt+U", description: "Upload file", command: "file-upload", icon: "📎" }
]);
o(this, "editor", null);
o(this, "uploader");
o(this, "menu", null);
o(this, "config", {});
o(this, "toolbarButton", null);
o(this, "handleFileLinkClick", async (t) => {
const e = t.target.closest(".file-link");
if (e instanceof HTMLElement) {
const i = e.getAttribute("data-file-id");
if (i)
try {
await this.uploader.downloadFile(i);
} catch (r) {
console.error("Download failed:", r);
}
}
});
this.config = t, this.uploader = new h(t);
}
initialize(t) {
this.menu = new u(t, this.uploader, this.config, (e) => {
this.insertFileLink(e);
}), this.editor = t, this.addToolbarButton(), this.setupEventListeners(), this.editor.on("file-upload", () => {
var e;
(e = this.editor) == null || e.ensureEditorFocus(), this.showUploadMenu();
});
}
addToolbarButton() {
var e, i;
const t = (e = this.editor) == null ? void 0 : e.getToolbar();
t && (this.toolbarButton = c({
icon: f,
title: ((i = this.editor) == null ? void 0 : i.t("Upload File")) ?? "",
onClick: () => this.showUploadMenu()
}), t.appendChild(this.toolbarButton));
}
setupEventListeners() {
if (!this.editor) return;
this.editor.getContainer().addEventListener("click", this.handleFileLinkClick);
}
showUploadMenu() {
var t;
(t = this.menu) == null || t.show();
}
insertFileLink(t) {
var r, s;
if (!this.editor) return;
const e = m("");
e.className = "file-link", e.setAttribute("data-file-id", t.id), e.innerHTML = `
${p}
${t.name} (${this.uploader.formatFileSize(t.size)})
`, (r = this.editor) == null || r.ensureEditorFocus();
const i = (s = this.editor.getTextFormatter()) == null ? void 0 : s.getSelection();
if (i && i.rangeCount > 0) {
const l = i.getRangeAt(0);
l.deleteContents(), l.insertNode(e), l.collapse(!1);
} else
this.editor.getContainer().appendChild(e);
}
destroy() {
var t, e;
this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.editor && this.editor.getContainer().removeEventListener("click", this.handleFileLinkClick), (t = this.editor) == null || t.off("file-upload", () => {
var i;
(i = this.editor) == null || i.ensureEditorFocus(), this.showUploadMenu();
}), (e = this.menu) == null || e.destroy(), this.editor = null, this.menu = null, this.toolbarButton = null;
}
}
export {
U as FileUploadPlugin
};