From 1d97750632629ea923a6acde14f0a75032e91706 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 11 Aug 2025 06:05:20 +0300
Subject: [PATCH 01/12] refactor(texteditor): remove uploader component from
 assessment item editor

---
 .../components/AssessmentItemEditor/AssessmentItemEditor.vue     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 788b69e483..8966307d62 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -205,7 +205,6 @@
         openAnswerIdx: null,
         kindSelectKey: 0,
         AssessmentItemTypes,
-        EditorImageProcessor,
       };
     },
     computed: {

From 079146dffb3be6fcfeb11618fce1567caeb883df Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 17 Aug 2025 21:45:26 +0300
Subject: [PATCH 02/12] refactor(texteditor):better DOM handling for image node
 view

---
 .../TipTapEditor/components/image/ImageNodeView.vue            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
index 7b937e508b..962bc1ae20 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
@@ -280,7 +280,8 @@
       });
 
       onUnmounted(() => {
-        clearTimeout(debounceTimer);
+        // Cancel any pending debounced calls
+        debouncedSaveSize.cancel();
 
         // Clean up any remaining resize listeners
         if (resizeListeners) {

From 593f20e071c91fd0e60f58a60d9ea85ea49767e0 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 17 Aug 2025 23:23:04 +0300
Subject: [PATCH 03/12] feat(texteditor): swap editor view on touchscreen
 detect

---
 .../frontend/shared/utils/browserInfo.js      | 11 +++++++++++
 .../TipTapEditor/TipTapEditor.vue             |  8 +++-----
 .../TipTapEditor/composables/useBreakpoint.js | 19 -------------------
 .../composables/useLinkHandling.js            |  5 ++---
 .../composables/useModalPositioning.js        | 14 ++++++++------
 5 files changed, 24 insertions(+), 33 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/utils/browserInfo.js
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useBreakpoint.js

diff --git a/contentcuration/contentcuration/frontend/shared/utils/browserInfo.js b/contentcuration/contentcuration/frontend/shared/utils/browserInfo.js
new file mode 100644
index 0000000000..ead9c40f42
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/utils/browserInfo.js
@@ -0,0 +1,11 @@
+/**
+ * Utility functions to detect browser and device capabilities.
+ * Currently studio isn't fully buit for touch devices,
+ * this file should be used for future-proofing
+ */
+
+// Check for presence of the touch event in DOM or multi-touch capabilities
+export const isTouchDevice =
+  'ontouchstart' in window ||
+  window.navigator?.maxTouchPoints > 0 ||
+  window.navigator?.msMaxTouchPoints > 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index b01194cdb9..06ab9ce89f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -12,7 +12,7 @@
   >
     <div v-if="editorMode === 'edit'">
       <EditorToolbar
-        v-if="!isMobile"
+        v-if="!isTouchDevice"
         v-on="sharedEventHandlers"
         @minimize="emitMinimize"
       />
@@ -124,8 +124,8 @@
   import { preprocessMarkdown } from './utils/markdown';
   import MobileTopBar from './components/toolbar/MobileTopBar.vue';
   import MobileFormattingBar from './components/toolbar/MobileFormattingBar.vue';
-  import { useBreakpoint } from './composables/useBreakpoint';
   import { getTipTapEditorStrings } from './TipTapEditorStrings';
+  import { isTouchDevice } from 'shared/utils/browserInfo.js';
 
   export default defineComponent({
     name: 'RichTextEditor',
@@ -154,8 +154,6 @@
       );
       provide('mathHandler', mathHandler);
 
-      const { isMobile } = useBreakpoint();
-
       const imageHandler = useImageHandling(editor);
       provide('imageProcessor', props.imageProcessor);
 
@@ -270,7 +268,7 @@
         linkHandler,
         editor,
         mathHandler,
-        isMobile,
+        isTouchDevice,
         imageHandler,
         sharedEventHandlers,
         editorMode: computed(() => props.mode),
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useBreakpoint.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useBreakpoint.js
deleted file mode 100644
index f750fee6e0..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useBreakpoint.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue';
-
-export function useBreakpoint(breakpoint = 768) {
-  const isMobile = ref(window.innerWidth < breakpoint);
-
-  const onResize = () => {
-    isMobile.value = window.innerWidth < breakpoint;
-  };
-
-  onMounted(() => {
-    window.addEventListener('resize', onResize);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', onResize);
-  });
-
-  return { isMobile };
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js
index b774140108..148d8c6e8d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js
@@ -1,5 +1,5 @@
 import { ref, watch, onUnmounted } from 'vue';
-import { useBreakpoint } from './useBreakpoint';
+import { isTouchDevice } from 'shared/utils/browserInfo';
 
 export function useLinkHandling(editor) {
   const isEditorOpen = ref(false);
@@ -9,7 +9,6 @@ export function useLinkHandling(editor) {
   const editorMode = ref('create');
   const savedSelection = ref(null);
   const isEditorCentered = ref(false);
-  const { isMobile } = useBreakpoint();
 
   const calculatePosition = (forceCenter = false) => {
     if (!editor.value) return {};
@@ -17,7 +16,7 @@ export function useLinkHandling(editor) {
 
     isEditorCentered.value = false;
     // Only center the edit modal on mobile, not the bubble menu
-    if (isMobile.value && forceCenter) {
+    if (isTouchDevice && forceCenter) {
       isEditorCentered.value = true;
       return {
         position: 'fixed',
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
index d83f6d703f..9f172e2ad5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
@@ -1,16 +1,18 @@
 import { ref, watch } from 'vue';
 import { throttle } from 'lodash';
-import { useBreakpoint } from './useBreakpoint';
+import { isTouchDevice } from 'shared/utils/browserInfo';
 
 export function useModalPositioning() {
   const isModalOpen = ref(false);
   const popoverStyle = ref({});
   const isModalCentered = ref(false);
   const anchorElement = ref(null);
-  const { isMobile } = useBreakpoint();
+
+  let scrollRaf = null;
+  let resizeRaf = null;
 
   const updatePosition = () => {
-    if (!anchorElement.value || isModalCentered.value || isMobile.value) {
+    if (!anchorElement.value || isModalCentered.value || isTouchDevice) {
       return;
     }
     const rect = anchorElement.value.getBoundingClientRect();
@@ -25,9 +27,9 @@ export function useModalPositioning() {
   const handleResize = () => {
     if (isModalOpen.value) {
       // Re-evaluate positioning on resize
-      if (isMobile.value && !isModalCentered.value) {
+      if (isTouchDevice && !isModalCentered.value) {
         setCenteredPosition();
-      } else if (!isMobile.value && anchorElement.value) {
+      } else if (!isTouchDevice && anchorElement.value) {
         updatePosition();
       }
     }
@@ -56,7 +58,7 @@ export function useModalPositioning() {
 
   const openModal = ({ targetElement = null, centered = false } = {}) => {
     // Force centered positioning on mobile
-    if (centered || !targetElement || isMobile.value) {
+    if (centered || !targetElement || isTouchDevice) {
       setCenteredPosition();
     } else {
       setAnchoredPosition(targetElement);

From 4103d4dc998c78b9ec03de8e3e4bf595d9c67498 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 18 Aug 2025 05:28:19 +0300
Subject: [PATCH 04/12] refactor(texteditor): landscape screens better modals

---
 .../TipTapEditor/TipTapEditor.vue             |  1 +
 .../components/image/ImageUploadModal.vue     | 17 ++++++++
 .../components/math/FormulasMenu.vue          | 40 ++++++++++++++++++-
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 06ab9ce89f..d8afaa6469 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -351,6 +351,7 @@
 
   /* Overlay for edit mode to allow clicking outside to close */
   .has-overlay {
+    z-index: 10;
     pointer-events: auto;
     background: rgba(0, 0, 0, 0.5);
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
index e79d136de1..f60c840dfc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue
@@ -536,4 +536,21 @@
     outline: 2px solid #0097f2;
   }
 
+  @media screen and (max-height: 500px) and (orientation: landscape) {
+    .image-upload-modal {
+      width: 50%;
+      height: 90%;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .modal-content {
+      padding: 1rem;
+    }
+
+    .image-preview-container {
+      height: 100px;
+    }
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
index c018128026..39a4923142 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/math/FormulasMenu.vue
@@ -289,6 +289,7 @@
     position: relative;
     width: 90%;
     max-width: 500px;
+    max-height: 90vh;
   }
 
   .card {
@@ -373,7 +374,7 @@
   }
 
   .symbols-list {
-    height: 320px;
+    height: min(320px, calc(60vh - 180px));
     padding: 8px;
     overflow-y: auto;
   }
@@ -471,4 +472,41 @@
     background: #e0e0e0;
   }
 
+  @media screen and (max-height: 500px) and (orientation: landscape) {
+    .formulas-menu {
+      width: 95%;
+      max-width: 600px;
+    }
+
+    .symbols-list {
+      height: min(240px, calc(60vh - 120px));
+    }
+
+    .symbol-editor math-field {
+      min-height: 30px;
+      font-size: 1.1rem;
+    }
+
+    .info-bar {
+      min-height: 18px;
+      margin-top: 0;
+      font-size: 0.8rem;
+    }
+
+    .symbol {
+      min-height: 32px;
+      padding: 4px;
+    }
+
+    footer {
+      height: fit-content;
+      padding: 0.3rem;
+    }
+
+    .insert-button {
+      padding: 4px 8px;
+      font-size: 0.9rem;
+    }
+  }
+
 </style>

From bb871dc3986b9dcc02809c6707098ef86a19fe4d Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 18 Aug 2025 06:06:44 +0300
Subject: [PATCH 05/12] fix(texteditor):show mobile format toolbar above
 keyboard

---
 .../toolbar/MobileFormattingBar.vue           | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
index c63e72cfb4..e6083726a4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
@@ -166,13 +166,35 @@
   .floating-panel {
     position: fixed;
     right: 0;
-    bottom: 0;
+
+    /* Use visual viewport bottom instead of layout viewport */
+    bottom: calc(100vh - 100dvh);
     left: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     padding: 0.25rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: slide-up 0.2s ease-out;
+  }
+
+  /* Fallback for older browsers */
+  @supports not (height: 100dvh) {
+    .floating-panel {
+      bottom: 0;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   .fixed-actions {

From 81ed40fa15d3b05744c08671be794bd725b4953c Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 18 Aug 2025 07:09:56 +0300
Subject: [PATCH 06/12] feat(texteditor):move ItemToolbar up editor on
 touchscreens

---
 .../AnswersEditor/AnswersEditor.vue           | 90 ++++++++++++++++++-
 .../components/HintsEditor/HintsEditor.vue    | 45 +++++++++-
 2 files changed, 133 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index d141d98945..90df4d9070 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -24,7 +24,92 @@
         >
           <div :class="indicatorClasses(answer)"></div>
           <VCardText :class="{ 'pb-0': !isAnswerOpen(answerIdx) }">
-            <VLayout align-top>
+            <!-- Touch device layout with toolbar always above -->
+            <template v-if="isTouchDevice">
+              <!-- Toolbar row for touch devices -->
+              <VLayout class="mb-2">
+                <!-- Selection controls -->
+                <VFlex shrink>
+                  <VRadioGroup
+                    v-if="shouldHaveOneCorrectAnswer"
+                    :value="correctAnswersIndices"
+                    @change="onCorrectAnswersIndicesUpdate"
+                  >
+                    <VRadio
+                      :value="answerIdx"
+                      data-test="answerRadio"
+                      color="primary"
+                    />
+                  </VRadioGroup>
+
+                  <Checkbox
+                    v-if="isMultipleSelection"
+                    :key="answerIdx"
+                    :value="answerIdx"
+                    :inputValue="correctAnswersIndices"
+                    @input="onCorrectAnswersIndicesUpdate"
+                  />
+                </VFlex>
+
+                <VSpacer />
+
+                <!-- Toolbar -->
+                <VFlex shrink>
+                  <AssessmentItemToolbar
+                    :iconActionsConfig="toolbarIconActions"
+                    :canMoveUp="!isAnswerFirst(answerIdx)"
+                    :canMoveDown="!isAnswerLast(answerIdx)"
+                    class="toolbar"
+                    analyticsLabel="Answer"
+                    data-test="toolbar"
+                    @click="onToolbarClick($event, answerIdx)"
+                  />
+                </VFlex>
+              </VLayout>
+
+              <!-- Content row for touch devices -->
+              <VLayout align-top>
+                <VFlex xs12>
+                  <!-- Answer content component -->
+                  <keep-alive :max="5">
+                    <div v-if="isInputQuestion">
+                      <VTextField
+                        v-if="isAnswerOpen(answerIdx)"
+                        v-model="answer.answer"
+                        class="answer-number"
+                        type="number"
+                        :rules="[numericRule]"
+                        @change="updateAnswerText($event, answerIdx)"
+                      />
+                      <VTextField
+                        v-else
+                        :value="answer.answer"
+                        class="no-border"
+                        type="number"
+                      />
+                    </div>
+
+                    <div v-else>
+                      <TipTapEditor
+                        v-model="answer.answer"
+                        class="editor"
+                        :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+                        :imageProcessor="EditorImageProcessor"
+                        @update="updateAnswerText($event, answerIdx)"
+                        @minimize="emitClose"
+                      />
+                    </div>
+                  </keep-alive>
+                </VFlex>
+              </VLayout>
+            </template>
+
+            <!-- Desktop layout -->
+            <VLayout
+              v-else
+              align-top
+            >
+              <!-- Selection controls -->
               <VFlex shrink>
                 <!--
                   VRadio cannot be used without VRadioGroup like VCheckbox but it can
@@ -52,6 +137,7 @@
                 />
               </VFlex>
 
+              <!-- Answer content -->
               <VFlex xs10>
                 <keep-alive :max="5">
                   <!-- Input question shows a text field with type of `number` -->
@@ -131,6 +217,7 @@
   import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+  import { isTouchDevice } from 'shared/utils/browserInfo';
 
   const updateAnswersOrder = answers => {
     return answers.map((answer, idx) => {
@@ -174,6 +261,7 @@
         EditorImageProcessor, // Make it available in the template
         correctAnswersIndices: getCorrectAnswersIndices(this.questionKind, this.answers),
         numericRule: val => floatOrIntRegex.test(val) || this.$tr('numberFieldErrorLabel'),
+        isTouchDevice,
       };
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index 6be4253ed5..c95f510724 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -23,7 +23,48 @@
           :class="hintClasses(hintIdx)"
         >
           <VCardText :class="{ 'pt-0 pb-0': !isHintOpen(hintIdx) }">
-            <VLayout align-top>
+            <!-- Touch device layout -->
+            <template v-if="isTouchDevice">
+              <VLayout class="mb-2">
+                <VFlex
+                  xs1
+                  :style="{ 'margin-top': '10px' }"
+                >
+                  {{ hintIdx + 1 }}
+                </VFlex>
+                <VSpacer />
+                <VFlex shrink>
+                  <AssessmentItemToolbar
+                    :iconActionsConfig="toolbarIconActions"
+                    :canMoveUp="!isHintFirst(hintIdx)"
+                    :canMoveDown="!isHintLast(hintIdx)"
+                    class="toolbar"
+                    analyticsLabel="Hint"
+                    @click="onToolbarClick($event, hintIdx)"
+                  />
+                </VFlex>
+              </VLayout>
+              <VLayout>
+                <VFlex xs12>
+                  <keep-alive :max="5">
+                    <!-- analyticsLabel="Hint"-->
+                    <TipTapEditor
+                      v-model="hint.hint"
+                      :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
+                      :image-processor="EditorImageProcessor"
+                      @update="updateHintText($event, hintIdx)"
+                      @minimize="emitClose"
+                    />
+                  </keep-alive>
+                </VFlex>
+              </VLayout>
+            </template>
+
+            <!-- Desktop layout -->
+            <VLayout
+              v-else
+              align-top
+            >
               <VFlex
                 xs1
                 :style="{ 'margin-top': '10px' }"
@@ -84,6 +125,7 @@
   import { AssessmentItemToolbarActions } from '../../constants';
   import { swapElements } from 'shared/utils/helpers';
   import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+  import { isTouchDevice } from 'shared/utils/browserInfo';
 
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
@@ -124,6 +166,7 @@
           AssessmentItemToolbarActions.DELETE_ITEM,
         ],
         EditorImageProcessor,
+        isTouchDevice,
       };
     },
     methods: {

From be8957bfee6a9cda1d203ae48e7f2f2de526b4a9 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 24 Aug 2025 03:33:02 +0300
Subject: [PATCH 07/12] feat(texteditor):move ItemToolbar up on desktop
 overflow

---
 .../components/AnswersEditor/AnswersEditor.vue        |  9 +++++++--
 .../components/HintsEditor/HintsEditor.vue            | 11 +++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index 90df4d9070..14f8afc125 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -24,8 +24,8 @@
         >
           <div :class="indicatorClasses(answer)"></div>
           <VCardText :class="{ 'pb-0': !isAnswerOpen(answerIdx) }">
-            <!-- Touch device layout with toolbar always above -->
-            <template v-if="isTouchDevice">
+            <!-- Touch device & desktop layout with toolbar above -->
+            <template v-if="isTouchDevice || screenSizeLevel <= 3">
               <!-- Toolbar row for touch devices -->
               <VLayout class="mb-2">
                 <!-- Selection controls -->
@@ -208,6 +208,7 @@
 
 <script>
 
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import { AssessmentItemToolbarActions } from '../../constants';
   import { floatOrIntRegex, getCorrectAnswersIndices, mapCorrectAnswers } from '../../utils';
@@ -298,6 +299,10 @@
 
         return [];
       },
+      screenSizeLevel() {
+        const { windowBreakpoint } = useKResponsiveWindow();
+        return windowBreakpoint.value ?? 0;
+      },
     },
     watch: {
       answers() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index c95f510724..81ee4efcfa 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -23,8 +23,8 @@
           :class="hintClasses(hintIdx)"
         >
           <VCardText :class="{ 'pt-0 pb-0': !isHintOpen(hintIdx) }">
-            <!-- Touch device layout -->
-            <template v-if="isTouchDevice">
+            <!-- Touch device & desktop layout with toolbar above -->
+            <template v-if="isTouchDevice || screenSizeLevel <= 3">
               <VLayout class="mb-2">
                 <VFlex
                   xs1
@@ -121,6 +121,7 @@
 
 <script>
 
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import { AssessmentItemToolbarActions } from '../../constants';
   import { swapElements } from 'shared/utils/helpers';
@@ -169,6 +170,12 @@
         isTouchDevice,
       };
     },
+    computed: {
+      screenSizeLevel() {
+        const { windowBreakpoint } = useKResponsiveWindow();
+        return windowBreakpoint.value ?? 0;
+      },
+    },
     methods: {
       emitOpen(hintIdx) {
         this.$emit('open', hintIdx);

From 7f7b823a17e4a63c905c1b65f7a55dca1ba65e73 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 24 Aug 2025 03:53:59 +0300
Subject: [PATCH 08/12] feat(texteditor):add text formtatting buttons to
 overflow

---
 .../TipTapEditor/components/EditorToolbar.vue | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index 308f414bea..0c25330d29 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -36,6 +36,7 @@
 
     <!-- Text formatting -->
     <div
+      v-if="visibleCategories.includes('textFormat')"
       role="group"
       :aria-label="textStyleFormatting$()"
     >
@@ -49,7 +50,7 @@
       />
     </div>
 
-    <ToolbarDivider />
+    <ToolbarDivider v-if="visibleCategories.includes('textFormat')" />
 
     <!-- Copy/Paste -->
     <div
@@ -161,6 +162,25 @@
         @click.stop="isMoreDropdownOpen = false"
         @keydown="handleMenuKeydown"
       >
+        <!-- Overflow Text Formatting -->
+        <template v-if="overflowCategories.includes('textFormat')">
+          <button
+            v-for="action in textActions"
+            :key="action.name"
+            class="dropdown-item"
+            :class="{ active: action.isActive }"
+            role="menuitem"
+            @click="action.handler"
+          >
+            <img
+              :src="action.icon"
+              class="dropdown-item-icon"
+              alt=""
+              aria-hidden="true"
+            >
+            <span class="dropdown-item-text">{{ action.title }}</span>
+          </button>
+        </template>
         <!-- Overflow Clipboard -->
         <template v-if="overflowCategories.includes('clipboard')">
           <button
@@ -318,10 +338,18 @@
         lists: 600,
         clearFormat: 500,
         clipboard: 465,
+        textFormat: 390,
       };
 
       // Categories that can overflow (in order of overflow priority)
-      const OVERFLOW_CATEGORIES = ['insert', 'script', 'lists', 'clearFormat', 'clipboard'];
+      const OVERFLOW_CATEGORIES = [
+        'insert',
+        'script',
+        'lists',
+        'clearFormat',
+        'clipboard',
+        'textFormat',
+      ];
 
       const {
         handleCopy,
@@ -541,8 +569,10 @@
     right: 0;
     z-index: 1000;
     min-width: 220px;
+    max-height: 400px;
     padding: 4px 0;
     margin-top: 4px;
+    overflow-y: auto;
     background: white;
     border: 1px solid #e1e5e9;
     border-radius: 8px;

From 4960f0c5cdf2d21ef4086d82f0635f83891a86b2 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 24 Aug 2025 17:46:05 +0300
Subject: [PATCH 09/12] fix(texteditor):add missing text on toolbar more
 dropdown

---
 .../TipTapEditor/components/EditorToolbar.vue | 65 ++++++++++++++-----
 .../components/toolbar/FormatDropdown.vue     |  7 ++
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index 0c25330d29..478f955b68 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -141,16 +141,24 @@
       role="group"
       :aria-label="'More options'"
     >
-      <ToolbarButton
+      <button
         ref="moreButton"
+        class="more-button"
         :title="'More options'"
-        :icon="require('../../assets/icon-chevron-down.svg')"
-        :is-active="isMoreDropdownOpen"
+        :class="{ active: isMoreDropdownOpen }"
         :aria-expanded="isMoreDropdownOpen"
         aria-haspopup="menu"
         aria-controls="more-options-menu"
         @click="toggleMoreDropdown"
-      />
+      >
+        <span>More</span>
+        <img
+          :src="require('../../assets/icon-chevron-down.svg')"
+          alt=""
+          class="more-button-icon"
+          :class="{ rotated: isMoreDropdownOpen }"
+        >
+      </button>
 
       <div
         v-show="isMoreDropdownOpen"
@@ -333,12 +341,12 @@
 
       // TODO: Maybe these shouldnt be hardcoded?
       const OVERFLOW_BREAKPOINTS = {
-        insert: 750,
-        script: 660,
-        lists: 600,
-        clearFormat: 500,
-        clipboard: 465,
-        textFormat: 390,
+        insert: 760,
+        script: 710,
+        lists: 650,
+        clearFormat: 560,
+        clipboard: 500,
+        textFormat: 400,
       };
 
       // Categories that can overflow (in order of overflow priority)
@@ -611,11 +619,6 @@
     margin-right: 12px;
   }
 
-  .dropdown-item-text {
-    flex: 1;
-    white-space: nowrap;
-  }
-
   .dropdown-item:disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -625,6 +628,38 @@
     background-color: transparent;
   }
 
+  .more-button {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    border: 0;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+  }
+
+  .more-button:focus-visible {
+    background: #e6e6e6;
+    border-radius: 4px;
+    outline: 2px solid #0097f2;
+  }
+
+  .more-button.active {
+    color: #4368f5;
+    background: #d9e1fd;
+  }
+
+  .more-button-icon {
+    width: 16px;
+    height: 16px;
+    margin-left: 4px;
+    transition: transform 0.15s ease;
+  }
+
+  .more-button-icon.rotated {
+    transform: rotate(180deg);
+  }
+
   /* Ensure dropdown stays on screen */
   @media (max-width: 300px) {
     .more-dropdown {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
index 394cdef56b..053ed5b76d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
@@ -255,6 +255,13 @@
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
+  @media screen and (max-width: 600px) {
+    .format-dropdown {
+      width: 80px;
+      min-width: 0;
+    }
+  }
+
   .dropdown-item {
     display: flex;
     gap: 8px;

From f11e454649e28ab728e94152271f12dd51be3c56 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 24 Aug 2025 22:11:24 +0300
Subject: [PATCH 10/12] (texteditor): translate unwrapped string in
 editortoolbar

---
 .../views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js  | 4 ++++
 .../TipTapEditor/TipTapEditor/components/EditorToolbar.vue  | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index 2f17837710..bd76650102 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -76,6 +76,10 @@ const MESSAGES = {
     message: 'Code block',
     context: 'Button to insert a block of code',
   },
+  moreButtonText: {
+    message: 'More',
+    context: 'Label for the "More" dropdown button in the toolbar',
+  },
 
   // Format dropdown options
   formatNormal: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index 478f955b68..f6f095f7a2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -151,10 +151,10 @@
         aria-controls="more-options-menu"
         @click="toggleMoreDropdown"
       >
-        <span>More</span>
+        <span>{{ moreButtonText$() }}</span>
         <img
           :src="require('../../assets/icon-chevron-down.svg')"
-          alt=""
+          aria-hidden="true"
           class="more-button-icon"
           :class="{ rotated: isMoreDropdownOpen }"
         >
@@ -384,6 +384,7 @@
         scriptFormatting$,
         insertTools$,
         clearFormatting$,
+        moreButtonText$,
       } = getTipTapEditorStrings();
 
       // Compute which categories should be visible vs in overflow
@@ -537,6 +538,7 @@
         scriptFormatting$,
         insertTools$,
         clearFormatting$,
+        moreButtonText$,
       };
     },
   });

From 6b399ae62cc7fdc9919bb098c6f8ed7a8fcecaf0 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 2 Sep 2025 16:10:39 +0300
Subject: [PATCH 11/12] fix merge conflicts

---
 .../components/AssessmentItemEditor/AssessmentItemEditor.vue   | 1 +
 .../TipTapEditor/components/image/ImageNodeView.vue            | 1 -
 .../TipTapEditor/composables/useModalPositioning.js            | 3 ---
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 8966307d62..788b69e483 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -205,6 +205,7 @@
         openAnswerIdx: null,
         kindSelectKey: 0,
         AssessmentItemTypes,
+        EditorImageProcessor,
       };
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
index 962bc1ae20..88b2c1ba63 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue
@@ -86,7 +86,6 @@
       const naturalAspectRatio = ref(null);
       const minWidth = 50;
       const compactThreshold = 200;
-      const debounceTimer = null;
       let resizeListeners = null;
 
       // Create debounced version of saveSize function
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
index 9f172e2ad5..3766729388 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useModalPositioning.js
@@ -8,9 +8,6 @@ export function useModalPositioning() {
   const isModalCentered = ref(false);
   const anchorElement = ref(null);
 
-  let scrollRaf = null;
-  let resizeRaf = null;
-
   const updatePosition = () => {
     if (!anchorElement.value || isModalCentered.value || isTouchDevice) {
       return;

From fae61556945aff99db050eada061490e6f6dcc69 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 2 Sep 2025 18:37:16 +0300
Subject: [PATCH 12/12] fix(texteditor): align formatbar on touchscreens
 correctly

---
 .../toolbar/MobileFormattingBar.vue           | 70 ++++++++++++++++---
 1 file changed, 59 insertions(+), 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
index e6083726a4..b292d32b1a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
@@ -4,6 +4,7 @@
     class="floating-panel"
     role="toolbar"
     :aria-label="textFormattingToolbar$()"
+    :style="{ bottom: keyboardOffset + 'px' }"
   >
     <div
       class="fixed-actions"
@@ -106,7 +107,7 @@
 
 <script>
 
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, onMounted, onUnmounted, inject } from 'vue';
   import { useToolbarActions } from '../../composables/useToolbarActions';
   import { useFormatControls } from '../../composables/useFormatControls';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
@@ -118,6 +119,8 @@
     components: { ToolbarButton, ToolbarDivider },
     setup(props, { emit }) {
       const isExpanded = ref(true);
+      const keyboardOffset = ref(0);
+      const editor = inject('editor');
 
       const {
         collapseFormattingBar$,
@@ -137,8 +140,62 @@
         isExpanded.value = !isExpanded.value;
       };
 
+      // Keyboard detection and positioning
+      onMounted(() => {
+        if (editor.value) {
+          // Use a timeout to allow the keyboard to start appearing
+          setTimeout(() => {
+            const { from } = editor.value.state.selection;
+            editor.value.view.dom.querySelector(`[pos="${from}"]`)?.scrollIntoView({
+              behavior: 'smooth',
+              block: 'nearest',
+            });
+          }, 150);
+        }
+
+        const vk = navigator.virtualKeyboard;
+
+        const updatePositionWithVisualViewport = () => {
+          if (window.visualViewport) {
+            const visibleHeight = window.visualViewport.height;
+            const totalHeight = window.innerHeight;
+
+            if (totalHeight - visibleHeight > 50) {
+              keyboardOffset.value = totalHeight - visibleHeight;
+            } else {
+              keyboardOffset.value = 0;
+            }
+          }
+        };
+
+        if (vk) {
+          // Use the new VirtualKeyboard API if available
+          vk.overlaysContent = true;
+          const onGeometryChange = () => {
+            const { height } = vk.boundingRect;
+            keyboardOffset.value = height > 0 ? height : 0;
+          };
+          vk.addEventListener('geometrychange', onGeometryChange);
+          onUnmounted(() => {
+            vk.removeEventListener('geometrychange', onGeometryChange);
+            vk.overlaysContent = false;
+          });
+        } else if (window.visualViewport) {
+          // Fallback to visualViewport for iOS Safari
+          window.visualViewport.addEventListener('resize', updatePositionWithVisualViewport);
+          updatePositionWithVisualViewport(); // Initial check
+
+          onUnmounted(() => {
+            if (window.visualViewport) {
+              window.visualViewport.removeEventListener('resize', updatePositionWithVisualViewport);
+            }
+          });
+        }
+      });
+
       return {
         isExpanded,
+        keyboardOffset,
         textActions,
         listActions,
         scriptActions,
@@ -166,9 +223,7 @@
   .floating-panel {
     position: fixed;
     right: 0;
-
-    /* Use visual viewport bottom instead of layout viewport */
-    bottom: calc(100vh - 100dvh);
+    bottom: 0; /* Will be overridden by JavaScript */
     left: 0;
     z-index: 100;
     display: flex;
@@ -178,13 +233,6 @@
     animation: slide-up 0.2s ease-out;
   }
 
-  /* Fallback for older browsers */
-  @supports not (height: 100dvh) {
-    .floating-panel {
-      bottom: 0;
-    }
-  }
-
   @keyframes slide-up {
     from {
       opacity: 0;