Fix for pasted content position in the rich text editor (#4720)

Author: vhuseinova-msft

change-beta/@azure-communication-react-1fc52dfe-8b2e-46a9-a619-82121aaae679.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Fix an issue where rich text editor wasn't scrolled content correctly when a new content was pasted",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-1fc52dfe-8b2e-46a9-a619-82121aaae679.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Fix an issue where rich text editor wasn't scrolled content correctly when a new content was pasted",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

common/config/rush/pnpm-lock.yaml

@@ -27,7 +27,7 @@ export default class CopyPastePlugin implements EditorPlugin {
 
     if (this.editor !== null && !this.editor.isDisposed()) {
       // scroll the editor to the correct position after pasting content
-      scrollToBottomAfterContentPaste(event, this.editor);
+      scrollToBottomAfterContentPaste(event);
     }
   }
 }
@@ -71,32 +71,45 @@ export const removeImageElement = (event: BeforePasteEvent): void => {
 };
 
 /**
- * Scrolls the editor's scroll container to the bottom after content is pasted.
+ * Update the scroll position of the editor after pasting content to ensure the content is visible.
  * @param event - The plugin event.
- * @param editor - The editor instance.
  */
-export const scrollToBottomAfterContentPaste = (event: PluginEvent, editor: IEditor): void => {
+export const scrollToBottomAfterContentPaste = (event: PluginEvent): void => {
   if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
-    const scrollContainer = editor.getScrollContainer();
-    // get current selection for the editor
+    // Get the current selection in the document
     const selection = document.getSelection();
-    // if selection exists
-    if (selection && selection.rangeCount > 0) {
-      // the range for the selection
-      const range = selection.getRangeAt(0);
-      // the selection position relative to the viewport
-      const cursorRect = range.getBoundingClientRect();
-      // the scrollContainer position relative to the viewport
-      const scrollContainerRect = scrollContainer.getBoundingClientRect();
-      // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.
-      // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to
-      // translate the scroll position from being relative to the document to being relative to the viewport.
-      // 3. add the top position of the cursor (containerRect.top) to moves the scroll position to the cursor's position.
-      const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top;
-      scrollContainer.scrollTo({
-        top: updatedScrollTop,
-        behavior: 'smooth'
-      });
+
+    // Check if a selection exists and it has at least one range
+    if (!selection || selection.rangeCount <= 0) {
+      // If no selection or range, exit the function
+      return;
+    }
+
+    // Get the first range of the selection
+    // A user can normally only select one range at a time, so the rangeCount will usually be 1
+    const range = selection.getRangeAt(0);
+
+    // If the common ancestor container of the range is the document itself,
+    // it might mean that the editable element is getting removed from the DOM
+    // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error
+    if (range.commonAncestorContainer === document) {
+      return;
     }
+
+    // Create a temporary span element to use as an anchor for scrolling
+    // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error
+    const tempElement = document.createElement('span');
+    // Collapse the range to its end point
+    // This means the start and end points of the range will be the same, and it will not contain any content
+    range.collapse(false);
+    // Insert the temporary element at the cursor's position at the end of the range
+    range.insertNode(tempElement);
+
+    // Scroll the temporary element into view
+    // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly
+    tempElement.scrollIntoView({
+      block: 'center'
+    });
+    tempElement.remove();
   }
 };