update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/apis/js-apis-wallpaper.md

@@ -436,36 +436,36 @@ Sets a specified source as the wallpaper of a specified type. This API uses an a
 
 ```js
 // The source type is string.
-let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
-wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {   
-    if (error) {        
-        console.error(`failed to setWallpaper because: ` + JSON.stringify(error));       
-        return;   
-    }    
-    console.log(`success to setWallpaper.`);
-});
-
+  let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
+  wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {    
+      if (error) {        
+          console.error(`failed to setWallpaper because: ` + JSON.stringify(error));       
+          return;   
+      }    
+      console.log(`success to setWallpaper.`);
+  });
+  
 // The source type is image.PixelMap.
-import image from '@ohos.multimedia.image';
-let imageSource = image.createImageSource("file://" + wallpaperPath);
-let opts = {
-    "desiredSize": {
-        "height": 3648,
-        "width": 2736
-    }
-};
-imageSource.createPixelMap(opts).then((pixelMap) => {      
-    wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {    
-        if (error) {       
-            console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
-            return;
-        }    
-        console.log(`success to setWallpaper.`);
-    });
-}).catch((error) => {       
-    console.error(`failed to createPixelMap because: ` + JSON.stringify(error));
-});
-```
+  import image from '@ohos.multimedia.image';
+  let imageSource = image.createImageSource("file://" + wallpaperPath);
+  let opts = {
+      "desiredSize": {
+          "height": 3648,
+          "width": 2736
+      }
+  };
+  imageSource.createPixelMap(opts).then((pixelMap) => {      
+      wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {    
+          if (error) {       
+              console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
+              return;
+          }    
+          console.log(`success to setWallpaper.`);
+      });
+  }).catch((error) => {       
+      console.error(`failed to createPixelMap because: ` + JSON.stringify(error));
+  });
+  ```
 
 
 ## wallpaper.setWallpaper
@@ -495,32 +495,32 @@ Sets a specified source as the wallpaper of a specified type. This API uses a pr
 
 ```js
 // The source type is string.
-let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
-wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
-    console.log(`success to setWallpaper.`);
-}).catch((error) => {
-    console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
-});
-
+  let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
+  wallpaper.setWallpaper(wallpaperPath, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
+      console.log(`success to setWallpaper.`);
+  }).catch((error) => {
+      console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
+  });
+  
 // The source type is image.PixelMap.
-import image from '@ohos.multimedia.image';
-let imageSource = image.createImageSource("file://" + wallpaperPath);
-let opts = {
-    "desiredSize": {
-        "height": 3648,
-        "width": 2736
-    }
-};
-imageSource.createPixelMap(opts).then((pixelMap) => {      
-    wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
-        console.log(`success to setWallpaper.`);
-    }).catch((error) => {
-        console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
-    });
-}).catch((error) => {       
-    console.error(`failed to createPixelMap because: ` + JSON.stringify(error));
-});
-```
+  import image from '@ohos.multimedia.image';
+  let imageSource = image.createImageSource("file://" + wallpaperPath);
+  let opts = {
+      "desiredSize": {
+          "height": 3648,
+          "width": 2736
+      }
+  };
+  imageSource.createPixelMap(opts).then((pixelMap) => {      
+      wallpaper.setWallpaper(pixelMap, wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
+          console.log(`success to setWallpaper.`);
+      }).catch((error) => {
+          console.error(`failed to setWallpaper because: ` + JSON.stringify(error));
+      });
+  }).catch((error) => {       
+      console.error(`failed to createPixelMap because: ` + JSON.stringify(error));
+  });
+  ```
 
 ## wallpaper.getFile<sup>8+</sup>
 
@@ -557,7 +557,7 @@ getFile(wallpaperType: WallpaperType): Promise&lt;number&gt;
 
 Obtains the wallpaper of the specified type. This API uses a promise to return the result.
 
-**Required permissions**: ohos.permission.GET_WALLPAPER and ohos.permission.READ_USER_STORAGE
+**Required permissions**: ohos.permission.SET_WALLPAPER and ohos.permission.READ_USER_STORAGE
 
 **System capability**: SystemCapability.MiscServices.Wallpaper
 
@@ -604,7 +604,7 @@ Obtains the pixel image for the wallpaper of the specified type. This API uses a
 **Example**
 
   ```js
-  wallpaper.getPixelMap(WALLPAPER_SYSTEM, function (err, data) {
+  wallpaper.getPixelMap(wallpaper.WallpaperType.WALLPAPER_SYSTEM, function (err, data) {
       console.info('wallpaperXTS ===> testGetPixelMapCallbackSystem err : ' + JSON.stringify(err));
       console.info('wallpaperXTS ===> testGetPixelMapCallbackSystem data : ' + JSON.stringify(data));
   });
@@ -663,12 +663,12 @@ Subscribes to the wallpaper color change event.
 
 **Example**
 
-```js
-let listener = (colors, wallpaperType) => {
-    console.log(`wallpaper color changed.`);
-};
-wallpaper.on('colorChange', listener);
-```
+  ```js
+  let listener = (colors, wallpaperType) => {
+      console.log(`wallpaper color changed.`);
+  };
+  wallpaper.on('colorChange', listener);
+  ```
 
 
 ## wallpaper.off('colorChange')
@@ -688,11 +688,11 @@ Unsubscribes from the wallpaper color change event.
 
 **Example**
 
-```js
-let listener = (colors, wallpaperType) => {
-    console.log(`wallpaper color changed.`);
-};
-wallpaper.on('colorChange', listener);
+  ```js
+  let listener = (colors, wallpaperType) => {
+      console.log(`wallpaper color changed.`);
+  };
+  wallpaper.on('colorChange', listener);
 // Unsubscribe from the listener.
 wallpaper.off('colorChange', listener);
 //Unsubscribe from all subscriptions of the colorChange type.

en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md

 # XComponent
 
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+  > **NOTE**<br>
   > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
   The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input.
@@ -19,20 +19,20 @@
 
   - Name
 
-    | Name       | Type                                     | Mandatory| Description                                                        |
-    | ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
-    | id          | string                                        | Yes  | Unique ID of the component. The value can contain a maximum of 128 characters.                   |
-    | type        | string                                        | Yes  | Type of the component. The options are as follows:<br>-**surface**: The content of this component is displayed individually, without being combined with that of other components.<br>-**component**: The content of this component is displayed after having been combined with that of other components.<br>This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.|
-    | libraryname | string                                        | No  | Name of the dynamic library generated after compilation at the application native layer.                            |
+    | Name        | Type                                    | Mandatory | Description                                                        |
+    | ----------- | --------------------------------------- | --------- | ------------------------------------------------------------ |
+    | id          | string                                        | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.                   |
+    | type        | string                                        | Yes | Type of the component. The options are as follows:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this component is displayed after having been combined with that of other components. |
+    | libraryname | string                                        | No  | Name of the dynamic library generated after compilation at the application native layer. |
     | controller  | [XComponentController](#XComponentController) | No  | Controller bound to the component, which can be used to invoke methods of the component.              |
 
 
 ## Events
 
-| Name                           | Description                |
+| Name                            | Description              |
 | ------------------------------- | ------------------------ |
-| onLoad(context?: object) => void | Triggered when the plug-in is loaded.|
-| onDestroy() => void             | Triggered when the plug-in is destroyed.|
+| onLoad(context?: object) => void | Triggered when the plug-in is loaded. |
+| onDestroy() => void              | Triggered when the plug-in is destroyed. |
 
 ## XComponentController
 
@@ -52,9 +52,9 @@ Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used
 
   - Return value
 
-    | Type  | Description                       |
+    | Type   | Description                 |
     | ------ | --------------------------- |
-    | string | ID of the surface held by the **\<XComponent>**.|
+    | string | ID of the surface held by the **\<XComponent>**. |
 
 ### setXComponentSurfaceSize
 
@@ -64,10 +64,10 @@ Sets the width and height of the surface held by the **\<XComponent>**.
 
 - Parameters
 
-  | Name       | Type| Mandatory| Default Value| Description                         |
+  | Name       | Type | Mandatory | Default Value | Description              |
   | ------------- | -------- | ---- | ------ | ----------------------------- |
-  | surfaceWidth  | number   | Yes  | -      | Width of the surface held by the **\<XComponent>**.|
-  | surfaceHeight | number   | Yes  | -      | Height of the surface held by the **\<XComponent>**.|
+  | surfaceWidth  | number   | Yes  | -      | Width of the surface held by the **\<XComponent>**. |
+  | surfaceHeight | number   | Yes  | -      | Height of the surface held by the **\<XComponent>**. |
 
 ### getXComponentContext
 
@@ -85,7 +85,8 @@ Obtains the context of an **\<XComponent>** object.
 
 Provide a surface-type **\<XComponent>** to support capabilities such as camera preview.
 
-```
+```ts
+// xxx.ets
 import camera from '@ohos.multimedia.camera';
 @Entry
 @Component

en/application-dev/reference/arkui-ts/ts-gesture-settings.md

 # Gesture Binding Methods
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**<br>
 > This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -16,7 +16,7 @@ None
 Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
 
 
-  | Name | Type | Default Value | Description | 
+| Name | Type | Default Value | Description | 
 | -------- | -------- | -------- | -------- |
 | gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. | 
 | priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. | 
@@ -24,14 +24,14 @@ Use the following attributes to bind gesture recognition to a component. When a
 
 
 - GestureMask enums
-    | Name | Description | 
+  | Name | Description | 
   | -------- | -------- |
   | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. | 
   | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. | 
 
 
 - Gesture types
-    | Name | Description | 
+  | Name | Description | 
   | -------- | -------- |
   | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. | 
   | LongPressGesture | Long press gesture. | 
@@ -46,12 +46,12 @@ Use the following attributes to bind gesture recognition to a component. When a
 The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
 
 - TapGesture events
-    | Name | Description | 
+  | Name | Description | 
   | -------- | -------- |
   | onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. | 
 
 - GestureEvent attributes
-    | Name | Type | Description | 
+  | Name | Type | Description | 
   | -------- | -------- | -------- |
   | timestamp | number | Timestamp of the event. | 
   | target<sup>8+</sup> | EventTarget | Object that triggers the gesture event. | 
@@ -60,7 +60,7 @@ The component uses the **gesture** method to bind the gesture object and uses th
 ## Example
 
 
-```
+```ts
 @Entry
 @Component
 struct GestureSettingsExample {
@@ -81,7 +81,7 @@ struct GestureSettingsExample {
       TapGesture()
         .onAction((event: GestureEvent) => {
           this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
-          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
           + event.target.area.width + '\nheight:' + event.target.area.height
         }), GestureMask.IgnoreInternal
       )
@@ -90,4 +90,4 @@ struct GestureSettingsExample {
 }
 ```
 
-![en-us_image_0000001256858411](figures/en-us_image_0000001256858411.gif)
+![en-us_image_0000001256858411](figures/en-us_image_0000001256858411.gif)
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-universal-events-click.md

 # Click Event
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -54,7 +54,8 @@ None
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ClickExample {
@@ -66,7 +67,7 @@ struct ClickExample {
         .onClick((event: ClickEvent) => {
           console.info(this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
           + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
-          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n  width:'
+          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
           + event.target.area.width + '\n  height:' + event.target.area.height)
         })
       Text(this.text).padding(15)

en/application-dev/reference/arkui-ts/ts-universal-events-touch.md

 # Touch Event
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -26,7 +26,7 @@ None
   | touches | Array<TouchObject> | All finger information. | 
   | changedTouches | Array<TouchObject> | Finger information changed. | 
   | timestamp | number | Timestamp of the event. | 
-  | target<sup>8+</sup> | EventTarget | Target of the event. | 
+  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Target of the event. | 
 
 - APIs
     | API | Description | 
@@ -57,7 +57,8 @@ None
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TouchExample {
@@ -79,7 +80,7 @@ struct TouchExample {
           }
           console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
           + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:('
-          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
           + event.target.area.width + '\nheight:' + event.target.area.height)
         })
       Text(this.text)

en/application-dev/ui/ts-component-based-preview.md

@@ -10,8 +10,8 @@ Custom components decorated by @Preview can be previewed in the Previewer of Dev
 
 Example of using @Preview:
 
+
 ```
-// Display only Hello Component1 on the preview. The content under MyComponent is displayed on the real device.
 @Entry
 @Component
 struct MyComponent {