import { Node as p, mergeAttributes as n } from "@tiptap/core";
import { ReactNodeViewRenderer as h } from "@tiptap/react";
import g from "../components/html-editor-video-node-view/HtmlEditorVideoNodeView.js";
import m from "../utils/getYouTubeVideoId.js";
import y from "../utils/getVimeoVideoId.js";
import b from "../utils/isTrustedVideoEmbedUrl.js";
const V = p.create({
  name: "video",
  /**
   * Videos are block-level elements, not inline.
   * This ensures they occupy their own line in the document.
   */
  inline: !1,
  /**
   * Videos are in the 'block' group, making them compatible with document structure.
   */
  group: "block",
  /**
   * Videos can be dragged to reposition them in the document.
   */
  draggable: !0,
  /**
   * Videos can be selected by clicking on them.
   */
  selectable: !0,
  /**
   * Defines the node's attributes.
   */
  addAttributes() {
    return {
      src: {
        default: null,
        // Parse the src attribute from HTML (video or iframe).
        parseHTML: (t) => t.getAttribute("src"),
        // Render the src attribute when writing HTML.
        renderHTML: (t) => t.src ? { src: t.src } : {}
      },
      alignment: {
        default: "left",
        // Parse the alignment from the wrapper div's text-align style.
        parseHTML: (t) => {
          const e = t.parentElement;
          return e && e.style.textAlign ? e.style.textAlign : "left";
        },
        // Alignment is rendered on the wrapper div, not the video/iframe element itself.
        renderHTML: () => ({})
      },
      width: {
        default: null,
        // Parse width from the element's style or attribute.
        parseHTML: (t) => {
          const e = t.style.width;
          if (e)
            return parseInt(e, 10) || null;
          const r = t.getAttribute("width");
          return r && parseInt(r, 10) || null;
        },
        // Width is rendered as an inline style in renderHTML.
        renderHTML: () => ({})
      },
      height: {
        default: null,
        // Parse height from the element's style or attribute.
        parseHTML: (t) => {
          const e = t.style.height;
          if (e)
            return parseInt(e, 10) || null;
          const r = t.getAttribute("height");
          return r && parseInt(r, 10) || null;
        },
        // Height is rendered as an inline style in renderHTML.
        renderHTML: () => ({})
      }
    };
  },
  /**
   * Parses existing HTML back into this node.
   * Handles both <video> tags and <iframe> embeds.
   */
  parseHTML() {
    return [
      {
        tag: "video[src]",
        getAttrs: (t) => typeof t == "string" ? !1 : t.hasAttribute("src") ? null : !1
      },
      {
        tag: "iframe[src]",
        getAttrs: (t) => {
          if (typeof t == "string")
            return !1;
          const e = t.getAttribute("src") || "";
          return b(e) ? null : !1;
        }
      }
    ];
  },
  /**
   * Renders the node as HTML.
   * - For YouTube/Vimeo URLs: renders as <div><iframe></div>
   * - For direct video files: renders as <div><video></div>
   * The wrapper div enables alignment control via text-align CSS property.
   */
  renderHTML({ HTMLAttributes: t, node: e }) {
    const r = e.attrs.alignment || "left", o = e.attrs.width, u = e.attrs.height, a = e.attrs.src, d = m(a), c = y(a), s = [];
    o && s.push(`width: ${o}px`), u && s.push(`height: ${u}px`);
    const i = s.length > 0 ? s.join("; ") : void 0;
    if (d) {
      const l = n(t, {
        class: "html-editor-video",
        src: `https://www.youtube.com/embed/${d}`,
        frameborder: "0",
        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen  ",
        ...i ? { style: i } : { style: "width: 560px; height: 315px" }
      });
      return ["div", { style: `text-align: ${r}` }, ["iframe", l]];
    }
    if (c) {
      const l = n(t, {
        class: "html-editor-video",
        src: `https://player.vimeo.com/video/${c}`,
        frameborder: "0",
        allow: "autoplay; fullscreen; picture-in-picture; fullscreen",
        ...i ? { style: i } : { style: "width: 640px; height: 360px" }
      });
      return ["div", { style: `text-align: ${r}` }, ["iframe", l]];
    }
    const f = n(t, {
      class: "html-editor-video",
      controls: "true",
      ...i ? { style: i } : { style: "max-width: 100%; height: auto" }
    });
    return ["div", { style: `text-align: ${r}` }, ["video", f]];
  },
  /**
   * Registers the React NodeView for interactive rendering.
   * The NodeView provides interactive rendering and selected-state styling.
   */
  addNodeView() {
    return h(g);
  }
});
export {
  V as default
};
//# sourceMappingURL=videoExtension.js.map
