feat: added markdown editor for editing problems in markdown format

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@codemirror/lang-html": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",

src/editors/Editor.tsx

@@ -13,6 +13,7 @@ import AdvancedEditor from './AdvancedEditor';
 export interface Props extends EditorComponent {
   blockType: string;
   blockId: string | null;
+  isMarkdownEditorEnabledForCourse: boolean;
   learningContextId: string | null;
   lmsEndpointUrl: string | null;
   studioEndpointUrl: string | null;
@@ -23,6 +24,7 @@ const Editor: React.FC<Props> = ({
   learningContextId,
   blockType,
   blockId,
+  isMarkdownEditorEnabledForCourse,
   lmsEndpointUrl,
   studioEndpointUrl,
   onClose = null,
@@ -34,6 +36,7 @@ const Editor: React.FC<Props> = ({
     data: {
       blockId,
       blockType,
+      isMarkdownEditorEnabledForCourse,
       learningContextId,
       lmsEndpointUrl,
       studioEndpointUrl,

src/editors/EditorContainer.test.jsx

@@ -24,6 +24,13 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   }),
 }));
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: () => ({
+    useReactMarkdownEditor: true, // or false depending on the test
+  }),
+}));
+
 const props = { learningContextId: 'cOuRsEId' };
 
 describe('Editor Container', () => {

src/editors/EditorContainer.tsx

@@ -5,11 +5,13 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Hyperlink } from '@openedx/paragon';
 import { Warning as WarningIcon } from '@openedx/paragon/icons';
 
+import { useSelector } from 'react-redux';
 import EditorPage from './EditorPage';
 import AlertMessage from '../generic/alert-message';
 import messages from './messages';
 import { getLibraryId } from '../generic/key-utils';
 import { createCorrectInternalRoute } from '../utils';
+import { getWaffleFlags } from '../data/selectors';
 
 interface Props {
   /** Course ID or Library ID */
@@ -37,6 +39,8 @@ const EditorContainer: React.FC<Props> = ({
   const location = useLocation();
   const [searchParams] = useSearchParams();
   const upstreamLibRef = searchParams.get('upstreamLibRef');
+  const waffleFlags = useSelector(getWaffleFlags);
+  const isMarkdownEditorEnabledForCourse = waffleFlags?.useReactMarkdownEditor;
 
   if (blockType === undefined || blockId === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
@@ -76,6 +80,7 @@ const EditorContainer: React.FC<Props> = ({
         courseId={learningContextId}
         blockType={blockType}
         blockId={blockId}
+        isMarkdownEditorEnabledForCourse={isMarkdownEditorEnabledForCourse}
         studioEndpointUrl={getConfig().STUDIO_BASE_URL}
         lmsEndpointUrl={getConfig().LMS_BASE_URL}
         onClose={onClose ? () => onClose(location.state?.from) : null}

src/editors/EditorPage.tsx

@@ -11,6 +11,7 @@ interface Props extends EditorComponent {
   blockId?: string;
   blockType: string;
   courseId: string;
+  isMarkdownEditorEnabledForCourse?: boolean;
   lmsEndpointUrl?: string;
   studioEndpointUrl?: string;
   fullScreen?: boolean;
@@ -25,6 +26,7 @@ const EditorPage: React.FC<Props> = ({
   courseId,
   blockType,
   blockId = null,
+  isMarkdownEditorEnabledForCourse = false,
   lmsEndpointUrl = null,
   studioEndpointUrl = null,
   onClose = null,
@@ -45,6 +47,7 @@ const EditorPage: React.FC<Props> = ({
             learningContextId: courseId,
             blockType,
             blockId,
+            isMarkdownEditorEnabledForCourse,
             lmsEndpointUrl,
             studioEndpointUrl,
             returnFunction,

src/editors/__snapshots__/EditorContainer.test.jsx.snap

@@ -60,6 +60,7 @@ exports[`Editor Container snapshots rendering correctly with expected Input 1`]
     blockId="company-id1"
     blockType="html"
     courseId="cOuRsEId"
+    isMarkdownEditorEnabledForCourse={true}
     lmsEndpointUrl="http://localhost:18000"
     onClose={null}
     returnFunction={null}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap

@@ -52,7 +52,8 @@ exports[`SettingsWidget isLibrary snapshot: renders Settings widget for Advanced
       <div
         className="my-3"
       >
-        <SwitchToAdvancedEditorCard
+        <SwitchEditorCard
+          editorType="advanced"
           problemType="stringresponse"
         />
       </div>
@@ -113,7 +114,8 @@ exports[`SettingsWidget isLibrary snapshot: renders Settings widget page 1`] = `
       <div
         className="my-3"
       >
-        <SwitchToAdvancedEditorCard
+        <SwitchEditorCard
+          editorType="advanced"
           problemType="stringresponse"
         />
       </div>
@@ -174,7 +176,8 @@ exports[`SettingsWidget isLibrary snapshot: renders Settings widget page advance
       <div
         className="my-3"
       >
-        <SwitchToAdvancedEditorCard
+        <SwitchEditorCard
+          editorType="advanced"
           problemType="stringresponse"
         />
       </div>
@@ -261,7 +264,8 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced
       <div
         className="my-3"
       >
-        <SwitchToAdvancedEditorCard
+        <SwitchEditorCard
+          editorType="advanced"
           problemType="stringresponse"
         />
       </div>
@@ -348,7 +352,8 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
       <div
         className="my-3"
       >
-        <SwitchToAdvancedEditorCard
+        <SwitchEditorCard
+          editorType="advanced"
           problemType="stringresponse"
         />
       </div>
@@ -435,7 +440,8 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
       <div
         className="my-3"
       >
-        <SwitchToAdvancedEditorCard
+        <SwitchEditorCard
+          editorType="advanced"
           problemType="stringresponse"
         />
       </div>

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -322,11 +322,11 @@ export const typeRowHooks = ({
   };
 };
 
-export const confirmSwitchToAdvancedEditor = ({
-  switchToAdvancedEditor,
+export const handleConfirmEditorSwitch = ({
+  switchEditor,
   setConfirmOpen,
 }) => {
-  switchToAdvancedEditor();
+  switchEditor();
   setConfirmOpen(false);
   window.scrollTo({
     top: 0,

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js

@@ -382,15 +382,15 @@ describe('Problem settings hooks', () => {
       expect(typeRowProps.updateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.TEXTINPUT });
     });
   });
-  test('test confirmSwitchToAdvancedEditor hook', () => {
-    const switchToAdvancedEditor = jest.fn();
+  test('test handleConfirmEditorSwitch hook', () => {
+    const switchEditor = jest.fn();
     const setConfirmOpen = jest.fn();
     window.scrollTo = jest.fn();
-    hooks.confirmSwitchToAdvancedEditor({
-      switchToAdvancedEditor,
+    hooks.handleConfirmEditorSwitch({
+      switchEditor,
       setConfirmOpen,
     });
-    expect(switchToAdvancedEditor).toHaveBeenCalled();
+    expect(switchEditor).toHaveBeenCalled();
     expect(setConfirmOpen).toHaveBeenCalledWith(false);
     expect(window.scrollTo).toHaveBeenCalled();
   });

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

@@ -14,7 +14,7 @@ import TimerCard from './settingsComponents/TimerCard';
 import TypeCard from './settingsComponents/TypeCard';
 import ToleranceCard from './settingsComponents/Tolerance';
 import GroupFeedbackCard from './settingsComponents/GroupFeedback/index';
-import SwitchToAdvancedEditorCard from './settingsComponents/SwitchToAdvancedEditorCard';
+import SwitchEditorCard from './settingsComponents/SwitchEditorCard';
 import messages from './messages';
 import { showAdvancedSettingsCards } from './hooks';
 
@@ -39,9 +39,9 @@ const SettingsWidget = ({
   images,
   isLibrary,
   learningContextId,
+  showMarkdownEditorButton,
 }) => {
   const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards();
-
   const feedbackCard = () => {
     if ([ProblemTypeKeys.MULTISELECT].includes(problemType)) {
       return (
@@ -153,8 +153,14 @@ const SettingsWidget = ({
             </div>
           )}
           <div className="my-3">
-            <SwitchToAdvancedEditorCard problemType={problemType} />
+            <SwitchEditorCard problemType={problemType} editorType="advanced" />
           </div>
+          { showMarkdownEditorButton
+          && (
+          <div className="my-3">
+            <SwitchEditorCard problemType={problemType} editorType="markdown" />
+          </div>
+          )}
         </Collapsible.Body>
       </Collapsible.Advanced>
     </div>
@@ -196,6 +202,7 @@ SettingsWidget.propTypes = {
   isLibrary: PropTypes.bool.isRequired,
   // eslint-disable-next-line
   settings: PropTypes.any.isRequired,
+  showMarkdownEditorButton: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = (state) => ({
@@ -208,6 +215,8 @@ const mapStateToProps = (state) => ({
   images: selectors.app.images(state),
   isLibrary: selectors.app.isLibrary(state),
   learningContextId: selectors.app.learningContextId(state),
+  showMarkdownEditorButton: selectors.app.isMarkdownEditorEnabledForCourse(state)
+  && selectors.problem.rawMarkdown(state),
 });
 
 export const mapDispatchToProps = {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx

@@ -17,7 +17,7 @@ jest.mock('./settingsComponents/HintsCard', () => 'HintsCard');
 jest.mock('./settingsComponents/ResetCard', () => 'ResetCard');
 jest.mock('./settingsComponents/ScoringCard', () => 'ScoringCard');
 jest.mock('./settingsComponents/ShowAnswerCard', () => 'ShowAnswerCard');
-jest.mock('./settingsComponents/SwitchToAdvancedEditorCard', () => 'SwitchToAdvancedEditorCard');
+jest.mock('./settingsComponents/SwitchEditorCard', () => 'SwitchEditorCard');
 jest.mock('./settingsComponents/TimerCard', () => 'TimerCard');
 jest.mock('./settingsComponents/TypeCard', () => 'TypeCard');
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js

@@ -157,26 +157,46 @@ const messages = defineMessages({
     defaultMessage: 'Type',
     description: 'Type settings card title',
   },
-  SwitchButtonLabel: {
-    id: 'authoring.problemeditor.settings.switchtoadvancededitor.label',
+  'SwitchButtonLabel-advanced': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.label.advanced',
     defaultMessage: 'Switch to advanced editor',
-    description: 'button to switch to the advanced mode of the editor.',
+    description: 'button to switch to the advanced mode of the editor',
   },
-  ConfirmSwitchMessage: {
-    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessage',
+  'SwitchButtonLabel-markdown': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.label.markdown',
+    defaultMessage: 'Switch to markdown editor',
+    description: 'button to switch to the markdown editor',
+  },
+  'ConfirmSwitchMessage-advanced': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.ConfirmSwitchMessage.advanced',
     defaultMessage: 'If you use the advanced editor, this problem will be converted to OLX and you will not be able to return to the simple editor.',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
-  ConfirmSwitchMessageTitle: {
-    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessageTitle',
+  'ConfirmSwitchMessage-markdown': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.ConfirmSwitchMessage.markdown',
+    defaultMessage: 'If you use the markdown editor, this problem will be converted to markdown and you will not be able to return to the simple editor.',
+    description: 'message to confirm that a user wants to use the advanced editor',
+  },
+  'ConfirmSwitchMessageTitle-advanced': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.ConfirmSwitchMessageTitle.advanced',
     defaultMessage: 'Convert to OLX?',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
-  ConfirmSwitchButtonLabel: {
-    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchButtonLabel',
+  'ConfirmSwitchMessageTitle-markdown': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.ConfirmSwitchMessageTitle.markdown',
+    defaultMessage: 'Convert to Markdown?',
+    description: 'message to confirm that a user wants to use the markdown editor',
+  },
+  'ConfirmSwitchButtonLabel-advanced': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.ConfirmSwitchButtonLabel.advanced',
     defaultMessage: 'Switch to advanced editor',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
+  'ConfirmSwitchButtonLabel-markdown': {
+    id: 'authoring.problemeditor.settings.switchtoeditor.ConfirmSwitchButtonLabel.markdown',
+    defaultMessage: 'Switch to markdown editor',
+    description: 'message to confirm that a user wants to use the markdown editor',
+  },
   explanationInputLabel: {
     id: 'authoring.problemeditor.settings.showAnswer.explanation.inputLabel',
     defaultMessage: 'Explanation',