fix: infinite re-rendering of actions inside inline toolbar

Author: marcantondahmen

src/components/modules/ui.ts

@@ -41,6 +41,12 @@ interface UINodes {
  * @property {Element} nodes.redactor - <ce-redactor>
  */
 export default class UI extends Module<UINodes> {
+  /**
+   * This is the cached selection anchor element in order to check if the selection
+   * has actually changed and prevent inifinite firing and handling of the selectionchange event.
+   */
+  private prevSelectionAnchorElement: Element | null = null;
+
   /**
    * Editor.js UI CSS class names
    *
@@ -787,6 +793,7 @@ export default class UI extends Module<UINodes> {
     }
   }
 
+
   /**
    * Handle selection changes on mobile devices
    * Uses for showing the Inline Toolbar
@@ -795,6 +802,12 @@ export default class UI extends Module<UINodes> {
     const { CrossBlockSelection, BlockSelection } = this.Editor;
     const focusedElement = Selection.anchorElement;
 
+    if (this.prevSelectionAnchorElement == focusedElement) {
+      return;
+    }
+
+    this.prevSelectionAnchorElement = focusedElement;
+
     if (CrossBlockSelection.isCrossBlockSelectionStarted) {
       // Removes all ranges when any Block is selected
       if (BlockSelection.anyBlockSelected) {