perf: remove CodeMirror to reduce bundle size & speed

package.json

@@ -39,9 +39,7 @@
 		"url": "https://github.com/Automattic/newspack-newsletters/issues"
 	},
 	"dependencies": {
-		"@uiw/react-codemirror": "^3.2.10",
 		"classnames": "^2.5.1",
-		"csslint": "^1.0.5",
 		"mjml-browser": "^4.15.3",
 		"newspack-components": "^3.0.0",
 		"qs": "^6.13.0"

src/newsletter-editor/styling/index.js

@@ -3,37 +3,19 @@
 /**
  * WordPress dependencies
  */
+import { PlainText } from '@wordpress/block-editor';
 import { compose, useInstanceId } from '@wordpress/compose';
 import { ColorPicker, BaseControl, Panel, PanelBody, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import SelectControlWithOptGroup from '../../components/select-control-with-optgroup/';
 
-/**
- * External dependencies
- */
-import { CSSLint } from 'csslint';
-import CodeMirror from '@uiw/react-codemirror';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import 'codemirror/mode/css/css';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import 'codemirror/addon/lint/lint';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import 'codemirror/addon/lint/lint.css';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import 'codemirror/addon/lint/css-lint';
-
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-/**
- * Add CSSLint to global scope for CodeMirror.
- */
-window.CSSLint = window.CSSLint || CSSLint;
-
 const fontOptgroups = [
 	{
 		label: __( 'Sans Serif', 'newspack-newsletters' ),
@@ -264,18 +246,12 @@ export const Styling = compose( [
 						) }
 						hideLabelFromVision
 					>
-						<CodeMirror
+						<PlainText
 							className="components-textarea-control__input"
 							value={ customCss }
-							height={ 250 }
-							onChange={ instance => editPost( { meta: { custom_css: instance.getValue() } } ) }
-							options={ {
-								gutters: [ 'CodeMirror-lint-markers' ],
-								height: 'auto',
-								indentWithTabs: true,
-								mode: 'css',
-								lint: true,
-							} }
+							onChange={ content => editPost( { meta: { custom_css: content } } ) }
+							aria-label={ __( 'Custom CSS', 'newspack-newsletters' ) }
+							placeholder={ __( 'Write custom CSS…', 'newspack-newsletters' ) }
 						/>
 					</BaseControl>
 				</PanelRow>

src/newsletter-editor/styling/style.scss

@@ -26,8 +26,28 @@
 		.components-base-control {
 			max-width: 100%;
 		}
-		.CodeMirror {
-			border: 1px solid wp-colors.$gray-700;
+		.block-editor-plain-text {
+			background: #fff !important;
+			border: 1px solid #1e1e1e !important;
+			border-radius: 2px !important;
+			box-shadow: none !important;
+			box-sizing: border-box;
+			color: #1e1e1e !important;
+			direction: ltr;
+			font-family: Menlo, Consolas, monaco, monospace !important;
+			font-size: 16px !important;
+			max-height: 250px;
+			padding: 12px !important;
+		}
+		@media (min-width: 600px) {
+			.block-editor-plain-text {
+				font-size: 13px !important;
+			}
+		}
+		.block-editor-plain-text:focus {
+			border-color: var(--wp-admin-theme-color) !important;
+			box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+			outline: 2px solid #0000 !important;
 		}
 	}
 }