@it-consultis/page-builder 1.1.34

package/layouts/EditorPreview/BlockView.js

@@ -0,0 +1,435 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _store = require("../../store");
+var _block = require("../../utils/block");
+var _Delete = _interopRequireDefault(require("@mui/icons-material/esm/Delete.js"));
+var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
+var _GridView = _interopRequireDefault(require("@mui/icons-material/GridView"));
+var _KeyboardArrowDown = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowDown"));
+var _KeyboardArrowUp = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowUp"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme.js"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _react = _interopRequireWildcard(require("react"));
+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 BlockView = props => {
+  const {
+    block,
+    blockTypes,
+    onChange,
+    onDelete,
+    onMoveUp,
+    onMoveDown,
+    onCopy,
+    context,
+    isEditMode = true,
+    isNested = false
+  } = props;
+  const theme = (0, _useTheme.default)();
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const [showGrid, setShowGrid] = (0, _react.useState)(false);
+  const [gridAnchorEl, setGridAnchorEl] = (0, _react.useState)(null);
+  const [gridSettings, setGridSettings] = (0, _react.useState)({
+    columns: 6,
+    padding: 16,
+    gap: 20,
+    maxWidth: 1280
+  });
+  const {
+    setData
+  } = (0, _store.useEditorStore)(state => state);
+  const gridColumnIds = (0, _react.useMemo)(() => {
+    return Array.from({
+      length: 12
+    }, (_, index) => index + 1);
+  }, []);
+  const blockType = (0, _react.useMemo)(() => {
+    return blockTypes.find(bt => bt.id === block.type);
+  }, [blockTypes, block.type]);
+  if (!blockType || !blockType.view) {
+    console.warn(`Block type ${block.type} not found`);
+    return null;
+  }
+  const ViewComponent = blockType.view;
+  const handleDataChange = newData => {
+    if (onChange) {
+      onChange({
+        ...block,
+        data: newData,
+        meta: {
+          ...block.meta,
+          changed: Date.now()
+        }
+      });
+    }
+  };
+  const handleSettingsChange = newSettings => {
+    if (onChange) {
+      onChange({
+        ...block,
+        settings: newSettings,
+        meta: {
+          ...block.meta,
+          changed: Date.now()
+        }
+      });
+    }
+  };
+  const handleGridClick = event => {
+    setGridAnchorEl(event.currentTarget);
+  };
+  const handleGridClose = () => {
+    setGridAnchorEl(null);
+  };
+  const handleGridToggle = () => {
+    setShowGrid(!showGrid);
+  };
+  const handleGridSettingChange = (setting, value) => {
+    setGridSettings({
+      ...gridSettings,
+      [setting]: value
+    });
+  };
+  const handleCopyBlock = copiedBock => {
+    if (onCopy) {
+      onCopy(copiedBock);
+    }
+  };
+  const viewNode = /*#__PURE__*/_react.default.createElement(ViewComponent, {
+    ...block,
+    data: block.data,
+    onDataChange: handleDataChange,
+    onSettingsChange: handleSettingsChange,
+    key: block.id,
+    context
+  });
+  if (!isEditMode) {
+    if (blockType.suspense) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Suspense, {
+        fallback: blockType.suspense.fallback,
+        children: viewNode
+      });
+    }
+    return viewNode;
+  }
+  const renderContent = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+      style: {
+        position: 'relative'
+      },
+      children: [showGrid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          position: 'absolute',
+          zIndex: 99989,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'grid',
+          gridTemplateColumns: `repeat(${gridSettings.columns}, 1fr)`,
+          gap: `${gridSettings.gap}px`,
+          padding: `0 ${gridSettings.padding}px`,
+          maxWidth: `${gridSettings.maxWidth}px`,
+          margin: '0 auto',
+          pointerEvents: 'none',
+          '& > div': {
+            backgroundColor: 'rgba(221, 221, 221, 0.2)',
+            border: '1px dashed #ddd',
+            height: '100%'
+          }
+        },
+        children: Array.from({
+          length: gridSettings.columns
+        }).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}, gridColumnIds[index]))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          position: 'relative',
+          zIndex: 1
+        },
+        children: viewNode
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      position: 'relative',
+      '&:hover': {
+        '& .block-controls': {
+          opacity: 1
+        }
+      }
+    },
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        position: 'relative',
+        '& > *': {
+          pointerEvents: 'auto'
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
+        elevation: isHovered ? 3 : 0,
+        sx: {
+          backgroundColor: 'transparent',
+          border: isHovered ? `2px solid ${theme.palette.primary.main}` : '2px solid transparent',
+          transition: 'all 0.2s ease-in-out',
+          ...(isNested && {
+            borderColor: isHovered ? '#4caf50' : 'transparent',
+            '&:hover': {
+              backgroundColor: 'rgba(76, 175, 80, 0.04)'
+            }
+          })
+        },
+        children: renderContent()
+      })
+    }), !isNested && (0, _block.blockFilteredMPNav)(block) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "block-controls",
+      sx: {
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        display: 'flex',
+        gap: 1,
+        opacity: isHovered ? 1 : 0,
+        transition: 'opacity 0.2s ease-in-out',
+        zIndex: 99999,
+        pointerEvents: 'auto'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 0.5,
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          borderRadius: 1,
+          padding: 0.5,
+          height: 32,
+          width: 32
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          size: "small",
+          color: "primary",
+          onClick: onMoveUp,
+          disabled: !onMoveUp,
+          sx: {
+            padding: 0.5,
+            height: '50%',
+            width: '100%',
+            borderRadius: 1,
+            '&.Mui-disabled': {
+              color: 'rgba(0, 0, 0, 0.26)'
+            },
+            '&:not(.Mui-disabled):hover': {
+              backgroundColor: 'rgba(25, 118, 210, 0.12)'
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowUp.default, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          size: "small",
+          color: "primary",
+          onClick: onMoveDown,
+          disabled: !onMoveDown,
+          sx: {
+            padding: 0.5,
+            height: '50%',
+            width: '100%',
+            borderRadius: 1,
+            '&.Mui-disabled': {
+              color: 'rgba(0, 0, 0, 0.26)'
+            },
+            '&:not(.Mui-disabled):hover': {
+              backgroundColor: 'rgba(25, 118, 210, 0.12)'
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowDown.default, {
+            fontSize: "small"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "small",
+        color: showGrid ? 'primary' : 'default',
+        onClick: handleGridClick,
+        sx: {
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          height: 32,
+          width: 32,
+          padding: 0.5,
+          color: showGrid ? theme.palette.primary.main : theme.palette.text.secondary,
+          '&:hover': {
+            backgroundColor: 'rgba(25, 118, 210, 0.12)'
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridView.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "small",
+        color: "primary",
+        onClick: () => handleCopyBlock(block),
+        sx: {
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          height: 32,
+          width: 32,
+          padding: 0.5,
+          '&:hover': {
+            backgroundColor: 'rgba(25, 118, 210, 0.12)'
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "small",
+        color: "error",
+        onClick: onDelete,
+        sx: {
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          height: 32,
+          width: 32,
+          padding: 0.5,
+          color: theme.palette.primary.light,
+          '&:hover': {
+            backgroundColor: 'rgba(211, 47, 47, 0.12)'
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+        open: Boolean(gridAnchorEl),
+        anchorEl: gridAnchorEl,
+        onClose: handleGridClose,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'right'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            p: 2,
+            width: 300
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "subtitle1",
+            gutterBottom: true,
+            children: "Grid system preview"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            sx: {
+              mb: 2
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              variant: "body2",
+              gutterBottom: true,
+              children: ["Columns:", ' ', gridSettings.columns]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+              value: gridSettings.columns,
+              step: 2,
+              marks: true,
+              min: 2,
+              max: 12,
+              onChange: (_, value) => handleGridSettingChange('columns', value)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            sx: {
+              mb: 2
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              variant: "body2",
+              gutterBottom: true,
+              children: ["Padding:", ' ', gridSettings.padding, "px"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+              value: gridSettings.padding,
+              step: 4,
+              min: 0,
+              max: 64,
+              onChange: (_, value) => handleGridSettingChange('padding', value)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            sx: {
+              mb: 2
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              variant: "body2",
+              gutterBottom: true,
+              children: ["Gap:", ' ', gridSettings.gap, "px"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+              value: gridSettings.gap,
+              step: 4,
+              min: 0,
+              max: 64,
+              onChange: (_, value) => handleGridSettingChange('gap', value)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            sx: {
+              mb: 2
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              variant: "body2",
+              gutterBottom: true,
+              children: ["Max width:", ' ', gridSettings.maxWidth, "px"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+              value: gridSettings.maxWidth,
+              step: 100,
+              min: 1280,
+              max: 2000,
+              onChange: (_, value) => handleGridSettingChange('maxWidth', value)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              mt: 2
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              variant: "contained",
+              size: "small",
+              onClick: () => {
+                handleGridToggle();
+                handleGridClose();
+              },
+              color: showGrid ? 'error' : 'primary',
+              children: showGrid ? 'Hidden grid' : 'Display grid'
+            })
+          })]
+        })
+      })]
+    }), isHovered && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: 'none',
+        zIndex: 0
+      }
+    })]
+  });
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(BlockView, (prevProps, props) => {
+  const {
+    block: prevBlock
+  } = prevProps;
+  const {
+    block
+  } = props;
+  return block.meta.changed === prevBlock.meta.changed;
+});

package/layouts/EditorPreview/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Block } from '../../types';
+export declare const PREVIEW_DATA = "editor/previewData";
+export declare const PREVIEW_READY = "editor/previewReady";
+export declare const SELECTED_BLOCK = "editor/selectedBlock";
+declare const EditorPreview: React.FC<{
+    onChange?(data: Block[]): void;
+}>;
+export default EditorPreview;