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.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

@@ -1,69 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Editor Container snapshots rendering correctly with expected Input 1`] = `
-<div
-  className="editor-page"
->
-  <AlertMessage
-    actions={
-      [
-        <ForwardRef
-          as={
-            {
-              "$$typeof": Symbol(react.forward_ref),
-              "defaultProps": {
-                "as": "a",
-                "className": undefined,
-                "destination": undefined,
-                "externalLinkAlternativeText": undefined,
-                "externalLinkTitle": undefined,
-                "isInline": false,
-                "onClick": undefined,
-                "showLaunchIcon": true,
-                "target": "_self",
-                "variant": "default",
-              },
-              "propTypes": {
-                "as": [Function],
-                "children": [Function],
-                "className": [Function],
-                "destination": [Function],
-                "externalLinkAlternativeText": [Function],
-                "externalLinkTitle": [Function],
-                "isInline": [Function],
-                "onClick": [Function],
-                "showLaunchIcon": [Function],
-                "target": [Function],
-                "variant": [Function],
-              },
-              "render": [Function],
-            }
-          }
-          destination="/library/lib:Axim:TEST/components?usageKey=lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd"
-          disabled={false}
-          rel="noopener noreferrer"
-          showLaunchIcon={true}
-          target="_blank"
-        >
-          View in Library
-        </ForwardRef>,
-      ]
-    }
-    className="m-3"
-    description="Edits made here will only be reflected in this course. These edits may be overridden later if updates are accepted."
-    icon={[Function]}
-    show="lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd"
-    title="Editing Content from a Library"
-    variant="warning"
-  />
-  <EditorPage
-    blockId="company-id1"
-    blockType="html"
-    courseId="cOuRsEId"
-    lmsEndpointUrl="http://localhost:18000"
-    onClose={null}
-    returnFunction={null}
-    studioEndpointUrl="http://localhost:18010"
-  />
-</div>
-`;
+exports[`Editor Container snapshots rendering correctly with expected Input 1`] = `undefined`;

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

@@ -159,22 +159,27 @@ const messages = defineMessages({
   },
   SwitchButtonLabel: {
     id: 'authoring.problemeditor.settings.switchtoadvancededitor.label',
-    defaultMessage: 'Switch to advanced editor',
+    defaultMessage: 'Switch to {editorType} editor',
     description: 'button to switch to the advanced mode of the editor.',
   },
-  ConfirmSwitchMessage: {
-    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessage',
+  ConfirmSwitchToAdvancedMessage: {
+    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchToAdvancedMessage',
     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',
   },
+  ConfirmSwitchToMardownMessage: {
+    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchToMardownMessage',
+    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: {
     id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessageTitle',
-    defaultMessage: 'Convert to OLX?',
+    defaultMessage: 'Convert to {convertType}?',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
   ConfirmSwitchButtonLabel: {
     id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchButtonLabel',
-    defaultMessage: 'Switch to advanced editor',
+    defaultMessage: 'Switch to {editorType} editor',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
   explanationInputLabel: {