fix: font options alignment

src/views/app/detail-panel/edit/parts/text-editor-container.tsx

@@ -46,19 +46,17 @@ export const TextEditorContainer: FC<TextEditorContainerProps> = ({
 	);
 
 	const { prefs } = useUserSettings();
-
-	// TODO: DEFINE WHAT TO DO WITHT THOSE VALUES FALLBACKS
 	const fontSizesOptions = getFontSizesOptions();
 	const fontFamilyOptions = getFonts();
-	const defaultFontFamily: string =
-		prefs?.zimbraPrefHtmlEditorDefaultFontFamily ?? fontFamilyOptions[0];
-	const defaultFontSize: string = prefs?.zimbraPrefHtmlEditorDefaultFontSize ?? fontSizesOptions[0];
-	const defaultColor: string = prefs?.zimbraPrefHtmlEditorDefaultFontColor ?? 'black';
+
+	const defaultFontFamily = prefs?.zimbraPrefHtmlEditorDefaultFontFamily;
+	const defaultFontSize = prefs?.zimbraPrefHtmlEditorDefaultFontSize;
+	const defaultColor = prefs?.zimbraPrefHtmlEditorDefaultFontColor;
 
 	const fontSizesOptionsToString = fontSizesOptions.map((fontSize: string) => fontSize).join(' ');
-	const fontsOptionsToString = fontFamilyOptions
-		.map((font: { value: string }) => font.value)
-		.join('; ');
+	const fontsOptionsToString = fontFamilyOptions.map(
+		(font: { label: string; value: string }) => `${font.label}=${font.value};`
+	);
 
 	const composerCustomOptions = {
 		toolbar_sticky: true,

src/views/settings/components/utils.js

@@ -259,71 +259,71 @@ export const getFontSizesOptions = () => [
 export const getFonts = () => [
 	{
 		label: 'Andale Mono',
-		value: 'andale mono,times;'
+		value: 'andale mono, times'
 	},
 	{
 		label: 'Arial',
-		value: 'arial,helvetica,sans-serif;'
+		value: 'arial, helvetica, sans-serif'
 	},
 	{
 		label: 'Arial Black',
-		value: 'arial black,avant garde;'
+		value: 'arial black, avant garde'
 	},
 	{
 		label: 'Book Antiqua',
-		value: 'book antiqua,palatino;'
+		value: 'book antiqua, palatino'
 	},
 	{
 		label: 'Comic Sans MS',
-		value: 'comic sans ms,sans-serif;'
+		value: 'comic sans ms, sans-serif'
 	},
 	{
 		label: 'Courier New',
-		value: 'courier new,courier;'
+		value: 'courier new, courier'
 	},
 	{
 		label: 'Georgia',
-		value: 'georgia,palatino;'
+		value: 'georgia, palatino'
 	},
 	{
 		label: 'Helvetica',
-		value: 'helvetica;'
+		value: 'helvetica'
 	},
 	{
 		label: 'Impact',
-		value: 'impact,chicago;'
+		value: 'impact, chicago'
 	},
 	{
 		label: 'Symbol',
-		value: 'symbol;'
+		value: 'symbol'
 	},
 	{
 		label: 'Tahoma',
-		value: 'tahoma,arial,helvetica,sans-serif;'
+		value: 'tahoma, arial, helvetica, sans-serif'
 	},
 	{
 		label: 'Terminal',
-		value: 'terminal,monaco;'
+		value: 'terminal, monaco'
 	},
 	{
 		label: 'Times New Roman',
-		value: 'times new roman,times;'
+		value: 'times new roman, times'
 	},
 	{
 		label: 'Trebuchet MS',
-		value: 'trebuchet ms,geneva;'
+		value: 'trebuchet ms, geneva'
 	},
 	{
 		label: 'Verdana',
-		value: 'verdana,geneva;'
+		value: 'verdana, geneva'
 	},
 	{
 		label: 'Webdings',
-		value: 'webdings;'
+		value: 'webdings'
 	},
 	{
 		label: 'Wingdings',
-		value: 'wingdings,zapf dingbats;'
+		value: 'wingdings, zapf dingbats'
 	}
 ];
 

src/views/settings/compose-msg-settings.tsx

@@ -42,8 +42,6 @@ const ComposeMessage: FC<ComposeMessagesProps> = ({ settingsObj, updateSettings
 		value
 	}));
 
-	console.log('fontSizesOptionsArray: ', fontSizesOptionsArray);
-
 	const onColorChange = useCallback(
 		(value) => {
 			setColor(value);