From b76c17efb61d35a820b42e1dddd7a526cd165938 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 6 Aug 2025 15:07:15 +0300
Subject: [PATCH 01/13] refactor(texteditor): remove MarkdownEditor
 dependencies

---
 pnpm-lock.yaml | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4c2ad6af3..fa341a3362 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2619,10 +2619,6 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
-  commander@9.5.0:
-    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
-    engines: {node: ^12.20.0 || >=14}
-
   common-path-prefix@3.0.0:
     resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
 
@@ -9306,7 +9302,7 @@ snapshots:
 
   '@types/bonjour@3.5.13':
     dependencies:
-      '@types/node': 24.1.0
+      '@types/node': 24.0.10
 
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
@@ -10554,8 +10550,6 @@ snapshots:
 
   commander@7.2.0: {}
 
-  commander@9.5.0: {}
-
   common-path-prefix@3.0.0: {}
 
   common-tags@1.8.2: {}

From 8a9038fa87cdb6947d58783b10f0862915b78b45 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 10 Aug 2025 02:24:29 +0300
Subject: [PATCH 02/13] refactor(texteditor): refactor image services to use
 server side upload

---
 .../TipTapEditor/services/imageService.js     | 131 +++++++++++++-----
 .../frontend/shared/vuex/file/actions.js      |   2 +-
 2 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
index 2577312a80..04cc6bff19 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
@@ -1,11 +1,19 @@
 import { getTipTapEditorStrings } from '../TipTapEditorStrings';
+import { cleanFile } from 'shared/vuex/file/clean';
+import { getHash, extractMetadata, storageUrl } from 'shared/vuex/file/utils';
+import { hexToBase64 } from 'shared/vuex/file/actions';
+import { File } from 'shared/data/resources';
+import client from 'shared/client';
+import { fileErrors } from 'shared/constants';
+import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
 
-const MAX_FILE_SIZE_MB = 10; // I think I need review on this value, I just picked what seemed reasonable
+const MAX_FILE_SIZE_MB = 10;
+// see: shared/leUtils/FormatPresets.js
 export const ACCEPTED_MIME_TYPES = [
   'image/png',
   'image/jpeg',
   'image/jpg',
-  'image/webp',
+  'image/gif',
   'image/svg+xml',
 ];
 
@@ -19,55 +27,57 @@ const { noFileProvided$, invalidFileType$, fileTooLarge$, fileSizeUnit$, failedT
  */
 export function validateFile(file) {
   if (!file) {
-    return { isValid: false, error: noFileProvided$ };
+    return { isValid: false, error: noFileProvided$() };
   }
   if (!ACCEPTED_MIME_TYPES.includes(file.type)) {
     return {
       isValid: false,
-      error: invalidFileType$ + ACCEPTED_MIME_TYPES.join(', '),
+      error: invalidFileType$() + ACCEPTED_MIME_TYPES.join(', '),
     };
   }
   if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
     return {
       isValid: false,
-      error: fileTooLarge$ + MAX_FILE_SIZE_MB + fileSizeUnit$,
+      error: fileTooLarge$() + MAX_FILE_SIZE_MB + fileSizeUnit$(),
     };
   }
   return { isValid: true };
 }
 
 /**
- * Reads a file and returns it as a Data URL.
- * @param {File} file - The image file.
- * @returns {Promise<string>} A promise that resolves with the Data URL.
+ * Uploads file to storage (adapted from actions.js).
+ * @param {Object} params - Upload parameters.
+ * @returns {Promise}
  */
-function readFileAsDataURL(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-    reader.readAsDataURL(file);
-  });
+function uploadFileToStorage({ file_format, mightSkip, checksum, file, url, contentType }) {
+  return (mightSkip ? client.head(storageUrl(checksum, file_format)) : Promise.reject())
+    .then(() => {
+      // File already exists, complete immediately
+    })
+    .catch(() => {
+      return client.put(url, file, {
+        headers: {
+          'Content-Type': contentType,
+          'Content-MD5': hexToBase64(checksum),
+        },
+      });
+    });
 }
 
 /**
- * Gets the natural dimensions of an image from its source.
- * @param {string} src - The image source (e.g., a Data URL).
- * @returns {Promise<{width: number, height: number}>}
+ * Gets accepted file types string for file input.
+ * @returns {string}
  */
-export function getImageDimensions(src) {
-  return new Promise((resolve, reject) => {
-    const img = new window.Image();
-    img.onload = () => resolve({ width: img.width, height: img.height });
-    img.onerror = error => reject(error);
-    img.src = src;
-  });
+export function getAcceptedFileTypes() {
+  const extensions = ['.png', '.jpg', '.jpeg', '.webp', '.svg'];
+  return [...ACCEPTED_MIME_TYPES, ...extensions].join(',');
 }
 
 /**
- * Fully processes a file: validates, reads, and gets dimensions.
- * @param {File} file - The file to process.
- * @returns {Promise<{src: string, width: number, height: number, file: File}>}
+ * Main file processing function that uploads to server.
+ * Adapted from uploadFile action but simplified for image-specific use.
+ * @param {File} file - The image file to process.
+ * @returns {Promise<{src: string, width: number, height: number, file: File, id: string}>}
  */
 export async function processFile(file) {
   const validation = validateFile(file);
@@ -76,10 +86,67 @@ export async function processFile(file) {
   }
 
   try {
-    const src = await readFileAsDataURL(file);
-    const { width, height } = await getImageDimensions(src);
-    return { src, width, height, file };
+    const file_format = file.name.split('.').pop().toLowerCase();
+    const cleanedFile = await cleanFile(file, FormatPresetsNames.EXERCISE_IMAGE);
+
+    // Get file hash and metadata
+    const [checksum, metadata] = await Promise.all([
+      getHash(cleanedFile).catch(() => Promise.reject(fileErrors.CHECKSUM_HASH_FAILED)),
+      extractMetadata(cleanedFile, FormatPresetsNames.EXERCISE_IMAGE),
+    ]);
+
+    // Get upload URL from server
+    const uploadData = await File.uploadUrl({
+      checksum,
+      size: cleanedFile.size,
+      type: cleanedFile.type,
+      name: cleanedFile.name,
+      file_format,
+      ...metadata,
+    }).catch(error => {
+      let errorType = fileErrors.UPLOAD_FAILED;
+      if (error.response && error.response.status === 412) {
+        errorType = fileErrors.NO_STORAGE;
+      }
+      throw errorType;
+    });
+
+    const fileObject = {
+      ...uploadData.file,
+      metadata,
+    };
+
+    // Upload file to storage
+    await uploadFileToStorage({
+      id: fileObject.id,
+      checksum,
+      file: cleanedFile,
+      file_format,
+      url: uploadData.uploadURL,
+      contentType: uploadData.mimetype,
+      mightSkip: uploadData.might_skip,
+    });
+
+    // Return data in expected format for ImageUploadModal
+    return {
+      src: storageUrl(checksum, file_format),
+      width: metadata.width || null,
+      height: metadata.height || null,
+      file: file,
+      id: fileObject.id,
+      checksum,
+      fileObject, // Include full file object for additional data
+    };
   } catch (error) {
-    throw new Error(failedToProcessImage$);
+    // Handle specific error types
+    if (error === fileErrors.NO_STORAGE) {
+      throw new Error('Not enough storage space available');
+    } else if (error === fileErrors.CHECKSUM_HASH_FAILED) {
+      throw new Error('Failed to process file checksum');
+    } else if (Object.values(fileErrors).includes(error)) {
+      throw new Error(failedToProcessImage$() + ': ' + error);
+    } else {
+      throw new Error(failedToProcessImage$() + ': ' + error.message);
+    }
   }
 }
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
index ea1c38008c..5fe322c8aa 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
@@ -110,7 +110,7 @@ export function deleteFile(context, file) {
   });
 }
 
-function hexToBase64(str) {
+export function hexToBase64(str) {
   return btoa(
     String.fromCharCode.apply(
       null,

From 4a39f5c3aba304b8f95ee7d242320fdb49350efd Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 10 Aug 2025 23:46:26 +0300
Subject: [PATCH 03/13] refactor(texteditor): remove data url markdown parsing
 regex

---
 .../TipTapEditor/utils/markdown.js            | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
index 9fa6ff9a58..26a1bd5c71 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js
@@ -6,8 +6,6 @@ import { storageUrl } from '../../../../vuex/file/utils';
 // --- Image Translation ---
 export const IMAGE_PLACEHOLDER = '${☣ CONTENTSTORAGE}';
 export const IMAGE_REGEX = /!\[([^\]]*)\]\(([^/]+\/[^\s=)]+)(?:\s*=\s*([0-9.]+)x([0-9.]+))?\)/g;
-export const DATA_URL_IMAGE_REGEX =
-  /!\[([^\]]*)\]\(((?:data:|blob:).+?)(?:\s*=\s*([0-9.]+)x([0-9.]+))?\)/g;
 
 export const imageMdToParams = markdown => {
   // Reset regex state before executing to ensure it works on all matches
@@ -32,16 +30,6 @@ export const imageMdToParams = markdown => {
 export const paramsToImageMd = ({ src, alt, width, height, permanentSrc }) => {
   const sourceToSave = permanentSrc || src;
 
-  // As a safety net, if the source is still a data/blob URL, we should not
-  // try to create a placeholder format. This should not happen with our new logic,
-  // but it makes the function more robust.
-  if (sourceToSave.startsWith('data:') || sourceToSave.startsWith('blob:')) {
-    if (width && height) {
-      return `![${alt || ''}](${sourceToSave} =${width}x${height})`;
-    }
-    return `![${alt || ''}](${sourceToSave})`;
-  }
-
   const fileName = sourceToSave.split('/').pop();
   if (Number.isFinite(+width) && Number.isFinite(+height)) {
     return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName} =${width}x${height})`;
@@ -74,16 +62,6 @@ export function preprocessMarkdown(markdown) {
 
   let processedMarkdown = markdown;
 
-  // First, handle data URLs and blob URLs for images.
-  processedMarkdown = processedMarkdown.replace(
-    DATA_URL_IMAGE_REGEX,
-    (match, alt, src, width, height) => {
-      const widthAttr = width ? ` width="${width}"` : '';
-      const heightAttr = height ? ` height="${height}"` : '';
-      return `<img src="${src}" alt="${alt || ''}"${widthAttr}${heightAttr} />`;
-    },
-  );
-
   // Then, handle our standard content-storage images.
   processedMarkdown = processedMarkdown.replace(IMAGE_REGEX, match => {
     const params = imageMdToParams(match);

From 2346c06cf575c73a6175bd0727159fbccfe5141a Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Mon, 11 Aug 2025 03:02:12 +0300
Subject: [PATCH 04/13] refactor(texteditor)[image]: abstract upload services
 from the editor

---
 .../AnswersEditor/AnswersEditor.vue           |  3 ++
 .../AssessmentItemEditor.vue                  |  3 ++
 .../components/HintsEditor/HintsEditor.vue    |  3 ++
 .../TipTapEditor/TipTapEditor.vue             |  5 ++++
 .../components/image/ImageUploadModal.vue     |  7 +++--
 .../TipTapEditor/services/imageService.js     | 28 +++++++------------
 6 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index e558478cb0..d141d98945 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -78,6 +78,7 @@
                       v-model="answer.answer"
                       class="editor"
                       :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+                      :imageProcessor="EditorImageProcessor"
                       @update="updateAnswerText($event, answerIdx)"
                       @minimize="emitClose"
                       @open-editor="emitOpen(answerIdx)"
@@ -127,6 +128,7 @@
   import { AssessmentItemTypes } from 'shared/constants';
   import { swapElements } from 'shared/utils/helpers';
   import Checkbox from 'shared/views/form/Checkbox';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
@@ -169,6 +171,7 @@
     },
     data() {
       return {
+        EditorImageProcessor, // Make it available in the template
         correctAnswersIndices: getCorrectAnswersIndices(this.questionKind, this.answers),
         numericRule: val => floatOrIntRegex.test(val) || this.$tr('numberFieldErrorLabel'),
       };
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index bfb2c9ed19..3ffa20ca65 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -45,6 +45,7 @@
                 v-if="isQuestionOpen"
                 v-model="question"
                 mode="edit"
+                :imageProcessor="EditorImageProcessor"
                 @update="onQuestionUpdate"
                 @minimize="closeQuestion"
               />
@@ -143,6 +144,7 @@
   import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   export default {
     name: 'AssessmentItemEditor',
@@ -212,6 +214,7 @@
         openAnswerIdx: null,
         kindSelectKey: 0,
         AssessmentItemTypes,
+        EditorImageProcessor,
       };
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index 523451a055..6be4253ed5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -38,6 +38,7 @@
                     <TipTapEditor
                       v-model="hint.hint"
                       :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
+                      :image-processor="EditorImageProcessor"
                       @update="updateHintText($event, hintIdx)"
                       @minimize="emitClose"
                       @open-editor="emitOpen(answerIdx)"
@@ -82,6 +83,7 @@
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import { AssessmentItemToolbarActions } from '../../constants';
   import { swapElements } from 'shared/utils/helpers';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
@@ -121,6 +123,7 @@
           AssessmentItemToolbarActions.MOVE_ITEM_DOWN,
           AssessmentItemToolbarActions.DELETE_ITEM,
         ],
+        EditorImageProcessor,
       };
     },
     methods: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 3eea4abe24..b01194cdb9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -157,6 +157,7 @@
       const { isMobile } = useBreakpoint();
 
       const imageHandler = useImageHandling(editor);
+      provide('imageProcessor', props.imageProcessor);
 
       const sharedEventHandlers = computed(() => ({
         'insert-image': target => imageHandler.openCreateModal({ targetElement: target }),
@@ -294,6 +295,10 @@
         type: [String, Number],
         default: 0,
       },
+      imageProcessor: {
+        type: Object,
+        default: () => ({}),
+      },
     },
     emits: ['update', 'minimize', 'open-editor'],
   });
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 211627d4eb..a7246d48a8 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
@@ -144,8 +144,7 @@
 
 <script>
 
-  import { defineComponent, ref, computed, onMounted } from 'vue';
-  import { processFile, ACCEPTED_MIME_TYPES } from '../../services/imageService';
+  import { defineComponent, ref, computed, onMounted, inject } from 'vue';
   import { useFocusTrap } from '../../composables/useFocusTrap';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import ImageDropZone from './ImageDropZone.vue';
@@ -195,6 +194,10 @@
       );
       const canInsert = computed(() => !!previewSrc.value);
 
+      // Inject the image processor service
+      const imageProcessor = inject('imageProcessor', {});
+      const { processFile, ACCEPTED_MIME_TYPES } = imageProcessor;
+
       onMounted(() => {
         originalData.value = { ...props.initialData };
         previewSrc.value = props.initialData.src || '';
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
index 04cc6bff19..d67b480e5a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
@@ -9,13 +9,7 @@ import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
 
 const MAX_FILE_SIZE_MB = 10;
 // see: shared/leUtils/FormatPresets.js
-export const ACCEPTED_MIME_TYPES = [
-  'image/png',
-  'image/jpeg',
-  'image/jpg',
-  'image/gif',
-  'image/svg+xml',
-];
+const ACCEPTED_MIME_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml'];
 
 const { noFileProvided$, invalidFileType$, fileTooLarge$, fileSizeUnit$, failedToProcessImage$ } =
   getTipTapEditorStrings();
@@ -25,7 +19,7 @@ const { noFileProvided$, invalidFileType$, fileTooLarge$, fileSizeUnit$, failedT
  * @param {File} file - The file to validate.
  * @returns {{isValid: boolean, error?: string}}
  */
-export function validateFile(file) {
+function validateFile(file) {
   if (!file) {
     return { isValid: false, error: noFileProvided$() };
   }
@@ -64,22 +58,13 @@ function uploadFileToStorage({ file_format, mightSkip, checksum, file, url, cont
     });
 }
 
-/**
- * Gets accepted file types string for file input.
- * @returns {string}
- */
-export function getAcceptedFileTypes() {
-  const extensions = ['.png', '.jpg', '.jpeg', '.webp', '.svg'];
-  return [...ACCEPTED_MIME_TYPES, ...extensions].join(',');
-}
-
 /**
  * Main file processing function that uploads to server.
  * Adapted from uploadFile action but simplified for image-specific use.
  * @param {File} file - The image file to process.
  * @returns {Promise<{src: string, width: number, height: number, file: File, id: string}>}
  */
-export async function processFile(file) {
+async function processFile(file) {
   const validation = validateFile(file);
   if (!validation.isValid) {
     throw new Error(validation.error);
@@ -150,3 +135,10 @@ export async function processFile(file) {
     }
   }
 }
+
+const EditorImageProcessor = {
+  ACCEPTED_MIME_TYPES,
+  processFile,
+};
+
+export default EditorImageProcessor;

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

---
 .../AssessmentItemEditor.vue                  | 213 ++++++++----------
 1 file changed, 99 insertions(+), 114 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 3ffa20ca65..6de33d8a44 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -1,74 +1,69 @@
 <template>
 
-  <Uploader
-    ref="uploader"
-    :presetID="imagePreset"
-  >
-    <template #default="{ handleFiles }">
-      <VLayout>
-        <DropdownWrapper
-          component="VFlex"
-          xs7
-          lg5
-        >
-          <template #default="{ attach, menuProps }">
-            <VSelect
-              :key="kindSelectKey"
-              :items="kindSelectItems"
-              :value="kind"
-              :label="$tr('questionTypeLabel')"
-              data-test="kindSelect"
-              :menu-props="menuProps"
-              :attach="attach"
-              box
-              @input="onKindUpdate"
-            />
-          </template>
-        </DropdownWrapper>
-      </VLayout>
-
-      <VLayout>
-        <VFlex>
-          <ErrorList
-            :errors="questionErrorMessages"
-            data-test="questionErrors"
+  <div>
+    <VLayout>
+      <DropdownWrapper
+        component="VFlex"
+        xs7
+        lg5
+      >
+        <template #default="{ attach, menuProps }">
+          <VSelect
+            :key="kindSelectKey"
+            :items="kindSelectItems"
+            :value="kind"
+            :label="$tr('questionTypeLabel')"
+            data-test="kindSelect"
+            :menu-props="menuProps"
+            :attach="attach"
+            box
+            @input="onKindUpdate"
           />
+        </template>
+      </DropdownWrapper>
+    </VLayout>
+
+    <VLayout>
+      <VFlex>
+        <ErrorList
+          :errors="questionErrorMessages"
+          data-test="questionErrors"
+        />
+
+        <div class="grey--text mb-1 text--darken-2">
+          {{ $tr('questionLabel') }}
+        </div>
+
+        <transition name="fade">
+          <keep-alive include="TipTapEditor">
+            <!--analyticsLabel="Question"-->
+            <TipTapEditor
+              v-if="isQuestionOpen"
+              v-model="question"
+              mode="edit"
+              @update="onQuestionUpdate"
+              @minimize="closeQuestion"
+            />
 
-          <div class="grey--text mb-1 text--darken-2">
-            {{ $tr('questionLabel') }}
-          </div>
-
-          <transition name="fade">
-            <keep-alive include="TipTapEditor">
-              <!--analyticsLabel="Question"-->
-              <TipTapEditor
-                v-if="isQuestionOpen"
-                v-model="question"
-                mode="edit"
-                :imageProcessor="EditorImageProcessor"
-                @update="onQuestionUpdate"
-                @minimize="closeQuestion"
-              />
-
-              <div
-                v-else
-                class="pb-3 pl-2 pr-2 pt-3 question-text"
-                data-test="questionText"
-                @click="openQuestion"
+            <div
+              v-else
+              class="pb-3 pl-2 pr-2 pt-3 question-text"
+              data-test="questionText"
+              @click="openQuestion"
+            >
+              <VLayout
+                align-start
+                justify-space-between
               >
-                <VLayout
-                  align-start
-                  justify-space-between
-                >
-                  <VFlex grow>
-                    <TipTapEditor
-                      v-model="question"
-                      mode="view"
-                      tabindex="-1"
-                    />
-                  </VFlex>
-
-                  <VFlex shrink>
+                <VFlex grow>
+                  <TipTapEditor
+                    v-model="question"
+                    mode="view"
+                    tabindex="-1"
+                  />
+                </VFlex>
+
+                <VFlex shrink>
                     <button
                       class="v-btn v-btn--flat v-btn--icon v-size--default"
                       data-test="editQuestionButton"
@@ -80,46 +75,44 @@
                         class="mr-2"
                       />
                     </button>
-                  </VFlex>
-                </VLayout>
-              </div>
-            </keep-alive>
-          </transition>
-        </VFlex>
-      </VLayout>
-
-      <VLayout
-        v-if="kind !== AssessmentItemTypes.FREE_RESPONSE"
-        mt-4
-      >
-        <VFlex>
-          <ErrorList
-            :errors="answersErrorMessages"
-            data-test="answersErrors"
-          />
-
-          <AnswersEditor
-            :questionKind="kind"
-            :answers="answers"
-            :openAnswerIdx="openAnswerIdx"
-            @update="onAnswersUpdate"
-            @open="openAnswer"
-            @close="closeAnswer"
-          />
-
-          <HintsEditor
-            class="mt-4"
-            :hints="hints"
-            :openHintIdx="openHintIdx"
-            :handleFileUpload="handleFiles"
-            @update="onHintsUpdate"
-            @open="openHint"
-            @close="closeHint"
-          />
-        </VFlex>
-      </VLayout>
-    </template>
-  </Uploader>
+                </VFlex>
+              </VLayout>
+            </div>
+          </keep-alive>
+        </transition>
+      </VFlex>
+    </VLayout>
+
+    <VLayout
+      v-if="kind !== AssessmentItemTypes.FREE_RESPONSE"
+      mt-4
+    >
+      <VFlex>
+        <ErrorList
+          :errors="answersErrorMessages"
+          data-test="answersErrors"
+        />
+
+        <AnswersEditor
+          :questionKind="kind"
+          :answers="answers"
+          :openAnswerIdx="openAnswerIdx"
+          @update="onAnswersUpdate"
+          @open="openAnswer"
+          @close="closeAnswer"
+        />
+
+        <HintsEditor
+          class="mt-4"
+          :hints="hints"
+          :openHintIdx="openHintIdx"
+          @update="onHintsUpdate"
+          @open="openHint"
+          @close="closeHint"
+        />
+      </VFlex>
+    </VLayout>
+  </div>
 
 </template>
 
@@ -140,11 +133,8 @@
     FeatureFlagKeys,
   } from 'shared/constants';
   import ErrorList from 'shared/views/ErrorList/ErrorList';
-  import Uploader from 'shared/views/files/Uploader';
-  import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
-  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   export default {
     name: 'AssessmentItemEditor',
@@ -153,7 +143,6 @@
       ErrorList,
       AnswersEditor,
       HintsEditor,
-      Uploader,
       TipTapEditor,
     },
     model: {
@@ -214,7 +203,6 @@
         openAnswerIdx: null,
         kindSelectKey: 0,
         AssessmentItemTypes,
-        EditorImageProcessor,
       };
     },
     computed: {
@@ -227,9 +215,6 @@
 
         return this.item.question;
       },
-      imagePreset() {
-        return FormatPresetsNames.EXERCISE_IMAGE;
-      },
       modality() {
         return this.getContentNode(this.nodeId)?.extra_fields?.options?.modality;
       },

From a17b38621effe231d70a50f8d95a998451e233ed Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sun, 17 Aug 2025 20:59:13 +0300
Subject: [PATCH 06/13] fix(teteditor)[image]: pass imageprocessor to question
 editor

---
 .../components/AssessmentItemEditor/AssessmentItemEditor.vue   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 6de33d8a44..385e5af3d3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -41,6 +41,7 @@
               v-if="isQuestionOpen"
               v-model="question"
               mode="edit"
+              :imageProcessor="EditorImageProcessor"
               @update="onQuestionUpdate"
               @minimize="closeQuestion"
             />
@@ -135,6 +136,7 @@
   import ErrorList from 'shared/views/ErrorList/ErrorList';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
   export default {
     name: 'AssessmentItemEditor',
@@ -203,6 +205,7 @@
         openAnswerIdx: null,
         kindSelectKey: 0,
         AssessmentItemTypes,
+        EditorImageProcessor,
       };
     },
     computed: {

From b4aa20ba2166a7eb67f13c23e9313a58b2acbc06 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 19 Aug 2025 08:23:32 +0300
Subject: [PATCH 07/13] fix(texteditor)[image]:limit saved dimensions compared
 to editor width

---
 .../TipTapEditor/components/image/ImageNodeView.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

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 41afb25fe3..c054345997 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
@@ -122,10 +122,17 @@
         if (imageRef.value && imageRef.value.naturalWidth && imageRef.value.naturalHeight) {
           naturalAspectRatio.value = imageRef.value.naturalWidth / imageRef.value.naturalHeight;
 
-          // If no dimensions are set, use natural dimensions
+          // If no dimensions are set, use natural dimensions but constrain to editor width
           if (!width.value && !height.value) {
-            width.value = imageRef.value.naturalWidth;
-            height.value = imageRef.value.naturalHeight;
+            // Get the editor's actual container width
+            const editorContainer = props.editor.view.dom.closest('.editor-container');
+            const editorWidth = editorContainer ? editorContainer.offsetWidth : 800; // fallback width
+
+            const maxWidth = Math.min(imageRef.value.naturalWidth, editorWidth);
+
+            width.value = maxWidth;
+            height.value = Math.round(maxWidth / naturalAspectRatio.value);
+
             saveSize();
           } else if (width.value && !height.value) {
             // If we have width but no height, calculate height

From af10a598f4bca7f07d400324103e0ceafde28366 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 19 Aug 2025 08:38:38 +0300
Subject: [PATCH 08/13] feat(texteditor)[image]: add storage validation before
 upload

---
 .../TipTapEditor/TipTapEditorStrings.js       |  4 ++
 .../components/image/ImageUploadModal.vue     |  7 +++-
 .../TipTapEditor/services/imageService.js     | 38 ++++++++++++++++---
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index 99a57f1e52..b98fe7b100 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -321,6 +321,10 @@ const MESSAGES = {
     message: 'Failed to process the image file.',
     context: 'Error message when image processing fails',
   },
+  noEnoughStorageSpace: {
+    message: 'Not enough storage space available. File size exceeds remaining storage.',
+    context: 'Error message when there is insufficient storage space for the file',
+  },
 
   // for MobileFormattingBar
   collapseFormattingBar: {
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 a7246d48a8..aec353c032 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
@@ -144,7 +144,7 @@
 
 <script>
 
-  import { defineComponent, ref, computed, onMounted, inject } from 'vue';
+  import { defineComponent, ref, computed, onMounted, inject, getCurrentInstance } from 'vue';
   import { useFocusTrap } from '../../composables/useFocusTrap';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
   import ImageDropZone from './ImageDropZone.vue';
@@ -198,6 +198,9 @@
       const imageProcessor = inject('imageProcessor', {});
       const { processFile, ACCEPTED_MIME_TYPES } = imageProcessor;
 
+      const instance = getCurrentInstance();
+      const store = instance.proxy.$store;
+
       onMounted(() => {
         originalData.value = { ...props.initialData };
         previewSrc.value = props.initialData.src || '';
@@ -223,7 +226,7 @@
         if (!selectedFile) return;
         modalState.value = 'loading';
         try {
-          const { src, file: processedFile } = await processFile(selectedFile);
+          const { src, file: processedFile } = await processFile(selectedFile, { $store: store });
           previewSrc.value = src;
           file.value = processedFile;
           modalState.value = 'preview';
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
index d67b480e5a..70a07cccfe 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/services/imageService.js
@@ -11,30 +11,47 @@ const MAX_FILE_SIZE_MB = 10;
 // see: shared/leUtils/FormatPresets.js
 const ACCEPTED_MIME_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml'];
 
-const { noFileProvided$, invalidFileType$, fileTooLarge$, fileSizeUnit$, failedToProcessImage$ } =
-  getTipTapEditorStrings();
+const {
+  noFileProvided$,
+  invalidFileType$,
+  fileTooLarge$,
+  fileSizeUnit$,
+  failedToProcessImage$,
+  noEnoughStorageSpace$,
+} = getTipTapEditorStrings();
 
 /**
- * Validates a file based on type and size.
+ * Validates a file based on type, size, and available storage.
  * @param {File} file - The file to validate.
+ * @param {number} availableSpace - Available storage space in bytes.
  * @returns {{isValid: boolean, error?: string}}
  */
-function validateFile(file) {
+function validateFile(file, availableSpace = null) {
   if (!file) {
     return { isValid: false, error: noFileProvided$() };
   }
+
   if (!ACCEPTED_MIME_TYPES.includes(file.type)) {
     return {
       isValid: false,
       error: invalidFileType$() + ACCEPTED_MIME_TYPES.join(', '),
     };
   }
+
   if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
     return {
       isValid: false,
       error: fileTooLarge$() + MAX_FILE_SIZE_MB + fileSizeUnit$(),
     };
   }
+
+  if (availableSpace !== null && file.size > availableSpace) {
+    return {
+      isValid: false,
+      error: noEnoughStorageSpace$(),
+    };
+  }
+
   return { isValid: true };
 }
 
@@ -62,10 +79,19 @@ function uploadFileToStorage({ file_format, mightSkip, checksum, file, url, cont
  * Main file processing function that uploads to server.
  * Adapted from uploadFile action but simplified for image-specific use.
  * @param {File} file - The image file to process.
+ * @param {Object} context - Vue component context with $store access.
  * @returns {Promise<{src: string, width: number, height: number, file: File, id: string}>}
  */
-async function processFile(file) {
-  const validation = validateFile(file);
+async function processFile(file, context = null) {
+  let availableSpace = null;
+
+  // Get available space if context is provided
+  if (context && context.$store) {
+    await context.$store.dispatch('fetchUserStorage');
+    availableSpace = context.$store.getters.availableSpace;
+  }
+
+  const validation = validateFile(file, availableSpace);
   if (!validation.isValid) {
     throw new Error(validation.error);
   }

From aac3026bad581494546062ed30102846e34bbdd1 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 19 Aug 2025 08:59:50 +0300
Subject: [PATCH 09/13] feat(texteditor)[image]: enhance error handlng by using
 KModal

---
 .../TipTapEditor/TipTapEditorStrings.js       |  4 ++++
 .../components/image/ImageUploadModal.vue     | 23 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index b98fe7b100..641d769714 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -301,6 +301,10 @@ const MESSAGES = {
   },
 
   // Error Messages
+  errorUploadingImage: {
+    message: 'Error uploading image',
+    context: 'Title for the error modal when an image upload fails.',
+  },
   noFileProvided: {
     message: 'No file provided.',
     context: 'Error message when no file is provided for upload',
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 aec353c032..e79d136de1 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
@@ -137,6 +137,16 @@
         </button>
       </template>
     </footer>
+    <KModal
+      v-if="showErrorModal"
+      :appendToOverlay="true"
+      :title="errorUploadingImage$()"
+    >
+      <template> {{ errorMessage }} </template>
+      <template #actions>
+        <KButton @click="showErrorModal = false"> {{ close$() }} </KButton>
+      </template>
+    </KModal>
   </div>
 
 </template>
@@ -159,6 +169,7 @@
         closeModal$,
         cancelLoading$,
         cancel$,
+        close$,
         replaceFile$,
         selectFile$,
         imagePreview$,
@@ -176,6 +187,7 @@
         insertImage$,
         defaultImageName$,
         multipleFilesDroppedWarning$,
+        errorUploadingImage$,
       } = getTipTapEditorStrings();
 
       const modalRoot = ref(null);
@@ -186,6 +198,8 @@
       const altText = ref('');
       const file = ref(null);
       const uploadWarning = ref('');
+      const showErrorModal = ref(false);
+      const errorMessage = ref('');
       let warningTimer = null;
 
       const isEditMode = computed(() => props.mode === 'edit');
@@ -221,7 +235,6 @@
           uploadWarning.value = '';
         }, 5000);
       };
-
       const handleFileChange = async selectedFile => {
         if (!selectedFile) return;
         modalState.value = 'loading';
@@ -231,11 +244,11 @@
           file.value = processedFile;
           modalState.value = 'preview';
         } catch (error) {
-          alert(error.message);
+          errorMessage.value = error.message;
+          showErrorModal.value = true;
           resetToPreview();
         }
       };
-
       const resetToPreview = () => {
         if (props.mode === 'create' && !originalData.value.file) {
           modalState.value = 'initial';
@@ -280,6 +293,8 @@
         handleFileChange,
         uploadWarning,
         showMultiFileWarning,
+        errorMessage,
+        showErrorModal,
 
         // Strings
         editImage$,
@@ -287,6 +302,7 @@
         closeModal$,
         cancelLoading$,
         cancel$,
+        close$,
         replaceFile$,
         selectFile$,
         imagePreview$,
@@ -302,6 +318,7 @@
         save$,
         insert$,
         insertImage$,
+        errorUploadingImage$,
       };
     },
     props: {

From f93b9761b35038b0adcfde86702fa4cefbbfb1f6 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 19:20:57 +0000
Subject: [PATCH 10/13] [pre-commit.ci lite] apply automatic fixes

---
 .../AssessmentItemEditor.vue                  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 385e5af3d3..7f978c4d67 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -65,17 +65,17 @@
                 </VFlex>
 
                 <VFlex shrink>
-                    <button
-                      class="v-btn v-btn--flat v-btn--icon v-size--default"
-                      data-test="editQuestionButton"
-                      @click.stop="openQuestion"
-                    >
-                      <Icon
-                        :color="$themePalette.grey.v_800"
-                        icon="edit"
-                        class="mr-2"
-                      />
-                    </button>
+                  <button
+                    class="v-btn v-btn--flat v-btn--icon v-size--default"
+                    data-test="editQuestionButton"
+                    @click.stop="openQuestion"
+                  >
+                    <Icon
+                      :color="$themePalette.grey.v_800"
+                      icon="edit"
+                      class="mr-2"
+                    />
+                  </button>
                 </VFlex>
               </VLayout>
             </div>

From a6a1055c52f57e7d0df954e088a60e8a182ffe36 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sat, 23 Aug 2025 03:31:47 +0300
Subject: [PATCH 11/13] tests(texteditor): remove data url images tests

---
 .../TipTapEditor/__tests__/markdown.spec.js   | 17 +++------------
 .../__tests__/markdownSerializer.spec.js      | 21 -------------------
 2 files changed, 3 insertions(+), 35 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js
index 520e056666..5c5944e86e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js
@@ -55,16 +55,6 @@ describe('preprocessMarkdown', () => {
     });
   });
 
-  // 2: Data URL / Blob URL Images
-  describe('Data URL Image Handling', () => {
-    it('should convert a data URL image with dimensions into an <img> tag', () => {
-      const dataUrlMd = '![Data](data:image/png;base64,iVBORw0KGgo= =300x400)';
-      const expectedHtml =
-        '<img src="data:image/png;base64,iVBORw0KGgo=" alt="Data" width="300" height="400" />';
-      expect(preprocessMarkdown(dataUrlMd)).toBe(expectedHtml);
-    });
-  });
-
   // 3: Math Formulas
   describe('Math Formula Handling', () => {
     it('should convert a simple math formula into a <span> tag', () => {
@@ -93,11 +83,10 @@ describe('preprocessMarkdown', () => {
 
   // 5: Mixed Content
   describe('Mixed Content Handling', () => {
-    it('should correctly process a string with legacy images, data URLs, math, and standard markdown', () => {
-      const mixedMd =
-        'Legacy: ![](${CONTENTSTORAGE}/file.png =10x10)\nData: ![alt](data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)\nFormula: $$E=mc^2$$';
+    it('should correctly process a string with legacy images, math, and standard markdown', () => {
+      const mixedMd = 'Legacy: ![](${CONTENTSTORAGE}/file.png =10x10)\nFormula: $$E=mc^2$$';
       const expectedHtml =
-        'Legacy: <img src="/content/storage/file.png" permanentSrc="file.png" alt="" width="10" height="10" />\nData: <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="alt" />\nFormula: <span data-latex="E=mc^2"></span>';
+        'Legacy: <img src="/content/storage/file.png" permanentSrc="file.png" alt="" width="10" height="10" />\nFormula: <span data-latex="E=mc^2"></span>';
 
       const result = preprocessMarkdown(mixedMd);
       expect(result).toBe(expectedHtml);
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js
index 6c5354639e..ddc365e1ce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js
@@ -92,27 +92,6 @@ describe('createCustomMarkdownSerializer', () => {
       expect(getMarkdown()).toBe(expectedMd);
     });
 
-    it('should serialize a new, unsaved data: URL image', () => {
-      const dataUrl = 'data:image/png;base64,iVBORw0KGgo=';
-      const docContent = [
-        {
-          type: 'image',
-          attrs: {
-            src: dataUrl,
-            permanentSrc: null, // No permanent source yet
-            alt: 'New Cat',
-            width: '80',
-            height: '60',
-          },
-        },
-      ];
-      const mockEditor = createMockEditor(docContent);
-      const getMarkdown = createCustomMarkdownSerializer(mockEditor);
-
-      const expectedMd = `![New Cat](${dataUrl} =80x60)`;
-      expect(getMarkdown()).toBe(expectedMd);
-    });
-
     it('should serialize a <small> node correctly', () => {
       const docContent = [
         {

From f9c0f75542f490b17c42a7847315779e847c6f31 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 27 Aug 2025 01:43:10 +0300
Subject: [PATCH 12/13] fix(texteditor)[image]:use fallback img width relative
 to viewport

---
 .../TipTapEditor/components/image/ImageNodeView.vue           | 4 +++-
 1 file changed, 3 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 c054345997..ffe1ab452f 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
@@ -126,7 +126,9 @@
           if (!width.value && !height.value) {
             // Get the editor's actual container width
             const editorContainer = props.editor.view.dom.closest('.editor-container');
-            const editorWidth = editorContainer ? editorContainer.offsetWidth : 800; // fallback width
+            const editorWidth = editorContainer
+              ? editorContainer.offsetWidth
+              : window.innerWidth * 0.4; // fallback: 40% of viewport width
 
             const maxWidth = Math.min(imageRef.value.naturalWidth, editorWidth);
 

From ab7d534961124514d1bd09f84f2d4f371ee08216 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 27 Aug 2025 02:11:01 +0300
Subject: [PATCH 13/13] fix: revert false conflict resolving in lock file

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f2f69a68e..81b021c671 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9331,7 +9331,7 @@ snapshots:
 
   '@types/bonjour@3.5.13':
     dependencies:
-      '@types/node': 24.0.10
+      '@types/node': 24.1.0
 
   '@types/connect-history-api-fallback@1.5.4':
     dependencies: