@erpsquad/common 1.11.8 → 1.11.10

package/dist/chunks/EditorSection-BLGcgQFm.esm.js

@@ -0,0 +1,849 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { AppBar, Toolbar, Box, Link, Stack, IconButton, Divider, Skeleton, MenuItem, Paper, FormControlLabel, FormControl, Fade } from "@mui/material";
+import { ZoomOut, ZoomIn, ZoomOutMap } from "@mui/icons-material";
+import { T as Typography } from "./typography-CG_A0iOJ.esm.js";
+import { E as Edit } from "./edit-C4KfGTtw.esm.js";
+import { E as Eye } from "./eye-CByHBTch.esm.js";
+import CodeOutlinedIcon from "@mui/icons-material/CodeOutlined";
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined";
+import LocalShippingOutlinedIcon from "@mui/icons-material/LocalShippingOutlined";
+import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
+import { Link as Link$1 } from "react-router-dom";
+import { t as templateRoutes } from "./common-BgXEAs_y.esm.js";
+import React__default, { useState, useRef, useMemo, useCallback, Suspense, lazy } from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import SplitIcon from "@mui/icons-material/CallSplit";
+import { S as Save } from "./save-CgMN3zzT.esm.js";
+import { T as Trash } from "./trash-Zhhh3VNZ.esm.js";
+import { S as Select } from "./select-CVxEdXzL.esm.js";
+import { E as EditSectionModal } from "./edit-section-modal-HihKbN6K.esm.js";
+import { C as Checkbox } from "./checkbox-C0Kk4Gq8.esm.js";
+import { C as Chip } from "./chip-CrHuY2_O.esm.js";
+import Close from "@mui/icons-material/Close";
+import { u as useCKEditorStyleExtractor } from "./style-extractor-DVB3BulQ.esm.js";
+import { u as useDebouncedUpdate } from "./useDebouncedUpdate-BWtDJx4r.esm.js";
+const EditorHeader = ({
+  onSave,
+  onPreview,
+  preview,
+  editHtml,
+  onEditHtml,
+  sections,
+  isEditingHeaderFooter,
+  onEditModeChange,
+  setIsEditingHeaderFooter,
+  onSaveHeaderFooter,
+  showSample,
+  setShowSample,
+  sampleType,
+  setSampleType,
+  samplePages,
+  setSamplePages,
+  modulePath,
+  type,
+  mode = "add",
+  templateData,
+  isSaving = false,
+  editMode,
+  fromPreview = false,
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom
+}) => {
+  const ROUTES = templateRoutes(modulePath, type);
+  return /* @__PURE__ */ jsx(
+    AppBar,
+    {
+      position: "static",
+      color: "default",
+      elevation: 0,
+      sx: {
+        borderColor: "divider",
+        bgcolor: "background.paper"
+      },
+      children: /* @__PURE__ */ jsxs(Toolbar, { variant: "dense", sx: { justifyContent: "space-between", p: 3 }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            Link,
+            {
+              component: Link$1,
+              to: ROUTES.LIST,
+              underline: "hover",
+              color: "text.secondary",
+              sx: { fontSize: "0.875rem" },
+              children: /* @__PURE__ */ jsx(Typography, { type: "s5", color: "theme.secondary.800", children: type === "email" ? "Emails" : "PDF" })
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: "/" }),
+          /* @__PURE__ */ jsxs(Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: [
+            mode === "add" ? "Add New" : editMode ? "Edit" : "Preview",
+            " Template"
+          ] }),
+          templateData && (templateData == null ? void 0 : templateData.name) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: "/" }),
+            /* @__PURE__ */ jsx(Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: templateData == null ? void 0 : templateData.name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", className: "editorHeader--Buttons", children: [
+          preview && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  borderRadius: 1,
+                  bgcolor: "rgba(74, 192, 140, 0.08)",
+                  border: "1px solid rgba(74, 192, 140, 0.2)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: onZoomOut,
+                      disabled: zoom <= 50,
+                      color: "#4AC08C",
+                      sx: {
+                        color: "#4AC08C",
+                        "&:hover": {
+                          bgcolor: "rgba(74, 192, 140, 0.15)"
+                        },
+                        "&.Mui-disabled": {
+                          opacity: 0.3,
+                          color: "#4AC08C"
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(ZoomOut, { fontSize: "small" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Typography,
+                    {
+                      type: "s5",
+                      weight: "medium",
+                      sx: {
+                        minWidth: "50px",
+                        textAlign: "center",
+                        color: "#4AC08C"
+                      },
+                      children: [
+                        zoom,
+                        "%"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: onZoomIn,
+                      disabled: zoom >= 150,
+                      sx: {
+                        color: "#4AC08C",
+                        "&:hover": {
+                          bgcolor: "rgba(74, 192, 140, 0.15)"
+                        },
+                        "&.Mui-disabled": {
+                          opacity: 0.3,
+                          color: "#4AC08C"
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(ZoomIn, { fontSize: "small" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Divider,
+                    {
+                      orientation: "vertical",
+                      flexItem: true,
+                      sx: {
+                        mx: 0.5,
+                        bgcolor: "rgba(74, 192, 140, 0.3)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: onResetZoom,
+                      disabled: zoom === 100,
+                      title: "Reset Zoom",
+                      sx: {
+                        color: "#4AC08C",
+                        "&:hover": {
+                          bgcolor: "rgba(74, 192, 140, 0.15)"
+                        },
+                        "&.Mui-disabled": {
+                          opacity: 0.3,
+                          color: "#4AC08C"
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(ZoomOutMap, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
+          ] }),
+          !fromPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setIsEditingHeaderFooter(true),
+                className: "pbtn",
+                disabled: preview,
+                children: [
+                  /* @__PURE__ */ jsx(Edit, { fontSize: "small" }),
+                  "Edit Header/Footer"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "pb-lens", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: !preview ? "is-active" : "",
+                  onClick: () => preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsx(Edit, { fontSize: "small" }),
+                    " Edit"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: preview ? "is-active" : "",
+                  onClick: () => !preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsx(Eye, { fontSize: "small" }),
+                    " Preview"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onEditHtml,
+                className: `pbtn ${editHtml ? "pbtn--primary" : ""}`,
+                disabled: !(sections == null ? void 0 : sections.length) || preview,
+                children: [
+                  /* @__PURE__ */ jsx(CodeOutlinedIcon, { fontSize: "small" }),
+                  editHtml ? "Exit HTML Edit" : "Edit HTML"
+                ]
+              }
+            ),
+            !isSaving && /* @__PURE__ */ jsxs("span", { className: "pb-bar-stat is-dirty", children: [
+              /* @__PURE__ */ jsx("span", { className: "pb-bar-dirty", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" }) }) }),
+              "Unsaved"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onSave,
+                className: "pbtn pbtn--primary",
+                disabled: !(sections == null ? void 0 : sections.length) || isSaving,
+                children: isSaving ? "Saving..." : "Save"
+              }
+            )
+          ] }) : editMode ? /* @__PURE__ */ jsx(Fragment, { children: isEditingHeaderFooter ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            setShowSample && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "st-sample-tg",
+                  onClick: () => setShowSample((v) => !v),
+                  title: "Preview the master wrapped around a real document",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: `cx-switch ${showSample ? "is-on" : ""}`, "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "cx-switch-dot" }) }),
+                    "Sample content"
+                  ]
+                }
+              ),
+              showSample && /* @__PURE__ */ jsxs("div", { className: "st-docchips", children: [
+                ["quotation", "invoice", "delivery"].map((d) => /* @__PURE__ */ jsxs("button", { className: `st-docchip ${sampleType === d ? "is-active" : ""}`, onClick: () => setSampleType && setSampleType(d), children: [
+                  /* @__PURE__ */ jsx("span", { className: "st-docchip-dot", style: { background: d === "quotation" ? "#1A8A56" : d === "invoice" ? "#1B2C6E" : "#8a540b" } }),
+                  d === "quotation" && /* @__PURE__ */ jsx(DescriptionOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  d === "invoice" && /* @__PURE__ */ jsx(ReceiptOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  d === "delivery" && /* @__PURE__ */ jsx(LocalShippingOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  d === "quotation" ? "Quotation" : d === "invoice" ? "Tax Invoice" : "Delivery Note"
+                ] }, d)),
+                /* @__PURE__ */ jsxs("button", { className: `st-docchip ${samplePages === 2 ? "is-active" : ""}`, onClick: () => setSamplePages && setSamplePages(samplePages === 1 ? 2 : 1), title: "Add a continuation page to test header/footer repeat", children: [
+                  /* @__PURE__ */ jsx(FileCopyOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  samplePages === 2 ? "2 pages" : "1 page"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsEditingHeaderFooter(false),
+                className: "pbtn pbtn--ghost",
+                children: "Cancel Editing"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onSaveHeaderFooter(true),
+                className: "pbtn pbtn--primary",
+                children: "Save Changes"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setIsEditingHeaderFooter(true),
+                className: "pbtn",
+                disabled: preview,
+                children: [
+                  /* @__PURE__ */ jsx(Edit, { fontSize: "small" }),
+                  "Edit Header/Footer"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "pb-lens", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: !preview ? "is-active" : "",
+                  onClick: () => preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsx(Edit, { fontSize: "small" }),
+                    " Edit"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: preview ? "is-active" : "",
+                  onClick: () => !preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsx(Eye, { fontSize: "small" }),
+                    " Preview"
+                  ]
+                }
+              )
+            ] }),
+            !isSaving && /* @__PURE__ */ jsxs("span", { className: "pb-bar-stat is-dirty", children: [
+              /* @__PURE__ */ jsx("span", { className: "pb-bar-dirty", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" }) }) }),
+              "Unsaved"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onSave,
+                className: "pbtn pbtn--primary",
+                disabled: !(sections == null ? void 0 : sections.length),
+                children: "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onEditModeChange && onEditModeChange(),
+                className: "pbtn pbtn--ghost",
+                children: "Cancel"
+              }
+            )
+          ] }) }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onEditModeChange && onEditModeChange(),
+              className: "pbtn pbtn--primary",
+              disabled: !(sections == null ? void 0 : sections.length),
+              children: [
+                /* @__PURE__ */ jsx(Edit, { fontSize: "small" }),
+                "Edit"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const CustomEditor = lazy(() => import("./custom-editor-C-B5BK-H.esm.js"));
+const editableSections = ["text", "text-block", "heading", "heading-1", "heading-2", "heading-3", "heading-4"];
+const EditorSection = ({
+  section,
+  isSelected,
+  isDragging,
+  isOver,
+  onSelect,
+  onUpdate,
+  onSplit,
+  onDelete,
+  placeholders,
+  setIsSectionEditing,
+  isPreview = false
+}) => {
+  const { extractStyles, getSingleStyles } = useCKEditorStyleExtractor();
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+    transform
+  } = useDraggable({ id: section.id });
+  const { setNodeRef: setDroppableRef } = useDroppable({ id: section.id });
+  const [isEditing, setIsEditing] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isOpenEditSectionModal, setIsOpenEditSectionModal] = useState(false);
+  const [isEditedFromSource, setIsEditedFromSource] = useState(Boolean(section == null ? void 0 : section.is_edited_from_source));
+  const [localContent, setLocalContent] = useState(section.content);
+  const [hasUserEdited, setHasUserEdited] = useState(false);
+  const editorRef = useRef(null);
+  const mouseHoverTimeoutRef = useRef(null);
+  const cursorPositionRef = useRef(null);
+  const isRestoringCursorRef = useRef(false);
+  const contentRef = useRef(section.content);
+  const originalContentRef = useRef(section.content);
+  const debouncedUpdate = useDebouncedUpdate(onUpdate, 300);
+  const style = useMemo(() => {
+    return transform ? {
+      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      transition: "none"
+    } : { transition: "all 0.2s ease" };
+  }, [transform]);
+  const paperSx = useMemo(() => ({
+    position: "relative",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    overflowX: "auto",
+    border: isPreview ? "none" : "1px dashed",
+    borderColor: isPreview ? "transparent" : isSelected ? "primary.main" : isOver ? "primary.main" : "grey.400",
+    borderRadius: 1,
+    bgcolor: "white",
+    opacity: isDragging ? 0.7 : 1,
+    boxShadow: "none",
+    transition: "all 0.2s ease",
+    "&:hover": {
+      boxShadow: "none"
+    },
+    "& table:not(.pbd-items)": {
+      minWidth: "max-content"
+    },
+    ...!isPreview && isOver && { borderColor: "primary.main", boxShadow: "none" }
+  }), [isSelected, isOver, isDragging, isPreview]);
+  const mergedRef = useCallback((node) => {
+    setDraggableRef(node);
+    setDroppableRef(node);
+  }, [setDraggableRef, setDroppableRef]);
+  const handleDblClick = useCallback(() => {
+    if (editableSections.includes(section.type)) {
+      handleEditing();
+    }
+  }, [section.type]);
+  const handleEditing = useCallback(() => {
+    originalContentRef.current = section.content;
+    setHasUserEdited(false);
+    if (section == null ? void 0 : section.isSplitPair) {
+      setIsOpenEditSectionModal(true);
+    } else {
+      setIsEditing(true);
+      setIsSectionEditing(true);
+    }
+  }, [section == null ? void 0 : section.isSplitPair, section.content, setIsSectionEditing]);
+  const handleEditorReady = useCallback((editor) => {
+    editorRef.current = editor;
+    if (editor == null ? void 0 : editor._tiptap) {
+      editor._tiptap.on("selectionUpdate", () => {
+        if (!isRestoringCursorRef.current && editor._tiptap) {
+          const { from, to } = editor._tiptap.state.selection;
+          cursorPositionRef.current = { from, to };
+        }
+      });
+      editor._tiptap.on("update", ({ transaction }) => {
+        if (transaction.docChanged) {
+          setHasUserEdited(true);
+        }
+      });
+    }
+  }, []);
+  const handleSave = useCallback((e) => {
+    var _a;
+    e.stopPropagation();
+    if (editorRef.current) {
+      if (editorRef.current._tiptap) {
+        const { from, to } = editorRef.current._tiptap.state.selection;
+        cursorPositionRef.current = { from, to };
+      }
+      const content = editorRef.current.getData();
+      contentRef.current = content;
+      setLocalContent(content);
+      const styles = extractStyles(section.content, {
+        includeTagStyles: true,
+        includeInlineStyles: true,
+        mergeNestedStyles: true,
+        filterEmptyStyles: true
+      });
+      const single = getSingleStyles(styles);
+      const mergedStyles = {
+        ...((_a = section.attributes) == null ? void 0 : _a.styles) || {},
+        ...single
+      };
+      const mergedAttributes = {
+        ...section.attributes || {},
+        styles: mergedStyles
+      };
+      debouncedUpdate(content, { is_edited_from_source: isEditedFromSource, attributes: mergedAttributes });
+    }
+    setIsEditing(false);
+    setIsSectionEditing(false);
+    setIsOpenEditSectionModal(false);
+    setHasUserEdited(false);
+  }, [debouncedUpdate, isEditedFromSource, extractStyles, getSingleStyles, section.content, section.attributes, setIsSectionEditing, hasUserEdited]);
+  const handleSplit = useCallback(() => {
+    const content = section.content || "";
+    const firstHalf = content;
+    const secondHalf = "";
+    onSplit(firstHalf, secondHalf);
+  }, [section.content, onSplit]);
+  const handleAddPlaceholder = useCallback((placeholder) => {
+    if (editorRef.current) {
+      const viewFragment = editorRef.current.data.processor.toView(
+        `{{${placeholder}}}`
+      );
+      const modelFragment = editorRef.current.data.toModel(viewFragment);
+      editorRef.current.model.insertContent(modelFragment);
+    }
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    if (mouseHoverTimeoutRef.current !== null) {
+      window.clearTimeout(mouseHoverTimeoutRef.current);
+    }
+    mouseHoverTimeoutRef.current = window.setTimeout(() => {
+      setIsHovered(true);
+    }, 50);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (mouseHoverTimeoutRef.current !== null) {
+      window.clearTimeout(mouseHoverTimeoutRef.current);
+    }
+    mouseHoverTimeoutRef.current = window.setTimeout(() => {
+      setIsHovered(false);
+    }, 50);
+  }, []);
+  const handleClick = useCallback((e) => {
+    e.stopPropagation();
+    onSelect();
+  }, [onSelect]);
+  const handleDeleteClick = useCallback((e) => {
+    e.stopPropagation();
+    onDelete();
+  }, [onDelete]);
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    setIsSectionEditing(false);
+  }, [setIsSectionEditing]);
+  const handleCheckboxChange = useCallback((e) => {
+    setIsEditedFromSource(e.target.checked);
+  }, []);
+  const handleSelectChange = useCallback((e) => {
+    if (e.target.value) {
+      handleAddPlaceholder(e.target.value);
+      e.target.value = "";
+    }
+  }, [handleAddPlaceholder]);
+  React__default.useEffect(() => {
+    return () => {
+      if (mouseHoverTimeoutRef.current !== null) {
+        window.clearTimeout(mouseHoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  React__default.useEffect(() => {
+    var _a;
+    if (contentRef.current === section.content) {
+      return;
+    }
+    contentRef.current = section.content;
+    setLocalContent(section.content);
+    if (isEditing && ((_a = editorRef.current) == null ? void 0 : _a._tiptap) && cursorPositionRef.current && !isRestoringCursorRef.current) {
+      const editor = editorRef.current._tiptap;
+      const { from, to } = cursorPositionRef.current;
+      requestAnimationFrame(() => {
+        try {
+          isRestoringCursorRef.current = true;
+          const docSize = editor.state.doc.content.size;
+          const validFrom = Math.min(from, docSize);
+          const validTo = Math.min(to, docSize);
+          editor.commands.setTextSelection({ from: validFrom, to: validTo });
+          if (!editor.isFocused) {
+            editor.commands.focus();
+          }
+        } catch (error) {
+          console.warn("Failed to restore cursor position:", error);
+        } finally {
+          isRestoringCursorRef.current = false;
+        }
+      });
+    }
+  }, [section.content, isEditing]);
+  const contentRenderer = useMemo(() => {
+    if (isEditing) {
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, {}), children: /* @__PURE__ */ jsx(
+        CustomEditor,
+        {
+          editorRef,
+          handleEditorReady,
+          data: localContent,
+          onError: (error) => console.error("Editor error:", error)
+        },
+        `editor-${section.id}`
+      ) });
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        dangerouslySetInnerHTML: { __html: localContent },
+        sx: {
+          position: "relative",
+          py: section.type === "divider" ? 1 : 0,
+          lineHeight: 1.6,
+          flex: 1,
+          minHeight: !localContent || localContent === '<p style="font-size: 16px; color: #333333; line-height: 1.5;">New section</p>' ? "60px" : "auto",
+          "& p": { margin: 0 }
+        }
+      }
+    );
+  }, [isEditing, localContent, section.type, section.id]);
+  const placeholderOptions = useMemo(
+    () => placeholders.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.1000", children: option.label }) }, option.value)),
+    [placeholders]
+  );
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      ref: mergedRef,
+      style,
+      elevation: isHovered || isSelected ? 3 : 1,
+      sx: paperSx,
+      onClick: handleClick,
+      onDoubleClick: handleDblClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        !isPreview && isOver && !isDragging && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              border: "2px dashed",
+              borderColor: "primary.main",
+              borderRadius: 1,
+              bgcolor: "rgba(25, 118, 210, 0.04)",
+              zIndex: 10,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { type: "s2", color: "primary", weight: "medium", children: "Drop here" })
+          }
+        ),
+        !isPreview && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              bgcolor: "grey.50",
+              p: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              borderBottom: "1px solid",
+              borderColor: "grey.200"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  ...listeners,
+                  ...attributes,
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    cursor: "grab",
+                    px: 1,
+                    py: 0.5,
+                    borderRadius: 1,
+                    transition: "background-color 0.2s ease",
+                    "&:hover": { bgcolor: "grey.100" },
+                    "&:active": { cursor: "grabbing" }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      DragIndicatorIcon,
+                      {
+                        sx: { color: "grey.600", fontSize: "1.2rem", mr: 0.5 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { type: "s3", color: "theme.secondary.600", weight: "medium", children: "Move" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  FormControlLabel,
+                  {
+                    control: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        onChange: handleCheckboxChange,
+                        defaultChecked: isEditedFromSource
+                      }
+                    ),
+                    label: /* @__PURE__ */ jsx(Typography, { type: "s2", color: "theme.secondary.1000", children: "Edited from source" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(FormControl, { size: "small", sx: { minWidth: 160 }, children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    displayEmpty: true,
+                    value: "",
+                    size: "small",
+                    renderValue: () => "Add placeholder...",
+                    sx: {
+                      bgcolor: "white",
+                      borderRadius: 1,
+                      "& .MuiSelect-select": { py: 0.75 }
+                    },
+                    onChange: handleSelectChange,
+                    children: placeholderOptions
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleSave, children: /* @__PURE__ */ jsx(Save, { fontSize: "small", color: "inherit" }) }),
+                  /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleCancelEdit, color: "error", children: /* @__PURE__ */ jsx(Close, { fontSize: "small", color: "inherit" }) })
+                ] })
+              ] }) : /* @__PURE__ */ jsx(Fade, { in: isHovered || isSelected, timeout: 200, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.5 }, children: [
+                (section == null ? void 0 : section.is_edited_from_source) && /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: "Edited From Source",
+                    size: "small",
+                    sx: (theme) => {
+                      var _a, _b, _c, _d;
+                      return {
+                        textTransform: "capitalize",
+                        backgroundColor: (_b = (_a = theme.palette.theme) == null ? void 0 : _a.tertiary1) == null ? void 0 : _b[200],
+                        color: (_d = (_c = theme.palette.theme) == null ? void 0 : _c.tertiary1) == null ? void 0 : _d[900]
+                      };
+                    }
+                  }
+                ),
+                editableSections.includes(section.type) && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    onClick: handleEditing,
+                    sx: {
+                      bgcolor: "grey.100",
+                      "&:hover": { bgcolor: "grey.200" }
+                    },
+                    children: /* @__PURE__ */ jsx(Edit, { fontSize: "small", sx: { color: "theme.secondary.1000" } })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    onClick: handleSplit,
+                    sx: {
+                      bgcolor: "grey.100",
+                      "&:hover": { bgcolor: "grey.200" },
+                      opacity: (section == null ? void 0 : section.splitWidth) === 25 ? 0.5 : 1
+                    },
+                    disabled: (section == null ? void 0 : section.splitWidth) === 25,
+                    children: /* @__PURE__ */ jsx(SplitIcon, { fontSize: "small", color: "primary" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    onClick: handleDeleteClick,
+                    sx: {
+                      bgcolor: "grey.100",
+                      "&:hover": { bgcolor: "grey.200" }
+                    },
+                    children: /* @__PURE__ */ jsx(Trash, { fontSize: "small", sx: { color: "theme.error.500" } })
+                  }
+                )
+              ] }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { p: 3, bgcolor: "white" }, children: [
+          /* @__PURE__ */ jsx("style", { children: `
+						a {
+							color: #007bff !important;
+							text-decoration: none !important;
+						}
+						a:hover {
+							text-decoration: underline;
+						}
+           ` }),
+          contentRenderer
+        ] }),
+        isOpenEditSectionModal && /* @__PURE__ */ jsx(
+          EditSectionModal,
+          {
+            isOpen: isOpenEditSectionModal,
+            setIsOpen: setIsOpenEditSectionModal,
+            modalProps: { open: isOpenEditSectionModal },
+            placeholders,
+            handleSave,
+            handleAddPlaceholder,
+            handleEditorReady,
+            section
+          }
+        )
+      ]
+    }
+  );
+};
+const arePropsEqual = (prevProps, nextProps) => {
+  if (prevProps.section.id !== nextProps.section.id) return false;
+  if (prevProps.section.content !== nextProps.section.content) return false;
+  if (prevProps.section.type !== nextProps.section.type) return false;
+  if (prevProps.section.is_edited_from_source !== nextProps.section.is_edited_from_source) return false;
+  if (prevProps.section.isSplitPair !== nextProps.section.isSplitPair) return false;
+  if (prevProps.section.splitWidth !== nextProps.section.splitWidth) return false;
+  if (prevProps.isSelected !== nextProps.isSelected) return false;
+  if (prevProps.isDragging !== nextProps.isDragging) return false;
+  if (prevProps.isOver !== nextProps.isOver) return false;
+  if (prevProps.isPreview !== nextProps.isPreview) return false;
+  if (prevProps.placeholders !== nextProps.placeholders) return false;
+  const prevAttrs = JSON.stringify(prevProps.section.attributes);
+  const nextAttrs = JSON.stringify(nextProps.section.attributes);
+  if (prevAttrs !== nextAttrs) return false;
+  return true;
+};
+const MemoizedEditorSection = React__default.memo(EditorSection, arePropsEqual);
+MemoizedEditorSection.displayName = "EditorSection";
+export {
+  EditorHeader as E,
+  MemoizedEditorSection as M
+};
+//# sourceMappingURL=EditorSection-BLGcgQFm.esm.js.map