Fixed CodeMirror editor autoresizing

Author: sheabunge

Gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
 
 			css: {
 				files: ['css/**/*.scss'],
-				tasks: ['css']
+				tasks: ['postcss', 'csso']
 			}
 		},
 
@@ -56,7 +56,7 @@ module.exports = function(grunt) {
 					'css/min/tagit.css': [
 						'js/vendor/jquery.tagit.css',
 						'js/vendor/tagit.ui-zendesk.css'
-					]rm
+					]
 				}
 			}
 		},

css/edit.scss

@@ -41,19 +41,12 @@ ul.tagit {
  */
 .CodeMirror {
 	width: 100%;
-	height: auto;
-	min-height: 300px;
-
+	height: auto !important;
 	border: 1px solid #dfdfdf;
 	border-radius: 3px;
 	background-color: #fff;
 }
 
-.CodeMirror-scroll {
-	overflow-x: auto;
-	overflow-y: hidden;
-}
-
 .CodeMirror-sizer {
 	min-height: 300px !important;
 }

css/manage.scss

@@ -2,13 +2,13 @@
  * Custom styling for the snippets table
  */
 
-.column-name > a {
+%icon-after {
+	padding-left: 5px;
+	font-family: "dashicons";
+	vertical-align: top;
+}
 
-	%icon-after {
-		padding-left: 5px;
-		font-family: "dashicons";
-		vertical-align: top;
-	}
+.column-name > a {
 
 	.admin-scope &:after {
 		@extend %icon-after;

css/settings.scss

@@ -4,5 +4,5 @@
 }
 
 #code_snippets_editor_preview .CodeMirror {
-	height: 200px;
+	height: auto;
 }

package.json

@@ -9,7 +9,6 @@
   },
   "devDependencies": {
     "grunt": "^0.4.5",
-    "grunt-autoprefixer": "^3.0.3",
     "grunt-contrib-clean": "^0.7.0",
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-imagemin": "^1.0.0",

php/settings/editor-preview.php

@@ -88,7 +88,9 @@ function example_custom_admin_footer_text( \$text ) {
 	return 'Thank you for visiting <a href=\"' . get_home_url() . '\">' . get_bloginfo( 'name' ) . '</a>.';
 }
 
-add_filter( 'admin_footer_text', 'example_custom_admin_footer_text' );";
+add_filter( 'admin_footer_text', 'example_custom_admin_footer_text' );
+
+";
 
 	$atts = array(
 		'mode' => 'text/x-php',
@@ -104,7 +106,10 @@ function example_custom_admin_footer_text( \$text ) {
 		'use strict';
 
 		// Load CodeMirror
-		var atts = <?php echo code_snippets_get_editor_atts( $atts, true ); ?>;
+		var atts = [];
+		atts = <?php echo code_snippets_get_editor_atts( $atts, true ); ?>;
+		atts['viewportMargin'] = Infinity;
+
 		var editor = CodeMirror(document.getElementById('code_snippets_editor_preview'), atts);
 
 		// Dynamically change editor settings

php/views/edit.php

@@ -54,7 +54,9 @@
 			<?php _e( 'Code', 'code-snippets' ); ?>
 		</label></h3>
 
-		<textarea id="snippet_code" name="snippet_code" rows="20" spellcheck="false" style="font-family: monospace; width: 100%;"><?php echo esc_textarea( $snippet->code ); ?></textarea>
+		<textarea id="snippet_code" name="snippet_code" rows="200" spellcheck="false" style="font-family: monospace; width: 100%;"><?php
+			echo esc_textarea( $snippet->code );
+			?></textarea>
 
 		<?php
 		/* Allow plugins to add fields and content to this page */
@@ -145,10 +147,13 @@
  */
 (function() {
 
-	var atts = <?php
+	var atts = [];
+	atts = <?php
 		$atts = array( 'mode' => 'text/x-php' );
 		echo code_snippets_get_editor_atts( $atts, true );
 	?>;
+	atts['viewportMargin'] = Infinity;
+
 	CodeMirror.fromTextArea(document.getElementById('snippet_code'), atts);
 })();
 </script>