[IMP] knowledge/commands: update Knowledge and HTML editor docs

task-5173838

closes #15312

X-original-commit: c740037
Signed-off-by: Emmanuel Minga (EMMI) <emmi@odoo.com>

Author: emmi-odoo

content/applications/essentials/html_editor.rst

@@ -4,12 +4,12 @@
 Odoo rich-text editor
 =====================
 
-The Odoo rich-text editor allows creating and editing rich-text content in HTML fields, such as the
-:guilabel:`Internal Notes` and :guilabel:`Description` fields, as well as in the :ref:`Knowledge
-articles <knowledge/articles_editing/edit-article>` and the :ref:`Studio report
-editor <studio/pdf-reports/report-editor>`, among others. Start typing or use the
-:ref:`toolbar <essentials/html_editor/toolbar>` or :ref:`powerbox
-<essentials/html_editor/commands>` for formatting and structuring text.
+The Odoo rich-text editor allows for creating and editing rich-text content in HTML fields, such as
+the :guilabel:`Internal Notes` and :guilabel:`Description` fields, as well as in the :ref:`Knowledge
+articles <knowledge/articles_editing/edit-article>` and the :ref:`Studio report editor
+<studio/pdf-reports/report-editor>`, among others. Start typing or use the :ref:`toolbar
+<essentials/html_editor/toolbar>` or :ref:`powerbox <essentials/html_editor/commands>` for
+formatting and structuring text.
 
 .. tip::
    Hover over any element in the text (header, table, clipboard, etc.) to reveal the
@@ -22,51 +22,75 @@ Text editor toolbar
 ===================
 
 To edit a word, sentence, or paragraph, select or double-click it to display the text editor
-toolbar and apply any of the following formatting options:
+toolbar and apply any of the following standard formatting options:
 
-- **Font style**: Change the style using various options, such as :guilabel:`Header 1 to 6,
+- **Font style**: Define the font style using various options, such as :guilabel:`Header 1 to 6,
   Normal, Paragraph, Code`, and :guilabel:`Quote`.
-- :guilabel:`B`: Put the text in bold.
-- :guilabel:`I`: Put the text in italics.
-- :guilabel:`U`: Underline the text.
-- :guilabel:`S`: Strike through the text.
-- :guilabel:`A` and :icon:`fa-paint-brush` :guilabel:`(paintbrush)` to customize the font and
-  background colors, respectively:
+- **Font size**: Select the preferred font size.
+- :icon:`fa-bold` (:guilabel:`Toggle bold`): Put the text in bold.
+- :icon:`fa-italic` (:guilabel:`Toggle italic`): Put the text in italics.
+- :icon:`fa-underline` (:guilabel:`Toggle underline`): Underline the text.
+- :icon:`fa-font` (:guilabel:`Apply Font Color`): Customize the font colors:
 
   - :guilabel:`Solid`: Select the preferred color from the predefined palette.
   - :guilabel:`Custom`: Customize the color palette using the wheel or by configuring the
     :guilabel:`hex` code and :guilabel:`RGBA` values.
   - :guilabel:`Gradient`: Select a predefined gradient or customize it by choosing
     between :guilabel:`Linear` or :guilabel:`Radial` and adjusting the wheel.
+  - :icon:`fa-trash` (:guilabel:`Reset`): Restore the original font/background color.
 
-- **Font size**: Adjust the size of the text.
-- :icon:`fa-list-ul` (:guilabel:`bulleted list`): Turn the text into a bulleted list.
-- :icon:`fa-list-ol` (:guilabel:`numbered list`): Turn the text into a numbered list.
-- :icon:`fa-check-square-o` (:guilabel:`checklist`): Turn the text into a checklist.
-- :icon:`fa-link` (:guilabel:`link`): Insert or edit a URL link to a selected text, and optionally
-  upload an image using its file URL.
-- :guilabel:`Translate`: Translate the content in the :doc:`installed languages
-  </applications/general/users/language>`.
-- :icon:`fa-magic` :guilabel:`AI` (:guilabel:`ChatGPT`): Get AI-generated suggestions and adjust
-  the tone by clicking buttons such as :guilabel:`Correct, Shorten, Lengthen, Friendly,
-  Professional`, and :guilabel:`Persuasive`.
+- :icon:`fa-link` (:guilabel:`Add a link`): Insert or edit a URL link to a selected text, and
+  optionally upload an image using its file URL.
+- :guilabel:`Odoo AI`: Write a prompt and get AI-generated content. Optionally, click the
+  AI suggestions instead of writing a prompt.
+
+Click the :icon:`fa-ellipsis-v` (:guilabel:`Expand toolbar`) icon to display additional formatting
+options:
+
+- **Font family**: Use the :guilabel:`Default system font` or select a preferred font family for
+  the text.
+- :icon:`fa-strikethrough` (:guilabel:`Toggle strikethrough`): Strike through the text.
+- :icon:`fa-paint-brush` :guilabel:`(Apply Background Color)`: Customize the background colors.
+- :icon:`fa-eraser` (:guilabel:`Remove Format`): Remove all formatting applied to a selected text.
+- :icon:`fa-list-ul` (:guilabel:`Toggle List`): Select the following list options:
+
+  - :icon:`fa-list-ul` (:guilabel:`Bulleted list`): Turn the text into a bulleted list.
+  - :icon:`fa-list-ol` (:guilabel:`Numbered list`): Turn the text into a numbered list.
+  - :icon:`fa-check-square-o` (:guilabel:`Checklist`): Turn the text into a checklist.
+
+- :icon:`fa-align-left` (:guilabel:`Align text`): Select the following text alignments:
+
+  - :icon:`fa-align-left` (:guilabel:`align left`): Align the text on the left.
+  - :icon:`fa-align-center` (:guilabel:`align center`): Align the text in the center.
+  - :icon:`fa-align-right` (:guilabel:`align right`): Align the text on the right.
+  - :icon:`fa-align-justify` (:guilabel:`justify`): Apply straight edges to both text margins.
+
+- :guilabel:`Translate with AI`: Translate the content in the :doc:`installed languages
+  </applications/general/users/language>` with AI.
 
 .. image:: html_editor/style-and-colors.png
    :alt: Text editor's toolbox
 
-
 .. tip::
-   Use the following keyboard shortcuts to apply formatting:
-      - **Emphasis**: Press `CTRL`/`CMD` + `B`, `CTRL`/`CMD` + `I`, or `CTRL`/`CMD` + `U` to apply
-        the bold, italics, or underlined effect.
-      - **Numbered list**: Type `1.`, `1)`, `A.`, or `A)` to start a numbered list.
-      - **Bulleted list**: Type `*` or `-` to start a bulleted list.
+   - Use the following keyboard shortcuts to apply formatting:
+
+     - **Emphasis**: Press `CTRL`/`CMD` + `B`, `CTRL`/`CMD` + `I`, or `CTRL`/`CMD` + `U` to apply
+       the bold, italics, or underlined effect.
+     - **Numbered list**: Type `1.`, `1)`, `A.`, or `A)` to start a numbered list.
+     - **Bulleted list**: Type `*` or `-` to start a bulleted list.
+
+   - Click a hyperlinked text and perform one of the following actions: :icon:`fa-clipboard`
+     (:guilabel:`Copy Link`), :icon:`fa-pencil-square-o` (:guilabel:`Edit Link`), or
+     :icon:`fa-chain-broken` (:guilabel:`Remove Link`).
 
 .. _essentials/html_editor/commands:
 
 Powerbox commands
 =================
 
+Commands enable editing and managing various types of features within the text editor, such as
+tables, banners, headers, and more.
+
 To use a command, type `/` to open the powerbox, then enter the command's name or select from
 multiple features to insert tables, images, banners, etc.
 
@@ -88,26 +112,24 @@ multiple features to insert tables, images, banners, etc.
 
          * - Command
            - Use
-         * - :guilabel:`Separator`
+         * - :icon:`fa-minus` :guilabel:`Separator`
            - Insert a horizontal rule separator.
-         * - :guilabel:`2 columns`
+         * - :icon:`fa-columns` :guilabel:`2 columns`
            - Convert into 2 columns.
-         * - :guilabel:`3 columns`
+         * - :icon:`fa-columns` :guilabel:`3 columns`
            - Convert into 3 columns.
-         * - :guilabel:`4 columns`
+         * - :icon:`fa-columns` :guilabel:`4 columns`
            - Convert into 4 columns.
-         * - :guilabel:`Table`
+         * - :icon:`fa-table` :guilabel:`Table`
            - Insert a table.
-         * - :guilabel:`Bulleted list`
+         * - :icon:`fa-list-ul` :guilabel:`Bulleted list`
            - Create a bulleted list.
-         * - :guilabel:`Numbered list`
+         * - :icon:`fa-list-ol` :guilabel:`Numbered list`
            - Create a numbered list.
-         * - :guilabel:`Checklist`
+         * - :icon:`fa-check-square-o` :guilabel:`Checklist`
            - Create a checklist.
-         * - :guilabel:`Quote`
-           - Add a blockquote section.
-         * - :guilabel:`Code`
-           - Add a code section.
+         * - :icon:`fa-caret-square-o-right` :guilabel:`Toggle list`
+           - Hide a group of text under a foldable toggle.
 
       .. note::
          To organize a table, hover over a column or row to reveal the table menu. Click the
@@ -117,40 +139,44 @@ multiple features to insert tables, images, banners, etc.
    .. tab:: Banner
 
       .. list-table::
-         :widths: 20 80
+         :widths: 30 70
          :header-rows: 1
          :stub-columns: 1
 
          * - Command
            - Use
-         * - :guilabel:`Banner Info`
+         * - :icon:`fa-info-circle` :guilabel:`Banner Info`
            - Insert an info banner.
-         * - :guilabel:`Banner Success`
+         * - :icon:`fa-check-circle` :guilabel:`Banner Success`
            - Insert a success banner.
-         * - :guilabel:`Banner Warning`
+         * - :icon:`fa-exclamation-triangle` :guilabel:`Banner Warning`
            - Insert a warning banner.
-         * - :guilabel:`Banner Danger`
+         * - :icon:`fa-exclamation-circle` :guilabel:`Banner Danger`
            - Insert a danger banner.
 
    .. tab:: Format
 
       .. list-table::
-         :widths: 20 80
+         :widths: 30 70
          :header-rows: 1
          :stub-columns: 1
 
          * - Command
            - Use
-         * - :guilabel:`Heading 1`
+         * - :icon:`fa-header` :guilabel:`Heading 1`
            - Big section heading.
-         * - :guilabel:`Heading 2`
+         * - :icon:`fa-header` :guilabel:`Heading 2`
            - Medium section heading.
-         * - :guilabel:`Heading 3`
+         * - :icon:`fa-header` :guilabel:`Heading 3`
            - Small section heading.
-         * - :guilabel:`Text`
+         * - :icon:`fa-paragraph` :guilabel:`Text`
            - Paragraph block: Insert a paragraph.
-         * - :guilabel:`Switch direction`
+         * - :icon:`fa-exchange` :guilabel:`Switch direction`
            - Switch the text's direction.
+         * - :icon:`fa-quote-right` :guilabel:`Quote`
+           - Add a blockquote section.
+         * - :icon:`fa-code` :guilabel:`Code`
+           - Add a code section.
 
    .. tab:: Media
 
@@ -161,39 +187,30 @@ multiple features to insert tables, images, banners, etc.
 
          * - Command
            - Use
-         * - :guilabel:`Media`
+         * - :icon:`fa-file-image-o` :guilabel:`Media`
            - :ref:`Insert an image <insert-media>` or icon: :doc:`Search the Unsplash database
              </applications/general/integrations/unsplash>` or upload images, documents, or icons.
-         * - :guilabel:`Clipboard`
-           - Add a clipboard section to store content and reuse it in other apps.
-         * - :guilabel:`Upload a file`
+         * - :icon:`fa-upload` :guilabel:`Upload a file`
            - Add a download box: share images, recordings, or documents that internal users can
              download.
 
    .. tab:: Navigation
 
       .. list-table::
-         :widths: 20 80
+         :widths: 30 70
          :header-rows: 1
          :stub-columns: 1
 
          * - Command
            - Use
-         * - :guilabel:`Link`
+         * - :icon:`fa-link` :guilabel:`Link`
            - Add a link: Type the label and enter a URL or upload a file, then click
              :guilabel:`Apply`.
-         * - :guilabel:`Button`
+         * - :icon:`fa-link` :guilabel:`Button`
            - Add a button: Type the label, enter a URL or upload a file, select the button style,
              type, and size, then click :guilabel:`Apply`.
-         * - :guilabel:`Article`
-           - Insert a shortcut to a :doc:`Knowledge article </applications/productivity/knowledge>`.
-         * - :guilabel:`Appointment`
-           - Add a specific appointment: Select one or several appointment type(s) to assign to
-             relevant users, then click :guilabel:`Insert a link`.
-         * - :guilabel:`Table Of Content`
+         * - :icon:`fa-bookmark` :guilabel:`Table Of Contents`
            - Highlight the structure (headings): Create a table of content based on the headings.
-         * - :guilabel:`Video Link`
-           - Insert a video: Copy-paste the video URL (Youtube, Vimeo, Dailymotion, and Youku only).
 
    .. tab:: Widget
 
@@ -204,43 +221,19 @@ multiple features to insert tables, images, banners, etc.
 
          * - Command
            - Use
-         * - :guilabel:`Emoji`
+         * - :icon:`fa-smile-o` :guilabel:`Emoji`
            - Add an emoji: search for the desired emoji.
-         * - :guilabel:`3 Stars`
+         * - :icon:`fa-star-o` :guilabel:`3 Stars`
            - Insert a rating of up to 3 stars.
-         * - :guilabel:`5 Stars`
+         * - :icon:`fa-star` :guilabel:`5 Stars`
            - Insert a rating of up to 5 stars.
 
-   .. tab:: AI Tools
-
-     .. list-table::
-       :widths: 20 80
-       :header-rows: 1
-       :stub-columns: 1
-
-       * - Command
-         - Use
-       * - :guilabel:`ChatGPT`
-         - Generate content with AI.
-
-   .. tab:: Basic Block
-
-      .. list-table::
-         :widths: 20 80
-         :header-rows: 1
-         :stub-columns: 1
-
-         * - Command
-           - Use
-         * - :guilabel:`Signature`
-           - Insert your signature.
-
 .. _insert-media:
 
 Insert media
 ------------
 
-To insert media, type `/Media` or click the :icon:`fa-file-image-o` :guilabel:`(image)` icon in the
+To insert media, type `/Media` or click the :icon:`fa-file-image-o` :guilabel:`(media)` icon in the
 tooltip, then choose from the following tabs:
 
 - :guilabel:`Images`
@@ -256,41 +249,58 @@ tooltip, then choose from the following tabs:
    - :guilabel:`Add URL`: Copy-paste a valid URL.
    - :guilabel:`Upload a document`: Upload a document from a local drive.
 
-- :guilabel:`Icons`: Search an icon from the selection in the database.
+- :guilabel:`Icons`: Search for and select one of the available icons.
+- :guilabel:`Videos`: Paste a video URL of the following sources: YouTube, Vimeo, Dailymotion, and
+  Youku. Alternatively, type code to embed a video.
+
+.. note::
+   When adding a video, use the toggles to enable autoplay or looping, hide player controls or the
+   fullscreen button, or set a start time.
 
 Media editor toolbar
 ~~~~~~~~~~~~~~~~~~~~
 
 After :ref:`inserting an image <insert-media>`, click it to display the media editor toolbar, and
 apply any of the following formatting options:
 
-- :icon:`fa-search-plus` (:guilabel:`preview`): Preview the image, zoom in or out, print it or
-  download it. Exit the preview by clicking the :icon:`fa-times` :guilabel:`(close)` icon in the
-  top right corner.
-- :guilabel:`Description`: Edit the image description and tooltip, then click :guilabel:`Save`.
-- :icon:`fa-square` (:guilabel:`rounded`): Apply a rounded shape to the corners of the image.
-- :icon:`fa-circle-o` (:guilabel:`circle`): Apply a circular shape to the image.
-- :icon:`fa-sun-o` (:guilabel:`shadow`): Apply a shadow effect to the image.
-- :icon:`fa-picture-o` (:guilabel:`image`): Apply a border to the image.
-- :icon:`fa-plus-square-o` (:guilabel:`padding`): Add an image padding and choose from small,
-  medium, large, or extra large sizes.
-- :guilabel:`Default`: Restore the image to its default size.
-- :guilabel:`100%`: Set the image to full size.
-- :guilabel:`50%`: Set the image to half its size.
-- :guilabel:`25%`: Set the image to a quarter of its size.
+- :icon:`fa-search-plus` (:guilabel:`Preview image`): Preview the image, zoom in or out, rotate it,
+  print it, or download it. Exit the preview by clicking the :icon:`fa-times` :guilabel:`(close)`
+  icon in the top right corner.
+- :guilabel:`Description`: Edit the image description and tooltip, then click :guilabel:`Apply`.
+- :guilabel:`Caption`: Write a caption under 100 characters below the image.
+- :icon:`fa-square` (:guilabel:`Rounded`): Apply a rounded shape to the corners of the image.
+- :icon:`fa-circle-o` (:guilabel:`Circle`): Apply a circular shape to the image.
+- :icon:`fa-sun-o` (:guilabel:`Shadow`): Apply a shadow effect to the image.
+- :icon:`fa-picture-o` (:guilabel:`Thumbnail`): Apply a border to the image.
+- :icon:`fa-plus-square-o` (:guilabel:`Padding`): Add an image padding and choose from
+  :guilabel:`Small`, :guilabel:`Medium`, :guilabel:`Large`, or :guilabel:`XL` sizes.
+- :guilabel:`Resize`: Restore the image to its default size or set its size to :guilabel:`25%`,
+  :guilabel:`50%`, or :guilabel:`100%`.
 - :icon:`fa-object-ungroup` (:guilabel:`object`): Resize and rotate the image. Click the
   :icon:`fa-object-ungroup` :guilabel:`(object)` icon a second time to reset the transformation.
-- :icon:`fa-crop` (:guilabel:`crop`): Crop the image manually or apply the following options:
+- :icon:`fa-crop` (:guilabel:`Crop image`): Crop the image manually or apply the following options:
 
    - Choose from the `Flexible`, `16:9`, `4:3`, `1:1`, or `2:3` aspect ratios.
    - Zoom in or out.
    - Rotate left or right.
    - Flip horizontally or vertically.
    - Reset the image.
 
-- :guilabel:`Replace`: Replace the image by searching in the :doc:`Unsplash
+- :icon:`fa-link` (:guilabel:`Add a link`): Add a link to the image, type the URL, then click
+  :guilabel:`Apply`. To remove the link, click :icon:`fa-unlink` (:guilabel:`Remove Link`).
+- :icon:`fa-exchange` (:guilabel:`Replace`): Replace the image by searching in the :doc:`Unsplash
   </applications/general/integrations/unsplash>` database, adding a URL, or uploading a different
   one.
-- :icon:`fa-link` (:guilabel:`link`): Insert a link to the image, type the URL, then click
-  :guilabel:`Apply`. To remove the link, click the :icon:`fa-chain-broken` :guilabel:`(unlink)` icon.
-- :icon:`fa-trash` (:guilabel:`trash`): Remove the image.
+- :icon:`fa-trash` (:guilabel:`Delete`): Delete the image.
+
+Icon editor toolbar
+~~~~~~~~~~~~~~~~~~~
+
+After :ref:`inserting an icon <insert-media>`, click it to display the icon editor toolbar, and
+apply any of the following formatting options:
+
+- :icon:`fa-font` (:guilabel:`Select Font Color`): Customize the font color.
+- :icon:`fa-paint-brush` (:guilabel:`Select Background Color`): Customize the background color.
+- :guilabel:`Resize icon`: From :guilabel:`1x` to :guilabel:`5x`.
+- :icon:`fa-play` (:guilabel:`Toggle icon spin`): Activate the spin animation.
+- :guilabel:`Replace`: Select a different icon.