Lk/text editor (#17)

* chore: add react query dev tools

* chore: add tinyMCE skins and theme from lms

* feat: add text editor

* chore: remove id from editor

* chore: update test

* chore: most of the code on tinyMCE except skins and themes

* chore: remove custom default skins and themes

Author: leangseu-edx

package-lock.json

@@ -47,6 +47,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@tanstack/react-query": "^4.29.25",
+    "@tanstack/react-query-devtools": "^4.32.1",
     "@tinymce/tinymce-react": "3.8.4",
     "classnames": "^2.3.2",
     "core-js": "3.31.1",

package.json

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Editor } from '@tinymce/tinymce-react';
+import 'tinymce/tinymce.min';
+import 'tinymce/icons/default';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/image';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.min.css';
+
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  value: 'value',
+});
+
+const RichTextEditor = ({
+  // id,
+  initialValue,
+  disabled,
+  optional,
+}) => {
+  const [value, setValue] = useKeyedState(stateKeys.value, initialValue);
+  const { formatMessage } = useIntl();
+
+  const extraConfig = disabled ? {
+    toolbar: false,
+    readonly: 1,
+  } : {
+    // eslint-disable-next-line max-len
+    toolbar: 'formatselect | bold italic underline | link blockquote image | numlist bullist outdent indent | strikethrough | code | undo redo',
+  };
+
+  return (
+    <div className="form-group">
+      <label htmlFor="rich-text-response">
+        {formatMessage(messages.yourResponse)} ({formatMessage(optional ? messages.optional : messages.required)})
+      </label>
+      <Editor
+        name="rich-text-response"
+        initialValue={value}
+        init={{
+          menubar: false,
+          statusbar: false,
+          skin: false,
+          content_css: false,
+          height: '300',
+          schema: 'html5',
+          plugins: 'code image link lists',
+          ...extraConfig,
+        }}
+        onChange={(e) => setValue(e.target.getContent())}
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+RichTextEditor.defaultProps = {
+  disabled: false,
+  initialValue: '',
+  optional: false,
+};
+
+RichTextEditor.propTypes = {
+  // id: PropTypes.string.isRequired,
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }).isRequired,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    submitFailed: PropTypes.bool,
+    error: PropTypes.string,
+  }).isRequired,
+  disabled: PropTypes.bool,
+  initialValue: PropTypes.string,
+  optional: PropTypes.bool,
+};
+
+export default RichTextEditor;

src/components/TextResponse/Editor.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { TextArea } from '@edx/paragon';
+import { StrictDict } from '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  value: 'value',
+});
+
+const TextEditor = ({
+  // id,
+  initialValue,
+  disabled,
+  optional,
+}) => {
+  const { formatMessage } = useIntl();
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <TextArea
+      name="text-response"
+      className="textarea-response"
+      label={`
+        ${formatMessage(messages.yourResponse)} (${formatMessage(optional ? messages.optional : messages.required)})
+      `}
+      value={value}
+      onChange={setValue}
+      placeholder={formatMessage(messages.textResponsePlaceholder)}
+      disabled={disabled}
+    />
+  );
+};
+
+TextEditor.defaultProps = {
+  disabled: false,
+  initialValue: '',
+  optional: false,
+};
+
+TextEditor.propTypes = {
+  // id: PropTypes.string.isRequired,
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }).isRequired,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    submitFailed: PropTypes.bool,
+    error: PropTypes.string,
+  }).isRequired,
+  disabled: PropTypes.bool,
+  initialValue: PropTypes.string,
+  optional: PropTypes.bool,
+};
+
+export default TextEditor;

src/components/TextResponse/RichTextEditor.jsx

@@ -2,23 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  // useSubmissionConfig,
-  useSubmissionResponse,
+  useSubmissionConfig,
+  // useSubmissionResponse,
   // useSubmissionStatus,
   // useSubmissionTeamInfo,
 } from 'data/services/lms/hooks/selectors';
 
-export const TextResponse = ({
-  promptIndex,
-}) => {
-  // const config = useSubmissionConfig().textResponseConfig;
-  const response = useSubmissionResponse();
-  // const submissionStatus = useSubmissionStatus();
-  // const teamInfo = useSubmissionTeamInfo();
+import TextEditor from 'components/TextResponse/TextEditor';
+import RichTextEditor from 'components/TextResponse/RichTextEditor';
+
+import './index.scss';
+
+export const TextResponse = () => {
+  const { textResponseConfig } = useSubmissionConfig();
+  const { optional, enabled } = textResponseConfig;
+  const props = {
+    optional,
+    disabled: !enabled,
+  };
+
   return (
-    <div>
-      <h3>Text Response</h3>
-      {response.textResponses[promptIndex]}
+    <div className="mt-2">
+      {
+        textResponseConfig?.editorType === 'text' ? <TextEditor {...props} /> : <RichTextEditor {...props} />
+      }
     </div>
   );
 };

src/components/TextResponse/TextEditor.jsx

@@ -0,0 +1,5 @@
+.textarea-response {
+  min-height: 200px;
+  max-height: 300px;
+  overflow-y: scroll;
+}

src/components/TextResponse/index.jsx

@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  textResponsePlaceholder: {
+    defaultMessage: 'Enter your response to the prompt above',
+    description: 'Placeholder text for the text response input field',
+    id: 'frontend-app-ora.TextResponse.textResponsePlaceholder',
+  },
+  yourResponse: {
+    defaultMessage: 'Your response',
+    description: 'Label for the text response input field',
+    id: 'frontend-app-ora.TextResponse.yourResponse',
+  },
+  required: {
+    defaultMessage: 'Required',
+    description: 'Label for the required indicator',
+    id: 'frontend-app-ora.TextResponse.required',
+  },
+  optional: {
+    defaultMessage: 'Optional',
+    description: 'Label for the optional indicator',
+    id: 'frontend-app-ora.TextResponse.optional',
+  },
+});
+
+export default messages;

src/components/TextResponse/index.scss

@@ -50,8 +50,18 @@ describe('lms api hooks', () => {
       expect(out.queryKey).toEqual([queryKeys.oraConfig]);
     });
     it('initializes query with promise pointing to assessment text', async () => {
+      const old = window.location;
+      Object.defineProperty(window, "location", {
+        value: new URL(`http://dummy.com/text`),
+        writable: true,
+      });
       const response = await out.queryFn();
       expect(response).toEqual(fakeData.oraConfig.assessmentText);
+      window.location = old;
+    });
+    it('initializes query with promise pointing to assessment tinyMCE', async () => {
+      const response = await out.queryFn();
+      expect(response).toEqual(fakeData.oraConfig.assessmentTinyMCE);
     });
     it('returns camelCase object from data if data has been returned', () => {
       expect(out.data).toEqual(camelCaseObject(fakeData.oraConfig.assessmentText));

src/components/TextResponse/messages.js

@@ -12,7 +12,10 @@ export const useORAConfig = (): types.QueryData<types.ORAConfig> => {
   const { data, ...status } = useQuery({
     queryKey: [queryKeys.oraConfig],
     // queryFn: () => getAuthenticatedClient().get(...),
-    queryFn: () => Promise.resolve(fakeData.oraConfig.assessmentText),
+    queryFn: () => {
+      const result = window.location.pathname.endsWith('text') ? fakeData.oraConfig.assessmentText : fakeData.oraConfig.assessmentTinyMCE;
+      return Promise.resolve(result);
+    },
   });
   return {
     ...status,