diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md
index 73185af7a0eab5d5f6de27b0d28589d28baed876..e0820748c9835894107fc01fa549602fca25a9b5 100644
--- a/en/application-dev/reference/arkui-ts/Readme-EN.md
+++ b/en/application-dev/reference/arkui-ts/Readme-EN.md
@@ -39,7 +39,9 @@
     - [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
     - [restoreId](ts-universal-attributes-restoreId.md)
     - [Foreground Color](ts-universal-attributes-foreground-color.md)
+    - [Foreground Blur](ts-universal-attributes-foreground-blur-style.md)
     - [Click Effect](ts-universal-attributes-click-effect.md)
+    - [Accessibility](ts-universal-attributes-accessibility.md)
     - Touch Interactions
       - [Touch Target](ts-universal-attributes-touch-target.md)
       - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
@@ -48,6 +50,8 @@
       - [Sheet Transition](ts-universal-attributes-sheet-transition.md)
     - [Obscuring](ts-universal-attributes-obscured.md)
   - [Universal Text Attributes](ts-universal-attributes-text-style.md)
+  - [Drag and Drop Control](ts-universal-attributes-drag-drop.md)
+  - [Safe Area](ts-universal-attributes-expand-safe-area.md)
   - Gesture Handling
     - [Gesture Binding Methods](ts-gesture-settings.md)
     - Basic Gestures
@@ -87,6 +91,7 @@
   - [Radio](ts-basic-components-radio.md)
   - [Rating](ts-basic-components-rating.md)
   - [RemoteWindow](ts-basic-components-remotewindow.md)
+  - [RichEditor](ts-basic-components-richeditor.md)
   - [RichText](ts-basic-components-richtext.md)
   - [ScrollBar](ts-basic-components-scrollbar.md)
   - [Search](ts-basic-components-search.md)
@@ -113,6 +118,7 @@
   - [Counter](ts-container-counter.md)
   - [Flex](ts-container-flex.md)
   - [FlowItem](ts-container-flowitem.md)
+  - [FormLink](ts-container-formlink.md)
   - [GridCol](ts-container-gridcol.md)
   - [GridRow](ts-container-gridrow.md)
   - [Grid](ts-container-grid.md)
@@ -155,6 +161,8 @@
   - [OffscreenCanvas](ts-components-offscreencanvas.md)
   - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
   - [Path2D](ts-components-canvas-path2d.md)
+- Advanced Components
+  - [@ohos.multimedia.avCastPicker (AVCastPicker)](ohos-multimedia-avcastpicker.md)
 - Animation
   - [AnimatorProperty](ts-animatorproperty.md)
   - [Explicit Animatio](ts-explicit-animation.md)
@@ -162,6 +170,7 @@
     - [Page Transition](ts-page-transition-animation.md)
     - [Component Transition](ts-transition-animation-component.md)
     - [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
+    - [Implicit Shared Element Transition](ts-transition-animation-geometrytransition.md)
   - [Motion Path Animation](ts-motion-path-animation.md)
 - Global UI Methods
   - Pop-up Window
diff --git a/en/application-dev/reference/arkui-ts/figures/geometrytransition.gif b/en/application-dev/reference/arkui-ts/figures/geometrytransition.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4f9923dcfdd45e4bf820836bca9d94e704a54c07
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/geometrytransition.gif differ
diff --git a/en/application-dev/reference/arkui-ts/ohos-multimedia-avcastpicker.md b/en/application-dev/reference/arkui-ts/ohos-multimedia-avcastpicker.md
new file mode 100644
index 0000000000000000000000000000000000000000..7f983fb33fe08d13aa749b6df1d8c4f9fecdb109
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ohos-multimedia-avcastpicker.md
@@ -0,0 +1,55 @@
+# @ohos.multimedia.avCastPicker (AVCastPicker)
+
+The **AVCastPicker** component provides a unified entry for device discovery and connection.
+
+> **NOTE**
+>
+> - The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+> - You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
+
+## Modules to Import
+
+```js
+import AVCastPicker from '@ohos.multimedia.avCastPicker';
+```
+
+## APIs
+
+AVCastPicker()
+
+Implements an **AVCastPicker** component, which can be used to cast audio and video onto other devices.
+
+This component is a custom component. Some basic knowledge of [@Component](../../quick-start/arkts-create-custom-components.md) will be helpful in using the component.
+
+**System capability**: SystemCapability.Multimedia.AVSession.AVCast
+
+## Attributes
+
+The [universal attributes](ts-universal-attributes-size.md) are supported.
+
+## Events
+
+The [universal events](ts-universal-events-click.md) are supported.
+
+## Example
+
+The following is an example of using **AVCastPicker**:
+
+```ts
+import AVCastPicker from '@ohos.multimedia.avCastPicker'
+
+@Entry
+@Component
+struct Index {
+  build() {
+    Row() {
+      Column() {
+        AVCastPicker()
+          .width('40vp')
+          .height('40vp')
+          .border({ width: 1, color: Color.Red })
+      }.height('50%')
+    }.width('50%')
+  }
+}
+```
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-geometrytransition.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-geometrytransition.md
new file mode 100644
index 0000000000000000000000000000000000000000..2992acbf1a7c3b4076981dcc3f8caa4c2795a17b
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-geometrytransition.md
@@ -0,0 +1,67 @@
+# Implicit Shared Element Transition
+
+**GeometryTransition** is used for implicit shared element transitions during component switching. By specifying the in and out components through **GeometryTransition**, you can create a spatial linkage between the transition effects (such as opacity and scale) defined through the **transition** mechanism. In this way, you can guide the visual focus from the out component to the in component.
+
+> **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+
+## Attributes
+
+| Name              | Type| Description                                                    |
+| ------------------ | -------- | ------------------------------------------------------------ |
+| geometryTransition | string   | ID of **geometryTransition**, which is used to set up a binding relationship. If this attribute is set to an empty string **""**, the binding relationship is cleared, and the components will not participate in the shared element transition. The value can be dynamically changed to refresh the binding relationship. One ID can be bound to only two components, which function as in and out components.|
+
+**NOTE**
+
+For the settings to take effect, **geometryTransition** must be used together with **animateTo**. The animation duration and curve follow the settings in **animateTo**. The **.animation** implicit animation is not supported.
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Index {
+  @State isShow: boolean = false
+
+  build() {
+    Stack({ alignContent: Alignment.Center }) {
+      if (this.isShow) {
+        Image($r('app.media.pic'))
+          .autoResize(false)
+          .clip(true)
+          .width(300)
+          .height(400)
+          .offset({ y: 100 })
+          .geometryTransition("picture")
+          .transition(TransitionEffect.OPACITY)
+      } else {
+        // geometryTransition is bound to a container. Therefore, a relative layout must be configured for the child components of the container.
+        // The multiple levels of containers here are used to demonstrate passing of relative layout constraints.
+        Column() {
+          Column() {
+            Image($r('app.media.icon'))
+              .width('100%').height('100%')
+          }.width('100%').height('100%')
+        }
+        .width(80)
+        .height(80)
+        // geometryTransition synchronizes rounded corner settings, but only for the bound component, which is the container in this example.
+        // In other words, rounded corner settings of the container are synchronized, and those of the child components are not.
+        .borderRadius(20)
+        .clip(true)
+        .geometryTransition("picture")
+        // transition ensures that the component is not destructed immediately when it exits. You can customize the transition effect.
+        .transition(TransitionEffect.OPACITY)
+      }
+    }
+    .onClick(() => {
+      animateTo({ duration: 1000 }, () => {
+        this.isShow = !this.isShow
+      })
+    })
+  }
+}
+```
+![geometrytransition](figures/geometrytransition.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md
new file mode 100644
index 0000000000000000000000000000000000000000..6f7f0a960d436ee2606ef4c0d8e8ac315a2dcf36
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md
@@ -0,0 +1,45 @@
+# Accessibility
+
+You can set accessibility attributes and events for components.
+
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+
+## Name
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| accessibilityGroup | boolean | Accessibility group. If this attribute is set to **true**, the component and all its child components form an entire selectable component, and the accessibility service will no longer be available for the content of its child components.<br>Default value: **false**|
+| accessibilityText | string   | Accessibility text. If a component does not contain text information, it will not be read when the component is selected by the screen reader. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set this attribute for components without text information. When the component is selected by the screen reader, the specified accessibility text will be read, informing the user which component is selected.<br>**NOTE**<br>If a component with this attribute set contains text information, only the accessibility text will be read.<br>If a component with its **accessibilityGroup** attribute set to **true** does not have **accessibilityText** set and does not contain text information, text concatenation will be performed on its child components (depth first).|
+| accessibilityDescription | string | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. You can set a detailed description text for the attribute of the component to help users understand the operation to be performed. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.|
+| accessibilityLevel | string | Accessibility importance, which is used to decide whether a component can be identified by the accessibility service.<br>The options are as follows:<br>**"auto"**: The value is converted to **"yes"** or **"no"** based on the component.<br>**"yes"**: The current component is selectable for the accessibility service.<br>**"no"**: The current component is not selectable for the accessibility service.<br>**"no-hide-descendants"**: The current component and all its child components are not selectable for the accessibility service.<br>**Default value**: **"auto"**<br>**NOTE**<br>When the **accessibilityLevel** attribute of the following components is set to **"auto"**, they are selectable for the accessibility service: Checkbox, CheckboxGroup, Gauge, Marquee, MenuItem, MenuItemGroup, Menu, Navigation, DatePicker, Progress, Radio, Rating, ScrollBar, Select, Slider, Stepper, Text, TextClock, TextPicker, TextTimer, TimePicker, Toggle, Web. |
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Index {
+
+  build() {
+    Row() {
+      Column() {
+        Text ("Text 1")
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+        Text ("Text 2")
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .width('100%')
+      .accessibilityGroup(true)
+      .accessibilityLevel("yes")
+      .accessibilityText ("Group")
+      .accessibilityDescription("The <Column> component is selectable , and the text to be read out is "Group".)
+    }
+    .height('100%')
+  }
+}
+```
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md
new file mode 100644
index 0000000000000000000000000000000000000000..41b3126534953c03da46124e8b49c2f603ff783e
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md
@@ -0,0 +1,138 @@
+# Drag and Drop Control
+
+The drag and drop control attributes set whether a component can respond to drag events.
+
+> **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+>
+> The following components support drag-and-drop control: [\<Text>](ts-basic-components-text.md), [Image](ts-basic-components-image.md), [\<Video>](ts-media-components-video.md), [\<List>](ts-container-list.md), and [\<Grid>](ts-container-grid.md).
+
+
+## Attributes
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| allowDrop | Array\<[UnifiedDataType](../apis/js-apis-data-udmf.md#unifieddatatype)> | Type of data that can be dropped to the component.<br>Default value: empty<br>|
+| draggable | boolean | Whether the component is draggable.<br>Default value: **false**<br>|
+
+
+## Example
+
+```ts
+// xxx.ets
+import UDMF from '@ohos.data.UDMF';
+@Entry
+@Component
+struct ImageExample {
+  @State uri: string = ""
+  @State AblockArr: string[] = []
+  @State BblockArr: string[] = []
+  @State AVisible: Visibility = Visibility.Visible
+  @State dragSuccess :Boolean = false
+
+  build() {
+    Column() {
+      Text ('Image drag and drop')
+        .fontSize('30dp')
+      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
+        Image($r('app.media.1'))
+          .width(100)
+          .height(100)
+          .border({ width: 1 })
+          .visibility(this.AVisible)
+          .draggable(true)
+          .onDragEnd((event: DragEvent) => {
+            let ret = event.getResult();
+            if(ret == 0) {
+              console.log("enter ret == 0")
+              this.AVisible = Visibility.Hidden;
+            } else {
+              console.log("enter ret != 0")
+              this.AVisible = Visibility.Visible;
+            }
+          })
+      }
+      .margin({ bottom: 20 })
+      Row() {
+        Column(){
+          Text('Invalid drop target')
+            .fontSize('15dp')
+            .height('10%')
+          List(){
+            ForEach(this.AblockArr, (item, index) => {
+              ListItem() {
+                Image(item)
+                  .width(100)
+                  .height(100)
+                  .border({width: 1})
+              }
+              .margin({ left: 30 , top : 30})
+            }, item => item)
+          }
+          .height('90%')
+          .width('100%')
+          .allowDrop(["File.Media.Text", "File.Media.Image"])
+          .onDrop((event: DragEvent, extraParams: string) => {
+            let jsonString = JSON.parse(extraParams);
+            this.uri = jsonString.extraInfo;
+            this.AblockArr.splice(jsonString.insertIndex, 0, this.uri);
+            console.log("ondrop not udmf data");
+          })
+          .border({width: 1})
+        }
+        .height("50%")
+        .width("45%")
+        .border({ width: 1 })
+        .margin({ left: 12 })
+        Column(){
+          Text ('Valid drop target')
+            .fontSize('15dp')
+            .height('10%')
+          List(){
+            ForEach(this.BblockArr, (item, index) => {
+              ListItem() {
+                Image(item)
+                  .width(100)
+                  .height(100)
+                  .border({width: 1})
+              }
+              .margin({ left: 30 , top : 30})
+            }, item => item)
+          }
+          .border({width: 1})
+          .height('90%')
+          .width('100%')
+          .allowDrop(["File.Media.Image"])
+          .onDrop((event: DragEvent, extraParams: string) => {
+            console.log("enter onDrop")
+            let dragData = event.getData();
+            let summary = event.getSummary();
+            if(dragData != undefined) {
+              let arr = dragData.getRecords();
+              if(arr.length > 0) {
+                let image = <UDMF.Image>(arr[0]);
+                this.uri = image.imageUri;
+                let jsonString = JSON.parse(extraParams);
+                this.BblockArr.splice(jsonString.insertIndex, 0, this.uri);
+              } else {
+                console.log(`dragData arr is null`)
+              }
+            } else {
+              console.log(`dragData  is undefined`)
+            }
+            console.log("ondrop udmf data");
+            this.dragSuccess = true
+          })
+        }
+        .height("50%")
+        .width("45%")
+        .border({ width: 1 })
+        .margin({ left: 12 })
+      }
+    }.width('100%')
+  }
+}
+```
+
+