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