@erpsquad/common 1.11.6 → 1.11.7

package/dist/chunks/EditorSection-D6yaBfjP.js

@@ -0,0 +1,848 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const iconsMaterial = require("@mui/icons-material");
+const typography = require("./typography-Bqfr1Ksf.js");
+const edit = require("./edit-ChL0mRgz.js");
+const eye = require("./eye-BM7Zd78y.js");
+const CodeOutlinedIcon = require("@mui/icons-material/CodeOutlined");
+const DescriptionOutlinedIcon = require("@mui/icons-material/DescriptionOutlined");
+const ReceiptOutlinedIcon = require("@mui/icons-material/ReceiptOutlined");
+const LocalShippingOutlinedIcon = require("@mui/icons-material/LocalShippingOutlined");
+const FileCopyOutlinedIcon = require("@mui/icons-material/FileCopyOutlined");
+const reactRouterDom = require("react-router-dom");
+const common = require("./common-D6T6NGWY.js");
+const React = require("react");
+const core = require("@dnd-kit/core");
+const DragIndicatorIcon = require("@mui/icons-material/DragIndicator");
+const SplitIcon = require("@mui/icons-material/CallSplit");
+const save = require("./save-omAUfbkE.js");
+const trash = require("./trash-DWY4lso3.js");
+const select = require("./select-xEdBPnWK.js");
+const editSectionModal = require("./edit-section-modal-Br2ITvLk.js");
+const checkbox = require("./checkbox-Bk957RvH.js");
+const chip = require("./chip-CPZBkY1x.js");
+const Close = require("@mui/icons-material/Close");
+const styleExtractor = require("./style-extractor-BdLIJmVO.js");
+const useDebouncedUpdate = require("./useDebouncedUpdate-jTw4M_Nx.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 = common.templateRoutes(modulePath, type);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.AppBar,
+    {
+      position: "static",
+      color: "default",
+      elevation: 0,
+      sx: {
+        borderColor: "divider",
+        bgcolor: "background.paper"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { variant: "dense", sx: { justifyContent: "space-between", p: 3 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Link,
+            {
+              component: reactRouterDom.Link,
+              to: ROUTES.LIST,
+              underline: "hover",
+              color: "text.secondary",
+              sx: { fontSize: "0.875rem" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s5", color: "theme.secondary.800", children: type === "email" ? "Emails" : "PDF" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(typography.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: "/" }),
+            /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s5", weight: "medium", color: "theme.secondary.1000", children: templateData == null ? void 0 : templateData.name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, alignItems: "center", className: "editorHeader--Buttons", children: [
+          preview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.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__ */ jsxRuntime.jsx(
+                    material.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__ */ jsxRuntime.jsx(iconsMaterial.ZoomOut, { fontSize: "small" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    typography.Typography,
+                    {
+                      type: "s5",
+                      weight: "medium",
+                      sx: {
+                        minWidth: "50px",
+                        textAlign: "center",
+                        color: "#4AC08C"
+                      },
+                      children: [
+                        zoom,
+                        "%"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.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__ */ jsxRuntime.jsx(iconsMaterial.ZoomIn, { fontSize: "small" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Divider,
+                    {
+                      orientation: "vertical",
+                      flexItem: true,
+                      sx: {
+                        mx: 0.5,
+                        bgcolor: "rgba(74, 192, 140, 0.3)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.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__ */ jsxRuntime.jsx(iconsMaterial.ZoomOutMap, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
+          ] }),
+          !fromPreview ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setIsEditingHeaderFooter(true),
+                className: "pbtn",
+                disabled: preview,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(edit.Edit, { fontSize: "small" }),
+                  "Edit Header/Footer"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-lens", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: !preview ? "is-active" : "",
+                  onClick: () => preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(edit.Edit, { fontSize: "small" }),
+                    " Edit"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: preview ? "is-active" : "",
+                  onClick: () => !preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(eye.Eye, { fontSize: "small" }),
+                    " Preview"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onEditHtml,
+                className: `pbtn ${editHtml ? "pbtn--primary" : ""}`,
+                disabled: !(sections == null ? void 0 : sections.length) || preview,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(CodeOutlinedIcon, { fontSize: "small" }),
+                  editHtml ? "Exit HTML Edit" : "Edit HTML"
+                ]
+              }
+            ),
+            !isSaving && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pb-bar-stat is-dirty", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pb-bar-dirty", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" }) }) }),
+              "Unsaved"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSave,
+                className: "pbtn pbtn--primary",
+                disabled: !(sections == null ? void 0 : sections.length) || isSaving,
+                children: isSaving ? "Saving..." : "Save"
+              }
+            )
+          ] }) : editMode ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isEditingHeaderFooter ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            setShowSample && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: "st-sample-tg",
+                  onClick: () => setShowSample((v) => !v),
+                  title: "Preview the master wrapped around a real document",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `cx-switch ${showSample ? "is-on" : ""}`, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cx-switch-dot" }) }),
+                    "Sample content"
+                  ]
+                }
+              ),
+              showSample && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "st-docchips", children: [
+                ["quotation", "invoice", "delivery"].map((d) => /* @__PURE__ */ jsxRuntime.jsxs("button", { className: `st-docchip ${sampleType === d ? "is-active" : ""}`, onClick: () => setSampleType && setSampleType(d), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "st-docchip-dot", style: { background: d === "quotation" ? "#1A8A56" : d === "invoice" ? "#1B2C6E" : "#8a540b" } }),
+                  d === "quotation" && /* @__PURE__ */ jsxRuntime.jsx(DescriptionOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  d === "invoice" && /* @__PURE__ */ jsxRuntime.jsx(ReceiptOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  d === "delivery" && /* @__PURE__ */ jsxRuntime.jsx(LocalShippingOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  d === "quotation" ? "Quotation" : d === "invoice" ? "Tax Invoice" : "Delivery Note"
+                ] }, d)),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FileCopyOutlinedIcon, { sx: { width: 12, height: 12 } }),
+                  samplePages === 2 ? "2 pages" : "1 page"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsEditingHeaderFooter(false),
+                className: "pbtn pbtn--ghost",
+                children: "Cancel Editing"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => onSaveHeaderFooter(true),
+                className: "pbtn pbtn--primary",
+                children: "Save Changes"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setIsEditingHeaderFooter(true),
+                className: "pbtn",
+                disabled: preview,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(edit.Edit, { fontSize: "small" }),
+                  "Edit Header/Footer"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-lens", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: !preview ? "is-active" : "",
+                  onClick: () => preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(edit.Edit, { fontSize: "small" }),
+                    " Edit"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: preview ? "is-active" : "",
+                  onClick: () => !preview && onPreview(),
+                  disabled: !(sections == null ? void 0 : sections.length),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(eye.Eye, { fontSize: "small" }),
+                    " Preview"
+                  ]
+                }
+              )
+            ] }),
+            !isSaving && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pb-bar-stat is-dirty", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pb-bar-dirty", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" }) }) }),
+              "Unsaved"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSave,
+                className: "pbtn pbtn--primary",
+                disabled: !(sections == null ? void 0 : sections.length),
+                children: "Save"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => onEditModeChange && onEditModeChange(),
+                className: "pbtn pbtn--ghost",
+                children: "Cancel"
+              }
+            )
+          ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => onEditModeChange && onEditModeChange(),
+              className: "pbtn pbtn--primary",
+              disabled: !(sections == null ? void 0 : sections.length),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(edit.Edit, { fontSize: "small" }),
+                "Edit"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const CustomEditor = React.lazy(() => Promise.resolve().then(() => require("./custom-editor-BeLYFfpv.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 } = styleExtractor.useCKEditorStyleExtractor();
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+    transform
+  } = core.useDraggable({ id: section.id });
+  const { setNodeRef: setDroppableRef } = core.useDroppable({ id: section.id });
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isOpenEditSectionModal, setIsOpenEditSectionModal] = React.useState(false);
+  const [isEditedFromSource, setIsEditedFromSource] = React.useState(Boolean(section == null ? void 0 : section.is_edited_from_source));
+  const [localContent, setLocalContent] = React.useState(section.content);
+  const [hasUserEdited, setHasUserEdited] = React.useState(false);
+  const editorRef = React.useRef(null);
+  const mouseHoverTimeoutRef = React.useRef(null);
+  const cursorPositionRef = React.useRef(null);
+  const isRestoringCursorRef = React.useRef(false);
+  const contentRef = React.useRef(section.content);
+  const originalContentRef = React.useRef(section.content);
+  const debouncedUpdate = useDebouncedUpdate.useDebouncedUpdate(onUpdate, 300);
+  const style = React.useMemo(() => {
+    return transform ? {
+      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      transition: "none"
+    } : { transition: "all 0.2s ease" };
+  }, [transform]);
+  const paperSx = React.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 = React.useCallback((node) => {
+    setDraggableRef(node);
+    setDroppableRef(node);
+  }, [setDraggableRef, setDroppableRef]);
+  const handleDblClick = React.useCallback(() => {
+    if (editableSections.includes(section.type)) {
+      handleEditing();
+    }
+  }, [section.type]);
+  const handleEditing = React.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 = React.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 = React.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 = React.useCallback(() => {
+    const content = section.content || "";
+    const firstHalf = content;
+    const secondHalf = "";
+    onSplit(firstHalf, secondHalf);
+  }, [section.content, onSplit]);
+  const handleAddPlaceholder = React.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 = React.useCallback(() => {
+    if (mouseHoverTimeoutRef.current !== null) {
+      window.clearTimeout(mouseHoverTimeoutRef.current);
+    }
+    mouseHoverTimeoutRef.current = window.setTimeout(() => {
+      setIsHovered(true);
+    }, 50);
+  }, []);
+  const handleMouseLeave = React.useCallback(() => {
+    if (mouseHoverTimeoutRef.current !== null) {
+      window.clearTimeout(mouseHoverTimeoutRef.current);
+    }
+    mouseHoverTimeoutRef.current = window.setTimeout(() => {
+      setIsHovered(false);
+    }, 50);
+  }, []);
+  const handleClick = React.useCallback((e) => {
+    e.stopPropagation();
+    onSelect();
+  }, [onSelect]);
+  const handleDeleteClick = React.useCallback((e) => {
+    e.stopPropagation();
+    onDelete();
+  }, [onDelete]);
+  const handleCancelEdit = React.useCallback(() => {
+    setIsEditing(false);
+    setIsSectionEditing(false);
+  }, [setIsSectionEditing]);
+  const handleCheckboxChange = React.useCallback((e) => {
+    setIsEditedFromSource(e.target.checked);
+  }, []);
+  const handleSelectChange = React.useCallback((e) => {
+    if (e.target.value) {
+      handleAddPlaceholder(e.target.value);
+      e.target.value = "";
+    }
+  }, [handleAddPlaceholder]);
+  React.useEffect(() => {
+    return () => {
+      if (mouseHoverTimeoutRef.current !== null) {
+        window.clearTimeout(mouseHoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  React.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 = React.useMemo(() => {
+    if (isEditing) {
+      return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, {}), children: /* @__PURE__ */ jsxRuntime.jsx(
+        CustomEditor,
+        {
+          editorRef,
+          handleEditorReady,
+          data: localContent,
+          onError: (error) => console.error("Editor error:", error)
+        },
+        `editor-${section.id}`
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.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 = React.useMemo(
+    () => placeholders.map((option) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: option.value, children: /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s4", color: "theme.secondary.1000", children: option.label }) }, option.value)),
+    [placeholders]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Paper,
+    {
+      ref: mergedRef,
+      style,
+      elevation: isHovered || isSelected ? 3 : 1,
+      sx: paperSx,
+      onClick: handleClick,
+      onDoubleClick: handleDblClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        !isPreview && isOver && !isDragging && /* @__PURE__ */ jsxRuntime.jsx(
+          material.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__ */ jsxRuntime.jsx(typography.Typography, { type: "s2", color: "primary", weight: "medium", children: "Drop here" })
+          }
+        ),
+        !isPreview && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              bgcolor: "grey.50",
+              p: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              borderBottom: "1px solid",
+              borderColor: "grey.200"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                material.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__ */ jsxRuntime.jsx(
+                      DragIndicatorIcon,
+                      {
+                        sx: { color: "grey.600", fontSize: "1.2rem", mr: 0.5 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s3", color: "theme.secondary.600", weight: "medium", children: "Move" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.FormControlLabel,
+                  {
+                    control: /* @__PURE__ */ jsxRuntime.jsx(
+                      checkbox.Checkbox,
+                      {
+                        onChange: handleCheckboxChange,
+                        defaultChecked: isEditedFromSource
+                      }
+                    ),
+                    label: /* @__PURE__ */ jsxRuntime.jsx(typography.Typography, { type: "s2", color: "theme.secondary.1000", children: "Edited from source" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(material.FormControl, { size: "small", sx: { minWidth: 160 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  select.Select,
+                  {
+                    displayEmpty: true,
+                    value: "",
+                    size: "small",
+                    renderValue: () => "Add placeholder...",
+                    sx: {
+                      bgcolor: "white",
+                      borderRadius: 1,
+                      "& .MuiSelect-select": { py: 0.75 }
+                    },
+                    onChange: handleSelectChange,
+                    children: placeholderOptions
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: handleSave, children: /* @__PURE__ */ jsxRuntime.jsx(save.Save, { fontSize: "small", color: "inherit" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: handleCancelEdit, color: "error", children: /* @__PURE__ */ jsxRuntime.jsx(Close, { fontSize: "small", color: "inherit" }) })
+                ] })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: isHovered || isSelected, timeout: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 0.5 }, children: [
+                (section == null ? void 0 : section.is_edited_from_source) && /* @__PURE__ */ jsxRuntime.jsx(
+                  chip.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__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    size: "small",
+                    onClick: handleEditing,
+                    sx: {
+                      bgcolor: "grey.100",
+                      "&:hover": { bgcolor: "grey.200" }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(edit.Edit, { fontSize: "small", sx: { color: "theme.secondary.1000" } })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.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__ */ jsxRuntime.jsx(SplitIcon, { fontSize: "small", color: "primary" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    size: "small",
+                    onClick: handleDeleteClick,
+                    sx: {
+                      bgcolor: "grey.100",
+                      "&:hover": { bgcolor: "grey.200" }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(trash.Trash, { fontSize: "small", sx: { color: "theme.error.500" } })
+                  }
+                )
+              ] }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { p: 3, bgcolor: "white" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+						a {
+							color: #007bff !important;
+							text-decoration: none !important;
+						}
+						a:hover {
+							text-decoration: underline;
+						}
+           ` }),
+          contentRenderer
+        ] }),
+        isOpenEditSectionModal && /* @__PURE__ */ jsxRuntime.jsx(
+          editSectionModal.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.memo(EditorSection, arePropsEqual);
+MemoizedEditorSection.displayName = "EditorSection";
+exports.EditorHeader = EditorHeader;
+exports.MemoizedEditorSection = MemoizedEditorSection;
+//# sourceMappingURL=EditorSection-D6yaBfjP.js.map