How to use the @webiny/app-page-builder/editor/redux.connect function in @webiny/app-page-builder

import { Icon } from "@webiny/ui/Icon";
import { ReactComponent as PreviewIcon } from "@webiny/app-page-builder/admin/assets/visibility.svg";

const PreviewPageButton = ({ page }: Object) => {
    const { getPagePreviewUrl } = usePageBuilderSettings();
    return (
        <menuitem> window.open(getPagePreviewUrl(page), "_blank")}&gt;
            
                } /&gt;
            
            Preview
        </menuitem>
    );
};

export default connect(
    state =&gt; ({ page: omit(getPage(state), ["content"]) }),
    null,
    null,
    { areStatePropsEqual: isEqual }
)(withRouter(PreviewPageButton));

{plugin.toolbar.preview({ theme })}
                                        
                                    
                                ,
                                plugin
                            );
                        })}
                
            
        );
    }
}

export default compose(
    connect(
        state => {
            const getParams = getActivePluginParams("pb-editor-toolbar-add-element");
            return {
                params: getParams ? getParams(state) : null
            };
        },
        { dragStart, dragEnd, deactivatePlugin, dropElement }
    ),
    withPageBuilder(),
    withHandlers({
        enableDragOverlay: () => () => {
            const el = document.querySelector(".pb-editor");
            if (el) {
                el.classList.add("pb-editor-dragging");
            }
        },

"webiny-pb-page-element-button__icon--" + position
                )}
            >
                {svg &amp;&amp; <span>}
                
            
        
    );
};

export default compose(
    connect(
        (state, props) =&gt; ({ element: getElement(state, props.elementId) }),
        { updateElement }
    ),
    withHandlers({
        onChange: ({ element, updateElement }) =&gt; (value: string) =&gt; {
            updateElement({ element: set(element, "data.text", value) });
        }
    })
)(ButtonContainer);
</span>

<input>
                                        
                                    
                                
                            
                        
                    
                )}
            
        );
    }
}

export default compose(
    connect(
        state =&gt; ({ element: getActiveElement(state) }),
        { updateElement }
    )
)(Settings);

{content}
                
            
        
    );
};

const stateToProps = state => ({
    rootElement: state.elements[getContent(state).id],
    layout: get(getPage(state), "settings.general.layout"),
    renderLayout: isPluginActive("pb-editor-toolbar-preview")(state)
});

export default compose(
    connect(stateToProps),
    withPageBuilder()
)(Content);

{plugin.render({ element })}
                        
                        {/*
                        <div>+</div>
                        <div>+</div>
                        */}
                    
                )}
            
        );
    }
);

export default compose(
    setDisplayName("Element"),
    connect(
        (state, props) =&gt; {
            return {
                ...getElementProps(state, props),
                element: getElement(state, props.id)
            };
        },
        { dragStart, dragEnd, activateElement, highlightElement },
        null,
        { areStatePropsEqual: isEqual }
    ),
    withProps(({ element }) =&gt; ({
        plugin: element
            ? getPlugins("pb-page-element").find(pl =&gt; pl.elementType === element.type)
            : null
    })),
    withHandlers({

bottom: 20,
    right: 20
});

const AddBlock = ({ togglePlugin }) => {
    return (
        
             togglePlugin({ name: "pb-editor-search-blocks-bar" })}
                icon={}
            />
        
    );
};

export default connect(
    null,
    { togglePlugin }
)(AddBlock);

imgStyle.height = isNumeric(height) ? parseInt(height) : height;
    }

    return (
        
            
        
    );
});

export default compose(
    connect(
        (state, { elementId }) => {
            const element = getElement(state, elementId);
            const { image = {}, settings = {} } = element.data;

            return {
                element: { id: element.id, type: element.type, path: element.path },
                image,
                horizontalAlign: settings.horizontalAlign || "center"
            };
        },
        { updateElement },
        null,
        { areStatePropsEqual: isEqual }
    ),
    withHandlers({
        onChange: ({ updateElement, element }) => async data => {

<input>
                                        
                                    
                                
                            
                        
                    
                )}
            
        );
    }
}

export default compose(
    connect(
        state =&gt; ({ element: getActiveElement(state) }),
        { updateElement }
    )
)(Settings);

const HorizontalAlignAction = ({ element, children, alignElement, align }: Object) => {
    const plugin = getPlugins("pb-page-element").find(
        pl => pl.elementType === element.type
    );

    if (!plugin) {
        return null;
    }

    return React.cloneElement(children, { onClick: alignElement, icon: icons[align] });
};

const defaultOptions = { alignments: ["left", "center", "right", "justify"] };

export default compose(
    connect(
        state => ({ element: getActiveElement(state) }),
        { updateElement }
    ),
    withProps(({ element }) => ({
        align: get(element, "data.settings.horizontalAlign") || "left"
    })),
    withHandlers({
        alignElement: ({
            updateElement,
            element,
            align,
            options: { alignments } = defaultOptions
        }) => {
            return () => {
                const types = Object.keys(icons).filter(key =>
                    alignments ? alignments.includes(key) : true