Use codeMirror editor for Custom CSS

[MAILPOET-2455]

assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import codemirror from 'codemirror';
+import 'codemirror/mode/css/css'; // Side effect
+import PropTypes from 'prop-types';
+
+const CodemirrorWrap = ({ options, value, onChange }) => {
+  const textArea = useRef(null);
+  const editor = useRef(null);
+
+  useEffect(() => {
+    editor.current = codemirror.fromTextArea(textArea.current, options);
+    editor.current.on('change', (doc) => onChange(doc.getValue()));
+    return () => {
+      if (editor.current) {
+        editor.current.toTextArea();
+      }
+    };
+  }, [options, onChange]);
+
+  return (
+    <textarea
+      ref={textArea}
+      name="name"
+      defaultValue={value}
+      autoComplete="off"
+    />
+  );
+};
+
+CodemirrorWrap.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.shape({
+    lineNumbers: PropTypes.bool.isRequired,
+    tabMode: PropTypes.string.isRequired,
+    matchBrackets: PropTypes.bool.isRequired,
+    theme: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default CodemirrorWrap;

assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx

@@ -1,24 +1,33 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   Panel,
   PanelBody,
-  TextareaControl,
 } from '@wordpress/components';
 import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
+import CodeMirror from './codemirror_wrap.jsx';
 
 export default () => {
   const styles = useSelect(
     (select) => select('mailpoet-form-editor').getFormStyles(),
     []
   );
+  const options = useRef({
+    lineNumbers: true,
+    tabMode: 'indent',
+    matchBrackets: true,
+    theme: 'neo',
+    mode: 'css',
+  });
+
   const { changeFormStyles } = useDispatch('mailpoet-form-editor');
+
   return (
     <Panel>
       <PanelBody title={MailPoet.I18n.t('customCss')} initialOpen={false}>
-        <TextareaControl
+        <CodeMirror
           value={styles}
-          rows={10}
+          options={options.current}
           onChange={changeFormStyles}
         />
       </PanelBody>