Custom CSS in TinyMCE

I am still trying to troubleshoot this issue. On occasion, the first time I select a paragraph and apply the second set of style_formats listed above, the paragraph is selected properly, and the CSS style is applied to it. This condition is hard to replicate. At first, I thought it may have been on initial activation of the plugin, or the first attempt to edit a post, but that doesn’t seem to be the case. Now, it seems that whatever paragraph in the text is selected, the CSS style is applied to the entire post, without regard to what was selected.

I forgot to include my editor-style.css sheet in my initial question:

/* Indented prose  */
p.prose {
  font-size: 120%;
  line-height: 1.4; 	
  text-indent: 30px;
  margin-bottom: 0px;
  color: #000000; 
  font-family: georgia, palatino, serif;
}

/* centered text  */
p.middle {
  font-size: 120%;
  line-height: 1.4; 	
  color: #000000; 
  text-align: center;
  margin-bottom: 0px;
  font-family: georgia, palatino, serif;
}

/* Unindented prose with paragraph spacing */
p.flatline {
  font-size: 120%;
  line-height: 1.4; 	
  margin-bottom: 0px;
  color: #000000; 
  font-family: georgia, palatino, serif;
}

I’ve done some more troubleshooting, working within my functions.php , making sure that there weren’t any conflicts. I still haven’t had any luck. If I make any changes to the functions,php , I either lose my fonts, or the plugin doesn’t work at all. Anyhow, here is my functions.php:

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'puremag'; // This is 'puremag' for the puremag theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function scanwp_buttons( $buttons ) {
    array_unshift( $buttons, 'fontselect' );
    array_unshift( $buttons, 'fontsizeselect' ); 
    return $buttons;
}
    
add_filter( 'mce_buttons_2', 'scanwp_buttons' );
   
function scanwp_font_size( $initArray ){
    $initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px";
    return $initArray;
}
   
add_filter( 'tiny_mce_before_init', 'scanwp_font_size' );

if ( is_admin() ) {
	include('tinymce-kit.php');
}

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
?>

Here is my TINYmce-kit.php:

<?php
/*
 * Helper functions for changing the visual editor appearance.
 *
 * version 0.1
 *
 * To enable: add this directory to your theme's folder,
 * edit editor-styles.css then add the user selectable class names
 * to the $classes array below and include this file in your theme's
 * functions.php file by adding 

	if ( is_admin() ) {
		include('tinymce-kit/tinymce-kit.php');
	}

 * If your theme has a settings page, you can also add an option so the user
 * can enable or disable this: if ( is_admin() && get_option('style_the_editor') ) ...
 *
 * @package TinyMCE Kit
 *
 * Released under the GPL v.2, http://www.gnu.org/copyleft/gpl.html
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 */

// Apply styles to the visual editor

add_filter('mce_css', 'mcekit_editor_style');
function mcekit_editor_style($url) {

	if ( !empty($url) )
		$url .= ',';

	// Change the path here if using different directories
	$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-styles.css';

	return $url;
}

// Change TinyMCE's settings

/**
 * Add the "Styles" drop-down in the editor.
 * This filter will add it to the beginning of the second row of buttons.
 * To add to another place see function wp_tiny_mce() in wp-admin/includes/post.php
 */
add_filter('mce_buttons_2', 'mcekit_editor_buttons');
function mcekit_editor_buttons($buttons) {

	array_unshift($buttons, 'styleselect');

	return $buttons;
}

/**
 * Set the CSS classes in the Styles drop-down in the editor.
 * These classes can be added by the users and should be defined in your main style.css file too.
 * This usually works well with "inline" type of styles like color, font, text-decoration, etc.
 */
add_filter('tiny_mce_before_init', 'mcekit_editor_settings');
function mcekit_editor_settings($settings) {

	if ( !empty($settings['theme_advanced_styles']) )
		$settings['theme_advanced_styles'] .= ';';
	else
		$settings['theme_advanced_styles'] = '';

	/**
	 * The format for this setting is "Name to display=class-name;".
	 * More info: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_styles
	 *
	 * To be able to translate the class names they can be set in a PHP array (to keep them readable)
	 * and then converted to TinyMCE's format. You will need to replace 'tinymce-kit' with your theme's textdomain.
	 */
	$classes = array(
		__('Prose', 'puremag') => '.prose',
		__('Middle', 'puremag') => '.middle',
		__('Flatline', 'puremag') => '.flatline'
	);

	$class_settings = '';
	foreach ( $classes as $name => $value ) {
		$class_settings .= "{$name}={$value};";
	}

	$settings['theme_advanced_styles'] .= trim($class_settings, '; ');

	return $settings;
}
?>