[IMP] productivity/knowledge: Articles editing updated

task-4444310

closes #11939

Signed-off-by: Audrey Vandromme (auva) <[email protected]>

Author: emmi-odoo

content/applications/essentials.rst

@@ -7,6 +7,7 @@ Odoo essentials
    essentials/activities
    essentials/reporting
    essentials/search
+   essentials/html_editor
    essentials/contacts
    essentials/export_import_data
    essentials/in_app_purchase

content/applications/essentials/html_editor.rst

@@ -0,0 +1,296 @@
+.. _text-editor:
+
+=====================
+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 :doc:`Knowledge
+articles </applications/productivity/knowledge/articles_editing>` 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
+   :icon:`fa-sort` :guilabel:`(drag)` icon. Click and hold the icon to drag and drop the element
+   elsewhere in the text.
+
+.. _essentials/html_editor/toolbar:
+
+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:
+
+- **Font style**: Change the 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:
+
+  - :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.
+
+- **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`.
+
+.. image:: text_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.
+
+.. _essentials/html_editor/commands:
+
+Powerbox commands
+=================
+
+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.
+
+.. tip::
+   Starting a new paragraph displays a tooltip with command shortcut icons. Click an icon to add
+   the command, or click the :icon:`fa-ellipsis-v` (:guilabel:`ellipsis`) icon to open the
+   powerbox for all commands.
+
+.. note::
+   Commands specific to particular apps are excluded from this description.
+
+.. tabs::
+   .. tab:: Structure
+
+      .. list-table::
+         :widths: 20 80
+         :header-rows: 1
+         :stub-columns: 1
+
+         * - Command
+           - Use
+         * - :guilabel:`Separator`
+           - Insert a horizontal rule separator.
+         * - :guilabel:`2 columns`
+           - Convert into 2 columns.
+         * - :guilabel:`3 columns`
+           - Convert into 3 columns.
+         * - :guilabel:`4 columns`
+           - Convert into 4 columns.
+         * - :guilabel:`Table`
+           - Insert a table.
+         * - :guilabel:`Bulleted list`
+           - Create a bulleted list.
+         * - :guilabel:`Numbered list`
+           - Create a numbered list.
+         * - :guilabel:`Checklist`
+           - Create a checklist.
+         * - :guilabel:`Quote`
+           - Add a blockquote section.
+         * - :guilabel:`Code`
+           - Add a code section.
+
+      .. note::
+         To organize a table, hover over a column or row to reveal the table menu. Click the
+         :icon:`fa-ellipsis-h` :guilabel:`(ellipsis)` icon to move, insert, or delete a column or
+         row.
+
+   .. tab:: Banner
+
+      .. list-table::
+         :widths: 20 80
+         :header-rows: 1
+         :stub-columns: 1
+
+         * - Command
+           - Use
+         * - :guilabel:`Banner Info`
+           - Insert an info banner.
+         * - :guilabel:`Banner Success`
+           - Insert a success banner.
+         * - :guilabel:`Banner Warning`
+           - Insert a warning banner.
+         * - :guilabel:`Banner Danger`
+           - Insert a danger banner.
+
+   .. tab:: Format
+
+      .. list-table::
+         :widths: 20 80
+         :header-rows: 1
+         :stub-columns: 1
+
+         * - Command
+           - Use
+         * - :guilabel:`Heading 1`
+           - Big section heading.
+         * - :guilabel:`Heading 2`
+           - Medium section heading.
+         * - :guilabel:`Heading 3`
+           - Small section heading.
+         * - :guilabel:`Text`
+           - Paragraph block: Insert a paragraph.
+         * - :guilabel:`Switch direction`
+           - Switch the text's direction.
+
+   .. tab:: Media
+
+      .. list-table::
+         :widths: 20 80
+         :header-rows: 1
+         :stub-columns: 1
+
+         * - Command
+           - Use
+         * - :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`
+           - Add a download box: share images, recordings, or documents that internal users can
+             download.
+
+   .. tab:: Navigation
+
+      .. list-table::
+         :widths: 20 80
+         :header-rows: 1
+         :stub-columns: 1
+
+         * - Command
+           - Use
+         * - :guilabel:`Link`
+           - Add a link: Type the label and enter a URL or upload a file, then click
+             :guilabel:`Apply`.
+         * - :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`
+           - 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
+
+      .. list-table::
+         :widths: 20 80
+         :header-rows: 1
+         :stub-columns: 1
+
+         * - Command
+           - Use
+         * - :guilabel:`Emoji`
+           - Add an emoji: search for the desired emoji.
+         * - :guilabel:`3 Stars`
+           - Insert a rating of up to 3 stars.
+         * - :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
+tooltip, then choose from the following tabs:
+
+- :guilabel:`Images`
+
+   - Search the :doc:`Unsplash </applications/general/integrations/unsplash>` database to find a
+     suitable image.
+   - :guilabel:`Add URL`: Copy-paste the **image address**.
+   - :guilabel:`Upload an image`: Upload an image into the library.
+
+- :guilabel:`Documents`
+
+   - Search for a document in the database.
+   - :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.
+
+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-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:
+
+   - 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
+  </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.