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
86 lines (85 loc) • 3.33 kB
JavaScript
var d = Object.defineProperty;
var l = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var n = (r, e, t) => l(r, typeof e != "symbol" ? e + "" : e, t);
import "./style.scss.mjs";
import "./public.scss.mjs";
import { YouTubeVideoMenu as m } from "./components/YouTubeVideoMenu.mjs";
import { YouTubeVideoContextMenu as a } from "./components/YouTubeVideoContextMenu.mjs";
import { createToolbarButton as h } from "../ToolbarPlugin/utils.mjs";
import { YouTubeVideoCommand as f } from "./commands/YouTubeVideoCommand.mjs";
import b from "../../icons/youtube.svg.mjs";
import { ResizableElement as p } from "../../utils/ResizableElement.mjs";
class E {
constructor() {
n(this, "name", "youtube-video");
n(this, "hotkeys", [
{
keys: "Ctrl+Alt+Y",
description: "Insert YouTube video",
command: "youtube-video",
icon: "▶️"
}
]);
n(this, "editor", null);
n(this, "menu", null);
n(this, "contextMenu", null);
n(this, "resizer");
this.resizer = new p();
}
initialize(e) {
this.editor = e, this.menu = new m(e), this.contextMenu = new a(e), this.addToolbarButton(), this.setupContextMenu(), this.setupResizer(), this.editor.on("youtube-video", () => {
this.openModal();
});
}
setupResizer() {
if (!this.editor) return;
this.editor.getContainer().addEventListener("click", (t) => {
const o = t.target.closest("iframe");
o instanceof HTMLIFrameElement && o.src.includes("youtube.com") ? this.resizer.attachTo(o) : this.resizer.detach();
});
}
addToolbarButton() {
var t;
const e = document.querySelector(".editor-toolbar");
if (e) {
const o = h({
icon: b,
title: (t = this.editor) == null ? void 0 : t.t("Insert YouTube Video"),
onClick: () => this.openModal()
});
e.appendChild(o);
}
}
setupContextMenu() {
if (!this.editor) return;
this.editor.getContainer().addEventListener("contextmenu", (t) => {
var i;
const o = t.target.closest("iframe");
if (o instanceof HTMLIFrameElement && o.src.includes("youtube.com")) {
t.preventDefault();
const s = t.clientX + window.scrollX, u = t.clientY + window.scrollY;
console.log("Mouse coordinates with scroll:", s, u), (i = this.contextMenu) == null || i.show(o, s, u);
}
});
}
openModal() {
var e;
this.editor && ((e = this.menu) == null || e.show((t) => {
var i;
(i = this.editor) == null || i.ensureEditorFocus(), new f(this.editor, t).execute();
}));
}
destroy() {
var o, i, s, u;
if (this.editor) {
const c = this.editor.getContainer();
c.removeEventListener("click", this.setupResizer), c.removeEventListener("contextmenu", this.setupContextMenu);
}
(o = this.menu) == null || o.destroy(), (i = this.contextMenu) == null || i.destroy(), this.resizer.detach();
const e = document.querySelector(".editor-toolbar"), t = e == null ? void 0 : e.querySelector(`[title="${(s = this.editor) == null ? void 0 : s.t("Insert YouTube Video")}"]`);
t && t.remove(), (u = this.editor) == null || u.off("youtube-video"), this.editor = null, this.menu = null, this.contextMenu = null;
}
}
export {
E as YouTubeVideoPlugin
};