Added real-time font-size change inside the code editor preview, also moved font-size to the end of settings list since editor preview is rendering it in real time

Author: CarolinaOP

src/js/services/settings/editor-preview.ts

@@ -41,7 +41,14 @@ export const handleEditorPreviewUpdates = () => {
 			})()
 
 			if (null !== value) {
-				editor?.setOption(opt, value)
+				if ('font_size' === setting.name) {
+					const codeElement = document.querySelector('.CodeMirror-code')
+					if (codeElement && codeElement instanceof HTMLElement) {
+						codeElement.style.fontSize = `${value}px`
+					}
+				} else {
+					editor?.setOption(opt, value)
+				}
 			}
 		})
 	}

src/php/settings/settings-fields.php

@@ -162,15 +162,6 @@ function get_settings_fields(): array {
 			'codemirror' => 'indentUnit',
 			'min'        => 0,
 		],
-		'font_size'                   => [
-			'name'       => __( 'Font Size', 'code-snippets' ),
-			'type'       => 'number',
-			'desc'       => __( 'The font size for the code editor.', 'code-snippets' ),
-			'label'      => _x( 'px', 'unit', 'code-snippets' ),
-			'codemirror' => 'fontSize',
-			'min'        => 8,
-			'max'        => 24,
-		],
 		'wrap_lines'                  => [
 			'name'       => __( 'Wrap Lines', 'code-snippets' ),
 			'type'       => 'checkbox',
@@ -225,6 +216,14 @@ function get_settings_fields(): array {
 			'options'    => get_editor_theme_list(),
 			'codemirror' => 'theme',
 		],
+		'font_size'                   => [
+			'name'       => __( 'Code Editor Font Size', 'code-snippets' ),
+			'type'       => 'number',
+			'label'      => _x( 'px', 'unit', 'code-snippets' ),
+			'codemirror' => 'fontSize',
+			'min'        => 8,
+			'max'        => 28,
+		],
 	];
 
 	$fields = apply_filters( 'code_snippets_settings_fields', $fields );