Doc: Update Effect Composer docs

- Added info about the new Add to Library
functionality in Effect composer.
- Modified the formatting of alt-texts.

Task-number: QDS-15024
Change-Id: I6cbfb09579090015a3c0acac0fc59e006417894a
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc

@@ -23,7 +23,7 @@
     \QDS projects. To create an effect composition, select and adjust one or several
     of the pre-made effects or customize empty effect nodes as you wish.
 
-    \image studio-effect-composer.webp The Effect Composer view in Qt Design Studio.
+    \image {studio-effect-composer.webp} {The Effect Composer view in Qt Design Studio.}
 
     \section1 Creating an effect composition
 
@@ -38,13 +38,13 @@
                     select \imageplus to create a new one.
             \endlist
         \li To add effects to your composition, select \uicontrol {Add Effect}, and
-            then select the effects you wish to use from the dropdown menu. You can
+            then select the effects you wish to use from the effects library (3). You can
-            also add a \l {Using a custom effect in an effect composition}{Custom} effect
+            also add a \l {Creating a custom effect for an effect composition}{Custom} effect
             as a part of your effect composition. The added effects appear in the effect stack
-            (3). You cannot add the same pre-made effect twice to the composition. You can,
+            (4). You cannot add the same pre-made effect twice to the composition. You can,
             however, add more than one custom effect to the same composition.
         \li Adjust the effect parameters to modify your effect composition. View the preview
-            window (4) to see how the composition affects a component before assigning it to
+            window (5) to see how the composition affects a component before assigning it to
             one. Use the preview window toolbar to select the preview image and the preview
             window background color.
         \li Finally, select \imagesaveeffectcomposer to save your
@@ -54,16 +54,16 @@
             composition.
     \endlist
 
-    \image studio-effect-composer-assets.webp Effect Composer and the Assets view.
+    \image {studio-effect-composer-assets.webp} {The Effect Composer view and the Assets view.}
 
     The saved effect compositions appear in the \uicontrol {Assets} > \uicontrol Effects.
     To delete an effect composition, right-click it in the \uicontrol {Assets} view, and
     then select \uicontrol {Delete File}.
 
-    \section1 Using a custom effect in an effect composition
+    \section1 Creating a custom effect for an effect composition
 
     In addition to using the pre-made effects as described above, you can also add empty custom
-    effects in your composition. To add a custom effect to your \uicontrol {Effect Composer}
+    effects into your composition. To add a custom effect to your \uicontrol {Effect Composer}
     composition:
 
     \list 1
@@ -73,11 +73,26 @@
         custom effect.
     \endlist
 
-    \section1 Adding custom properties to an effect
+    You can save the custom effect to the effect library to use it in any composition. To save
+    the custom effect to the effect library:
+        \list 1
+            \li Select \imageedit, and name the effect.
+            \li Select \uicontrol {Add to Library}.
+        \endlist
 
-    You can use custom properties in your effect composition, for example, to modify pre-made
+    The saved effect appears in the \uicontrol Custom section of the effect library.
-    effects or to create completely unique effects. You can set the name, description, type, and
+
-    default value for your custom property.
+    \section1 Modifying pre-made effects
+
+    To modify the pre-made effects in the Effect Composer, edit their properties and change the
+    property values. You can also add custom properties to effects and save the customized
+    pre-made effects to the effect library.
+
+    \section2 Adding custom properties to an effect
+
+    You can add custom properties to effects in your effect composition, for example, to modify
+    pre-made effects or to create completely unique effects. You can set the name, description,
+    type, and default value for your custom property.
 
     To add a custom property to any effect in your effect composition:
 
@@ -95,12 +110,23 @@
 
     To remove a property from your effect composition, select \imagemorebutton > \uicontrol Remove.
 
+    \section2 Saving customised pre-made effects to the effect library
+
+    \list 1
+        \li Select \imageadvancedCodeView to enable the advanced mode.
+        \li Select \imageedit, and name the effect.
+        \li Select \uicontrol {Add to Library}.
+        \endlist
+
+    Similarly to custom effects, the modified pre-made effects appear in the \uicontrol Custom
+    section of the effect library after saving.
+
     \section1 Modifying the shader code of an effect
 
     You can modify the shader code of an effect in your effect composition using
     \uicontrol {Shaders Code Editor}.
 
-    \image shaders-code-editor.webp Shaders Code Editor.
+    \image {shaders-code-editor.webp} {Shaders Code Editor.}
 
     To open \uicontrol {Shaders Code Editor}:
 
@@ -109,10 +135,11 @@
         \li Select \uicontrol {Show Code}.
     \endlist
 
-    In the code section (1), you can switch between editing the Fragment shader and Vertex shader.
+    In the code section (1), you can switch between editing the Fragment shader and Vertex
+    shader.
 
-    To switch between the effect nodes in your effect composition, select the effect node from the
+    To switch between the effect nodes in your effect composition, select the effect node from
-    dropdown menu (2). To edit the main effect shader, select \uicontrol Main.
+    the dropdown menu (2). To edit the main effect shader, select \uicontrol Main.
 
     The properties in the effect node are visible in the property table (3). To change the visible
     columns in the property table, select columns from the dropdown menu (4).
@@ -163,8 +190,8 @@
 
     \section2 Using shaders from Shadertoy
 
-    First, add a \l{Using a custom effect in an effect composition}{custom effect} to your effect
+    First, add a \l{Creating a custom effect for an effect composition}{custom effect} to your
-    composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
+    effect composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
     tab of \uicontrol {Shaders Code Editor} with some adjustments:
         \list 1
             \li Copy the functions of the shader and paste them above the \c {@main} tag.
@@ -192,8 +219,8 @@
 
     \section2 Using shaders from The Book of Shaders
 
-    First, add a \l{Using a custom effect in an effect composition}{custom effect} to your effect
+    First, add a \l{Creating a custom effect for an effect composition}{custom effect} to your
-    composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
+    effect composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
     tab of \uicontrol {Shaders Code Editor} with some adjustments:
     \list 1
         \li Copy the functions of the shader and paste them above the \c {@main} tag.
@@ -271,7 +298,7 @@
 
     To use a component as the source for the \uicontrol {Opacity Mask} effect:
 
-    \image effect-composer-opacity-mask-scaled.webp The structure of a scaled opacity mask effect in the Navigator view.
+    \image {effect-composer-opacity-mask-scaled.webp} {The structure of a scaled opacity mask effect in the Navigator view.}
 
     \list 1
         \li In the \uicontrol {Effect Composer} view, create an \uicontrol {Opacity Mask}
@@ -290,7 +317,7 @@
 
     To use an unscaled component as the \uicontrol {Source Item}:
 
-    \image effect-composer-opacity-mask-unscaled.webp The structure of an unscaled opacity mask effect in the Navigator view.
+    \image {effect-composer-opacity-mask-unscaled.webp} {The structure of an unscaled opacity mask effect in the Navigator view.}
 
     \list 1
         \li In \uicontrol Components > \uicontrol {Default Components}, add an \uicontrol Item
@@ -305,8 +332,8 @@
         \li In \uicontrol Properties > \uicontrol Visibility, select the \uicontrol Visibility
             checkbox to show the \uicontrol {Source Item} component (4).
         \li In the \uicontrol Navigator view, select the effect (3).
-        \li In \uicontrol Properties > \uicontrol {Opacity Mask}, set the \uicontrol Item (1) added
+        \li In \uicontrol Properties > \uicontrol {Opacity Mask}, set the \uicontrol Item (1)
-            in the first step as \uicontrol {Source Item}.
+            added in the first step as \uicontrol {Source Item}.
     \endlist
 
 */