@it-consultis/page-builder 1.1.34

package/layouts/BlocksBar/index.js

@@ -0,0 +1,575 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HtmlTooltip = void 0;
+var _I18nContext = require("../../contexts/I18nContext");
+var _LayerPanel = _interopRequireDefault(require("./LayerPanel"));
+var _store = require("../../store");
+var _block = require("../../utils/block");
+var _Apps = _interopRequireDefault(require("@mui/icons-material/Apps"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
+var _LayersOutlined = _interopRequireDefault(require("@mui/icons-material/LayersOutlined"));
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _Button = _interopRequireDefault(require("@mui/material/Button/Button.js"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog/Dialog.js"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions/DialogActions.js"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent/DialogContent.js"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText/DialogContentText.js"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle/DialogTitle.js"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider/Divider.js"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid/Grid.js"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon/Icon.js"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon/ListItemIcon.js"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText/ListItemText.js"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu/Menu.js"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem/MenuItem.js"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab/Tab.js"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs/Tabs.js"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography/Typography.js"));
+var _styled = _interopRequireDefault(require("@mui/material/styles/styled.js"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme.js"));
+var _Tooltip = _interopRequireWildcard(require("@mui/material/Tooltip"));
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const HtmlTooltip = exports.HtmlTooltip = (0, _styled.default)(({
+  className,
+  ...props
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  ...props,
+  classes: {
+    popper: className
+  }
+}))(({
+  theme
+}) => ({
+  [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
+    backgroundColor: '#f5f5f9',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #dadde9'
+  }
+}));
+const DefaultType = 'Custom';
+
+// Add cloneBlockWithChildren helper function
+const cloneBlockWithChildren = block => {
+  const newBlock = {
+    ...block,
+    id: (0, _uuid.v4)(),
+    meta: {
+      ...block.meta,
+      created: Date.now(),
+      changed: Date.now()
+    }
+  };
+
+  // If there are child nodes, recursively clone them
+  if (block.data.subBlocks) {
+    newBlock.data = {
+      ...block.data,
+      subBlocks: block.data.subBlocks.map(child => cloneBlockWithChildren(child))
+    };
+  }
+  return newBlock;
+};
+const BlocksBar = ({
+  onChange
+}) => {
+  const theme = (0, _useTheme.default)();
+  const t = (0, _I18nContext.useT)();
+  const [keyword, setKeyword] = (0, _react.useState)('');
+  const [columnsCount, setColumnsCount] = (0, _react.useState)(3); // Default 3 columns
+  const [tabValue, setTabValue] = (0, _react.useState)(0);
+  const containerRef = (0, _react.useRef)(null);
+  const categoryRefs = (0, _react.useRef)({});
+  const [tooltipStates, setTooltipStates] = (0, _react.useState)({});
+
+  // add menu related states
+  const [menuAnchorEl, setMenuAnchorEl] = (0, _react.useState)(null);
+  const [activeBlockId, setActiveBlockId] = (0, _react.useState)(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = (0, _react.useState)(false);
+  const {
+    blockTypes,
+    data,
+    setData,
+    setSelectedBlockId,
+    setEditingBlockId,
+    isMp
+  } = (0, _store.useEditorStore)(state => state);
+  const dataRef = (0, _react.useRef)(data);
+  dataRef.current = data;
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      const {
+        width
+      } = entries[0].contentRect;
+      if (width < 300) {
+        setColumnsCount(2);
+      } else if (width < 450) {
+        setColumnsCount(3);
+      } else if (width < 600) {
+        setColumnsCount(4);
+      } else {
+        setColumnsCount(6);
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const updateData = (0, _react.useCallback)(cb => {
+    const newData = cb(dataRef.current);
+    setData(newData);
+  }, [setData]);
+  const filteredBlockTypes = (0, _react.useMemo)(() => {
+    return [...(isMp ? blockTypes.filter(block => (0, _block.blockFilteredMPNav)(block, false, 'id')) : blockTypes)];
+  }, [isMp, blockTypes]);
+  const getBlockTypes = () => {
+    if (keyword.length === 0) {
+      return filteredBlockTypes;
+    }
+    return filteredBlockTypes.filter(item => {
+      return item.label.toLowerCase().includes(keyword.toLowerCase());
+    });
+  };
+  const handleAddBlock = (0, _react.useCallback)(blockType => {
+    const block = (0, _block.createBlock)(blockType);
+    updateData(prevData => [...prevData, block]);
+    onChange?.([...data, block]);
+    // Set the new block as selected and editing
+    setSelectedBlockId(block.id);
+    setEditingBlockId(block.id);
+  }, [updateData, setSelectedBlockId, onChange, data, setEditingBlockId]);
+
+  // add menu related handlers
+  const handleMenuOpen = (event, blockId) => {
+    event.stopPropagation();
+    setMenuAnchorEl(event.currentTarget);
+    setActiveBlockId(blockId);
+  };
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+    setActiveBlockId(null);
+  };
+  const handleClone = () => {
+    if (!activeBlockId) {
+      handleMenuClose();
+      return;
+    }
+    let lastClonedId = null;
+    const cloneIntoChildren = (blocks, targetId) => {
+      let changed = false;
+      let clonedId;
+      const next = blocks.map(block => {
+        const subBlocks = block.data?.subBlocks;
+        if (subBlocks && subBlocks.length > 0) {
+          const idx = subBlocks.findIndex(child => child.id === targetId);
+          if (idx !== -1) {
+            const cloned = cloneBlockWithChildren(subBlocks[idx]);
+            const newChildren = [...subBlocks.slice(0, idx + 1), cloned, ...subBlocks.slice(idx + 1)];
+            changed = true;
+            clonedId = cloned.id;
+            return {
+              ...block,
+              meta: {
+                ...block.meta,
+                changed: Date.now()
+              },
+              data: {
+                ...block.data,
+                subBlocks: newChildren
+              }
+            };
+          }
+          const res = cloneIntoChildren(subBlocks, targetId);
+          if (res.changed) {
+            changed = true;
+            clonedId = res.clonedId;
+            return {
+              ...block,
+              meta: {
+                ...block.meta,
+                changed: Date.now()
+              },
+              data: {
+                ...block.data,
+                subBlocks: res.blocks
+              }
+            };
+          }
+        }
+        return block;
+      });
+      return {
+        blocks: next,
+        clonedId,
+        changed
+      };
+    };
+    const updated = setData(prev => {
+      // Root-level clone
+      const rootIndex = prev.findIndex(b => b.id === activeBlockId);
+      if (rootIndex !== -1) {
+        const cloned = cloneBlockWithChildren(prev[rootIndex]);
+        lastClonedId = cloned.id;
+        return [...prev, cloned];
+      }
+      // Nested clone
+      const res = cloneIntoChildren(prev, activeBlockId);
+      if (res.clonedId) {
+        lastClonedId = res.clonedId;
+      }
+      return res.blocks;
+    });
+    onChange?.(updated);
+    if (lastClonedId) {
+      setSelectedBlockId(lastClonedId);
+      setEditingBlockId(lastClonedId);
+    }
+    handleMenuClose();
+  };
+  const handleDeleteClick = () => {
+    setDeleteDialogOpen(true);
+    setMenuAnchorEl(null);
+  };
+  const handleDeleteCancel = () => {
+    setDeleteDialogOpen(false);
+    setActiveBlockId(null);
+  };
+  const handleDeleteConfirm = () => {
+    if (activeBlockId) {
+      // Check if it's a root node
+      const rootIndex = data.findIndex(block => block.id === activeBlockId);
+      if (rootIndex !== -1) {
+        // If it's a root node, remove directly from array
+        const newData = data.filter(block => block.id !== activeBlockId);
+        setData(newData);
+        onChange?.(newData);
+        setSelectedBlockId('');
+        setEditingBlockId('');
+      } else {
+        // If it's not a root node, handle child node deletion
+        const updateBlocksWithDelete = blocks => {
+          return blocks.map(block => {
+            if (block.data.subBlocks) {
+              const filteredChildren = block.data.subBlocks.filter(child => child.id !== activeBlockId);
+              if (filteredChildren.length !== block.data.subBlocks.length) {
+                return {
+                  ...block,
+                  meta: {
+                    ...block.meta,
+                    changed: Date.now()
+                  },
+                  data: {
+                    ...block.data,
+                    subBlocks: filteredChildren
+                  }
+                };
+              }
+              const newChildren = updateBlocksWithDelete(block.data.subBlocks);
+              if (JSON.stringify(newChildren) !== JSON.stringify(block.data.subBlocks)) {
+                return {
+                  ...block,
+                  meta: {
+                    ...block.meta,
+                    changed: Date.now()
+                  },
+                  data: {
+                    ...block.data,
+                    subBlocks: newChildren
+                  }
+                };
+              }
+            }
+            return block;
+          });
+        };
+        const newData = updateBlocksWithDelete([...data]);
+        setData(newData);
+        onChange?.(newData);
+      }
+    }
+    setDeleteDialogOpen(false);
+    setActiveBlockId(null);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    className: "BlocksBar",
+    sx: {
+      borderRight: '1px solid #ccc',
+      height: '100%',
+      bgcolor: theme.palette.background.default
+    },
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        p: 2.5,
+        pb: 0,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tabs.default, {
+        value: tabValue,
+        onChange: (_, newValue) => setTabValue(newValue),
+        sx: {
+          borderBottom: 1,
+          borderColor: 'divider'
+        },
+        variant: "fullWidth",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          label: t('editor.components'),
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Apps.default, {
+            fontSize: "small"
+          }),
+          sx: {
+            textTransform: 'none',
+            '& .MuiTab-iconWrapper': {
+              marginBottom: '4px'
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          label: t('editor.layers'),
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LayersOutlined.default, {
+            fontSize: "small"
+          }),
+          sx: {
+            textTransform: 'none',
+            '& .MuiTab-iconWrapper': {
+              marginBottom: '4px'
+            }
+          }
+        })]
+      }), tabValue === 0 ?
+      /*#__PURE__*/
+      // Component list panel
+      (0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            py: 2
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            type: "search",
+            style: {
+              width: '100%',
+              border: '1px solid #ccc',
+              outline: 'none',
+              padding: 8,
+              borderRadius: 4
+            },
+            placeholder: "Search components name",
+            autoComplete: "off",
+            onChange: e => setKeyword(e.target.value),
+            value: keyword
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+            sx: {
+              mt: 2
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          sx: {
+            overflowY: 'auto',
+            height: 'calc(100% - 88px)',
+            pb: 2
+          },
+          children: (() => {
+            const items = getBlockTypes();
+            const groupedBlocks = {};
+            items.forEach(blockType => {
+              const category = blockType.category || DefaultType;
+              if (!groupedBlocks[category]) {
+                groupedBlocks[category] = [];
+              }
+              groupedBlocks[category].push(blockType);
+            });
+            const categories = Object.keys(groupedBlocks);
+            const sortedCategories = categories.filter(cat => cat !== DefaultType);
+            if (categories.includes(DefaultType)) {
+              sortedCategories.push(DefaultType);
+            }
+            return sortedCategories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              ref: el => {
+                categoryRefs.current[category] = el;
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                sx: {
+                  py: 2,
+                  fontWeight: 'bold'
+                },
+                children: category
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                container: true,
+                rowGap: 2,
+                columnSpacing: 2,
+                children: groupedBlocks[category].map(blockType => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                  item: true,
+                  xs: 12 / columnsCount,
+                  onClick: () => handleAddBlock(blockType),
+                  draggable: true,
+                  onMouseEnter: () => {
+                    setTooltipStates(prev => ({
+                      ...prev,
+                      [blockType.id]: true
+                    }));
+                  },
+                  onMouseLeave: () => {
+                    setTooltipStates(prev => ({
+                      ...prev,
+                      [blockType.id]: false
+                    }));
+                  },
+                  onDragStart: e => {
+                    e.dataTransfer.setData('blockType', JSON.stringify(blockType));
+                    console.log('onDragStart');
+                    setTooltipStates(prev => ({
+                      ...prev,
+                      [blockType.id]: false
+                    }));
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HtmlTooltip, {
+                    placement: "right-start",
+                    PopperProps: {
+                      anchorEl: categoryRefs.current[category]
+                    },
+                    open: tooltipStates[blockType.id] || false,
+                    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      src: blockType.preview ?? `https://placehold.co/400x300?text=${encodeURIComponent(blockType.label)}`,
+                      alt: blockType.label,
+                      width: 400,
+                      height: 300
+                    }),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                      sx: {
+                        display: 'flex',
+                        aspectRatio: '104/80',
+                        justifyContent: 'center',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        textAlign: 'center',
+                        cursor: 'pointer',
+                        borderRadius: '8px',
+                        gap: 1,
+                        border: '1px solid #D8D8D8',
+                        lineHeight: '1.2',
+                        padding: '10px',
+                        '&:hover': {
+                          backgroundColor: '#f2f2f2'
+                        }
+                      },
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                        style: {
+                          fontSize: 16
+                        },
+                        children: blockType.icon || 'drag_handle'
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+                        style: {
+                          fontSize: 12
+                        },
+                        children: blockType.label
+                      })]
+                    })
+                  })
+                }, blockType.id))
+              })]
+            }, category));
+          })()
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          flex: 1,
+          py: 2,
+          overflow: 'auto'
+        },
+        children: data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            textAlign: 'center',
+            py: 4
+          },
+          children: t('editor.noLayers')
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_LayerPanel.default, {
+          onMenuOpen: handleMenuOpen,
+          onChange: onChange
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+        anchorEl: menuAnchorEl,
+        open: Boolean(menuAnchorEl),
+        onClose: handleMenuClose,
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: handleClone,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: t('editor.clone')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: handleDeleteClick,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: t('editor.delete')
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      open: deleteDialogOpen,
+      onClose: handleDeleteCancel,
+      "aria-labelledby": "delete-dialog-title",
+      "aria-describedby": "delete-dialog-description",
+      keepMounted: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogTitle.default, {
+        id: "delete-dialog-title",
+        children: [t('editor.delete'), ' ', "Block"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+          id: "delete-dialog-description",
+          children: "Are you sure you want to delete this block?"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: handleDeleteCancel,
+          variant: "outlined",
+          children: t('editor.cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: handleDeleteConfirm,
+          variant: "contained",
+          color: "error",
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {}),
+          autoFocus: true,
+          children: t('editor.delete')
+        })]
+      })]
+    })]
+  });
+};
+var _default = exports.default = BlocksBar;

package/layouts/EditorPreview/BlockView.d.ts

@@ -0,0 +1,16 @@
+import { Block, BlockType } from '../../types';
+import React from 'react';
+type BlockViewProps = {
+    block: Block;
+    blockTypes: BlockType[];
+    onChange?(block: Block): void;
+    onDelete?(): void;
+    onMoveUp?(): void;
+    onMoveDown?(): void;
+    onCopy?(block: Block): void;
+    context?: Record<string, any>;
+    isEditMode?: boolean;
+    isNested?: boolean;
+};
+declare const _default: React.NamedExoticComponent<BlockViewProps>;
+export default _default;