From ca80a49b82a1009537f988d25d6c743d044042a7 Mon Sep 17 00:00:00 2001
From: Florian Demmer <florian@cycling74.com>
Date: Mon, 24 Jun 2024 18:37:56 +0100
Subject: [PATCH 1/2] stricter parameter meta JSON parsing to enforce a top
 level JSON object, not just a valid JSON string

---
 src/actions/instances.ts                | 20 ++++++------
 src/components/meta/metaEditorModal.tsx | 42 +++++++++++--------------
 src/lib/util.ts                         | 25 ++++++++++++++-
 src/models/parameter.ts                 | 13 +++++---
 4 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/src/actions/instances.ts b/src/actions/instances.ts
index 9b197094..26d27b3f 100644
--- a/src/actions/instances.ts
+++ b/src/actions/instances.ts
@@ -304,18 +304,16 @@ export const clearParameterMidiMappingOnRemote = (id: InstanceStateRecord["id"],
 		const param = instance.parameters.get(paramId);
 		if (!param) return;
 
-		const meta = param.getParsedMeta();
-		if (typeof meta === "object" && !Array.isArray(meta)) {
-			delete meta.midi;
-			const message = {
-				address: `${param.path}/meta`,
-				args: [
-					{ type: "s", value: JSON.stringify(meta) }
-				]
-			};
+		const meta = param.getParsedMetaObject();
+		delete meta.midi;
+		const message = {
+			address: `${param.path}/meta`,
+			args: [
+				{ type: "s", value: JSON.stringify(meta) }
+			]
+		};
 
-			oscQueryBridge.sendPacket(writePacket(message));
-		}
+		oscQueryBridge.sendPacket(writePacket(message));
 	};
 
 export const setInstanceMessagePortMetaOnRemote = (_instance: InstanceStateRecord, port: MessagePortRecord, value: string): AppThunk =>
diff --git a/src/components/meta/metaEditorModal.tsx b/src/components/meta/metaEditorModal.tsx
index f290501e..80cece7a 100644
--- a/src/components/meta/metaEditorModal.tsx
+++ b/src/components/meta/metaEditorModal.tsx
@@ -4,8 +4,9 @@ import { useIsMobileDevice } from "../../hooks/useIsMobileDevice";
 import { faCode, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { modals } from "@mantine/modals";
-import { AnyJson } from "../../lib/types";
+import { JsonMap } from "../../lib/types";
 import { MetadataScope } from "../../lib/constants";
+import { parseParamMetaJSONString } from "../../lib/util";
 
 export type MetaEditorModalProps = {
 	name: string;
@@ -125,13 +126,12 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 				onConfirm: () => {
 					setValue(meta);
 					setHasChanges(false);
+
 					try {
-						if (meta) {
-							JSON.parse(meta); // ensure valid
-						}
+						if (meta) parseParamMetaJSONString(meta); // ensure valid
 						setError(undefined);
-					} catch (err) {
-						setError(new Error("Invalid JSON."));
+					} catch (err: unknown) {
+						setError(err instanceof Error ? err : new Error("Invalid JSON format."));
 					}
 				}
 			});
@@ -139,10 +139,10 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 			setValue(meta);
 			setHasChanges(false);
 			try {
-				JSON.parse(meta); // ensure valid
+				parseParamMetaJSONString(meta); // ensure valid
 				setError(undefined);
-			} catch (err) {
-				setError(new Error("Invalid JSON."));
+			} catch (err: unknown) {
+				setError(err instanceof Error ? err : new Error("Invalid JSON format."));
 			}
 		}
 	}, [setValue, hasChanges, setHasChanges, meta, setError]);
@@ -151,12 +151,10 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 		if (error) {
 			try {
 				const v = e.currentTarget.value;
-				if (v) {
-					JSON.parse(v); // ensure valid
-				}
+				if (v) parseParamMetaJSONString(v); // ensure valid
 				setError(undefined);
-			} catch (err) {
-				setError(new Error("Invalid JSON."));
+			} catch (err: unknown) {
+				setError(err instanceof Error ? err : new Error("Invalid JSON format."));
 			}
 		}
 		setValue(e.currentTarget.value);
@@ -166,25 +164,23 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 	const onInputBlur = useCallback(() => {
 		try {
 			if (value) {
-				const j: AnyJson = JSON.parse(value); // ensure valid
+				const j: JsonMap = parseParamMetaJSONString(value); // ensure valid
 				setValue(JSON.stringify(j, null, 2));
 			}
 			setError(undefined);
-		} catch (err) {
-			setError(new Error("Invalid JSON."));
+		} catch (err: unknown) {
+			setError(err instanceof Error ? err : new Error("Invalid JSON format."));
 		}
 	}, [value, setError, setValue]);
 
 	const onSaveValue = useCallback((e: FormEvent) => {
 		e.preventDefault();
 		try {
-			if (value) {
-				JSON.parse(value); // ensure valid
-			}
+			if (value) parseParamMetaJSONString(value); // ensure valid
 			setHasChanges(false);
 			onSaveMeta(value);
-		} catch (err) {
-			setError(new Error("Invalid JSON."));
+		} catch (err: unknown) {
+			setError(err instanceof Error ? err : new Error("Invalid JSON format."));
 		}
 	}, [setError, setHasChanges, onSaveMeta, value]);
 
@@ -238,7 +234,7 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 							<Stack gap="md">
 								<Textarea
 									label="Metadata"
-									description="Metadata in JSON format"
+									description="Metadata in JSON object format"
 									autosize
 									minRows={ 10 }
 									onChange={ onInputChange }
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 9d274109..0510e1f7 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -1,5 +1,5 @@
 import { KeyboardEvent } from "react";
-import { OSCQueryStringValueRange, OSCQueryValueRange } from "./types";
+import { AnyJson, JsonMap, OSCQueryStringValueRange, OSCQueryValueRange } from "./types";
 
 export const sleep = (t: number): Promise<void> => new Promise(resolve => setTimeout(resolve, t));
 
@@ -36,3 +36,26 @@ export const formatFileSize = (size: number): string => {
 	const exp = Math.floor(Math.log(size) / Math.log(1000));
 	return (size / Math.pow(1000, exp)).toFixed(exp >= 2 ? 2 : 0) + " " + fileSizeUnits[exp];
 };
+
+export const parseParamMetaJSONString = (v: string): JsonMap => {
+	if (!v?.length) return {};
+
+	let parsed: AnyJson;
+	try {
+		parsed = JSON.parse(v);
+	} catch (err) {
+		throw new Error("Invalid JSON syntax.");
+	}
+	if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error("Invalid Meta JSON format. Meta is expected to be a JSON object.");
+
+	return parsed;
+};
+
+export const validateParamMetaJSONString = (v: string): boolean => {
+	try {
+		parseParamMetaJSONString(v);
+		return true;
+	} catch (err) {
+		return false;
+	}
+};
diff --git a/src/models/parameter.ts b/src/models/parameter.ts
index 10d0612a..a408e727 100644
--- a/src/models/parameter.ts
+++ b/src/models/parameter.ts
@@ -1,5 +1,6 @@
 import { Record as ImmuRecord } from "immutable";
 import { AnyJson, JsonMap, OSCQueryRNBOInstanceParameterInfo, OSCQueryRNBOInstanceParameterValue } from "../lib/types";
+import { parseParamMetaJSONString } from "../lib/util";
 
 export type ParameterRecordProps = {
 	enumVals: Array<string | number>;
@@ -96,23 +97,25 @@ export class ParameterRecord extends ImmuRecord<ParameterRecordProps>({
 
 	// get parsed meta but if it isn't a map, return an empty map
 	public getParsedMetaObject(): JsonMap {
-		const meta = this.getParsedMeta();
-		if (typeof meta !== "object") {
+		try {
+			return parseParamMetaJSONString(this.meta); // ensure valid
+		} catch (err) {
 			return {};
 		}
-		return meta as JsonMap;
 	}
 
 	public setMeta(value: string): ParameterRecord {
 		// detect midi mapping
 		let isMidiMapped = false;
+		let j: JsonMap = {};
 		try {
 			// detection simply looks for a 'midi' entry in the meta
-			const j = JSON.parse(value);
-			isMidiMapped = typeof j.midi === "object";
+			j = parseParamMetaJSONString(value);
 		} catch {
 			// ignore
 		}
+
+		isMidiMapped = typeof j.midi === "object";
 		return this.set("meta", value).set("isMidiMapped", isMidiMapped);
 	}
 

From da8085e8c4788ef9b1a99fa049780f127e479161 Mon Sep 17 00:00:00 2001
From: Florian Demmer <florian@cycling74.com>
Date: Mon, 24 Jun 2024 18:48:10 +0100
Subject: [PATCH 2/2] monospace font for meta editor

---
 src/components/meta/metaEditorModal.module.css |  3 +++
 src/components/meta/metaEditorModal.tsx        |  2 ++
 src/components/page/theme.tsx                  | 13 +++++++++++--
 src/pages/_app.tsx                             |  5 +++--
 4 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/components/meta/metaEditorModal.module.css

diff --git a/src/components/meta/metaEditorModal.module.css b/src/components/meta/metaEditorModal.module.css
new file mode 100644
index 00000000..fe9601cc
--- /dev/null
+++ b/src/components/meta/metaEditorModal.module.css
@@ -0,0 +1,3 @@
+.textArea {
+	font-family: var(--mantine-font-family-monospace);
+}
diff --git a/src/components/meta/metaEditorModal.tsx b/src/components/meta/metaEditorModal.tsx
index 80cece7a..6295ebe3 100644
--- a/src/components/meta/metaEditorModal.tsx
+++ b/src/components/meta/metaEditorModal.tsx
@@ -7,6 +7,7 @@ import { modals } from "@mantine/modals";
 import { JsonMap } from "../../lib/types";
 import { MetadataScope } from "../../lib/constants";
 import { parseParamMetaJSONString } from "../../lib/util";
+import classes from "./metaEditorModal.module.css";
 
 export type MetaEditorModalProps = {
 	name: string;
@@ -241,6 +242,7 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 									value={ value }
 									error={ error?.message }
 									onBlur={ onInputBlur }
+									classNames={{ input: classes.textArea }}
 								/>
 								<Group justify="flex-end">
 									<Button.Group>
diff --git a/src/components/page/theme.tsx b/src/components/page/theme.tsx
index bf4a9299..a54bd745 100644
--- a/src/components/page/theme.tsx
+++ b/src/components/page/theme.tsx
@@ -6,11 +6,20 @@ import { RootStateType } from "../../lib/store";
 import { getAppSetting } from "../../selectors/settings";
 import { AppSetting } from "../../models/settings";
 
-export const PageTheme: FunctionComponent<PropsWithChildren & { fontFamily: string; } > = ({ children, fontFamily }) => {
+export type PageThemeProps = PropsWithChildren & {
+	fontFamily: string;
+	fontFamilyMonospace: string;
+};
+
+export const PageTheme: FunctionComponent<PageThemeProps> = ({
+	children,
+	fontFamily,
+	fontFamilyMonospace
+}) => {
 
 	const colorScheme = useAppSelector((state: RootStateType) => getAppSetting(state, AppSetting.colorScheme).value as "light" | "dark");
 	return (
-		<MantineProvider theme={{ ...rnboTheme, fontFamily }} forceColorScheme={ colorScheme } >
+		<MantineProvider theme={{ ...rnboTheme, fontFamily, fontFamilyMonospace }} forceColorScheme={ colorScheme } >
 			{ children }
 		</MantineProvider>
 	);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b50c7d92..0a43b3f1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,8 +3,9 @@ import Head from "next/head";
 import React, { useEffect } from "react";
 import { Provider } from "react-redux";
 
-import { Lato as lato } from "next/font/google";
+import { Lato as lato, Ubuntu_Mono as ubuntuMono  } from "next/font/google";
 const latoFont = lato({ subsets: ["latin-ext"], weight: ["300", "400", "700", "900"], style: ["normal", "italic"] });
+const ubuntuMonoFont = ubuntuMono({display: "block",  subsets: ["latin-ext"], weight: ["400"] });
 
 
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -49,7 +50,7 @@ function App({ Component, pageProps }: AppProps) {
 			</style>
 			<Provider store={store}>
 				<PageSettings>
-					<PageTheme fontFamily={ latoFont.style.fontFamily } >
+					<PageTheme fontFamily={ latoFont.style.fontFamily } fontFamilyMonospace={ ubuntuMonoFont.style.fontFamily } >
 						<ModalsProvider>
 							<Head>
 								<title>RNBO</title>