[IMP] web: update usePosition API

This commit updates the documentation of the position hook, to add
the latest variant "fit". This variant was introduced recently in
commit (1), when using it in the SelectMenu component.

(1): c21c415f38

content/developer/reference/frontend/hooks.rst

@@ -30,6 +30,8 @@ documents the list of hooks provided by the Odoo web framework.
      - Display the pager of the control panel of a view.
    * - :ref:`usePosition <frontend/hooks/useposition>`
      - position an element relative to a target
+   * - :ref:`useSpellCheck <frontend/hooks/useSpellCheck>`
+     - activate spellcheck on focus for input or textarea
 
 .. _frontend/hooks/useassets:
 
@@ -240,10 +242,12 @@ API
      - the desired position. It is a string composed of one `Direction` and one
        `Variant` separated by a dash character.
        `Direction` could be: `top`, `bottom`, `right`, `left`.
-       `Variant` could be: `start`, `middle`, `end`.
+       `Variant` could be: `start`, `middle`, `end`, `fit`.
        The variant can be omitted (default variant is `middle`).
+       The `fit` variant means that the popper would have the exact same width or height,
+       depending on the chosen direction.
        Examples of valid positions: `right-end`, `top-start`, `left-middle`,
-       `left`. (default position: `bottom`)
+       `left`, `bottom-fit`. (default position: `bottom`)
    * - `onPositioned`
      - (el: HTMLElement, position: PositioningSolution) => void
      - a callback that will be called everytime a positioning occurs
@@ -282,3 +286,72 @@ API
           </t>
         </div>
       `;
+
+.. _frontend/hooks/useSpellCheck:
+
+useSpellCheck
+=============
+
+Location
+--------
+
+`@web/core/utils/hooks`
+
+Description
+-----------
+
+Activate the spellcheck state to an input or textarea on focus by a `t-ref="spellcheck"` in
+the current component. This state is then removed on blur, as well as the red outline, which
+improves readability of the content.
+
+The hook can also be used on any HTML element with the `contenteditable` attribute. To disable
+spellcheck completely on elements that might be enabled by the hook, set explicitly the
+`spellcheck` attribute as `false` on the element.
+
+.. example::
+
+   In the following example, the spellcheck will be enabled on the first input, the textarea and
+   the div with `contenteditable="true"`.
+
+   .. code-block:: javascript
+
+       import { useSpellCheck } from "@web/core/utils/hooks";
+
+       class Comp {
+         setup() {
+           this.simpleRef = useSpellCheck();
+           this.customRef = useSpellCheck({ refName: "custom" });
+           this.nodeRef = useSpellCheck({ refName: "container" });
+         }
+         static template = "Comp";
+       }
+
+   .. code-block:: xml
+
+       <t t-name="Comp" owl="1">
+         <input t-ref="spellcheck" type="text"/>
+         <textarea t-ref="custom"/>
+         <div t-ref="container">
+           <input type="text" spellcheck="false"/>
+           <div contenteditable="true"/>
+         </div>
+       </t>
+
+API
+---
+
+.. js:function:: useSpellCheck([options])
+
+    :param Options options: the spellcheck options (see table below)
+
+.. list-table::
+   :widths: 20 20 60
+   :header-rows: 1
+
+   * - Option
+     - Type
+     - Description
+   * - `refName`
+     - string
+     - this is a `useRef reference <{OWL_PATH}/doc/reference/hooks.md#useref>`_ for the element that will be
+       spellcheck enabled.