fix: Font upload UX

- Ensure font is loaded properly
- Show some feedback on font upload

Author: surajshetty3416

frontend/src/components/Controls/FontUploader.vue

@@ -11,6 +11,8 @@ import userFont from "@/data/userFonts";
 import blockController from "@/utils/blockController";
 import { getFontName } from "@/utils/helpers";
 import { FileUploadHandler } from "frappe-ui";
+import { nextTick } from "vue";
+import { toast } from "vue-sonner";
 const emit = defineEmits(["change"]);
 
 type FileDoc = {
@@ -22,28 +24,34 @@ const openFileSelector = () => {
 	const input = document.createElement("input");
 	input.type = "file";
 	input.accept = ".woff2,.woff,.ttf,.otf";
-	input.onchange = (e: Event) => {
-		const file = (e.target as HTMLInputElement)?.files?.[0];
-		if (file) {
-			const fileUploadHandler = new FileUploadHandler();
-			fileUploadHandler
-				.upload(file, {
-					private: false,
-					folder: "Home/Builder Uploads/Fonts",
-				})
-				.then((fileDoc: FileDoc) => {
-					uploadFont(fileDoc);
-				});
-		}
-	};
+	input.onchange = (e) =>
+		toast.promise(
+			new Promise(async (resolve) => {
+				const file = (e.target as HTMLInputElement)?.files?.[0];
+				if (file) {
+					const fileUploadHandler = new FileUploadHandler();
+					const fileDoc = await fileUploadHandler.upload(file, {
+						private: false,
+						folder: "Home/Builder Uploads/Fonts",
+					});
+					await uploadFont(fileDoc);
+				}
+				resolve(null);
+			}),
+			{
+				loading: "Uploading font...",
+				success: () => "Font uploaded",
+			},
+		);
 	input.click();
 };
 
 const uploadFont = async (file: FileDoc) => {
 	const fontFamilyName = await getFontName(file.file_url);
 	const fontURL = file.file_url;
 	const fontFace = new FontFace(fontFamilyName, `url("${fontURL}")`);
-	await fontFace.load();
+	const loadedFont = await fontFace.load();
+	document.fonts.add(loadedFont);
 	try {
 		await userFont.insert.submit({
 			font_name: fontFace.family,
@@ -55,9 +63,11 @@ const uploadFont = async (file: FileDoc) => {
 			console.log("Font already exists");
 		}
 	}
+	await userFont.fetch();
+	emit("change");
+	await nextTick();
 	if (blockController.isBLockSelected()) {
 		blockController.setFontFamily(fontFace.family);
 	}
-	emit("change");
 };
 </script>

frontend/src/utils/fontManager.ts

@@ -12,7 +12,7 @@ const setFontRequested = (font: string) => {
 };
 
 const setFont = (font: string | null, weight: string | null) => {
-	let fontId = "";
+	let fontId = font || "";
 	return new Promise((resolve) => {
 		if (!font) {
 			return resolve(font);