SpeechToText: Add API descriptions

api-reference/10 UI Components/dxSpeechToText/1 Configuration/Configuration.md

@@ -1,5 +1,7 @@
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A configuration object for the SpeechToText UI component.
 
 ---
+#####See Also#####
+#include common-link-configurewidget

api-reference/10 UI Components/dxSpeechToText/1 Configuration/customSpeechRecognizer.md

@@ -1,10 +1,15 @@
 ---
 id: dxSpeechToText.Options.customSpeechRecognizer
 type: CustomSpeechRecognizer
+inheritsType: CustomSpeechRecognizer
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+Allows you to implement custom speech recognition engines.
 
 ---
-<!-- Description goes here -->
+If you want to integrate a custom speech recognition engine, set **customSpeechRecognizer**.[enabled](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/#enabled) to `true`. When you implement a custom speech recognizer, SpeechToText no longer does the following:
+
+- Listens to user speech.
+- Updates the component state. Set the SpeechToText state using the **customSpeechRecognizer**.[isListening](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/#isListening) property.
+- Calls the [onResult](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/#onResult) and [onError](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/#onError) handlers.

api-reference/10 UI Components/dxSpeechToText/1 Configuration/onContentReady.md

@@ -4,16 +4,15 @@ type: function(e)
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A function that is executed when the UI component is rendered or repainted.
 
 ##### param(e): ui/speech_to_text:ContentReadyEvent
-<!-- Description goes here -->
+Information about the event.
 
 ##### field(e.component): {WidgetName}
-<!-- Description goes here -->
+The UI component's instance.
 
 ##### field(e.element): DxElement
-<!-- Description goes here -->
+#include common-ref-elementparam with { element: "UI component" }
 
 ---
-<!-- Description goes here -->

api-reference/10 UI Components/dxSpeechToText/1 Configuration/onDisposing.md

@@ -4,16 +4,16 @@ type: function(e)
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A function that is executed before the UI component is [disposed of]({basewidgetpath}/Methods/#dispose).
 
 ##### param(e): ui/speech_to_text:DisposingEvent
-<!-- Description goes here -->
+Information about the event.
 
 ##### field(e.component): {WidgetName}
-<!-- Description goes here -->
+The UI component's instance.
 
 ##### field(e.element): DxElement
-<!-- Description goes here -->
+#include common-ref-elementparam with { element: "UI component" }
 
 ---
 <!-- Description goes here -->

api-reference/10 UI Components/dxSpeechToText/1 Configuration/onEnd.md

@@ -5,16 +5,16 @@ default: undefined
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A function that is executed when the Web Speech API finishes transcription and SpeechToText switches to the initial component state.
 
 ##### param(e): ui/speech_to_text:EndEvent
-<!-- Description goes here -->
+Information about the event.
 
 ##### field(e.component): {WidgetName}
-<!-- Description goes here -->
+The UI component's instance.
 
 ##### field(e.element): DxElement
-<!-- Description goes here -->
+#include common-ref-elementparam with { element: "UI component" }
 
 ---
-<!-- Description goes here -->
+[note] The component does not call this handler if you implement a [custom speech recognition engine](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/).

api-reference/10 UI Components/dxSpeechToText/1 Configuration/onError.md

@@ -5,16 +5,86 @@ default: undefined
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A function that is executed when the Web Speech API encounters an [error](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/error_event).
 
 ##### param(e): ui/speech_to_text:ErrorEvent
-<!-- Description goes here -->
+Information about the event.
 
 ##### field(e.component): {WidgetName}
-<!-- Description goes here -->
+The UI component's instance.
 
 ##### field(e.element): DxElement
-<!-- Description goes here -->
+#include common-ref-elementparam with { element: "UI component" }
 
 ---
-<!-- Description goes here -->
+The following code snippet demonstrates how to implement the [notify()](/Documentation/ApiReference/Common/Utils/ui/#notifymessage_stack) utility method to display a Web Speech API error in the **onError** handler:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    $('#speech-to-text').dxSpeechToText({
+        onError(e) {
+            DevExpress.ui.notify(`Web Speech API encountered an error: ${e.event.error}`);
+        }
+    })
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-speech-to-text
+        (onError)="handleError($event)"
+    ></dx-speech-to-text>
+
+    <!-- tab: app.component.ts -->
+    import { DxSpeechToTextComponent, type DxSpeechToTextTypes } from 'devextreme-angular/ui/speech-to-text';
+    import notify from 'devextreme/ui/notify';
+
+    // ...
+    export class AppComponent {
+        handleError(e: DxSpeechToTextTypes.ErrorEvent) {
+            notify(`Web Speech API encountered an error: ${e.event.error}`);
+        }
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <DxSpeechToText
+            @error="handleError"
+        />
+    </template>
+
+    <script setup lang="ts">
+    import { DxSpeechToText, type DxSpeechToTextTypes } from 'devextreme-vue/speech-to-text';
+    import notify from 'devextreme/ui/notify';
+
+    function handleError(e: DxSpeechToTextTypes.ResultEvent) {
+        notify(`Web Speech API encountered an error: ${e.event.error}`);
+    }
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    import React from 'react';
+    import { SpeechToText, type SpeechToTextTypes } from 'devextreme-react/speech-to-text';
+    import notify from 'devextreme/ui/notify';
+
+    function handleError(e: DxSpeechToTextTypes.ResultEvent): void {
+        notify(`Web Speech API encountered an error: ${e.event.error}`);
+    }
+
+    function App(): JSX.Element {
+        return (
+            <SpeechToText
+                onError={handleError}
+            />
+        );
+    }
+
+---
+
+[note] The component does not call this handler if you implement a [custom speech recognition engine](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/).

api-reference/10 UI Components/dxSpeechToText/1 Configuration/onInitialized.md

@@ -4,16 +4,20 @@ type: function(e)
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A function used in JavaScript frameworks to save the UI component instance.
 
 ##### param(e): ui/speech_to_text:InitializedEvent
-<!-- Description goes here -->
+Information about the event.
 
 ##### field(e.component): {WidgetName}
-<!-- Description goes here -->
+The UI component's instance.
 
 ##### field(e.element): DxElement
-<!-- Description goes here -->
+#include common-ref-elementparam with { element: "UI component" }
 
 ---
-<!-- Description goes here -->
+#include common-code-on-initialized
+
+#####See Also#####
+
+#include common-get-instance

api-reference/10 UI Components/dxSpeechToText/1 Configuration/onOptionChanged.md

@@ -4,28 +4,134 @@ type: function(e)
 ---
 ---
 ##### shortDescription
-<!-- Description goes here -->
+A function that is executed after a UI component property is changed.
 
 ##### param(e): ui/speech_to_text:OptionChangedEvent
-<!-- Description goes here -->
+Information about the event.
 
 ##### field(e.component): {WidgetName}
-<!-- Description goes here -->
+The UI component's instance.
 
 ##### field(e.element): DxElement
-<!-- Description goes here -->
+#include common-ref-elementparam with { element: "UI component" }
 
 ##### field(e.fullName): String
-<!-- Description goes here -->
+The path to the modified property that includes all parent properties.
 
 ##### field(e.name): String
-<!-- Description goes here -->
+The modified property. For nested properties, returns the root-level property.
 
 ##### field(e.previousValue): any
-<!-- Description goes here -->
+The modified property's previous value.
 
 ##### field(e.value): any
-<!-- Description goes here -->
+The modified property's new value.
+
+---
+The following code snippet demonstrates how to subscribe to component property changes:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    $(function() {
+        $("#{widgetName}Container").dx{WidgetName}({
+            // ...
+            onOptionChanged: function(e) {
+                if(e.name === "changedProperty") {
+                    // handle the property change here
+                }
+            }
+        });
+    });
+
+##### Angular 
+
+    <!-- tab: app.component.html -->
+    <dx-{widget-name} ...
+        (onOptionChanged)="handlePropertyChange($event)"> 
+    </dx-{widget-name}> 
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import { type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
+
+    @Component({ 
+        selector: 'app-root', 
+        templateUrl: './app.component.html', 
+        styleUrls: ['./app.component.css'] 
+    }) 
+
+    export class AppComponent { 
+        // ...
+        handlePropertyChange(e: Dx{WidgetName}Types.OptionChangedEvent) {
+            if(e.name === "changedProperty") { 
+                // handle the property change here
+            }
+        }
+    } 
+
+    <!-- tab: app.module.ts -->
+    import { BrowserModule } from '@angular/platform-browser'; 
+    import { NgModule } from '@angular/core'; 
+    import { AppComponent } from './app.component'; 
+    import { Dx{WidgetName}Module } from 'devextreme-angular/ui/{widget-name}';
+
+    @NgModule({ 
+        declarations: [ 
+            AppComponent 
+        ], 
+        imports: [ 
+            BrowserModule, 
+            Dx{WidgetName}Module 
+        ], 
+        providers: [ ], 
+        bootstrap: [AppComponent] 
+    }) 
+
+    export class AppModule { }  
+
+##### Vue 
+
+    <!-- tab: App.vue -->
+    <template> 
+        <Dx{WidgetName} ...
+            @option-changed="handlePropertyChange"
+        />            
+    </template> 
+
+    <script>
+    import 'devextreme/dist/css/dx.fluent.blue.light.css'; 
+    import { Dx{WidgetName}, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}'; 
+
+    function handlePropertyChange: function(e: Dx{WidgetName}Types.OptionChangedEvent) {
+        if(e.name === "changedProperty") {
+            // handle the property change here
+        }
+    }
+    </script>
+
+##### React 
+
+    <!-- tab: App.js -->
+    import React from 'react';  
+    import 'devextreme/dist/css/dx.fluent.blue.light.css';
+
+    import { {WidgetName}, type {WidgetName}Types } from 'devextreme-react/{widget-name}'; 
+
+    function handlePropertyChange(e: {WidgetName}Types.OptionChangedEvent) {
+        if(e.name === "changedProperty") {
+            // handle the property change here
+        }
+    }
+
+    export default function App() { 
+        return ( 
+            <{WidgetName} ...
+                onOptionChanged={handlePropertyChange}
+            />        
+        ); 
+    } 
 
 ---
-<!-- Description goes here -->