@liiift-studio/sanity-font-manager 2.2.0

package/src/utils/updateFontPrices.js

@@ -0,0 +1,94 @@
+// Bulk-updates the price field across all font documents linked to a typeface
+
+/**
+ * Sets the same price on every font document referenced by a typeface.
+ *
+ * @param {Object} params
+ * @param {Object} params.client - Sanity client
+ * @param {string} params.title - Typeface title
+ * @param {Object} params.slug - Typeface slug object
+ * @param {string} params.inputPrice - New price value (will be coerced to Number)
+ * @param {string} params.doc_id - Document ID (used to detect draft state)
+ * @param {Function} params.setStatus
+ * @param {Function} params.setError
+ * @returns {Promise<Object>}
+ */
+export const updateFontPrices = async ({
+	client,
+	title,
+	slug,
+	inputPrice,
+	doc_id,
+	setStatus,
+	setError,
+}) => {
+	try {
+		if (!title) {
+			setStatus('Typeface needs a title');
+			setError(true);
+			console.error('Typeface needs title');
+			return { success: false, message: 'Typeface needs title' };
+		}
+
+		if (!slug?.current) {
+			setStatus('Typeface needs a slug');
+			setError(true);
+			console.error('Typeface needs slug');
+			return { success: false, message: 'Typeface needs slug' };
+		}
+
+		const price = Number(inputPrice);
+		if (isNaN(price)) {
+			setStatus('Invalid price value');
+			setError(true);
+			console.error('Invalid price value');
+			return { success: false, message: 'Invalid price value' };
+		}
+
+		setStatus('Fetching typeface document...');
+		const typeface = await client.fetch(
+			`*[_type == "typeface" && slug.current == $slug][0]`,
+			{ slug: slug.current }
+		);
+
+		if (!typeface) {
+			setStatus('Typeface not found');
+			setError(true);
+			console.error('Typeface not found');
+			return { success: false, message: 'Typeface not found' };
+		}
+
+		if (!typeface.styles?.fonts?.length) {
+			setStatus('No fonts found in typeface');
+			setError(true);
+			console.error('No fonts found in typeface');
+			return { success: false, message: 'No fonts found in typeface' };
+		}
+
+		const fontRefs = typeface.styles.fonts;
+		setStatus(`Updating prices for ${fontRefs.length} fonts...`);
+
+		let updatedCount = 0;
+		for (let i = 0; i < fontRefs.length; i++) {
+			try {
+				await client.patch(fontRefs[i]._ref).set({ price, sell: price > 0 }).commit();
+				updatedCount++;
+				setStatus(`Updated ${updatedCount}/${fontRefs.length} fonts...`);
+			} catch (err) {
+				console.error(`Error updating font ${fontRefs[i]._ref}:`, err);
+			}
+		}
+
+		const successMessage = `Successfully updated prices for ${updatedCount} fonts to $${price}`;
+		setStatus(successMessage);
+		console.log(successMessage);
+
+		return { success: true, message: successMessage, updatedCount };
+	} catch (err) {
+		const errorMessage = `Error: ${err.message}`;
+		console.error('Error updating font prices:', err);
+		setError(true);
+		setStatus(errorMessage);
+		return { success: false, message: errorMessage };
+	}
+};

package/src/utils/updateTypefaceDocument.js

@@ -0,0 +1,160 @@
+// Patches the parent typeface document's styles.fonts array with newly uploaded font references
+
+import { nanoid } from 'nanoid';
+
+/**
+ * Patches a typeface document (draft and published) with the new font references,
+ * subfamily structure, and preferred style derived from the upload batch.
+ *
+ * @param {string} doc_id - The Sanity document ID (may be a draft)
+ * @param {Object[]} fontRefs - New regular font references
+ * @param {Object[]} variableRefs - New variable font references
+ * @param {Object} subfamilies - Map of font ID → subfamily name
+ * @param {string[]} uniqueSubfamilies
+ * @param {Object[]} subfamiliesArray - Existing subfamilies array from the typeface
+ * @param {Object} preferredStyleRef - Existing preferred style reference
+ * @param {Object} newPreferredStyle - Candidate preferred style from the upload
+ * @param {Object} stylesObject - Existing typeface styles object
+ * @param {Object} client - Sanity client
+ * @param {Function} setStatus
+ * @param {Function} setError
+ */
+export const updateTypefaceDocument = async (
+	doc_id,
+	fontRefs,
+	variableRefs,
+	subfamilies,
+	uniqueSubfamilies,
+	subfamiliesArray,
+	preferredStyleRef,
+	newPreferredStyle,
+	stylesObject,
+	client,
+	setStatus,
+	setError,
+) => {
+	console.log('Updating typeface document with new fonts:', { fontRefs, variableRefs, subfamilies, uniqueSubfamilies });
+	setStatus('Updating typeface references...');
+
+	let patch = {
+		styles: {
+			fonts: stylesObject.fonts ? [...stylesObject.fonts, ...fontRefs] : [...fontRefs],
+			subfamilies: uniqueSubfamilies.length > 1 ? uniqueSubfamilies : [],
+			variableFont: stylesObject?.variableFont ? [...stylesObject.variableFont, ...variableRefs] : [...variableRefs],
+		},
+	};
+
+	setStatus('Organising font subfamilies...');
+	subfamiliesArray = subfamiliesArray || [];
+
+	// Create any missing subfamily groups
+	uniqueSubfamilies.forEach(subfamilyName => {
+		if (!subfamiliesArray.find(sf => sf.title === subfamilyName)) {
+			subfamiliesArray.push({
+				title: subfamilyName,
+				_key: nanoid(),
+				_type: 'object',
+				fonts: [],
+			});
+		}
+	});
+
+	// Associate fonts with their subfamily groups (skip VF fonts)
+	if (subfamiliesArray.length > 0) {
+		Object.entries(subfamilies).forEach(([id, subfamilyName]) => {
+			if (id.toLowerCase().includes('vf')) return;
+
+			const subfamilyIndex = subfamiliesArray.findIndex(sf => sf.title === subfamilyName);
+			if (subfamilyIndex !== -1) {
+				subfamiliesArray[subfamilyIndex].fonts.push({
+					_ref: id,
+					_key: nanoid(),
+					_type: 'reference',
+					_weak: true,
+				});
+			}
+		});
+
+		// Deduplicate references within each subfamily
+		subfamiliesArray = subfamiliesArray.map(subfamily => ({
+			...subfamily,
+			fonts: subfamily.fonts.filter((font, index, self) =>
+				index === self.findIndex(f => f._ref === font._ref)
+			),
+		}));
+	}
+
+	patch.styles.subfamilies = subfamiliesArray;
+
+	// Optionally update preferred style
+	await updatePreferredStyle(doc_id, preferredStyleRef, newPreferredStyle, patch, client);
+
+	console.log('doc_id: ', doc_id);
+	console.log('Typeface patch: ', patch);
+	console.log('New preferred style: ', newPreferredStyle);
+	console.log('SubfamiliesArray:', subfamiliesArray);
+
+	try {
+		await client.patch(doc_id).set(patch).commit();
+		console.log(`Updated document: ${doc_id}`);
+
+		if (doc_id.startsWith('drafts.')) {
+			await updatePublishedDocument(doc_id, patch, client);
+		}
+	} catch (err) {
+		console.error('Error updating document:', err.message);
+		setStatus('Error updating typeface');
+		setError(true);
+	}
+};
+
+/**
+ * Conditionally sets a new preferredStyle on the patch when the candidate has a higher weight.
+ * @param {string} doc_id
+ * @param {Object} preferredStyleRef
+ * @param {Object} newPreferredStyle
+ * @param {Object} patch
+ * @param {Object} client
+ */
+const updatePreferredStyle = async (doc_id, preferredStyleRef, newPreferredStyle, patch, client) => {
+	if (
+		preferredStyleRef?._ref &&
+		preferredStyleRef._ref !== '' &&
+		preferredStyleRef._ref !== null &&
+		newPreferredStyle._ref !== preferredStyleRef._ref
+	) {
+		// Parameterized — doc_id comes from Sanity's useFormValue but we parameterize defensively
+		const prefStyleResult = await client.fetch(
+			`*[_id == $docId]{ preferredStyle->{ weight, style, _id } }`,
+			{ docId: doc_id }
+		);
+		const prefStyle = prefStyleResult[0]?.preferredStyle;
+
+		if (!prefStyle?.weight || prefStyle === null || prefStyle.weight < newPreferredStyle.weight) {
+			patch.preferredStyle = {
+				_type: 'reference',
+				_ref: newPreferredStyle._ref,
+				_weak: true,
+			};
+		}
+	}
+};
+
+/**
+ * Applies the same patch to the published document if it exists.
+ * @param {string} doc_id - Draft document ID
+ * @param {Object} patch
+ * @param {Object} client
+ */
+const updatePublishedDocument = async (doc_id, patch, client) => {
+	const publishedId = doc_id.replace('drafts.', '');
+	// Parameterized to prevent injection from any draft ID edge cases
+	const publishedDoc = await client.fetch(`*[_id == $publishedId]`, { publishedId }).then(res => res[0]);
+
+	if (publishedDoc) {
+		await client.patch(publishedId).set(patch).commit();
+		console.log(`Updated published document: ${publishedId}`);
+	} else {
+		console.log(`No published document found for ${publishedId}, skipping`);
+	}
+};

package/src/utils/uploadFontFiles.js

@@ -0,0 +1,316 @@
+// Core batch upload orchestrator — uploads each format to Sanity, generates CSS and metadata, then creates or updates font documents
+
+import { nanoid } from 'nanoid';
+import generateCssFile from './generateCssFile';
+import generateFontData from './generateFontData';
+import { parseVariableFontInstances } from './parseVariableFontInstances';
+
+/**
+ * Uploads all font files to Sanity and creates/updates font documents.
+ * @param {Object} fontsObjects
+ * @param {Object} subfamilies
+ * @param {Object} client - Sanity client
+ * @param {string} inputPrice
+ * @param {Object} stylesObject - Existing typeface styles object
+ * @param {Function} setStatus
+ * @param {Function} setError
+ * @returns {Promise<Object>} fontRefs, variableRefs, failedFiles
+ */
+export const uploadFontFiles = async (
+	fontsObjects,
+	subfamilies,
+	client,
+	inputPrice,
+	stylesObject,
+	setStatus,
+	setError,
+) => {
+	let fontRefs = [];
+	let variableRefs = [];
+	let failedFiles = [];
+
+	const fontObjectKeys = Object.keys(fontsObjects);
+
+	// Upload files for each font
+	for (let i = 0; i < fontObjectKeys.length; i++) {
+		const id = fontObjectKeys[i];
+		const fontObject = fontsObjects[id];
+		const files = fontObject.files;
+		const fontKit = fontObject.fontKit;
+		let newFileInput = fontObject.fileInput;
+
+		fontObject.subfamily = subfamilies[id] ? subfamilies[id] : '';
+		fontObject.price = Number(inputPrice) ? Number(inputPrice) : 0;
+		if (fontObject.price > 0) fontObject.sell = true;
+
+		for (let j = 0; j < files.length; j++) {
+			const file = files[j];
+			const fileType = determineFileType(file);
+
+			console.log(`[${i + 1}/${fontObjectKeys.length}][${j + 1}/${files.length}] Uploading font file: ${fontObject._id}.${fileType}`);
+			setStatus(`[${i + 1}/${fontObjectKeys.length}][${j + 1}/${files.length}] Uploading font file: ${fontObject._id}.${fileType}`);
+
+			try {
+				const baseAsset = await client.assets.upload('file', file, { filename: fontObject._id + '.' + fileType });
+
+				newFileInput[fileType] = {
+					_type: 'file',
+					asset: { _ref: baseAsset._id, _type: 'reference' },
+				};
+
+				if (fileType === 'woff2') {
+					console.log(`[${i + 1}/${fontObjectKeys.length}][${j + 1}/${files.length}] Generating CSS for: ${fontObject.title}`);
+					setStatus(`[${i + 1}/${fontObjectKeys.length}][${j + 1}/${files.length}] Generating CSS for: ${fontObject.title}`);
+					newFileInput = await generateCssFile({
+						woff2File: file,
+						fileInput: newFileInput,
+						fontName: fontObject.title,
+						fileName: fontObject._id,
+						variableFont: fontObject.variableFont,
+						weight: fontObject.weight,
+						client: client,
+						style: fontObject.style,
+					});
+				}
+
+				if (fileType === 'ttf') {
+					console.log(`[${i + 1}/${fontObjectKeys.length}][${j + 1}/${files.length}] Generating font data for: ${fontObject.title}`);
+					setStatus(`[${i + 1}/${fontObjectKeys.length}][${j + 1}/${files.length}] Generating font data for: ${fontObject.title}`);
+					const metadata = await generateFontData({
+						fontId: fontObject._id,
+						url: baseAsset.url,
+						fontKit: fontKit,
+						client: client,
+						commit: false,
+					});
+					Object.assign(fontObject, metadata);
+				}
+			} catch (err) {
+				console.error('Error uploading font: ', fontObject.title, err.message);
+				setStatus('Error uploading font: ' + err.message);
+				setError(true);
+				failedFiles.push({ name: file.name, fk: fontKit });
+				continue;
+			}
+
+			fontObject.fileInput = newFileInput;
+			fontsObjects[id] = fontObject;
+		}
+	}
+
+	// Create or update Sanity documents
+	console.log('Creating/updating Sanity font documents:', fontsObjects);
+
+	for (let i = 0; i < fontObjectKeys.length; i++) {
+		const fontId = fontObjectKeys[i];
+		const font = fontsObjects[fontId];
+
+		const fontRef = await createOrUpdateFontDocument(font, client, setError);
+
+		if (fontRef) {
+			if (!font.variableFont) {
+				addToFontRefs(fontRef, font, fontRefs, stylesObject);
+			} else {
+				addToVariableRefs(fontRef, font, variableRefs, stylesObject);
+			}
+			console.log(`[${i + 1}/${fontObjectKeys.length}] ${fontRef._ref} created`);
+			setStatus(`[${i + 1}/${fontObjectKeys.length}] ${fontRef._ref} created`);
+		}
+	}
+
+	return { fontRefs, variableRefs, failedFiles };
+};
+
+/**
+ * Returns the file extension for a font file.
+ * @param {File} file
+ * @returns {string}
+ */
+const determineFileType = (file) => {
+	if (file.name.endsWith('.otf')) return 'otf';
+	if (file.name.endsWith('.ttf')) return 'ttf';
+	if (file.name.endsWith('.woff')) return 'woff';
+	if (file.name.endsWith('.woff2')) return 'woff2';
+	if (file.name.endsWith('.eot')) return 'eot';
+	if (file.name.endsWith('.svg')) return 'svg';
+	return '';
+};
+
+/**
+ * Creates a new font document or updates an existing one, returning its reference.
+ * @param {Object} font
+ * @param {Object} client
+ * @param {Function} setError
+ * @returns {Promise<Object|null>}
+ */
+const createOrUpdateFontDocument = async (font, client, setError) => {
+	try {
+		// Parameterized query prevents GROQ injection via font._id
+		const existingFont = await client.fetch(
+			`*[_type == 'font' && _id == $fontId]{
+				fileInput,
+				description,
+				metaData,
+				metrics,
+				opentypeFeatures,
+				characterSet,
+				subfamily,
+				scriptFileInput,
+				variableInstanceReferences
+			}`,
+			{ fontId: font._id }
+		).then(res => res[0]);
+
+		const { files, fontKit } = font;
+		delete font.files;
+		delete font.fontKit;
+		// Remove temp field used by preserveFileNames — must not be saved to Sanity
+		delete font.originalFilename;
+
+		if (font.variableFont && font.variableInstances) {
+			const instanceMappings = await parseVariableFontInstances(font, client);
+			if (instanceMappings.length > 0) {
+				font.variableInstanceReferences = instanceMappings;
+			}
+		}
+
+		let fontResponse;
+		if (existingFont) {
+			fontResponse = await updateExistingFont(font, existingFont, client);
+		} else {
+			fontResponse = await createNewFont(font, client);
+		}
+
+		return {
+			_key: nanoid(),
+			_type: 'reference',
+			_ref: fontResponse._id,
+			_weak: true,
+		};
+	} catch (e) {
+		console.error('Error creating font: ', font.title, font.subfamily, e);
+		setError(true);
+		return null;
+	}
+};
+
+/**
+ * Patches an existing font document, merging file references and preserving stored metadata.
+ * @param {Object} font
+ * @param {Object} existingFont
+ * @param {Object} client
+ * @returns {Promise<Object>}
+ */
+const updateExistingFont = async (font, existingFont, client) => {
+	if (existingFont.fileInput) {
+		const newFileInput = { ...font.fileInput };
+		Object.keys(existingFont.fileInput).forEach(key => {
+			if (!newFileInput[key]) newFileInput[key] = existingFont.fileInput[key];
+		});
+		font.fileInput = newFileInput;
+	}
+
+	font.metaData = !font?.metaData || Object.keys(font?.metaData || {}).length === 0
+		? existingFont?.metaData || {}
+		: font.metaData;
+	font.metrics = !font?.metrics || Object.keys(font?.metrics || {}).length === 0
+		? existingFont?.metrics || {}
+		: font.metrics;
+	font.opentypeFeatures = !font?.opentypeFeatures || Object.keys(font?.opentypeFeatures || {}).length === 0
+		? existingFont?.opentypeFeatures || {}
+		: font.opentypeFeatures;
+	font.characterSet = !font?.characterSet || Object.keys(font?.characterSet || {}).length === 0
+		? existingFont?.characterSet || {}
+		: font.characterSet;
+	font.scriptFileInput = existingFont?.scriptFileInput || {};
+
+	cleanMetadataValues(font);
+
+	if (font.variableFont && existingFont?.variableInstanceReferences &&
+		(!font.variableInstanceReferences || font.variableInstanceReferences.length === 0)) {
+		font.variableInstanceReferences = existingFont.variableInstanceReferences;
+	}
+
+	console.log('Updating existing font: ', font._id, font.title);
+
+	const patchObject = {
+		fileInput: font.fileInput,
+		subfamily: font.subfamily,
+		weight: font.weight,
+	};
+
+	if (font.variableInstanceReferences) {
+		patchObject.variableInstanceReferences = font.variableInstanceReferences;
+	}
+
+	return await client.patch(font._id).set(patchObject).commit();
+};
+
+/**
+ * Creates a new font document in Sanity.
+ * @param {Object} font
+ * @param {Object} client
+ * @returns {Promise<Object>}
+ */
+const createNewFont = async (font, client) => {
+	console.log('Creating new font: ', font._id, font.title);
+	if (font.metaData) cleanMetadataValues(font);
+
+	const newDocument = {
+		_key: nanoid(),
+		_id: font._id,
+		_type: 'font',
+		...font,
+	};
+
+	return await client.createOrReplace(newDocument);
+};
+
+/**
+ * Removes null metadata values and strips control characters from string values.
+ * @param {Object} font
+ */
+const cleanMetadataValues = (font) => {
+	if (!font.metaData) return;
+	Object.keys(font.metaData).forEach(key => {
+		if (font.metaData[key] == null) {
+			font.metaData[key] = '';
+		} else {
+			font.metaData[key] = font.metaData[key].replace(/[-]/g, '');
+		}
+	});
+};
+
+/**
+ * Adds a font reference to fontRefs if it's not already in the existing styles.
+ * @param {Object} fontRef
+ * @param {Object} font
+ * @param {Array} fontRefs
+ * @param {Object} stylesObject
+ */
+const addToFontRefs = (fontRef, font, fontRefs, stylesObject) => {
+	if (stylesObject.fonts && stylesObject.fonts.length > 0) {
+		const fontExists = stylesObject.fonts.findIndex(f => f._ref === fontRef._ref);
+		const inFontRefs = fontRefs.findIndex(f => f._ref === fontRef._ref);
+		if (fontExists === -1 && inFontRefs === -1) fontRefs.push(fontRef);
+	} else {
+		fontRefs.push(fontRef);
+	}
+};
+
+/**
+ * Adds a variable font reference to variableRefs if it's not already in the existing styles.
+ * @param {Object} fontRef
+ * @param {Object} font
+ * @param {Array} variableRefs
+ * @param {Object} stylesObject
+ */
+const addToVariableRefs = (fontRef, font, variableRefs, stylesObject) => {
+	if (stylesObject?.variableFont?.length) {
+		const vfExists = stylesObject.variableFont.findIndex(f => f._ref === fontRef._ref);
+		const inVariableRefs = variableRefs.findIndex(f => f._ref === fontRef._ref);
+		if (vfExists === -1 && inVariableRefs === -1 && font.variableFont) variableRefs.push(fontRef);
+	} else {
+		variableRefs.push(fontRef);
+	}
+};

package/src/utils/utils.js

@@ -0,0 +1,16 @@
+// Script variant constants (SCRIPTS, SCRIPTS_OBJECT) and HtmlDescription component for the supported script list
+
+import React from 'react'
+
+/** Renders children as-is; used for rich-text fields that return HTML strings */
+export const HtmlDescription = ({ children }) => {
+	return children || ''
+}
+
+/** Script variants available for this studio instance — comma-separated SANITY_STUDIO_SCRIPTS env var */
+export const SCRIPTS = (process.env.SANITY_STUDIO_SCRIPTS || '').split(',').map((script) => script.trim()).filter(Boolean);
+
+/** SCRIPTS as Sanity select option objects */
+export const SCRIPTS_OBJECT = SCRIPTS.map((script) => {
+	return {title: script[0].toUpperCase() + script.slice(1), value: script}
+});