@globalpayments/vega 2.92.0 → 2.94.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-line-break-handler.js

@@ -89,6 +89,6 @@ export class InsertLineBreakHandler extends BaseHandler {
   getNextRTENode(lineBreakNode) {
     const index = lineBreakNode.parent.children.indexOf(lineBreakNode);
     const nextNode = lineBreakNode.parent.children[index + 1];
-    return nextNode || lineBreakNode;
+    return nextNode && nextNode.isContentEditable() ? nextNode : lineBreakNode;
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -3,6 +3,11 @@ import { AppendChildrenAction } from '../../../../dto/actions/append-child-nodes
 import ElementToDtoStrategyProcessor from '../element-to-dto-strategy/element-to-dto-strategy-processor';
 import { StylePreservator } from '../../../../../../helpers/csp/styles-preservator';
 import { PasteContentAction } from '../../../../dto/actions/paste-content-action';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { generateUUID } from '../../../../../../utils/misc';
+import { escapeHtml } from '../../../../helpers/utils';
+import { ReplaceSelectedTextAction } from '../../../../dto/actions/replace-selected-text-action';
 /**
  * Handle user paste
  */
@@ -13,19 +18,108 @@ export class InsertPasteHandler extends BaseHandler {
    * @param {InputEvent} event - Paste event.
    */
   handleEvent(event) {
+    const currentRange = this.selectionController.getCurrentRange();
+    const payload = this.getPastePayload(event);
+    if (this.insertPlainTextInline(payload, currentRange)) {
+      return;
+    }
     const blocks = this.parsePastedElements(event);
-    const { startContainer } = this.selectionController.getCurrentRange();
-    if (this.isRootContainer(startContainer)) {
+    const startContainer = (currentRange === null || currentRange === void 0 ? void 0 : currentRange.startContainer) || undefined;
+    if (!startContainer) {
+      // When the selection/range is unavailable (e.g. the caret was lost while
+      // the paste-mode chooser had focus), still append the pasted content to
+      // the root so the paste is never silently dropped.
+      this.insertBlocksToRoot(blocks);
+    }
+    else if (this.isRootContainer(startContainer)) {
       this.insertBlocksToRoot(blocks);
       // TODO: Need to check below logic, it seems not correct https://gethired.atlassian.net/browse/VD-7779
     }
     else if (this.isEmptyParagraph(startContainer)) {
-      this.insertBlocksBeforeEmptyBlock(blocks);
+      this.insertBlocksBeforeEmptyBlock(blocks, currentRange);
     }
     else {
-      this.insertBlocksToContent(blocks);
+      this.insertBlocksToContent(blocks, currentRange);
     }
   }
+  /**
+   * Inserts plain-text paste content into the current text node at caret position.
+   *
+   * @param {RTEPastePayload} payload - Clipboard payload.
+   * @param {RTERange} currentRange - Current selection range.
+   * @returns {boolean} True when inline insertion is handled.
+   */
+  insertPlainTextInline(payload, currentRange) {
+    var _a, _b;
+    const selectedNodes = ((_b = (_a = this.selectionController).getSelectedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+    if (!this.shouldPasteAsInlinePlainText(payload, currentRange, selectedNodes)) {
+      return false;
+    }
+    const text = payload.text.replace(/\r\n?/g, '\n');
+    const cursorNode = selectedNodes.find((node) => node instanceof RTETextNode) || currentRange.startNode;
+    if (!(cursorNode instanceof RTETextNode)) {
+      return false;
+    }
+    cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, currentRange.startOffset + text.length);
+    return true;
+  }
+  /**
+   * Determines whether the payload should be inserted as inline plain text.
+   *
+   * @param {RTEPastePayload} payload - Clipboard payload.
+   * @param {RTERange} currentRange - Current selection range.
+   * @param {RTENode[]} selectedNodes - Currently selected nodes.
+   * @returns {boolean} True when inline plain-text insertion should be used.
+   */
+  shouldPasteAsInlinePlainText(payload, currentRange, selectedNodes = []) {
+    if (!currentRange || !currentRange.startContainer) {
+      return false;
+    }
+    if (this.isRootContainer(currentRange.startContainer)) {
+      return false;
+    }
+    const text = (payload.text || '').replace(/\r\n?/g, '\n');
+    if (!text) {
+      return false;
+    }
+    const html = payload.html || '';
+    if (!html) {
+      return true;
+    }
+    const hasTextNodeSelection = selectedNodes.some((node) => node instanceof RTETextNode) ||
+      currentRange.startNode instanceof RTETextNode;
+    if (!hasTextNodeSelection) {
+      return false;
+    }
+    // Use the inline plain‑text path only when HTML and plain text match exactly and no formatting exists;
+    // otherwise route through the block path to preserve styles.
+    const analysis = this.analyzeHtmlContent(html);
+    return analysis.plainText === text && !analysis.hasFormatting;
+  }
+  /**
+   * Analyzes HTML content to extract plain text and detect inline formatting,
+   * parsing the HTML once to avoid redundant StylePreservation and DOMParser calls.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {HtmlAnalysisResult} Analysis result with plainText and hasFormatting properties.
+   */
+  analyzeHtmlContent(html) {
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    const body = parsedDoc.body;
+    // Extract plain text from the parsed document
+    const plainText = (body.textContent || '').replace(/\r\n?/g, '\n');
+    // Check for rich inline formatting
+    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark'));
+    if (!hasFormatting) {
+      hasFormatting = Array.from(body.querySelectorAll('span')).some((span) => {
+        const style = span.getAttribute('style') || span.getAttribute('data-style') || '';
+        return this.styleContainsRichFormatting(style);
+      });
+    }
+    return { plainText, hasFormatting };
+  }
   /**
    * Insert the blocks to root
    *
@@ -35,37 +129,54 @@ export class InsertPasteHandler extends BaseHandler {
     this.currentState.apply(new AppendChildrenAction(blocks));
   }
   /**
-   * Insert the blocks to content
+   * Insert the blocks into the current content block at the specified range.
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @param { RTERange } rteRange - rteRange
    */
-  insertBlocksToContent(blocks) {
-    const cursorNode = this.removeSelectionRange();
+  insertBlocksToContent(blocks, rteRange) {
+    var _a;
+    const isCollapsedRange = rteRange.startNode === rteRange.endNode && rteRange.startOffset === rteRange.endOffset;
+    const cursorNode = isCollapsedRange
+      ? rteRange.startNode
+      : this.removeSelectionRange();
     if (cursorNode && cursorNode.parent) {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const pasteAction = new PasteContentAction(blocks, cursorNode, startOffset);
+      const pasteAction = new PasteContentAction(blocks, cursorNode, rteRange.startOffset, rteRange);
       cursorNode.parent.apply(pasteAction);
-      if (pasteAction.futureFocusBlock) {
-        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      if (pasteAction.futureFocusNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(pasteAction.futureFocusNode, (_a = pasteAction.futureFocusNodeOffset) !== null && _a !== void 0 ? _a : 0);
       }
+      else if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
+      }
+    }
+    else {
+      // No resolvable cursor position: fall back to appending at the root so
+      // the pasted content is preserved instead of being discarded.
+      this.insertBlocksToRoot(blocks);
     }
   }
   /**
    * Insert the blocks before to current block
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @param { RTERange } rteRange - rteRange
    */
-  insertBlocksBeforeEmptyBlock(blocks) {
+  insertBlocksBeforeEmptyBlock(blocks, rteRange) {
     const cursorNode = this.removeSelectionRange();
-    /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      const pasteAction = new PasteContentAction(blocks, currentBlock.children[0], 0, this.selectionController.getCurrentRange());
+      const pasteAction = new PasteContentAction(blocks, cursorNode, 0, rteRange);
       currentBlock.apply(pasteAction);
       if (pasteAction.futureFocusBlock) {
-        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
       }
     }
+    else {
+      // No resolvable empty block: fall back to appending at the root so the
+      // pasted content is preserved instead of being discarded.
+      this.insertBlocksToRoot(blocks);
+    }
   }
   /**
    * Format and parse elements from user paste with simple style preservation.
@@ -74,30 +185,76 @@ export class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    let pastedHTML = event.dataTransfer.getData('text/html');
+    const payload = this.getPastePayload(event);
+    let pastedHTML = payload.html || '';
     if (!pastedHTML) {
-      const pastedText = event.dataTransfer.getData('text/plain');
-      pastedHTML = this.parsePlainText(pastedText);
+      pastedHTML = this.parsePlainText(payload.text || '');
+    }
+    else if (this.shouldTreatAsPlainTextPayload(pastedHTML)) {
+      const plainSource = payload.text || this.extractPlainTextFromHtml(pastedHTML);
+      pastedHTML = this.parsePlainText(plainSource);
     }
     const context = StylePreservator.preserve(pastedHTML);
     const safeHtml = context.getProcessedHtml();
     const parser = new DOMParser();
     const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
+    const rootElements = Array.from(parsedDoc.body.childNodes);
+    context.restore(rootElements);
+    this.normalizeImportedHtmlArtifacts(parsedDoc.body);
     const htmlElements = Array.from(parsedDoc.body.childNodes);
-    context.restore(htmlElements);
-    return ElementToDtoStrategyProcessor.process(htmlElements)
+    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
+    // Fallback for synthetic payloads: if strategy conversion yields no blocks
+    // but we still have plain text, create paragraph/text blocks directly.
+    if (resultBlocks.length === 0 && (payload.text || '').trim() !== '') {
+      return this.buildPlainTextFallbackBlocks(payload.text);
+    }
+    return resultBlocks;
+  }
+  /**
+   * Extracts readable plain text from clipboard HTML.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {string} - Plain text extracted from HTML.
+   */
+  extractPlainTextFromHtml(html) {
+    // Preserve inline styles before parsing to avoid style-src-attr CSP violations.
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    return (parsedDoc.body.textContent || '').replace(/\r\n?/g, '\n');
   }
   /**
-   * Moves the caret to the next block element in a rich text editor.
+   * Builds plain-text paragraph blocks when element strategy parsing returns no output.
    *
-   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   * @param {string} text - Plain text clipboard content.
+   * @returns {RTEContentBlock[]} Fallback text blocks.
    */
-  switchCaretPositionToNextElement(newBlock) {
+  buildPlainTextFallbackBlocks(text) {
+    return text.split('\n').map((line) => {
+      const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+      const textNode = new RTETextNode(`${paragraph.id}1`, line, paragraph);
+      paragraph.apply(new AppendChildrenAction([textNode]));
+      return paragraph;
+    });
+  }
+  /**
+   * Moves the caret to a block element in a rich text editor after paste.
+   *
+   * @param {RTEBlock} newBlock - Block element to move the caret to.
+   * @param {boolean} atEnd - When true, places the caret after the last character of the block's last node; otherwise at offset 0 of the first node.
+   */
+  switchCaretPositionToNextElement(newBlock, atEnd = false) {
+    var _a, _b;
     if (newBlock && newBlock.children) {
-      this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      if (atEnd) {
+        const lastNode = newBlock.children[newBlock.children.length - 1];
+        this.selectionController.enqueueSelectionRangeFutureState(lastNode, (_b = (_a = lastNode.text) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+      }
+      else {
+        this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      }
     }
   }
   /**
@@ -107,14 +264,217 @@ export class InsertPasteHandler extends BaseHandler {
    * @returns {string} - The formatted HTML string.
    */
   parsePlainText(content) {
+    if (this.shouldRenderAsCodeBlock(content)) {
+      return `<pre><code>${escapeHtml(content)}</code></pre>`;
+    }
     const lines = content.split('\n');
     return lines
       .map((line) => {
       if (line === '') {
         return '<p>\n</p>';
       }
-      return `<p>${line}</p>`;
+      return `<p>${escapeHtml(line)}</p>`;
     })
       .join('');
   }
+  /**
+   * Detects whether plain text likely represents source code.
+   *
+   * @param {string} content - Clipboard plain text content.
+   * @returns {boolean} True when the content should render as a code block.
+   */
+  shouldRenderAsCodeBlock(content) {
+    const normalized = content.replace(/\r\n?/g, '\n').trim();
+    if (!normalized) {
+      return false;
+    }
+    const hasMultipleLines = normalized.includes('\n');
+    const hasHtmlLikeTag = /<\/?[a-z][\w:-]*[^>]*>/i.test(normalized);
+    const hasCodeFence = normalized.startsWith('```') && normalized.endsWith('```');
+    const hasProgrammingTokens = /[{};]|=>|\b(function|const|let|var|class|import|export|return)\b/.test(normalized);
+    if (hasCodeFence) {
+      return true;
+    }
+    return hasHtmlLikeTag || (hasMultipleLines && hasProgrammingTokens);
+  }
+  /**
+   * Removes pasted website artifacts that can cause visual regressions in the editor,
+   * such as heading anchor tooltips and empty wrappers.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  normalizeImportedHtmlArtifacts(body) {
+    this.removeHeadingArtifacts(body);
+    this.removeEmptyBlocks(body);
+  }
+  /**
+   * Removes heading copy-link/tooltip artifacts copied from documentation pages.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  removeHeadingArtifacts(body) {
+    const selectors = [
+      'a.js-heading-link',
+      'a.c-heading-link',
+      '.js-tooltip-popover',
+      '.c-tooltip-popover',
+      '[role="tooltip"]',
+    ];
+    body.querySelectorAll(selectors.join(',')).forEach((element) => element.remove());
+  }
+  /**
+   * Removes empty block wrappers introduced by web copy/paste.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  removeEmptyBlocks(body) {
+    const blockSelectors = ['p', 'div', 'section', 'article'];
+    body.querySelectorAll(blockSelectors.join(',')).forEach((element) => {
+      if (this.isEmptyVisualBlock(element)) {
+        element.remove();
+      }
+    });
+  }
+  /**
+   * Checks whether a block is visually empty and safe to remove.
+   *
+   * @param {HTMLElement} element - Block element to inspect.
+   * @returns {boolean} True when the block has no visible content.
+   */
+  isEmptyVisualBlock(element) {
+    if (element.tagName === 'DIV' && element.classList.contains('doc')) {
+      return false;
+    }
+    const hasVisualChild = Boolean(element.querySelector('img,video,audio,iframe,canvas,svg,table,hr,pre,code,blockquote'));
+    if (hasVisualChild) {
+      return false;
+    }
+    return (element.textContent || '').trim() === '';
+  }
+  /**
+   * Checks whether a text/html payload is effectively plain text.
+   *
+   * Some sources (e.g. terminals, code editors) place the copied text inside an
+   * off-screen / visually hidden wrapper such as
+   * `<pre><div style="position: absolute; left: -9999px;">text</div></pre>`.
+   * Preserving that markup as rich content would render the pasted text
+   * off-screen (appearing empty), so such payloads are treated as plain text.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {boolean} True when the payload has no visible rich content.
+   */
+  shouldTreatAsPlainTextPayload(html) {
+    // Preserve inline styles before parsing to avoid style-src-attr CSP violations
+    // triggered by DOMParser processing HTML with style= attributes.
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    const body = parsedDoc.body;
+    if (body.children.length === 0) {
+      return true;
+    }
+    const visibleClone = body.cloneNode(true);
+    visibleClone.querySelectorAll('[style],[data-style]').forEach((element) => {
+      if (this.isVisuallyHiddenElement(element)) {
+        element.remove();
+      }
+    });
+    if ((visibleClone.textContent || '').trim() !== '') {
+      return false;
+    }
+    const hasVisibleMedia = Boolean(visibleClone.querySelector('img,video,audio,iframe,table,svg,canvas,math,object,embed'));
+    if (hasVisibleMedia) {
+      return false;
+    }
+    // If no visible text/media remains but original HTML contained text, it was
+    // likely wrapped in hidden/off-screen containers and should be treated as plain text.
+    return (body.textContent || '').trim() !== '';
+  }
+  /**
+   * Returns true when a CSS style string contains bold, italic, underline,
+   * strikethrough, or color declarations.
+   *
+   * @param {string} style - Inline CSS style string.
+   * @returns {boolean} True when the style contains rich formatting.
+   */
+  styleContainsRichFormatting(style) {
+    if (!style.trim()) {
+      return false;
+    }
+    for (const declaration of style.split(';')) {
+      const colonIndex = declaration.indexOf(':');
+      if (colonIndex === -1) {
+        continue;
+      }
+      const prop = declaration.slice(0, colonIndex).trim().toLowerCase();
+      const value = declaration
+        .slice(colonIndex + 1)
+        .trim()
+        .toLowerCase();
+      switch (prop) {
+        case 'font-weight':
+          if (/bold|[5-9]\d{2}|1000/.test(value)) {
+            return true;
+          }
+          break;
+        case 'font-style':
+          if (/italic|oblique/.test(value)) {
+            return true;
+          }
+          break;
+        case 'text-decoration':
+        case 'text-decoration-line':
+          if (/underline|line-through/.test(value)) {
+            return true;
+          }
+          break;
+        case 'color':
+        case 'background-color':
+          return true;
+        default:
+          break;
+      }
+    }
+    return false;
+  }
+  /**
+   * Determines whether an element is visually hidden or rendered off-screen
+   * via its inline style, indicating a clipboard plain-text wrapper.
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @returns {boolean} True when the element is hidden or off-screen.
+   */
+  isVisuallyHiddenElement(element) {
+    const style = (element.getAttribute('style') ||
+      element.getAttribute('data-style') ||
+      '').toLowerCase();
+    if (!style) {
+      return false;
+    }
+    if (/display\s*:\s*none/.test(style) || /visibility\s*:\s*hidden/.test(style)) {
+      return true;
+    }
+    if (/clip\s*:\s*rect\(\s*0/.test(style) || style.includes('clip-path')) {
+      return true;
+    }
+    const isPositioned = /position\s*:\s*(absolute|fixed)/.test(style);
+    const isOffScreen = /(left|top|right|bottom)\s*:\s*-\d{3,}px/.test(style);
+    return isPositioned && isOffScreen;
+  }
+  /**
+   * Resolves paste payload from DataTransfer and synthetic-event fallback payload.
+   *
+   * @param {InputEvent} event - Paste event.
+   * @returns {RTEPastePayload} - Paste payload.
+   */
+  getPastePayload(event) {
+    const eventPayload = event
+      .rtePastePayload || { html: '', text: '' };
+    if (!event.dataTransfer) {
+      return eventPayload;
+    }
+    return {
+      html: event.dataTransfer.getData('text/html') || eventPayload.html || '',
+      text: event.dataTransfer.getData('text/plain') || eventPayload.text || '',
+    };
+  }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -169,58 +169,67 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
     return ShadowSelectionPolyfill.getSelection(richTextContentRef.shadowRoot);
   }
   /**
-   * Scroll the editor's scrollable viewport so the caret stays visible.
-   * Setting the selection range programmatically does not trigger the browser's
-   * native auto-scroll, so when the cursor is moved (e.g. after inserting a
-   * function block) it can land outside the visible area of a fixed-height
-   * (rows) editor. This keeps the caret within view.
+   * Keep the caret visible after the range is restored.
    *
-   * Note: This method performs getBoundingClientRect() reads and is called during
-   * the re-render task path every time the saved selection is restored.
+   * Applying a range in code does not trigger browser auto-scroll. We first
+   * check whether the caret is already visible, and only then call
+   * scrollIntoView with center alignment. This works for both fixed-height
+   * content hosts (rows mode) and page scrolling (stretch mode), while avoiding
+   * unnecessary jumps during normal typing.
    *
    * @param {Range} range - The range that was applied to the selection.
    */
   scrollCaretIntoView(range) {
-    const viewport = this.vegaRichTextEditorRenderer.getRichTextContentRef();
-    const caretRect = this.getCaretRect(range);
-    if (!viewport || !caretRect) {
+    const element = this.getCaretElement(range);
+    if (!element || typeof element.scrollIntoView !== 'function') {
       return;
     }
-    const viewportRect = viewport.getBoundingClientRect();
-    if (viewportRect.width === 0 ||
-      viewportRect.height === 0 ||
-      (caretRect.top === 0 && caretRect.bottom === 0 && caretRect.left === 0 && caretRect.right === 0)) {
+    if (this.isCaretWithinViewport(range, element)) {
       return;
     }
-    if (caretRect.bottom > viewportRect.bottom) {
-      viewport.scrollTop += caretRect.bottom - viewportRect.bottom;
-    }
-    else if (caretRect.top < viewportRect.top) {
-      viewport.scrollTop -= viewportRect.top - caretRect.top;
-    }
+    element.scrollIntoView({ block: 'center', inline: 'nearest' });
   }
   /**
-   * Get the bounding rect of the caret for the given range.
-   * A collapsed range inside an empty node can return an empty rect, so in that
-   * case fall back to the nearest element's bounding rect.
+   * Resolve the nearest element for the caret start container.
    *
-   * @param {Range} range - The range to measure.
-   * @returns {Nullable<DOMRect>} The caret bounding rect, or null if it cannot be resolved.
+   * @param {Range} range - The range to inspect.
+   * @returns {Nullable<HTMLElement>} The caret's nearest element, or null.
    */
-  getCaretRect(range) {
-    // getBoundingClientRect is unavailable in non-DOM (test) environments.
-    if (typeof range.getBoundingClientRect !== 'function') {
+  getCaretElement(range) {
+    const startContainer = range.startContainer;
+    if (!startContainer) {
       return null;
     }
-    const rangeRect = range.getBoundingClientRect();
-    if (rangeRect.height > 0) {
-      return rangeRect;
-    }
-    const startContainer = range.startContainer;
-    const element = startContainer.nodeType === Node.TEXT_NODE
+    return startContainer.nodeType === Node.TEXT_NODE
       ? startContainer.parentElement
       : startContainer;
-    return element ? element.getBoundingClientRect() : null;
+  }
+  /**
+   * Determine whether the caret is currently visible within the viewport.
+   *
+   * The visible area is the intersection of the window and the content host,
+   * because in fixed-height (`rows`) mode the host clips its content while in
+   * the stretch mode the window is the binding constraint.
+   *
+   * @param {Range} range - The range that was applied to the selection.
+   * @param {HTMLElement} element - The caret's nearest element.
+   * @returns {boolean} True when the caret is fully inside the visible area.
+   */
+  isCaretWithinViewport(range, element) {
+    const caretRect = range.getBoundingClientRect();
+    // A collapsed range can report an empty rect; fall back to the element.
+    const rect = caretRect.width === 0 && caretRect.height === 0 && caretRect.top === 0
+      ? element.getBoundingClientRect()
+      : caretRect;
+    let top = 0;
+    let bottom = window.innerHeight;
+    const contentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    if (contentRef) {
+      const contentRect = contentRef.getBoundingClientRect();
+      top = Math.max(top, contentRect.top);
+      bottom = Math.min(bottom, contentRect.bottom);
+    }
+    return rect.top >= top - 1 && rect.bottom <= bottom + 1;
   }
   /**
    * Save the current selection range detail
@@ -272,6 +281,28 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
     const range = selection.getRangeAt(0);
     const commonAncestor = range.commonAncestorContainer;
     const selectedNodes = [];
+    if (range.collapsed) {
+      const { startContainer } = range;
+      if (startContainer.nodeType === Node.TEXT_NODE) {
+        const currentNode = startContainer.parentElement;
+        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(currentNode);
+        if (nodeEntity instanceof RTENode) {
+          selectedNodes.push(nodeEntity);
+        }
+      }
+      else if (isHTMLElement(startContainer)) {
+        const entityElement = RTEDecoratorNode.isDecoratorNodeContainerElement(startContainer)
+          ? RTEDecoratorNode.getDecoratorNodeElement(startContainer)
+          : startContainer;
+        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
+        if (nodeEntity instanceof RTENode) {
+          selectedNodes.push(nodeEntity);
+        }
+        else if (nodeEntity instanceof RTEBlock && range.collapsed) {
+          this.tryToFindTheNearestSelectedNode(range, selectedNodes);
+        }
+      }
+    }
     /**
      * Rich text node filter
      *
@@ -313,7 +344,9 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
       }
       node.childNodes.forEach(filterNode);
     };
-    filterNode(commonAncestor);
+    if (!range.collapsed || selectedNodes.length === 0) {
+      filterNode(commonAncestor);
+    }
     this.addNodesToSelectionMap(selectedNodes);
     this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -34,7 +34,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/horizontal-alignment/horizontal-alignment-toolbar-button-slimmer.js

@@ -43,7 +43,7 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarBu
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }