@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/cjs/selection-controller-828990cc.js

@@ -0,0 +1,765 @@
+'use strict';
+
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const timer = require('./timer-5f33058b.js');
+const codeBlock = require('./code-block-4cd8bccd.js');
+const component = require('./component-73a88c4e.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const vegaInternalEventId = require('./vega-internal-event-id-62371952.js');
+const observer = require('./observer-f49483e8.js');
+const ui = require('./ui-13b42af0.js');
+const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
+
+let processing = false;
+/**
+ * Simulate a selection for browsers that don't support shadow selection.
+ * Cypress test case added in https://github.com/heartlandpayments/Vega/pull/1561/files#diff-83bdbaaf47fc156ab878099aa1f21b0e8ab92abe5852521299f1fb6efab001c2R300
+ */
+class ShadowSelection {
+  constructor() {
+    this.rangeCount = 0;
+    this.ranges = [];
+  }
+  /**
+   * Returns a Range object at a specified index.
+   *
+   * @param {number} index - A specified index.
+   * @returns {Range} - A Range object.
+   */
+  getRangeAt(index) {
+    return this.ranges[index];
+  }
+  /**
+   * Adds a Range to ranges array.
+   *
+   * @param {Range} range - The range of selection.
+   */
+  addRange(range) {
+    this.ranges.push(range);
+    this.rangeCount = this.ranges.length;
+    if (!processing) {
+      const windowSelection = window.getSelection();
+      windowSelection.removeAllRanges();
+      windowSelection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
+    }
+  }
+  /**
+   * Clears all ranges.
+   */
+  removeAllRanges() {
+    this.ranges = [];
+    this.rangeCount = 0;
+  }
+}
+/**
+ * Due to the ShadowRoot.getSelection is not a standard API, we add this polyfill to achieve this function.
+ *
+ * - On Chromium, calling document.getSelection will not pierce into the Shadow DOM and gives you some unhelpful high-level element.
+ *   But it does expose the non-standard getSelection method on the ShadowRoot.
+ *
+ * - On Firefox, it does not implement ShadowRoot.getSelection,
+ *   but document.getSelection will pierce through shadow dom and give you the exact element.
+ *
+ * - On Safari, Selection.getComposedRanges is supported as of v17. On versions before that,
+ *   ShadowRoot.getSelection is not supported and apparently document.getSelection does not pierce the Shadow DOM, meaning you are just out of luck.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#shadowroot.getselection
+ * https://stackoverflow.com/a/70523247
+ */
+class ShadowSelectionPolyfill {
+  constructor() {
+    this.supportShadowSelection = typeof window.ShadowRoot.prototype['getSelection'] === 'function';
+    this.supportBeforeInput = typeof window.InputEvent.prototype.getTargetRanges === 'function';
+    this.isFirefox = window.navigator.userAgent.toLowerCase().indexOf('firefox') > 0;
+    this.listen();
+  }
+  /**
+   * For Firefox, we directly use document.getSelection()
+   * For other browser which not support shadowroot.getSelection, we use this.selection which is built by us.
+   * For browser which supported shadowroot.getSelection, we use shadowRoot.getselection().
+   *
+   * @param {ShadowRoot} shadow - A shadow.
+   * @returns {Nullable<Selection>} - The shadow selection.
+   */
+  getSelection(shadow) {
+    if (this.supportShadowSelection) {
+      return shadow['getSelection']();
+    }
+    else {
+      return this.isFirefox
+        ? this.getFirefoxSelection()
+        : this.polyfilledShadowSelection;
+    }
+  }
+  /**
+   * Get selection in firefox.
+   *
+   * Example:
+   *
+   * <span>span1</span><span>span2</span><span>span3</span>
+   *
+   * In firefox, while selected `span2`, the range be likely to:
+   * range:
+   *   startContainer: #text 'span1'
+   *   startOffset: 5
+   * 	 endContainer: #text 'span3'
+   *   endOffset: 0
+   * start is end of brefore node and end is start of after node.
+   *
+   * So we should modify the startContainer and endContainer here.
+   *
+   * modified range:
+   *   startContainer: #text 'span2'
+   *   startOffset: 0
+   * 	 endContainer: #text 'span2'
+   *   endOffset: 5
+   *
+   * @returns {Selection} - document selection
+   */
+  getFirefoxSelection() {
+    const selection = document.getSelection();
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const startNode = range.startContainer;
+      const endNode = range.endContainer;
+      if (startNode !== endNode && startNode.textContent.length === range.startOffset) {
+        const nextSibling = startNode.nodeType === Node.TEXT_NODE
+          ? startNode.parentNode.nextSibling
+          : startNode.nextSibling;
+        range.setStart(nextSibling.firstChild, 0);
+      }
+      if (endNode !== startNode && range.endOffset === 0) {
+        const previousSibling = endNode.nodeType === Node.TEXT_NODE
+          ? endNode.parentNode.previousSibling
+          : endNode.previousSibling;
+        range.setEnd(previousSibling.lastChild, previousSibling.lastChild.textContent.length);
+      }
+    }
+    return selection;
+  }
+  /**
+   * Sets up event listeners for `selectionchange` and `beforeinput` events to simulate shadow selection.
+   */
+  listen() {
+    if (this.isFirefox || this.supportShadowSelection || !this.supportBeforeInput)
+      return;
+    this.polyfilledShadowSelection = new ShadowSelection();
+    window.addEventListener('selectionchange', () => {
+      if (!processing) {
+        processing = true;
+        const active = component.getActiveElement();
+        if (active && active.hasAttribute('contenteditable')) {
+          // This command will not actually work, it only trigger the `beforeinput` event,
+          // the `beforeinput` event will prevented this command work.
+          document.execCommand('indent');
+        }
+        else {
+          this.polyfilledShadowSelection.removeAllRanges();
+        }
+        processing = false;
+      }
+    }, true);
+    window.addEventListener('beforeinput', (event) => {
+      if (processing) {
+        const ranges = event.getTargetRanges();
+        const range = ranges[0];
+        const newRange = new Range();
+        newRange.setStart(range.startContainer, range.startOffset);
+        newRange.setEnd(range.endContainer, range.endOffset);
+        this.polyfilledShadowSelection.removeAllRanges();
+        this.polyfilledShadowSelection.addRange(newRange);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }, true);
+  }
+}
+const ShadowSelectionPolyfill$1 = new ShadowSelectionPolyfill();
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The current slimmer contains a task queue and will call the task after component re-render.
+ */
+class AutoRunWhenReRenderTaskQueueSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor(maxCount) {
+    super();
+    this.autoRunTaskQueue = new synchronizeTaskQueue.SynchronizeTaskQueue(maxCount);
+  }
+  /**
+   * Update the caret position after the component re-render
+   */
+  async executeTaskHook() {
+    if (this.autoRunTaskQueue.queue.length) {
+      await this.autoRunTaskQueue.runTask();
+    }
+  }
+  /**
+   * Push the update task to a queue.
+   *
+   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
+   */
+  enqueueTheTaskIntoQueue(immediatelyRun = false) {
+    void this.autoRunTaskQueue.enqueue({
+      /** Add task to the queue and run it until component did render */
+      run: async () => {
+        try {
+          await this.doTask();
+        }
+        catch (e) {
+          globalSlimmerRegistry.LogUtility.error('The auto task run failed.', e);
+        }
+      },
+    }, immediatelyRun);
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidUpdate')
+], AutoRunWhenReRenderTaskQueueSlimmer.prototype, "executeTaskHook", null);
+
+/** Manages selection range for a rich text editor, providing methods to set, sync, and create native ranges based on RTENodes and Nodes. */
+class RTERange {
+  /**
+   * Initial the rte range properties
+   *
+   * @param {Node} [startContainer] The range start element.
+   * @param {Node} [endContainer] The range end element.
+   * @param {number} [startOffset] The range start element content offset, default value is 0.
+   * @param {number} [endOffset]  The range end element content offset, default value is 0.
+   * @param {RTENode} [startNode] The range start node, the start node could be null if the start element is root element.
+   * @param {RTENode} [endNode]  The range start node, the start node could be null if the start element is root element.
+   * @param {Range} [nativeRange] The browser native range instance.
+   */
+  constructor(startContainer, endContainer, startOffset = 0, endOffset = 0, startNode, endNode, nativeRange) {
+    this._startOffset = 0;
+    this._endOffset = 0;
+    this._startContainer = startContainer;
+    this._endContainer = endContainer;
+    this._startOffset = startOffset;
+    this._endOffset = endOffset;
+    this._startNode = startNode;
+    this._endNode = endNode;
+    if (nativeRange) {
+      this._oldNativeRange = nativeRange;
+    }
+  }
+  /**
+   * Returns the start container as a Node or null if it is not set.
+   * The start container could be null when the dom node should be create after re-render.
+   *
+   * @returns {Nullable<Node>} The range start element.
+   */
+  get startContainer() {
+    return this._startContainer;
+  }
+  /**
+   * Returns the end container as a Node or null if it is not set.
+   * The end container could be null when the dom node should be create after re-render.
+   *
+   * @returns {Nullable<Node>} The range start element.
+   */
+  get endContainer() {
+    return this._endContainer;
+  }
+  /**
+   * Returns the range start RTE node as a RTENode or null if it is not set.
+   * The start RTENode could be null when the range start node is the root element of the rich text editor.
+   *
+   * @returns {Nullable<RTENode>} The range start element.
+   */
+  get startNode() {
+    return this._startNode;
+  }
+  /**
+   * Returns the range end RTE node as a RTENode or null if it is not set.
+   * The end RTENode could be null when the range end node is the root element of the rich text editor.
+   *
+   * @returns {Nullable<RTENode>} The range start element.
+   */
+  get endNode() {
+    return this._endNode;
+  }
+  /**
+   * Returns range's start offset.
+   *
+   * @returns {number} The character length in text node or the element index of parent element.
+   */
+  get startOffset() {
+    return this._startOffset;
+  }
+  /**
+   * Returns range's start offset.
+   *
+   * @returns {number} The character length in text node or the element index of parent element.
+   */
+  get endOffset() {
+    return this._endOffset;
+  }
+  /**
+   * Updates the range options for a Rich Text Editor.
+   * This method will called after modify the content, the start node and end node should be rte node.
+   * This method will called after selectionchange event emit, the start node and end node should be the html node.
+   *
+   * @param {RTERangeOptions} options - An object that contains the following properties:
+   * @param {Range} [nativeRange] - The native range instance
+   * @returns {RTERange} - The new RTERange instance
+   */
+  updateRTERange(options, nativeRange) {
+    const { startOffset, endOffset } = options;
+    this._startOffset = startOffset;
+    this._endOffset = endOffset;
+    const startNode = options.startNode;
+    const endNode = options.endNode;
+    if (startNode instanceof codeBlock.RTENode) {
+      this._startNode = startNode;
+      this._endNode = endNode;
+      const startContainer = this.getElementByRTENode(this._startNode);
+      const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
+      if (startContainer) {
+        this._startContainer = startContainer;
+        this._endContainer = endContainer;
+      }
+    }
+    else {
+      // The selectionchange callback has a 50 ms delay, so we need to check the next range is the same as the current ret range.
+      this._startContainer = startNode;
+      this._endContainer = endNode;
+      this._startNode = this.getRTENodeByElement(this._startContainer);
+      this._endNode =
+        this._startContainer === this._endContainer
+          ? this._startNode
+          : this.getRTENodeByElement(this._endContainer);
+      if (nativeRange) {
+        this._oldNativeRange = nativeRange;
+      }
+    }
+    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+  }
+  /**
+   * Creates a new instance of the `RTERange` class with the same properties as the current instance.
+   *
+   * @returns {RTERange} A new `RTERange` instance with the same start and end containers, offsets, and nodes.
+   */
+  clone() {
+    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+  }
+  /**
+   * Creates a Range object based on start and end nodes and offsets.
+   * Invoke this method to get the future range state if the range content modified.
+   * Invoke this method to get the native range instance if range start node and end node not defined
+   *
+   * @returns {Nullable<Range>} The range instance. The return value could be null if the start node or end node are not rendered.
+   */
+  toNativeRange() {
+    const startContainer = this.getElementByRTENode(this._startNode);
+    const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
+    const range = new Range();
+    if (startContainer && endContainer) {
+      range.setStart(startContainer, this._startOffset);
+      range.setEnd(endContainer, this._endOffset);
+      this._startContainer = startContainer;
+      this._endContainer = endContainer;
+      this._oldNativeRange = range;
+      return range;
+    }
+    else if (this._oldNativeRange) {
+      return this._oldNativeRange;
+    }
+  }
+  /**
+   * Retrieves the DOM element associated with a given RTENode entity.
+   *
+   * @param {Nullable<RTENode>} node - Represents a node in a Rich Text Editor.
+   * @returns {Nullable<Node>} a Node object or null.
+   */
+  getElementByRTENode(node) {
+    if (node) {
+      const element = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(node);
+      if (element) {
+        return node instanceof codeBlock.RTEImageNode
+          ? ui.findParent(element, 'vega-rich-text-image-editor')
+          : element.firstChild;
+      }
+    }
+  }
+  /**
+   * Retrieves an RTENode based on the given element by checking its type and parent elements.
+   *
+   * @param {Node} element - An element in the DOM (Document Object Model).
+   * @returns { Nullable<RTENode>} Returns a nullable `RTENode` object.
+   */
+  getRTENodeByElement(element) {
+    if (element) {
+      const registerElement = element.nodeType === Node.TEXT_NODE
+        ? element.parentElement
+        : element.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
+          ? element.querySelector('img')
+          : element;
+      return codeBlock.stateEntityRenderingRegistry.getEntityByDOM(registerElement);
+    }
+  }
+}
+
+/**
+ * Represents the state of the selection in the RTE.
+ */
+class RTESelectionState {
+  constructor(range) {
+    this.range = range;
+  }
+  /**
+   * Clones the selection state, updating the range nodes based on the provided content.
+   *
+   * @returns {RTESelectionState} A new instance of RTESelectionState with the updated range.
+   */
+  clone() {
+    const newRange = this.range.clone();
+    return new RTESelectionState(newRange);
+  }
+}
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The text selection controller
+ */
+class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.currentRange = new RTERange();
+    this.handleSelectionWithDebounce = timer.debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
+    this.pendingRestoreSelectionNodes = [];
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      // add await Promise.resolve to put the code behind to a micro task
+      await Promise.resolve();
+      const range = this.currentRange.toNativeRange();
+      if (range) {
+        this.setSelectionRange(range);
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
+   */
+  connectedCallback() {
+    this.registerSelectionRangeChangeObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
+   */
+  componentDidLoad() {
+    document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
+  }
+  /**
+   * Watches the internal value of the editor
+   */
+  watchValueUpdate() {
+    this.prepareRestoreSelectionState();
+    this.restoreSelection();
+  }
+  /**
+   * Get the current RTE selection range
+   *
+   * @returns {RTERange} - The current RTE selection range
+   */
+  getCurrentRange() {
+    return this.currentRange;
+  }
+  /**
+   * Get the selected rich text node
+   *
+   * @returns {RTENode[]} Selected rich text nodes
+   */
+  getSelectedNodes() {
+    return Array.from(this.selectionMap.values()).flat();
+  }
+  /**
+   * Get the selected rich text blocks
+   *
+   * @returns {RTEBlock[]} Selected rich text blocks
+   */
+  getSelectedBlocks() {
+    return Array.from(this.selectionMap.keys());
+  }
+  /**
+   * Set the selection state
+   *
+   * @param {RTESelectionState} state - The selection state to set
+   */
+  setSelectionState(state) {
+    this.selectionState = state;
+  }
+  /**
+   * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue
+   *
+   * @param {SelectionStateType['startNode']} startNode - The starting node of the selection range. It is a Node object representing the node where the selection range starts.
+   * @param {number} startOffset - The `startNode` where the selection range should start. It indicates the position within the `startNode` where the selection should begin.
+   * @param {SelectionStateType['endNode']} [endNode] - The ending node of the selection range. If a value is provided for `endNode`, it will be used as the ending node of the selection range.
+   * @param {number} [endOffset] - The ending offset within the `endNode` where the selection range should end.
+   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
+   */
+  enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset, immediatelyRun = false) {
+    if (startNode instanceof codeBlock.RTECodeBlockNode) {
+      this.internalCodeBlockSelectionController.enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun);
+    }
+    else {
+      endNode = endNode || startNode;
+      endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
+      this.currentRange = this.currentRange.updateRTERange({
+        startNode,
+        endNode,
+        startOffset,
+        endOffset,
+      });
+      super.enqueueTheTaskIntoQueue(immediatelyRun);
+    }
+  }
+  /**
+   * Set selection with a new range
+   *
+   * @param {Range} range - The range to set
+   */
+  setSelectionRange(range) {
+    const selection = this.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      this.saveSelection();
+    }
+  }
+  /**
+   * Get the rich text content selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  getSelection() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    return ShadowSelectionPolyfill$1.getSelection(richTextContentRef.shadowRoot);
+  }
+  /**
+   * Save the current selection range detail
+   */
+  saveSelection() {
+    const selection = this.getSelection();
+    // The range is out of date if the queue is not empty, or the range is update by the composition text insert, so we should not update the RTERange
+    if (selection &&
+      selection.rangeCount > 0 &&
+      this.autoRunTaskQueue.queue.length === 0 &&
+      !this.insertCompositionTextController.isComposing()) {
+      const range = selection.getRangeAt(0);
+      const { startContainer: startNode, endContainer: endNode, startOffset, endOffset } = range;
+      this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset }, range);
+    }
+  }
+  /**
+   * Restore the selection to the current selected nodes
+   */
+  restoreSelection() {
+    if (this.selectionState) {
+      const { startNode, endNode, startOffset, endOffset } = this.selectionState.range;
+      if (startNode instanceof codeBlock.RTETextNode && startNode === endNode && startNode.text.length === 0) {
+        this.enqueueSelectionRangeFutureState(startNode, codeBlock.ZERO_WIDTH_SPACE.length);
+      }
+      else {
+        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
+      }
+      this.selectionState = null;
+    }
+  }
+  /**
+   * Get selected rich text
+   */
+  handleSelectionChange() {
+    if (this.disabled || this.sourceView)
+      return;
+    const selection = this.getSelection();
+    if (!selection || selection.rangeCount === 0)
+      return;
+    this.clearSelectionMap();
+    this.saveSelection();
+    const range = selection.getRangeAt(0);
+    const commonAncestor = range.commonAncestorContainer;
+    const selectedNodes = [];
+    /**
+     * Rich text node filter
+     *
+     * @param {Node} node - Start node
+     */
+    const filterNode = (node) => {
+      if (!range.intersectsNode(node)) {
+        return;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        const currentNode = node.parentElement;
+        const nodeEntity = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(currentNode);
+        if (nodeEntity instanceof codeBlock.RTENode) {
+          selectedNodes.push(nodeEntity);
+          return;
+        }
+      }
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const entityElement = node.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
+          ? node.querySelector('img')
+          : node;
+        const nodeEntity = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(entityElement);
+        if (nodeEntity instanceof codeBlock.RTECodeBlock) {
+          if (this.internalCodeBlockSelectionController.isCodeBlockSelected(nodeEntity, range)) {
+            selectedNodes.push(nodeEntity.nodes[0]);
+          }
+          return;
+        }
+        if (nodeEntity instanceof codeBlock.RTENode) {
+          selectedNodes.push(nodeEntity);
+          return;
+        }
+      }
+      node.childNodes.forEach(filterNode);
+    };
+    filterNode(commonAncestor);
+    selectedNodes.forEach((node) => {
+      if (this.selectionMap.has(node.parentBlock)) {
+        this.selectionMap.get(node.parentBlock).push(node);
+      }
+      else {
+        this.selectionMap.set(node.parentBlock, [node]);
+      }
+    });
+    this.getSelectedNodes().forEach((node) => node.apply(new codeBlock.SelectionChangeAction(range)));
+  }
+  /**
+   * Clear the selection map.
+   * The code node don't need clear here, because the code node will manager the selection state itself. `code-node-renderer.tsx#handleSelectionChange`
+   */
+  clearSelectionMap() {
+    this.getSelectedNodes()
+      .filter((node) => node.type !== 'CODE_BLOCK_NODE')
+      .forEach((node) => {
+      node.annotationMap.delete(codeBlock.InternalAnnotationTypeEnum.SELECTION_RANGE);
+    });
+    this.selectionMap = new Map();
+  }
+  /**
+   * Check if the selection range change is acceptable
+   *
+   * @returns {boolean} - Returns a boolean value.
+   */
+  isAcceptableSelectionRangeChange() {
+    return true;
+  }
+  /**
+   * Register the selection range change observer
+   */
+  registerSelectionRangeChangeObserver() {
+    this.selectionRangeChangeObserver = new observer.Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
+      if (!payload.updateDirectly) {
+        this.pendingRestoreSelectionNodes.push(payload.node);
+      }
+      else {
+        this.enqueueSelectionRangeFutureState(payload.node, payload.offset);
+      }
+    });
+    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+  }
+  /**
+   * Prepare the selection state to restore
+   */
+  prepareRestoreSelectionState() {
+    if (this.pendingRestoreSelectionNodes.length > 0) {
+      const startNode = this.pendingRestoreSelectionNodes[0];
+      const endNode = this.pendingRestoreSelectionNodes.length > 1
+        ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
+        : startNode;
+      const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
+      const nodesInCurrentRange = startContainer &&
+        codeBlock.stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+        endContainer &&
+        codeBlock.stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
+      if (nodesInCurrentRange) {
+        this.currentRange = this.currentRange.updateRTERange({
+          startNode,
+          endNode,
+          startOffset,
+          endOffset,
+        });
+        this.selectionState = new RTESelectionState(this.currentRange);
+      }
+      else {
+        this.currentRange = this.currentRange.updateRTERange({
+          startNode,
+          endNode,
+          startOffset: 0,
+          endOffset: endNode.text.length,
+        });
+        this.selectionState = new RTESelectionState(this.currentRange);
+      }
+      this.pendingRestoreSelectionNodes = [];
+    }
+  }
+}
+SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], SelectionController.prototype, "selectionMap", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "host", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "value", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "disabled", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "sourceView", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "valueController", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "insertCompositionTextController", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "historyController", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "internalCodeBlockSelectionController", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], SelectionController.prototype, "connectedCallback", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], SelectionController.prototype, "disconnectedCallback", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], SelectionController.prototype, "componentDidLoad", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
+], SelectionController.prototype, "watchValueUpdate", null);
+
+exports.AutoRunWhenReRenderTaskQueueSlimmer = AutoRunWhenReRenderTaskQueueSlimmer;
+exports.RTESelectionState = RTESelectionState;
+exports.SelectionController = SelectionController;
+exports.ShadowSelection = ShadowSelection;
+exports.ShadowSelectionPolyfill = ShadowSelectionPolyfill$1;