import { Node as u, mergeAttributes as d } from "@tiptap/core";
import { ReactNodeViewRenderer as g } from "@tiptap/react";
import o from "../components/html-editor-image-node-view/HtmlEditorImageNodeView.js";
const p = u.create({
  name: "image",
  /**
   * Images are block-level elements, not inline.
   * This ensures they occupy their own line in the document.
   */
  inline: !1,
  /**
   * Images are in the 'block' group, making them compatible with document structure.
   */
  group: "block",
  /**
   * Images can be dragged to reposition them in the document.
   */
  draggable: !0,
  /**
   * Images 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.
        parseHTML: (t) => t.getAttribute("src"),
        // Render the src attribute when writing HTML.
        renderHTML: (t) => t.src ? { src: t.src } : {}
      },
      alt: {
        default: "",
        // Parse the alt attribute from HTML.
        parseHTML: (t) => t.getAttribute("alt"),
        // Render the alt attribute when writing HTML.
        renderHTML: (t) => ({ alt: t.alt ?? "" })
      },
      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 img 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 <img> elements back into this node.
   * Also handles <div> wrappers with text-align for alignment.
   */
  parseHTML() {
    return [
      {
        tag: "img[src]",
        getAttrs: (t) => typeof t == "string" ? !1 : t.hasAttribute("src") ? null : !1
      }
    ];
  },
  /**
   * Renders the node as a <div> wrapper with text-align, containing an <img>.
   * The wrapper div enables alignment control via text-align CSS property.
   * The img element is marked with a CSS class for styling.
   * Width/height are applied as inline styles on the <img> for getHTML() output.
   */
  renderHTML({ HTMLAttributes: t, node: e }) {
    const r = e.attrs.alignment || "left", l = e.attrs.width, i = e.attrs.height, n = [];
    l && n.push(`width: ${l}px`), i && n.push(`height: ${i}px`);
    const s = n.length > 0 ? n.join("; ") : void 0, a = d(
      {
        class: "html-editor-image",
        ...s ? { style: s } : {}
      },
      t
    );
    return ["div", { style: `text-align: ${r}` }, ["img", a]];
  },
  /**
   * Registers the React NodeView for interactive rendering.
   * The NodeView provides resize handles and selected-state styling.
   */
  addNodeView() {
    return g(o);
  }
});
export {
  p as default
};
//# sourceMappingURL=imageExtension.js.map
