@it-consultis/page-builder 1.1.34

package/Editor.d.ts

@@ -0,0 +1,77 @@
+import { type MessageEventDataType, type PostMessageParamsType } from './layouts/MessageBus';
+import { AddBlockButtonProps } from './layouts/Sidebar/AddBlockButton';
+import { EditorState } from './store';
+import { LocaleType } from './translation';
+import { Block, BlockType } from './types';
+import { Theme } from '@mui/material/styles';
+import React, { type FC } from 'react';
+declare module '@mui/material/useMediaQuery' {
+    interface Options {
+        defaultMatches?: boolean;
+        noSsr?: boolean;
+        ssrMatchMedia?: (query: string) => {
+            matches: boolean;
+        };
+        matchMedia?: typeof window.matchMedia;
+    }
+}
+export type DeviceType = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type EditorBaseProps = {
+    data?: Block[];
+    blockTypes: BlockType[];
+    onChange?(data: Block[]): void;
+    onInit?(data: Block[]): void;
+    title?: string;
+    cardinality?: number;
+    addBlockDisplayFormat?: AddBlockButtonProps['displayFormat'];
+    storage: EditorState['storage'];
+    mpQueries?: {
+        key: string;
+        value: string;
+    };
+    platinum?: boolean;
+    platinumQueries?: {
+        key: string;
+        value: string;
+    };
+    mp?: boolean;
+    previewDeviceList: DeviceType[];
+    theme?: Theme | null;
+    headerSlots?: Partial<{
+        left: FC;
+        middle: FC;
+        right: FC;
+    }>;
+    storageKey?: string;
+    postMessageParams?: PostMessageParamsType;
+    messageBus?: FC<MessageEventDataType>;
+    locale?: LocaleType;
+};
+type ValidPreviewWidth<T> = T extends DeviceType[] ? T extends readonly [] ? DeviceType : T[number] : DeviceType;
+type FullEditorProps<T extends DeviceType[] = DeviceType[]> = Omit<EditorBaseProps, 'previewDeviceList'> & {
+    format: 'full';
+    editorTheme?: Theme;
+    isFullScreen?: boolean;
+    onFullScreen?(): void;
+    onFullScreenExit?(): void;
+    onPreviewIframeLoad?(iframe: HTMLIFrameElement): void;
+    previewWrapperComponent?: React.ElementType;
+    previewSrc?: string;
+    previewDeviceList: T;
+    previewWidth?: ValidPreviewWidth<T>;
+    onAction?(action: {
+        type: string;
+        payload: any;
+    }): void;
+    allowedOrigins?: string[];
+};
+type EditorOnlyProps = EditorBaseProps & {
+    format: 'sidebar';
+    onBack?(): void;
+};
+type InlineEditorProps = EditorBaseProps & {
+    format: 'inline';
+};
+export type EditorProps<T extends DeviceType[] = DeviceType[]> = FullEditorProps<T> | EditorOnlyProps | InlineEditorProps;
+declare const Editor: <T extends DeviceType[] = DeviceType[]>(props: EditorProps<T>) => React.ReactElement | null;
+export default Editor;

package/Editor.js

@@ -0,0 +1,312 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("./constants");
+var _BlocksBar = _interopRequireDefault(require("./layouts/BlocksBar"));
+var _EditorPreview = _interopRequireDefault(require("./layouts/EditorPreview"));
+var _Header = _interopRequireDefault(require("./layouts/Header"));
+var _MessageBus = _interopRequireDefault(require("./layouts/MessageBus"));
+var _Sidebar = _interopRequireDefault(require("./layouts/Sidebar"));
+var _Snackbar = _interopRequireDefault(require("./layouts/Snackbar"));
+var _Provider = _interopRequireDefault(require("./store/Provider"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _block = require("./utils/block");
+var _styles = require("@mui/material/styles");
+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 PREFIX = 'Editor';
+const DEFAULT_BAR_WIDTH = 365;
+const classes = {
+  root: `${PREFIX}-root`,
+  main: `${PREFIX}-main`,
+  sidebarWrapper: `${PREFIX}-sidebarWrapper`,
+  dragBarLeft: `${PREFIX}-dragBar-left`,
+  dragBarRight: `${PREFIX}-dragBar-right`
+};
+const Root = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  '*:not(#editor-preview, #editor-preview *)': {
+    fontSize: theme.typography.fontSize
+  },
+  width: '100%',
+  height: '100%',
+  overflow: 'none',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'row',
+  [`& .${classes.main}`]: {
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'auto',
+    flexGrow: 1,
+    zIndex: 0
+  },
+  [`& .${classes.sidebarWrapper}`]: {
+    top: 0,
+    zIndex: 2,
+    position: 'relative',
+    maxWidth: DEFAULT_BAR_WIDTH,
+    width: '100%',
+    height: '100%',
+    minHeight: '97px',
+    maxHeight: '100vh',
+    // overflowY: 'scroll'
+    overflowX: 'hidden'
+  },
+  [`& .${classes.dragBarLeft}, & .${classes.dragBarRight}`]: {
+    width: 0,
+    height: '100%',
+    top: 0,
+    left: 0,
+    position: 'relative',
+    userSelect: 'none',
+    zIndex: 10,
+    cursor: 'col-resize',
+    '&::before': {
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      width: 10,
+      height: '100%',
+      zIndex: 10
+    }
+  },
+  [`& .${classes.dragBarLeft}::before`]: {
+    right: -5
+  },
+  [`& .${classes.dragBarRight}::before`]: {
+    left: -5
+  }
+}));
+const Editor = props => {
+  const {
+    data,
+    onChange,
+    onInit,
+    blockTypes = [],
+    cardinality = -1,
+    title,
+    addBlockDisplayFormat = 'select',
+    storage,
+    mp = false,
+    mpQueries,
+    platinum = false,
+    platinumQueries,
+    previewDeviceList,
+    storageKey = 'dev:blocks',
+    postMessageParams,
+    messageBus: MessageBusComponent = _MessageBus.default,
+    locale = 'en' // 默认语言为英文
+  } = props;
+  const blocksBarVisibleRef = (0, _react.useRef)(true);
+  const sidebarVisibleRef = (0, _react.useRef)(true);
+  const [mpNavigationProps, setMpNavigationProps] = (0, _react.useState)(null);
+  const mainRef = (0, _react.useRef)(null);
+  const [initialed, setInitialed] = (0, _react.useState)(false);
+  const mergedSidebarProps = (0, _react.useMemo)(() => ({
+    title: title || 'Blocks',
+    cardinality,
+    addBlockDisplayFormat,
+    onChange
+  }), [addBlockDisplayFormat, cardinality, onChange, title]);
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const mpQueryString = {
+    key: mpQueries?.key || _constants.MP_QUERY_KEY,
+    value: mpQueries?.value || _constants.MP_QUERY_VALUE
+  };
+  const platinumQueryString = {
+    key: platinumQueries?.key || _constants.PLATINUM_QUERY_KEY,
+    value: platinumQueries?.value || _constants.PLATINUM_QUERY_VALUE
+  };
+  const includingMp = mp || urlSearchParams.get(mpQueryString.key) === mpQueryString.value;
+  const isPlatinum = platinum || urlSearchParams.get(platinumQueryString.key) === platinumQueryString.value;
+  const initialData = (0, _react.useMemo)(() => {
+    if (!includingMp) {
+      const hasMpNav = data?.some(block => (0, _block.blockFilteredMPNav)(block, true));
+      if (hasMpNav) window.localStorage.removeItem(storageKey);
+      return hasMpNav ? [] : data;
+    }
+    if (data?.length) return data;
+    return mpNavigationProps ? [(0, _block.createBlock)(mpNavigationProps)] : [];
+  }, [data, includingMp, mpNavigationProps, storageKey]);
+
+  // Initialize editor state
+  (0, _react.useEffect)(() => {
+    if (data?.length && !initialed) {
+      onInit?.(data);
+      setInitialed(true);
+    }
+    const root = document.documentElement;
+    root.style.setProperty('--editor-sidebar-width', `${DEFAULT_BAR_WIDTH}px`);
+    root.style.setProperty('--editor-blocksbar-width', `${DEFAULT_BAR_WIDTH}px`);
+  }, [data, initialed, onInit]);
+  (0, _react.useEffect)(() => {
+    if (!includingMp) return;
+    blockTypes?.forEach(block => {
+      if ((0, _block.blockFilteredMPNav)(block, true, 'id')) {
+        setMpNavigationProps(block);
+      }
+    });
+  }, [blockTypes, includingMp, setMpNavigationProps]);
+  if (props.format === 'inline') {
+    return null;
+  }
+  if (props.format === 'sidebar') {
+    const {
+      onBack
+    } = props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Provider.default, {
+      locale: locale,
+      editorTheme: _theme.default,
+      blockTypes: blockTypes,
+      isFullScreen: false,
+      data: initialData,
+      storage: storage,
+      includingMp: includingMp,
+      isNested: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.default, {
+        onBack: onBack,
+        ...mergedSidebarProps
+      })
+    });
+  }
+  const handleDragSidebar = (e, position) => {
+    const dragBarEl = e.target;
+    const stopDrag = () => {
+      requestAnimationFrame(() => {
+        dragBarEl.style.width = '0px';
+        dragBarEl.style.position = 'relative';
+      });
+      dragBarEl.removeEventListener('mouseleave', stopDrag);
+      dragBarEl.removeEventListener('mouseup', stopDrag);
+      dragBarEl.removeEventListener('mousemove', handleMove);
+    };
+    let animationId = 0;
+    const handleMove = mouseMoveEvent => {
+      const root = document.documentElement;
+      window.cancelAnimationFrame(animationId);
+      animationId = window.requestAnimationFrame(() => {
+        let barWidth = position === 'right' ? window.innerWidth - mouseMoveEvent.clientX : window.innerWidth - (window.innerWidth - mouseMoveEvent.clientX);
+        const sidebarMaxWidth = Math.floor(window.innerWidth * 0.4);
+        if (barWidth < 60) {
+          barWidth = 40;
+        }
+        if (barWidth > sidebarMaxWidth) {
+          barWidth = sidebarMaxWidth;
+        }
+        if (position === 'right') {
+          root.style.setProperty('--editor-sidebar-width', `${barWidth}px`);
+        }
+        if (position === 'left') {
+          root.style.setProperty('--editor-blocksbar-width', `${barWidth}px`);
+        }
+      });
+    };
+    dragBarEl.style.width = '100vw';
+    dragBarEl.style.position = 'fixed';
+    dragBarEl.addEventListener('mouseleave', stopDrag);
+    dragBarEl.addEventListener('mouseup', stopDrag);
+    dragBarEl.addEventListener('mousemove', handleMove);
+  };
+  const toggleBlocksBar = () => {
+    blocksBarVisibleRef.current = !blocksBarVisibleRef.current;
+    const root = document.documentElement;
+    root.style.setProperty('--editor-blocksbar-width', blocksBarVisibleRef.current ? `${DEFAULT_BAR_WIDTH}px` : '0px');
+  };
+  const toggleSidebar = () => {
+    sidebarVisibleRef.current = !sidebarVisibleRef.current;
+    const root = document.documentElement;
+    root.style.setProperty('--editor-sidebar-width', sidebarVisibleRef.current ? `${DEFAULT_BAR_WIDTH}px` : '0px');
+  };
+  const {
+    editorTheme = _theme.default,
+    onFullScreen,
+    onFullScreenExit,
+    isFullScreen,
+    previewSrc,
+    allowedOrigins = [],
+    onAction,
+    previewWidth,
+    headerSlots
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Provider.default, {
+    locale: locale,
+    editorTheme: editorTheme,
+    theme: editorTheme,
+    allowedOrigins: allowedOrigins,
+    blockTypes: blockTypes,
+    data: initialData,
+    isFullScreen: isFullScreen,
+    includingMp: includingMp,
+    isMp: includingMp,
+    previewSrc: previewSrc,
+    previewWidth: previewWidth,
+    previewDeviceList: previewDeviceList,
+    storage: storage,
+    mpNavigationProps: mpNavigationProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MessageBusComponent, {
+      onAction: onAction,
+      postMessageParams: postMessageParams
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: mainRef,
+        className: classes.main,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+          platinum: isPlatinum,
+          onExitFullScreen: onFullScreenExit,
+          onFullScreen: onFullScreen,
+          onToggleBlocksBar: toggleBlocksBar,
+          isBlocksBarVisible: blocksBarVisibleRef.current,
+          onToggleSidebar: toggleSidebar,
+          isSidebarVisible: sidebarVisibleRef.current,
+          onChange: onChange,
+          headerSlots: headerSlots
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: 'flex',
+            height: '100%',
+            overflow: 'hidden'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.sidebarWrapper,
+            style: {
+              maxWidth: 'var(--editor-blocksbar-width)',
+              transition: 'all 0.3s ease-in-out'
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlocksBar.default, {
+              onChange: onChange
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.dragBarLeft,
+            onMouseDown: e => handleDragSidebar(e, 'left'),
+            role: "presentation"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditorPreview.default, {
+            onChange: onChange
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.dragBarRight,
+            onMouseDown: e => handleDragSidebar(e, 'right'),
+            role: "presentation"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.sidebarWrapper,
+            style: {
+              maxWidth: 'var(--editor-sidebar-width)',
+              transition: 'all 0.3s ease-in-out'
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.default, {
+              ...mergedSidebarProps
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Snackbar.default, {})]
+    })]
+  });
+};
+var _default = exports.default = Editor;