{getErrorMessage(props.error)}
diff --git a/nextjs/src/hooks/localCourse/assignmentHooks.ts b/nextjs/src/hooks/localCourse/assignmentHooks.ts
index ff018c1..734d884 100644
--- a/nextjs/src/hooks/localCourse/assignmentHooks.ts
+++ b/nextjs/src/hooks/localCourse/assignmentHooks.ts
@@ -1,6 +1,15 @@
"use client";
import { trpc } from "@/services/serverFunctions/trpcClient";
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import {
+ useLocalCourseSettingsQuery,
+ useUpdateLocalCourseSettingsMutation,
+} from "./localCoursesHooks";
+import {
+ extractImageSources,
+ markdownToHtmlNoImages,
+} from "@/services/htmlMarkdownUtils";
+import { useActionState, useEffect, useState } from "react";
export const useAssignmentQuery = (
moduleName: string,
@@ -14,6 +23,57 @@ export const useAssignmentQuery = (
});
};
+export const useUpdateImageSettingsForAssignment = ({
+ moduleName,
+ assignmentName,
+}: {
+ moduleName: string;
+ assignmentName: string;
+}) => {
+ const [settings] = useLocalCourseSettingsQuery();
+ const [assignment] = useAssignmentQuery(moduleName, assignmentName);
+ const updateSettings = useUpdateLocalCourseSettingsMutation();
+ const [isUpdatingSettings, setIsUpdatingSettings] = useState(false);
+
+ // useEffect(() => {
+ // if (isUpdatingSettings) {
+ // console.log("not updating image assets, still loading");
+ // return;
+ // }
+ // setIsUpdatingSettings(true);
+ // const assignmentMarkdown = markdownToHtmlNoImages(assignment.description);
+
+ // const imageSources = extractImageSources(assignmentMarkdown);
+ // const imagesToUpdate = imageSources.filter((source) =>
+ // settings.assets.every((a) => a.sourceUrl !== source)
+ // );
+ // console.log("images to update", imagesToUpdate);
+
+
+ // Promise.all(
+ // imagesToUpdate.map(async (source) => {
+ // // todo: get canvas url
+ // const canvasUrl = "";
+ // return { sourceUrl: source, canvasUrl };
+ // })
+ // ).then(async (newAssets) => {
+ // await updateSettings.mutateAsync({
+ // settings: {
+ // ...settings,
+ // assets: [...settings.assets, ...newAssets],
+ // },
+ // });
+ // setIsUpdatingSettings(false);
+ // });
+ // }, [
+ // assignment.description,
+ // isUpdatingSettings,
+ // settings,
+ // settings.assets,
+ // updateSettings,
+ // ]);
+};
+
export const useAssignmentNamesQuery = (moduleName: string) => {
const { courseName } = useCourseContext();
return trpc.assignment.getAllAssignments.useSuspenseQuery(
diff --git a/nextjs/src/services/htmlMarkdownUtils.ts b/nextjs/src/services/htmlMarkdownUtils.ts
index 631d89d..ff9dc90 100644
--- a/nextjs/src/services/htmlMarkdownUtils.ts
+++ b/nextjs/src/services/htmlMarkdownUtils.ts
@@ -3,18 +3,40 @@ import { marked } from "marked";
import * as DOMPurify from "isomorphic-dompurify";
import { LocalCourseSettings } from "@/models/local/localCourseSettings";
-function extractImageSources(html: string) {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, "text/html");
- const imgElements = doc.querySelectorAll("img");
- const srcUrls = Array.from(imgElements).map((img) => img.src);
+export function extractImageSources(htmlString: string) {
+ const srcUrls = [];
+ const regex = /
]+src=["']?([^"'>]+)["']?/g;
+ let match;
+
+ while ((match = regex.exec(htmlString)) !== null) {
+ srcUrls.push(match[1]);
+ }
+
return srcUrls;
}
-
-function handleImages(html: string, settings: LocalCourseSettings) {
+export function convertImagesToCanvasImages(
+ html: string,
+ settings: LocalCourseSettings
+) {
const imageSources = extractImageSources(html);
- console.log(imageSources);
+ let mutableHtml = html;
+ // console.log(imageSources);
+
+ const imageLookup = settings.assets.reduce((acc, asset) => {
+ return { ...acc, [asset.sourceUrl]: asset.canvasUrl };
+ }, {} as { [key: string]: string });
+
+ for (const imageSrc of imageSources) {
+ const destinationUrl = imageLookup[imageSrc];
+ if (typeof destinationUrl === "undefined") {
+ throw `cannot convert to html, no canvas url for ${imageSrc} in settings`;
+ }
+ mutableHtml = mutableHtml.replaceAll(imageSrc, destinationUrl);
+ }
+ // console.log(imageSources, imageLookup, mutableHtml);
+ return mutableHtml;
}
+
export function markdownToHTMLSafe(
markdownString: string,
settings: LocalCourseSettings
@@ -22,6 +44,13 @@ export function markdownToHTMLSafe(
const clean = DOMPurify.sanitize(
marked.parse(markdownString, { async: false, pedantic: false, gfm: true })
);
- handleImages(clean, settings);
+ return convertImagesToCanvasImages(clean, settings);
+ // return clean;
+}
+
+export function markdownToHtmlNoImages(markdownString: string) {
+ const clean = DOMPurify.sanitize(
+ marked.parse(markdownString, { async: false, pedantic: false, gfm: true })
+ );
return clean;
}