feat: pass provider prop to widget

gravity-ui · Jul 19, 2023 · b5a8c45 · b5a8c45
1 parent 3fb0dd0
commit b5a8c45
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 20 deletions.
diff --git a/src/editor/components/DevicePreview/DevicePreview.tsx b/src/editor/components/DevicePreview/DevicePreview.tsx
@@ -25,7 +25,7 @@ interface DevicePreviewMobileProps extends PropsWithChildren {
 }
 
 const DevicePreviewMobile = ({device, active}: DevicePreviewMobileProps) => {
-    const {data} = useContext(EditorContext);
+    const initialData = useContext(EditorContext);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const deviceIframeRef = useRef<DeviceIframe | null>(null);
 
@@ -34,7 +34,7 @@ const DevicePreviewMobile = ({device, active}: DevicePreviewMobileProps) => {
 
         if (containerRef?.current) {
             iframe = new DeviceIframe(containerRef?.current, {
-                initialData: data,
+                initialData,
                 className: b('frame', {device}),
             });
             deviceIframeRef.current = iframe;
@@ -54,10 +54,10 @@ const DevicePreviewMobile = ({device, active}: DevicePreviewMobileProps) => {
     }, [active]);
 
     useEffect(() => {
-        if (deviceIframeRef.current && data) {
-            deviceIframeRef.current.onDataUpdate(data);
+        if (deviceIframeRef.current && initialData) {
+            deviceIframeRef.current.onDataUpdate(initialData);
         }
-    }, [data]);
+    }, [initialData]);
 
     return <div className={b({active, device})} ref={containerRef} />;
 };

diff --git a/src/editor/containers/Editor/Editor.tsx b/src/editor/containers/Editor/Editor.tsx
@@ -14,7 +14,7 @@ import {EditorProps, ViewModeItem} from '../../types';
 import {addCustomDecorator, checkIsMobile, getBlockId} from '../../utils';
 import {Form} from '../Form/Form';
 
-export const Editor = ({children, customSchema, onChange, ...rest}: EditorProps) => {
+export const Editor = ({children, customSchema, onChange, providerProps, ...rest}: EditorProps) => {
     const {
         content,
         activeBlockIndex,
@@ -53,12 +53,16 @@ export const Editor = ({children, customSchema, onChange, ...rest}: EditorProps)
 
     const context = useMemo(
         () => ({
-            data: {
+            constructorProps: {
                 content,
                 custom: rest.custom,
             },
+            providerProps: {
+                ...providerProps,
+                isMobile: checkIsMobile(viewMode),
+            },
         }),
-        [content, rest.custom],
+        [content, providerProps, rest.custom, viewMode],
     );
 
     useEffect(() => {

diff --git a/src/editor/context.ts b/src/editor/context.ts
@@ -3,8 +3,8 @@ import React from 'react';
 import {PageConstructorProps, PageConstructorProviderProps} from '../containers/PageConstructor';
 
 export interface EditorContextType {
-    data?: PageConstructorProps;
-    provider?: PageConstructorProviderProps;
+    constructorProps?: PageConstructorProps;
+    providerProps?: PageConstructorProviderProps;
 }
 
 export const EditorContext = React.createContext<Partial<EditorContextType>>({});
diff --git a/src/editor/types/index.ts b/src/editor/types/index.ts
@@ -1,4 +1,4 @@
-import {PageConstructorProps} from '../../containers/PageConstructor';
+import {PageConstructorProps, PageConstructorProviderProps} from '../../containers/PageConstructor';
 import {BlockDecorationProps, PageContent} from '../../models';
 import {SchemaCustomConfig} from '../../schema';
 import {EditBlockActions} from '../components/EditBlock/EditBlock';
@@ -13,6 +13,7 @@ export interface EditorProps
     extends Required<Pick<PageConstructorProps, 'content'>>,
         Partial<Omit<PageConstructorProps, 'content'>> {
     children: (props: EditorOutgoingProps) => React.ReactNode;
+    providerProps?: PageConstructorProviderProps;
     onChange?: (data: PageContent) => void;
     customSchema?: SchemaCustomConfig;
 }

diff --git a/src/editor/widget/index.ts b/src/editor/widget/index.ts
@@ -2,19 +2,21 @@
 //@ts-ignore
 import bundle from 'widget';
 
-import {PageConstructorProps} from '../../containers/PageConstructor';
+import {EditorContextType} from '../context';
 
 import {DeviceFrameMessageType} from './constants';
 
 interface DeviceIframeParams {
-    initialData?: PageConstructorProps;
+    initialData?: EditorContextType;
     className?: string;
     parentCSS?: string;
 }
 
+type InitialData = EditorContextType;
+
 export class DeviceIframe {
     iframeElement?: HTMLIFrameElement;
-    private initialData?: PageConstructorProps;
+    private initialData?: InitialData;
 
     constructor(parentElement: HTMLDivElement, {className = '', initialData}: DeviceIframeParams) {
         const iframe = document.createElement('iframe');
@@ -37,7 +39,7 @@ export class DeviceIframe {
         }
     }
 
-    onDataUpdate(data: PageConstructorProps) {
+    onDataUpdate(data: InitialData) {
         this.iframeElement?.contentWindow?.postMessage(
             {
                 type: DeviceFrameMessageType.Update,

diff --git a/src/widget/index.tsx b/src/widget/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 
-import {PageConstructor} from '../containers/PageConstructor';
+import {PageConstructor, PageConstructorProvider} from '../containers/PageConstructor';
 import {DeviceFrameMessageType} from '../editor/widget/constants';
 
 import './styles.scss';
@@ -12,10 +12,17 @@ if (window.self !== window.top && window.__isEditorDeviceFrame) {
     document.body.appendChild(root);
 
     window.addEventListener('message', function (event) {
-        const {type, data} = event.data;
-
-        if (type === DeviceFrameMessageType.Update) {
-            ReactDOM.render(<PageConstructor {...data} />, root);
+        if (event.data?.type === DeviceFrameMessageType.Update) {
+            const {
+                data: {constructorProps, providerProps},
+            } = event.data;
+
+            ReactDOM.render(
+                <PageConstructorProvider {...providerProps}>
+                    <PageConstructor {...constructorProps} />
+                </PageConstructorProvider>,
+                root,
+            );
         }
     });