import { jsxs as p, jsx as t } from "react/jsx-runtime";
import { useRef as a, useLayoutEffect as y, useCallback as L, useEffect as R, useState as _ } from "react";
import { EditorContent as ee } from "@tiptap/react";
import te from "./hooks/useHtmlEditor.js";
import oe from "./utils/formatHtml.js";
import v from "../box/Box.js";
import ne from "../alert/Alert.js";
import re from "./components/html-editor-toolbar/HtmlEditorToolbar.js";
import ie from "../code-editor/CodeEditor.js";
import { Popover as A, PopoverAnchor as B, PopoverContent as H } from "../popover/PopoverPrimitive.js";
import se from "./components/html-editor-image-bubble-menu/HtmlEditorImageBubbleMenu.js";
import le from "./components/html-editor-video-bubble-menu/HtmlEditorVideoBubbleMenu.js";
import ce from "./components/html-editor-table-bubble-menu/HtmlEditorTableBubbleMenu.js";
const ae = ({ initialContent: O = "", onContentChange: P, mode: S = "visual", colorPalette: N }) => {
  const {
    editor: e,
    mode: l,
    handleModeChange: I,
    handleToolbarAction: f,
    handleCodeChange: T,
    activeActions: z,
    selectedStyle: D,
    selectedFontSize: F,
    selectedTextColor: V,
    selectedBgColor: q,
    selectedAlignment: j,
    selectedLink: W,
    selectedText: Z,
    selectedImage: d,
    selectedVideo: u,
    selectedTable: m,
    searchTerm: K,
    searchResults: G,
    searchResultIndex: J,
    showImagePasteWarning: Q,
    imagePopoverOpen: U,
    handleImagePopoverClose: M
  } = te({ initialContent: O, onContentChange: P, initialMode: S, colorPalette: N }), c = a(null), b = a(null), w = a(null), E = a(null);
  y(() => {
    if (!d || !e || !b.current || !c.current) return;
    const { from: n } = e.state.selection, o = e.view.nodeDOM(n);
    if (o instanceof HTMLElement) {
      const r = (o.querySelector("img.html-editor-image") || o).getBoundingClientRect(), i = c.current.getBoundingClientRect(), s = b.current;
      s.style.left = `${r.left - i.left}px`, s.style.top = `${r.top - i.top}px`, s.style.width = `${r.width}px`, s.style.height = `${r.height}px`;
    }
  }, [d, e]), y(() => {
    if (!u || !e || !w.current || !c.current) return;
    const { from: n } = e.state.selection, o = e.view.nodeDOM(n);
    if (o instanceof HTMLElement) {
      const i = (o.querySelector("video.html-editor-video") || o.querySelector("iframe.html-editor-video") || o).getBoundingClientRect(), s = c.current.getBoundingClientRect(), g = w.current;
      g.style.left = `${i.left - s.left}px`, g.style.top = `${i.top - s.top}px`, g.style.width = `${i.width}px`, g.style.height = `${i.height}px`;
    }
  }, [u, e]), y(() => {
    if (!m || !e || !E.current || !c.current) return;
    const { from: n } = e.state.selection, o = e.view.domAtPos(n).node;
    if (o instanceof HTMLElement) {
      const r = (o.closest("table.html-editor-table") || o).getBoundingClientRect(), i = c.current.getBoundingClientRect(), s = E.current;
      s.style.left = `${r.left - i.left}px`, s.style.top = `${r.top - i.top}px`, s.style.width = `${r.width}px`, s.style.height = `${r.height}px`;
    }
  }, [m, e]);
  const C = L((n) => {
    n.preventDefault();
  }, []);
  R(() => {
    if (!e) return;
    const n = (h) => {
      if (h.key === "Escape") {
        if (!e) return;
        const { selection: r } = e.state, i = r.to;
        e.chain().setTextSelection(i).run();
      }
    }, o = e.view.dom;
    return o.addEventListener("keydown", n), () => {
      o.removeEventListener("keydown", n);
    };
  }, [e]);
  const $ = a((e == null ? void 0 : e.getHTML()) ?? "");
  $.current = (e == null ? void 0 : e.getHTML()) ?? "";
  const [X, k] = _(""), x = a(!1);
  R(() => {
    l !== "code" && (x.current = !1);
  }, [l]), R(() => {
    l === "code" && e && !x.current && (x.current = !0, k(oe($.current)));
  }, [l, e]);
  const Y = L(
    (n) => {
      k(n), T(n);
    },
    [T]
  );
  return /* @__PURE__ */ p(v, { className: "flex flex-col w-full", children: [
    Q && /* @__PURE__ */ t(
      ne,
      {
        variant: "warning",
        title: "Bild aus Zwischenablage nicht unterstützt",
        description: "Das direkte Einfügen von Bildern aus der Zwischenablage wird nicht unterstützt. Bitte laden Sie Ihr Bild bei einem externen Anbieter hoch und fügen Sie den Link über das Bild-Menü ein.",
        onClose: M
      }
    ),
    /* @__PURE__ */ t(v, { className: "sticky top-0 z-10 h-[var(--spacing-2)] bg-[var(--base-background)]/60 backdrop-blur-md" }),
    /* @__PURE__ */ t(v, { className: "sticky top-2 z-10 pb-[var(--spacing-2)]", children: /* @__PURE__ */ t(
      re,
      {
        mode: l,
        onModeChange: I,
        activeActions: z,
        onToolbarAction: f,
        selectedStyle: D,
        selectedFontSize: F,
        selectedTextColor: V,
        selectedBgColor: q,
        colorPalette: N,
        selectedAlignment: j,
        selectedLink: W,
        selectedText: Z,
        selectedImage: d,
        selectedVideo: u,
        selectedTable: m,
        imagePopoverOpen: U,
        onImagePopoverClose: M,
        searchTerm: K,
        searchResults: G,
        searchResultIndex: J
      }
    ) }),
    /* @__PURE__ */ p(
      v,
      {
        ref: c,
        className: "relative w-full rounded-[var(--border-radius-lg)] border border-[var(--base-border)] overflow-hidden focus-within:ring-1 focus-within:ring-[var(--base-ring)] focus-within:ring-offset-1 focus-within:ring-offset-transparent",
        children: [
          l === "visual" ? (
            // Visual mode: TipTap rich-text WYSIWYG editor.
            // EditorContent connects the useEditor instance to the DOM.
            /* @__PURE__ */ t(ee, { editor: e })
          ) : (
            // Code mode: editable HTML source view via the existing Monaco-based CodeEditor.
            // codeEditorValue is a local snapshot taken once on mode switch (formatted for readability).
            // It is updated by handleCodeEditorChange on each keystroke — changes are NOT re-derived
            // from TipTap, preventing the cursor-jump feedback loop.
            /* @__PURE__ */ t(ie, { defaultLanguage: "html", value: X, onChange: Y })
          ),
          /* @__PURE__ */ p(A, { open: l === "visual" && !!d, children: [
            /* @__PURE__ */ t(B, { asChild: !0, children: /* @__PURE__ */ t("span", { ref: b, className: "absolute pointer-events-none", "aria-hidden": "true" }) }),
            /* @__PURE__ */ t(H, { side: "top", align: "center", sideOffset: 8, className: "w-auto p-[var(--spacing-1)]", onOpenAutoFocus: C, children: /* @__PURE__ */ t(se, { selectedImage: d, onAction: f }) })
          ] }),
          /* @__PURE__ */ p(A, { open: l === "visual" && !!u, children: [
            /* @__PURE__ */ t(B, { asChild: !0, children: /* @__PURE__ */ t("span", { ref: w, className: "absolute pointer-events-none", "aria-hidden": "true" }) }),
            /* @__PURE__ */ t(H, { side: "top", align: "center", sideOffset: 8, className: "w-auto p-[var(--spacing-3)]", onOpenAutoFocus: C, children: /* @__PURE__ */ t(le, { selectedVideo: u, onAction: f }) })
          ] }),
          /* @__PURE__ */ p(A, { open: l === "visual" && !!m, children: [
            /* @__PURE__ */ t(B, { asChild: !0, children: /* @__PURE__ */ t("span", { ref: E, className: "absolute pointer-events-none", "aria-hidden": "true" }) }),
            /* @__PURE__ */ t(H, { side: "top", align: "center", sideOffset: 8, className: "w-auto p-[var(--spacing-1)]", onOpenAutoFocus: C, children: /* @__PURE__ */ t(ce, { selectedTable: m, onAction: f }) })
          ] })
        ]
      }
    )
  ] });
};
ae.displayName = "HtmlEditor";
export {
  ae as default
};
//# sourceMappingURL=HtmlEditor.js.map
