addEditorSidebarTabChangePreventCallback

Arguments

1. callback

   (Required)

   Type: Function

   A function which should return a Promise which, when resolved, continues changing the sidebar tab (closing it or opening another one) before it was prevented. When the Promise is rejected, the "prevention remains"; the sidebar tab won't change/close. This can be used to present the user with a cancel/confirm style modal before allowing a potentially dangerous/unrecoverable action by the user.

   An example is how the properties sidebar presents the user with a modal, warning the user of unsaved changes, when closing the sidebar.

   To create something similar: call the ‘executeOperation' method of OperationsManager using an operation with a ‘modal’ step to present the user with a modal as they (try to) close the sidebar tab. Eg:

   JavaScript

   // operations.json
   {
       "prevent-my-sidebar-tab-from-closing": {
           "steps": {
               "type": "modal/MyWarningModal"
           }
       }
   }
   
   // Inside your custom editor sidebar tab component, add the callback on mount, remove it on unmount.
   useEffect(() =>
       addEditorSidebarTabChangePreventCallback(() =>
           operationsManager.executeOperation("prevent-my-sidebar-tab-from-closing")
       ),
       []
   );
   // Note, the curly braces are intentionally omitted in the example above, all return values are
   // relevant and have to be used.
   
   // Make sure the MyWarningModal is a Modal that has a cancel button that calls
   this.props.cancelModal()
   // and a confirm button that calls
   this.props.submitModal()

   This allows the user to continue closing the sidebar tab by pressing confirm, or cancel closing the sidebar tab

   This method returns a Promise which you can return inside the callback.

   Returns

Returns