@erpsquad/common 1.11.7 → 1.11.8

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

@@ -1,849 +0,0 @@
-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