@it-consultis/page-builder 1.1.34

package/layouts/Sidebar/BlocksControl.js

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styled = _interopRequireDefault(require("@mui/material/styles/styled.js"));
+var _colors = require("@mui/material/colors");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+var _AddBlockButton = _interopRequireDefault(require("./AddBlockButton"));
+var _block = require("../../utils/block");
+var _BlockForm = _interopRequireDefault(require("./BlockForm"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const PREFIX = 'BlockControl';
+const classes = {
+  root: `${PREFIX}-root`,
+  label: `${PREFIX}-label`,
+  body: `${PREFIX}-body`,
+  footer: `${PREFIX}-footer`
+};
+const Root = (0, _styled.default)('div')(({
+  theme
+}) => ({
+  border: '1px solid #eee',
+  [`.${classes.label}`]: {
+    padding: theme.spacing(1),
+    borderBottom: '1px solid #eee'
+  },
+  [`.${classes.footer}`]: {
+    justifyContent: 'center',
+    display: 'flex'
+  },
+  '& .sortable-item .sortable-handle': {
+    cursor: 'grab',
+    flex: 1
+  },
+  '& .sortable-item.sortable-chosen': {
+    cursor: 'grabbing',
+    background: _colors.yellow[100]
+  }
+}));
+const BlocksControl = props => {
+  const {
+    label,
+    data,
+    classes: propsClasses = {},
+    onChange,
+    blockTypes,
+    cardinality = -1,
+    addBlockProps = {},
+    addBlockLabel,
+    isNested = true
+  } = props;
+  const blocksWrapperRef = (0, _react.useRef)(null);
+  const dataRef = (0, _react.useRef)(data);
+  dataRef.current = data;
+  const isAllowToSort = dataRef.current.every(block => !block.collapse);
+  const updateData = (0, _react.useCallback)(cb => {
+    const newData = cb(dataRef.current);
+    onChange(newData);
+  }, [onChange]);
+  (0, _react.useEffect)(() => {
+    if (!blocksWrapperRef.current) {
+      return undefined;
+    }
+    let active = true;
+    let timeoutId = -1;
+    let sortable = null;
+    (async () => {
+      const Sortable = (await Promise.resolve().then(() => _interopRequireWildcard(require('sortablejs')))).default;
+      timeoutId = window.setTimeout(() => {
+        if (!blocksWrapperRef.current) {
+          return;
+        }
+        if (!active) {
+          return;
+        }
+        sortable = new Sortable(blocksWrapperRef.current, {
+          animation: 150,
+          draggable: '.sortable-item',
+          handle: '.sortable-handle',
+          disabled: !isAllowToSort,
+          onUpdate: () => {
+            updateData(prevData => {
+              if (!sortable || !active) {
+                return prevData;
+              }
+              const newData = sortable.toArray().map(id => prevData.find(block => block.id === id));
+              return newData;
+            });
+          }
+        });
+      }, 200);
+    })();
+    return () => {
+      active = false;
+      window.clearTimeout(timeoutId);
+      if (sortable) {
+        sortable.destroy();
+      }
+    };
+  }, [updateData, isAllowToSort]);
+  const handleAddBlock = blockType => {
+    updateData(prevData => {
+      return [...prevData, (0, _block.createBlock)(blockType)];
+    });
+  };
+  const handleClone = id => (withData = true) => {
+    updateData(prevData => {
+      const block = prevData.find(b => b.id === id);
+      const blockType = blockTypes.find(bt => bt.id === block.type);
+      if (!blockType) {
+        return prevData;
+      }
+      return [...prevData, {
+        ...block,
+        id: (0, _uuid.v4)(),
+        data: withData ? block.data : blockType.defaultData,
+        meta: {
+          ...block.meta,
+          created: Date.now(),
+          changed: Date.now()
+        }
+      }];
+    });
+  };
+  const handleChange = id => newBlockOrFn => {
+    updateData(prevData => {
+      const prevBlock = prevData.find(b => b.id === id);
+      const newBlock = typeof newBlockOrFn === 'function' ? newBlockOrFn(prevBlock) : newBlockOrFn;
+      return prevData.map(block => {
+        if (block.id !== newBlock.id) {
+          return block;
+        }
+        return newBlock;
+      });
+    });
+  };
+  const handleDeleteBlock = id => () => {
+    updateData(prevData => {
+      return prevData.filter(block => block.id !== id);
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    className: (0, _clsx.default)(classes.root, propsClasses.root),
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.label,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: blocksWrapperRef,
+      className: (0, _clsx.default)(classes.body, propsClasses.body),
+      children: data.map(block => {
+        const {
+          type,
+          id,
+          meta
+        } = block;
+        const blockType = blockTypes.find(bt => bt.id === type);
+        if (!blockType) {
+          return null;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlockForm.default, {
+          blockType: blockType,
+          block: block,
+          onChange: handleChange(id),
+          onDelete: handleDeleteBlock(id),
+          onClone: handleClone(id),
+          isNested: isNested
+        }, block.id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+      className: (0, _clsx.default)('blocks-control-footer', classes.footer, propsClasses.footer),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddBlockButton.default, {
+        label: addBlockLabel,
+        displayFormat: "drawer",
+        ...addBlockProps,
+        data: data,
+        blockTypes: blockTypes,
+        onAddBlock: handleAddBlock,
+        disabled: cardinality >= 0 && data.length >= cardinality
+      })
+    })]
+  });
+};
+var _default = exports.default = BlocksControl;

package/layouts/Sidebar/index.d.ts

@@ -0,0 +1,10 @@
+import { Block } from '../../types';
+import { type FC } from 'react';
+export interface SidebarProps {
+    title: string;
+    open?: boolean;
+    onBack?(): void;
+    onChange?(data: Block[]): void;
+}
+declare const Sidebar: FC<SidebarProps>;
+export default Sidebar;

package/layouts/Sidebar/index.js

@@ -0,0 +1,451 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../../contexts/I18nContext");
+var _BlocksControl = _interopRequireDefault(require("./BlocksControl"));
+var _store = require("../../store");
+var _block = require("../../utils/block");
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PREFIX = 'Sidebar';
+const classes = {
+  root: `${PREFIX}-root`,
+  headerBtn: `${PREFIX}-headerBtn`,
+  title: `${PREFIX}-title`,
+  header: `${PREFIX}-header`,
+  body: `${PREFIX}-body`,
+  footer: `${PREFIX}-footer`,
+  emptyState: `${PREFIX}-emptyState`
+};
+const Root = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  [`&.${classes.root}`]: {
+    width: '100%',
+    height: '100%',
+    background: theme.palette.background.default,
+    boxShadow: '-1px 0 2px rgba(0,0,0,0.2)',
+    transform: 'translateX(100%)',
+    transitionDuration: '.2s',
+    transitionProperty: 'transform',
+    top: 0,
+    left: 0,
+    zIndex: 10,
+    minHeight: '100%',
+    maxHeight: '100%',
+    position: 'absolute',
+    borderLeft: `2px solid ${theme.palette.grey[100]}`,
+    '&.open': {
+      transform: 'translateX(0%)'
+    }
+  },
+  [`& .${classes.headerBtn}`]: {
+    height: '100%',
+    borderRadius: 0,
+    boxShadow: 'none'
+  },
+  [`& .${classes.title}`]: {
+    padding: theme.spacing(2),
+    cursor: 'pointer'
+  },
+  [`& .${classes.header}`]: {
+    borderBottom: `1px solid ${theme.palette.grey[100]}`,
+    display: 'flex',
+    alignItems: 'center',
+    height: 56
+  },
+  [`& .${classes.body}`]: {
+    border: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    overflowY: 'auto'
+  },
+  [`& .${classes.footer}`]: {
+    marginTop: 'auto',
+    borderTop: '1px solid #eee',
+    display: 'none',
+    opacity: 0,
+    zIndex: -10
+  },
+  [`& .${classes.emptyState}`]: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    color: theme.palette.text.secondary,
+    '& .MuiSvgIcon-root': {
+      fontSize: 48,
+      marginBottom: theme.spacing(2),
+      opacity: 0.5
+    }
+  }
+}));
+const Sidebar = props => {
+  const t = (0, _I18nContext.useT)();
+  const {
+    onBack,
+    title = 'Blocks',
+    open = true,
+    onChange
+  } = props;
+  const [mounted, setMounted] = (0, _react.useState)(false);
+  const [closing, setClosing] = (0, _react.useState)(false);
+  const {
+    cardinality,
+    selectedBlockId,
+    setSelectedBlockId,
+    blockTypes,
+    isMp,
+    data,
+    setData,
+    setEditingBlockId
+  } = (0, _store.useEditorStore)(state => state);
+  const [dragOverId, setDragOverId] = (0, _react.useState)(null);
+  const [dragPosition, setDragPosition] = (0, _react.useState)(null);
+  const [menuAnchorEl, setMenuAnchorEl] = (0, _react.useState)(null);
+  const [activeBlockId, setActiveBlockId] = (0, _react.useState)(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = (0, _react.useState)(false);
+
+  // Recursively clone blocks and their child nodes, generating new IDs for each node
+  const cloneBlockWithChildren = block => {
+    const newBlock = {
+      ...block,
+      id: `${block.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      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 updateData = newData => {
+    if (newData.length !== data.length) {
+      setSelectedBlockId('');
+      setEditingBlockId('');
+    }
+    setData(newData);
+    if (onChange) {
+      onChange(newData);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    requestAnimationFrame(() => {
+      setMounted(true);
+    });
+    return () => {
+      setMounted(false);
+    };
+  }, []);
+
+  // Not in use
+  // const handleBack = () => {
+  //   setClosing(true);
+  //   setTimeout(() => {
+  //     requestAnimationFrame(() => {
+  //       if (!onBack) {
+  //         return;
+  //       }
+  //       onBack();
+  //     });
+  //   }, 200);
+  // };
+
+  // Not in use
+  /* const selectedBlockName = useMemo(() => {
+    const selectedBlock = data.find((block) => block.id === selectedBlockId);
+    if (!selectedBlock) return '';
+     return selectedBlock.data.blockName || selectedBlock.id;
+  }, [selectedBlockId, data]); */
+
+  const selectedBlock = (0, _react.useMemo)(() => {
+    // If there's a selected block, return it
+    if (selectedBlockId) {
+      const findBlock = data.find(block => block.id === selectedBlockId);
+      const findBlockInSubBlocks = data.find(block => block?.data?.subBlocks?.find(child => child.id === selectedBlockId));
+      return findBlock || findBlockInSubBlocks;
+    }
+    // If no block is selected and we have blocks, return the last one
+    if (data.length > 0) {
+      return data[data.length - 1];
+    }
+    // If no blocks exist, return null
+    return null;
+  }, [selectedBlockId, data]);
+
+  // Update selectedBlockId when data changes and no block is selected
+  (0, _react.useEffect)(() => {
+    const firstBlock = data[0];
+    const lastBlock = data[data.length - 1];
+    if (data.length > 0) {
+      if (!selectedBlockId) {
+        const isMpPage = (0, _block.blockFilteredMPNav)(firstBlock, true) && isMp;
+        const isNormalPage = (0, _block.blockFilteredMPNav)(lastBlock) && !isMp;
+        if (isMpPage || isNormalPage) {
+          setSelectedBlockId(firstBlock.id);
+          setEditingBlockId(firstBlock.id);
+        }
+      }
+      // Set the selected block from mp-nav to the second one (if it has) when the device switches from mp to others
+      if ((0, _block.blockFilteredMPNav)(firstBlock, true) && firstBlock.id === selectedBlockId && !isMp && data.length > 1) {
+        const secondBlock = data[1];
+        setSelectedBlockId(secondBlock.id);
+        setEditingBlockId(secondBlock.id);
+      }
+    }
+  }, [data, selectedBlockId, isMp, setSelectedBlockId, setEditingBlockId]);
+  const handleMenuOpen = (event, blockId) => {
+    event.stopPropagation();
+    setMenuAnchorEl(event.currentTarget);
+    setActiveBlockId(blockId);
+  };
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+    setActiveBlockId(null);
+  };
+  const handleClone = () => {
+    if (activeBlockId) {
+      // Check if it's a root node
+      const rootBlock = data.find(block => block.id === activeBlockId);
+      if (rootBlock) {
+        // If it's a root node, clone and add to the end
+        const clonedBlock = cloneBlockWithChildren(rootBlock);
+        const newData = [...data, clonedBlock];
+        setData(newData);
+        if (onChange) {
+          onChange(newData);
+        }
+        setSelectedBlockId(clonedBlock.id);
+        setEditingBlockId(clonedBlock.id);
+      } else {
+        // If it's not a root node, handle child node cloning
+        const updateBlocksWithClone = blocks => {
+          return blocks.map(block => {
+            if (block.data.subBlocks) {
+              const targetIndex = block.data.subBlocks.findIndex(child => child.id === activeBlockId);
+              if (targetIndex !== -1) {
+                const clonedBlock = cloneBlockWithChildren(block.data.subBlocks[targetIndex]);
+                const newChildren = [...block.data.subBlocks.slice(0, targetIndex + 1), clonedBlock, ...block.data.subBlocks.slice(targetIndex + 1)];
+                return {
+                  ...block,
+                  meta: {
+                    ...block.meta,
+                    changed: Date.now()
+                  },
+                  data: {
+                    ...block.data,
+                    subBlocks: newChildren
+                  }
+                };
+              }
+              const newChildren = updateBlocksWithClone(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 = updateBlocksWithClone([...data]);
+        setData(newData);
+        if (onChange) {
+          onChange(newData);
+        }
+      }
+    }
+    handleMenuClose();
+  };
+  const handleDeleteClick = () => {
+    setDeleteDialogOpen(true);
+    setMenuAnchorEl(null); // Only close the menu but keep activeBlockId
+  };
+  const handleDeleteCancel = () => {
+    setDeleteDialogOpen(false);
+    setActiveBlockId(null); // Clear activeBlockId only when canceling
+  };
+  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);
+        if (onChange) {
+          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);
+        if (onChange) {
+          onChange(newData);
+        }
+      }
+    }
+    setDeleteDialogOpen(false);
+    setActiveBlockId(null);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    className: (0, _clsx.default)(classes.root, {
+      open: !closing && open && mounted
+    }),
+    children: [selectedBlock ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlocksControl.default, {
+      blockTypes: blockTypes,
+      data: [selectedBlock],
+      onChange: newData => {
+        const updatedData = data.map(block => block.id === selectedBlock.id ? newData[0] : block);
+        updateData(updatedData);
+      },
+      cardinality: cardinality,
+      classes: {
+        root: classes.body,
+        footer: classes.footer
+      },
+      isNested: false
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.emptyState,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "body1",
+        color: "textSecondary",
+        children: t('editor.noBlockSelected')
+      })
+    }), /*#__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: "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: "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.jsx)(_DialogTitle.default, {
+        id: "delete-dialog-title",
+        children: "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: "Cancel"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: handleDeleteConfirm,
+          variant: "contained",
+          color: "primary",
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {}),
+          autoFocus: true,
+          children: "Delete"
+        })]
+      })]
+    })]
+  });
+};
+var _default = exports.default = Sidebar;

package/layouts/Snackbar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Snackbar: React.FC;
+export default Snackbar;

package/layouts/Snackbar.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert/Alert.js"));
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar/Snackbar.js"));
+var _store = require("../store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Snackbar = () => {
+  const alertMessages = (0, _store.useEditorStore)(state => state.alertMessages);
+  const removeMessage = (0, _store.useEditorStore)(state => state.removeAlertMessage);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: alertMessages.map(m => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Snackbar.default, {
+        open: true,
+        onClose: () => {
+          removeMessage(m.id);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.default, {
+          severity: m.severity,
+          children: [Array.isArray(m.message) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            component: "ul",
+            sx: {
+              marginTop: 0,
+              marginBottom: 0,
+              padding: 0,
+              listStylePosition: 'inside'
+            },
+            children: m.message.map(line => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              children: line
+            }))
+          }), typeof m.message === 'string' && m.message]
+        })
+      }, m.id);
+    })
+  });
+};
+var _default = exports.default = Snackbar;