How to use the @webiny/app-page-builder/editor/components.withKeyHandler function in @webiny/app-page-builder

)}
                
            
        );
    }
}

export default compose(
    connect(
        state => ({
            open: isPluginActive("pb-page-element-settings-advanced")(state)
        }),
        { updateElement, deactivatePlugin }
    ),
    withActiveElement({ shallow: true }),
    withKeyHandler(),
    withHandlers({
        closeDialog: ({ deactivatePlugin }) => () => {
            deactivatePlugin({ name: "pb-page-element-settings-advanced" });
        }
    }),
    withHandlers({
        onSubmit: ({ element, updateElement, closeDialog }) => (formData: Object) => {
            // Get element settings plugins
            const plugins = getPlugins("pb-page-element-advanced-settings").filter(
                pl => pl.elementType === element.type
            );
            formData = plugins.reduce((formData, pl) => {
                if (pl.onSave) {
                    return pl.onSave(formData);
                }
                return formData;

)}
                    
                
            
        
    );
};

export default compose(
    connect(
        state => ({ page: omit(getPage(state), ["content"]) }),
        { deactivatePlugin, updateRevision }
    ),
    withSnackbar(),
    withKeyHandler(),
    withState("active", "setActive", "pb-editor-page-settings-general"),
    withHandlers({
        savePage: ({ showSnackbar, updateRevision }) => (page: Object) =>
            updateRevision(page, {
                onFinish: () => showSnackbar("Settings saved")
            })
    }),
    lifecycle({
        componentDidMount() {
            this.props.addKeyHandler("escape", e => {
                e.preventDefault();
                this.props.deactivatePlugin({ name: "pb-editor-page-settings-bar" });
            });
        },
        componentWillUnmount() {
            this.props.removeKeyHandler("escape");

connect(
        state => {
            const ui: Object = getUi(state);

            return {
                slateFocused: ui.slateFocused,
                isDragging: ui.dragging,
                isResizing: ui.resizing
            };
        },
        {
            undo: ActionCreators.undo,
            redo: ActionCreators.redo
        }
    ),
    withKeyHandler(),
    lifecycle({
        componentDidMount() {
            const { addKeyHandler, undo, redo } = this.props;
            addKeyHandler("mod+z", e => {
                if (!this.props.slateFocused) {
                    e.preventDefault();
                    undo();
                }
            });
            addKeyHandler("mod+shift+z", e => {
                if (!this.props.slateFocused) {
                    e.preventDefault();
                    redo();
                }
            });
        },

position: "fixed",
        top: 64,
        width: "490px !important",
        maxWidth: "490px !important",
        ".mdc-drawer__content": {
            width: "100%"
        }
    }
});

const drawerKeyHandler = compose(
    connect(
        null,
        { deactivatePlugin }
    ),
    withKeyHandler(),
    lifecycle({
        componentDidUpdate({ active, name }) {
            if (!active && this.props.active) {
                this.props.addKeyHandler("escape", e => {
                    e.preventDefault();
                    this.props.deactivatePlugin({ name });
                });
            }

            if (active && !this.props.active) {
                this.props.removeKeyHandler("escape");
            }
        }
    })
);

);
    }
}

export default compose(
    connect(
        state => ({
            showOnboarding: isPluginActive("pb-editor-toolbar-onboarding")(state)
        }),
        { deactivatePlugin }
    ),
    withKeyHandler(),
    withHandlers({
        closeDialog: ({ deactivatePlugin }) => () => {
            deactivatePlugin({ name: "pb-editor-toolbar-onboarding" });
        }
    }),
    lifecycle({
        componentDidUpdate() {
            const { showOnboarding, addKeyHandler, removeKeyHandler, closeDialog } = this.props;
            showOnboarding ? addKeyHandler("escape", closeDialog) : removeKeyHandler("escape");
        }
    })
)(Onboarding);