@it-consultis/page-builder 1.1.34 → 1.1.36

package/EditorIframe.d.ts

@@ -0,0 +1,23 @@
+import React, { AllHTMLAttributes } from 'react';
+import { Block } from './types';
+export declare const EDITOR_READY = "editor/editorReady";
+export declare const EDITOR_DATA = "editor/editorData";
+export declare const EDITOR_BLOCK_UPDATE = "editor/blockUpdate";
+export declare const EDITOR_BLOCK_DELETE = "editor/blockDelete";
+export declare const EDITOR_BLOCK_ADD = "editor/blockAdd";
+export type EditorInstance = {
+    element: HTMLIFrameElement | null;
+    setData(data: Block[]): void;
+    dispatch(action: {
+        type: string;
+        payload: any;
+    }): void;
+};
+type Props = Omit<AllHTMLAttributes<HTMLIFrameElement>, 'onLoad' | 'src' | 'className'> & {
+    src: string;
+    className?: string;
+    onLoad(editor: EditorInstance): void;
+    onChange(data: Block[]): void;
+};
+declare const EditorIframe: React.FC<Props>;
+export default EditorIframe;

package/EditorIframe.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EDITOR_READY = exports.EDITOR_DATA = exports.EDITOR_BLOCK_UPDATE = exports.EDITOR_BLOCK_DELETE = exports.EDITOR_BLOCK_ADD = void 0;
+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; }
+const EDITOR_READY = exports.EDITOR_READY = 'editor/editorReady';
+const EDITOR_DATA = exports.EDITOR_DATA = 'editor/editorData';
+const EDITOR_BLOCK_UPDATE = exports.EDITOR_BLOCK_UPDATE = 'editor/blockUpdate';
+const EDITOR_BLOCK_DELETE = exports.EDITOR_BLOCK_DELETE = 'editor/blockDelete';
+const EDITOR_BLOCK_ADD = exports.EDITOR_BLOCK_ADD = 'editor/blockAdd';
+const EditorIframe = props => {
+  const {
+    src,
+    onLoad,
+    className,
+    onChange,
+    ...otherProps
+  } = props;
+  const editorUrl = (0, _react.useMemo)(() => {
+    return new URL(src);
+  }, [src]);
+  const [editorIframeEl, setEditorIframeEl] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!editorIframeEl) {
+      return undefined;
+    }
+    const iframeWindow = editorIframeEl.contentWindow;
+    if (!iframeWindow) {
+      return undefined;
+    }
+    const dispatch = action => {
+      iframeWindow.postMessage({
+        ...action,
+        type: action.type.startsWith('editor/') ? action.type : `editor/${action.type}`
+      }, editorUrl.origin);
+    };
+    const sendData = data => {
+      dispatch({
+        type: EDITOR_DATA,
+        payload: data
+      });
+    };
+    const listener = event => {
+      if (event.origin !== editorUrl.origin) {
+        return;
+      }
+      const {
+        type,
+        payload
+      } = event.data;
+      switch (type) {
+        case EDITOR_READY:
+          onLoad({
+            element: editorIframeEl,
+            setData(data) {
+              sendData(data);
+            },
+            dispatch
+          });
+          break;
+        case EDITOR_DATA:
+          onChange(payload);
+          break;
+        default:
+          // Ignore unsupported events.
+          break;
+      }
+    };
+    window.addEventListener('message', listener);
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, [editorIframeEl, onLoad, editorUrl, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+    ...otherProps,
+    className: className,
+    ref: node => {
+      if (!node || !node.contentDocument) {
+        return;
+      }
+      if (node.contentDocument.readyState === 'complete') {
+        setEditorIframeEl(node);
+      } else {
+        node.addEventListener('load', () => setEditorIframeEl(node));
+      }
+    },
+    src: src
+  });
+};
+var _default = exports.default = EditorIframe;

package/layouts/EditorPreview/index.js

@@ -243,7 +243,9 @@ const EditorPreview = props => {
       p: 2,
       display: 'flex',
       justifyContent: 'center',
-      alignItems: 'center',
+      paddingTop: '5vh',
+      // It'll looks like cut off top area when high not enough
+      // alignItems: 'center',
       bgcolor: 'background.paper'
     },
     onDrop: handleDrop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@it-consultis/page-builder",
-  "version": "1.1.34",
+  "version": "1.1.36",
   "license": "MIT",
   "author": "itc",
   "scripts": {