Make font selection show a live preview on hover; move its code to the backend (#3487)

* Remove FontInput.svelte

* Move font picking to the backend

* Fix Text tool font choice style turning to "-" on font that doesn't support previous style

frontend/src/components/Editor.svelte

@@ -11,7 +11,7 @@
 	import { createAppWindowState } from "@graphite/state-providers/app-window";
 	import { createDialogState } from "@graphite/state-providers/dialog";
 	import { createDocumentState } from "@graphite/state-providers/document";
-	import { createFontsState } from "@graphite/state-providers/fonts";
+	import { createFontsManager } from "/src/io-managers/fonts";
 	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
 	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
 	import { createPortfolioState } from "@graphite/state-providers/portfolio";
@@ -31,8 +31,6 @@
 	setContext("tooltip", tooltip);
 	let document = createDocumentState(editor);
 	setContext("document", document);
-	let fonts = createFontsState(editor);
-	setContext("fonts", fonts);
 	let fullscreen = createFullscreenState(editor);
 	setContext("fullscreen", fullscreen);
 	let nodeGraph = createNodeGraphState(editor);
@@ -48,6 +46,7 @@
 	createLocalizationManager(editor);
 	createPanicManager(editor, dialog);
 	createPersistenceManager(editor, portfolio);
+	createFontsManager(editor);
 	let inputManagerDestructor = createInputManager(editor, dialog, portfolio, document, fullscreen);
 
 	onMount(() => {

frontend/src/components/floating-menus/MenuList.svelte

@@ -30,6 +30,7 @@
 
 	export let parentsValuePath: string[] = [];
 	export let entries: MenuListEntry[][];
+	export let entriesHash: bigint;
 	export let activeEntry: MenuListEntry | undefined = undefined;
 	export let open: boolean;
 	export let direction: MenuDirection = "Bottom";
@@ -37,26 +38,29 @@
 	export let drawIcon = false;
 	export let interactive = false;
 	export let scrollableY = false;
-	export let virtualScrollingEntryHeight = 0;
+	export let virtualScrolling = false;
 
 	// Keep the child references outside of the entries array so as to avoid infinite recursion.
 	let childReferences: MenuList[][] = [];
 	let search = "";
-
+	let reactiveEntries = entries;
 	let highlighted = activeEntry as MenuListEntry | undefined;
 	let virtualScrollingEntriesStart = 0;
 
-	// Called only when `open` is changed from outside this component
+	// `watchOpen` is called only when `open` is changed from outside this component
 	$: watchOpen(open);
 	$: watchEntries(entries);
+	$: watchEntriesHash(entriesHash);
 	$: watchRemeasureWidth(filteredEntries, drawIcon);
 	$: watchHighlightedWithSearch(filteredEntries, open);
 
-	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
-	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
-	$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
-	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
+	$: virtualScrollingEntryHeight = virtualScrolling ? 20 : 0;
+	$: filteredEntries = reactiveEntries.map((section) => section.filter((entry) => inSearch(search, entry)));
 	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
+	// Virtual scrolling calculations
+	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
+	$: virtualScrollingStartIndex = filteredEntries.length === 0 ? 0 : Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
+	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
 
 	// TODO: Move keyboard input handling entirely to the unified system in `input.ts`.
 	// TODO: The current approach is hacky and blocks the allowances for shortcuts like the key to open the browser's dev tools.
@@ -139,6 +143,10 @@
 		});
 	}
 
+	function watchEntriesHash(_entriesHash: bigint) {
+		reactiveEntries = entries;
+	}
+
 	function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) {
 		self?.measureAndEmitNaturalWidth();
 	}
@@ -149,23 +157,31 @@
 	}
 
 	function getChildReference(menuListEntry: MenuListEntry): MenuList | undefined {
-		const index = filteredEntries.flat().indexOf(menuListEntry);
-		return childReferences.flat().filter((x) => x)[index];
+		const index = filteredEntries.flat().findIndex((entry) => entry.value === menuListEntry.value);
+
+		if (index !== -1) {
+			return childReferences.flat().filter((x) => x)[index];
+		} else {
+			// eslint-disable-next-line no-console
+			console.error("MenuListEntry not found in filteredEntries:", menuListEntry);
+			return undefined;
+		}
 	}
 
 	function onEntryClick(menuListEntry: MenuListEntry) {
-		// Notify the parent about the clicked entry as the new active entry
-		dispatch("activeEntry", menuListEntry);
-		dispatch("selectedEntryValuePath", [...parentsValuePath, menuListEntry.value]);
-
 		// Close the containing menu
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
 			childReference.open = false;
-			entries = entries;
+			reactiveEntries = reactiveEntries;
 		}
 		dispatch("open", false);
 		open = false;
+		reactiveEntries = reactiveEntries;
+
+		// Notify the parent about the clicked entry as the new active entry
+		dispatch("activeEntry", menuListEntry);
+		dispatch("selectedEntryValuePath", [...parentsValuePath, menuListEntry.value]);
 	}
 
 	function onEntryPointerEnter(menuListEntry: MenuListEntry) {
@@ -177,8 +193,10 @@
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
 			childReference.open = true;
-			entries = entries;
-		} else dispatch("open", true);
+			reactiveEntries = reactiveEntries;
+		} else {
+			dispatch("open", true);
+		}
 	}
 
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
@@ -190,8 +208,10 @@
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
 			childReference.open = false;
-			entries = entries;
-		} else dispatch("open", false);
+			reactiveEntries = reactiveEntries;
+		} else {
+			dispatch("open", false);
+		}
 	}
 
 	function isEntryOpen(menuListEntry: MenuListEntry): boolean {
@@ -365,7 +385,7 @@
 		let container = scroller?.div?.();
 		if (!container || !highlighted) return;
 		let containerBoundingRect = container.getBoundingClientRect();
-		let highlightedIndex = filteredEntries.flat().findIndex((entry) => entry === highlighted);
+		let highlightedIndex = filteredEntries.flat().findIndex((entry) => entry.value === highlighted?.value);
 
 		let selectedBoundingRect = new DOMRect();
 		if (virtualScrollingEntryHeight) {
@@ -386,10 +406,6 @@
 			container.scrollBy(0, selectedBoundingRect.y - (containerBoundingRect.y + containerBoundingRect.height) + selectedBoundingRect.height);
 		}
 	}
-
-	export function scrollViewTo(distanceDown: number) {
-		scroller?.div?.()?.scrollTo(0, distanceDown);
-	}
 </script>
 
 <FloatingMenu
@@ -419,8 +435,8 @@
 		{#if virtualScrollingEntryHeight}
 			<LayoutRow class="scroll-spacer" styles={{ height: `${virtualScrollingStartIndex * virtualScrollingEntryHeight}px` }} />
 		{/if}
-		{#each entries as section, sectionIndex (sectionIndex)}
-			{#if includeSeparator(entries, section, sectionIndex, search)}
+		{#each reactiveEntries as section, sectionIndex (sectionIndex)}
+			{#if includeSeparator(reactiveEntries, section, sectionIndex, search)}
 				<Separator type="Section" direction="Vertical" />
 			{/if}
 			{#each currentEntries(section, virtualScrollingEntryHeight, virtualScrollingStartIndex, virtualScrollingEndIndex, search) as entry, entryIndex (entryIndex + startIndex)}
@@ -442,10 +458,10 @@
 					{/if}
 
 					{#if entry.font}
-						<link rel="stylesheet" href={entry.font?.toString()} />
+						<link rel="stylesheet" href={entry.font} />
 					{/if}
 
-					<TextLabel class="entry-label" styles={{ "font-family": `${!entry.font ? "inherit" : entry.value}` }}>{entry.label}</TextLabel>
+					<TextLabel class="entry-label" styles={entry.font ? { "font-family": entry.value } : {}}>{entry.label}</TextLabel>
 
 					{#if entry.tooltipShortcut?.shortcut.length}
 						<ShortcutLabel shortcut={entry.tooltipShortcut} />
@@ -470,6 +486,7 @@
 							open={getChildReference(entry)?.open || false}
 							direction="TopRight"
 							entries={entry.children}
+							entriesHash={entry.childrenHash || 0n}
 							{minWidth}
 							{drawIcon}
 							{scrollableY}

frontend/src/components/panels/Document.svelte

@@ -6,6 +6,7 @@
 		type MouseCursorIcon,
 		type XY,
 		DisplayEditableTextbox,
+		DisplayEditableTextboxUpdateFontData,
 		DisplayEditableTextboxTransform,
 		DisplayRemoveEditableTextbox,
 		TriggerTextCommit,
@@ -360,10 +361,14 @@
 			if (!textInput) return;
 			editor.handle.updateBounds(textInputCleanup(textInput.innerText));
 		};
+
 		textInputMatrix = displayEditableTextbox.transform;
-		const newFont = new FontFace("text-font", `url(${displayEditableTextbox.url})`);
-		window.document.fonts.add(newFont);
-		textInput.style.fontFamily = "text-font";
+
+		const data = new Uint8Array(displayEditableTextbox.fontData);
+		if (data.length > 0) {
+			window.document.fonts.add(new FontFace("text-font", data));
+			textInput.style.fontFamily = "text-font";
+		}
 
 		// Necessary to select contenteditable: https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element/6150060#6150060
 
@@ -471,6 +476,15 @@
 
 			displayEditableTextbox(data);
 		});
+		editor.subscriptions.subscribeJsMessage(DisplayEditableTextboxUpdateFontData, async (data) => {
+			await tick();
+
+			const fontData = new Uint8Array(data.fontData);
+			if (fontData.length > 0 && textInput) {
+				window.document.fonts.add(new FontFace("text-font", fontData));
+				textInput.style.fontFamily = "text-font";
+			}
+		});
 		editor.subscriptions.subscribeJsMessage(DisplayEditableTextboxTransform, async (data) => {
 			textInputMatrix = data.transform;
 		});

frontend/src/components/panels/Layers.svelte

@@ -627,7 +627,7 @@
 							data-tooltip-description={(listing.entry.expanded
 								? "Hide the layers nested within. (To affect all open descendants, perform the shortcut shown.)"
 								: "Show the layers nested within. (To affect all closed descendants, perform the shortcut shown.)") +
-								(listing.entry.ancestorOfSelected && !listing.entry.expanded ? "\n\nNote: a selected layer is currently contained within.\n" : "")}
+								(listing.entry.ancestorOfSelected && !listing.entry.expanded ? "\n\nA selected layer is currently contained within.\n" : "")}
 							data-tooltip-shortcut={altClickShortcut?.shortcut ? JSON.stringify(altClickShortcut.shortcut) : undefined}
 							on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
 							tabindex="0"

frontend/src/components/widgets/WidgetSpan.svelte

@@ -17,7 +17,6 @@
 	import ColorInput from "@graphite/components/widgets/inputs/ColorInput.svelte";
 	import CurveInput from "@graphite/components/widgets/inputs/CurveInput.svelte";
 	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
-	import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
 	import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
 	import RadioInput from "@graphite/components/widgets/inputs/RadioInput.svelte";
 	import ReferencePointInput from "@graphite/components/widgets/inputs/ReferencePointInput.svelte";
@@ -61,16 +60,16 @@
 		return widgets;
 	}
 
-	function widgetValueCommit(index: number, value: unknown) {
-		editor.handle.widgetValueCommit(layoutTarget, widgets[index].widgetId, value);
+	function widgetValueCommit(widgetIndex: number, value: unknown) {
+		editor.handle.widgetValueCommit(layoutTarget, widgets[widgetIndex].widgetId, value);
 	}
 
-	function widgetValueUpdate(index: number, value: unknown) {
-		editor.handle.widgetValueUpdate(layoutTarget, widgets[index].widgetId, value);
+	function widgetValueUpdate(widgetIndex: number, value: unknown, resendWidget: boolean) {
+		editor.handle.widgetValueUpdate(layoutTarget, widgets[widgetIndex].widgetId, value, resendWidget);
 	}
 
-	function widgetValueCommitAndUpdate(index: number, value: unknown) {
-		editor.handle.widgetValueCommitAndUpdate(layoutTarget, widgets[index].widgetId, value);
+	function widgetValueCommitAndUpdate(widgetIndex: number, value: unknown, resendWidget: boolean) {
+		editor.handle.widgetValueCommitAndUpdate(layoutTarget, widgets[widgetIndex].widgetId, value, resendWidget);
 	}
 
 	// TODO: This seems to work, but verify the correctness and terseness of this, it's adapted from https://stackoverflow.com/a/67434028/775283
@@ -85,43 +84,47 @@
 <!-- TODO: Refactor this component to use `<svelte:component this={attributesObject} />` to avoid all the separate conditional components -->
 
 <div class={`widget-span ${className} ${extraClasses}`.trim()} class:narrow class:row={direction === "row"} class:column={direction === "column"}>
-	{#each widgets as component, index}
+	{#each widgets as component, widgetIndex}
 		{@const checkboxInput = narrowWidgetProps(component.props, "CheckboxInput")}
 		{#if checkboxInput}
-			<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, true)} />
 		{/if}
 		{@const colorInput = narrowWidgetProps(component.props, "ColorInput")}
 		{#if colorInput}
-			<ColorInput {...exclude(colorInput)} on:value={({ detail }) => widgetValueUpdate(index, detail)} on:startHistoryTransaction={() => widgetValueCommit(index, colorInput.value)} />
+			<ColorInput
+				{...exclude(colorInput)}
+				on:value={({ detail }) => widgetValueUpdate(widgetIndex, detail, false)}
+				on:startHistoryTransaction={() => widgetValueCommit(widgetIndex, colorInput.value)}
+			/>
 		{/if}
+		<!-- TODO: Curves Input is currently unused -->
 		{@const curvesInput = narrowWidgetProps(component.props, "CurveInput")}
 		{#if curvesInput}
-			<CurveInput {...exclude(curvesInput)} on:value={({ detail }) => debouncer((value) => widgetValueCommitAndUpdate(index, value), { debounceTime: 120 }).debounceUpdateValue(detail)} />
+			<CurveInput
+				{...exclude(curvesInput)}
+				on:value={({ detail }) => debouncer((value) => widgetValueCommitAndUpdate(widgetIndex, value, false), { debounceTime: 120 }).debounceUpdateValue(detail)}
+			/>
 		{/if}
 		{@const dropdownInput = narrowWidgetProps(component.props, "DropdownInput")}
 		{#if dropdownInput}
 			<DropdownInput
 				{...exclude(dropdownInput)}
 				on:hoverInEntry={({ detail }) => {
-					return widgetValueUpdate(index, detail);
+					return widgetValueUpdate(widgetIndex, detail, false);
 				}}
 				on:hoverOutEntry={({ detail }) => {
-					return widgetValueUpdate(index, detail);
+					return widgetValueUpdate(widgetIndex, detail, false);
 				}}
-				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
+				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, true)}
 			/>
 		{/if}
-		{@const fontInput = narrowWidgetProps(component.props, "FontInput")}
-		{#if fontInput}
-			<FontInput {...exclude(fontInput)} on:changeFont={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
-		{/if}
 		{@const parameterExposeButton = narrowWidgetProps(component.props, "ParameterExposeButton")}
 		{#if parameterExposeButton}
-			<ParameterExposeButton {...exclude(parameterExposeButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
+			<ParameterExposeButton {...exclude(parameterExposeButton)} action={() => widgetValueCommitAndUpdate(widgetIndex, undefined, true)} />
 		{/if}
 		{@const iconButton = narrowWidgetProps(component.props, "IconButton")}
 		{#if iconButton}
-			<IconButton {...exclude(iconButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
+			<IconButton {...exclude(iconButton)} action={() => widgetValueCommitAndUpdate(widgetIndex, undefined, true)} />
 		{/if}
 		{@const iconLabel = narrowWidgetProps(component.props, "IconLabel")}
 		{#if iconLabel}
@@ -138,25 +141,25 @@
 		{/if}
 		{@const imageButton = narrowWidgetProps(component.props, "ImageButton")}
 		{#if imageButton}
-			<ImageButton {...exclude(imageButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
+			<ImageButton {...exclude(imageButton)} action={() => widgetValueCommitAndUpdate(widgetIndex, undefined, true)} />
 		{/if}
 		{@const nodeCatalog = narrowWidgetProps(component.props, "NodeCatalog")}
 		{#if nodeCatalog}
-			<NodeCatalog {...exclude(nodeCatalog)} on:selectNodeType={(e) => widgetValueCommitAndUpdate(index, e.detail)} />
+			<NodeCatalog {...exclude(nodeCatalog)} on:selectNodeType={(e) => widgetValueCommitAndUpdate(widgetIndex, e.detail, false)} />
 		{/if}
 		{@const numberInput = narrowWidgetProps(component.props, "NumberInput")}
 		{#if numberInput}
 			<NumberInput
 				{...exclude(numberInput)}
-				on:value={({ detail }) => debouncer((value) => widgetValueUpdate(index, value)).debounceUpdateValue(detail)}
-				on:startHistoryTransaction={() => widgetValueCommit(index, numberInput.value)}
-				incrementCallbackIncrease={() => widgetValueCommitAndUpdate(index, "Increment")}
-				incrementCallbackDecrease={() => widgetValueCommitAndUpdate(index, "Decrement")}
+				on:value={({ detail }) => debouncer((value) => widgetValueUpdate(widgetIndex, value, true)).debounceUpdateValue(detail)}
+				on:startHistoryTransaction={() => widgetValueCommit(widgetIndex, numberInput.value)}
+				incrementCallbackIncrease={() => widgetValueCommitAndUpdate(widgetIndex, "Increment", false)}
+				incrementCallbackDecrease={() => widgetValueCommitAndUpdate(widgetIndex, "Decrement", false)}
 			/>
 		{/if}
 		{@const referencePointInput = narrowWidgetProps(component.props, "ReferencePointInput")}
 		{#if referencePointInput}
-			<ReferencePointInput {...exclude(referencePointInput)} on:value={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<ReferencePointInput {...exclude(referencePointInput)} on:value={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, true)} />
 		{/if}
 		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
 		{#if popoverButton}
@@ -166,7 +169,7 @@
 		{/if}
 		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
 		{#if radioInput}
-			<RadioInput {...exclude(radioInput)} on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<RadioInput {...exclude(radioInput)} on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, true)} />
 		{/if}
 		{@const separator = narrowWidgetProps(component.props, "Separator")}
 		{#if separator}
@@ -178,19 +181,23 @@
 		{/if}
 		{@const textAreaInput = narrowWidgetProps(component.props, "TextAreaInput")}
 		{#if textAreaInput}
-			<TextAreaInput {...exclude(textAreaInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<TextAreaInput {...exclude(textAreaInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, false)} />
 		{/if}
 		{@const textButton = narrowWidgetProps(component.props, "TextButton")}
 		{#if textButton}
-			<TextButton {...exclude(textButton)} action={() => widgetValueCommitAndUpdate(index, [])} on:selectedEntryValuePath={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<TextButton
+				{...exclude(textButton)}
+				action={() => widgetValueCommitAndUpdate(widgetIndex, [], true)}
+				on:selectedEntryValuePath={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, false)}
+			/>
 		{/if}
 		{@const breadcrumbTrailButtons = narrowWidgetProps(component.props, "BreadcrumbTrailButtons")}
 		{#if breadcrumbTrailButtons}
-			<BreadcrumbTrailButtons {...exclude(breadcrumbTrailButtons)} action={(breadcrumbIndex) => widgetValueCommitAndUpdate(index, breadcrumbIndex)} />
+			<BreadcrumbTrailButtons {...exclude(breadcrumbTrailButtons)} action={(breadcrumbIndex) => widgetValueCommitAndUpdate(widgetIndex, breadcrumbIndex, true)} />
 		{/if}
 		{@const textInput = narrowWidgetProps(component.props, "TextInput")}
 		{#if textInput}
-			<TextInput {...exclude(textInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<TextInput {...exclude(textInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(widgetIndex, detail, true)} />
 		{/if}
 		{@const textLabel = narrowWidgetProps(component.props, "TextLabel")}
 		{#if textLabel}

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -27,6 +27,7 @@
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
+	export let menuListChildrenHash: bigint | undefined = undefined;
 
 	// Callbacks
 	// TODO: Replace this with an event binding (and on other components that do this)
@@ -90,6 +91,7 @@
 			on:selectedEntryValuePath={({ detail }) => dispatch("selectedEntryValuePath", detail)}
 			open={self?.open || false}
 			entries={menuListChildren || []}
+			entriesHash={menuListChildrenHash || 0n}
 			direction="Bottom"
 			minWidth={240}
 			drawIcon={true}

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -12,15 +12,16 @@
 
 	const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: number }>();
 
-	let menuList: MenuList | undefined;
 	let self: LayoutRow | undefined;
 
 	export let entries: MenuListEntry[][];
+	export let entriesHash: bigint | undefined = undefined;
 	export let selectedIndex: number | undefined = undefined; // When not provided, a dash is displayed
 	export let drawIcon = false;
 	export let interactive = true;
 	export let disabled = false;
 	export let narrow = false;
+	export let virtualScrolling = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
@@ -53,19 +54,32 @@
 		activeEntry = makeActiveEntry();
 	}
 
-	// Called when the `activeEntry` two-way binding on this component's MenuList component is changed, or by the `selectedIndex()` watcher above (but we want to skip that case)
+	// Called when the `activeEntry` two-way binding on this component's MenuList component is changed, or by the `watchSelectedIndex()` watcher above (but we want to skip that case)
 	function watchActiveEntry(activeEntry: MenuListEntry) {
 		if (activeEntrySkipWatcher) {
 			activeEntrySkipWatcher = false;
 		} else if (activeEntry !== DASH_ENTRY) {
 			// We need to set to the initial value first to track a right history step, as if we hover in initial selection.
 			if (initialSelectedIndex !== undefined) dispatch("hoverInEntry", initialSelectedIndex);
-			dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
+			const index = entries.flat().findIndex((entry) => entry.value === activeEntry.value);
+			if (index !== -1) {
+				dispatch("selectedIndex", index);
+			} else {
+				// eslint-disable-next-line no-console
+				console.error("Selected index not found in entries:", activeEntry);
+			}
 		}
 	}
 
 	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
-		dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
+		const index = entries.flat().findIndex((entry) => entry.value === hoveredEntry.value);
+
+		if (index !== -1) {
+			dispatch("hoverInEntry", index);
+		} else {
+			// eslint-disable-next-line no-console
+			console.error("Hovered entry not found in entries:", hoveredEntry);
+		}
 	}
 
 	function dispatchHoverOutEntry() {
@@ -123,11 +137,12 @@
 		{open}
 		{activeEntry}
 		{entries}
+		entriesHash={entriesHash || 0n}
 		{drawIcon}
 		{interactive}
+		{virtualScrolling}
 		direction="Bottom"
 		scrollableY={true}
-		bind:this={menuList}
 	/>
 </LayoutRow>
 

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -1,186 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
-
-	import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
-	import type { FontsState } from "@graphite/state-providers/fonts";
-
-	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-
-	const fonts = getContext<FontsState>("fonts");
-
-	const dispatch = createEventDispatcher<{
-		fontFamily: string;
-		fontStyle: string;
-		changeFont: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined };
-	}>();
-
-	let menuList: MenuList | undefined;
-
-	export let fontFamily: string;
-	export let fontStyle: string;
-	export let isStyle = false;
-	export let disabled = false;
-	export let tooltipLabel: string | undefined = undefined;
-	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-
-	let open = false;
-	let entries: MenuListEntry[] = [];
-	let activeEntry: MenuListEntry | undefined = undefined;
-	let minWidth = isStyle ? 0 : 300;
-
-	$: watchFont(fontFamily, fontStyle);
-
-	async function watchFont(..._: string[]) {
-		// We set this function's result to a local variable to avoid reading from `entries` which causes Svelte to trigger an update that results in an infinite loop
-		const newEntries = await getEntries();
-		entries = newEntries;
-		activeEntry = getActiveEntry(newEntries);
-	}
-
-	async function setOpen() {
-		open = true;
-
-		// Scroll to the active entry (the scroller div does not yet exist so we must wait for the component to render)
-		await tick();
-
-		if (activeEntry) {
-			const index = entries.indexOf(activeEntry);
-			menuList?.scrollViewTo(Math.max(0, index * 20 - 190));
-		}
-	}
-
-	function toggleOpen() {
-		if (!disabled) {
-			open = !open;
-
-			if (open) setOpen();
-		}
-	}
-
-	async function selectFont(newName: string) {
-		let family;
-		let style;
-
-		if (isStyle) {
-			dispatch("fontStyle", newName);
-
-			family = fontFamily;
-			style = newName;
-		} else {
-			dispatch("fontFamily", newName);
-
-			family = newName;
-			style = "Regular (400)";
-		}
-
-		const fontFileUrl = await fonts.getFontFileUrl(family, style);
-		dispatch("changeFont", { fontFamily: family, fontStyle: style, fontFileUrl });
-	}
-
-	async function getEntries(): Promise<MenuListEntry[]> {
-		const x = isStyle ? fonts.getFontStyles(fontFamily) : fonts.fontNames();
-		return (await x).map((entry: { name: string; url: URL | undefined }) => ({
-			value: entry.name,
-			label: entry.name,
-			font: entry.url,
-			action: () => selectFont(entry.name),
-		}));
-	}
-
-	function getActiveEntry(entries: MenuListEntry[]): MenuListEntry {
-		const selectedChoice = isStyle ? fontStyle : fontFamily;
-
-		return entries.find((entry) => entry.value === selectedChoice) as MenuListEntry;
-	}
-
-	onMount(async () => {
-		entries = await getEntries();
-
-		activeEntry = getActiveEntry(entries);
-	});
-</script>
-
-<!-- TODO: Combine this widget into the DropdownInput widget -->
-<LayoutRow class="font-input">
-	<LayoutRow
-		class="dropdown-box"
-		classes={{ disabled }}
-		styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
-		{tooltipLabel}
-		{tooltipDescription}
-		{tooltipShortcut}
-		tabindex={disabled ? -1 : 0}
-		on:click={toggleOpen}
-		data-floating-menu-spawner
-	>
-		<TextLabel class="dropdown-label">{activeEntry?.value || ""}</TextLabel>
-		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
-	</LayoutRow>
-	<MenuList
-		on:naturalWidth={({ detail }) => isStyle && (minWidth = detail)}
-		{activeEntry}
-		on:activeEntry={({ detail }) => (activeEntry = detail)}
-		{open}
-		on:open={({ detail }) => (open = detail)}
-		entries={[entries]}
-		minWidth={isStyle ? 0 : minWidth}
-		virtualScrollingEntryHeight={isStyle ? 0 : 20}
-		scrollableY={true}
-		bind:this={menuList}
-	/>
-</LayoutRow>
-
-<style lang="scss" global>
-	.font-input {
-		position: relative;
-
-		.dropdown-box {
-			align-items: center;
-			white-space: nowrap;
-			background: var(--color-1-nearblack);
-			height: 24px;
-			border-radius: 2px;
-
-			.dropdown-label {
-				margin: 0;
-				margin-left: 8px;
-				flex: 1 1 100%;
-			}
-
-			.dropdown-arrow {
-				margin: 6px 2px;
-				flex: 0 0 auto;
-			}
-
-			&:hover,
-			&.open {
-				background: var(--color-6-lowergray);
-
-				.text-label {
-					color: var(--color-f-white);
-				}
-			}
-
-			&.open {
-				border-radius: 2px 2px 0 0;
-			}
-
-			&.disabled {
-				background: var(--color-2-mildblack);
-
-				.text-label {
-					color: var(--color-8-uppergray);
-				}
-			}
-		}
-
-		.menu-list .floating-menu-container .floating-menu-content {
-			max-height: 400px;
-			padding: 4px 0;
-		}
-	}
-</style>

frontend/src/io-managers/fonts.ts

@@ -0,0 +1,44 @@
+import { type Editor } from "@graphite/editor";
+import { TriggerFontCatalogLoad, TriggerFontDataLoad } from "@graphite/messages";
+
+type ApiResponse = { family: string; variants: string[]; files: Record<string, string> }[];
+
+const FONT_LIST_API = "https://api.graphite.art/font-list";
+
+export function createFontsManager(editor: Editor) {
+	// Subscribe to process backend events
+	editor.subscriptions.subscribeJsMessage(TriggerFontCatalogLoad, async () => {
+		const response = await fetch(FONT_LIST_API);
+		const fontListResponse = (await response.json()) as { items: ApiResponse };
+		const fontListData = fontListResponse.items;
+
+		const catalog = fontListData.map((font) => {
+			const styles = font.variants.map((variant) => {
+				const weight = variant === "regular" || variant === "italic" ? 400 : parseInt(variant, 10);
+				const italic = variant.endsWith("italic");
+				const url = font.files[variant].replace("http://", "https://");
+
+				return { weight, italic, url };
+			});
+			return { name: font.family, styles };
+		});
+
+		editor.handle.onFontCatalogLoad(catalog);
+	});
+
+	editor.subscriptions.subscribeJsMessage(TriggerFontDataLoad, async (triggerFontDataLoad) => {
+		const { fontFamily, fontStyle } = triggerFontDataLoad.font;
+
+		try {
+			if (!triggerFontDataLoad.url) throw new Error("No URL provided for font data load");
+			const response = await fetch(triggerFontDataLoad.url);
+			const buffer = await response.arrayBuffer();
+			const data = new Uint8Array(buffer);
+
+			editor.handle.onFontLoad(fontFamily, fontStyle, data);
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.error("Failed to load font:", error);
+		}
+	});
+}

frontend/src/messages.ts

@@ -793,7 +793,7 @@ export class DisplayEditableTextbox extends JsMessage {
 	@Type(() => Color)
 	readonly color!: Color;
 
-	readonly url!: string;
+	readonly fontData!: ArrayBuffer;
 
 	readonly transform!: number[];
 
@@ -804,6 +804,10 @@ export class DisplayEditableTextbox extends JsMessage {
 	readonly align!: TextAlign;
 }
 
+export class DisplayEditableTextboxUpdateFontData extends JsMessage {
+	readonly fontData!: ArrayBuffer;
+}
+
 export class DisplayEditableTextboxTransform extends JsMessage {
 	readonly transform!: number[];
 }
@@ -865,9 +869,13 @@ export class Font {
 	fontStyle!: string;
 }
 
-export class TriggerFontLoad extends JsMessage {
+export class TriggerFontCatalogLoad extends JsMessage {}
+
+export class TriggerFontDataLoad extends JsMessage {
 	@Type(() => Font)
 	font!: Font;
+
+	url!: string;
 }
 
 export class TriggerVisitLink extends JsMessage {
@@ -998,13 +1006,14 @@ export function contrastingOutlineFactor(value: FillChoice, proximityColor: stri
 export type MenuListEntry = {
 	value: string;
 	label: string;
-	font?: URL;
+	font?: string;
 	icon?: IconName;
 	disabled?: boolean;
 	tooltipLabel?: string;
 	tooltipDescription?: string;
 	tooltipShortcut?: ActionShortcut;
 	children?: MenuListEntry[][];
+	childrenHash?: bigint;
 };
 
 export class CurveManipulatorGroup {
@@ -1036,6 +1045,8 @@ export class CurveInput extends WidgetProps {
 export class DropdownInput extends WidgetProps {
 	entries!: MenuListEntry[][];
 
+	entriesHash!: bigint;
+
 	selectedIndex!: number | undefined;
 
 	drawIcon!: boolean;
@@ -1046,6 +1057,8 @@ export class DropdownInput extends WidgetProps {
 
 	narrow!: boolean;
 
+	virtualScrolling!: boolean;
+
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
 
@@ -1062,25 +1075,6 @@ export class DropdownInput extends WidgetProps {
 	maxWidth!: number;
 }
 
-export class FontInput extends WidgetProps {
-	fontFamily!: string;
-
-	fontStyle!: string;
-
-	isStyle!: boolean;
-
-	disabled!: boolean;
-
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipLabel!: string | undefined;
-
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipDescription!: string | undefined;
-
-	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
-	tooltipShortcut!: ActionShortcut | undefined;
-}
-
 export class IconButton extends WidgetProps {
 	icon!: IconName;
 
@@ -1349,6 +1343,8 @@ export class TextButton extends WidgetProps {
 	tooltipShortcut!: ActionShortcut | undefined;
 
 	menuListChildren!: MenuListEntry[][];
+
+	menuListChildrenHash!: bigint;
 }
 
 export class BreadcrumbTrailButtons extends WidgetProps {
@@ -1449,7 +1445,6 @@ const widgetSubTypes = [
 	{ value: ColorInput, name: "ColorInput" },
 	{ value: CurveInput, name: "CurveInput" },
 	{ value: DropdownInput, name: "DropdownInput" },
-	{ value: FontInput, name: "FontInput" },
 	{ value: IconButton, name: "IconButton" },
 	{ value: ImageButton, name: "ImageButton" },
 	{ value: ImageLabel, name: "ImageLabel" },
@@ -1695,6 +1690,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	DisplayDialogDismiss,
 	DisplayDialogPanic,
 	DisplayEditableTextbox,
+	DisplayEditableTextboxUpdateFontData,
 	DisplayEditableTextboxTransform,
 	DisplayRemoveEditableTextbox,
 	SendUIMetadata,
@@ -1704,7 +1700,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerDisplayThirdPartyLicensesDialog,
 	TriggerExportImage,
 	TriggerFetchAndOpenDocument,
-	TriggerFontLoad,
+	TriggerFontCatalogLoad,
+	TriggerFontDataLoad,
 	TriggerImport,
 	TriggerLoadFirstAutoSaveDocument,
 	TriggerLoadPreferences,

frontend/src/state-providers/fonts.ts

@@ -1,115 +0,0 @@
-import { writable } from "svelte/store";
-
-import { type Editor } from "@graphite/editor";
-import { TriggerFontLoad } from "@graphite/messages";
-
-export function createFontsState(editor: Editor) {
-	// TODO: Do some code cleanup to remove the need for this empty store
-	const { subscribe } = writable({});
-
-	function createURL(font: string, weight: string): URL {
-		const url = new URL("https://fonts.googleapis.com/css2");
-		url.searchParams.set("display", "swap");
-		url.searchParams.set("family", `${font}:wght@${weight}`);
-		url.searchParams.set("text", font);
-
-		return url;
-	}
-
-	async function fontNames(): Promise<{ name: string; url: URL | undefined }[]> {
-		const pickPreviewWeight = (variants: string[]) => {
-			const weights = variants.map((variant) => Number(variant.match(/.* \((\d+)\)/)?.[1] || "NaN"));
-			const weightGoal = 400;
-			const sorted = weights.map((weight) => [weight, Math.abs(weightGoal - weight - 1)]);
-			sorted.sort(([_, a], [__, b]) => a - b);
-			return sorted[0][0].toString();
-		};
-		return (await loadFontList()).map((font) => ({ name: font.family, url: createURL(font.family, pickPreviewWeight(font.variants)) }));
-	}
-
-	async function getFontStyles(fontFamily: string): Promise<{ name: string; url: URL | undefined }[]> {
-		const font = (await loadFontList()).find((value) => value.family === fontFamily);
-		return font?.variants.map((variant) => ({ name: variant, url: undefined })) || [];
-	}
-
-	async function getFontFileUrl(fontFamily: string, fontStyle: string): Promise<string | undefined> {
-		const font = (await loadFontList()).find((value) => value.family === fontFamily);
-		const fontFileUrl = font?.files.get(fontStyle);
-		return fontFileUrl?.replace("http://", "https://");
-	}
-
-	function formatFontStyleName(fontStyle: string): string {
-		const isItalic = fontStyle.endsWith("italic");
-		const weight = fontStyle === "regular" || fontStyle === "italic" ? 400 : parseInt(fontStyle, 10);
-		let weightName = "";
-
-		let bestWeight = Infinity;
-		weightNameMapping.forEach((nameChecking, weightChecking) => {
-			if (Math.abs(weightChecking - weight) < bestWeight) {
-				bestWeight = Math.abs(weightChecking - weight);
-				weightName = nameChecking;
-			}
-		});
-
-		return `${weightName}${isItalic ? " Italic" : ""} (${weight})`;
-	}
-
-	let fontList: Promise<{ family: string; variants: string[]; files: Map<string, string> }[]> | undefined;
-
-	async function loadFontList(): Promise<{ family: string; variants: string[]; files: Map<string, string> }[]> {
-		if (fontList) return fontList;
-
-		fontList = new Promise<{ family: string; variants: string[]; files: Map<string, string> }[]>((resolve) => {
-			fetch(fontListAPI)
-				.then((response) => response.json())
-				.then((fontListResponse) => {
-					const fontListData = fontListResponse.items as { family: string; variants: string[]; files: Record<string, string> }[];
-					const result = fontListData.map((font) => {
-						const { family } = font;
-						const variants = font.variants.map(formatFontStyleName);
-						const files = new Map(font.variants.map((x) => [formatFontStyleName(x), font.files[x]]));
-						return { family, variants, files };
-					});
-
-					resolve(result);
-				});
-		});
-
-		return fontList;
-	}
-
-	// Subscribe to process backend events
-	editor.subscriptions.subscribeJsMessage(TriggerFontLoad, async (triggerFontLoad) => {
-		const url = await getFontFileUrl(triggerFontLoad.font.fontFamily, triggerFontLoad.font.fontStyle);
-		if (url) {
-			const response = await (await fetch(url)).arrayBuffer();
-			editor.handle.onFontLoad(triggerFontLoad.font.fontFamily, triggerFontLoad.font.fontStyle, url, new Uint8Array(response));
-		} else {
-			editor.handle.errorDialog("Failed to load font", `The font ${triggerFontLoad.font.fontFamily} with style ${triggerFontLoad.font.fontStyle} does not exist`);
-		}
-	});
-
-	return {
-		subscribe,
-		fontNames,
-		getFontStyles,
-		getFontFileUrl,
-	};
-}
-export type FontsState = ReturnType<typeof createFontsState>;
-
-const fontListAPI = "https://api.graphite.art/font-list";
-
-// From https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
-const weightNameMapping = new Map([
-	[100, "Thin"],
-	[200, "Extra Light"],
-	[300, "Light"],
-	[400, "Regular"],
-	[500, "Medium"],
-	[600, "Semi Bold"],
-	[700, "Bold"],
-	[800, "Extra Bold"],
-	[900, "Black"],
-	[950, "Extra Black"],
-]);

frontend/wasm/src/editor_api.rs

@@ -12,7 +12,7 @@ use editor::messages::input_mapper::utility_types::input_keyboard::ModifierKeys;
 use editor::messages::input_mapper::utility_types::input_mouse::{EditorMouseState, ScrollDelta};
 use editor::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use editor::messages::portfolio::document::utility_types::network_interface::ImportOrExport;
-use editor::messages::portfolio::utility_types::Platform;
+use editor::messages::portfolio::utility_types::{FontCatalog, FontCatalogFamily, Platform};
 use editor::messages::prelude::*;
 use editor::messages::tool::tool_messages::tool_prelude::WidgetId;
 use graph_craft::document::NodeId;
@@ -116,7 +116,6 @@ impl EditorHandle {
 	#[cfg(not(feature = "native"))]
 	fn dispatch<T: Into<Message>>(&self, message: T) {
 		// Process no further messages after a crash to avoid spamming the console
-
 		use crate::MESSAGE_BUFFER;
 		if EDITOR_HAS_CRASHED.load(Ordering::SeqCst) {
 			return;
@@ -330,21 +329,43 @@ impl EditorHandle {
 
 	/// Update the value of a given UI widget, but don't commit it to the history (unless `commit_layout()` is called, which handles that)
 	#[wasm_bindgen(js_name = widgetValueUpdate)]
-	pub fn widget_value_update(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
+	pub fn widget_value_update(&self, layout_target: JsValue, widget_id: u64, value: JsValue, resend_widget: bool) -> Result<(), JsValue> {
+		self.widget_value_update_helper(layout_target, widget_id, value, resend_widget)
+	}
+
+	/// Commit the value of a given UI widget to the history
+	#[wasm_bindgen(js_name = widgetValueCommit)]
+	pub fn widget_value_commit(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
+		self.widget_value_commit_helper(layout_target, widget_id, value)
+	}
+
+	/// Update the value of a given UI widget, and commit it to the history
+	#[wasm_bindgen(js_name = widgetValueCommitAndUpdate)]
+	pub fn widget_value_commit_and_update(&self, layout_target: JsValue, widget_id: u64, value: JsValue, resend_widget: bool) -> Result<(), JsValue> {
+		self.widget_value_commit_helper(layout_target.clone(), widget_id, value.clone())?;
+		self.widget_value_update_helper(layout_target, widget_id, value, resend_widget)?;
+		Ok(())
+	}
+
+	pub fn widget_value_update_helper(&self, layout_target: JsValue, widget_id: u64, value: JsValue, resend_widget: bool) -> Result<(), JsValue> {
 		let widget_id = WidgetId(widget_id);
 		match (from_value(layout_target), from_value(value)) {
 			(Ok(layout_target), Ok(value)) => {
 				let message = LayoutMessage::WidgetValueUpdate { layout_target, widget_id, value };
 				self.dispatch(message);
+
+				if resend_widget {
+					let resend_message = LayoutMessage::ResendActiveWidget { layout_target, widget_id };
+					self.dispatch(resend_message);
+				}
+
 				Ok(())
 			}
 			(target, val) => Err(Error::new(&format!("Could not update UI\nDetails:\nTarget: {target:?}\nValue: {val:?}")).into()),
 		}
 	}
 
-	/// Commit the value of a given UI widget to the history
-	#[wasm_bindgen(js_name = widgetValueCommit)]
-	pub fn widget_value_commit(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
+	pub fn widget_value_commit_helper(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
 		let widget_id = WidgetId(widget_id);
 		match (from_value(layout_target), from_value(value)) {
 			(Ok(layout_target), Ok(value)) => {
@@ -356,14 +377,6 @@ impl EditorHandle {
 		}
 	}
 
-	/// Update the value of a given UI widget, and commit it to the history
-	#[wasm_bindgen(js_name = widgetValueCommitAndUpdate)]
-	pub fn widget_value_commit_and_update(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
-		self.widget_value_commit(layout_target.clone(), widget_id, value.clone())?;
-		self.widget_value_update(layout_target, widget_id, value)?;
-		Ok(())
-	}
-
 	#[wasm_bindgen(js_name = loadPreferences)]
 	pub fn load_preferences(&self, preferences: Option<String>) {
 		let preferences = if let Some(preferences) = preferences {
@@ -562,15 +575,21 @@ impl EditorHandle {
 		Ok(())
 	}
 
+	/// The font catalog has been loaded
+	#[wasm_bindgen(js_name = onFontCatalogLoad)]
+	pub fn on_font_catalog_load(&self, catalog: JsValue) -> Result<(), JsValue> {
+		// Deserializing from TS type: `{ name: string; styles: { weight: number, italic: boolean, url: string }[] }[]`
+		let families = serde_wasm_bindgen::from_value::<Vec<FontCatalogFamily>>(catalog)?;
+		let message = PortfolioMessage::FontCatalogLoaded { catalog: FontCatalog(families) };
+		self.dispatch(message);
+
+		Ok(())
+	}
+
 	/// A font has been downloaded
 	#[wasm_bindgen(js_name = onFontLoad)]
-	pub fn on_font_load(&self, font_family: String, font_style: String, preview_url: String, data: Vec<u8>) -> Result<(), JsValue> {
-		let message = PortfolioMessage::FontLoaded {
-			font_family,
-			font_style,
-			preview_url,
-			data,
-		};
+	pub fn on_font_load(&self, font_family: String, font_style: String, data: Vec<u8>) -> Result<(), JsValue> {
+		let message = PortfolioMessage::FontLoaded { font_family, font_style, data };
 		self.dispatch(message);
 
 		Ok(())