on-codemerge/dist/src/plugins/FileUploadPlugin/index.mjs

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

var s = Object.defineProperty;
var a = (n, t, e) => t in n ? s(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var o = (n, t, e) => a(n, typeof t != "symbol" ? t + "" : t, e);
/* empty css            */
/* empty css             */
import { FileUploader as d } from "./services/FileUploader.mjs";
import { FileUploadMenu as u } from "./components/FileUploadMenu.mjs";
import { createToolbarButton as h } from "../ToolbarPlugin/utils.mjs";
import c from "../../icons/file.svg.mjs";
import p from "../../icons/upload.svg.mjs";
import { createLink as f } from "../../utils/helpers.mjs";
class E {
  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 (l) {
            console.error("Download failed:", l);
          }
      }
    });
    this.config = t, this.uploader = new d(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;
    const t = document.querySelector(".editor-toolbar");
    t && (this.toolbarButton = h({
      icon: p,
      title: ((e = this.editor) == null ? void 0 : e.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 l;
    if (!this.editor) return;
    const e = f("");
    e.className = "file-link", e.setAttribute("data-file-id", t.id), e.innerHTML = `
      ${c}
      ${t.name} (${this.uploader.formatFileSize(t.size)})
    `, (l = this.editor) == null || l.ensureEditorFocus();
    const i = window.getSelection();
    if (i && i.rangeCount > 0) {
      const r = i.getRangeAt(0);
      r.deleteContents(), r.insertNode(e), r.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 {
  E as FileUploadPlugin
};