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
85 lines (84 loc) • 3.34 kB
JavaScript
var l = Object.defineProperty;
var c = (n, e, t) => e in n ? l(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var i = (n, e, t) => c(n, typeof e != "symbol" ? e + "" : e, t);
import "./style.scss.mjs";
import "./public.scss.mjs";
import { VideoUploader as a } from "./services/VideoUploader.mjs";
import { VideoContextMenu as h } from "./components/VideoContextMenu.mjs";
import { ResizableElement as u } from "../../utils/ResizableElement.mjs";
import { createToolbarButton as m } from "../ToolbarPlugin/utils.mjs";
import { VideoCommand as d } from "./commands/VideoCommand.mjs";
import p from "../../icons/video.svg.mjs";
class y {
constructor() {
i(this, "name", "video");
i(this, "hotkeys", [{ keys: "Ctrl+Alt+V", description: "Insert video", command: "video", icon: "🎥" }]);
i(this, "editor", null);
i(this, "uploader");
i(this, "contextMenu", null);
i(this, "resizer");
i(this, "handleContextMenu", (e) => {
var o;
const t = e.target.closest("video");
if (t instanceof HTMLVideoElement) {
e.preventDefault();
const r = e.clientX + window.scrollX, s = e.clientY + window.scrollY;
console.log("Mouse coordinates with scroll:", r, s), (o = this.contextMenu) == null || o.show(t, r, s);
}
});
i(this, "handleClick", (e) => {
const t = e.target.closest("video");
t instanceof HTMLVideoElement ? this.resizer.attachTo(t) : this.resizer.detach();
});
this.uploader = new a(), this.resizer = new u();
}
initialize(e) {
this.contextMenu = new h(e), this.editor = e, this.addToolbarButton(), this.setupVideoEvents(), this.editor.on("video", () => {
this.handleVideoUpload();
});
}
addToolbarButton() {
var t;
const e = document.querySelector(".editor-toolbar");
if (e) {
const o = m({
icon: p,
title: (t = this.editor) == null ? void 0 : t.t("Insert Video"),
onClick: () => this.handleVideoUpload()
});
e.appendChild(o);
}
}
setupVideoEvents() {
if (!this.editor) return;
const e = this.editor.getContainer();
e.addEventListener("contextmenu", this.handleContextMenu), e.addEventListener("click", this.handleClick), this.editor.on("file-drop", (t) => {
var o;
t.type.startsWith("video/") && ((o = this.editor) == null || o.ensureEditorFocus(), new d(this.editor, t.content).execute());
});
}
async handleVideoUpload(e) {
if (this.editor) {
this.editor.ensureEditorFocus();
try {
const t = e || await this.uploader.selectFile();
if (!t) return;
const o = await this.uploader.readFileAsDataUrl(t);
new d(this.editor, o).execute();
} catch (t) {
console.error("Failed to upload video:", t);
}
}
}
destroy() {
var e, t;
if (this.editor) {
const o = this.editor.getContainer();
o.removeEventListener("contextmenu", this.handleContextMenu), o.removeEventListener("click", this.handleClick);
}
this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), (e = this.editor) == null || e.off("video"), (t = this.editor) == null || t.off("file-drop"), this.resizer.detach(), this.editor = null, this.uploader = null, this.resizer = null;
}
}
export {
y as VideoPlugin
};