Documentation: Add AutosaveMonitor component JSDoc enhancements (Word…

…Press#60905)

Co-authored-by: colorful-tones <[email protected]>
Co-authored-by: ntsekouras <[email protected]>

packages/editor/README.md

@@ -128,14 +128,30 @@ Example:
 
 ### AutosaveMonitor
 
-AutosaveMonitor component. Monitors the changes made to the edited post and triggers autosave if necessary.
+Monitors the changes made to the edited post and triggers autosave if necessary.
+
+The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called. The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as the specific way of detecting changes.
+
+There are two caveats:
+
+-   If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
+-   The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
 
 _Usage_
 
 ```jsx
 <AutosaveMonitor interval={ 30000 } />
 ```
 
+_Parameters_
+
+-   _props_ `Object`: - The properties passed to the component.
+-   _props.autosave_ `Function`: - The function to call when changes need to be saved.
+-   _props.interval_ `number`: - The maximum time in seconds between an unsaved change and an autosave.
+-   _props.isAutosaveable_ `boolean`: - If false, the check for changes is retried every second.
+-   _props.disableIntervalChecks_ `boolean`: - If true, disables the timer and any change will immediately trigger `props.autosave()`.
+-   _props.isDirty_ `boolean`: - Indicates if there are unsaved changes.
+
 ### BlockAlignmentToolbar
 
 > **Deprecated** since 5.3, use `wp.blockEditor.BlockAlignmentToolbar` instead.

packages/editor/src/components/autosave-monitor/index.js

@@ -11,17 +11,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-/**
- * AutosaveMonitor invokes `props.autosave()` within at most `interval` seconds after an unsaved change is detected.
- *
- * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
- * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
- * the specific way of detecting changes.
- *
- * There are two caveats:
- * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
- * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
- */
 export class AutosaveMonitor extends Component {
 	constructor( props ) {
 		super( props );
@@ -92,9 +81,23 @@ export class AutosaveMonitor extends Component {
 }
 
 /**
- * AutosaveMonitor component.
  * Monitors the changes made to the edited post and triggers autosave if necessary.
  *
+ * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
+ * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
+ * the specific way of detecting changes.
+ *
+ * There are two caveats:
+ * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
+ * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
+ *
+ * @param {Object}   props                       - The properties passed to the component.
+ * @param {Function} props.autosave              - The function to call when changes need to be saved.
+ * @param {number}   props.interval              - The maximum time in seconds between an unsaved change and an autosave.
+ * @param {boolean}  props.isAutosaveable        - If false, the check for changes is retried every second.
+ * @param {boolean}  props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.
+ * @param {boolean}  props.isDirty               - Indicates if there are unsaved changes.
+ *
  * @example
  * ```jsx
  * <AutosaveMonitor interval={30000} />