refactor(texteditor): general code improvments

Author: habibayman

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -291,6 +291,10 @@ const MESSAGES = {
     message: 'Special Characters',
     context: 'Title for the menu containing special characters and mathematical symbols.',
   },
+  loadingFormulas: {
+    message: 'Loading math editor',
+    context: 'Text displayed while the math editor is being loaded.',
+  },
 
   // Error Messages
   noFileProvided: {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue

@@ -33,7 +33,7 @@
             v-if="!mathLiveLoaded"
             class="loading-placeholder"
           >
-            Loading math editor...
+            {{ loadingFormulas$() }}...
           </div>
           <math-field
             v-else
@@ -107,7 +107,7 @@
 
 <script>
 
-  import { ref, onMounted, defineComponent, computed } from 'vue';
+  import { ref, onMounted, defineComponent, computed, nextTick } from 'vue';
   import { useFocusTrap } from '../../composables/useFocusTrap';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import { useMathLiveLocale } from '../../composables/useMathLiveLocale';
@@ -131,8 +131,6 @@
           // Dynamic import of mathlive
           await import(/* webpackChunkName: "mathlive" */ 'mathlive');
 
-          mathLiveLoaded.value = true;
-
           // Configure MathLive after it's loaded
           if (typeof window !== 'undefined' && window.MathfieldElement) {
             window.MathfieldElement.soundsDirectory = null;
@@ -142,6 +140,8 @@
             }
           }
 
+          mathLiveLoaded.value = true;
+
           // Initialize the mathfield after MathLive is loaded
           await initializeMathfield();
         } catch (error) {
@@ -152,7 +152,7 @@
 
       const initializeMathfield = async () => {
         // Wait for next tick to ensure the mathfield element is rendered
-        await new Promise(resolve => setTimeout(resolve, 0));
+        await nextTick();
 
         if (mathfieldEl.value) {
           mathfieldEl.value.mathVirtualKeyboardPolicy = 'manual';
@@ -226,7 +226,8 @@
         }
       };
 
-      const { formulasMenuTitle$, insert$, closeModal$ } = getTipTapEditorStrings();
+      const { formulasMenuTitle$, insert$, closeModal$, loadingFormulas$ } =
+        getTipTapEditorStrings();
       const formulasStrings = getFormulasStrings();
 
       // Transform symbols data to use translations
@@ -265,6 +266,7 @@
         formulasMenuTitle$,
         insert$,
         closeModal$,
+        loadingFormulas$,
         isFormulaEmpty,
       };
     },

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js

@@ -1,4 +1,5 @@
 import { ref, watch } from 'vue';
+import { throttle } from 'lodash';
 import { useBreakpoint } from './useBreakpoint';
 
 export function useModalPositioning() {
@@ -8,9 +9,6 @@ export function useModalPositioning() {
   const anchorElement = ref(null);
   const { isMobile } = useBreakpoint();
 
-  let scrollRaf = null;
-  let resizeRaf = null;
-
   const updatePosition = () => {
     if (!anchorElement.value || isModalCentered.value || isMobile.value) {
       return;
@@ -24,29 +22,20 @@ export function useModalPositioning() {
     };
   };
 
-  // Throttle scroll and resize events
-  const throttledUpdatePosition = () => {
-    if (scrollRaf) {
-      cancelAnimationFrame(scrollRaf);
+  const handleResize = () => {
+    if (isModalOpen.value) {
+      // Re-evaluate positioning on resize
+      if (isMobile.value && !isModalCentered.value) {
+        setCenteredPosition();
+      } else if (!isMobile.value && anchorElement.value) {
+        updatePosition();
+      }
     }
-    scrollRaf = requestAnimationFrame(updatePosition);
   };
 
-  const throttledHandleResize = () => {
-    if (resizeRaf) {
-      cancelAnimationFrame(resizeRaf);
-    }
-    resizeRaf = requestAnimationFrame(() => {
-      if (isModalOpen.value) {
-        // Re-evaluate positioning on resize
-        if (isMobile.value && !isModalCentered.value) {
-          setCenteredPosition();
-        } else if (!isMobile.value && anchorElement.value) {
-          updatePosition();
-        }
-      }
-    });
-  };
+  // Throttle scroll and resize events
+  const throttledUpdatePosition = throttle(updatePosition, 10);
+  const throttledHandleResize = throttle(handleResize, 10);
 
   const setCenteredPosition = () => {
     isModalCentered.value = true;
@@ -102,31 +91,19 @@ export function useModalPositioning() {
         document.removeEventListener('mousedown', clickOutsideHandler, true);
         window.removeEventListener('scroll', throttledUpdatePosition, true);
         window.removeEventListener('resize', throttledHandleResize, true);
-        // Cancel any pending animation frames
-        if (scrollRaf) {
-          cancelAnimationFrame(scrollRaf);
-          scrollRaf = null;
-        }
-        if (resizeRaf) {
-          cancelAnimationFrame(resizeRaf);
-          resizeRaf = null;
-        }
+        // Cancel any pending throttled calls
+        throttledUpdatePosition.cancel();
+        throttledHandleResize.cancel();
       }
     });
   };
 
   const cleanup = () => {
     window.removeEventListener('scroll', throttledUpdatePosition, true);
     window.removeEventListener('resize', throttledHandleResize, true);
-    // Cancel any pending animation frames
-    if (scrollRaf) {
-      cancelAnimationFrame(scrollRaf);
-      scrollRaf = null;
-    }
-    if (resizeRaf) {
-      cancelAnimationFrame(resizeRaf);
-      resizeRaf = null;
-    }
+    // Cancel any pending throttled calls
+    throttledUpdatePosition.cancel();
+    throttledHandleResize.cancel();
   };
 
   return {