IBX-10684: Document translation management

docs/content_management/create_edit_content_items.md

@@ -135,7 +135,7 @@ Invited users can either edit the Rich Text fields or only preview the content (
 You can edit embedded content items without leaving current window.
 
 To do it, first insert selected content item in the Rich Text field.
-Then, click the three dots icon on the right side and click **Edit**.
+Then, click the three dots icon and click **Edit**.
 
 ![Edit embedded content item](img/edit_embedded_item_richtext.png "Edit embedded content item")
 

docs/content_management/translate_content.md

@@ -8,6 +8,8 @@
 Each content item can have different language versions.
 The version visible to a visitor depends on the way your installation is set up (see [SiteAccess concept](#edit-page-for-different-language-versions-of-a-website)).
 
+If the [Translations management](#translations-management) LTS Update is installed in your system, [[= product_name =]] offers a side-by-side translation view that displays the source and target languages simultaneously, making it easier for you to provide, edit and review translations.
+
 ## Add website languages
 
 You can only add translations in languages that have been set up for your website in the **Admin** panel.
@@ -17,11 +19,17 @@
 Every new language must have a name and a language code written in the xxx-XX format, for example, eng-US, fre-FR, or nor-NO.
 After adding a language, you may have to reload the application to be able to use it.
 
+!!! note "Previewing translations"
+
+    You can only preview content items translated to languages that have a corresponding website configured in that language.
+
+    ![Preview limitation](img/translation_preview_impossible.png "Preview limitation")
+
 !!! caution
 
     Depending on the way the website is set up, additional configuration may be necessary for the new translations to be displayed properly.
     Contact your administrator and inform them that you need to add a new language to the website.
-    For more information, see [Developer Documentation on language versions]([[= developer_doc =]]/multisite/languages/languages/)).
+    For more information, see [Developer Documentation on language versions]([[= developer_doc =]]/multisite/languages/languages/).
 
 ## Add translations
 
@@ -44,7 +52,124 @@
 
 <!--ARCADE EMBED START--><div style="position: relative; padding-bottom: calc(51.27314814814815% + 41px); height: 0; width: 100%;"><iframe src="https://demo.arcade.software/wrOL621W0E3uAwSOBBmZ?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Add translation" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;" ></iframe></div><!--ARCADE EMBED END-->
 
-### Automated translation
+## Translations management [[% include 'snippets/lts-update_badge.md' %]]
+
+If the translations management feature [is installed and properly configured]([[= developer_doc =]]/multisite/languages/translations_management) in your system, the set of features available for content translation changes:
+
+- Application administrators can [define language pairs]([[= developer_doc =]]/multisite/languages/translations_management/#define-language-pairs) and assign [translation providers]([[= developer_doc =]]/multisite/languages/translations_management/#configure-translation-providers) to them.
+- Content editors get a redesigned translation interface called side-by-side translation view. If at least one automated translation provider is configured, editors can use them to machine-translate content.
+
+### Side-by-side translation view
+
+The side-by-side translation view displays the source and target text of the content item on one screen.
+This way you can add, modify or review translations in context without having to switch between tabs or windows.
+
+Depending on [user settings](get_started.md#user-settings), the source language column appears on the left or right of the side-by-side view.
+By default, the source is on the left.
+
+Non-translatable fields are inactive in the source column, but they remain active in the translation column.
+This way you can, for example, replace images, with their localized counterparts.
+
+![Side-by-side translation view](img/managing_translations_sxs_view.png "Side-by-side translation view")
+
+Like in the standard content item editor, when multiple sections or field groups exist within the content item, anchors appear at the top of the side-by-side translation view to help you jump directly to a specific section.
+
+!!! note "Content type support limitations"
+
+    Content types that use Page Builder or Form Builder do not support the side-by-side translation view and open in the standard single-language editor instead.
+
+    Also, product attributes are not translatable and they are inactive in the side-by-side translation view.
+
+The back office offers several entry points where you can access the side-by-side translation view, for example:
+
+- **Translations tab** — Go to **Content** -> **Content structure**, select a content item, open the **Translations** tab, and click **+ Add**.
+- **Content tree** — Click a three dot icon next to a content item in the content tree and, in the context menu, click **Add translation**.
+- **Content edit view** — When you choose to edit a content item and several language versions exist, the **Edit side-by-side** button is active for all languages that differ from the main language of the content item.
+
+![Starting the translation from the context menu](img/translate_from_content_tree.png "Starting the translation from the context menu")
+
+### Add new translation
+
+1. Either click **Add translation** in the content tree, or **+ Add** in the **Translations** tab.
+3. In the **Create a new translation** modal, select the source and target languages.
+
+    !!! note "Draft conflict"
+
+        If a draft already exists for the selected target language, a warning appears in the modal to inform you about this fact.
+        You can proceed and add a new draft, or discard the modal and edit the existing draft translation.
+        For more information, see [Edit existing translations](#edit-existing-translations).
+
+4. If **Use automatic translation** is checked, select a translation provider from a drop-down list.
+
+    !!! note "Manual translation"
+
+        You may prefer to translate the content by yourself.
+        To do it, uncheck **Use automatic translation** and proceed.
+
+        If no translation provider are configured in the system, the checkbox is inactive.
+
+5. Click **Open side-by-side**.
+
+![Create a new translation modal](img/create_translation.png "Create a new translation modal")
+
+The side-by-side translation view opens with the source text in one column and the target form in the other.
+Depending on whether you chose to use automated translations, target fields can be empty or pre-translated.
+
+#### Copy content from source
+
+The divider between the source and target columns contains a **Copy all from source** button.
+Click it to copy all translatable field values from the source column into the target fields in a single action.
+
+Values of all fields are copied at the same time, and there is no option to copy individual fields.
+
+![Copy all from source button in the middle of the side-by-side view](img/side_by_side_view.png "Copy all from source button in the middle of the side-by-side view")
+
+#### Change source language
+
+When a content item has three or more published language versions, a dropdown field appears at the top of the source column instead of a label.
+You can use the dropdown list to change the language that is displayed in the source column.
+
+#### Hide the source
+
+When the source is placed on the right, the divider between the source and target columns contains a **Collapse source language** button.
+The button toggles the source panel visibility, allowing editors to hide the source text when they no longer need it.
+
+#### Distraction-free mode
+
+The distraction mode helps you focus on editing the text or work with longer texts that take more space.
+
+Click the **Distraction free mode** button next to any field in the target column to open a full-screen view of that field.
+Like in the standard mode, in the distraction-free mode, the source text is visible next to the target field for reference.
+However, the **Copy content from source** button is absent.
+
+In distraction-free mode, AI actions, including automatic translation, are available from the editor toolbar.
+
+![Distraction-free mode](img/translations_distraction_free_mode.png "Distraction-free mode")
+
+When the source is displayed on the right, the **Collapse source language** button displays here as well to let editors hide the source text.
+
+### Edit existing translations
+
+The back office offers several entry points where you edit existing content item translations.
+
+To edit a draft translation:
+
+- In content tree, select a content item and open the **Versions** tab. Click a three dot icon next to a draft translation that you want to edit and, in the context menu, click **Edit side-by-side**.
+- In the main menu, go to **Content** or visit the **My dashboard** page, and go to **Drafts**. Find a draft whose source and target languages differ and click **Edit side-by-side**.
+
+This opens the existing draft in the side-by-side translation view, so you can review and refine a translation without creating a new draft.
+
+To edit a published translation:
+
+- In content tree, select a content item and click **Edit**. If more than one language version of a content item exists, a list of all available translations is displayed in the **Select translation** modal. Select a language and click the **Edit side-by-side** button.
+
+This opens the side-by-side translation view, where you can perform a review or make your changes and either publish directly create a new draft.
+
+!!! tip
+
+    The **Edit side-by-side** button is active only for languages other than the main language of the content item.
+
+## Automated translation
 
 If your application comes with a [properly configured automated translation feature]([[= developer_doc =]]/multisite/languages/automated_translations), you can have your content machine-translated into multiple languages by using external translation services like Google Translate and DeepL.
 

docs/getting_started/dashboard/work_with_dashboard.md

@@ -141,7 +141,7 @@ The following actions are available:
 ## Edit dashboard
 
 At any time you can edit an active customized dashboard.
-To do it, click the three dots icon in the top right corner, and then click **Edit...**.
+To do it, click the three dots icon in the top corner, and then click **Edit...**.
 
 ![Edit dashboard](edit_active_dashboard.png "Edit dashboard")
 
@@ -172,4 +172,4 @@ Select the dashboard to be set as active, and click **Save**.
 You can also select active dashboard and switch between default and customized dashboard in the main dashboard view.
 Click the three dots menu and use the **Switch to...** action.
 
-![Switch between dashboards](switch_dashboard.png "Switch between dashboards")
+![Switch between dashboards](switch_dashboard.png "Switch between dashboards")

docs/getting_started/get_started.md

@@ -125,6 +125,8 @@
 |Help center|Enables or disables the [help center](discover_ui.md#help-center). [[% include 'snippets/lts-update_badge.md' %]]|
 |Product tour|Enables or disables the [product tour onboarding](#onboarding) walkthroughs. [[% include 'snippets/lts-update_badge.md' %]]|
 |Product tour scenarios settings|Separate setting for each available product tour scenario. Allows you to mark each scenario as completed or reset its progress. [[% include 'snippets/lts-update_badge.md' %]]|
+|Side-by-side layout|Decides on which side of the screen the target language column should be displayed in the [side-by-side translation view](translate_content.md#side-by-side-translation-view). [[% include 'snippets/lts-update_badge.md' %]]|
+|Automatic translation for new items|Controls the behavior of the [**Create a new translation** modal](translate_content.md#add-new-translation). When activated, the **Use automatic translation** checkbox is selected and the default translation service for the language pair is preselected. Inactive when no automated translation services are defined. [[% include 'snippets/lts-update_badge.md' %]]|
 
 #### Mode
 

docs/getting_started/notifications.md

@@ -29,7 +29,7 @@ If you have already received notifications and didn't act on then, a number of n
 Click the notification icon to view a short list with the most recent notifications, arranged from newest to oldest.
 Here, you can click certain notifications in the short list to act on them, according to their originator's request.
 
-You can click the three dots icon on the right side of each individual notification and mark it as read or delete it.
+You can click the three dots icon next to each individual notification and mark it as read or delete it.
 You can also click **Mark all as read** to mark all notifications as read.
 
 ![Short list of notifications](notifications_short_list.png "Short list of notifications")