@it-consultis/page-builder 1.1.34

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

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

package/layouts/Header/menus/SaveTemplateDialog.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../../../contexts/I18nContext");
+var _lab = require("@mui/lab");
+var _Button = _interopRequireDefault(require("@mui/material/Button/Button.js"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox/Checkbox.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 _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel/FormControlLabel.js"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField/TextField.js"));
+var _Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2/Grid2"));
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("../../../store");
+var _strings = require("../../../utils/strings");
+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 initialFormData = {
+  name: '',
+  id: ''
+};
+const initialFormState = {
+  id: {
+    open: false,
+    dirty: false
+  }
+};
+const SaveTemplateDialog = 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 [formData, setFormData] = (0, _react.useState)(initialFormData);
+  const [formState, setFormState] = (0, _react.useState)(initialFormState);
+  const configClient = (0, _store.useConfigStorageQueryClient)();
+  const configListQuery = configClient.useListQuery();
+  const templateList = (configListQuery.data || []).filter(configId => configId.startsWith('template.'));
+  const closeDialog = (ev, reason) => {
+    if (dialogProps.onClose) {
+      dialogProps.onClose(ev, reason);
+    }
+    setTimeout(() => {
+      setFormData(initialFormData);
+      setFormState(initialFormState);
+    }, 200);
+  };
+  const {
+    mutate: save,
+    isLoading
+  } = configClient.useSaveMutation({
+    onSuccess(config) {
+      closeDialog({}, 'escapeKeyDown');
+      addAlertMessages([{
+        severity: 'success',
+        message: `Template "${config.data.name}" saved successfully.`
+      }]);
+    }
+  });
+  const newConfig = {
+    id: `template.${formData.id}`,
+    revisionId: 0,
+    data: {
+      name: formData.name,
+      blocks: data
+    }
+  };
+  const handleFormSubmit = ev => {
+    ev.preventDefault();
+    save(newConfig);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+    ...dialogProps,
+    onClose: closeDialog,
+    PaperProps: {
+      sx: {
+        maxWidth: 480
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+      autoComplete: "off",
+      onSubmit: handleFormSubmit,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+        children: t('editor.saveAsTemplate')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
+        dividers: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            xs: 12,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+              label: t('editor.templateName'),
+              name: "name",
+              value: formData.name,
+              onChange: ev => {
+                setFormData({
+                  id: formState.id.dirty ? formData.id : (0, _strings.toId)(ev.currentTarget.value),
+                  name: ev.currentTarget.value
+                });
+              },
+              required: true,
+              fullWidth: true
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            xs: 12,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+              container: true,
+              p: 0,
+              alignItems: "stretch",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                flexGrow: 1,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+                  size: "small",
+                  label: t('editor.templateId'),
+                  name: "Id",
+                  disabled: !formState.id.open,
+                  value: formData.id,
+                  inputProps: {
+                    maxLength: 128
+                  },
+                  InputLabelProps: {
+                    shrink: formData.id.length > 0
+                  },
+                  onChange: ev => {
+                    setFormData({
+                      ...formData,
+                      id: (0, _strings.toId)(ev.target.value)
+                    });
+                    setFormState({
+                      ...formState,
+                      id: {
+                        ...formState.id,
+                        dirty: true
+                      }
+                    });
+                  },
+                  required: true,
+                  fullWidth: true
+                })
+              }), !formState.id.open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "outlined",
+                  onClick: () => {
+                    setFormState({
+                      ...formState,
+                      id: {
+                        ...formState.id,
+                        open: true
+                      }
+                    });
+                  },
+                  sx: {
+                    height: '100%'
+                  },
+                  children: t('editor.edit')
+                })
+              })]
+            })
+          }), templateList.includes(newConfig.id) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            xs: 12,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+              label: `A template with the id "${formData.id}" already exists. Overwrite existing template.`,
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                required: true
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          variant: "contained",
+          type: "submit",
+          loading: !configListQuery.data || isLoading,
+          disabled: !configListQuery.data,
+          sx: {
+            fontWeight: 500
+          },
+          children: t('editor.save')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "outlined",
+          disabled: isLoading,
+          sx: {
+            fontWeight: 500
+          },
+          onClick: ev => {
+            closeDialog(ev, 'backdropClick');
+          },
+          children: t('editor.cancel')
+        })]
+      })]
+    })
+  });
+};
+var _default = exports.default = SaveTemplateDialog;

package/layouts/MessageBus.d.ts

@@ -0,0 +1,13 @@
+import { EDITOR_DATA, EDITOR_READY } from '../constants';
+import { type FC } from 'react';
+type PostMessageParamsKeyType = typeof EDITOR_READY | typeof EDITOR_DATA;
+export type PostMessageParamsType = Partial<Record<PostMessageParamsKeyType, Record<string, any>>>;
+export type MessageEventDataType = {
+    onAction?(action: {
+        type: string;
+        payload: unknown;
+    }): void;
+    postMessageParams?: PostMessageParamsType;
+};
+declare const MessageBus: FC<MessageEventDataType>;
+export default MessageBus;

package/layouts/MessageBus.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../constants");
+var _store = require("../store");
+var _react = require("react");
+const MessageBus = props => {
+  const {
+    onAction,
+    postMessageParams
+  } = props;
+  const {
+    data,
+    setData: setEditorData,
+    allowedOrigins
+  } = (0, _store.useEditorStore)(state => state);
+  // Setup iframe communication between parent window, editor and preview iframe
+  (0, _react.useEffect)(() => {
+    if (!window.parent || allowedOrigins?.length === 0) {
+      return undefined;
+    }
+    const safeAllowedOrigins = [...allowedOrigins].map(origin => new URL(origin).origin);
+    window.parent.postMessage({
+      type: _constants.EDITOR_READY,
+      ...(postMessageParams?.[_constants.EDITOR_READY] || {})
+    }, '*');
+    const listener = event => {
+      if (!safeAllowedOrigins.includes(origin)) {
+        console.warn(`Received message from ${event.origin} but only messages from ${safeAllowedOrigins.join(', ')} are allowed.`);
+        return;
+      }
+      if (event.data && event.data.type) {
+        const {
+          type,
+          payload
+        } = event.data;
+        if (!type.startsWith('editor/')) {
+          return;
+        }
+        switch (type) {
+          case _constants.EDITOR_DATA:
+            setEditorData(payload);
+            break;
+          default:
+          // preview.dispatch({ type, payload });
+          // break;
+        }
+        onAction?.({
+          type,
+          payload
+        });
+      }
+    };
+    window.addEventListener('message', listener);
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, [allowedOrigins, onAction, postMessageParams, setEditorData]);
+
+  // Forward data change to preview iframe and to top window.
+  (0, _react.useEffect)(() => {
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage({
+        type: _constants.EDITOR_DATA,
+        payload: data,
+        ...(postMessageParams?.[_constants.EDITOR_DATA] || {})
+      }, '*');
+    }
+  }, [data, postMessageParams]);
+  return null;
+};
+MessageBus.displayName = 'MessageBus';
+var _default = exports.default = MessageBus;

package/layouts/Sidebar/AddBlockButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Block, BlockType } from '../../types';
+export interface AddBlockButtonProps {
+    data: Block[];
+    blockTypes: BlockType[];
+    onAddBlock(blockType: BlockType): void;
+    disabled?: boolean;
+    displayFormat: 'autocomplete' | 'select' | 'drawer';
+    label?: string;
+}
+declare const AddBlockButton: React.FunctionComponent<AddBlockButtonProps>;
+export default AddBlockButton;

package/layouts/Sidebar/AddBlockButton.js

@@ -0,0 +1,267 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent/DialogContent.js"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider/Divider.js"));
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer/Drawer.js"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid/Grid.js"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon/Icon.js"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _react = _interopRequireWildcard(require("react"));
+var _BlocksBar = require("../BlocksBar");
+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 testBlockTypeIsDisabled = (blockType, data) => {
+  const count = {};
+  data.forEach(b => {
+    if (!count[b.type]) {
+      count[b.type] = 1;
+    } else {
+      count[b.type] += 1;
+    }
+  });
+  const {
+    cardinality = -1
+  } = blockType;
+  const limitReached = cardinality > 0 ? count[blockType.id] >= cardinality : false;
+  return blockType.disabled || limitReached;
+};
+const AddBlockButton = props => {
+  const {
+    label = 'Add block',
+    data,
+    onAddBlock,
+    blockTypes,
+    disabled,
+    displayFormat
+  } = props;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [keyword, setKeyword] = (0, _react.useState)('');
+  const buttonRef = (0, _react.useRef)(null);
+  const autocompleteRef = (0, _react.useRef)(null);
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  const toggleDrawer = () => {
+    setOpen(!open);
+  };
+  const openDialog = () => {
+    setOpen(true);
+    if (buttonRef.current) {
+      buttonRef.current.blur();
+    }
+    setTimeout(() => {
+      if (!autocompleteRef.current) {
+        return;
+      }
+      const input = autocompleteRef.current.querySelector('input');
+      if (input) {
+        input.focus();
+      }
+    }, 100);
+  };
+  const openMenu = () => {
+    setOpen(true);
+  };
+  const noBlockTypeAvailable = blockTypes.length === 1 && testBlockTypeIsDisabled(blockTypes[0], data);
+  const getBlockTypes = () => {
+    if (keyword.length === 0) {
+      return blockTypes;
+    }
+    return blockTypes.filter(bt => bt.label.toLowerCase().includes(keyword.toLowerCase()));
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      ref: buttonRef,
+      type: "button",
+      size: "large",
+      color: "primary",
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {}),
+      onClick: () => {
+        if (blockTypes.length === 1) {
+          onAddBlock(blockTypes[0]);
+          return;
+        }
+        if (displayFormat === 'drawer') {
+          toggleDrawer();
+          return;
+        }
+        if (displayFormat === 'autocomplete') {
+          openDialog();
+          return;
+        }
+        openMenu();
+      },
+      disabled: disabled || noBlockTypeAvailable,
+      children: label
+    }), displayFormat === 'drawer' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Drawer.default, {
+      open: open,
+      anchor: "right",
+      onClose: toggleDrawer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          p: 2
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "search",
+          style: {
+            width: '100%',
+            border: '1px solid #ccc',
+            outline: 'none',
+            padding: 8,
+            borderRadius: 4
+          },
+          placeholder: "Type to search",
+          autoComplete: "off",
+          onChange: e => {
+            const {
+              value
+            } = e.target;
+            setKeyword(value);
+          },
+          value: keyword
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+          sx: {
+            mt: 2
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+        container: true,
+        rowGap: 2,
+        sx: {
+          p: 2,
+          width: 350
+        },
+        children: getBlockTypes().map((blockType, index) => {
+          const offsetLeft = index % 3 * 100;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+            item: true,
+            xs: 4,
+            onClick: () => {
+              onAddBlock(blockType);
+              toggleDrawer();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlocksBar.HtmlTooltip, {
+              placement: "left",
+              slotProps: {
+                popper: {
+                  modifiers: [{
+                    name: 'offset',
+                    options: {
+                      offset: [0, offsetLeft]
+                    }
+                  }]
+                }
+              },
+              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: '105/90',
+                  justifyContent: 'space-between',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  textAlign: 'center',
+                  padding: '10px 4px',
+                  gap: 1,
+                  cursor: 'pointer',
+                  '&:hover': {
+                    backgroundColor: '#f2f2f2'
+                  }
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                  style: {
+                    fontSize: 32
+                  },
+                  children: blockType.icon || 'drag_handle'
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
+                  children: blockType.label
+                })]
+              })
+            })
+          }, blockType.id);
+        })
+      })]
+    }), displayFormat === 'autocomplete' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      PaperProps: {
+        sx: {
+          alignSelf: 'self-start',
+          marginTop: 15
+        }
+      },
+      open: open,
+      onClose: closeDialog,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
+        sx: {
+          p: 2
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+          ref: autocompleteRef,
+          autoHighlight: true,
+          openOnFocus: true,
+          onChange: (e, blockType) => {
+            if (!blockType) {
+              return;
+            }
+            closeDialog();
+            onAddBlock(blockType);
+          },
+          getOptionDisabled: blockType => testBlockTypeIsDisabled(blockType, data),
+          renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            sx: {
+              width: 400
+            },
+            focused: true,
+            placeholder: "Type to search",
+            label: label,
+            value: keyword,
+            ...params
+          }),
+          options: blockTypes
+        })
+      })
+    }), displayFormat === 'select' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+      open: open,
+      anchorEl: buttonRef.current,
+      onClose: () => {
+        closeDialog();
+      },
+      children: blockTypes.map(blockType => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: () => {
+            closeDialog();
+            onAddBlock(blockType);
+          },
+          disabled: testBlockTypeIsDisabled(blockType, data),
+          style: {
+            gap: 10,
+            width: 250
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            children: blockType.icon || 'drag_handle'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: blockType.label
+          })]
+        }, blockType.id);
+      })
+    })]
+  });
+};
+var _default = exports.default = AddBlockButton;

package/layouts/Sidebar/BlockForm.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Block, BlockType } from '../../types';
+interface BlockFormInitialState {
+    showEditForm?: boolean;
+    showSettingsForm?: boolean;
+    showDeleteForm?: boolean;
+    moreAnchorEl?: HTMLElement;
+    activeTab?: number;
+}
+export interface BlockFormProps {
+    block: Block;
+    blockType: BlockType;
+    initialState?: BlockFormInitialState;
+    onChange(block: Block | ((prevBlock: Block) => Block)): void;
+    onClone(withData: boolean): void;
+    onDelete(): void;
+    isNested?: boolean;
+}
+declare const _default: React.NamedExoticComponent<BlockFormProps>;
+export default _default;