[ADD] web: add useSpellCheck hook documentation

This commit brings the documentation for the useSpellCheck hook,
introduced in commit (1). The documentation contains some example
and details on how to use the hook properly.

(1): 130719e584

Part-of: odoo/documentation#3261
This commit is contained in:
luvi 2023-01-02 13:33:20 +00:00
parent 5045aecce2
commit bca9ac151f

View File

@ -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:
@ -282,3 +284,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.