diff --git a/client/components/LockContainer/index.tsx b/client/components/LockContainer/index.tsx
index 21c96c3a0..98eae98ac 100644
--- a/client/components/LockContainer/index.tsx
+++ b/client/components/LockContainer/index.tsx
@@ -1,15 +1,26 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {get} from 'lodash';
 import classNames from 'classnames';
-
-import {UserAvatarWithMargin} from '../../components/UserAvatar';
+import {UserAvatar} from '../../components/UserAvatar';
 import {LockContainerPopup} from './LockContainerPopup';
 
 import './style.scss';
 
-export class LockContainer extends React.Component {
-    constructor(props) {
+interface LockContainerProps {
+    lockedUser: any;
+    users: any[] | any;
+    displayText?: string;
+    showUnlock?: boolean;
+    onUnlock?: () => void;
+    noMargin?: boolean;
+}
+
+interface LockContainerState {
+    openUnlockPopup: boolean;
+}
+
+export class LockContainer extends React.Component<LockContainerProps, LockContainerState> {
+    constructor(props: LockContainerProps) {
         super(props);
         this.state = {openUnlockPopup: false};
         this.toggleOpenUnlockPopup = this.toggleOpenUnlockPopup.bind(this);
@@ -24,10 +35,8 @@ export class LockContainer extends React.Component {
             lockedUser,
             users,
             displayText,
-            showUnlock,
-            withLoggedInfo,
+            showUnlock = true,
             onUnlock,
-            small,
             noMargin,
         } = this.props;
 
@@ -49,7 +58,7 @@ export class LockContainer extends React.Component {
                     )}
                 >
                     <a onClick={this.toggleOpenUnlockPopup}>
-                        <UserAvatarWithMargin user={user} />
+                        <UserAvatar user={user} />
                     </a>
                 </div>
                 {this.state.openUnlockPopup && (
@@ -66,23 +75,3 @@ export class LockContainer extends React.Component {
         );
     }
 }
-
-LockContainer.propTypes = {
-    lockedUser: PropTypes.object,
-    users: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.object,
-    ]),
-    displayText: PropTypes.string,
-    showUnlock: PropTypes.bool,
-    withLoggedInfo: PropTypes.bool,
-    onUnlock: PropTypes.func,
-    small: PropTypes.bool,
-    noMargin: PropTypes.bool,
-};
-
-LockContainer.defaultProps = {
-    showUnlock: true,
-    withLoggedInfo: true,
-    small: true,
-};
diff --git a/client/components/Main/ItemEditor/Editor.tsx b/client/components/Main/ItemEditor/Editor.tsx
index 22ac128d9..d9316e97f 100644
--- a/client/components/Main/ItemEditor/Editor.tsx
+++ b/client/components/Main/ItemEditor/Editor.tsx
@@ -19,6 +19,7 @@ import {ItemManager} from './ItemManager';
 import {AutoSave} from './AutoSave';
 import {EditorHeader} from './EditorHeader';
 import {pickRelatedEventsForPlanning} from './../../../utils/planning';
+import {embeddedPlanningHasUnsavedChanges} from '../../../components/editor-standalone/save-handling';
 
 export class EditorComponent extends React.Component<IEditorProps, IEditorState> {
     autoSave: AutoSave;
@@ -58,7 +59,8 @@ export class EditorComponent extends React.Component<IEditorProps, IEditorState>
                 tabProps: {
                     forEditor: !this.props.inModalView,
                     forEditorModal: this.props.inModalView,
-                }},
+                }
+            },
         ];
 
         if (this.props.addNewsItemToPlanning) {
@@ -195,68 +197,54 @@ export class EditorComponent extends React.Component<IEditorProps, IEditorState>
             return;
         }
 
-        this.autoSave.flushAutosave()
-            .then(() => {
-                const {
-                    openCancelModal,
-                    itemId,
-                    itemType,
-                    addNewsItemToPlanning,
-                } = this.props;
-                const {dirty, errorMessages, initialValues} = this.state;
-
-                this.setState({submitting: true});
+        this.autoSave.flushAutosave().then(() => {
+            const {openCancelModal, itemId, itemType, addNewsItemToPlanning} = this.props;
+            const {dirty, errorMessages, initialValues} = this.state;
+            const updateStates = !addNewsItemToPlanning;
 
-                const updateStates = !addNewsItemToPlanning;
+            this.setState({submitting: true});
 
-                if (!dirty) {
-                    this.onCancel();
-                } else {
-                    const hasErrors = !isEqual(errorMessages, []);
-                    const isKilled = isItemKilled(initialValues);
+            if (!(dirty || embeddedPlanningHasUnsavedChanges())) {
+                this.onCancel();
+                return;
+            }
 
-                    const onCancel = () => {
-                        if (updateStates) {
-                            this.setState({submitting: false});
-                        }
-                    };
-
-                    const onIgnore = () => {
-                        this.itemManager.unlockAndCancel();
-                    };
-
-                    const onSave = (isKilled || hasErrors) ? null :
-                        (withConfirmation, updateMethod, planningUpdateMethods) => (
-                            this.itemManager.save(
-                                withConfirmation,
-                                {name: updateMethod, value: updateMethod},
-                                true,
-                                updateStates,
-                                planningUpdateMethods
-                            )
-                        );
-
-                    const onSaveAndPost = (!isKilled || hasErrors) ? null :
-                        (withConfirmation, updateMethod, planningUpdateMethods) => (
-                            this.itemManager.saveAndPost(
-                                withConfirmation,
-                                updateMethod,
-                                true,
-                                updateStates,
-                                planningUpdateMethods
-                            )
-                        );
-
-                    openCancelModal({
-                        itemId: itemId,
-                        itemType: itemType,
-                        onCancel: onCancel,
-                        onIgnore: onIgnore,
-                        onSave: onSave,
-                        onSaveAndPost: onSaveAndPost,
-                    });
-                }
+            const hasErrors = !isEqual(errorMessages, []);
+            const isKilled = isItemKilled(initialValues);
+            const onSave = (isKilled || hasErrors) ? null : (withConfirmation, updateMethod) => (
+                this.itemManager.save(
+                    withConfirmation,
+                    {name: updateMethod, value: updateMethod},
+                    true,
+                    updateStates,
+                )
+            );
+            const onSaveAndPost = (!isKilled || hasErrors) ? null : (withConfirmation, updateMethod) => (
+                this.itemManager.saveAndPost(
+                    withConfirmation,
+                    updateMethod,
+                    true,
+                    updateStates,
+                )
+            );
+
+            openCancelModal({
+                itemId: itemId,
+                itemType: itemType,
+                onCancel: () => {
+                    if (updateStates) {
+                        this.setState({submitting: false});
+                    }
+                },
+                onIgnore: () => {
+                    this.itemManager.unlockAndCancel(
+                        embeddedPlanningHasUnsavedChanges() ? 'HANDLE_UNSAVED_CHANGES' : 'DISCARD',
+                    );
+                },
+                onSave: onSave,
+                onSaveAndPost: onSaveAndPost,
             });
+        });
     }
 
     onCancel(updateStates = true) {
@@ -276,7 +264,9 @@ export class EditorComponent extends React.Component<IEditorProps, IEditorState>
             this.props.onCancel();
         }
 
-        return this.itemManager.unlockAndCancel();
+        return this.itemManager.unlockAndCancel(
+            embeddedPlanningHasUnsavedChanges() ? 'HANDLE_UNSAVED_CHANGES' : 'DISCARD',
+        );
     }
 
     setActiveTab(tab) {
diff --git a/client/components/Main/ItemEditor/EditorHeader.tsx b/client/components/Main/ItemEditor/EditorHeader.tsx
index 8a4170759..5b43fe7f9 100644
--- a/client/components/Main/ItemEditor/EditorHeader.tsx
+++ b/client/components/Main/ItemEditor/EditorHeader.tsx
@@ -22,14 +22,15 @@ import {StretchBar} from '../../UI/SubNav';
 import {LockContainer, ItemIcon} from '../../index';
 import {EditorItemActions} from './index';
 import {ButtonGroup} from 'superdesk-ui-framework';
-import {IEditorProps, IEditorState, ILockedItems, IPrivileges, ISession} from 'interfaces';
+import {IEditorProps, IEditorState, IEventOrPlanningItem, ILockedItems, IPrivileges, ISession} from 'interfaces';
 import {IUser} from 'superdesk-api';
 import {ItemManager} from './ItemManager';
 import {AutoSave} from './AutoSave';
+import {IUIButtonProps} from 'components/UI/Button';
 
 interface IProps {
-    diff: IEditorState['diff'];
-    initialValues: IEditorState['initialValues'];
+    diff: IEventOrPlanningItem;
+    initialValues: IEventOrPlanningItem;
     cancel(): void;
     minimize(): void;
     submitting: boolean;
@@ -124,17 +125,19 @@ export class EditorHeader extends React.Component<IProps> {
 
         states.showEdit = states.existingItem &&
             !states.isLockedInContext &&
-            eventUtils.canEditEvent(initialValues, session, privileges, lockedItems);
+            eventUtils.canEditEvent(initialValues as IEventItem, session, privileges, lockedItems);
 
         if (states.readOnly) {
             return;
         }
 
         if (states.isLockedInContext && get(states.itemLock, 'action') === 'edit') {
-            states.canPost = eventUtils.canPostEvent(initialValues, session, privileges, lockedItems);
-            states.canUnpost = eventUtils.canUnpostEvent(initialValues, session, privileges, lockedItems);
-            states.canUpdate = eventUtils.canUpdateEvent(initialValues, session, privileges, lockedItems);
-            states.canEdit = eventUtils.canEditEvent(initialValues, session, privileges, lockedItems);
+            const initialVal = initialValues as IEventItem;
+
+            states.canPost = eventUtils.canPostEvent(initialVal, session, privileges, lockedItems);
+            states.canUnpost = eventUtils.canUnpostEvent(initialVal, session, privileges, lockedItems);
+            states.canUpdate = eventUtils.canUpdateEvent(initialVal, session, privileges, lockedItems);
+            states.canEdit = eventUtils.canEditEvent(initialVal, session, privileges, lockedItems);
         }
     }
 
@@ -153,9 +156,12 @@ export class EditorHeader extends React.Component<IProps> {
             return;
         }
 
+        const initialVals = initialValues as IPlanningItem;
+        const diffCasted = diff as IPlanningItem;
+
         states.showEdit = states.existingItem &&
             !states.isLockedInContext &&
-            planningUtils.canEditPlanning(initialValues, null, session, privileges, lockedItems) &&
+            planningUtils.canEditPlanning(initialVals, null, session, privileges, lockedItems) &&
             !addNewsItemToPlanning;
 
         if (states.readOnly) {
@@ -165,27 +171,51 @@ export class EditorHeader extends React.Component<IProps> {
         if (states.isLockedInContext) {
             switch (get(states, 'itemLock.action')) {
             case 'edit':
-                states.canPost = planningUtils.canPostPlanning(diff,
-                    associatedEvents, session, privileges, lockedItems);
-                states.canUnpost = planningUtils.canUnpostPlanning(initialValues,
-                    session, privileges, lockedItems);
-                states.canUpdate = planningUtils.canUpdatePlanning(initialValues,
-                    associatedEvents, session, privileges, lockedItems);
-                states.canEdit = planningUtils.canEditPlanning(initialValues,
-                    associatedEvents, session, privileges, lockedItems);
+                states.canPost = planningUtils.canPostPlanning(
+                    diffCasted,
+                    associatedEvents,
+                    session,
+                    privileges,
+                    lockedItems,
+                );
+                states.canUnpost = planningUtils.canUnpostPlanning(
+                    initialVals,
+                    session,
+                    privileges,
+                    lockedItems,
+                );
+                states.canUpdate = planningUtils.canUpdatePlanning(
+                    initialVals,
+                    associatedEvents,
+                    session,
+                    privileges,
+                    lockedItems,
+                );
+                states.canEdit = planningUtils.canEditPlanning(
+                    initialVals,
+                    associatedEvents,
+                    session,
+                    privileges,
+                    lockedItems,
+                );
                 break;
             case 'add_to_planning':
                 states.canPost = planningUtils.canPostPlanning(
-                    diff,
+                    diffCasted,
                     associatedEvents,
                     session,
                     privileges,
                     lockedItems
                 );
-                states.canUpdate = planningUtils.canUpdatePlanning(initialValues,
-                    associatedEvents, session, privileges, lockedItems);
+                states.canUpdate = planningUtils.canUpdatePlanning(
+                    initialVals,
+                    associatedEvents,
+                    session,
+                    privileges,
+                    lockedItems,
+                );
                 states.canEdit = planningUtils.canEditPlanning(
-                    initialValues,
+                    initialVals,
                     associatedEvents,
                     session,
                     privileges,
@@ -234,7 +264,7 @@ export class EditorHeader extends React.Component<IProps> {
             canEditExpired: false,
         };
 
-        states.isExpired = isItemExpired(initialValues);
+        states.isExpired = isItemExpired(initialValues) ?? false;
         states.canEditExpired = privileges[PRIVILEGES.EDIT_EXPIRED];
         states.itemLock = lockUtils.getLock(initialValues, lockedItems);
         states.isLockedInContext = addNewsItemToPlanning ?
@@ -280,15 +310,12 @@ export class EditorHeader extends React.Component<IProps> {
                     doubleSize={true}
                     color={states.isEvent ? ICON_COLORS.WHITE : ICON_COLORS.LIGHT_BLUE}
                 />
-
-                {!showLockContainer ? null : (
+                {showLockContainer && (
                     <LockContainer
                         lockedUser={states.lockedUser}
                         users={users}
                         showUnlock={unlockPrivilege && showUnlock}
-                        withLoggedInfo={true}
                         onUnlock={itemManager.unlockThenLock.bind(null, initialValues)}
-                        small={false}
                         noMargin={true}
                     />
                 )}
@@ -322,7 +349,13 @@ export class EditorHeader extends React.Component<IProps> {
         }
 
         const notDirtyOrSubmitting = !dirty || submitting;
-        const buttons = [{
+
+        type IButtonProps = Array<{
+            state: string,
+            props: IUIButtonProps
+        }>;
+
+        const buttons: IButtonProps = [{
             state: 'showCancel',
             props: {
                 color: states.isEvent ? 'ui-dark' : null,
@@ -451,7 +484,6 @@ export class EditorHeader extends React.Component<IProps> {
                     <NavButton
                         onClick={minimize}
                         icon="big-icon--minimize"
-                        title={gettext('Minimise')}
                         aria-label={gettext('Minimise')}
                     />
                 )}
@@ -461,7 +493,6 @@ export class EditorHeader extends React.Component<IProps> {
                         onClick={closeEditorAndOpenModal}
                         aria-label={gettext('Edit in popup')}
                         icon="icon-external"
-                        title={gettext('Edit in popup')}
                     />
                 )}
 
diff --git a/client/components/Main/ItemEditor/ItemManager.ts b/client/components/Main/ItemEditor/ItemManager.ts
index 2b2fd570d..80718cb2f 100644
--- a/client/components/Main/ItemEditor/ItemManager.ts
+++ b/client/components/Main/ItemEditor/ItemManager.ts
@@ -28,7 +28,10 @@ import {EditorComponent} from './Editor';
 import {AutoSave} from './AutoSave';
 import {EditorGroup} from '../../Editor/EditorGroup';
 import * as selectors from '../../../selectors';
-
+import {
+    handleEmbeddedPlannings,
+    IEmbeddedPlanningsActionType,
+} from '../../../components/editor-standalone/save-handling';
 
 export class ItemManager {
     editor: EditorComponent;
@@ -471,40 +474,42 @@ export class ItemManager {
     }
 
     post() {
-        const newState = {};
+        return handleEmbeddedPlannings(this.props.editorType, 'SAVE').then(() => {
+            const newState = {};
 
-        this.validate(this.props, newState, this.state);
-        if (!isEqual(this.state.errorMessages, [])) {
-            return this.setState({
-                submitting: false,
-                submitFailed: true,
-            })
-                .then(() => {
+            this.validate(this.props, newState, this.state);
+            if (!isEqual(this.state.errorMessages, [])) {
+                return this.setState({
+                    submitting: false,
+                    submitFailed: true,
+                }).then(() => {
                     this.props.notifyValidationErrors(this.state.errorMessages);
                     return Promise.reject();
                 });
-        }
-        return this.setState({
-            submitting: true,
-            submitFailed: false,
-        })
-            .then(() => this.autoSave.flushAutosave())
-            .then(() => this.dispatch<any>(
-                actions.main.post(this.state.initialValues)
-            ))
-            .then(
-                this.afterPostOrUnpost,
-                (error) => {
-                    if (get(error, 'status') === 412) {
-                        // If etag error, then notify user and change editor to read-only
-                        this.dispatch<any>(
-                            actions.main.notifyPreconditionFailed(this.props.inModalView)
-                        );
-                    }
+            }
 
-                    return this.setState({submitting: false});
-                }
-            );
+            return this.setState({
+                submitting: true,
+                submitFailed: false,
+            })
+                .then(() => this.autoSave.flushAutosave())
+                .then(() => this.dispatch<any>(
+                    actions.main.post(this.state.initialValues)
+                ))
+                .then(
+                    this.afterPostOrUnpost,
+                    (error) => {
+                        if (get(error, 'status') === 412) {
+                            // If etag error, then notify user and change editor to read-only
+                            this.dispatch<any>(
+                                actions.main.notifyPreconditionFailed(this.props.inModalView)
+                            );
+                        }
+
+                        return this.setState({submitting: false});
+                    }
+                );
+        });
     }
 
     unpost() {
@@ -656,12 +661,9 @@ export class ItemManager {
                 });
         }
 
-        const promise = !updateStates ?
-            Promise.resolve() :
-            this.setState({
-                submitting: true,
-                submitFailed: false,
-            });
+        const promise = handleEmbeddedPlannings(this.props.editorType, 'SAVE').then(() =>
+            !updateStates ? Promise.resolve({}) : this.setState({submitting: true, submitFailed: false}),
+        );
 
         if (this.props.addNewsItemToPlanning) {
             return promise.then(() => this._saveFromAuthoring({post, unpost}));
@@ -828,26 +830,30 @@ export class ItemManager {
             ));
     }
 
-    unlockAndCancel() {
-        const {session, currentWorkspace} = this.props;
-        const {initialValues, diff} = this.state;
-        let promises = [];
+    unlockAndCancel(embeddedEditorAction?: IEmbeddedPlanningsActionType) {
+        return handleEmbeddedPlannings(
+            this.props.editorType,
+            embeddedEditorAction,
+        ).then(() => {
+            const {session, currentWorkspace} = this.props;
+            const {initialValues, diff} = this.state;
+            let promises = [];
 
-        if (shouldUnLockItem(initialValues, session, currentWorkspace, this.props.lockedItems)) {
-            promises.push(planningApi.locks.unlockItem(this.props.item));
-            // promises.push(this.unlock());
-        }
+            if (shouldUnLockItem(initialValues, session, currentWorkspace, this.props.lockedItems)) {
+                promises.push(planningApi.locks.unlockItem(this.props.item));
+            }
 
-        // If event was created by a planning item, unlock the planning item
-        if (diff?.type === 'event' && diff._planning_item) {
-            planningApi.locks.unlockItemById(diff._planning_item, 'planning');
-        }
+            // If event was created by a planning item, unlock the planning item
+            if (diff?.type === 'event' && diff._planning_item) {
+                planningApi.locks.unlockItemById(diff._planning_item, 'planning');
+            }
 
-        promises.push(this.autoSave.remove());
+            promises.push(this.autoSave.remove());
 
-        this.editor.closeEditor();
+            this.editor.closeEditor();
 
-        return Promise.all(promises);
+            return Promise.all(promises);
+        });
     }
 
     changeAction(action, newItem = null) {
diff --git a/client/components/PlanningTemplatesModal/TemplatesListView.tsx b/client/components/PlanningTemplatesModal/TemplatesListView.tsx
index f1d2e872c..3155614d4 100644
--- a/client/components/PlanningTemplatesModal/TemplatesListView.tsx
+++ b/client/components/PlanningTemplatesModal/TemplatesListView.tsx
@@ -1,7 +1,7 @@
 import {ICalendar, IEventTemplate} from 'interfaces';
 import React from 'react';
-import {gettext} from 'superdesk-core/scripts/core/utils';
 import {Heading, BoxedList, BoxedListItem} from 'superdesk-ui-framework/react';
+import {superdeskApi} from '../../superdeskApi';
 
 type ITemplatesListViewProps = {
     closeModal: () => void;
@@ -25,6 +25,7 @@ export const TemplatesListView: React.FC<ITemplatesListViewProps> = ({
     const calendarsFiltered = activeCalendarFilter
         ? [calendars.find(({qcode}) => activeCalendarFilter === qcode)]
         : calendars;
+    const {gettext} = superdeskApi.localization;
 
     const filteredTemplates = calendarsFiltered
         .map((_calendar) => ({
diff --git a/client/components/UI/Button.tsx b/client/components/UI/Button.tsx
index e8d84d6c4..d195874b5 100644
--- a/client/components/UI/Button.tsx
+++ b/client/components/UI/Button.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-
 import {KEYCODES} from './constants';
 import {onEventCapture} from './utils';
 
-
-interface IButtonProps {
+export interface IUIButtonProps {
     id?: string;
     className?: string;
     onClick: (...args: any) => any;
diff --git a/client/components/UI/Nav/Button.tsx b/client/components/UI/Nav/Button.tsx
index 317dab627..1a885fabe 100644
--- a/client/components/UI/Nav/Button.tsx
+++ b/client/components/UI/Nav/Button.tsx
@@ -1,29 +1,39 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import './style.scss';
 
-/**
- * @ngdoc react
- * @name Button
- * @description Button Component for a NavBar
- */
-export const Button = ({
+interface IProps {
+    className?: string;
+    onClick?: () => void;
+    icon?: string;
+    tooltip?: string;
+    tooltipDirection?: 'top' | 'down' | 'left' | 'right';
+    children?: React.ReactNode;
+    dropdown?: boolean;
+    textWithIcon?: boolean;
+    left?: boolean;
+    darker?: boolean;
+    active?: boolean;
+    navbtn?: boolean;
+    noBorderNoPadding?: boolean;
+    disabled?: boolean;
+}
+
+export const Button: React.FC<IProps> = ({
     className,
     onClick,
     icon,
     tooltip,
-    tooltipDirection,
+    tooltipDirection = 'top',
     children,
-    dropdown,
-    textWithIcon,
-    left,
-    darker,
-    active,
-    navbtn,
+    dropdown = false,
+    textWithIcon = false,
+    left = false,
+    darker = false,
+    active = false,
+    navbtn = true,
     noBorderNoPadding,
-    disabled,
+    disabled = false,
     ...props
 }) => (
     <button
@@ -51,31 +61,3 @@ export const Button = ({
         {children}
     </button>
 );
-
-Button.propTypes = {
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    icon: PropTypes.string,
-    tooltip: PropTypes.string,
-    tooltipDirection: PropTypes.oneOf(['top', 'down', 'left', 'right']),
-    children: PropTypes.node,
-    dropdown: PropTypes.bool,
-    textWithIcon: PropTypes.bool,
-    left: PropTypes.bool,
-    darker: PropTypes.bool,
-    active: PropTypes.bool,
-    navbtn: PropTypes.bool,
-    noBorderNoPadding: PropTypes.bool,
-    disabled: PropTypes.bool,
-};
-
-Button.defaultProps = {
-    tooltipDirection: 'top',
-    dropdown: false,
-    textWithIcon: false,
-    left: false,
-    darker: false,
-    active: false,
-    navbtn: true,
-    disabled: false,
-};
diff --git a/client/components/UI/SidePanel/ContentBlockInner.tsx b/client/components/UI/SidePanel/ContentBlockInner.tsx
index ccfa7f13d..ac25f8f41 100644
--- a/client/components/UI/SidePanel/ContentBlockInner.tsx
+++ b/client/components/UI/SidePanel/ContentBlockInner.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-/**
- * @ngdoc react
- * @name ContentBlockInner
- * @description Inner Component to hold content block of a side panel
- */
-export const ContentBlockInner = ({children, className, right, grow}) => (
+interface IProps {
+    children?: React.ReactNode;
+    className?: string;
+    right?: boolean;
+    grow?: boolean;
+}
+
+export const ContentBlockInner: React.FC<IProps> = ({
+    children,
+    className,
+    right,
+    grow,
+}) => (
     <div
         className={classNames(
             'side-panel__content-block-inner',
@@ -21,15 +27,3 @@ export const ContentBlockInner = ({children, className, right, grow}) => (
         {children}
     </div>
 );
-
-ContentBlockInner.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    right: PropTypes.bool,
-    grow: PropTypes.bool,
-};
-
-ContentBlockInner.defaultProps = {
-    right: false,
-    grow: false,
-};
\ No newline at end of file
diff --git a/client/components/UI/SidePanel/Header.tsx b/client/components/UI/SidePanel/Header.tsx
index 595dce8e0..72ffd9ce8 100644
--- a/client/components/UI/SidePanel/Header.tsx
+++ b/client/components/UI/SidePanel/Header.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-/**
- * @ngdoc react
- * @name Header
- * @description Header Component of a side panel
- */
-export const Header = ({children, className, darkBlue, darker}) => (
+interface IProps {
+    children?: React.ReactNode;
+    className?: string;
+    darkBlue?: boolean;
+    darker?: boolean;
+}
+
+export const Header: React.FC<IProps> = ({children, className, darkBlue = false, darker = false}) => (
     <div
         className={classNames(
             'side-panel__header',
@@ -23,15 +24,3 @@ export const Header = ({children, className, darkBlue, darker}) => (
         </div>
     </div>
 );
-
-Header.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    darkBlue: PropTypes.bool,
-    darker: PropTypes.bool,
-};
-
-Header.defaultProps = {
-    darkBlue: false,
-    darker: false,
-};
diff --git a/client/components/UI/SidePanel/SidePanel.tsx b/client/components/UI/SidePanel/SidePanel.tsx
index 73b537476..ef909fb9f 100644
--- a/client/components/UI/SidePanel/SidePanel.tsx
+++ b/client/components/UI/SidePanel/SidePanel.tsx
@@ -1,13 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    children: React.ReactNode;
+    shadowRight?: boolean;
+    shadowLeft?: boolean;
+    transparent?: boolean;
+    bg00?: boolean;
+    className?: string;
+    testId?: string;
+}
+
 /**
  * @ngdoc react
  * @name SidePanel
  * @description SidePanel Component used usually for Advanced Search panels
  */
-export const SidePanel = ({children, shadowRight, shadowLeft, transparent, bg00, className, testId}) => (
+export const SidePanel: React.FC<IProps> = ({
+    children,
+    shadowRight = false,
+    shadowLeft = false,
+    transparent = false,
+    bg00 = false,
+    className = '',
+    testId,
+}) => (
     <div
         className={classNames(
             'side-panel',
@@ -24,21 +41,3 @@ export const SidePanel = ({children, shadowRight, shadowLeft, transparent, bg00,
         {children}
     </div>
 );
-
-SidePanel.propTypes = {
-    children: PropTypes.node,
-    shadowRight: PropTypes.bool,
-    shadowLeft: PropTypes.bool,
-    transparent: PropTypes.bool,
-    bg00: PropTypes.bool,
-    className: PropTypes.string,
-    testId: PropTypes.string,
-};
-
-SidePanel.defaultProps = {
-    shadowRight: false,
-    shadowLeft: false,
-    transparent: false,
-    bg00: false,
-    className: '',
-};
diff --git a/client/components/UI/SubNav/StretchBar.tsx b/client/components/UI/SubNav/StretchBar.tsx
index 90d0b4cce..919346553 100644
--- a/client/components/UI/SubNav/StretchBar.tsx
+++ b/client/components/UI/SubNav/StretchBar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface IProps {
diff --git a/client/components/UI/TermsList.tsx b/client/components/UI/TermsList.tsx
index d8f11c77a..d1eeb013b 100644
--- a/client/components/UI/TermsList.tsx
+++ b/client/components/UI/TermsList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {gettext} from 'superdesk-core/scripts/core/utils';
 import {getVocabularyItemFieldTranslated} from '../../utils/vocabularies';
+import {superdeskApi} from '../../superdeskApi';
 
 type Term = {[key: string]: any};
 
@@ -26,6 +26,7 @@ export default class TermsList extends React.PureComponent<IProps> {
             return null;
         }
 
+        const {gettext} = superdeskApi.localization;
         const classes = readOnly ?
             'terms-list terms-list--disabled' :
             'terms-list';
diff --git a/client/components/WorkqueueContainer/WorkqueueItem.tsx b/client/components/WorkqueueContainer/WorkqueueItem.tsx
index 91c956ec0..32fb9d389 100644
--- a/client/components/WorkqueueContainer/WorkqueueItem.tsx
+++ b/client/components/WorkqueueContainer/WorkqueueItem.tsx
@@ -8,7 +8,6 @@ import {isExistingItem, getItemId} from '../../utils';
 
 import {ItemIcon} from '../';
 import {Icon} from '../UI';
-import {gettext} from 'superdesk-core/scripts/core/utils';
 
 export const WorkqueueItem = ({
     item,
diff --git a/client/components/editor-standalone/base-editor-standalone.tsx b/client/components/editor-standalone/base-editor-standalone.tsx
index 90c297c4e..7307d4d4e 100644
--- a/client/components/editor-standalone/base-editor-standalone.tsx
+++ b/client/components/editor-standalone/base-editor-standalone.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {createRef, RefObject} from 'react';
 import {connect} from 'react-redux';
 import {noop} from 'lodash';
 import {Button} from 'superdesk-ui-framework/react';
@@ -57,12 +57,21 @@ function validate<T extends IPlanningItem | IEventItem>(
 }
 
 export class BaseEditorComponent<T extends IPlanningItem | IEventItem> extends React.PureComponent<IProps<T>> {
+    editorRef: RefObject<any>;
+
+    constructor(props: IProps<T>) {
+        super(props);
+
+        this.editorRef = createRef();
+    }
+
     render() {
         const Authoring = superdeskApi.components.getAuthoringComponent<T>();
         const {gettext} = superdeskApi.localization;
 
         return (
             <Authoring
+                ref={this.editorRef}
                 itemId={this.props.itemId}
                 resourceNames={[this.props.entityType]}
                 onClose={noop}
@@ -130,4 +139,4 @@ function mapStateToProps(state: IPlanningAppState): IReduxProps {
     };
 }
 
-export const BaseEditorStandalone = connect(mapStateToProps)(BaseEditorComponent);
+export const BaseEditorStandalone = connect(mapStateToProps, null, null, {forwardRef: true})(BaseEditorComponent);
diff --git a/client/components/editor-standalone/field-definitions/date-time-config.ts b/client/components/editor-standalone/field-definitions/date-time-config.ts
index 03a170b5a..da1203cc3 100644
--- a/client/components/editor-standalone/field-definitions/date-time-config.ts
+++ b/client/components/editor-standalone/field-definitions/date-time-config.ts
@@ -1,19 +1,42 @@
 import {IAuthoringFieldV2, IDateTimeFieldConfig} from 'superdesk-api';
+import {superdeskApi} from '../../../superdeskApi';
+import {IFieldDefinition} from './interfaces';
+import moment from 'moment';
 
-export function getDateTimeField(options: {id: string; label: string, required: boolean}): IAuthoringFieldV2 {
-    const config: IDateTimeFieldConfig = {
-        allowSeconds: false,
-    };
+export function getPlanningDateField(): IFieldDefinition {
+    return {
+        fieldId: 'planning_date',
+        getField: ({id, required}) => {
+            const config: IDateTimeFieldConfig = {
+                allowSeconds: false,
+            };
+
+            const field: IAuthoringFieldV2 = {
+                id: id,
+                name: superdeskApi.localization.gettext('Planning Date'),
+                fieldType: 'datetime',
+                fieldConfig: {
+                    ...config,
+                    required: required,
+                },
+            };
 
-    const field: IAuthoringFieldV2 = {
-        id: options.id,
-        name: options.label,
-        fieldType: 'datetime',
-        fieldConfig: {
-            ...config,
-            required: options.required,
+            return field;
         },
-    };
+        storageAdapterPlanning: {
+            retrieveStoredValue: (item, fieldId) => {
+                if (typeof item[fieldId] === 'object') {
+                    return (item[fieldId] as moment.Moment).toString();
+                }
 
-    return field;
+                return item[fieldId];
+            },
+            storeValue: (item, operationalValue) => {
+                return {
+                    ...item,
+                    planning_date: operationalValue ? moment(operationalValue).toISOString() : undefined,
+                };
+            }
+        }
+    };
 }
diff --git a/client/components/editor-standalone/field-definitions/index.ts b/client/components/editor-standalone/field-definitions/index.ts
index 466cba645..6f4938643 100644
--- a/client/components/editor-standalone/field-definitions/index.ts
+++ b/client/components/editor-standalone/field-definitions/index.ts
@@ -7,7 +7,7 @@ import {
 } from 'superdesk-api';
 import {superdeskApi} from '../../../superdeskApi';
 import {getCustomVocabularyFields} from '../field-adapters/custom-vocabularies';
-import {getDateTimeField} from './date-time-config';
+import {getPlanningDateField} from './date-time-config';
 import {IFieldDefinitions, IFieldDefinition} from './interfaces';
 import {getTextFieldConfig} from './text-field-config';
 import {getPlaceField} from './place-field';
@@ -48,11 +48,6 @@ export function getFieldDefinitions(profileType: 'event' | 'planning'): IFieldDe
             fieldId: 'headline',
             getField: ({required, id}) => getTextFieldConfig({id: id, label: gettext('Headline'), required: required}),
         },
-        {
-            fieldId: 'planning_date',
-            getField: ({required, id}) =>
-                getDateTimeField({id: id, label: gettext('Planning date'), required: required}),
-        },
         {
             fieldId: 'files',
             getField: ({required, id}) => {
@@ -70,6 +65,7 @@ export function getFieldDefinitions(profileType: 'event' | 'planning'): IFieldDe
                 return field;
             },
         },
+        getPlanningDateField(),
         getPlaceField(),
         getAgendasField(),
         getSubjectField(),
diff --git a/client/components/editor-standalone/planning-editor-standalone.tsx b/client/components/editor-standalone/planning-editor-standalone.tsx
index 9f4efa0d5..060b2e2cb 100644
--- a/client/components/editor-standalone/planning-editor-standalone.tsx
+++ b/client/components/editor-standalone/planning-editor-standalone.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {RefObject} from 'react';
 import {IAuthoringStorage} from 'superdesk-api';
 import {BaseEditorStandalone} from './base-editor-standalone';
 import {getStorageAdapter} from './storage-adapter';
@@ -9,9 +9,18 @@ interface IProps {
 }
 
 export class PlanningEditorStandalone extends React.PureComponent<IProps> {
+    planningEditorRef: RefObject<any>;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.planningEditorRef = React.createRef();
+    }
+
     render() {
         return (
             <BaseEditorStandalone
+                ref={this.planningEditorRef}
                 entityType="planning"
                 itemId={this.props.itemId}
                 storageAdapter={getStorageAdapter('planning', ({storageAdapterPlanning}) => storageAdapterPlanning)}
diff --git a/client/components/editor-standalone/save-handling.ts b/client/components/editor-standalone/save-handling.ts
new file mode 100644
index 000000000..7b5fc9959
--- /dev/null
+++ b/client/components/editor-standalone/save-handling.ts
@@ -0,0 +1,84 @@
+import {isNullOrUndefined} from 'core/helpers/typescript-helpers';
+import {EDITOR_TYPE} from '../../interfaces';
+import {IExposedFromAuthoring} from 'superdesk-api';
+import {planningApi} from '../../superdeskApi';
+import {RelatedPlanningItem} from '../../components/fields/editor/EventRelatedPlannings/RelatedPlanningItem';
+
+type IRelatedPlanningRefs = {[id: string]: RelatedPlanningItem};
+export type IEmbeddedPlanningsActionType = 'SAVE' | 'HANDLE_UNSAVED_CHANGES' | 'DISCARD';
+
+const getEmbeddedAuthoringRefs = (editorType: EDITOR_TYPE) => {
+    const embeddedEditorRef = planningApi.editor(editorType).dom.fields['related_plannings']?.current;
+    const relatedPlanningsRefs: IRelatedPlanningRefs = embeddedEditorRef?.relatedPlanningRefs;
+
+    return relatedPlanningsRefs;
+};
+
+const getEmbeddedPlanningExposed = (editorType: EDITOR_TYPE): Array<IExposedFromAuthoring<void>> => {
+    const relatedPlanningsRefs = getEmbeddedAuthoringRefs(editorType);
+    const exposedAuthoringArray = Object.values(relatedPlanningsRefs ?? []).map((x) => {
+        try {
+            return x.standaloneEditorRef.current.planningEditorRef.current.editorRef.current.getExposed();
+        } catch {
+            return null;
+        }
+    })
+        .filter(isNullOrUndefined);
+
+    return exposedAuthoringArray;
+};
+
+const FIRST_ERROR = 0;
+
+const handleErrors = (editorType: EDITOR_TYPE, editorIndex: number) => {
+    const relatedPlanningRef = getEmbeddedAuthoringRefs(editorType)[editorIndex];
+    const firstEditorRef =
+        relatedPlanningRef.standaloneEditorRef.current.planningEditorRef.current.editorRef.current;
+    const fieldErrors = firstEditorRef.getExposed().getValidationErrors();
+    const fieldToFocus = firstEditorRef?.fieldRefs[Object.keys(fieldErrors)[FIRST_ERROR]].current as HTMLDivElement;
+    const toggleBoxRef = relatedPlanningRef.toggleBoxRef.current;
+
+    if (toggleBoxRef.isOpen() === false) {
+        toggleBoxRef.toggle();
+    }
+
+    fieldToFocus?.scrollIntoView?.({behavior: 'smooth'});
+
+    return Promise.reject();
+};
+
+/**
+ * Function that handles editor changes using editor refs.
+ * Execution is cancelled on the first encounter of an editor error.
+ * If an error occurs the first encountered embedded planning editor and the first error field is focused.
+ */
+export const handleEmbeddedPlannings = (editorType: EDITOR_TYPE, action: IEmbeddedPlanningsActionType = 'SAVE') => {
+    return getEmbeddedPlanningExposed(editorType).reduce<Promise<any>>(
+        (promise, editorExposed, editorIndex) => promise.then(() => {
+            if (editorExposed.hasUnsavedChanges()) {
+                if (action === 'SAVE') {
+                    return editorExposed.save().catch(() => handleErrors(editorType, editorIndex));
+                } else if (action === 'DISCARD') {
+                    return editorExposed.discardUnsavedChanges();
+                } else {
+                    return editorExposed.handleUnsavedChanges().catch(() => handleErrors(editorType, editorIndex));
+                }
+            }
+
+            return Promise.resolve();
+        }),
+        Promise.resolve(),
+    );
+};
+
+export const embeddedPlanningHasUnsavedChanges = () => {
+    let hasUnsavedChanges = false;
+
+    getEmbeddedPlanningExposed(EDITOR_TYPE.INLINE).forEach((x) => {
+        if (x.hasUnsavedChanges() && hasUnsavedChanges === false) {
+            hasUnsavedChanges = true;
+        }
+    });
+
+    return hasUnsavedChanges;
+};
diff --git a/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlanningWrapper.tsx b/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlanningWrapper.tsx
new file mode 100644
index 000000000..9148b2721
--- /dev/null
+++ b/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlanningWrapper.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {EditorFieldEventRelatedPlanningsComponent} from './EventRelatedPlannings';
+import {IEditorFieldProps, ILockedItems, IProfileSchemaTypeList, ISearchProfile} from 'interfaces';
+import * as selectors from '../../../../selectors';
+import {connect} from 'react-redux';
+
+interface IOwnProps extends IEditorFieldProps {
+    item: IEventItem;
+    schema?: IProfileSchemaTypeList;
+    coverageProfile?: ISearchProfile;
+    addPlanningItem(item?: IPlanningItem): Promise<Partial<IPlanningItem>>;
+    removePlanningItem(item: DeepPartial<IPlanningItem>): void;
+    updatePlanningItem(original: DeepPartial<IPlanningItem>, updates: DeepPartial<IPlanningItem>): void;
+}
+
+interface IReduxProps {
+    lockedItems: ILockedItems;
+}
+
+export type IRelatedPlanningProps = IOwnProps & IReduxProps;
+
+export class EventRelatedPlanningWrapper extends React.PureComponent<IRelatedPlanningProps> {
+    render() {
+        const {refNode, ...props} = this.props;
+
+        return (
+            <EditorFieldEventRelatedPlanningsComponent
+                ref={refNode}
+                {...props}
+            />
+        );
+    }
+}
+
+const mapStateToProps = (state): IReduxProps => ({
+    lockedItems: selectors.locks.getLockedItems(state),
+});
+
+export const EditorFieldEventRelatedPlannings = connect(
+    mapStateToProps,
+)(EventRelatedPlanningWrapper);
diff --git a/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlannings.tsx b/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlannings.tsx
index a2fe0f3f8..fedbe8625 100644
--- a/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlannings.tsx
+++ b/client/components/fields/editor/EventRelatedPlannings/EventRelatedPlannings.tsx
@@ -1,15 +1,6 @@
 import * as React from 'react';
-import {connect} from 'react-redux';
 
-import {
-    IEditorFieldProps,
-    IEventItem,
-    ILockedItems,
-    IPlanningCoverageItem,
-    IPlanningItem,
-    IProfileSchemaTypeList,
-    ISearchProfile
-} from '../../../../interfaces';
+import {IPlanningItem} from '../../../../interfaces';
 import {planningApi, superdeskApi} from '../../../../superdeskApi';
 
 import {Button, Spacer} from 'superdesk-ui-framework/react';
@@ -19,26 +10,18 @@ import {PlanningMetaData} from '../../../RelatedPlannings/PlanningMetaData';
 import './style.scss';
 import {TEMP_ID_PREFIX} from '../../../../constants';
 import {addSomeRelatedPlanningsToEventEditor} from '../../../../utils/planning';
-import * as selectors from '../../../../selectors';
+import {IRelatedPlanningProps} from './EventRelatedPlanningWrapper';
+import {PlanningEditorStandalone} from 'components/editor-standalone/planning-editor-standalone';
 
-interface IOwnProps extends IEditorFieldProps {
-    item: IEventItem;
-    schema?: IProfileSchemaTypeList;
-    coverageProfile?: ISearchProfile;
+export class EditorFieldEventRelatedPlanningsComponent extends React.PureComponent<IRelatedPlanningProps> {
+    relatedPlanningRefs: {[id: string]: React.RefObject<PlanningEditorStandalone>};
 
-    getRef(value: DeepPartial<IPlanningItem>): React.RefObject<PlanningMetaData | RelatedPlanningItem>;
-    addPlanningItem(item?: IPlanningItem): Promise<Partial<IPlanningItem>>;
-    removePlanningItem(item: DeepPartial<IPlanningItem>): void;
-    updatePlanningItem(original: DeepPartial<IPlanningItem>, updates: DeepPartial<IPlanningItem>): void;
-}
-
-interface IReduxProps {
-    lockedItems: ILockedItems;
-}
+    constructor(props: IRelatedPlanningProps) {
+        super(props);
 
-type IProps = IOwnProps & IReduxProps;
+        this.relatedPlanningRefs = {};
+    }
 
-export class EditorFieldEventRelatedPlanningsComponent extends React.PureComponent<IProps> {
     render() {
         const {gettext} = superdeskApi.localization;
         const {DropZone} = superdeskApi.components;
@@ -71,7 +54,6 @@ export class EditorFieldEventRelatedPlanningsComponent extends React.PureCompone
                 {disabled ? (
                     planningItems.map((plan, index) => (
                         <PlanningMetaData
-                            ref={this.props.getRef(plan) as React.RefObject<PlanningMetaData>}
                             key={plan._id}
                             field={`plannings[${index}]`}
                             plan={plan}
@@ -81,31 +63,31 @@ export class EditorFieldEventRelatedPlanningsComponent extends React.PureCompone
                     ))
                 ) : (
                     <>
-                        {
-                            planningItems.map((plan, index) => {
-                                const isNewlyCreatedItem =
-                                    index === planningItems.length - 1
-                                    && plan._id.startsWith(TEMP_ID_PREFIX);
-
-                                return (
-                                    <RelatedPlanningItem
-                                        ref={this.props.getRef(plan) as React.RefObject<RelatedPlanningItem>}
-                                        key={plan._id}
-                                        index={index}
-                                        event={this.props.item}
-                                        item={plan}
-                                        removePlan={this.props.removePlanningItem}
-                                        updatePlanningItem={this.props.updatePlanningItem}
-                                        disabled={false}
-                                        editorType={this.props.editorType}
-                                        profile={this.props.profile}
-                                        coverageProfile={this.props.coverageProfile}
-                                        isAgendaEnabled={isAgendaEnabled}
-                                        initiallyExpanded={isNewlyCreatedItem && (plan.coverages ?? []).length < 1}
-                                    />
-                                );
-                            })
-                        }
+                        {planningItems.map((plan, index) => {
+                            const isNewlyCreatedItem =
+                            index === planningItems.length - 1
+                            && plan._id.startsWith(TEMP_ID_PREFIX);
+
+                            return (
+                                <RelatedPlanningItem
+                                    ref={(ref) => {
+                                        this.relatedPlanningRefs[index] = ref;
+                                    }}
+                                    key={plan._id}
+                                    index={index}
+                                    event={this.props.item}
+                                    item={plan}
+                                    removePlan={this.props.removePlanningItem}
+                                    updatePlanningItem={this.props.updatePlanningItem}
+                                    disabled={false}
+                                    editorType={this.props.editorType}
+                                    profile={this.props.profile}
+                                    coverageProfile={this.props.coverageProfile}
+                                    isAgendaEnabled={isAgendaEnabled}
+                                    initiallyExpanded={isNewlyCreatedItem && (plan.coverages ?? []).length < 1}
+                                />
+                            );
+                        })}
 
                         <DropZone
                             canDrop={
@@ -131,12 +113,3 @@ export class EditorFieldEventRelatedPlanningsComponent extends React.PureCompone
         );
     }
 }
-
-const mapStateToProps = (state): IReduxProps => ({
-    lockedItems: selectors.locks.getLockedItems(state),
-});
-
-
-export const EditorFieldEventRelatedPlannings = connect(
-    mapStateToProps,
-)(EditorFieldEventRelatedPlanningsComponent);
diff --git a/client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx b/client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx
index f2c83293d..e5aec72dd 100644
--- a/client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx
+++ b/client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx
@@ -38,11 +38,15 @@ interface IProps {
 
 export class RelatedPlanningItem extends React.PureComponent<IProps> {
     containerNode: React.RefObject<HTMLDivElement>;
+    public standaloneEditorRef: React.RefObject<PlanningEditorStandalone>;
+    public toggleBoxRef: React.RefObject<any>;
 
     constructor(props) {
         super(props);
 
         this.containerNode = React.createRef();
+        this.standaloneEditorRef = React.createRef();
+        this.toggleBoxRef = React.createRef();
 
         this.remove = this.remove.bind(this);
         this.update = this.update.bind(this);
@@ -98,6 +102,7 @@ export class RelatedPlanningItem extends React.PureComponent<IProps> {
                 tabIndex={0}
             >
                 <ToggleBox
+                    toggleBoxRef={this.toggleBoxRef}
                     variant="custom-header"
                     getToggleButtonLabel={(isOpen) => isOpen ? gettext('Show less') : gettext('Show more')}
                     header={
@@ -116,6 +121,7 @@ export class RelatedPlanningItem extends React.PureComponent<IProps> {
                     }
                 >
                     <PlanningEditorStandalone
+                        ref={this.standaloneEditorRef}
                         itemId={item._id}
                         authoringStorage={
                             item._id.startsWith(TEMP_ID_PREFIX)
diff --git a/client/components/fields/editor/index.tsx b/client/components/fields/editor/index.tsx
index 7088f35dc..2936c7d16 100644
--- a/client/components/fields/editor/index.tsx
+++ b/client/components/fields/editor/index.tsx
@@ -53,6 +53,7 @@ import {EditorFieldXMPFile} from './XMPFile';
 import {EditorFieldScheduledUpdates} from './ScheduledUpdates';
 import {EditorFieldCustomVocabularies} from './CustomVocabularies';
 import {EditorFieldAssignedCoverageComponent} from './AssignedCoverage';
+import {EventRelatedPlanningWrapper} from './EventRelatedPlannings/EventRelatedPlanningWrapper';
 
 /**
  * This is the single source of truth for field definitions, allows for registering
@@ -125,7 +126,7 @@ export const FIELD_TO_EDITOR_COMPONENT = {
     contacts: EditorFieldContacts,
     event_contact_info: EditorFieldContacts,
     occur_status: EditorFieldEventOccurenceStatus,
-    related_plannings: EditorFieldEventRelatedPlannings,
+    related_plannings: EventRelatedPlanningWrapper,
     planning_date: EditorFieldPlanningDateTime,
     'flags.marked_for_not_publication': EditorFieldNotForPublication,
     marked_for_not_publication: EditorFieldNotForPublication,
diff --git a/package-lock.json b/package-lock.json
index 0d3bdf44a..2b14ca3a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,12 +28,12 @@
       "dev": true
     },
     "@babel/parser": {
-      "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
-      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.5.tgz",
+      "integrity": "sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.26.3"
+        "@babel/types": "^7.26.5"
       }
     },
     "@babel/runtime": {
@@ -45,9 +45,9 @@
       }
     },
     "@babel/types": {
-      "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
-      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
+      "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
       "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -3265,9 +3265,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.5.80",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz",
-      "integrity": "sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==",
+      "version": "1.5.82",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.82.tgz",
+      "integrity": "sha512-Zq16uk1hfQhyGx5GpwPAYDwddJuSGhtRhgOA2mCxANYaDT79nAeGnaXogMGng4KqLaJUVnOnuL0+TDop9nLOiA==",
       "dev": true
     },
     "elliptic": {
@@ -11573,9 +11573,9 @@
       }
     },
     "spdx-license-ids": {
-      "version": "3.0.20",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz",
-      "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==",
+      "version": "3.0.21",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.21.tgz",
+      "integrity": "sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==",
       "dev": true
     },
     "spdy": {
@@ -12272,7 +12272,7 @@
       }
     },
     "superdesk-core": {
-      "version": "github:superdesk/superdesk-client-core#395672ee1925691a537c8290a6de1bc11f8f94be",
+      "version": "github:superdesk/superdesk-client-core#ec7dba037383bbfe05bf5afac39125633b355583",
       "from": "github:superdesk/superdesk-client-core#develop",
       "dev": true,
       "requires": {
@@ -12554,9 +12554,9 @@
       }
     },
     "superdesk-ui-framework": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-4.0.7.tgz",
-      "integrity": "sha512-WdLQwQti4Ns9BJ09b7GZdukGHLTjVnI9o0CA+aJ0fhR993pkVjKy8HcQ2/Frmo4yWC29HGC6vmC8iJBomkB9tQ==",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-4.0.9.tgz",
+      "integrity": "sha512-C9NQFkoFl6EQWOuelKR4lRueqk83JMTlburbj27O2najK9hu15SZje+8Z/nX8nmIMFrrM7/OvBT1H5s0RELqHg==",
       "dev": true,
       "requires": {
         "@popperjs/core": "^2.4.0",
diff --git a/package.json b/package.json
index d127e4e08..96a558b5f 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "sinon": "^4.5.0",
     "superdesk-code-style": "1.5.0",
     "superdesk-core": "github:superdesk/superdesk-client-core#develop",
-    "superdesk-ui-framework": "^4.0.7",
+    "superdesk-ui-framework": "^4.0.9",
     "ts-node": "~7.0.1",
     "tslint": "5.11.0",
     "typescript-eslint-parser": "^18.0.0"