Merge pull request #246 from codesnippetspro/feat--Adjustable-font-size-to-code-editor

Feat/ Adjustable font size to code editor

Author: sheabunge

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/editor.php

@@ -66,6 +66,13 @@ function enqueue_code_editor( string $type, array $extra_atts = [] ) {
 		$atts[ $number_att ] = intval( $atts[ $number_att ] );
 	}
 
+	// Remove fontSize from the options and add it as an inline style.
+	if ( isset( $atts['fontSize'] ) ) {
+		$font_size = intval( $atts['fontSize'] );
+		unset( $atts['fontSize'] );
+		wp_add_inline_style( 'code-editor', ".CodeMirror { font-size: {$font_size}px !important; }" );
+	}
+
 	wp_enqueue_code_editor(
 		[
 			'type'       => $modes[ $type ],

src/php/settings/settings-fields.php

@@ -37,6 +37,7 @@ function get_default_settings(): array {
 			'indent_with_tabs'            => true,
 			'tab_size'                    => 4,
 			'indent_unit'                 => 4,
+			'font_size'                   => 14,
 			'wrap_lines'                  => true,
 			'code_folding'                => true,
 			'line_numbers'                => true,
@@ -161,12 +162,21 @@ function get_settings_fields(): array {
 			'codemirror' => 'indentUnit',
 			'min'        => 0,
 		],
+		'font_size'                   => [
+			'name'       => __( 'Font Size', 'code-snippets' ),
+			'type'       => 'number',
+			'label'      => _x( 'px', 'unit', 'code-snippets' ),
+			'codemirror' => 'fontSize',
+			'min'        => 8,
+			'max'        => 28,
+		],
 		'wrap_lines'                  => [
 			'name'       => __( 'Wrap Lines', 'code-snippets' ),
 			'type'       => 'checkbox',
 			'label'      => __( 'Soft-wrap long lines of code instead of horizontally scrolling.', 'code-snippets' ),
 			'codemirror' => 'lineWrapping',
 		],
+
 		'code_folding'                => [
 			'name'       => __( 'Code Folding', 'code-snippets' ),
 			'type'       => 'checkbox',