feat(texteditor): swap editor view on touhscreens detection

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 & desktop layout with toolbar above -->
+            <template v-if="isTouchDevice || screenSizeLevel <= 3">
+              <!-- 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` -->
@@ -122,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';
@@ -131,6 +218,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 +262,7 @@
         EditorImageProcessor, // Make it available in the template
         correctAnswersIndices: getCorrectAnswersIndices(this.questionKind, this.answers),
         numericRule: val => floatOrIntRegex.test(val) || this.$tr('numberFieldErrorLabel'),
+        isTouchDevice,
       };
     },
     computed: {
@@ -210,6 +299,10 @@
 
         return [];
       },
+      screenSizeLevel() {
+        const { windowBreakpoint } = useKResponsiveWindow();
+        return windowBreakpoint.value ?? 0;
+      },
     },
     watch: {
       answers() {

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 & desktop layout with toolbar above -->
+            <template v-if="isTouchDevice || screenSizeLevel <= 3">
+              <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' }"
@@ -80,10 +121,12 @@
 
 <script>
 
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   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,8 +167,15 @@
           AssessmentItemToolbarActions.DELETE_ITEM,
         ],
         EditorImageProcessor,
+        isTouchDevice,
       };
     },
+    computed: {
+      screenSizeLevel() {
+        const { windowBreakpoint } = useKResponsiveWindow();
+        return windowBreakpoint.value ?? 0;
+      },
+    },
     methods: {
       emitOpen(hintIdx) {
         this.$emit('open', hintIdx);

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;

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),
@@ -353,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);
   }

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: {