@erpsquad/common 1.8.44 → 1.8.46

package/dist/views/template-editor/components/EditorCanvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorCanvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\r\nimport { useDroppable } from '@dnd-kit/core';\r\nimport EditorSection from './EditorSection';\r\nimport { Box, Container, Paper } from '@mui/material';\r\nimport Typography from '../../../components/typography/typography';\r\nimport SectionFormatPanel from './SectionFormatPanel';\r\nimport EditorSidebar from './EditorSidebar';\r\nimport { generateEmailPreview, generateHeaderFooterPreview } from '../utils/common';\r\nimport { EnhancedSectionData } from '../types/editor';\r\n\r\nconst CANVAS_TYPES = {\r\n  HEADER: 'header',\r\n  MAIN: 'main',\r\n  FOOTER: 'footer'\r\n};\r\n\r\ninterface DropPosition {\r\n  id: string | null;\r\n  type: 'before' | 'after' | 'inside' | 'left' | 'right';\r\n  canvasType: string;\r\n}\r\n\r\ninterface EditorCanvasProps {\r\n  sections: EnhancedSectionData[];\r\n  headerSections: EnhancedSectionData[];\r\n  footerSections: EnhancedSectionData[];\r\n  activeId: string | null;\r\n  overSection: string | null;\r\n  selectedSection: string | null;\r\n  onSelectSection: (id: string | null) => void;\r\n  onUpdateSection: (id: string, data: any, canvasType?: string) => void;\r\n  onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;\r\n  onDeleteSection: (id: string, canvasType?: string) => void;\r\n  preview: boolean;\r\n  placeholders: Record<string, any>[];\r\n  isEditingHeaderFooter: boolean;\r\n  relation_table:any[];\r\n  handleSave?: () => Promise<void>;\r\n}\r\n\r\nconst EditorCanvas: React.FC<EditorCanvasProps> = ({\r\n  sections,\r\n  headerSections,\r\n  footerSections,\r\n  activeId,\r\n  selectedSection,\r\n  onSelectSection,\r\n  onUpdateSection,\r\n  onSplitSection,\r\n  onDeleteSection,\r\n  preview,\r\n  placeholders,\r\n  isEditingHeaderFooter,\r\n  handleSave,\r\n  relation_table\r\n}) => {\r\n  // Convert placeholders to the expected format\r\n  const formattedPlaceholders = useMemo(() => {\r\n    return placeholders.map((p: Record<string, any>) => ({\r\n      value: p.value || p.key || '',\r\n      label: p.label || p.name || String(p.value || p.key || '')\r\n    }));\r\n  }, [placeholders]);\r\n\r\n  const { setNodeRef: setMainCanvasRef } = useDroppable({ id: 'main-canvas' });\r\n  const { setNodeRef: setHeaderCanvasRef } = useDroppable({ id: 'header-canvas' });\r\n  const { setNodeRef: setFooterCanvasRef } = useDroppable({ id: 'footer-canvas' });\r\n\r\n  const selectedSectionData = useMemo(() => {\r\n    return [...sections, ...headerSections, ...footerSections].find((section) => section.id === selectedSection);\r\n  }, [sections, selectedSection]);\r\n\r\n  const [dropTarget, setDropTarget] = useState<DropPosition>({ \r\n    id: null, \r\n    type: 'inside',\r\n    canvasType: CANVAS_TYPES.MAIN\r\n  });\r\n  const [isDraggingFromSidebar, setIsDraggingFromSidebar] = useState(false);\r\n  const [isSectionEditing, setIsSectionEditing] = useState(false);\r\n  \r\n  const lastUpdateTimeRef = useRef(0);\r\n  const lastPositionRef = useRef({ x: 0, y: 0 });\r\n  const activeIdRef = useRef<string | null>(null);\r\n  const mainCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const headerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const footerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  \r\n  const DEBOUNCE_MS = 200;\r\n  const MIN_MOUSE_MOVE = 15;\r\n  const POSITION_HYSTERESIS = 0.1;\r\n\r\n  const getTargetSections = (canvasType: string) => {\r\n    switch (canvasType) {\r\n      case CANVAS_TYPES.HEADER:\r\n        return headerSections;\r\n      case CANVAS_TYPES.FOOTER:\r\n        return footerSections;\r\n      default:\r\n        return sections;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    activeIdRef.current = activeId;\r\n    \r\n    if (activeId && String(activeId).includes('sidebar-')) {\r\n      setIsDraggingFromSidebar(true);\r\n      \r\n      if (sections?.length > 0) {\r\n        updateDropTarget(sections[0].id, 'before', CANVAS_TYPES.MAIN);\r\n      } else if (headerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(headerSections[0].id, 'before', CANVAS_TYPES.HEADER);\r\n      } else if (footerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(footerSections[0].id, 'before', CANVAS_TYPES.FOOTER);\r\n      } else {\r\n        updateDropTarget(null, 'inside', CANVAS_TYPES.MAIN);\r\n      }\r\n    } else if (!activeId) {\r\n      setIsDraggingFromSidebar(false);\r\n      setDropTarget({ id: null, type: 'inside', canvasType: CANVAS_TYPES.MAIN });\r\n    }\r\n  }, [activeId, sections, headerSections, footerSections, isEditingHeaderFooter]);\r\n\r\n  const updateDropTarget = (id: string | null, type: DropPosition['type'], canvasType: string) => {\r\n    const now = Date.now();\r\n    if (now - lastUpdateTimeRef.current < DEBOUNCE_MS) return;\r\n    \r\n    if (dropTarget.id !== id || dropTarget.type !== type || dropTarget.canvasType !== canvasType) {\r\n      lastUpdateTimeRef.current = now;\r\n      setDropTarget({ id, type, canvasType });\r\n    }\r\n  };\r\n\r\n  const handleMouseMove = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const dx = e.clientX - lastPositionRef.current.x;\r\n    const dy = e.clientY - lastPositionRef.current.y;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n    \r\n    if (distance < MIN_MOUSE_MOVE) return;\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n    \r\n    const elementsUnderCursor = document.elementsFromPoint(e.clientX, e.clientY);\r\n    const sectionElement = elementsUnderCursor.find(el => \r\n      el.hasAttribute('data-section-id')\r\n    );\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (!sectionElement) {\r\n      if (targetSections.length === 0) {\r\n        updateDropTarget(null, 'inside', canvasType);\r\n      } else if (isDraggingFromSidebar) {\r\n        updateDropTarget(targetSections[targetSections.length - 1].id, 'after', canvasType);\r\n      }\r\n      return;\r\n    }\r\n    \r\n    const sectionId = sectionElement.getAttribute('data-section-id');\r\n    if (!sectionId) return;\r\n    \r\n    const sectionCanvasType = sectionElement.hasAttribute('data-canvas-type') \r\n      ? sectionElement.getAttribute('data-canvas-type') as string\r\n      : canvasType;\r\n    \r\n    const rect = sectionElement.getBoundingClientRect();\r\n    const relativeY = e.clientY - rect.top;\r\n    const relativeX = e.clientX - rect.left;\r\n    const sectionHeight = rect.height;\r\n    const sectionWidth = rect.width;\r\n    \r\n    const canvasSections = getTargetSections(sectionCanvasType);\r\n    const section = canvasSections.find(s => s.id === sectionId);\r\n    \r\n    const isSplitGroup = sectionId.startsWith('split-group-');\r\n    \r\n    if (isSplitGroup || (section && section.isSplitPair)) {\r\n      if (relativeX < sectionWidth * (0.5 - POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'left', sectionCanvasType);\r\n      } else if (relativeX > sectionWidth * (0.5 + POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'right', sectionCanvasType);\r\n      } else {\r\n        updateDropTarget(sectionId, 'inside', sectionCanvasType);\r\n      }\r\n    } else {\r\n      let position: DropPosition['type'] = dropTarget.type;\r\n      if (relativeY < sectionHeight * (0.3 - POSITION_HYSTERESIS)) {\r\n        position = 'before';\r\n      } else if (relativeY > sectionHeight * (0.7 + POSITION_HYSTERESIS)) {\r\n        position = 'after';\r\n      } else {\r\n        position = 'inside';\r\n      }\r\n      updateDropTarget(sectionId, position, sectionCanvasType);\r\n    }\r\n  };\r\n\r\n  const handleMouseEnter = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current || !isDraggingFromSidebar) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (targetSections.length > 0) {\r\n      updateDropTarget(targetSections[0].id, 'before', canvasType);\r\n    } else {\r\n      updateDropTarget(null, 'inside', canvasType);\r\n    }\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n  };\r\n\r\n  const renderSectionsForCanvas = (canvasSections: EnhancedSectionData[], canvasType: string) => {\r\n    const result: React.ReactNode[] = [];\r\n    const processedGroups = new Set<string>();\r\n    let i = 0;\r\n    \r\n    const renderDropIndicator = (key: string, isHorizontal = false) => (\r\n      <Box\r\n        key={key}\r\n        sx={{\r\n          [isHorizontal ? 'width' : 'height']: '50px',\r\n          border: '2px dashed',\r\n          borderColor: 'primary.main',\r\n          borderRadius: 1,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          bgcolor: 'rgba(25, 118, 210, 0.04)',\r\n          [isHorizontal ? 'mx' : 'mb']: 2,\r\n          opacity: 0,\r\n          animation: 'fadeIn 0.3s ease-in-out forwards',\r\n          '@keyframes fadeIn': {\r\n            '0%': { opacity: 0, transform: isHorizontal ? 'translateX(-10px)' : 'translateY(-10px)' },\r\n            '100%': { opacity: 1, transform: 'translate(0)' },\r\n          },\r\n        }}\r\n      >\r\n        <Typography type='s2' color='primary' weight='medium'>\r\n          Drop here\r\n        </Typography>\r\n      </Box>\r\n    );\r\n\r\n    if (isDraggingFromSidebar && \r\n        canvasSections?.length > 0 && \r\n        dropTarget.type === 'before' && \r\n        dropTarget.id === canvasSections[0].id &&\r\n        dropTarget.canvasType === canvasType) {\r\n      result.push(renderDropIndicator(`drop-before-first-${canvasType}`));\r\n    }\r\n    \r\n    while (i < canvasSections?.length) {\r\n      const section = canvasSections[i];\r\n      const sectionId = section.id;\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'before' && \r\n          dropTarget.canvasType === canvasType && \r\n          !(isDraggingFromSidebar && i === 0)) {\r\n        result.push(renderDropIndicator(`drop-before-${sectionId}-${canvasType}`));\r\n      }\r\n      \r\n      if (!section.isSplitPair) {\r\n        result.push(\r\n          <Box \r\n            key={section.id} \r\n            data-section-id={section.id} \r\n            data-canvas-type={canvasType}\r\n          >\r\n            <EditorSection\r\n              section={section}\r\n              isSelected={selectedSection === section.id}\r\n              isDragging={activeId === section.id}\r\n              isOver={dropTarget.id === section.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n              onSelect={() => onSelectSection(section.id)}\r\n              onUpdate={(content, extra) => {\r\n                onUpdateSection(section.id, { content, ...extra }, canvasType); \r\n                onSelectSection(null);\r\n              }}\r\n              onSplit={(content1, content2) => onSplitSection(section.id, content1, content2, canvasType)}\r\n              onDelete={() => onDeleteSection(section.id, canvasType)}\r\n              placeholders={formattedPlaceholders}\r\n              setIsSectionEditing={setIsSectionEditing}\r\n            />\r\n          </Box>\r\n        );\r\n        i++;\r\n      } else {\r\n        const splitGroupId = section.splitGroupId;\r\n        if (splitGroupId && processedGroups.has(splitGroupId)) {\r\n          i++;\r\n          continue;\r\n        }\r\n        \r\n        const splitSections = canvasSections.filter(s => s.splitGroupId === splitGroupId);\r\n        if (splitSections.length > 0) {\r\n          if (splitGroupId) processedGroups.add(splitGroupId);\r\n          \r\n          const splitRow = (\r\n            <Box \r\n              key={`split-row-${splitGroupId}`} \r\n              sx={{ \r\n                display: 'flex', \r\n                gap: 2, \r\n                mb: 2, \r\n                bgcolor: 'rgba(0, 0, 0, 0.02)', \r\n                p: 1, \r\n                borderRadius: 1 \r\n              }} \r\n              data-section-id={`split-group-${splitGroupId}`}\r\n              data-canvas-type={canvasType}\r\n            >\r\n              {splitSections.map((splitSection, index) => (\r\n                <React.Fragment key={splitSection.id}>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'left' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-left-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                  <Box\r\n                    sx={{\r\n                      width: splitSection.splitWidth ? `${splitSection.splitWidth}%` : `${100 / splitSections.length}%`,\r\n                      transition: 'width 0.3s ease-in-out',\r\n                    }}\r\n                    data-section-id={splitSection.id}\r\n                    data-canvas-type={canvasType}\r\n                  >\r\n                    <EditorSection\r\n                      section={splitSection}\r\n                      isSelected={selectedSection === splitSection.id}\r\n                      isDragging={activeId === splitSection.id}\r\n                      isOver={dropTarget.id === splitSection.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n                      onSelect={() => onSelectSection(splitSection.id)}\r\n                      onUpdate={(content, extra) => {\r\n                        onUpdateSection(splitSection.id, { content, ...extra }, canvasType); \r\n                        onSelectSection(null);\r\n                      }}\r\n                      onSplit={(content1, content2) => onSplitSection(splitSection.id, content1, content2, canvasType)}\r\n                      onDelete={() => onDeleteSection(splitSection.id, canvasType)}\r\n                      placeholders={formattedPlaceholders}\r\n                      setIsSectionEditing={setIsSectionEditing}\r\n                    />\r\n                  </Box>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'right' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-right-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                </React.Fragment>\r\n              ))}\r\n            </Box>\r\n          );\r\n          result.push(splitRow);\r\n          i += splitSections.length;\r\n        } else {\r\n          i++;\r\n        }\r\n      }\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'after' && \r\n          dropTarget.canvasType === canvasType) {\r\n        result.push(renderDropIndicator(`drop-after-${sectionId}-${canvasType}`));\r\n      }\r\n    }\r\n    \r\n    if ((canvasSections?.length === 0 && activeId && dropTarget.canvasType === canvasType) || \r\n        (canvasSections?.length === 0 && isDraggingFromSidebar && dropTarget.canvasType === canvasType)) {\r\n      result.push(renderDropIndicator(`drop-empty-canvas-${canvasType}`));\r\n    }\r\n    \r\n    return result;\r\n  };\r\n\r\n  const renderedMainSections = useMemo(() => \r\n    renderSectionsForCanvas(sections, CANVAS_TYPES.MAIN), \r\n    [sections, dropTarget, activeId, isDraggingFromSidebar, selectedSection]\r\n  );\r\n  \r\n  const renderedHeaderSections = useMemo(() => \r\n    renderSectionsForCanvas(headerSections, CANVAS_TYPES.HEADER),\r\n    [headerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n  \r\n  const renderedFooterSections = useMemo(() => \r\n    renderSectionsForCanvas(footerSections, CANVAS_TYPES.FOOTER),\r\n    [footerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n\r\n  const renderPreview = () => {\r\n    // const allSections = [...headerSections, ...sections, ...footerSections];\r\n    return <Box dangerouslySetInnerHTML={{ __html: generateEmailPreview(sections, headerSections, footerSections) }} />;\r\n  };\r\n\r\n  const renderCanvas = (\r\n    title: string, \r\n    canvasType: string, \r\n    renderedSections: React.ReactNode[], \r\n    setCanvasRef: (node: HTMLElement | null) => void,\r\n    ref: React.MutableRefObject<HTMLDivElement | null>,\r\n    visible: boolean = true\r\n  ) => {\r\n    if (!visible) return null;\r\n    \r\n    return (\r\n      <Box sx={{ mb: 3 }}>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && headerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n              sx= {{\r\n                    boxShadow: 'none !important',\r\n                    \".MuiAccordionSummary-root\": {\r\n                      backgroundColor: '#fafafa !important',\r\n                      border: `0 !important`,\r\n                      p: 0,\r\n                      pb: 1,\r\n                      // mb: 1,\r\n                      m:0,\r\n                      minHeight: 'unset'\r\n                    }\r\n                }}\r\n            >\r\n              <AccordionSummary\r\n                expandIcon={<ExpandMoreIcon />}\r\n                aria-controls=\"panel1-content\"\r\n                id=\"panel1-header\"\r\n              > */}\r\n                <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'}>Header</Typography>\r\n              {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(headerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n        )}\r\n        <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mb: 1 }}>{title}</Typography>\r\n        <Paper\r\n          ref={(node) => {\r\n            setCanvasRef(node);\r\n            ref.current = node;\r\n          }}\r\n          elevation={0}\r\n          sx={{\r\n            p: 4,\r\n            border: '1px dashed',\r\n            borderColor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n              ? 'primary.main' \r\n              : 'primary.light',\r\n            borderRadius: 1,\r\n            bgcolor: 'background.paper',\r\n            position: 'relative',\r\n            minHeight: title === 'Header' || title === 'Footer' ? '100px' : '200px',\r\n            transition: 'border-color 0.3s ease, background-color 0.3s ease',\r\n            '&:hover': {\r\n              bgcolor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n                ? 'rgba(25, 118, 210, 0.04)' \r\n                : 'background.paper',\r\n            },\r\n            pointerEvents: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 'none' \r\n              : 'auto',\r\n            opacity: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 0.5 \r\n              : 1,\r\n          }}\r\n          onClick={() => {\r\n            if ((canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter) return;\r\n            onSelectSection(null);\r\n          }}\r\n          onMouseMove={(e) => handleMouseMove(e, canvasType)}\r\n          onMouseEnter={(e) => handleMouseEnter(e, canvasType)}\r\n        >\r\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\r\n            {renderedSections}\r\n            {getTargetSections(canvasType)?.length === 0 && \r\n             !activeId && \r\n             !isDraggingFromSidebar && (\r\n              <Box sx={{ borderRadius: 1, p: 2, textAlign: 'center', color: 'text.secondary' }}>\r\n                <Typography type='s2' color='theme.secondary.600' weight='medium'>\r\n                  Drag Sections from side panel to start building the {title.toLowerCase()}\r\n                </Typography>\r\n              </Box>\r\n            )}\r\n          </Box>\r\n        </Paper>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && footerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n            sx= {{\r\n                  boxShadow: 'none !important',\r\n                  \".MuiAccordionSummary-root\": {\r\n                    backgroundColor: '#fafafa !important',\r\n                    border: `0 !important`,\r\n                    p: 0,\r\n                    pb: 1,\r\n                    // mb: 1,\r\n                    m:0,\r\n                    minHeight: 'unset'\r\n                  }\r\n              }}\r\n          >\r\n            <AccordionSummary\r\n              expandIcon={<ExpandMoreIcon />}\r\n              aria-controls=\"panel1-content\"\r\n              id=\"panel1-header\"\r\n            > */}\r\n              <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mt: 1 }}>Footer</Typography>\r\n            {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(footerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n          )}\r\n      </Box>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\r\n      <Box sx={{ flex: 1, overflow: 'auto', height: 'calc(100vh - 104px)' }}>\r\n        <Container maxWidth=\"lg\" sx={{ py: 4 }}>\r\n          {preview ? (\r\n            renderPreview()\r\n          ) : (\r\n            <>\r\n              {renderCanvas(\r\n                'Header', \r\n                CANVAS_TYPES.HEADER, \r\n                renderedHeaderSections, \r\n                setHeaderCanvasRef, \r\n                headerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Content', \r\n                CANVAS_TYPES.MAIN, \r\n                renderedMainSections, \r\n                setMainCanvasRef, \r\n                mainCanvasRef,\r\n                !isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Footer', \r\n                CANVAS_TYPES.FOOTER, \r\n                renderedFooterSections, \r\n                setFooterCanvasRef, \r\n                footerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n            </>\r\n          )}\r\n        </Container>\r\n      </Box>\r\n      <Box\r\n        sx={{\r\n          width: 400,\r\n          flexShrink: 0,\r\n          position: 'sticky',\r\n          top: 0,\r\n          alignSelf: 'flex-start',\r\n          height: 'calc(100vh - 104px)',\r\n          overflowY: 'auto',\r\n          borderLeft: '1px solid',\r\n          borderColor: 'divider',\r\n          bgcolor: 'background.paper',\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        {(selectedSection && !selectedSectionData?.is_edited_from_source && !isSectionEditing) ? (\r\n          <SectionFormatPanel\r\n            section={selectedSectionData}\r\n            onClose={() => onSelectSection(null)}\r\n            onUpdate={(data) => {\r\n              if (selectedSection) {\r\n                const canvasType = headerSections.some(s => s.id === selectedSection)\r\n                  ? CANVAS_TYPES.HEADER\r\n                  : footerSections.some(s => s.id === selectedSection)\r\n                    ? CANVAS_TYPES.FOOTER\r\n                    : CANVAS_TYPES.MAIN;\r\n                onUpdateSection(selectedSection, data, canvasType);\r\n              }\r\n            }}\r\n            placeholders={placeholders}\r\n            handleSave={handleSave}\r\n            relation_table={relation_table}\r\n          />\r\n        ) : (\r\n          <EditorSidebar />\r\n        )}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default EditorCanvas;"],"names":["CANVAS_TYPES","sections","headerSections","footerSections","activeId","selectedSection","onSelectSection","onUpdateSection","onSplitSection","onDeleteSection","preview","placeholders","isEditingHeaderFooter","handleSave","relation_table","formattedPlaceholders","useMemo","map","p","value","key","label","name","String","setNodeRef","setMainCanvasRef","useDroppable","id","setHeaderCanvasRef","setFooterCanvasRef","selectedSectionData","find","section","dropTarget","setDropTarget","useState","type","canvasType","isDraggingFromSidebar","setIsDraggingFromSidebar","isSectionEditing","setIsSectionEditing","lastUpdateTimeRef","useRef","lastPositionRef","x","y","activeIdRef","mainCanvasRef","headerCanvasRef","footerCanvasRef","getTargetSections","useEffect","current","includes","length","updateDropTarget","now","Date","renderSectionsForCanvas","canvasSections","result","processedGroups","Set","i","renderDropIndicator","isHorizontal","jsx","Box","sx","border","borderColor","borderRadius","display","alignItems","justifyContent","bgcolor","opacity","animation","transform","children","Typography","color","weight","push","sectionId","isSplitPair","splitGroupId","has","splitSections","filter","s","add","splitRow","gap","mb","splitSection","index","jsxs","React","Fragment","width","splitWidth","transition","EditorSection","isSelected","isDragging","isOver","onSelect","onUpdate","content","extra","onSplit","content1","content2","onDelete","renderedMainSections","renderedHeaderSections","renderedFooterSections","renderCanvas","title","renderedSections","setCanvasRef","ref","visible","Paper","boxShadow","dangerouslySetInnerHTML","__html","generateHeaderFooterPreview","node","elevation","position","minHeight","pointerEvents","onClick","onMouseMove","e","dx","clientX","dy","clientY","Math","sqrt","sectionElement","document","elementsFromPoint","el","hasAttribute","targetSections","getAttribute","sectionCanvasType","rect","getBoundingClientRect","relativeY","top","relativeX","left","sectionHeight","height","sectionWidth","startsWith","handleMouseMove","onMouseEnter","handleMouseEnter","flexDirection","_a","textAlign","toLowerCase","mt","flex","overflow","Container","maxWidth","py","generateEmailPreview","flexShrink","alignSelf","overflowY","borderLeft","zIndex","is_edited_from_source","EditorSidebar","SectionFormatPanel","onClose","data","some"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorCanvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\r\nimport { useDroppable } from '@dnd-kit/core';\r\nimport EditorSection from './EditorSection';\r\nimport { Box, Container, Paper } from '@mui/material';\r\nimport Typography from '../../../components/typography/typography';\r\nimport SectionFormatPanel from './SectionFormatPanel';\r\nimport EditorSidebar from './EditorSidebar';\r\nimport { generateEmailPreview, generateHeaderFooterPreview } from '../utils/common';\r\nimport { EnhancedSectionData } from '../types/editor';\r\n\r\nconst CANVAS_TYPES = {\r\n  HEADER: 'header',\r\n  MAIN: 'main',\r\n  FOOTER: 'footer'\r\n};\r\n\r\ninterface DropPosition {\r\n  id: string | null;\r\n  type: 'before' | 'after' | 'inside' | 'left' | 'right';\r\n  canvasType: string;\r\n}\r\n\r\ninterface EditorCanvasProps {\r\n  sections: EnhancedSectionData[];\r\n  headerSections: EnhancedSectionData[];\r\n  footerSections: EnhancedSectionData[];\r\n  activeId: string | null;\r\n  overSection: string | null;\r\n  selectedSection: string | null;\r\n  onSelectSection: (id: string | null) => void;\r\n  onUpdateSection: (id: string, data: any, canvasType?: string) => void;\r\n  onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;\r\n  onDeleteSection: (id: string, canvasType?: string) => void;\r\n  preview: boolean;\r\n  placeholders: Record<string, any>[];\r\n  isEditingHeaderFooter: boolean;\r\n  relation_table:any[];\r\n  handleSave?: () => Promise<void>;\r\n}\r\n\r\nconst EditorCanvas: React.FC<EditorCanvasProps> = ({\r\n  sections,\r\n  headerSections,\r\n  footerSections,\r\n  activeId,\r\n  selectedSection,\r\n  onSelectSection,\r\n  onUpdateSection,\r\n  onSplitSection,\r\n  onDeleteSection,\r\n  preview,\r\n  placeholders,\r\n  isEditingHeaderFooter,\r\n  handleSave,\r\n  relation_table\r\n}) => {\r\n  // Convert placeholders to the expected format\r\n  const formattedPlaceholders = useMemo(() => {\r\n    return placeholders.map((p: Record<string, any>) => ({\r\n      value: p.value || p.key || '',\r\n      label: p.label || p.name || String(p.value || p.key || '')\r\n    }));\r\n  }, [placeholders]);\r\n\r\n  const { setNodeRef: setMainCanvasRef } = useDroppable({ id: 'main-canvas' });\r\n  const { setNodeRef: setHeaderCanvasRef } = useDroppable({ id: 'header-canvas' });\r\n  const { setNodeRef: setFooterCanvasRef } = useDroppable({ id: 'footer-canvas' });\r\n\r\n  const selectedSectionData = useMemo(() => {\r\n    return [...sections, ...headerSections, ...footerSections].find((section) => section.id === selectedSection);\r\n  }, [sections, selectedSection]);\r\n\r\n  const [dropTarget, setDropTarget] = useState<DropPosition>({ \r\n    id: null, \r\n    type: 'inside',\r\n    canvasType: CANVAS_TYPES.MAIN\r\n  });\r\n  const [isDraggingFromSidebar, setIsDraggingFromSidebar] = useState(false);\r\n  const [isSectionEditing, setIsSectionEditing] = useState(false);\r\n  \r\n  const lastUpdateTimeRef = useRef(0);\r\n  const lastPositionRef = useRef({ x: 0, y: 0 });\r\n  const activeIdRef = useRef<string | null>(null);\r\n  const mainCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const headerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const footerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  \r\n  const DEBOUNCE_MS = 200;\r\n  const MIN_MOUSE_MOVE = 15;\r\n  const POSITION_HYSTERESIS = 0.1;\r\n\r\n  const getTargetSections = (canvasType: string) => {\r\n    switch (canvasType) {\r\n      case CANVAS_TYPES.HEADER:\r\n        return headerSections;\r\n      case CANVAS_TYPES.FOOTER:\r\n        return footerSections;\r\n      default:\r\n        return sections;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    activeIdRef.current = activeId;\r\n    \r\n    if (activeId && String(activeId).includes('sidebar-')) {\r\n      setIsDraggingFromSidebar(true);\r\n      \r\n      if (sections?.length > 0) {\r\n        updateDropTarget(sections[0].id, 'before', CANVAS_TYPES.MAIN);\r\n      } else if (headerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(headerSections[0].id, 'before', CANVAS_TYPES.HEADER);\r\n      } else if (footerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(footerSections[0].id, 'before', CANVAS_TYPES.FOOTER);\r\n      } else {\r\n        updateDropTarget(null, 'inside', CANVAS_TYPES.MAIN);\r\n      }\r\n    } else if (!activeId) {\r\n      setIsDraggingFromSidebar(false);\r\n      setDropTarget({ id: null, type: 'inside', canvasType: CANVAS_TYPES.MAIN });\r\n    }\r\n  }, [activeId, sections, headerSections, footerSections, isEditingHeaderFooter]);\r\n\r\n  const updateDropTarget = (id: string | null, type: DropPosition['type'], canvasType: string) => {\r\n    const now = Date.now();\r\n    if (now - lastUpdateTimeRef.current < DEBOUNCE_MS) return;\r\n    \r\n    if (dropTarget.id !== id || dropTarget.type !== type || dropTarget.canvasType !== canvasType) {\r\n      lastUpdateTimeRef.current = now;\r\n      setDropTarget({ id, type, canvasType });\r\n    }\r\n  };\r\n\r\n  const handleMouseMove = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const dx = e.clientX - lastPositionRef.current.x;\r\n    const dy = e.clientY - lastPositionRef.current.y;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n    \r\n    if (distance < MIN_MOUSE_MOVE) return;\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n    \r\n    const elementsUnderCursor = document.elementsFromPoint(e.clientX, e.clientY);\r\n    const sectionElement = elementsUnderCursor.find(el => \r\n      el.hasAttribute('data-section-id')\r\n    );\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (!sectionElement) {\r\n      if (targetSections.length === 0) {\r\n        updateDropTarget(null, 'inside', canvasType);\r\n      } else if (isDraggingFromSidebar) {\r\n        updateDropTarget(targetSections[targetSections.length - 1].id, 'after', canvasType);\r\n      }\r\n      return;\r\n    }\r\n    \r\n    const sectionId = sectionElement.getAttribute('data-section-id');\r\n    if (!sectionId) return;\r\n    \r\n    const sectionCanvasType = sectionElement.hasAttribute('data-canvas-type') \r\n      ? sectionElement.getAttribute('data-canvas-type') as string\r\n      : canvasType;\r\n    \r\n    const rect = sectionElement.getBoundingClientRect();\r\n    const relativeY = e.clientY - rect.top;\r\n    const relativeX = e.clientX - rect.left;\r\n    const sectionHeight = rect.height;\r\n    const sectionWidth = rect.width;\r\n    \r\n    const canvasSections = getTargetSections(sectionCanvasType);\r\n    const section = canvasSections.find(s => s.id === sectionId);\r\n    \r\n    const isSplitGroup = sectionId.startsWith('split-group-');\r\n    \r\n    if (isSplitGroup || (section && section.isSplitPair)) {\r\n      if (relativeX < sectionWidth * (0.5 - POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'left', sectionCanvasType);\r\n      } else if (relativeX > sectionWidth * (0.5 + POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'right', sectionCanvasType);\r\n      } else {\r\n        updateDropTarget(sectionId, 'inside', sectionCanvasType);\r\n      }\r\n    } else {\r\n      let position: DropPosition['type'] = dropTarget.type;\r\n      if (relativeY < sectionHeight * (0.3 - POSITION_HYSTERESIS)) {\r\n        position = 'before';\r\n      } else if (relativeY > sectionHeight * (0.7 + POSITION_HYSTERESIS)) {\r\n        position = 'after';\r\n      } else {\r\n        position = 'inside';\r\n      }\r\n      updateDropTarget(sectionId, position, sectionCanvasType);\r\n    }\r\n  };\r\n\r\n  const handleMouseEnter = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current || !isDraggingFromSidebar) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (targetSections.length > 0) {\r\n      updateDropTarget(targetSections[0].id, 'before', canvasType);\r\n    } else {\r\n      updateDropTarget(null, 'inside', canvasType);\r\n    }\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n  };\r\n\r\n  const renderSectionsForCanvas = (canvasSections: EnhancedSectionData[], canvasType: string) => {\r\n    const result: React.ReactNode[] = [];\r\n    const processedGroups = new Set<string>();\r\n    let i = 0;\r\n    \r\n    const renderDropIndicator = (key: string, isHorizontal = false) => (\r\n      <Box\r\n        key={key}\r\n        sx={{\r\n          [isHorizontal ? 'width' : 'height']: '50px',\r\n          border: '2px dashed',\r\n          borderColor: 'primary.main',\r\n          borderRadius: 1,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          bgcolor: 'rgba(25, 118, 210, 0.04)',\r\n          [isHorizontal ? 'mx' : 'mb']: 2,\r\n          opacity: 0,\r\n          animation: 'fadeIn 0.3s ease-in-out forwards',\r\n          '@keyframes fadeIn': {\r\n            '0%': { opacity: 0, transform: isHorizontal ? 'translateX(-10px)' : 'translateY(-10px)' },\r\n            '100%': { opacity: 1, transform: 'translate(0)' },\r\n          },\r\n        }}\r\n      >\r\n        <Typography type='s2' color='primary' weight='medium'>\r\n          Drop here\r\n        </Typography>\r\n      </Box>\r\n    );\r\n\r\n    if (isDraggingFromSidebar && \r\n        canvasSections?.length > 0 && \r\n        dropTarget.type === 'before' && \r\n        dropTarget.id === canvasSections[0].id &&\r\n        dropTarget.canvasType === canvasType) {\r\n      result.push(renderDropIndicator(`drop-before-first-${canvasType}`));\r\n    }\r\n    \r\n    while (i < canvasSections?.length) {\r\n      const section = canvasSections[i];\r\n      const sectionId = section.id;\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'before' && \r\n          dropTarget.canvasType === canvasType && \r\n          !(isDraggingFromSidebar && i === 0)) {\r\n        result.push(renderDropIndicator(`drop-before-${sectionId}-${canvasType}`));\r\n      }\r\n      \r\n      if (!section.isSplitPair) {\r\n        result.push(\r\n          <Box \r\n            key={section.id} \r\n            data-section-id={section.id} \r\n            data-canvas-type={canvasType}\r\n          >\r\n            <EditorSection\r\n              section={section}\r\n              isSelected={selectedSection === section.id}\r\n              isDragging={activeId === section.id}\r\n              isOver={dropTarget.id === section.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n              onSelect={() => onSelectSection(section.id)}\r\n              onUpdate={(content, extra) => {\r\n                onUpdateSection(section.id, { content, ...extra }, canvasType); \r\n                onSelectSection(null);\r\n              }}\r\n              onSplit={(content1, content2) => onSplitSection(section.id, content1, content2, canvasType)}\r\n              onDelete={() => onDeleteSection(section.id, canvasType)}\r\n              placeholders={formattedPlaceholders}\r\n              setIsSectionEditing={setIsSectionEditing}\r\n            />\r\n          </Box>\r\n        );\r\n        i++;\r\n      } else {\r\n        const splitGroupId = section.splitGroupId;\r\n        if (splitGroupId && processedGroups.has(splitGroupId)) {\r\n          i++;\r\n          continue;\r\n        }\r\n        \r\n        const splitSections = canvasSections.filter(s => s.splitGroupId === splitGroupId);\r\n        if (splitSections.length > 0) {\r\n          if (splitGroupId) processedGroups.add(splitGroupId);\r\n          \r\n          const splitRow = (\r\n            <Box \r\n              key={`split-row-${splitGroupId}`} \r\n              sx={{ \r\n                display: 'flex', \r\n                gap: 2, \r\n                mb: 2, \r\n                bgcolor: 'rgba(0, 0, 0, 0.02)', \r\n                p: 1, \r\n                borderRadius: 1 \r\n              }} \r\n              data-section-id={`split-group-${splitGroupId}`}\r\n              data-canvas-type={canvasType}\r\n            >\r\n              {splitSections.map((splitSection, index) => (\r\n                <React.Fragment key={splitSection.id}>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'left' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-left-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                  <Box\r\n                    sx={{\r\n                      width: splitSection.splitWidth ? `${splitSection.splitWidth}%` : `${100 / splitSections.length}%`,\r\n                      transition: 'width 0.3s ease-in-out',\r\n                    }}\r\n                    data-section-id={splitSection.id}\r\n                    data-canvas-type={canvasType}\r\n                  >\r\n                    <EditorSection\r\n                      section={splitSection}\r\n                      isSelected={selectedSection === splitSection.id}\r\n                      isDragging={activeId === splitSection.id}\r\n                      isOver={dropTarget.id === splitSection.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n                      onSelect={() => onSelectSection(splitSection.id)}\r\n                      onUpdate={(content, extra) => {\r\n                        onUpdateSection(splitSection.id, { content, ...extra }, canvasType); \r\n                        onSelectSection(null);\r\n                      }}\r\n                      onSplit={(content1, content2) => onSplitSection(splitSection.id, content1, content2, canvasType)}\r\n                      onDelete={() => onDeleteSection(splitSection.id, canvasType)}\r\n                      placeholders={formattedPlaceholders}\r\n                      setIsSectionEditing={setIsSectionEditing}\r\n                    />\r\n                  </Box>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'right' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-right-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                </React.Fragment>\r\n              ))}\r\n            </Box>\r\n          );\r\n          result.push(splitRow);\r\n          i += splitSections.length;\r\n        } else {\r\n          i++;\r\n        }\r\n      }\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'after' && \r\n          dropTarget.canvasType === canvasType) {\r\n        result.push(renderDropIndicator(`drop-after-${sectionId}-${canvasType}`));\r\n      }\r\n    }\r\n    \r\n    if ((canvasSections?.length === 0 && activeId && dropTarget.canvasType === canvasType) || \r\n        (canvasSections?.length === 0 && isDraggingFromSidebar && dropTarget.canvasType === canvasType)) {\r\n      result.push(renderDropIndicator(`drop-empty-canvas-${canvasType}`));\r\n    }\r\n    \r\n    return result;\r\n  };\r\n\r\n  const renderedMainSections = useMemo(() => \r\n    renderSectionsForCanvas(sections, CANVAS_TYPES.MAIN), \r\n    [sections, dropTarget, activeId, isDraggingFromSidebar, selectedSection]\r\n  );\r\n  \r\n  const renderedHeaderSections = useMemo(() => \r\n    renderSectionsForCanvas(headerSections, CANVAS_TYPES.HEADER),\r\n    [headerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n  \r\n  const renderedFooterSections = useMemo(() => \r\n    renderSectionsForCanvas(footerSections, CANVAS_TYPES.FOOTER),\r\n    [footerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n\r\n  const renderPreview = () => {\r\n    // const allSections = [...headerSections, ...sections, ...footerSections];\r\n    return <Box dangerouslySetInnerHTML={{ __html: generateEmailPreview(sections, headerSections, footerSections) }} />;\r\n  };\r\n\r\n  const renderCanvas = (\r\n    title: string, \r\n    canvasType: string, \r\n    renderedSections: React.ReactNode[], \r\n    setCanvasRef: (node: HTMLElement | null) => void,\r\n    ref: React.MutableRefObject<HTMLDivElement | null>,\r\n    visible: boolean = true\r\n  ) => {\r\n    if (!visible) return null;\r\n    \r\n    return (\r\n      <Box sx={{ mb: 3 }}>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && headerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n              sx= {{\r\n                    boxShadow: 'none !important',\r\n                    \".MuiAccordionSummary-root\": {\r\n                      backgroundColor: '#fafafa !important',\r\n                      border: `0 !important`,\r\n                      p: 0,\r\n                      pb: 1,\r\n                      // mb: 1,\r\n                      m:0,\r\n                      minHeight: 'unset'\r\n                    }\r\n                }}\r\n            >\r\n              <AccordionSummary\r\n                expandIcon={<ExpandMoreIcon />}\r\n                aria-controls=\"panel1-content\"\r\n                id=\"panel1-header\"\r\n              > */}\r\n                <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'}>Header</Typography>\r\n              {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(headerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n        )}\r\n        <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mb: 1 }}>{title}</Typography>\r\n        <Paper\r\n          ref={(node) => {\r\n            setCanvasRef(node);\r\n            ref.current = node;\r\n          }}\r\n          elevation={0}\r\n          sx={{\r\n            p: 4,\r\n            border: '1px dashed',\r\n            borderColor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n              ? 'primary.main' \r\n              : 'primary.light',\r\n            borderRadius: 1,\r\n            bgcolor: 'background.paper',\r\n            position: 'relative',\r\n            minHeight: title === 'Header' || title === 'Footer' ? '100px' : '200px',\r\n            transition: 'border-color 0.3s ease, background-color 0.3s ease',\r\n            '&:hover': {\r\n              bgcolor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n                ? 'rgba(25, 118, 210, 0.04)' \r\n                : 'background.paper',\r\n            },\r\n            pointerEvents: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 'none' \r\n              : 'auto',\r\n            opacity: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 0.5 \r\n              : 1,\r\n          }}\r\n          onClick={() => {\r\n            if ((canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter) return;\r\n            onSelectSection(null);\r\n          }}\r\n          onMouseMove={(e) => handleMouseMove(e, canvasType)}\r\n          onMouseEnter={(e) => handleMouseEnter(e, canvasType)}\r\n        >\r\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\r\n            {renderedSections}\r\n            {getTargetSections(canvasType)?.length === 0 && \r\n             !activeId && \r\n             !isDraggingFromSidebar && (\r\n              <Box sx={{ borderRadius: 1, p: 2, textAlign: 'center', color: 'text.secondary' }}>\r\n                <Typography type='s2' color='theme.secondary.600' weight='medium'>\r\n                  Drag Sections from side panel to start building the {title.toLowerCase()}\r\n                </Typography>\r\n              </Box>\r\n            )}\r\n          </Box>\r\n        </Paper>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && footerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n            sx= {{\r\n                  boxShadow: 'none !important',\r\n                  \".MuiAccordionSummary-root\": {\r\n                    backgroundColor: '#fafafa !important',\r\n                    border: `0 !important`,\r\n                    p: 0,\r\n                    pb: 1,\r\n                    // mb: 1,\r\n                    m:0,\r\n                    minHeight: 'unset'\r\n                  }\r\n              }}\r\n          >\r\n            <AccordionSummary\r\n              expandIcon={<ExpandMoreIcon />}\r\n              aria-controls=\"panel1-content\"\r\n              id=\"panel1-header\"\r\n            > */}\r\n              <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mt: 1 }}>Footer</Typography>\r\n            {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(footerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n          )}\r\n      </Box>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\r\n      <Box sx={{ flex: 1, overflow: 'auto', height: 'calc(100vh - 104px)' }}>\r\n        <Container maxWidth=\"lg\" sx={{ py: 4 }}>\r\n          {preview ? (\r\n            renderPreview()\r\n          ) : (\r\n            <>\r\n              {renderCanvas(\r\n                'Header', \r\n                CANVAS_TYPES.HEADER, \r\n                renderedHeaderSections, \r\n                setHeaderCanvasRef, \r\n                headerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Content', \r\n                CANVAS_TYPES.MAIN, \r\n                renderedMainSections, \r\n                setMainCanvasRef, \r\n                mainCanvasRef,\r\n                !isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Footer', \r\n                CANVAS_TYPES.FOOTER, \r\n                renderedFooterSections, \r\n                setFooterCanvasRef, \r\n                footerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n            </>\r\n          )}\r\n        </Container>\r\n      </Box>\r\n      <Box\r\n        sx={{\r\n          width: 400,\r\n          flexShrink: 0,\r\n          position: 'sticky',\r\n          top: 0,\r\n          alignSelf: 'flex-start',\r\n          height: 'calc(100vh - 104px)',\r\n          overflowY: 'auto',\r\n          borderLeft: '1px solid',\r\n          borderColor: 'divider',\r\n          bgcolor: 'background.paper',\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        {(selectedSection && !selectedSectionData?.is_edited_from_source && !isSectionEditing) ? (\r\n          <SectionFormatPanel\r\n            section={selectedSectionData}\r\n            onClose={() => onSelectSection(null)}\r\n            onUpdate={(data) => {\r\n              if (selectedSection) {\r\n                const canvasType = headerSections.some(s => s.id === selectedSection)\r\n                  ? CANVAS_TYPES.HEADER\r\n                  : footerSections.some(s => s.id === selectedSection)\r\n                    ? CANVAS_TYPES.FOOTER\r\n                    : CANVAS_TYPES.MAIN;\r\n                onUpdateSection(selectedSection, data, canvasType);\r\n              }\r\n            }}\r\n            placeholders={placeholders}\r\n            handleSave={handleSave}\r\n            relation_table={relation_table}\r\n          />\r\n        ) : (\r\n          <EditorSidebar />\r\n        )}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default EditorCanvas;"],"names":["CANVAS_TYPES","sections","headerSections","footerSections","activeId","selectedSection","onSelectSection","onUpdateSection","onSplitSection","onDeleteSection","preview","placeholders","isEditingHeaderFooter","handleSave","relation_table","formattedPlaceholders","useMemo","map","p","value","key","label","name","String","setNodeRef","setMainCanvasRef","useDroppable","id","setHeaderCanvasRef","setFooterCanvasRef","selectedSectionData","find","section","dropTarget","setDropTarget","useState","type","canvasType","isDraggingFromSidebar","setIsDraggingFromSidebar","isSectionEditing","setIsSectionEditing","lastUpdateTimeRef","useRef","lastPositionRef","x","y","activeIdRef","mainCanvasRef","headerCanvasRef","footerCanvasRef","getTargetSections","useEffect","current","includes","length","updateDropTarget","now","Date","renderSectionsForCanvas","canvasSections","result","processedGroups","Set","i","renderDropIndicator","isHorizontal","jsx","Box","sx","border","borderColor","borderRadius","display","alignItems","justifyContent","bgcolor","opacity","animation","transform","children","Typography","color","weight","push","sectionId","isSplitPair","splitGroupId","has","splitSections","filter","s","add","splitRow","gap","mb","splitSection","index","jsxs","React","Fragment","width","splitWidth","transition","EditorSection","isSelected","isDragging","isOver","onSelect","onUpdate","content","extra","onSplit","content1","content2","onDelete","renderedMainSections","renderedHeaderSections","renderedFooterSections","renderCanvas","title","renderedSections","setCanvasRef","ref","visible","Paper","boxShadow","dangerouslySetInnerHTML","__html","generateHeaderFooterPreview","node","elevation","position","minHeight","pointerEvents","onClick","onMouseMove","e","dx","clientX","dy","clientY","Math","sqrt","sectionElement","document","elementsFromPoint","el","hasAttribute","targetSections","getAttribute","sectionCanvasType","rect","getBoundingClientRect","relativeY","top","relativeX","left","sectionHeight","height","sectionWidth","startsWith","handleMouseMove","onMouseEnter","handleMouseEnter","flexDirection","_a","textAlign","toLowerCase","mt","flex","overflow","Container","maxWidth","py","generateEmailPreview","flexShrink","alignSelf","overflowY","borderLeft","zIndex","is_edited_from_source","EditorSidebar","SectionFormatPanel","onClose","data","some"],"mappings":"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"}

package/dist/views/template-editor/components/EditorHeader/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import Button from "../../../../components/button/button/index.esm.js";
+import { Button } from "../../../../components/button/button/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import { Link as Link$1 } from "react-router-dom";
 import { templateRoutes } from "../../utils/common/index.esm.js";

package/dist/views/template-editor/components/EditorHeader/index.js

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../../../components/button/button/index.js"),i=require("../../../../components/typography/typography/index.js"),t=require("react-router-dom"),n=require("../../utils/common/index.js"),r=require("../../../../node_modules/@mui/material/AppBar/AppBar/index.js"),a=require("../../../../node_modules/@mui/material/Toolbar/Toolbar/index.js"),s=require("../../../../node_modules/@mui/material/Box/Box/index.js"),d=require("../../../../node_modules/@mui/material/Link/Link/index.js"),l=require("../../../../node_modules/@mui/material/Stack/Stack/index.js"),c=require("../../../../components/icons/edit/index.js"),m=require("../../../../components/icons/eye-off/index.js"),u=require("../../../../components/icons/eye/index.js");exports.default=({onSave:p,onPreview:x,preview:h,sections:y,isEditingHeaderFooter:j,setIsEditingHeaderFooter:g,onSaveHeaderFooter:f,modulePath:v,type:b,mode:q="add",templateData:S})=>{const w=n.templateRoutes(v,b);/* @__PURE__ */
-return e.jsx(r.default,{position:"static",color:"default",elevation:0,sx:{borderColor:"divider",bgcolor:"background.paper"},children:/* @__PURE__ */e.jsxs(a.default,{variant:"dense",sx:{justifyContent:"space-between",p:3},children:[
-/* @__PURE__ */e.jsxs(s.default,{sx:{display:"flex",alignItems:"center",gap:1},children:[
-/* @__PURE__ */e.jsx(d.default,{component:t.Link,to:w.LIST,underline:"hover",color:"text.secondary",sx:{fontSize:"0.875rem"},children:/* @__PURE__ */e.jsx(i.Typography,{type:"s5",color:"theme.secondary.800",children:"email"===b?"Emails":"PDF"})}),
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
-/* @__PURE__ */e.jsxs(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:["add"==q?"Add New":"Edit"," Template"]}),S&&(null==S?void 0:S.name)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:null==S?void 0:S.name})]})]}),
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../../../components/button/button/index.js"),t=require("../../../../components/typography/typography/index.js"),n=require("react-router-dom"),i=require("../../utils/common/index.js"),r=require("../../../../node_modules/@mui/material/AppBar/AppBar/index.js"),s=require("../../../../node_modules/@mui/material/Toolbar/Toolbar/index.js"),a=require("../../../../node_modules/@mui/material/Box/Box/index.js"),d=require("../../../../node_modules/@mui/material/Link/Link/index.js"),l=require("../../../../node_modules/@mui/material/Stack/Stack/index.js"),c=require("../../../../components/icons/edit/index.js"),m=require("../../../../components/icons/eye-off/index.js"),u=require("../../../../components/icons/eye/index.js");exports.default=({onSave:p,onPreview:x,preview:h,sections:y,isEditingHeaderFooter:j,setIsEditingHeaderFooter:g,onSaveHeaderFooter:v,modulePath:f,type:b,mode:q="add",templateData:S})=>{const w=i.templateRoutes(f,b);/* @__PURE__ */
+return e.jsx(r.default,{position:"static",color:"default",elevation:0,sx:{borderColor:"divider",bgcolor:"background.paper"},children:/* @__PURE__ */e.jsxs(s.default,{variant:"dense",sx:{justifyContent:"space-between",p:3},children:[
+/* @__PURE__ */e.jsxs(a.default,{sx:{display:"flex",alignItems:"center",gap:1},children:[
+/* @__PURE__ */e.jsx(d.default,{component:n.Link,to:w.LIST,underline:"hover",color:"text.secondary",sx:{fontSize:"0.875rem"},children:/* @__PURE__ */e.jsx(t.Typography,{type:"s5",color:"theme.secondary.800",children:"email"===b?"Emails":"PDF"})}),
+/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
+/* @__PURE__ */e.jsxs(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:["add"==q?"Add New":"Edit"," Template"]}),S&&(null==S?void 0:S.name)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
+/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:null==S?void 0:S.name})]})]}),
 /* @__PURE__ */e.jsx(l.default,{direction:"row",spacing:1,children:j?/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.default,{onClick:()=>g(!1),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),children:"Cancel Editing"}),
-/* @__PURE__ */e.jsx(o.default,{variant:"contained",onClick:()=>f(!0),size:"small",sx:{boxShadow:"none"},children:"Save Changes"})]}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.default,{onClick:()=>g(!0),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:/* @__PURE__ */e.jsx(c.Edit,{fontSize:"small"}),disabled:h,children:"Edit Header/Footer"}),
-/* @__PURE__ */e.jsx(o.default,{onClick:x,size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:h?/* @__PURE__ */e.jsx(m.EyeOff,{fontSize:"small"}):/* @__PURE__ */e.jsx(u.Eye,{fontSize:"small"}),disabled:!(null==y?void 0:y.length),children:"Preview"}),
-/* @__PURE__ */e.jsx(o.default,{variant:"contained",onClick:p,size:"small",sx:{boxShadow:"none"},disabled:!(null==y?void 0:y.length),children:"Save"})]})})]})})};
+/* @__PURE__ */e.jsx(o.Button,{onClick:()=>g(!1),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),children:"Cancel Editing"}),
+/* @__PURE__ */e.jsx(o.Button,{variant:"contained",onClick:()=>v(!0),size:"small",sx:{boxShadow:"none"},children:"Save Changes"})]}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(o.Button,{onClick:()=>g(!0),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:/* @__PURE__ */e.jsx(c.Edit,{fontSize:"small"}),disabled:h,children:"Edit Header/Footer"}),
+/* @__PURE__ */e.jsx(o.Button,{onClick:x,size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:h?/* @__PURE__ */e.jsx(m.EyeOff,{fontSize:"small"}):/* @__PURE__ */e.jsx(u.Eye,{fontSize:"small"}),disabled:!(null==y?void 0:y.length),children:"Preview"}),
+/* @__PURE__ */e.jsx(o.Button,{variant:"contained",onClick:p,size:"small",sx:{boxShadow:"none"},disabled:!(null==y?void 0:y.length),children:"Save"})]})})]})})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/EditorHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorHeader.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport { \r\n  AppBar,\r\n  Toolbar,\r\n  Box,\r\n  Link,\r\n  Stack,\r\n} from '@mui/material';\r\nimport Button from '../../../components/button/button';\r\nimport Typography from '../../../components/typography/typography';\r\nimport { Edit, Eye, EyeOff } from '../../../components/icons';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { templateRoutes } from '../utils/common';\r\nimport { EnhancedSectionData } from '../types/editor';\r\n\r\ninterface EditorHeaderProps {\r\n  onSave: () => void;\r\n  onPreview: () => void;\r\n  preview: boolean;\r\n  sections: EnhancedSectionData[];\r\n  isEditingHeaderFooter: boolean;\r\n  setIsEditingHeaderFooter: (value: boolean) => void;\r\n  onSaveHeaderFooter: (value: boolean) => void;\r\n  modulePath: string;\r\n  type: string;\r\n  mode: 'add' | 'edit';\r\n  templateData: Record<string, any> | null;\r\n}\r\n\r\nconst EditorHeader: React.FC<EditorHeaderProps> = ({ \r\n  onSave, \r\n  onPreview, \r\n  preview, \r\n  sections, \r\n  isEditingHeaderFooter, \r\n  setIsEditingHeaderFooter, \r\n  onSaveHeaderFooter, \r\n  modulePath, \r\n  type,\r\n  mode = 'add',\r\n  templateData\r\n}) => {\r\n  const ROUTES = templateRoutes(modulePath, type);\r\n  return (\r\n    <AppBar \r\n      position=\"static\" \r\n      color=\"default\" \r\n      elevation={0} \r\n      sx={{ \r\n        borderColor: 'divider',\r\n        bgcolor: 'background.paper'\r\n      }}\r\n    >\r\n      <Toolbar variant=\"dense\" sx={{ justifyContent: 'space-between' ,p:3 }}>\r\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1}}>\r\n          <Link\r\n            component={RouterLink}\r\n            to={ROUTES.LIST}\r\n            underline=\"hover\" \r\n            color=\"text.secondary\" \r\n            sx={{ fontSize: '0.875rem' }}\r\n          >\r\n            <Typography type=\"s5\" color='theme.secondary.800'>{type === 'email' ? 'Emails' : 'PDF'}</Typography>\r\n          </Link>\r\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\r\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\r\n            { mode == 'add' ? 'Add New' : 'Edit' } Template\r\n          </Typography>\r\n          {templateData && templateData?.name &&\r\n            <>\r\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\r\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\r\n                {templateData?.name}\r\n              </Typography>\r\n            </>\r\n          }\r\n        </Box>\r\n        \r\n        <Stack direction=\"row\" spacing={1}>\r\n          {isEditingHeaderFooter ?\r\n            (\r\n              <>\r\n                <Button\r\n                  onClick={() => setIsEditingHeaderFooter(false)}\r\n                  size=\"small\"\r\n                  variant='outlined'\r\n                  sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\r\n                >\r\n                  Cancel Editing\r\n                </Button>\r\n                <Button \r\n                  variant=\"contained\" \r\n                  onClick={() => onSaveHeaderFooter(true)}\r\n                  size=\"small\"\r\n                  sx={{ boxShadow: 'none' }}\r\n                >\r\n                  Save Changes\r\n                </Button>\r\n              </>\r\n            )\r\n          : (\r\n            <>\r\n              <Button\r\n                onClick={() => setIsEditingHeaderFooter(true)}\r\n                size=\"small\"\r\n                variant='outlined'\r\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\r\n                startIcon={<Edit fontSize='small'/>}\r\n                disabled={preview}\r\n              >\r\n                Edit Header/Footer\r\n              </Button>\r\n              <Button\r\n                onClick={onPreview}\r\n                size=\"small\"\r\n                variant='outlined'\r\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\r\n                startIcon={preview ? <EyeOff fontSize='small'/> : <Eye fontSize='small'/>}\r\n                disabled={!sections?.length}\r\n              >\r\n                Preview\r\n              </Button>\r\n              <Button \r\n                variant=\"contained\" \r\n                onClick={onSave}\r\n                size=\"small\"\r\n                sx={{ boxShadow: 'none' }}\r\n                disabled={!sections?.length}\r\n              >\r\n                Save\r\n              </Button>\r\n            </>\r\n          )}\r\n        </Stack>\r\n      </Toolbar>\r\n    </AppBar>\r\n  );\r\n};\r\n\r\nexport default EditorHeader;"],"names":["onSave","onPreview","preview","sections","isEditingHeaderFooter","setIsEditingHeaderFooter","onSaveHeaderFooter","modulePath","type","mode","templateData","ROUTES","templateRoutes","jsx","AppBar","position","color","elevation","sx","borderColor","bgcolor","children","jsxs","Toolbar","variant","justifyContent","p","Box","display","alignItems","gap","Link","component","RouterLink","to","LIST","underline","fontSize","Typography","weight","name","Fragment","Stack","direction","spacing","Button","onClick","size","theme","palette","secondary","boxShadow","startIcon","Edit","disabled","EyeOff","Eye","length"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorHeader.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport { \r\n  AppBar,\r\n  Toolbar,\r\n  Box,\r\n  Link,\r\n  Stack,\r\n} from '@mui/material';\r\nimport Button from '../../../components/button/button';\r\nimport Typography from '../../../components/typography/typography';\r\nimport { Edit, Eye, EyeOff } from '../../../components/icons';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { templateRoutes } from '../utils/common';\r\nimport { EnhancedSectionData } from '../types/editor';\r\n\r\ninterface EditorHeaderProps {\r\n  onSave: () => void;\r\n  onPreview: () => void;\r\n  preview: boolean;\r\n  sections: EnhancedSectionData[];\r\n  isEditingHeaderFooter: boolean;\r\n  setIsEditingHeaderFooter: (value: boolean) => void;\r\n  onSaveHeaderFooter: (value: boolean) => void;\r\n  modulePath: string;\r\n  type: string;\r\n  mode: 'add' | 'edit';\r\n  templateData: Record<string, any> | null;\r\n}\r\n\r\nconst EditorHeader: React.FC<EditorHeaderProps> = ({ \r\n  onSave, \r\n  onPreview, \r\n  preview, \r\n  sections, \r\n  isEditingHeaderFooter, \r\n  setIsEditingHeaderFooter, \r\n  onSaveHeaderFooter, \r\n  modulePath, \r\n  type,\r\n  mode = 'add',\r\n  templateData\r\n}) => {\r\n  const ROUTES = templateRoutes(modulePath, type);\r\n  return (\r\n    <AppBar \r\n      position=\"static\" \r\n      color=\"default\" \r\n      elevation={0} \r\n      sx={{ \r\n        borderColor: 'divider',\r\n        bgcolor: 'background.paper'\r\n      }}\r\n    >\r\n      <Toolbar variant=\"dense\" sx={{ justifyContent: 'space-between' ,p:3 }}>\r\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1}}>\r\n          <Link\r\n            component={RouterLink}\r\n            to={ROUTES.LIST}\r\n            underline=\"hover\" \r\n            color=\"text.secondary\" \r\n            sx={{ fontSize: '0.875rem' }}\r\n          >\r\n            <Typography type=\"s5\" color='theme.secondary.800'>{type === 'email' ? 'Emails' : 'PDF'}</Typography>\r\n          </Link>\r\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\r\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\r\n            { mode == 'add' ? 'Add New' : 'Edit' } Template\r\n          </Typography>\r\n          {templateData && templateData?.name &&\r\n            <>\r\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\r\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\r\n                {templateData?.name}\r\n              </Typography>\r\n            </>\r\n          }\r\n        </Box>\r\n        \r\n        <Stack direction=\"row\" spacing={1}>\r\n          {isEditingHeaderFooter ?\r\n            (\r\n              <>\r\n                <Button\r\n                  onClick={() => setIsEditingHeaderFooter(false)}\r\n                  size=\"small\"\r\n                  variant='outlined'\r\n                  sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\r\n                >\r\n                  Cancel Editing\r\n                </Button>\r\n                <Button \r\n                  variant=\"contained\" \r\n                  onClick={() => onSaveHeaderFooter(true)}\r\n                  size=\"small\"\r\n                  sx={{ boxShadow: 'none' }}\r\n                >\r\n                  Save Changes\r\n                </Button>\r\n              </>\r\n            )\r\n          : (\r\n            <>\r\n              <Button\r\n                onClick={() => setIsEditingHeaderFooter(true)}\r\n                size=\"small\"\r\n                variant='outlined'\r\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\r\n                startIcon={<Edit fontSize='small'/>}\r\n                disabled={preview}\r\n              >\r\n                Edit Header/Footer\r\n              </Button>\r\n              <Button\r\n                onClick={onPreview}\r\n                size=\"small\"\r\n                variant='outlined'\r\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\r\n                startIcon={preview ? <EyeOff fontSize='small'/> : <Eye fontSize='small'/>}\r\n                disabled={!sections?.length}\r\n              >\r\n                Preview\r\n              </Button>\r\n              <Button \r\n                variant=\"contained\" \r\n                onClick={onSave}\r\n                size=\"small\"\r\n                sx={{ boxShadow: 'none' }}\r\n                disabled={!sections?.length}\r\n              >\r\n                Save\r\n              </Button>\r\n            </>\r\n          )}\r\n        </Stack>\r\n      </Toolbar>\r\n    </AppBar>\r\n  );\r\n};\r\n\r\nexport default EditorHeader;"],"names":["onSave","onPreview","preview","sections","isEditingHeaderFooter","setIsEditingHeaderFooter","onSaveHeaderFooter","modulePath","type","mode","templateData","ROUTES","templateRoutes","jsx","AppBar","position","color","elevation","sx","borderColor","bgcolor","children","jsxs","Toolbar","variant","justifyContent","p","Box","display","alignItems","gap","Link","component","RouterLink","to","LIST","underline","fontSize","Typography","weight","name","Fragment","Stack","direction","spacing","Button","onClick","size","theme","palette","secondary","boxShadow","startIcon","Edit","disabled","EyeOff","Eye","length"],"mappings":"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"}

package/dist/views/template-editor/components/EditorSection/index.esm.js

@@ -3,11 +3,11 @@ import React__default, { useState, useRef, useMemo, useCallback, Suspense, lazy
 import { useDraggable, useDroppable } from "../../../../node_modules/@dnd-kit/core/dist/core.esm/index.esm.js";
 import default_1 from "../../../../node_modules/@mui/icons-material/DragIndicator/index.esm.js";
 import default_1$2 from "../../../../node_modules/@mui/icons-material/CallSplit/index.esm.js";
-import Select from "../../../../components/select/select/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import EditSectionModal from "../../edit-section-modal/edit-section-modal/index.esm.js";
-import Checkbox from "../../../../components/checkbox/checkbox/index.esm.js";
-import Chip from "../../../../components/chip/chip/index.esm.js";
+import { Checkbox } from "../../../../components/checkbox/checkbox/index.esm.js";
+import { Chip } from "../../../../components/chip/chip/index.esm.js";
 import default_1$1 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
 import { useCKEditorStyleExtractor } from "../../utils/style-extractor/index.esm.js";
 import Skeleton from "../../../../node_modules/@mui/material/Skeleton/Skeleton/index.esm.js";

package/dist/views/template-editor/components/EditorSection/index.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),o=require("../../../../node_modules/@mui/icons-material/DragIndicator/index.js"),l=require("../../../../node_modules/@mui/icons-material/CallSplit/index.js"),i=require("../../../../components/select/select/index.js"),n=require("../../../../components/typography/typography/index.js"),s=require("../../edit-section-modal/edit-section-modal/index.js"),a=require("../../../../components/checkbox/checkbox/index.js"),d=require("../../../../components/chip/chip/index.js"),u=require("../../../../node_modules/@mui/icons-material/Close/index.js"),c=require("../../utils/style-extractor/index.js"),m=require("../../../../node_modules/@mui/material/Skeleton/Skeleton/index.js"),x=require("../../../../node_modules/@mui/material/Box/Box/index.js"),p=require("../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),h=require("../../../../node_modules/@mui/material/Paper/Paper/index.js"),y=require("../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),g=require("../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),b=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),f=require("../../../../components/icons/save/index.js"),j=require("../../../../node_modules/@mui/material/Fade/Fade/index.js"),v=require("../../../../components/icons/edit/index.js"),k=require("../../../../components/icons/trash/index.js");function C(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var S=/* @__PURE__ */C(t);const _=t.lazy(()=>Promise.resolve().then(function(){return require("../../../../components/editor/custom-editor/index.js")})),q=["text","text-block","heading","heading-1","heading-2","heading-3","heading-4"],w=S.default.memo(({section:C,isSelected:w,isDragging:z,isOver:E,onSelect:I,onUpdate:M,onSplit:T,onDelete:R,placeholders:P,setIsSectionEditing:D})=>{const{extractStyles:F,getSingleStyles:B}=c.useCKEditorStyleExtractor(),{attributes:L,listeners:N,setNodeRef:O,transform:W}=r.useDraggable({id:C.id}),{setNodeRef:$}=r.useDroppable({id:C.id}),[A,H]=t.useState(!1),[V,K]=t.useState(!1),[U,G]=t.useState(!1),[J,Q]=t.useState(Boolean(null==C?void 0:C.is_edited_from_source)),X=t.useRef(null),Y=t.useRef(null),Z=t.useMemo(()=>W?{transform:`translate3d(${W.x}px, ${W.y}px, 0)`,transition:"none"}:{transition:"all 0.2s ease"},[W]),ee=t.useMemo(()=>({position:"relative",border:"1px dashed",borderColor:w||E?"primary.main":"grey.400",borderRadius:1,bgcolor:"white",opacity:z?.7:1,boxShadow:"none",transition:"all 0.2s ease","&:hover":{boxShadow:"none"},...E&&{borderColor:"primary.main",boxShadow:"none"}}),[w,E,z]),te=t.useCallback(e=>{O(e),$(e)},[O,$]),re=t.useCallback(()=>{q.includes(C.type)&&oe()},[C.type]),oe=t.useCallback(()=>{(null==C?void 0:C.isSplitPair)?G(!0):(H(!0),D(!0))},[null==C?void 0:C.isSplitPair]),le=t.useCallback(e=>{X.current=e},[]),ie=t.useCallback(e=>{var t;if(e.stopPropagation(),X.current){const e=X.current.getData(),r=F(C.content,{includeTagStyles:!0,includeInlineStyles:!0,mergeNestedStyles:!0,filterEmptyStyles:!0}),o=B(r),l={...(null==(t=C.attributes)?void 0:t.styles)||{},...o},i={...C.attributes||{},styles:l};M(e,{is_edited_from_source:J,attributes:i})}H(!1),D(!1),G(!1)},[M,J]),ne=t.useCallback(()=>{const e=C.content||"";T(e,"")},[C.content,T]),se=t.useCallback(e=>{if(X.current){const t=X.current.data.processor.toView(`{{${e}}}`),r=X.current.data.toModel(t);X.current.model.insertContent(r)}},[]),ae=t.useCallback(()=>{null!==Y.current&&window.clearTimeout(Y.current),Y.current=window.setTimeout(()=>{K(!0)},50)},[]),de=t.useCallback(()=>{null!==Y.current&&window.clearTimeout(Y.current),Y.current=window.setTimeout(()=>{K(!1)},50)},[]),ue=t.useCallback(e=>{e.stopPropagation(),I()},[I]),ce=t.useCallback(e=>{e.stopPropagation(),R()},[R]),me=t.useCallback(()=>{H(!1),D(!1)},[]),xe=t.useCallback(e=>{Q(e.target.checked)},[]),pe=t.useCallback(e=>{e.target.value&&(se(e.target.value),e.target.value="")},[se]);S.default.useEffect(()=>()=>{null!==Y.current&&window.clearTimeout(Y.current)},[]);const he=t.useMemo(()=>A?/* @__PURE__ */e.jsx(t.Suspense,{fallback:/* @__PURE__ */e.jsx(m.default,{}),children:/* @__PURE__ */e.jsx(_,{editorRef:X,handleEditorReady:le,data:C.content,onError:e=>{}})}):/* @__PURE__ */e.jsx(x.default,{dangerouslySetInnerHTML:{__html:C.content},sx:{position:"relative",py:"divider"===C.type?1:0,lineHeight:1.6,"& p":{margin:0}}}),[A,C.content,C.type,le]),ye=t.useMemo(()=>P.map(t=>/* @__PURE__ */e.jsx(p.default,{value:t.value,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s4",color:"theme.secondary.1000",children:t.label})},t.value)),[P]);/* @__PURE__ */
-return e.jsxs(h.default,{ref:te,style:Z,elevation:V||w?3:1,sx:ee,onClick:ue,onDoubleClick:re,onMouseEnter:ae,onMouseLeave:de,children:[E&&!z&&/* @__PURE__ */e.jsx(x.default,{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__ */e.jsx(n.Typography,{type:"s2",color:"primary",weight:"medium",children:"Drop here"})}),
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),o=require("../../../../node_modules/@mui/icons-material/DragIndicator/index.js"),l=require("../../../../node_modules/@mui/icons-material/CallSplit/index.js"),i=require("../../../../components/select/select/index.js"),n=require("../../../../components/typography/typography/index.js"),s=require("../../edit-section-modal/edit-section-modal/index.js"),a=require("../../../../components/checkbox/checkbox/index.js"),d=require("../../../../components/chip/chip/index.js"),c=require("../../../../node_modules/@mui/icons-material/Close/index.js"),u=require("../../utils/style-extractor/index.js"),m=require("../../../../node_modules/@mui/material/Skeleton/Skeleton/index.js"),x=require("../../../../node_modules/@mui/material/Box/Box/index.js"),p=require("../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),h=require("../../../../node_modules/@mui/material/Paper/Paper/index.js"),y=require("../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),b=require("../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),g=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),f=require("../../../../components/icons/save/index.js"),j=require("../../../../node_modules/@mui/material/Fade/Fade/index.js"),v=require("../../../../components/icons/edit/index.js"),C=require("../../../../components/icons/trash/index.js");function k(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var S=/* @__PURE__ */k(t);const _=t.lazy(()=>Promise.resolve().then(function(){return require("../../../../components/editor/custom-editor/index.js")})),q=["text","text-block","heading","heading-1","heading-2","heading-3","heading-4"],w=S.default.memo(({section:k,isSelected:w,isDragging:z,isOver:E,onSelect:I,onUpdate:M,onSplit:T,onDelete:R,placeholders:P,setIsSectionEditing:D})=>{const{extractStyles:F,getSingleStyles:B}=u.useCKEditorStyleExtractor(),{attributes:L,listeners:N,setNodeRef:O,transform:W}=r.useDraggable({id:k.id}),{setNodeRef:$}=r.useDroppable({id:k.id}),[A,H]=t.useState(!1),[V,K]=t.useState(!1),[U,G]=t.useState(!1),[J,Q]=t.useState(Boolean(null==k?void 0:k.is_edited_from_source)),X=t.useRef(null),Y=t.useRef(null),Z=t.useMemo(()=>W?{transform:`translate3d(${W.x}px, ${W.y}px, 0)`,transition:"none"}:{transition:"all 0.2s ease"},[W]),ee=t.useMemo(()=>({position:"relative",border:"1px dashed",borderColor:w||E?"primary.main":"grey.400",borderRadius:1,bgcolor:"white",opacity:z?.7:1,boxShadow:"none",transition:"all 0.2s ease","&:hover":{boxShadow:"none"},...E&&{borderColor:"primary.main",boxShadow:"none"}}),[w,E,z]),te=t.useCallback(e=>{O(e),$(e)},[O,$]),re=t.useCallback(()=>{q.includes(k.type)&&oe()},[k.type]),oe=t.useCallback(()=>{(null==k?void 0:k.isSplitPair)?G(!0):(H(!0),D(!0))},[null==k?void 0:k.isSplitPair]),le=t.useCallback(e=>{X.current=e},[]),ie=t.useCallback(e=>{var t;if(e.stopPropagation(),X.current){const e=X.current.getData(),r=F(k.content,{includeTagStyles:!0,includeInlineStyles:!0,mergeNestedStyles:!0,filterEmptyStyles:!0}),o=B(r),l={...(null==(t=k.attributes)?void 0:t.styles)||{},...o},i={...k.attributes||{},styles:l};M(e,{is_edited_from_source:J,attributes:i})}H(!1),D(!1),G(!1)},[M,J]),ne=t.useCallback(()=>{const e=k.content||"";T(e,"")},[k.content,T]),se=t.useCallback(e=>{if(X.current){const t=X.current.data.processor.toView(`{{${e}}}`),r=X.current.data.toModel(t);X.current.model.insertContent(r)}},[]),ae=t.useCallback(()=>{null!==Y.current&&window.clearTimeout(Y.current),Y.current=window.setTimeout(()=>{K(!0)},50)},[]),de=t.useCallback(()=>{null!==Y.current&&window.clearTimeout(Y.current),Y.current=window.setTimeout(()=>{K(!1)},50)},[]),ce=t.useCallback(e=>{e.stopPropagation(),I()},[I]),ue=t.useCallback(e=>{e.stopPropagation(),R()},[R]),me=t.useCallback(()=>{H(!1),D(!1)},[]),xe=t.useCallback(e=>{Q(e.target.checked)},[]),pe=t.useCallback(e=>{e.target.value&&(se(e.target.value),e.target.value="")},[se]);S.default.useEffect(()=>()=>{null!==Y.current&&window.clearTimeout(Y.current)},[]);const he=t.useMemo(()=>A?/* @__PURE__ */e.jsx(t.Suspense,{fallback:/* @__PURE__ */e.jsx(m.default,{}),children:/* @__PURE__ */e.jsx(_,{editorRef:X,handleEditorReady:le,data:k.content,onError:e=>{}})}):/* @__PURE__ */e.jsx(x.default,{dangerouslySetInnerHTML:{__html:k.content},sx:{position:"relative",py:"divider"===k.type?1:0,lineHeight:1.6,"& p":{margin:0}}}),[A,k.content,k.type,le]),ye=t.useMemo(()=>P.map(t=>/* @__PURE__ */e.jsx(p.default,{value:t.value,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s4",color:"theme.secondary.1000",children:t.label})},t.value)),[P]);/* @__PURE__ */
+return e.jsxs(h.default,{ref:te,style:Z,elevation:V||w?3:1,sx:ee,onClick:ce,onDoubleClick:re,onMouseEnter:ae,onMouseLeave:de,children:[E&&!z&&/* @__PURE__ */e.jsx(x.default,{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__ */e.jsx(n.Typography,{type:"s2",color:"primary",weight:"medium",children:"Drop here"})}),
 /* @__PURE__ */e.jsxs(x.default,{sx:{bgcolor:"grey.50",p:1,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid",borderColor:"grey.200"},children:[
 /* @__PURE__ */e.jsxs(x.default,{...N,...L,sx:{display:"flex",alignItems:"center",cursor:"grab",px:1,py:.5,borderRadius:1,transition:"background-color 0.2s ease","&:hover":{bgcolor:"grey.100"},"&:active":{cursor:"grabbing"}},children:[
 /* @__PURE__ */e.jsx(o.default,{sx:{color:"grey.600",fontSize:"1.2rem",mr:.5}}),
 /* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.600",weight:"medium",children:"Move"})]}),
 /* @__PURE__ */e.jsx(x.default,{sx:{display:"flex",alignItems:"center",gap:1},children:A?/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(y.default,{control:/* @__PURE__ */e.jsx(a.default,{onClick:xe,defaultChecked:J}),label:/* @__PURE__ */e.jsx(n.Typography,{type:"s2",color:"theme.secondary.1000",children:"Edited from source"})}),
-/* @__PURE__ */e.jsx(g.default,{size:"small",sx:{minWidth:160},children:/* @__PURE__ */e.jsx(i.default,{displayEmpty:!0,value:"",size:"small",renderValue:()=>"Add placeholder...",sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:pe,children:ye})}),
+/* @__PURE__ */e.jsx(y.default,{control:/* @__PURE__ */e.jsx(a.Checkbox,{onClick:xe,defaultChecked:J}),label:/* @__PURE__ */e.jsx(n.Typography,{type:"s2",color:"theme.secondary.1000",children:"Edited from source"})}),
+/* @__PURE__ */e.jsx(b.default,{size:"small",sx:{minWidth:160},children:/* @__PURE__ */e.jsx(i.Select,{displayEmpty:!0,value:"",size:"small",renderValue:()=>"Add placeholder...",sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:pe,children:ye})}),
 /* @__PURE__ */e.jsxs(x.default,{children:[
-/* @__PURE__ */e.jsx(b.default,{size:"small",onClick:ie,children:/* @__PURE__ */e.jsx(f.Save,{fontSize:"small",color:"inherit"})}),
-/* @__PURE__ */e.jsx(b.default,{size:"small",onClick:me,color:"error",children:/* @__PURE__ */e.jsx(u.default,{fontSize:"small",color:"inherit"})})]})]}):/* @__PURE__ */e.jsx(j.default,{in:V||w,timeout:200,children:/* @__PURE__ */e.jsxs(x.default,{sx:{display:"flex",gap:.5},children:[(null==C?void 0:C.is_edited_from_source)&&/* @__PURE__ */e.jsx(d.default,{label:"Edited From Source",size:"small",sx:e=>{var t,r,o,l;return{textTransform:"capitalize",backgroundColor:null==(r=null==(t=e.palette.theme)?void 0:t.tertiary1)?void 0:r[200],color:null==(l=null==(o=e.palette.theme)?void 0:o.tertiary1)?void 0:l[900]}}}),q.includes(C.type)&&/* @__PURE__ */e.jsx(b.default,{size:"small",onClick:oe,sx:{bgcolor:"grey.100","&:hover":{bgcolor:"grey.200"}},children:/* @__PURE__ */e.jsx(v.Edit,{fontSize:"small",sx:{color:"theme.secondary.1000"}})}),
-/* @__PURE__ */e.jsx(b.default,{size:"small",onClick:ne,sx:{bgcolor:"grey.100","&:hover":{bgcolor:"grey.200"},opacity:25===(null==C?void 0:C.splitWidth)?.5:1},disabled:25===(null==C?void 0:C.splitWidth),children:/* @__PURE__ */e.jsx(l.default,{fontSize:"small",color:"primary"})}),
-/* @__PURE__ */e.jsx(b.default,{size:"small",onClick:ce,sx:{bgcolor:"grey.100","&:hover":{bgcolor:"grey.200"}},children:/* @__PURE__ */e.jsx(k.Trash,{fontSize:"small",sx:{color:"theme.error.500"}})})]})})})]}),
+/* @__PURE__ */e.jsx(g.default,{size:"small",onClick:ie,children:/* @__PURE__ */e.jsx(f.Save,{fontSize:"small",color:"inherit"})}),
+/* @__PURE__ */e.jsx(g.default,{size:"small",onClick:me,color:"error",children:/* @__PURE__ */e.jsx(c.default,{fontSize:"small",color:"inherit"})})]})]}):/* @__PURE__ */e.jsx(j.default,{in:V||w,timeout:200,children:/* @__PURE__ */e.jsxs(x.default,{sx:{display:"flex",gap:.5},children:[(null==k?void 0:k.is_edited_from_source)&&/* @__PURE__ */e.jsx(d.Chip,{label:"Edited From Source",size:"small",sx:e=>{var t,r,o,l;return{textTransform:"capitalize",backgroundColor:null==(r=null==(t=e.palette.theme)?void 0:t.tertiary1)?void 0:r[200],color:null==(l=null==(o=e.palette.theme)?void 0:o.tertiary1)?void 0:l[900]}}}),q.includes(k.type)&&/* @__PURE__ */e.jsx(g.default,{size:"small",onClick:oe,sx:{bgcolor:"grey.100","&:hover":{bgcolor:"grey.200"}},children:/* @__PURE__ */e.jsx(v.Edit,{fontSize:"small",sx:{color:"theme.secondary.1000"}})}),
+/* @__PURE__ */e.jsx(g.default,{size:"small",onClick:ne,sx:{bgcolor:"grey.100","&:hover":{bgcolor:"grey.200"},opacity:25===(null==k?void 0:k.splitWidth)?.5:1},disabled:25===(null==k?void 0:k.splitWidth),children:/* @__PURE__ */e.jsx(l.default,{fontSize:"small",color:"primary"})}),
+/* @__PURE__ */e.jsx(g.default,{size:"small",onClick:ue,sx:{bgcolor:"grey.100","&:hover":{bgcolor:"grey.200"}},children:/* @__PURE__ */e.jsx(C.Trash,{fontSize:"small",sx:{color:"theme.error.500"}})})]})})})]}),
 /* @__PURE__ */e.jsxs(x.default,{sx:{p:3,bgcolor:"white"},children:[
-/* @__PURE__ */e.jsx("style",{children:"\n             .ck.ck-toolbar.ck-toolbar_floating {\n               display: none;\n             }\n             .ck.ck-toolbar.ck-toolbar_floating.visible {\n               display: flex;\n             }\n\t\t\t\t\t\ta {\n\t\t\t\t\t\t\tcolor: #007bff !important;\n\t\t\t\t\t\t\ttext-decoration: none !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\ta:hover {\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t}\n           "}),he]}),U&&/* @__PURE__ */e.jsx(s.default,{isOpen:U,setIsOpen:G,placeholders:P,handleSave:ie,handleAddPlaceholder:se,handleEditorReady:le,section:C})]})});w.displayName="EditorSection",exports.default=w;
+/* @__PURE__ */e.jsx("style",{children:"\n             .ck.ck-toolbar.ck-toolbar_floating {\n               display: none;\n             }\n             .ck.ck-toolbar.ck-toolbar_floating.visible {\n               display: flex;\n             }\n\t\t\t\t\t\ta {\n\t\t\t\t\t\t\tcolor: #007bff !important;\n\t\t\t\t\t\t\ttext-decoration: none !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\ta:hover {\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t}\n           "}),he]}),U&&/* @__PURE__ */e.jsx(s.default,{isOpen:U,setIsOpen:G,placeholders:P,handleSave:ie,handleAddPlaceholder:se,handleEditorReady:le,section:k})]})});w.displayName="EditorSection",exports.default=w;
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/EditorSection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorSection.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useRef, useState, lazy, Suspense, useCallback, useMemo } from 'react';\r\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\r\nimport {\r\n\tBox,\r\n\tPaper,\r\n\tMenuItem,\r\n\tFormControl,\r\n\tIconButton,\r\n\tFade,\r\n\tFormControlLabel,\r\n\tSkeleton\r\n} from '@mui/material';\r\nimport DragIndicatorIcon from '@mui/icons-material/DragIndicator';\r\nimport SplitIcon from '@mui/icons-material/CallSplit';\r\nimport { SectionData } from '../types/editor';\r\nimport { Edit, Save, Trash } from '../../../components/icons';\r\nimport Select from '../../../components/select/select';\r\nimport Typography from '../../../components/typography/typography';\r\nimport EditSectionModal from '../edit-section-modal/edit-section-modal';\r\nimport Checkbox from '../../../components/checkbox/checkbox';\r\nimport Chip from '../../../components/chip/chip';\r\nimport Close from '@mui/icons-material/Close';\r\nimport { useCKEditorStyleExtractor } from '../utils/style-extractor';\r\n\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\n\r\ninterface EditorSectionProps {\r\n\tsection: SectionData;\r\n\tisSelected: boolean;\r\n\tisDragging: boolean;\r\n\tisOver: boolean;\r\n\tonSelect: () => void;\r\n\tonUpdate: (content: string, options?: any) => void;\r\n\tonSplit: (content1: string, content2: string) => void;\r\n\tonDelete: () => void;\r\n\tplaceholders: Array<{ value: string; label: string }>;\r\n\tsetIsSectionEditing:(value: boolean)=> void;\r\n}\r\n\r\nconst editableSections = ['text', 'text-block', 'heading', 'heading-1', 'heading-2', 'heading-3', 'heading-4'];\r\n\r\nconst EditorSection: React.FC<EditorSectionProps> = React.memo(({\r\n\tsection,\r\n\tisSelected,\r\n\tisDragging,\r\n\tisOver,\r\n\tonSelect,\r\n\tonUpdate,\r\n\tonSplit,\r\n\tonDelete,\r\n\tplaceholders,\r\n\tsetIsSectionEditing\r\n}) => {\r\n\tconst { extractStyles, getSingleStyles } = useCKEditorStyleExtractor();\r\n\r\n\tconst {\r\n\t\tattributes,\r\n\t\tlisteners,\r\n\t\tsetNodeRef: setDraggableRef,\r\n\t\ttransform\r\n\t} = useDraggable({ id: section.id });\r\n\r\n\tconst { setNodeRef: setDroppableRef } = useDroppable({ id: section.id });\r\n\tconst [isEditing, setIsEditing] = useState(false);\r\n\tconst [isHovered, setIsHovered] = useState(false);\r\n\tconst [isOpenEditSectionModal, setIsOpenEditSectionModal] = useState(false);\r\n\tconst [isEditedFromSource, setIsEditedFromSource] = useState(Boolean(section?.is_edited_from_source));\r\n\tconst editorRef = useRef<any>(null);\r\n\tconst mouseHoverTimeoutRef = useRef<number | null>(null);\r\n\r\n\t// Memoize style calculation\r\n\tconst style = useMemo(() => {\r\n\t\treturn transform\r\n\t\t\t? {\r\n\t\t\t\t\ttransform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\r\n\t\t\t\t\ttransition: 'none'\r\n\t\t\t\t}\r\n\t\t\t: { transition: 'all 0.2s ease' };\r\n\t}, [transform]);\r\n\r\n\t// Memoize sx prop for Paper to prevent re-creation\r\n\tconst paperSx = useMemo(() => ({\r\n\t\tposition: 'relative',\r\n\t\tborder: '1px dashed',\r\n\t\tborderColor: isSelected ? 'primary.main' : isOver ? 'primary.main' : 'grey.400',\r\n\t\tborderRadius: 1,\r\n\t\tbgcolor: 'white',\r\n\t\topacity: isDragging ? 0.7 : 1,\r\n\t\tboxShadow: 'none',\r\n\t\ttransition: 'all 0.2s ease',\r\n\t\t'&:hover': {\r\n\t\t\tboxShadow: 'none'\r\n\t\t},\r\n\t\t...(isOver && { borderColor: 'primary.main', boxShadow: 'none' })\r\n\t}), [isSelected, isOver, isDragging]);\r\n\r\n\t// Memoize merged ref to prevent re-creation\r\n\tconst mergedRef = useCallback((node: HTMLElement | null) => {\r\n\t\tsetDraggableRef(node);\r\n\t\tsetDroppableRef(node);\r\n\t}, [setDraggableRef, setDroppableRef]);\r\n\r\n\t// Memoize event handlers\r\n\tconst handleDblClick = useCallback(() => {\r\n\t\tif (editableSections.includes(section.type)) {\r\n\t\t\thandleEditing();\r\n\t\t}\r\n\t}, [section.type]);\r\n\r\n\tconst handleEditing = useCallback(() => {\r\n\t\tif (section?.isSplitPair) {\r\n\t\t\tsetIsOpenEditSectionModal(true);\r\n\t\t} else {\r\n\t\t\tsetIsEditing(true);\r\n\t\t\tsetIsSectionEditing(true);\r\n\t\t}\r\n\t}, [section?.isSplitPair]);\r\n\r\n\tconst handleEditorReady = useCallback((editor: any) => {\r\n\t\teditorRef.current = editor;\r\n\t}, []);\r\n\r\n\tconst handleSave = useCallback((e) => {\r\n\t\te.stopPropagation();\r\n\t\tif (editorRef.current) {\r\n\t\t\tconst content = editorRef.current.getData();\r\n\t\t\tconst styles = extractStyles(section.content, {\r\n\t\t\t\tincludeTagStyles: true,\r\n\t\t\t\tincludeInlineStyles: true,\r\n\t\t\t\tmergeNestedStyles: true,\r\n\t\t\t\tfilterEmptyStyles: true\r\n\t\t\t});\r\n\t\t\tconst single = getSingleStyles(styles);\r\n\t\t\t// Merge styles safely\r\n\t\t\tconst mergedStyles = {\r\n\t\t\t\t...(section.attributes?.styles || {}),\r\n\t\t\t\t...single\r\n\t\t\t};\r\n\t\r\n\t\t\t// Merge attributes, giving priority to new props\r\n\t\t\tconst mergedAttributes = {\r\n\t\t\t\t...(section.attributes || {}),\r\n\t\t\t\tstyles: mergedStyles,\r\n\t\t\t};\r\n\t\t\tonUpdate(content, { is_edited_from_source: isEditedFromSource, attributes: mergedAttributes });\r\n\t\t}\r\n\t\tsetIsEditing(false);\r\n\t\tsetIsSectionEditing(false)\r\n\t\tsetIsOpenEditSectionModal(false);\r\n\t}, [onUpdate, isEditedFromSource]);\r\n\r\n\tconst handleSplit = useCallback(() => {\r\n\t\tconst content = section.content || '';\r\n\t\tconst firstHalf = content;\r\n\t\tconst secondHalf = '';\r\n\t\tonSplit(firstHalf, secondHalf);\r\n\t}, [section.content, onSplit]);\r\n\r\n\tconst handleAddPlaceholder = useCallback((placeholder: string) => {\r\n\t\tif (editorRef.current) {\r\n\t\t\tconst viewFragment = editorRef.current.data.processor.toView(\r\n\t\t\t\t`{{${placeholder}}}`\r\n\t\t\t);\r\n\t\t\tconst modelFragment = editorRef.current.data.toModel(viewFragment);\r\n\t\t\teditorRef.current.model.insertContent(modelFragment);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tconst handleMouseEnter = useCallback(() => {\r\n\t\tif (mouseHoverTimeoutRef.current !== null) {\r\n\t\t\twindow.clearTimeout(mouseHoverTimeoutRef.current);\r\n\t\t}\r\n\t\tmouseHoverTimeoutRef.current = window.setTimeout(() => {\r\n\t\t\tsetIsHovered(true);\r\n\t\t}, 50);\r\n\t}, []);\r\n\r\n\tconst handleMouseLeave = useCallback(() => {\r\n\t\tif (mouseHoverTimeoutRef.current !== null) {\r\n\t\t\twindow.clearTimeout(mouseHoverTimeoutRef.current);\r\n\t\t}\r\n\t\tmouseHoverTimeoutRef.current = window.setTimeout(() => {\r\n\t\t\tsetIsHovered(false);\r\n\t\t}, 50);\r\n\t}, []);\r\n\r\n\tconst handleClick = useCallback((e) => {\r\n\t\te.stopPropagation();\r\n\t\tonSelect();\r\n\t}, [onSelect]);\r\n\r\n\tconst handleDeleteClick = useCallback((e) => {\r\n\t\te.stopPropagation();\r\n\t\tonDelete();\r\n\t}, [onDelete]);\r\n\r\n\tconst handleCancelEdit = useCallback(() => {\r\n\t\tsetIsEditing(false);\r\n\t\tsetIsSectionEditing(false)\r\n\t}, []);\r\n\r\n\tconst handleCheckboxChange = useCallback((e) => {\r\n\t\tsetIsEditedFromSource(e.target.checked);\r\n\t}, []);\r\n\r\n\tconst handleSelectChange = useCallback((e) => {\r\n\t\tif (e.target.value) {\r\n\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\te.target.value = '';\r\n\t\t}\r\n\t}, [handleAddPlaceholder]);\r\n\r\n\t// Cleanup function for hover timeout\r\n\tReact.useEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tif (mouseHoverTimeoutRef.current !== null) {\r\n\t\t\t\twindow.clearTimeout(mouseHoverTimeoutRef.current);\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\t// Memoize content rendering to prevent unnecessary re-renders\r\n\tconst contentRenderer = useMemo(() => {\r\n\t\tif (isEditing) {\r\n\t\t\treturn (\r\n\t\t\t\t<Suspense fallback={<Skeleton />}>\r\n\t\t\t\t\t<CustomEditor \r\n\t\t\t\t\t\teditorRef={editorRef}\r\n\t\t\t\t\t\thandleEditorReady={handleEditorReady} \r\n\t\t\t\t\t\tdata={section.content}\r\n\t\t\t\t\t\tonError={(error) => console.error('Editor error:', error)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t);\r\n\t\t}\r\n\t\t\r\n\t\treturn (\r\n\t\t\t<Box\r\n\t\t\t\tdangerouslySetInnerHTML={{ __html: section.content }}\r\n\t\t\t\tsx={{\r\n\t\t\t\t\tposition: 'relative',\r\n\t\t\t\t\tpy: section.type === 'divider' ? 1 : 0,\r\n\t\t\t\t\tlineHeight: 1.6,\r\n\t\t\t\t\t'& p': { margin: 0 }\r\n\t\t\t\t}}\r\n\t\t\t/>\r\n\t\t);\r\n\t}, [isEditing, section.content, section.type, handleEditorReady]);\r\n\r\n\t// Memoize placeholder options\r\n\tconst placeholderOptions = useMemo(() => \r\n\t\tplaceholders.map((option) => (\r\n\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t</MenuItem>\r\n\t\t))\r\n\t, [placeholders]);\r\n\r\n\treturn (\r\n\t\t<Paper\r\n\t\t\tref={mergedRef}\r\n\t\t\tstyle={style}\r\n\t\t\televation={isHovered || isSelected ? 3 : 1}\r\n\t\t\tsx={paperSx}\r\n\t\t\tonClick={handleClick}\r\n\t\t\tonDoubleClick={handleDblClick}\r\n\t\t\tonMouseEnter={handleMouseEnter}\r\n\t\t\tonMouseLeave={handleMouseLeave}>\r\n\t\t\t{isOver && !isDragging && (\r\n\t\t\t\t<Box\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tposition: 'absolute',\r\n\t\t\t\t\t\ttop: 0,\r\n\t\t\t\t\t\tleft: 0,\r\n\t\t\t\t\t\tright: 0,\r\n\t\t\t\t\t\tbottom: 0,\r\n\t\t\t\t\t\tborder: '2px dashed',\r\n\t\t\t\t\t\tborderColor: 'primary.main',\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\tbgcolor: 'rgba(25, 118, 210, 0.04)',\r\n\t\t\t\t\t\tzIndex: 10,\r\n\t\t\t\t\t\tdisplay: 'flex',\r\n\t\t\t\t\t\talignItems: 'center',\r\n\t\t\t\t\t\tjustifyContent: 'center',\r\n\t\t\t\t\t\tpointerEvents: 'none'\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<Typography type='s2' color='primary' weight='medium'>Drop here</Typography>\r\n\t\t\t\t</Box>\r\n\t\t\t)}\r\n\t\t\t<Box\r\n\t\t\t\tsx={{\r\n\t\t\t\t\tbgcolor: 'grey.50',\r\n\t\t\t\t\tp: 1,\r\n\t\t\t\t\tdisplay: 'flex',\r\n\t\t\t\t\talignItems: 'center',\r\n\t\t\t\t\tjustifyContent: 'space-between',\r\n\t\t\t\t\tborderBottom: '1px solid',\r\n\t\t\t\t\tborderColor: 'grey.200'\r\n\t\t\t\t}}>\r\n\t\t\t\t<Box\r\n\t\t\t\t\t{...listeners}\r\n\t\t\t\t\t{...attributes}\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tdisplay: 'flex',\r\n\t\t\t\t\t\talignItems: 'center',\r\n\t\t\t\t\t\tcursor: 'grab',\r\n\t\t\t\t\t\tpx: 1,\r\n\t\t\t\t\t\tpy: 0.5,\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\ttransition: 'background-color 0.2s ease',\r\n\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.100' },\r\n\t\t\t\t\t\t'&:active': { cursor: 'grabbing' }\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t<DragIndicatorIcon\r\n\t\t\t\t\t\tsx={{ color: 'grey.600', fontSize: '1.2rem', mr: 0.5 }}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Typography type='s3' color='theme.secondary.600' weight='medium'>Move</Typography>\r\n\t\t\t\t</Box>\r\n\t\t\t\t<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\r\n\t\t\t\t\t{isEditing ? (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t<FormControlLabel control={\r\n\t\t\t\t\t\t\t\t<Checkbox \r\n\t\t\t\t\t\t\t\t\tonClick={handleCheckboxChange} \r\n\t\t\t\t\t\t\t\t\tdefaultChecked={isEditedFromSource}/>} \r\n\t\t\t\t\t\t\t\t\tlabel={<Typography type='s2' color='theme.secondary.1000'>Edited from source</Typography>} />\r\n\t\t\t\t\t\t\t<FormControl size='small' sx={{ minWidth: 160 }}>\r\n\t\t\t\t\t\t\t\t<Select\r\n\t\t\t\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\trenderValue={() => 'Add placeholder...'}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tonChange={handleSelectChange}>\r\n\t\t\t\t\t\t\t\t\t{placeholderOptions}\r\n\t\t\t\t\t\t\t\t</Select>\r\n\t\t\t\t\t\t\t</FormControl>\r\n\t\t\t\t\t\t\t<Box>\r\n\t\t\t\t\t\t\t\t<IconButton size='small' onClick={handleSave}>\r\n\t\t\t\t\t\t\t\t\t<Save fontSize='small' color='inherit' />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t\t<IconButton size='small' onClick={handleCancelEdit} color='error'>\r\n\t\t\t\t\t\t\t\t\t<Close fontSize='small' color='inherit' />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t</Box>\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<Fade in={isHovered || isSelected} timeout={200}>\r\n\t\t\t\t\t\t\t<Box sx={{ display: 'flex', gap: 0.5 }}>\r\n\t\t\t\t\t\t\t\t{section?.is_edited_from_source && (\r\n\t\t\t\t\t\t\t\t\t<Chip\r\n\t\t\t\t\t\t\t\t\t\tlabel=\"Edited From Source\"\r\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\r\n\t\t\t\t\t\t\t\t\t\tsx={(theme) => ({ \r\n\t\t\t\t\t\t\t\t\t\t\ttextTransform: 'capitalize', \r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: theme.palette.theme?.tertiary1?.[200], \r\n\t\t\t\t\t\t\t\t\t\t\tcolor: theme.palette.theme?.tertiary1?.[900]\r\n\t\t\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t{editableSections.includes(section.type) &&\r\n\t\t\t\t\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\t\tonClick={handleEditing}\r\n\t\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\t\tbgcolor: 'grey.100',\r\n\t\t\t\t\t\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.200' }\r\n\t\t\t\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t\t\t\t<Edit fontSize='small' sx={{ color: 'theme.secondary.1000' }} />\r\n\t\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\tonClick={handleSplit}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\tbgcolor: 'grey.100',\r\n\t\t\t\t\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.200' },\r\n\t\t\t\t\t\t\t\t\t\topacity: section?.splitWidth === 25 ? 0.5 : 1\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tdisabled={section?.splitWidth === 25}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<SplitIcon fontSize='small' color='primary' />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\tonClick={handleDeleteClick}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\tbgcolor: 'grey.100',\r\n\t\t\t\t\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.200' }\r\n\t\t\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t\t\t<Trash fontSize='small' sx={{ color: 'theme.error.500' }} />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t</Box>\r\n\t\t\t\t\t\t</Fade>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</Box>\r\n\t\t\t</Box>\r\n\t\t\t<Box sx={{ p: 3, bgcolor: 'white' }}>\r\n\t\t\t\t<style>\r\n           {`\r\n             .ck.ck-toolbar.ck-toolbar_floating {\r\n               display: none;\r\n             }\r\n             .ck.ck-toolbar.ck-toolbar_floating.visible {\r\n               display: flex;\r\n             }\r\n\t\t\t\t\t\ta {\r\n\t\t\t\t\t\t\tcolor: #007bff !important;\r\n\t\t\t\t\t\t\ttext-decoration: none !important;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\ta:hover {\r\n\t\t\t\t\t\t\ttext-decoration: underline;\r\n\t\t\t\t\t\t}\r\n           `}\r\n         </style>\r\n\t\t\t\t{contentRenderer}\r\n\t\t\t</Box>\r\n\t\t\t{isOpenEditSectionModal && <EditSectionModal\r\n\t\t\t\tisOpen={isOpenEditSectionModal}\r\n\t\t\t\tsetIsOpen={setIsOpenEditSectionModal}\r\n\t\t\t\tplaceholders={placeholders}\r\n\t\t\t\thandleSave={handleSave}\r\n\t\t\t\thandleAddPlaceholder={handleAddPlaceholder}\r\n\t\t\t\thandleEditorReady={handleEditorReady}\r\n\t\t\t\tsection={section}\r\n\t\t\t/>}\r\n\t\t</Paper>\r\n\t);\r\n});\r\n\r\nEditorSection.displayName = 'EditorSection';\r\n\r\nexport default EditorSection;"],"names":["CustomEditor","lazy","Promise","resolve","then","require","editableSections","EditorSection","React","memo","section","isSelected","isDragging","isOver","onSelect","onUpdate","onSplit","onDelete","placeholders","setIsSectionEditing","extractStyles","getSingleStyles","useCKEditorStyleExtractor","attributes","listeners","setNodeRef","setDraggableRef","transform","useDraggable","id","setDroppableRef","useDroppable","isEditing","setIsEditing","useState","isHovered","setIsHovered","isOpenEditSectionModal","setIsOpenEditSectionModal","isEditedFromSource","setIsEditedFromSource","Boolean","is_edited_from_source","editorRef","useRef","mouseHoverTimeoutRef","style","useMemo","x","y","transition","paperSx","position","border","borderColor","borderRadius","bgcolor","opacity","boxShadow","mergedRef","useCallback","node","handleDblClick","includes","type","handleEditing","isSplitPair","handleEditorReady","editor","current","handleSave","e","stopPropagation","content","getData","styles","includeTagStyles","includeInlineStyles","mergeNestedStyles","filterEmptyStyles","single","mergedStyles","_a","mergedAttributes","handleSplit","handleAddPlaceholder","placeholder","viewFragment","data","processor","toView","modelFragment","toModel","model","insertContent","handleMouseEnter","window","clearTimeout","setTimeout","handleMouseLeave","handleClick","handleDeleteClick","handleCancelEdit","handleCheckboxChange","target","checked","handleSelectChange","value","useEffect","contentRenderer","jsx","Suspense","fallback","Skeleton","children","onError","error","Box","dangerouslySetInnerHTML","__html","sx","py","lineHeight","margin","placeholderOptions","map","option","MenuItem","Typography","color","label","jsxs","Paper","ref","elevation","onClick","onDoubleClick","onMouseEnter","onMouseLeave","top","left","right","bottom","zIndex","display","alignItems","justifyContent","pointerEvents","weight","p","borderBottom","cursor","px","DragIndicatorIcon","fontSize","mr","gap","Fragment","FormControlLabel","control","Checkbox","defaultChecked","FormControl","size","minWidth","Select","displayEmpty","renderValue","onChange","IconButton","Save","Close","Fade","in","timeout","Chip","theme","textTransform","backgroundColor","_b","palette","tertiary1","_d","_c","Edit","splitWidth","disabled","SplitIcon","Trash","EditSectionModal","isOpen","setIsOpen","displayName"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorSection.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useRef, useState, lazy, Suspense, useCallback, useMemo } from 'react';\r\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\r\nimport {\r\n\tBox,\r\n\tPaper,\r\n\tMenuItem,\r\n\tFormControl,\r\n\tIconButton,\r\n\tFade,\r\n\tFormControlLabel,\r\n\tSkeleton\r\n} from '@mui/material';\r\nimport DragIndicatorIcon from '@mui/icons-material/DragIndicator';\r\nimport SplitIcon from '@mui/icons-material/CallSplit';\r\nimport { SectionData } from '../types/editor';\r\nimport { Edit, Save, Trash } from '../../../components/icons';\r\nimport Select from '../../../components/select/select';\r\nimport Typography from '../../../components/typography/typography';\r\nimport EditSectionModal from '../edit-section-modal/edit-section-modal';\r\nimport Checkbox from '../../../components/checkbox/checkbox';\r\nimport Chip from '../../../components/chip/chip';\r\nimport Close from '@mui/icons-material/Close';\r\nimport { useCKEditorStyleExtractor } from '../utils/style-extractor';\r\n\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\n\r\ninterface EditorSectionProps {\r\n\tsection: SectionData;\r\n\tisSelected: boolean;\r\n\tisDragging: boolean;\r\n\tisOver: boolean;\r\n\tonSelect: () => void;\r\n\tonUpdate: (content: string, options?: any) => void;\r\n\tonSplit: (content1: string, content2: string) => void;\r\n\tonDelete: () => void;\r\n\tplaceholders: Array<{ value: string; label: string }>;\r\n\tsetIsSectionEditing:(value: boolean)=> void;\r\n}\r\n\r\nconst editableSections = ['text', 'text-block', 'heading', 'heading-1', 'heading-2', 'heading-3', 'heading-4'];\r\n\r\nconst EditorSection: React.FC<EditorSectionProps> = React.memo(({\r\n\tsection,\r\n\tisSelected,\r\n\tisDragging,\r\n\tisOver,\r\n\tonSelect,\r\n\tonUpdate,\r\n\tonSplit,\r\n\tonDelete,\r\n\tplaceholders,\r\n\tsetIsSectionEditing\r\n}) => {\r\n\tconst { extractStyles, getSingleStyles } = useCKEditorStyleExtractor();\r\n\r\n\tconst {\r\n\t\tattributes,\r\n\t\tlisteners,\r\n\t\tsetNodeRef: setDraggableRef,\r\n\t\ttransform\r\n\t} = useDraggable({ id: section.id });\r\n\r\n\tconst { setNodeRef: setDroppableRef } = useDroppable({ id: section.id });\r\n\tconst [isEditing, setIsEditing] = useState(false);\r\n\tconst [isHovered, setIsHovered] = useState(false);\r\n\tconst [isOpenEditSectionModal, setIsOpenEditSectionModal] = useState(false);\r\n\tconst [isEditedFromSource, setIsEditedFromSource] = useState(Boolean(section?.is_edited_from_source));\r\n\tconst editorRef = useRef<any>(null);\r\n\tconst mouseHoverTimeoutRef = useRef<number | null>(null);\r\n\r\n\t// Memoize style calculation\r\n\tconst style = useMemo(() => {\r\n\t\treturn transform\r\n\t\t\t? {\r\n\t\t\t\t\ttransform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\r\n\t\t\t\t\ttransition: 'none'\r\n\t\t\t\t}\r\n\t\t\t: { transition: 'all 0.2s ease' };\r\n\t}, [transform]);\r\n\r\n\t// Memoize sx prop for Paper to prevent re-creation\r\n\tconst paperSx = useMemo(() => ({\r\n\t\tposition: 'relative',\r\n\t\tborder: '1px dashed',\r\n\t\tborderColor: isSelected ? 'primary.main' : isOver ? 'primary.main' : 'grey.400',\r\n\t\tborderRadius: 1,\r\n\t\tbgcolor: 'white',\r\n\t\topacity: isDragging ? 0.7 : 1,\r\n\t\tboxShadow: 'none',\r\n\t\ttransition: 'all 0.2s ease',\r\n\t\t'&:hover': {\r\n\t\t\tboxShadow: 'none'\r\n\t\t},\r\n\t\t...(isOver && { borderColor: 'primary.main', boxShadow: 'none' })\r\n\t}), [isSelected, isOver, isDragging]);\r\n\r\n\t// Memoize merged ref to prevent re-creation\r\n\tconst mergedRef = useCallback((node: HTMLElement | null) => {\r\n\t\tsetDraggableRef(node);\r\n\t\tsetDroppableRef(node);\r\n\t}, [setDraggableRef, setDroppableRef]);\r\n\r\n\t// Memoize event handlers\r\n\tconst handleDblClick = useCallback(() => {\r\n\t\tif (editableSections.includes(section.type)) {\r\n\t\t\thandleEditing();\r\n\t\t}\r\n\t}, [section.type]);\r\n\r\n\tconst handleEditing = useCallback(() => {\r\n\t\tif (section?.isSplitPair) {\r\n\t\t\tsetIsOpenEditSectionModal(true);\r\n\t\t} else {\r\n\t\t\tsetIsEditing(true);\r\n\t\t\tsetIsSectionEditing(true);\r\n\t\t}\r\n\t}, [section?.isSplitPair]);\r\n\r\n\tconst handleEditorReady = useCallback((editor: any) => {\r\n\t\teditorRef.current = editor;\r\n\t}, []);\r\n\r\n\tconst handleSave = useCallback((e) => {\r\n\t\te.stopPropagation();\r\n\t\tif (editorRef.current) {\r\n\t\t\tconst content = editorRef.current.getData();\r\n\t\t\tconst styles = extractStyles(section.content, {\r\n\t\t\t\tincludeTagStyles: true,\r\n\t\t\t\tincludeInlineStyles: true,\r\n\t\t\t\tmergeNestedStyles: true,\r\n\t\t\t\tfilterEmptyStyles: true\r\n\t\t\t});\r\n\t\t\tconst single = getSingleStyles(styles);\r\n\t\t\t// Merge styles safely\r\n\t\t\tconst mergedStyles = {\r\n\t\t\t\t...(section.attributes?.styles || {}),\r\n\t\t\t\t...single\r\n\t\t\t};\r\n\t\r\n\t\t\t// Merge attributes, giving priority to new props\r\n\t\t\tconst mergedAttributes = {\r\n\t\t\t\t...(section.attributes || {}),\r\n\t\t\t\tstyles: mergedStyles,\r\n\t\t\t};\r\n\t\t\tonUpdate(content, { is_edited_from_source: isEditedFromSource, attributes: mergedAttributes });\r\n\t\t}\r\n\t\tsetIsEditing(false);\r\n\t\tsetIsSectionEditing(false)\r\n\t\tsetIsOpenEditSectionModal(false);\r\n\t}, [onUpdate, isEditedFromSource]);\r\n\r\n\tconst handleSplit = useCallback(() => {\r\n\t\tconst content = section.content || '';\r\n\t\tconst firstHalf = content;\r\n\t\tconst secondHalf = '';\r\n\t\tonSplit(firstHalf, secondHalf);\r\n\t}, [section.content, onSplit]);\r\n\r\n\tconst handleAddPlaceholder = useCallback((placeholder: string) => {\r\n\t\tif (editorRef.current) {\r\n\t\t\tconst viewFragment = editorRef.current.data.processor.toView(\r\n\t\t\t\t`{{${placeholder}}}`\r\n\t\t\t);\r\n\t\t\tconst modelFragment = editorRef.current.data.toModel(viewFragment);\r\n\t\t\teditorRef.current.model.insertContent(modelFragment);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tconst handleMouseEnter = useCallback(() => {\r\n\t\tif (mouseHoverTimeoutRef.current !== null) {\r\n\t\t\twindow.clearTimeout(mouseHoverTimeoutRef.current);\r\n\t\t}\r\n\t\tmouseHoverTimeoutRef.current = window.setTimeout(() => {\r\n\t\t\tsetIsHovered(true);\r\n\t\t}, 50);\r\n\t}, []);\r\n\r\n\tconst handleMouseLeave = useCallback(() => {\r\n\t\tif (mouseHoverTimeoutRef.current !== null) {\r\n\t\t\twindow.clearTimeout(mouseHoverTimeoutRef.current);\r\n\t\t}\r\n\t\tmouseHoverTimeoutRef.current = window.setTimeout(() => {\r\n\t\t\tsetIsHovered(false);\r\n\t\t}, 50);\r\n\t}, []);\r\n\r\n\tconst handleClick = useCallback((e) => {\r\n\t\te.stopPropagation();\r\n\t\tonSelect();\r\n\t}, [onSelect]);\r\n\r\n\tconst handleDeleteClick = useCallback((e) => {\r\n\t\te.stopPropagation();\r\n\t\tonDelete();\r\n\t}, [onDelete]);\r\n\r\n\tconst handleCancelEdit = useCallback(() => {\r\n\t\tsetIsEditing(false);\r\n\t\tsetIsSectionEditing(false)\r\n\t}, []);\r\n\r\n\tconst handleCheckboxChange = useCallback((e) => {\r\n\t\tsetIsEditedFromSource(e.target.checked);\r\n\t}, []);\r\n\r\n\tconst handleSelectChange = useCallback((e) => {\r\n\t\tif (e.target.value) {\r\n\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\te.target.value = '';\r\n\t\t}\r\n\t}, [handleAddPlaceholder]);\r\n\r\n\t// Cleanup function for hover timeout\r\n\tReact.useEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tif (mouseHoverTimeoutRef.current !== null) {\r\n\t\t\t\twindow.clearTimeout(mouseHoverTimeoutRef.current);\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\t// Memoize content rendering to prevent unnecessary re-renders\r\n\tconst contentRenderer = useMemo(() => {\r\n\t\tif (isEditing) {\r\n\t\t\treturn (\r\n\t\t\t\t<Suspense fallback={<Skeleton />}>\r\n\t\t\t\t\t<CustomEditor \r\n\t\t\t\t\t\teditorRef={editorRef}\r\n\t\t\t\t\t\thandleEditorReady={handleEditorReady} \r\n\t\t\t\t\t\tdata={section.content}\r\n\t\t\t\t\t\tonError={(error) => console.error('Editor error:', error)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t);\r\n\t\t}\r\n\t\t\r\n\t\treturn (\r\n\t\t\t<Box\r\n\t\t\t\tdangerouslySetInnerHTML={{ __html: section.content }}\r\n\t\t\t\tsx={{\r\n\t\t\t\t\tposition: 'relative',\r\n\t\t\t\t\tpy: section.type === 'divider' ? 1 : 0,\r\n\t\t\t\t\tlineHeight: 1.6,\r\n\t\t\t\t\t'& p': { margin: 0 }\r\n\t\t\t\t}}\r\n\t\t\t/>\r\n\t\t);\r\n\t}, [isEditing, section.content, section.type, handleEditorReady]);\r\n\r\n\t// Memoize placeholder options\r\n\tconst placeholderOptions = useMemo(() => \r\n\t\tplaceholders.map((option) => (\r\n\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t</MenuItem>\r\n\t\t))\r\n\t, [placeholders]);\r\n\r\n\treturn (\r\n\t\t<Paper\r\n\t\t\tref={mergedRef}\r\n\t\t\tstyle={style}\r\n\t\t\televation={isHovered || isSelected ? 3 : 1}\r\n\t\t\tsx={paperSx}\r\n\t\t\tonClick={handleClick}\r\n\t\t\tonDoubleClick={handleDblClick}\r\n\t\t\tonMouseEnter={handleMouseEnter}\r\n\t\t\tonMouseLeave={handleMouseLeave}>\r\n\t\t\t{isOver && !isDragging && (\r\n\t\t\t\t<Box\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tposition: 'absolute',\r\n\t\t\t\t\t\ttop: 0,\r\n\t\t\t\t\t\tleft: 0,\r\n\t\t\t\t\t\tright: 0,\r\n\t\t\t\t\t\tbottom: 0,\r\n\t\t\t\t\t\tborder: '2px dashed',\r\n\t\t\t\t\t\tborderColor: 'primary.main',\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\tbgcolor: 'rgba(25, 118, 210, 0.04)',\r\n\t\t\t\t\t\tzIndex: 10,\r\n\t\t\t\t\t\tdisplay: 'flex',\r\n\t\t\t\t\t\talignItems: 'center',\r\n\t\t\t\t\t\tjustifyContent: 'center',\r\n\t\t\t\t\t\tpointerEvents: 'none'\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<Typography type='s2' color='primary' weight='medium'>Drop here</Typography>\r\n\t\t\t\t</Box>\r\n\t\t\t)}\r\n\t\t\t<Box\r\n\t\t\t\tsx={{\r\n\t\t\t\t\tbgcolor: 'grey.50',\r\n\t\t\t\t\tp: 1,\r\n\t\t\t\t\tdisplay: 'flex',\r\n\t\t\t\t\talignItems: 'center',\r\n\t\t\t\t\tjustifyContent: 'space-between',\r\n\t\t\t\t\tborderBottom: '1px solid',\r\n\t\t\t\t\tborderColor: 'grey.200'\r\n\t\t\t\t}}>\r\n\t\t\t\t<Box\r\n\t\t\t\t\t{...listeners}\r\n\t\t\t\t\t{...attributes}\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tdisplay: 'flex',\r\n\t\t\t\t\t\talignItems: 'center',\r\n\t\t\t\t\t\tcursor: 'grab',\r\n\t\t\t\t\t\tpx: 1,\r\n\t\t\t\t\t\tpy: 0.5,\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\ttransition: 'background-color 0.2s ease',\r\n\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.100' },\r\n\t\t\t\t\t\t'&:active': { cursor: 'grabbing' }\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t<DragIndicatorIcon\r\n\t\t\t\t\t\tsx={{ color: 'grey.600', fontSize: '1.2rem', mr: 0.5 }}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Typography type='s3' color='theme.secondary.600' weight='medium'>Move</Typography>\r\n\t\t\t\t</Box>\r\n\t\t\t\t<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\r\n\t\t\t\t\t{isEditing ? (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t<FormControlLabel control={\r\n\t\t\t\t\t\t\t\t<Checkbox \r\n\t\t\t\t\t\t\t\t\tonClick={handleCheckboxChange} \r\n\t\t\t\t\t\t\t\t\tdefaultChecked={isEditedFromSource}/>} \r\n\t\t\t\t\t\t\t\t\tlabel={<Typography type='s2' color='theme.secondary.1000'>Edited from source</Typography>} />\r\n\t\t\t\t\t\t\t<FormControl size='small' sx={{ minWidth: 160 }}>\r\n\t\t\t\t\t\t\t\t<Select\r\n\t\t\t\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\trenderValue={() => 'Add placeholder...'}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tonChange={handleSelectChange}>\r\n\t\t\t\t\t\t\t\t\t{placeholderOptions}\r\n\t\t\t\t\t\t\t\t</Select>\r\n\t\t\t\t\t\t\t</FormControl>\r\n\t\t\t\t\t\t\t<Box>\r\n\t\t\t\t\t\t\t\t<IconButton size='small' onClick={handleSave}>\r\n\t\t\t\t\t\t\t\t\t<Save fontSize='small' color='inherit' />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t\t<IconButton size='small' onClick={handleCancelEdit} color='error'>\r\n\t\t\t\t\t\t\t\t\t<Close fontSize='small' color='inherit' />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t</Box>\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<Fade in={isHovered || isSelected} timeout={200}>\r\n\t\t\t\t\t\t\t<Box sx={{ display: 'flex', gap: 0.5 }}>\r\n\t\t\t\t\t\t\t\t{section?.is_edited_from_source && (\r\n\t\t\t\t\t\t\t\t\t<Chip\r\n\t\t\t\t\t\t\t\t\t\tlabel=\"Edited From Source\"\r\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\r\n\t\t\t\t\t\t\t\t\t\tsx={(theme) => ({ \r\n\t\t\t\t\t\t\t\t\t\t\ttextTransform: 'capitalize', \r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: theme.palette.theme?.tertiary1?.[200], \r\n\t\t\t\t\t\t\t\t\t\t\tcolor: theme.palette.theme?.tertiary1?.[900]\r\n\t\t\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t{editableSections.includes(section.type) &&\r\n\t\t\t\t\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\t\tonClick={handleEditing}\r\n\t\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\t\tbgcolor: 'grey.100',\r\n\t\t\t\t\t\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.200' }\r\n\t\t\t\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t\t\t\t<Edit fontSize='small' sx={{ color: 'theme.secondary.1000' }} />\r\n\t\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\tonClick={handleSplit}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\tbgcolor: 'grey.100',\r\n\t\t\t\t\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.200' },\r\n\t\t\t\t\t\t\t\t\t\topacity: section?.splitWidth === 25 ? 0.5 : 1\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tdisabled={section?.splitWidth === 25}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<SplitIcon fontSize='small' color='primary' />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\t\t\t\tonClick={handleDeleteClick}\r\n\t\t\t\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\t\t\t\tbgcolor: 'grey.100',\r\n\t\t\t\t\t\t\t\t\t\t'&:hover': { bgcolor: 'grey.200' }\r\n\t\t\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t\t\t<Trash fontSize='small' sx={{ color: 'theme.error.500' }} />\r\n\t\t\t\t\t\t\t\t</IconButton>\r\n\t\t\t\t\t\t\t</Box>\r\n\t\t\t\t\t\t</Fade>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</Box>\r\n\t\t\t</Box>\r\n\t\t\t<Box sx={{ p: 3, bgcolor: 'white' }}>\r\n\t\t\t\t<style>\r\n           {`\r\n             .ck.ck-toolbar.ck-toolbar_floating {\r\n               display: none;\r\n             }\r\n             .ck.ck-toolbar.ck-toolbar_floating.visible {\r\n               display: flex;\r\n             }\r\n\t\t\t\t\t\ta {\r\n\t\t\t\t\t\t\tcolor: #007bff !important;\r\n\t\t\t\t\t\t\ttext-decoration: none !important;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\ta:hover {\r\n\t\t\t\t\t\t\ttext-decoration: underline;\r\n\t\t\t\t\t\t}\r\n           `}\r\n         </style>\r\n\t\t\t\t{contentRenderer}\r\n\t\t\t</Box>\r\n\t\t\t{isOpenEditSectionModal && <EditSectionModal\r\n\t\t\t\tisOpen={isOpenEditSectionModal}\r\n\t\t\t\tsetIsOpen={setIsOpenEditSectionModal}\r\n\t\t\t\tplaceholders={placeholders}\r\n\t\t\t\thandleSave={handleSave}\r\n\t\t\t\thandleAddPlaceholder={handleAddPlaceholder}\r\n\t\t\t\thandleEditorReady={handleEditorReady}\r\n\t\t\t\tsection={section}\r\n\t\t\t/>}\r\n\t\t</Paper>\r\n\t);\r\n});\r\n\r\nEditorSection.displayName = 'EditorSection';\r\n\r\nexport default EditorSection;"],"names":["CustomEditor","lazy","Promise","resolve","then","require","editableSections","EditorSection","React","memo","section","isSelected","isDragging","isOver","onSelect","onUpdate","onSplit","onDelete","placeholders","setIsSectionEditing","extractStyles","getSingleStyles","useCKEditorStyleExtractor","attributes","listeners","setNodeRef","setDraggableRef","transform","useDraggable","id","setDroppableRef","useDroppable","isEditing","setIsEditing","useState","isHovered","setIsHovered","isOpenEditSectionModal","setIsOpenEditSectionModal","isEditedFromSource","setIsEditedFromSource","Boolean","is_edited_from_source","editorRef","useRef","mouseHoverTimeoutRef","style","useMemo","x","y","transition","paperSx","position","border","borderColor","borderRadius","bgcolor","opacity","boxShadow","mergedRef","useCallback","node","handleDblClick","includes","type","handleEditing","isSplitPair","handleEditorReady","editor","current","handleSave","e","stopPropagation","content","getData","styles","includeTagStyles","includeInlineStyles","mergeNestedStyles","filterEmptyStyles","single","mergedStyles","_a","mergedAttributes","handleSplit","handleAddPlaceholder","placeholder","viewFragment","data","processor","toView","modelFragment","toModel","model","insertContent","handleMouseEnter","window","clearTimeout","setTimeout","handleMouseLeave","handleClick","handleDeleteClick","handleCancelEdit","handleCheckboxChange","target","checked","handleSelectChange","value","useEffect","contentRenderer","jsx","Suspense","fallback","Skeleton","children","onError","error","Box","dangerouslySetInnerHTML","__html","sx","py","lineHeight","margin","placeholderOptions","map","option","MenuItem","Typography","color","label","jsxs","Paper","ref","elevation","onClick","onDoubleClick","onMouseEnter","onMouseLeave","top","left","right","bottom","zIndex","display","alignItems","justifyContent","pointerEvents","weight","p","borderBottom","cursor","px","DragIndicatorIcon","fontSize","mr","gap","Fragment","FormControlLabel","control","Checkbox","defaultChecked","FormControl","size","minWidth","Select","displayEmpty","renderValue","onChange","IconButton","Save","Close","Fade","in","timeout","Chip","theme","textTransform","backgroundColor","_b","palette","tertiary1","_d","_c","Edit","splitWidth","disabled","SplitIcon","Trash","EditSectionModal","isOpen","setIsOpen","displayName"],"mappings":"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"}

package/dist/views/template-editor/components/EditorSidebar/index.esm.js

@@ -4,7 +4,7 @@ import { useDraggable } from "../../../../node_modules/@dnd-kit/core/dist/core.e
 import { useDropzone } from "react-dropzone";
 import default_1 from "../../../../node_modules/@mui/icons-material/ExpandMore/index.esm.js";
 import { postV1Drive, getV1Drive, setBaseUrl } from "../../../../api-client/api.drive/api/index.esm.js";
-import SearchBar from "../../../../components/search-bar/search-bar/index.esm.js";
+import { SearchBar } from "../../../../components/search-bar/search-bar/index.esm.js";
 import { uploadFiles, getToken } from "../../../../utils/common/index.esm.js";
 import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import Heading from "../../../../node_modules/lucide-react/dist/esm/icons/heading/index.esm.js";
@@ -347,6 +347,7 @@ const EditorSidebar = () => {
   );
 };
 export {
+  EditorSidebar,
   EditorSidebar as default
 };
 //# sourceMappingURL=index.esm.js.map