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
26 lines (25 loc) • 1.01 kB
JavaScript
var c = Object.defineProperty;
var n = (o, t, e) => t in o ? c(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var u = (o, t, e) => n(o, typeof t != "symbol" ? t + "" : t, e);
import { createIframe as i } from "../../../utils/helpers.mjs";
class l {
constructor(t, e) {
u(this, "videoUrl");
this.videoUrl = e;
}
execute() {
const t = this.extractYouTubeVideoId(this.videoUrl);
if (!t) return;
const e = i("max-w-full rounded-lg p-2");
e.src = `https://www.youtube.com/embed/${t}`, e.width = "800", e.height = "400", e.frameBorder = "0", e.allowFullscreen = !0;
const r = window.getSelection(), d = r == null ? void 0 : r.getRangeAt(0);
d && (d.deleteContents(), d.insertNode(e), d.collapse(!1));
}
extractYouTubeVideoId(t) {
const e = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, r = t.match(e);
return r ? r[1] : null;
}
}
export {
l as YouTubeVideoCommand
};