@it-consultis/page-builder 1.1.34

package/layouts/Header/menus/ExportDataDialog.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../../../contexts/I18nContext");
+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 _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle/DialogTitle.js"));
+var _colors = require("@mui/material/colors");
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("../../../store");
+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 allMessages = {
+  copySuccess: {
+    id: 'copySuccess',
+    message: 'Data copied',
+    severity: 'info'
+  }
+};
+const ExportDataDialog = props => {
+  const t = (0, _I18nContext.useT)();
+  const {
+    ...dialogProps
+  } = props;
+  const data = (0, _store.useEditorStore)(state => state.data);
+  const addAlertMessages = (0, _store.useEditorStore)(state => state.addAlertMessages);
+  const json = (0, _react.useMemo)(() => {
+    return JSON.stringify(data);
+  }, [data]);
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(json);
+    addAlertMessages([{
+      ...allMessages.copySuccess
+    }]);
+  };
+  const closeDialog = (ev, reason) => {
+    if (dialogProps.onClose) {
+      dialogProps.onClose(ev, reason);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    ...dialogProps,
+    onClose: closeDialog,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+      children: t('editor.exportData')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        onChange: ev => ev.preventDefault(),
+        onClick: ev => {
+          const element = ev.currentTarget;
+          window.requestAnimationFrame(() => {
+            element.select();
+            copyToClipboard();
+          });
+        },
+        rows: 10,
+        component: "textarea",
+        sx: {
+          background: _colors.grey[100],
+          padding: 1,
+          width: 540,
+          maxWidth: '100%',
+          fontSize: theme => theme.typography.fontSize * 0.85
+        },
+        contentEditable: false,
+        value: json
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        sx: {
+          fontWeight: 500
+        },
+        onClick: copyToClipboard,
+        children: t('editor.copyToClipboard')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        sx: {
+          fontWeight: 500
+        },
+        onClick: ev => {
+          closeDialog(ev, 'backdropClick');
+        },
+        children: t('editor.cancel')
+      })]
+    })]
+  });
+};
+var _default = exports.default = ExportDataDialog;

package/layouts/Header/menus/ImportDataDialog.d.ts

@@ -0,0 +1,4 @@
+import { DialogProps } from '@mui/material';
+import React from 'react';
+declare const ImportDataDialog: React.FC<DialogProps>;
+export default ImportDataDialog;

package/layouts/Header/menus/ImportDataDialog.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../../../contexts/I18nContext");
+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 _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle/DialogTitle.js"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField/TextField.js"));
+var _react = _interopRequireDefault(require("react"));
+var _store = require("../../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImportDataDialog = props => {
+  const t = (0, _I18nContext.useT)();
+  const {
+    ...dialogProps
+  } = props;
+  const editorImportData = (0, _store.useEditorStore)(state => state.importData);
+  const addAlertMessages = (0, _store.useEditorStore)(state => state.addAlertMessages);
+  const closeDialog = (ev, reason) => {
+    if (dialogProps.onClose) {
+      dialogProps.onClose(ev, reason);
+    }
+  };
+  const importData = async data => {
+    const result = await editorImportData(data);
+    if (result.success) {
+      closeDialog({}, 'escapeKeyDown');
+      addAlertMessages([{
+        severity: 'success',
+        message: 'Data imported successfully'
+      }]);
+      return;
+    }
+    const errMessages = [];
+    result.errors.forEach(err => {
+      err.issues.forEach(issue => {
+        errMessages.push(`Code: ${issue.code}. ${issue.message}`);
+      });
+    });
+    addAlertMessages([{
+      severity: 'error',
+      message: errMessages,
+      autoHideDuration: 10000
+    }]);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    ...dialogProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+      children: t('editor.importData')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+      onSubmit: ev => {
+        ev.preventDefault();
+        const form = ev.currentTarget;
+        const textarea = form.elements.item(0);
+        importData(textarea.value);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
+        sx: {
+          pt: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          name: "data",
+          rows: 10,
+          sx: {
+            minWidth: 320,
+            minHeight: 200,
+            width: 540,
+            maxWidth: '100%',
+            fontSize: theme => theme.typography.fontSize * 0.85
+          },
+          multiline: true,
+          required: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          type: "submit",
+          sx: {
+            fontWeight: 500
+          },
+          children: t('editor.importData')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          sx: {
+            fontWeight: 500
+          },
+          onClick: ev => {
+            closeDialog(ev, 'backdropClick');
+          },
+          children: t('editor.cancel')
+        })]
+      })]
+    })]
+  });
+};
+var _default = exports.default = ImportDataDialog;

package/layouts/Header/menus/LeftMenu.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../../../types';
+import { FC } from 'react';
+declare const LeftMenu: FC<{
+    onToggleBlocksBar?(): void;
+    isBlocksBarVisible?: boolean;
+    onChange?(data: Block[]): void;
+    slot?: FC;
+}>;
+export default LeftMenu;

package/layouts/Header/menus/LeftMenu.js

@@ -0,0 +1,369 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../../../contexts/I18nContext");
+var _DeleteForever = _interopRequireDefault(require("@mui/icons-material/esm/DeleteForever.js"));
+var _Apps = _interopRequireDefault(require("@mui/icons-material/Apps"));
+var _DeleteOutline = _interopRequireDefault(require("@mui/icons-material/DeleteOutline"));
+var _Tune = _interopRequireDefault(require("@mui/icons-material/Tune"));
+var _lab = require("@mui/lab");
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _Button = _interopRequireDefault(require("@mui/material/Button/Button.js"));
+var _ButtonBase = _interopRequireDefault(require("@mui/material/ButtonBase/ButtonBase.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 _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle/DialogTitle.js"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton/IconButton.js"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu/Menu.js"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem/MenuItem.js"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography/Typography.js"));
+var _colors = require("@mui/material/colors");
+var _Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2/Grid2"));
+var _store = require("../../../store");
+var _react = _interopRequireWildcard(require("react"));
+var _block = require("../../../utils/block");
+var _ExportDataDialog = _interopRequireDefault(require("./ExportDataDialog"));
+var _ImportDataDialog = _interopRequireDefault(require("./ImportDataDialog"));
+var _SaveTemplateDialog = _interopRequireDefault(require("./SaveTemplateDialog"));
+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 TemplateMenuItem = props => {
+  const {
+    id,
+    onSelect,
+    onDelete
+  } = props;
+  const configClient = (0, _store.useConfigStorageQueryClient)();
+  const configQuery = configClient.useGetQuery(id);
+  const config = configQuery.data;
+  if (configQuery.isLoading || !config) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+      disabled: true,
+      children: id
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+    container: true,
+    spacing: 1,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+      sx: {
+        minWidth: 150
+      },
+      alignItems: "center",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonBase.default, {
+        onClick: () => {
+          onSelect(config);
+        },
+        sx: {
+          width: '100%',
+          textAlign: 'left',
+          px: 1,
+          mx: 1,
+          flexDirection: 'column',
+          alignItems: 'start'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: config.data.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "caption",
+          sx: {
+            lineHeight: 1,
+            color: _colors.grey[600]
+          },
+          children: config.id.slice(9)
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "small",
+        onClick: () => {
+          onDelete(config);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteForever.default, {
+          width: 12,
+          height: 12
+        })
+      })
+    })]
+  });
+};
+const ImportTemplateMenuItem = props => {
+  const t = (0, _I18nContext.useT)();
+  const {
+    onClose
+  } = props;
+  const rootRef = (0, _react.useRef)(null);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [editorData, setEditorData] = (0, _store.useEditorStore)(state => [state.data, state.setData]);
+  const configClient = (0, _store.useConfigStorageQueryClient)();
+  const configListQuery = configClient.useListQuery({
+    enabled: open
+  });
+  const configList = configListQuery.data || [];
+  const templateList = configList.filter(configId => configId.startsWith('template.'));
+  const [action, setAction] = (0, _react.useState)(null);
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
+  const close = () => {
+    setDialogOpen(false);
+    setAction(null);
+    setOpen(false);
+  };
+  const closeDialog = () => {
+    close();
+    onClose();
+  };
+  const deleteMutation = configClient.useDeleteMutation({
+    onSuccess() {
+      closeDialog();
+    }
+  });
+  (0, _react.useEffect)(() => {
+    if (action?.type === 'select') {
+      if (editorData.length === 0) {
+        setEditorData(action.payload.data.blocks);
+        close();
+        return;
+      }
+      setDialogOpen(true);
+    }
+    if (action?.type === 'delete') {
+      setDialogOpen(true);
+    }
+  }, [action, editorData, setEditorData]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      open: dialogOpen,
+      onClose: () => {
+        if (!deleteMutation.isLoading) onClose();
+      },
+      children: [action?.type === 'select' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogTitle.default, {
+          children: ["Import data from template \"", action.payload.data.name, "\""]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContent.default, {
+          dividers: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            children: ["Are you sure you want to import data from template \"", action.payload.data.name, "\"?"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "You will lose your current data."
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "contained",
+            sx: {
+              mr: 0.5
+            },
+            onClick: () => {
+              setEditorData(action.payload.data.blocks);
+              closeDialog();
+            },
+            children: "Confirm"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "outlined",
+            onClick: closeDialog,
+            children: "Cancel"
+          })]
+        })]
+      }), action?.type === 'delete' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogTitle.default, {
+          children: ["Delete template \"", action.payload.data.name, "\""]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContent.default, {
+          dividers: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            children: ["Are you sure you want to delete template \"", action.payload.data.name, "\"?"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "Data will be lost permanently."
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+            loading: deleteMutation.isLoading,
+            variant: "contained",
+            sx: {
+              mr: 0.5
+            },
+            onClick: () => {
+              deleteMutation.mutate(action.payload.id);
+            },
+            children: t('editor.delete')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "outlined",
+            onClick: closeDialog,
+            disabled: deleteMutation.isLoading,
+            children: t('editor.cancel')
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+      ref: rootRef,
+      onClick: () => {
+        setOpen(true);
+      },
+      children: t('editor.importFromTemplate')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+      MenuListProps: {
+        dense: true
+      },
+      onClose: close,
+      open: open,
+      anchorEl: rootRef.current,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      children: [templateList.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        disabled: true,
+        children: t('editor.noTemplatesFound')
+      }), templateList.map(configId => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TemplateMenuItem, {
+          onSelect: config => {
+            setAction({
+              type: 'select',
+              payload: config
+            });
+          },
+          onDelete: config => {
+            setAction({
+              type: 'delete',
+              payload: config
+            });
+          },
+          id: configId
+        }, configId);
+      })]
+    })]
+  });
+};
+const LeftMenu = props => {
+  const {
+    onToggleBlocksBar,
+    isBlocksBarVisible,
+    onChange,
+    slot: Slot
+  } = props;
+  const t = (0, _I18nContext.useT)();
+  const editorHasData = (0, _store.useEditorStore)(state => state.data.length > 0);
+  const storage = (0, _store.useEditorStore)(state => state.storage);
+  const {
+    data,
+    setData,
+    isMp,
+    blockTypes
+  } = (0, _store.useEditorStore)(state => state);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)();
+  const menuOpen = Boolean(anchorEl);
+  const [action, setAction] = (0, _react.useState)('');
+  (0, _react.useEffect)(() => {
+    if (action.length > 0) {
+      setAnchorEl(undefined);
+    }
+  }, [action]);
+  const closeDialog = () => setAction('');
+  const [confirmOpen, setConfirmOpen] = _react.default.useState(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: ev => {
+        setAnchorEl(ev.currentTarget);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tune.default, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: () => {
+        onToggleBlocksBar?.();
+      },
+      sx: {
+        opacity: isBlocksBarVisible ? 1 : 0.5
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Apps.default, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: () => {
+        setConfirmOpen(true);
+      },
+      sx: {
+        opacity: data.length > 0 ? 1 : 0.5
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteOutline.default, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+      onClose: () => setAnchorEl(undefined),
+      marginThreshold: 0,
+      anchorEl: anchorEl,
+      open: menuOpen,
+      MenuListProps: {
+        dense: true
+      },
+      children: [storage && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImportTemplateMenuItem, {
+        onClose: () => {
+          setAnchorEl(undefined);
+        }
+      }), storage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        onClick: () => {
+          setAction('save_template');
+        },
+        children: t('editor.saveAsTemplate')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        onClick: () => {
+          setAction('import_data');
+        },
+        children: t('editor.importData')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        disabled: !editorHasData,
+        onClick: () => {
+          setAction('export_data');
+        },
+        children: t('editor.exportData')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExportDataDialog.default, {
+      open: action === 'export_data',
+      onClose: closeDialog
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImportDataDialog.default, {
+      open: action === 'import_data',
+      onClose: closeDialog
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SaveTemplateDialog.default, {
+      open: action === 'save_template',
+      onClose: closeDialog
+    }), Slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(Slot, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      open: confirmOpen,
+      onClose: () => {
+        setConfirmOpen(false);
+      },
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+        id: "alert-dialog-title",
+        children: t('editor.clearConfirm')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "outlined",
+          onClick: () => {
+            setConfirmOpen(false);
+          },
+          children: t('editor.cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          onClick: () => {
+            setConfirmOpen(false);
+            const empty = isMp ? [(0, _block.createBlock)(blockTypes.find(block => (0, _block.blockFilteredMPNav)(block, true, 'id')))] : [];
+            setData(empty);
+            if (onChange) {
+              onChange(empty);
+            }
+          },
+          autoFocus: true,
+          children: t('editor.clearAll')
+        })]
+      })]
+    })]
+  });
+};
+var _default = exports.default = LeftMenu;

package/layouts/Header/menus/RightMenu.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+export type RightMenuProps = {
+    onFullScreen?: () => void;
+    onExitFullScreen?: () => void;
+    onToggleSidebar?: () => void;
+    isSidebarVisible?: boolean;
+    platinum?: boolean;
+    slot?: FC;
+};
+declare const RightMenu: {
+    (props: RightMenuProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {};
+};
+export default RightMenu;

package/layouts/Header/menus/RightMenu.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _AspectRatio = _interopRequireDefault(require("@mui/icons-material/AspectRatio"));
+var _RedoOutlined = _interopRequireDefault(require("@mui/icons-material/RedoOutlined"));
+var _UndoOutlined = _interopRequireDefault(require("@mui/icons-material/UndoOutlined"));
+var _WidthWideOutlined = _interopRequireDefault(require("@mui/icons-material/WidthWideOutlined"));
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _Button = _interopRequireDefault(require("@mui/material/Button/Button.js"));
+var _store = require("../../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RightMenu = props => {
+  const {
+    setIsFullScreen,
+    isFullScreen
+  } = (0, _store.useEditorStore)(state => state);
+  const {
+    onFullScreen,
+    onExitFullScreen,
+    onToggleSidebar,
+    isSidebarVisible,
+    platinum,
+    slot: Slot
+  } = props;
+  const {
+    undo,
+    redo,
+    pastStates,
+    futureStates
+  } = (0, _store.useTemporalEditorStore)(state => state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    children: [Slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(Slot, {}), platinum && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        disabled: pastStates.length === 0,
+        onClick: () => {
+          undo();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UndoOutlined.default, {
+          style: {
+            opacity: pastStates.length === 0 ? 0.5 : 1
+          },
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        disabled: futureStates.length === 0,
+        onClick: () => {
+          redo();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RedoOutlined.default, {
+          style: {
+            opacity: futureStates.length === 0 ? 0.5 : 1
+          },
+          fontSize: "small"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: onToggleSidebar,
+      sx: {
+        opacity: isSidebarVisible ? 1 : 0.5
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WidthWideOutlined.default, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: () => {
+        const newState = !isFullScreen;
+        setIsFullScreen(newState);
+        if (newState) {
+          onFullScreen?.();
+        } else {
+          onExitFullScreen?.();
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AspectRatio.default, {
+        sx: {
+          opacity: isFullScreen ? 1 : 0.5,
+          transition: 'opacity 0.2s ease'
+        },
+        fontSize: "small"
+      })
+    })]
+  });
+};
+RightMenu.propTypes = {};
+var _default = exports.default = RightMenu;