Feat raw olx editing. TNL-10218 (#182)

* refactor: move CodeEditor to shared components and remove circular dependency

* feat: add code editor to problem editor

* fix: typo

* feat: add save function to raw olx editor and add highlighting

* feat: simplify and add tests to edit problem view

* feat: add tests to problem edit view

* fix: update raw editor tests

* fix: code editor tests

* fix: package-lock

* fix: lint

src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RawEditor renders as expected with default behavior 1`] = `
+<div
+  style={
+    Object {
+      "height": "600px",
+      "padding": "10px 30px",
+    }
+  }
+>
+  <Alert
+    variant="danger"
+  >
+    You are using the raw 
+    html
+     editor.
+  </Alert>
+  <injectIntl(ShimmedIntlComponent)
+    innerRef={
+      Object {
+        "current": Object {
+          "value": "Ref Value",
+        },
+      }
+    }
+    lang="html"
+    value="eDiTablE Text"
+  />
+</div>
+`;

src/editors/sharedComponents/RawEditor/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@edx/paragon';
+
+import CodeEditor from '../CodeEditor';
+
+function getValue(content) {
+  if (!content) { return null; }
+  if (typeof content === 'string') { return content; }
+  return content.data?.data;
+}
+
+export const RawEditor = ({
+  editorRef,
+  content,
+  lang,
+}) => {
+  const value = getValue(content);
+
+  return (
+    <div style={{ padding: '10px 30px', height: '600px' }}>
+      <Alert variant="danger">
+        You are using the raw {lang} editor.
+      </Alert>
+      { value ? (
+        <CodeEditor
+          innerRef={editorRef}
+          value={value}
+          lang={lang}
+        />
+      ) : null}
+
+    </div>
+  );
+};
+RawEditor.defaultProps = {
+  editorRef: null,
+  content: null,
+  lang: 'html',
+};
+RawEditor.propTypes = {
+  editorRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  content: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      data: PropTypes.shape({ data: PropTypes.string }),
+    }),
+  ]),
+  lang: PropTypes.string,
+};
+
+export default RawEditor;

src/editors/sharedComponents/RawEditor/index.test.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { RawEditor } from '.';
+
+describe('RawEditor', () => {
+  const props = {
+    editorRef: {
+      current: {
+        value: 'Ref Value',
+      },
+    },
+    content: { data: { data: 'eDiTablE Text' } },
+  };
+  test('renders as expected with default behavior', () => {
+    expect(shallow(<RawEditor {...props} />)).toMatchSnapshot();
+  });
+});