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
88 lines (87 loc) • 3.73 kB
JavaScript
var l = Object.defineProperty;
var c = (r, t, e) => t in r ? l(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
var i = (r, t, e) => c(r, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { ImageUploader as d } from "./services/ImageUploader.mjs";
import { ImageContextMenu as m } from "./components/ImageContextMenu.mjs";
import { ResizableElement as h } from "../../utils/ResizableElement.mjs";
import { createToolbarButton as u } from "../ToolbarPlugin/utils.mjs";
import { ImageCommand as a } from "./commands/ImageCommand.mjs";
import g from "../../icons/image.svg.mjs";
class M {
constructor() {
i(this, "name", "image");
i(this, "hotkeys", [{ keys: "Ctrl+Alt+I", description: "Insert image", command: "image", icon: "🖼️" }]);
i(this, "editor", null);
i(this, "uploader");
i(this, "contextMenu", null);
i(this, "resizer");
i(this, "toolbarButton", null);
/**
* Обработчик контекстного меню
*/
i(this, "handleContextMenu", (t) => {
var o;
const e = t.target.closest("img");
if (e instanceof HTMLImageElement) {
if (e.classList.contains("svg-img") || e.classList.contains("svg-chart")) return;
t.preventDefault();
const n = t.clientX + window.scrollX, s = t.clientY + window.scrollY;
console.log("Mouse coordinates with scroll:", n, s), (o = this.contextMenu) == null || o.show(e, n, s);
}
});
/**
* Обработчик клика
*/
i(this, "handleClick", (t) => {
const e = t.target.closest("img");
e instanceof HTMLImageElement ? this.resizer.attachTo(e) : this.resizer.detach();
});
this.uploader = new d(), this.resizer = new h();
}
initialize(t) {
this.contextMenu = new m(t), this.editor = t, this.addToolbarButton(), this.setupImageEvents(), this.editor.on("image", () => {
this.handleImageUpload();
});
}
addToolbarButton() {
var e;
const t = document.querySelector(".editor-toolbar");
t && (this.toolbarButton = u({
icon: g,
title: (e = this.editor) == null ? void 0 : e.t("Insert Image"),
onClick: () => this.handleImageUpload()
}), t.appendChild(this.toolbarButton));
}
setupImageEvents() {
if (!this.editor) return;
const t = this.editor.getContainer();
t.addEventListener("contextmenu", this.handleContextMenu), t.addEventListener("click", this.handleClick), this.editor.on("file-drop", (e) => {
var o;
e.type.startsWith("image/") && ((o = this.editor) == null || o.ensureEditorFocus(), new a(this.editor, e.content).execute());
});
}
async handleImageUpload() {
var t;
if (this.editor) {
(t = this.editor) == null || t.ensureEditorFocus();
try {
const e = await this.uploader.selectFile();
if (!e) return;
const o = await this.uploader.readFileAsDataUrl(e);
new a(this.editor, o).execute();
} catch (e) {
console.error("Failed to upload image:", e);
}
}
}
destroy() {
var e, o, n, s;
const t = (e = this.editor) == null ? void 0 : e.getContainer();
t && (t.removeEventListener("contextmenu", this.handleContextMenu), t.removeEventListener("click", this.handleClick)), (o = this.editor) == null || o.off("image"), (n = this.editor) == null || n.off("file-drop"), (s = this.contextMenu) == null || s.destroy(), this.contextMenu = null, this.resizer.detach(), this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.editor = null, this.toolbarButton = null;
}
}
export {
M as ImagePlugin
};