Add default options for codemirror wrap

[MAILPOET-2455]

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

@@ -31,12 +31,22 @@ CodemirrorWrap.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   options: PropTypes.shape({
-    lineNumbers: PropTypes.bool.isRequired,
+    lineNumbers: PropTypes.bool,
-    tabMode: PropTypes.string.isRequired,
+    tabMode: PropTypes.string,
-    matchBrackets: PropTypes.bool.isRequired,
+    matchBrackets: PropTypes.bool,
-    theme: PropTypes.string.isRequired,
+    theme: PropTypes.string,
-    mode: PropTypes.string.isRequired,
+    mode: PropTypes.string,
-  }).isRequired,
+  }),
+};
+
+CodemirrorWrap.defaultProps = {
+  options: {
+    lineNumbers: true,
+    tabMode: 'indent',
+    matchBrackets: true,
+    theme: 'neo',
+    mode: 'css',
+  },
 };
 
 export default CodemirrorWrap;

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import {
   Panel,
   PanelBody,
@@ -12,24 +12,13 @@ export default () => {
     (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}>
-        <CodeMirror
+        <CodeMirror value={styles} onChange={changeFormStyles} />
-          value={styles}
-          options={options.current}
-          onChange={changeFormStyles}
-        />
       </PanelBody>
     </Panel>
   );