fix: more flexible and efficient solution for images in docs

apps/nextjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

packages/aila/src/utils/experimentalPatches/mathsQuiz.fixture.ts

@@ -44,4 +44,15 @@ export const mathsQuizFixture: Quiz = [
       "neither similar nor congruent.",
     ],
   },
+  {
+    question:
+      "Here is an image ![image](http://oaknationalacademy-res.cloudinary.com/image/upload/v1706110974/fukcqeavzcevgjhmm1n4.png) and here is the same image  ![image](http://oaknationalacademy-res.cloudinary.com/image/upload/v1706110974/fukcqeavzcevgjhmm1n4.png)",
+    answers: [
+      "![image](http://oaknationalacademy-res.cloudinary.com/image/upload/v1703169784/fg4uyx41rfnksbvav2nh.png)",
+    ],
+    distractors: [
+      "![image](http://oaknationalacademy-res.cloudinary.com/image/upload/v1703163380/pz6cn5k4wmowycnjq5am.png)",
+      "![image](http://oaknationalacademy-res.cloudinary.com/image/upload/v1703169784/mr09mrwkqdtk1dvjdoi0.png)",
+    ],
+  },
 ];

packages/api/src/export/exportQuizDoc.ts

@@ -8,8 +8,7 @@ import { aiLogger } from "@oakai/logger";
 import * as Sentry from "@sentry/nextjs";
 import { z } from "zod";
 
-import type {
-  OutputSchema} from "../router/exports";
+import type { OutputSchema } from "../router/exports";
 import {
   ailaGetExportBySnapshotId,
   ailaSaveExport,

packages/exports/src/gSuite/docs/findMarkdownImages.ts

@@ -0,0 +1,70 @@
+import type { docs_v1 } from "@googleapis/docs";
+
+export async function findMarkdownImages(
+  googleDocs: docs_v1.Docs,
+  documentId: string,
+): Promise<{ url: string; altText: string; startIndex: number }[]> {
+  const doc = await googleDocs.documents.get({ documentId });
+  const body = doc.data.body?.content;
+
+  if (!body) return [];
+
+  const markdownImageRegex = /!\[(.*?)\]\((.*?)\)/g;
+  const matches: { url: string; altText: string; startIndex: number }[] = [];
+
+  function handleMatch(
+    match: RegExpExecArray,
+    textElement: docs_v1.Schema$ParagraphElement,
+  ): void {
+    const [, altText, url] = match;
+    const textElementStartIndex = textElement.startIndex;
+    const matchIndex = match.index;
+    if (
+      typeof textElementStartIndex !== "number" ||
+      typeof matchIndex !== "number"
+    ) {
+      return;
+    }
+    const startIndex = textElementStartIndex + matchIndex;
+    if (url && typeof altText === "string") {
+      matches.push({ url, altText, startIndex });
+    }
+  }
+
+  function processTextElements(elements: docs_v1.Schema$ParagraphElement[]) {
+    for (const textElement of elements) {
+      const textContent = textElement.textRun?.content ?? "";
+      let match: RegExpExecArray | null;
+      while ((match = markdownImageRegex.exec(textContent)) !== null) {
+        handleMatch(match, textElement);
+      }
+    }
+  }
+
+  function processTableCells(cells: docs_v1.Schema$TableCell[]) {
+    for (const cell of cells) {
+      for (const cellElement of cell.content ?? []) {
+        if (cellElement.paragraph?.elements) {
+          processTextElements(cellElement.paragraph.elements);
+        }
+      }
+    }
+  }
+
+  function processBodyElements(elements: docs_v1.Schema$StructuralElement[]) {
+    for (const element of elements) {
+      if (element.table) {
+        for (const row of element.table.tableRows ?? []) {
+          processTableCells(row.tableCells ?? []);
+        }
+      }
+      if (element.paragraph?.elements) {
+        processTextElements(element.paragraph.elements);
+      }
+    }
+  }
+
+  processBodyElements(body);
+
+  return matches;
+}

packages/exports/src/gSuite/docs/imageReplacements.ts

@@ -0,0 +1,62 @@
+import type { docs_v1 } from "@googleapis/docs";
+import { aiLogger } from "@oakai/logger";
+
+const log = aiLogger("exports");
+
+export function imageReplacements(
+  markdownImages: { url: string; altText: string; startIndex: number }[],
+): { requests: docs_v1.Schema$Request[] } {
+  if (markdownImages.length === 0) {
+    log.info("No Markdown images to process.");
+    return { requests: [] };
+  }
+
+  let cumulativeShift = 0; // Tracks the total index shift from previous operations
+
+  const requests: docs_v1.Schema$Request[] = [];
+
+  markdownImages.forEach((image) => {
+    // Construct the full Markdown reference
+    const markdownImageReference = `![${image.altText}](${image.url})`;
+
+    const markdownLength = markdownImageReference.length;
+
+    // Adjust the start and end index dynamically based on the cumulative shift
+    const adjustedStartIndex = image.startIndex + cumulativeShift;
+    const adjustedEndIndex = adjustedStartIndex + markdownLength;
+
+    // Request to delete the exact range of the Markdown reference
+    requests.push({
+      deleteContentRange: {
+        range: {
+          startIndex: adjustedStartIndex,
+          endIndex: adjustedEndIndex,
+        },
+      },
+    });
+
+    // Request to insert the inline image at the adjusted startIndex
+    requests.push({
+      insertInlineImage: {
+        uri: image.url,
+        location: {
+          index: adjustedStartIndex, // Insert at the same startIndex where the Markdown was removed
+        },
+        objectSize: {
+          height: {
+            magnitude: 150,
+            unit: "PT",
+          },
+          width: {
+            magnitude: 150,
+            unit: "PT",
+          },
+        },
+      },
+    });
+    const netShift = 1 - markdownLength; // Inline image adds 1, Markdown removes its length
+    cumulativeShift += netShift;
+  });
+
+  return { requests };
+}

packages/exports/src/gSuite/docs/populateDoc.ts

@@ -1,10 +1,18 @@
 import type { docs_v1 } from "@googleapis/docs";
+import { aiLogger } from "@oakai/logger";
 
 import type { Result } from "../../types";
 import type { ValueToString } from "../../utils";
 import { defaultValueToString } from "../../utils";
+<<<<<<< Updated upstream
+=======
+import { findMarkdownImages } from "./findMarkdownImages";
+import { imageReplacements } from "./imageReplacements";
+>>>>>>> Stashed changes
 import { textReplacements } from "./textReplacements";
 
+const log = aiLogger("exports");
+
 /**
  * Populates the template document with the given data, handling image replacements for all placeholders.
  */
@@ -26,13 +34,6 @@ export async function populateDoc<
   try {
     const missingData: string[] = [];
 
-    // Commenting out this part until the issues are resolved (see @TODOs on function defintiion)
-    // await processImageReplacements({
-    //   googleDocs,
-    //   documentId,
-    //   data,
-    // });
-
     const { requests: textRequests } = textReplacements({
       data,
       warnIfMissing,
@@ -48,13 +49,26 @@ export async function populateDoc<
       });
     }
 
+    const markdownImages = await findMarkdownImages(googleDocs, documentId);
+
+    const { requests: imageRequests } = imageReplacements(markdownImages);
+
+    if (imageRequests.length > 0) {
+      await googleDocs.documents.batchUpdate({
+        documentId,
+        requestBody: {
+          requests: imageRequests,
+        },
+      });
+    }
+
     return {
       data: {
         missingData,
       },
     };
   } catch (error) {
-    console.error("Failed to populate document:", error);
+    log.error("Failed to populate document:", error);
     return {
       error,
       message: "Failed to populate doc template",